better-i18n-plugin
Advanced tools
Internationalization plugin for better-dom
The project aims to solve the internationalization problem on front-end side. The technique used behind the scenes I call “CSS-driven internationalization” and there is a deep article about it.
lang attributeNOTE: at present the project can't localize empty DOM elements (like <input>, <select> etc.) or attribute values.
Use bower to download this extension with all required dependencies.
$ bower install better-i18n-plugin
This will clone the latest version of the better-i18n-plugin into the bower_components directory at the root of your project.
Then append the following scripts on your page:
<script src="bower_components/better-dom/dist/better-dom.js"></script>
<script src="bower_components/better-i18n-plugin/dist/better-i18n-plugin.js"></script>
The plugin introduces 2 new static functions for the DOM namespace: DOM.importStrings and DOM.__. The first one is used to populate DOM with new localizations for a particular language:
DOM.importStrings("ru", "Enter your name", "Введите ваше имя");
// you can populate many strings in one call
DOM.importStrings("ru", {
"string 1": "translation 1",
"string 2": "translation 2"
...
});
This storage is private therefore you can't access to it directly. Intstead you can use DOM.__:
alert(DOM.__("Enter your name")); // displays "Enter your name"
// change current language...
DOM.set("lang", "ru");
alert(DOM.__("Enter your name")); // displays "Введите ваше имя"
If you need to get a value for a particular language use toLocaleString with an appropriate argument:
var entry = DOM.__("Enter your name");
entry.toString(); // => "Enter your name"
entry.toLocaleString("ru"); // => "Введите ваше имя"
$ElementLet's say you need to localize a button to support multiple languages. In this case you can use $Element#l10n:
button.l10n("Hello world");
When you need to add a support for a new language import a localized version of the string. For example the string "Hello world" can be translated for Russian we pages like below:
DOM.importStrings("ru", "Hello world", "Привет мир");
Now for web pages where <html lang="ru"> the button displays "Привет мир" instead of "Hello world".
Both DOM.__ and $Element#l10n supports second optional argument:
DOM.__("your {name}", {name: "Maksim"}); // => "your Maksim"
// arrays are supported too
DOM.__("your {0}", ["Maksim"]); // => "your Maksim"
button.l10n("Hello {user}", {user: "Maksim"}); // displays "Hello Maksim"
button.l10n("Hello {0}", ["Maksim"]); // displays "Hello Maksim"
Often you need to grab localized strings from backend. This is very easy to do using DOM.importStrings. In the example below I'll use Handlebars as a templating language and i18n-node for I18N support.
Assume you've stored web page language in res.locals.locale. Then you need to add another variable that stores all backend strings map passed into JSON.stringify call:
// remember language of your web page
res.locals.locale = "ru";
// generate string bundle for client side
res.locals.bundle = JSON.stringify(i18n.getCatalog(res.locals.locale));
After that just generate extra <script> element that will populate all backend strings in browser:
<!DOCTYPE html>
<html lang="{{locale}}">
...
<body>
...
<script src="bower_components/better-dom/dist/better-dom.js"></script>
<script src="build/better-i18n-plugin.js"></script>
<!-- populate strings from backend -->
<script>DOM.importStrings("{{locale}}",{{{bundle}}})</script>
</body>
</html>
Now you can use DOM.__ with an appropriate key to get a backend string on client side.
In order to add support or use multiple languages of a live extension follow the convension below:
i18n folderi18n\project.{lang}.jslang attribute on the <html> element and the corresponsing file with localizations is included on your web page:<html lang="ru">
<head>
...
</head>
<body>
...
<!-- required dependencies -->
<script src="bower_components/better-dom/dist/better-dom.js"></script>
<script src="bower_components/better-i18n-plugin/dist/better-i18n-plugin.js"></script>
<!-- project files -->
<script src="specific_project/dist/specific_project.js"></script>
<script src="specific_project/i18n/specific_project.ru.js"></script>
</body>
</html>
FAQs
Internationalization plugin for better-dom
The npm package better-i18n-plugin receives a total of 0 weekly downloads. As such, better-i18n-plugin popularity was classified as not popular.
We found that better-i18n-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.