├── .gitattributes ├── .editorconfig ├── .gitignore ├── src ├── index.html └── app.js ├── LICENSE ├── .verb.md ├── package.json ├── README.md ├── gulpfile.js └── .eslintrc.json /.gitattributes: -------------------------------------------------------------------------------- 1 | # Enforce Unix newlines 2 | * text eol=lf 3 | 4 | # binaries 5 | *.ai binary 6 | *.psd binary 7 | *.jpg binary 8 | *.gif binary 9 | *.png binary 10 | *.jpeg binary 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | end_of_line = lf 6 | charset = utf-8 7 | indent_size = 2 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [{**/{actual,fixtures,expected,templates}/**,*.md}] 12 | trim_trailing_whitespace = false 13 | insert_final_newline = false -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # always ignore files 2 | *.DS_Store 3 | *.sublime-* 4 | 5 | # test related, or directories generated by tests 6 | test/actual 7 | actual 8 | coverage 9 | .nyc* 10 | 11 | # npm 12 | node_modules 13 | npm-debug.log 14 | 15 | # yarn 16 | yarn.lock 17 | yarn-error.log 18 | 19 | # misc 20 | _gh_pages 21 | _draft 22 | _drafts 23 | bower_components 24 | vendor 25 | temp 26 | tmp 27 | TODO.md 28 | package-lock.json -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | example 5 | 6 | 7 |

8 |

Example

9 |

Enter some text in the box and it will be turned into dash case using the {{dashcase}} helper.

10 |

11 |

12 |

