Handlebars precompiler plugin for Browserify without magic.
Compiles Handlebars templates to plain Javascript. The compiled templates only have one copy of the Handlebars runtime so they are lightweight and fast!
Install hbsfy locally to your project:
npm install --save-dev hbsfy
You will also need Handlebars installed. Handlebars 1, 2, 3, and 4 are supported for now (use 4 for best results):
npm install --save-dev handlebars
Then use it as Browserify transform module with -t
:
browserify -t hbsfy main.js > bundle.js
where main.js can be like:
var template = require("./template.hbs");
document.body.innerHTML = template({ name: "Epeli" });
and template.hbs:
<h1>Hello {{name}}!</h1>
You can use --extensions
or -e
subarg option to configure custom extensions
for the transform:
browserify -t [ hbsfy -e html,htm ] main.js > bundle.js
You can specify how the templates are precompiled by using -p
or --precompiler
, which
might also be used with the -c
or --compiler
option, like so:
browserify -t [ hbsfy -p ember-template-compiler -c Ember.Handlebars ] main.js > bundle.js
By default the precompiler is the handlebars node module
and the compiler is "require('hbsfy/runtime')"
.
Options for the precompiler can be passed using a precompilerOptions
key.
Example:
Enable myUltimateHelper
only
browserify -t [ hbsfy --precompilerOptions [ --knownHelpersOnly --knownHelpers [ --myUltimateHelper ] ] ] main.js > bundle.js
See Handlebars API reference for details.
Using the --traverse
or -t
option will cause partials to be resolved using node's module resolution algorithm. Be sure to prefix relative paths with ./
or ../
as needed. Otherwise the algorithm assumes a node_module
is being referenced.
Example:
browserify -t [ hbsfy -t ] main.js > bundle.js
<!-- main.hbs -->
<div>{{> ./path/to/partial.hbs }}</div>
<!-- path/to/partial.hbs -->
<p>I'm a partial</p>
If you are using Common JS partial resolution (setting the --traverse
flag) and you are using Handlebars 4.0.0 or later, you can still use inline partials. Make sure to not use inline partial names that conflict with node_module
dependencies. The inline partial will be used over a dependency reference.
Transform can be configured from the package.json too.
{
"browserify": {
"transform": [
[
"hbsfy",
{
"extensions": [
"html"
],
"precompilerOptions": {
"knownHelpersOnly": true,
"knownHelpers": {
"myUltimateHelper": true
}
}
}
]
]
}
}
The precompiler
and compiler
keys are naturally available too.
See module-deps documentation for more information as this feature is implemented there (it's a part of Browserify itself).
The configure
method of the transform can be used to create new transforms
with different defaults.
var hbsfy = require("hbsfy").configure({
extensions: ["html"]
});
var browserify = require("browserify");
var b = browserify("./index.js");
b.transform(hbsfy);
b.bundle().pipe(fs.createWriteStream("./bundle.js"));
To register custom helpers, require the runtime and run registerHelper
to
create helper:
var Handlebars = require("hbsfy/runtime");
Handlebars.registerHelper("upcase", function(s) {
return s.toUpperCase();
});
Partials can be created by giving precompiled template to the registerPartial
function.
Handlebars.registerPartial('link', require("./partial.hbs"));
Checkout the example folder for details.
Note: if using the --traverse
option, partial registration is automatic.
This synchronous method can be used to enable all hsbfy functionality in another environment, such as node or a test runner (such as mocha).
// mocha-hbs.js
var fs = require("fs");
var hbsfy = require("hbsfy");
require.extensions['.hbs'] = function (module, filename) {
var file = fs.readFileSync(filename, "utf8");
var opts = { traverse: true };
return module._compile(hbsfy.compile(file, opts), filename);
}
$ mocha -r hbs:./mocha-hbs.js tests/
Remember to register your custom helpers as well! Ideally your templates themselves require
your helpers and runtime, and call registerHelper
. But if they don't, all helpers can be loaded at once as part of the require hook above:
// mocha-hbs.js
var fs = require("fs");
var hbsfy = require("hbsfy");
var runtime = require("hbsfy/runtime");
var helpers = require("./path/to/my/exported/helpers");
Object.keys(helpers).forEach(function (key) {
runtime.registerHelper(key, helpers[key]);
});
require.extensions['.hbs'] = function (module, filename) {
var file = fs.readFileSync(filename, "utf8");
var opts = { traverse: true };
return module._compile(hbsfy.compile(file, opts), filename);
}
This option accepts a function which takes one argument (the template file content) and returns a string which will be used as the source for the precompiled template object. The example below removes leading and trailing spaces to shorten templates.
hbsfy.configure({
processContent: function(content) {
content = content.replace(/^[\x20\t]+/mg, '').replace(/[\x20\t]+$/mg, '');
content = content.replace(/^[\r\n]+/, '').replace(/[\r\n]*$/, '\n');
return content;
}
});
- Add
processContent
option. #50
- Export
findPartials
andcompile
for use in utilities / test frameworks #49.
- support handlebars 2, 3, 4
- Handle
null
nodes when traversing Handlebars AST.
- Allow resolving / requiring partials using node's module resolution algorithm (
--traverse
). #47
- Emit compile errors instead of crashing. #38
- Support for compiler options #29
- Subargs options for alternate precompilers and compilers #31
- Support Browserify subargs
- The
configure
method does not mutate the inner state of the module anymore- Instead it returns a new transform function.
- Handlebars is not a peerDependency anymore
- It must be manually installed
- This relaxes completely the version binding of Handlebars - it is now possible to try Handlebars 2.0 alpha
- Support Handlebars 1.3
- Now uses the official runtime api
- Remove
handlebars-runtime
dependency and depend directly on thehandlebars
module as a peer dependency.- Runtime must be now required with
require("hbsfy/runtime")
instead ofrequire("handlebars-runtime")
. - Thanks to @kamicane for teaching me how to do this.
- Runtime must be now required with
- Option to configure template extensions