component-builder-hbs

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