node package manager

hbsp

About

Simple gulp frienly node module to precompile handlebars File. Compared to the standard Handlebars node module precompile, it does support multiple templates per file (with the <script id="template_name">....</script>.

NOTE: Still experimental, not as a npm module yet.

Install

npm install hbsp

Usage

Promise style, for pure js, async/await like coding style.

const fs = require("fs");
const promisify = require("async6").promisify; // could have used https://www.npmjs.com/package/promisify-node 
const hbsPrecompile = require("hbs").precompile;
 
const readFile = promisify(fs.readFile, fs);
 
readFile("./test/multiple.hbs","utf8").then(function(content){
    return precompile("./test/multiple.hbs", content);
}).then(function(template){
    // template: here is the template(s) precompiles 
});

Stream style, for gulp like integration:

const gulp = require("gulp");
const hbsPrecompile = require("hbs").streamPrecompile;
 
gulp.task('hbs', function() {
    gulp.src('*.hbs')
    .pipe(hbsPrecompile())
    .pipe(concat("templates.js"))
    .pipe(gulp.dest("./js/"));
});

File Examples

single.hbs

<p>Hello {{name}}</p>

multiple.hbs

<script id="ProjectListNav" type="text/handlebars">
  <div class="ProjectListNav">
    <h2>Projects</h2>
    <div class="list-container">
 
    </div>
  </div>
</script> 
 
<script id="ProjectListNav-list" type="text/handlebars">
  <ul>
    {{#each projects}}
    <li data-entity="Project" data-entity-id="{{id}}"><class="icon-folder-close"></i>{{title}}</li>
    {{/each}}
  </ul>  
</script> 

When including the templates.js you will get the following variables set as handlebars precompiled function:

Handlebars.templates['single']
Handlebars.templates['ProjectListNav']
Handlebars.templates['ProjectListNav-list'] 

Typically we have the following javascript before the templates.js

1_render.js

// --------- Render --------- // 
// Just a little indirection to render a template using handlebars. 
// This simple indirection allows much flexibility later one,  
// when using pre-compiling or other templating engine are needed. 
 
// The node.js hbsp process will put the precompile function in the Handlebars.templates 
Handlebars.templates = Handlebars.templates || {};
 
$(function(){
    // Make all templates partials (no reason why they should not) 
    // Note: We put this in a jQuery.ready to make sure the Handlebars.templates where loaded (as they should be loaded 
    //       in the head).  
    //       This assumes the "templates.js" is loaded in the <head></head> (which is the case in our best practice) 
    Handlebars.partials =  Handlebars.templates;    
});
 
// Global scope is acceptable for this very generic function (could be namespaced if it is the developer preference) 
function render(templateName,data){
    var tmpl = Handlebars.templates[templateName];
 
    // if not found, try to get it from the DOM and assume the full handlebars 
    if (!tmpl){
        var html = $("#" + templateName).html();
        if (!html){
            throw "Not template found in pre-compiled and in DOM for " + templateName;
        }
        tmpl = Handlebars.compile(html);
        Handlebars.templates[templateName] = tmpl;
    }
 
    // call the function and return the result 
    return tmpl(data);
}
// --------- /Render --------- //