13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | 2 | var $ = require('jquery'); 3 | var helpers = require('handlebars-helpers')({ 4 | handlebars: Handlebars 5 | }); 6 | 7 | $(function() { 8 | var name = $('#name').on('keyup', function(e) { 9 | if (name.val().length > 1) { 10 | var data = {name: name.val()}; 11 | render(data); 12 | } 13 | }); 14 | 15 | name.focus(); 16 | 17 | var tmpl = "

"; 18 | var fn = Handlebars.compile(tmpl); 19 | 20 | function render(data) { 21 | var content = fn(data); 22 | $('#content').html(content); 23 | } 24 | }); 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016-2018, Brian Woodward. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /.verb.md: -------------------------------------------------------------------------------- 1 | ## Quick start 2 | 3 | - Install gulp-cli: 4 | ```bash 5 | $ npm install gulp-cli --global 6 | ``` 7 | - Clone this package: 8 | ```bash 9 | $ git clone https://github.com/doowb/handlebars-helpers-browserify-example.git 10 | $ cd handlebars-helpers-browserify-example.git 11 | ``` 12 | - Install npm dependencies: 13 | ```bash 14 | $ npm install 15 | ``` 16 | - Run gulp to build and open the project in the browser: 17 | ```bash 18 | $ gulp dev 19 | ``` 20 | 21 | ## What is this? 22 | 23 | This is a simple example showing how to use [browserify][] to bundle up an app using [handlebars-helpers][]. 24 | 25 | The `app` can be found in [src/app.js](./src/app.js) and is used in [src/index.html](./src/index.html). 26 | 27 | To build the `app` run the following command: 28 | 29 | ```sh 30 | $ gulp 31 | ``` 32 | 33 | This will browserify `app.js` and create a distribution file in `_gh_pages/app.js`. 34 | 35 | Load `_gh_pages/index.html` in a browser and open up the console to see sample output. 36 | 37 | ## Dev 38 | 39 | Use the following command to run a [browser-sync][] server and have live-reloads. Making changes to `src` files will rebuild and reload the example. 40 | 41 | ```sh 42 | $ gulp dev 43 | ``` 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "handlebars-helpers-browserify-example", 3 | "description": "Example using handlebars-helpers in a web browser with browserify.", 4 | "version": "0.1.0", 5 | "homepage": "https://github.com/doowb/handlebars-helpers-browserify-example", 6 | "author": "Brian Woodward (https://github.com/doowb)", 7 | "repository": "doowb/handlebars-helpers-browserify-example", 8 | "bugs": { 9 | "url": "https://github.com/doowb/handlebars-helpers-browserify-example/issues" 10 | }, 11 | "license": "MIT", 12 | "files": [ 13 | "gulpfile.js" 14 | ], 15 | "main": "gulpfile.js", 16 | "engines": { 17 | "node": ">=0.10.0" 18 | }, 19 | "dependencies": { 20 | "handlebars-helpers": "^0.10.0", 21 | "jquery": "^3.3.1" 22 | }, 23 | "devDependencies": { 24 | "browser-sync": "^2.12.8", 25 | "browserify": "^13.0.1", 26 | "delete": "^0.3.2", 27 | "gulp": "^4.0.0", 28 | "gulp-format-md": "*", 29 | "gulp-gh-pages": "^0.5.4", 30 | "vinyl-buffer": "^1.0.1", 31 | "vinyl-source-stream": "^2.0.0" 32 | }, 33 | "keywords": [ 34 | "browserify", 35 | "example", 36 | "handlebars", 37 | "helpers" 38 | ], 39 | "verb": { 40 | "toc": false, 41 | "layout": "minimal", 42 | "tasks": [ 43 | "readme" 44 | ], 45 | "plugins": [ 46 | "gulp-format-md" 47 | ], 48 | "reflinks": [ 49 | "browser-sync", 50 | "browserify", 51 | "handlebars-helpers", 52 | "verb" 53 | ], 54 | "lint": { 55 | "reflinks": true 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Quick start 2 | 3 | * Install gulp-cli: 4 | ```bash 5 | $ npm install gulp-cli --global 6 | ``` 7 | * Clone this package: 8 | ```bash 9 | $ git clone https://github.com/doowb/handlebars-helpers-browserify-example.git 10 | $ cd handlebars-helpers-browserify-example.git 11 | ``` 12 | * Install npm dependencies: 13 | ```bash 14 | $ npm install 15 | ``` 16 | * Run gulp to build and open the project in the browser: 17 | ```bash 18 | $ gulp dev 19 | ``` 20 | 21 | ## What is this? 22 | 23 | This is a simple example showing how to use [browserify](https://github.com/browserify/browserify) to bundle up an app using [handlebars-helpers](https://github.com/helpers/handlebars-helpers). 24 | 25 | The `app` can be found in [src/app.js](./src/app.js) and is used in [src/index.html](./src/index.html). 26 | 27 | To build the `app` run the following command: 28 | 29 | ```sh 30 | $ gulp 31 | ``` 32 | 33 | This will browserify `app.js` and create a distribution file in `_gh_pages/app.js`. 34 | 35 | Load `_gh_pages/index.html` in a browser and open up the console to see sample output. 36 | 37 | ## Dev 38 | 39 | Use the following command to run a [browser-sync](https://browsersync.io/) server and have live-reloads. Making changes to `src` files will rebuild and reload the example. 40 | 41 | ```sh 42 | $ gulp dev 43 | ``` 44 | 45 | ## Author 46 | 47 | **Brian Woodward** 48 | 49 | * [github/doowb](https://github.com/doowb) 50 | * [twitter/doowb](https://twitter.com/doowb) 51 | 52 | ## License 53 | 54 | Copyright © 2018, [Brian Woodward](https://github.com/doowb). 55 | Released under the [MIT License](LICENSE). 56 | 57 | *** 58 | 59 | _This file was generated by [verb-generate-readme](https://github.com/verbose/verb-generate-readme), v0.6.0, on March 20, 2018._ -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var browserSync = require('browser-sync').create(); 4 | var browserify = require('browserify'); 5 | var ghPages = require('gulp-gh-pages'); 6 | var gulp = require('gulp'); 7 | var del = require('delete'); 8 | var source = require('vinyl-source-stream'); 9 | var buffer = require('vinyl-buffer'); 10 | 11 | gulp.task('browserify', function () { 12 | var b = browserify({ 13 | entries: './src/app.js', 14 | debug: true, 15 | // Tell browserify that Handlebars is loaded already 16 | external: 'Handlebars' 17 | }); 18 | 19 | // ignore the internal handlebars require 20 | b.ignore('handlebars'); 21 | 22 | return b.bundle() 23 | .pipe(source('app.js')) 24 | .pipe(buffer()) 25 | .pipe(gulp.dest('./_gh_pages/')) 26 | .pipe(browserSync.stream()); 27 | }); 28 | 29 | gulp.task('cleanPublish', function(cb) { 30 | del('./.publish', {force: true}, cb); 31 | }); 32 | 33 | gulp.task('cleanDest', function(cb) { 34 | del('./_gh_pages', {force: true}, cb); 35 | }); 36 | 37 | gulp.task('clean', gulp.parallel(['cleanPublish', 'cleanDest'])); 38 | 39 | gulp.task('copy', function() { 40 | return gulp.src('./src/index.html') 41 | .pipe(gulp.dest('_gh_pages')) 42 | .pipe(browserSync.stream()); 43 | }); 44 | 45 | gulp.task('serve', function(cb) { 46 | browserSync.init({ 47 | port: 8080, 48 | startPath: 'index.html', 49 | server: { 50 | baseDir: '_gh_pages' 51 | } 52 | }, cb); 53 | }); 54 | 55 | gulp.task('watch', function() { 56 | gulp.watch(['./src/**/*'], gulp.series('build')); 57 | }); 58 | 59 | gulp.task('push', function() { 60 | return gulp.src('_gh_pages/**/*') 61 | .pipe(ghPages()); 62 | }); 63 | gulp.task('deploy', gulp.series(['push', 'cleanPublish'])); 64 | 65 | gulp.task('build', gulp.series('clean', gulp.parallel(['browserify', 'copy']))); 66 | gulp.task('dev', gulp.series('build', gulp.parallel('serve', 'watch'))); 67 | gulp.task('default', gulp.series('build')); 68 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": false, 4 | "es6": true, 5 | "node": true, 6 | "mocha": true 7 | }, 8 | 9 | "globals": { 10 | "document": false, 11 | "navigator": false, 12 | "window": false 13 | }, 14 | 15 | "rules": { 16 | "accessor-pairs": 2, 17 | "arrow-spacing": [2, { "before": true, "after": true }], 18 | "block-spacing": [2, "always"], 19 | "brace-style": [2, "1tbs", { "allowSingleLine": true }], 20 | "comma-dangle": [2, "never"], 21 | "comma-spacing": [2, { "before": false, "after": true }], 22 | "comma-style": [2, "last"], 23 | "constructor-super": 2, 24 | "curly": [2, "multi-line"], 25 | "dot-location": [2, "property"], 26 | "eol-last": 2, 27 | "eqeqeq": [2, "allow-null"], 28 | "generator-star-spacing": [2, { "before": true, "after": true }], 29 | "handle-callback-err": [2, "^(err|error)$" ], 30 | "indent": [2, 2, { "SwitchCase": 1 }], 31 | "key-spacing": [2, { "beforeColon": false, "afterColon": true }], 32 | "keyword-spacing": [2, { "before": true, "after": true }], 33 | "new-cap": [2, { "newIsCap": true, "capIsNew": false }], 34 | "new-parens": 2, 35 | "no-array-constructor": 2, 36 | "no-caller": 2, 37 | "no-class-assign": 2, 38 | "no-cond-assign": 2, 39 | "no-const-assign": 2, 40 | "no-control-regex": 2, 41 | "no-debugger": 2, 42 | "no-delete-var": 2, 43 | "no-dupe-args": 2, 44 | "no-dupe-class-members": 2, 45 | "no-dupe-keys": 2, 46 | "no-duplicate-case": 2, 47 | "no-empty-character-class": 2, 48 | "no-eval": 2, 49 | "no-ex-assign": 2, 50 | "no-extend-native": 2, 51 | "no-extra-bind": 2, 52 | "no-extra-boolean-cast": 2, 53 | "no-extra-parens": [2, "functions"], 54 | "no-fallthrough": 2, 55 | "no-floating-decimal": 2, 56 | "no-func-assign": 2, 57 | "no-implied-eval": 2, 58 | "no-inner-declarations": [2, "functions"], 59 | "no-invalid-regexp": 2, 60 | "no-irregular-whitespace": 2, 61 | "no-iterator": 2, 62 | "no-label-var": 2, 63 | "no-labels": 2, 64 | "no-lone-blocks": 2, 65 | "no-mixed-spaces-and-tabs": 2, 66 | "no-multi-spaces": 2, 67 | "no-multi-str": 2, 68 | "no-multiple-empty-lines": [2, { "max": 1 }], 69 | "no-native-reassign": 0, 70 | "no-negated-in-lhs": 2, 71 | "no-new": 2, 72 | "no-new-func": 2, 73 | "no-new-object": 2, 74 | "no-new-require": 2, 75 | "no-new-wrappers": 2, 76 | "no-obj-calls": 2, 77 | "no-octal": 2, 78 | "no-octal-escape": 2, 79 | "no-proto": 0, 80 | "no-redeclare": 2, 81 | "no-regex-spaces": 2, 82 | "no-return-assign": 2, 83 | "no-self-compare": 2, 84 | "no-sequences": 2, 85 | "no-shadow-restricted-names": 2, 86 | "no-spaced-func": 2, 87 | "no-sparse-arrays": 2, 88 | "no-this-before-super": 2, 89 | "no-throw-literal": 2, 90 | "no-trailing-spaces": 0, 91 | "no-undef": 2, 92 | "no-undef-init": 2, 93 | "no-unexpected-multiline": 2, 94 | "no-unneeded-ternary": [2, { "defaultAssignment": false }], 95 | "no-unreachable": 2, 96 | "no-unused-vars": [2, { "vars": "all", "args": "none" }], 97 | "no-useless-call": 0, 98 | "no-with": 2, 99 | "one-var": [0, { "initialized": "never" }], 100 | "operator-linebreak": [0, "after", { "overrides": { "?": "before", ":": "before" } }], 101 | "padded-blocks": [0, "never"], 102 | "quotes": [2, "single", "avoid-escape"], 103 | "radix": 2, 104 | "semi": [2, "always"], 105 | "semi-spacing": [2, { "before": false, "after": true }], 106 | "space-before-blocks": [2, "always"], 107 | "space-before-function-paren": [2, "never"], 108 | "space-in-parens": [2, "never"], 109 | "space-infix-ops": 2, 110 | "space-unary-ops": [2, { "words": true, "nonwords": false }], 111 | "spaced-comment": [0, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","] }], 112 | "use-isnan": 2, 113 | "valid-typeof": 2, 114 | "wrap-iife": [2, "any"], 115 | "yoda": [2, "never"] 116 | } 117 | } 118 | --------------------------------------------------------------------------------

Example

{{dashcase name}}