Reactive i18n and l10n isomorphic service for Meteor
File based, fast, lightweight (325 lines with comments) and reactive internationalization isomorphic driver for Meteor with support of placeholders.
Demo
- Please see Mongo-based live demo
- Please see Object-based live demo
- Demo source code
Install:
meteor add ostrio:i18n
Object-based structure
1/* Isomorphic (Both server and client) */ 2i18nConfig = { 3 settings: { //--> Config object 4 defaultLocale: "en", 5 ru: { 6 code: "ru", 7 isoCode: "ru-RU", 8 name: "Русский" 9 }, 10 en: { 11 code: "en", 12 isoCode: "en-US", 13 name: "English" 14 } 15 }, 16 ru:{ //--> Localization folder with name of country two-letter code 17 property: "value", 18 property2: { 19 nestedProp: "value" 20 } 21 }, 22 en:{ //--> Localization folder with name of country two-letter code 23 property: "value", 24 property2: { 25 nestedProp: "value" 26 } 27 } 28 ... 29}; 30 31this.i18n = new I18N({driver: 'Object', i18n: i18nConfig});
Mongo-based Files and Folders structure
private/ └─ i18n/ //--> Driver's dir | ├── en/ //--> Localization folder with name of country two-letter code | ├── file.json | └── subFolder/ | └── anotherFile.json | ├── de/ //--> Localization folder with name of country two-letter code | ├── file.json | └── subFolder/ | └── anotherFile.json | └── i18n.json //--> Config file
Initialization
1this.i18n = new I18N(config); 2// `this` is used to create application wide variable
Configuration object:
config.driver
{String: Mongo|Object} - Driver type. UseMongo
for file-based andObject
object-basedconfig.i18n
{Object} - Internalization objectconfig.path
{String} - Path toi18n
folder, default:/assets/app/i18n
(which points to:private/i18n
in dev environment)config.returnKey
{Boolean} - Return key if l10n value not found, default:true
config.collectionName
{String} - i18n Collection name, default:internalization
config.helperName
{String} - Template helper name, default:i18n
config.helperSettingsName
{String} - Settings helper name, default:i18nSettings
config.allowPublishAll
{Boolean} - Allow publish full i18n set to client, default:true
Isomorphic usage
get([locale,] key, [replacements...])
locale
{String} - [Optional] Two-letter locale string, used to force locale, if not set current locale is usedkey
{String} - l10n key like:folder.file.object.key
replacements..
{String|[String]|Object} - [Optional] Replacements for placeholders in l10n string
1i18n.get('file.obj.key'); // Current locale, no replacements 2 3i18n.get(locale, param); // Force locale, no replacements 4i18n.get('en', 'file.obj.key'); 5 6i18n.get(param, replacements); // Current locale, with replacements 7i18n.get('file.obj.key', 'User Name'); // Hello {{username}} -> Hello User Name 8 9i18n.get(locale, param, replacements); // Force locale, with replacements 10i18n.get('en', 'file.obj.key', 'User Name'); // Hello {{username}} -> Hello User Name
setLocale(locale)
locale
{String} - Two-letter locale code
1i18n.setLocale(locale);
Get current localization at any environment
1i18n.currentLocale.get(); // Reactive on Client
Get current default locale
1i18n.defaultLocale;
Get configuration object
1i18n.langugeSet(); 2/* Returns: 3{ 4 current: 'en', // Current locale 5 locales: ['ru', en], // List of locales 6 // All locales 7 all: [{ 8 code: "ru", 9 isoCode: "ru-RU", 10 name: "Русский", 11 path: "i18n/ru/" 12 },{ 13 code: "en", 14 isoCode: "en-US", 15 name: "English", 16 path: "i18n/en/" 17 }], 18 // All locales except current 19 other: [{ 20 code: "ru", 21 isoCode: "ru-RU", 22 name: "Русский", 23 path: "i18n/ru/" 24 }], 25} 26*/
Get specific key from configuration object
key
{String} - One of the keys:current
,all
,other
,locales
,currentISO
,currentName
,currentPath
1i18n.getSetting('current'); // en
Client specific usage
Client's browser locale
1i18n.userLocale; // en-US
subscribeToAll(callback)
callback
{Function} - Callback function triggered right after subscription is ready
Send full i18n and l10n set to client, might be used within iron-router
and fastrender
packages, example:
1i18n = new I18N(); 2Router.route('index', { 3 path: '/', 4 fastRender: true, 5 waitOn: function() { 6 return i18n.subscribeToAll(); 7 } 8});
Template helpers
i18n
- accepts locale
, key
and replacements
:
You may change name of the helper via config object: config.helperName
1<p>{{i18n 'sample.hello'}}</p> 2<p>{{{i18n 'sample.html'}}}</p> 3<p>{{i18n 'sample.fullName'}}</p> 4<p>{{i18n 'sample.fullName' 'Michael' 'A.' 'Macht'}}</p> 5<p>{{i18n 'en' 'sample.fullName' 'Michael' 'A.' 'Macht'}}</p> 6<p>{{i18n 'de' 'sample.fullName' first='Michael' middle='A.' last='Macht'}}</p> 7<p>{{i18n 'sample.fullName' first='Michael' middle='A.' last='Macht'}}</p> 8<p>{{i18n 'sample.fullName' first='Michael' middle='A.' third='Macht'}}</p>
i18nSettings
- accepts configuration object key, one of current
, all
, other
, locales
You may change name of the helper via config object: config.helperSettingsName
1{{#each i18nSettings 'all'}} 2 ... 3{{/each}}
Template language switcher example
1<template name="langSwitch"> 2 {{#each i18nSettings 'all'}} 3 {{#if compare code '==' currentLocale}} 4 <span title="Current language">{{name}}</span> 5 {{else}} 6 <a href="#" data-code="{{code}}" class="switch-language">{{name}}</a> 7 {{/if}} 8 {{/each}} 9</template>
1Template.langSwitch.helpers({ 2 currentLocale: function(){ 3 return i18n.currentLocale.get() 4 } 5}); 6 7Template.langSwitch.events({ 8 'click .switch-language': function(e, template) { 9 e.preventDefault(); 10 i18n.setLocale(e.currentTarget.dataset.code); 11 return false; 12 } 13});
Template helpers compare
, ==
, Session
and many more comes from: ostrio:templatehelpers package