Component builder plugin to parse Handlebars templates
JavaScript Shell
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
src
test
.gitignore
Gruntfile.js
LICENSE
README.md
handlebars.runtime.js
index.js
package.json

README.md

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