hbsfy

Handlebars precompiler plugin for Browserify v2

npm install hbsfy
73 downloads in the last day
646 downloads in the last week
3 509 downloads in the last month

Build Status

hbsfy

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!

Usage

Install hbsfy locally to your project:

npm install hbsfy

Handlebars will be automatically installed as peer dependency.

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>

Programmatic usage

When compiling using Javascript code custom extensions can be set:

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"));

Helpers

To register custom helpers just require the runtime use and registerHelper to create helper:

var Handlebars = require("hbsfy/runtime");
Handlebars.registerHelper("upcase", function(s) {
  return s.toUpperCase();
});

Partials

Partials can be created by giving precompiled template to the registerPartial function.

Handlebars.registerPartial('link', require("./partial.hbs"));

Checkout the example folder for details.

Use in gulp

You can easily use hbsfy in gulp with gulp-browserify:

gulp.task('js', function() {
  gulp.src('js/app.js')
    .pipe(browserify({
      insertGlobals: true,
      transform: ['hbsfy']
    }))
    .pipe(concat('app.js'))
    .pipe(gulp.dest('./public/js'));
});

Changelog

1.3.0

  • Support Handlebars 1.3
  • Now uses the official runtime api

1.0.0

  • Remove handlebars-runtime dependency and depend directly on the handlebars module as a peer dependency.
    • Runtime must be now required with require("hbsfy/runtime") instead of require("handlebars-runtime").
    • Thanks to @kamicane for teaching me how to do this.
  • Option to configure template extensions
npm loves you