component-builder-hbs

Component builder plugin to parse Handlebars templates

component-builder-hbs

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

npm install component-builder-hbs
<b>Hello {{name}}</b><br>
How are you?

add a hbs block to your component.json

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

Use component-builder-hbs during the component build

component build --use component-builder-hbs

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"
]
}
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> 
{
"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"
]
}

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