plugin-hbs

NPM compatible Handlebars template loader plugin for SystemJS without the need for JSPM.

installation

npm install vpro/plugin-hbs

usage

You have to tell SystemJS to connect this plugin with the right extension, as well as defining a mapping for the Handlebars templating library and it's runtime, the latter being used to make the precompiled templates available which also means you have to register partials on that runtime.

Use the following map configuration in your SystemJS config:

System.config({
  'map': {
    'handlebars': 'path/to/handlebars/dist/handlebars.min.js',
    'handlebars-runtime': 'path/to/handlebars/dist/handlebars.runtime.min.js',
    'hbs: 'path/to/plugin-hbs/hbs.js'
  }
});

The plugin is an ES6 module, so be sure to also have a transpiler configured.

You can now import your .hbs files as such:

In your modules:

import template from './myTemplate.hbs!'; // or ./myTemplate.html!hbs

export function renderMyData ( viewModel ) {

  return template( viewModel );
}

In an HTML page:

<script>

    System.import('./myTemplate.hbs!').then( function ( myTemplate ) {

        document.querySelector('body').innerHTML = myTemplate({ viewModelKey: 'viewModelValue' });
    });
    
</script>

partials

To be able to use partials, you will have to register them onto an instance of the Handlebars runtime, because the plugin-hbs precompiles all templates through it.

Example:

import precompiledPartialTemplate from './myPartial.hbs!';
import HandlebarsRuntime from 'handlebars-runtime';

HandlebarsRuntime.registerPartial( 'myPartial', precompiledPartialTemplate );

development

code linting

Run npm run lint to lint the plugin's code with eslint.

testing

For testing purposes, use npm run test-plugin to start a webserver on localhost:9090. Navigate to the test folder and you'll see the plugin in action.

versions

1.5.0 Added npm build script that generates an AMD module in /dist/

1.4.0 Using minified sources and you now need to define the location of the handlebars runtime, which means you can decided which one is used en use it for partial registering.

1.3.0 plugin is now NPM(3) compatible, no need for JSPM