Reactive i18n and l10n isomorphic driver
Object based, fast, lightweight (306 lines with comments) and reactive internationalization isomorphic driver for Meteor with support of placeholders, and user's locale auto-detection.
Not tied to Blaze, can be used with Vue.js, React.js or any other JS solution.
Install:
meteor add ostrio:i18n
Import:
1import I18N from 'meteor/ostrio:i18n';
Object-based structure
1/* Isomorphic (Both Server and Client) */ 2const i18nConfig = { 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 with key of country two-letter code 17 property: "value", 18 property2: { 19 nestedProp: "value" 20 }, 21 dynamicProperty(){ 22 return `<a href="/${this.currentLocale.get()}/info">info</a>`; 23 } 24 }, 25 en:{ //--> Localization with key of country two-letter code 26 property: "value", 27 property2: { 28 nestedProp: "value" 29 }, 30 dynamicProperty(){ 31 return `<a href="/${this.currentLocale.get()}/info">info</a>`; 32 } 33 } 34 ... 35}; 36 37import I18N from 'meteor/ostrio:i18n'; 38const i18n = new I18N({i18n: i18nConfig});
Initialization
1import I18N from 'meteor/ostrio:i18n'; 2const i18n = new I18N(config);
config.i18n
{Object} - Internalization objectconfig.returnKey
{Boolean} - Return key if l10n value not found, default:true
config.helperName
{String} - Template helper name, default:i18n
config.helperSettingsName
{String} - Settings helper name, default:i18nSettings
API
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
has([locale,] key)
Determine whenever key is exists in configuration file(s).
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
1i18n.has('file.obj.key'); // Current locale 2i18n.has(locale, param); // Force locale 3i18n.has('ca', 'file.obj.key'); //false 4i18n.has('en', 'file.obj.key'); //true
setLocale(locale)
locale
{String} - Two-letter locale code
1i18n.setLocale(locale);
addl10n(l10n)
l10n
{Object} - Object with language set
1i18n.addl10n({ 2 en: { // <- Object's root is the language two-letter code 3 newKey: "New Value" 4 } 5});
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
Template helpers
Template helpers requires templating
package to be installed.
i18n
helper - accepts locale
, key
and replacements
:
You may change name of the helper via config object: config.helperName
<p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
i18nSettings
- accepts configuration object key, one of current
, all
, other
, locales
You may change name of the helper via config object: config.helperSettingsName
...
Template language switcher example
<template name="langSwitch"> <span title="Current language"></span> <a href="#" data-switch-language=""></a> </template>
1Template.langSwitch.helpers({ 2 currentLocale(){ 3 return i18n.currentLocale.get() 4 } 5}); 6 7Template.langSwitch.events({ 8 'click [data-switch-language]'(e) { 9 e.preventDefault(); 10 i18n.setLocale(e.currentTarget.dataset.switchLanguage); 11 return false; 12 } 13});
Template helpers compare
, ==
, Session
and many more comes from: ostrio:templatehelpers
package.
Support this project:
This project wouldn't be possible without ostr.io.
Using ostr.io you are not only protecting domain names, monitoring websites and servers, using Prerendering for better SEO of your JavaScript website, but support our Open Source activity, and great packages like this one could be available for free.