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.