component-builder-hbs

Component builder plugin to parsing Handlebars templates with i18n localisation and Handlebars helper support.

Usage

Installation

npm install component-builder-hbs

Create templates

<b>Hello {{name}}</b><br>
How are you?

Configuration

add a hbs block to your component.json

{
    ...
    "hbs": [
        "templates/template.hbs"
        "templates/secondTemplate.hbs"
    ]
}

Using plugin

Use component-builder-hbs during the component build

component build --use component-builder-hbs

i18n support

Component Builder HBS plugin comes with localization support. Create a folder named locales in your component root. Add for each language one .json file For a custom locales dir, set the path with hbsConfig.locales in your component.json

locales/
  en-US.json
  de-DE.json
  se-SE.json

Now, you can add nested key/values pairs into your language files

{
    "name": "AndiOxidant",
    "msg": {
        "greeding": "Hello"
    }
}

Place a {{$ "key"}} placeholder into your .hbs templates

<h1>{{$ "msg.greeding"}} {{$ "name"}}</h1>

Enable i18n support in your component.json by adding a hbsConfig option.

{
    ...
    "hbsConfig": {
        "i18n": true
    },
    "hbs": [
        "template.hbs",
        "second-template.hbs"
    ]
}

Run the component build with i18n

HBS_LANG=en-US
component build --use component-builder-hbs --name build.en.js
 
HBS_LANG=de-DE
component build --use component-builder-hbs --name build.de.js
 
HBS_LANG=se-SE
component build --use component-builder-hbs --name build.se.js

And you gets several buils.js files. One for each language :)
Include the needed file in the index.html

<script type="text/javascript">
    var lang;
    switch (navigator.language) {
        case 'de-DE':
            lang = 'de';
            break;
        case 'se-SE':
            lang = 'se';
            break;
        default:
            lang = 'en';
    }
    document.write('<script type="text/javascript" src="build/build.' + lang + '.js"></script>');
</script> 

All component.json configuration options

{
    "hbsConfig": {
        "i18n": true,				//Enables localisation support
        "locales": "./locales",		//Set a custom locales dir, defaults to ./locales
        "helper": "./helper"		//Set a custom dir for Handlebars helper
        "defaultLang": "en-US"		//Sets the default language, defaults to en-US
    },
    "hbs": [						//Define all hbs templates
        "main.hbs"
    ]
}

Licence

Copyright (c) 2013 by Andi Heinkelein, NonameMedia
Licensed under the MIT license