svelte-i18n-gettext
This is a Svelte component based on derived stores which implements gettext based translation (i18n) of strings.
Usage
- Install package (published here).
npm install svelte-i18n-gettext
- Include the stores:
import { _, _n } from 'svelte-i18n-gettext/src/index.svelte';
import { parsedTranslations, lang } from 'svelte-i18n-gettext/src/store.js';
- Use the
lang
(or a local alias) store to specify the language to use:
$lang = 'es-MX';
- Optionally, get the browser's language:
$lang = detectBrowserLanguage();
Or any other method, such as loading user's preferences.
-
Include the translation files (see the examples directory for samples) and assign them to the store:
import msg_de_DE from '$lib/i18n/messages-de.json'; $parsedTranslations['de-DE'] = msg_de_DE; import msg_en_US from '$lib/i18n/messages-en.json'; $parsedTranslations['en-US'] = msg_en_US; import msg_es_MX from '$lib/i18n/messages-es.json'; $parsedTranslations['es-MX'] = msg_es_MX;
(Adjust your paths according to your project's structure)
-
In your Svelte code, for singular form you can use the
$_
derived store:
<div>
{@html $_(`Welcome, <b>${$user.profile.name}</b>`)}
<br />
{$_("Good bye.")}
</div>
- In your Svelte code, for plural forms you can use the
$_n
derived store:
<div>
<!-- n contains the number of deleted files -->
{@html $_n(`One file deleted`, `${n} files deleted`, n)}
</div>
These stores have the following signatures:
_(msgid, msgctx)
_n(msgid, msgidPlurals, count, msgctx)
For both derived stores there is a parameter msgctx
which can be used to specify the context of the translation.
Translation files
svelte-i18n-gettext uses standard gettext .po files, which must be manually translated into JSON using the po2json.cjs
Node.js script, which is included in the bin/ directory. This script is has the following parameters:
- Use
-i, --input <input>
to specify the input PO file. - Use
-o, --output <output>
to specify the output JSON file. - Use
-v, --verbose
to show verbose execution messages.
Example usage:
node po2json.cjs -i example.po -o example.json -v
Dependencies
svelte-i18n-gettext depends on the follownig node packages:
- node-gettext
- gettext-parser
- detect-browser-language (optional)
Live example
You can try this software live here.
Notes
- Of course, you can modify the way of getting the "current language", for instance, you could get it from the user's profile store, or from a cookie, and so on. Be careful, because sometimes the language specification comes with just 2 letters (i.e. "fr") or with other local variation (i.e. "es-AR" instead of "es-MX"). You must make the necesary adjusments in these cases.
- To edit gettext .po files you can use poEdit or some other editor.
- I've included directories with sample .po and .json files, so, in case you're not familiar with gettext, you can have an idea of the format. Anyway, in that case I would suggest you to read the docs.
- Why gettext?
- First and most relevant reason: it uses the full strings in the original language as key, so I don't have to be searching for weird keys such as "page.title.hello" or "item.specification". If one translation doesn't exist, the original key string is used.
- It's a GNU standard, tried and trusted.
- Remember that gettext assumes that the language of the program is English by convention.
- Any improvement or fix is welcomed.
License
Copyright (c) 2023 Rodolfo González González.
BSD-3-Clause. Read the LICENSE file.