svelte-i18n-gettext

This is a Svelte component based on derived stores which implements gettext based translation (i18n) of strings.

Version 2 is an improvement to make the code more encapsulated and modular.

Usage

• Install the package (published here).

npm install svelte-i18n-gettext

Version 2.x

• Include the stores:

  import { _ } from 'svelte-i18n-gettext';
  import { setLang, addTranslationForLanguage } from 'svelte-i18n-gettext/src/stores';

• Use setLang to set the language:

  setLang('es-MX')

• Include the translation files (see the examples directory for samples) and assign them to the store:

  import msg_de_DE from '$lib/i18n/de-DE/messages.json';
  import msg_en_US from '$lib/i18n/en-US/messages.json';
  import msg_es_MX from '$lib/i18n/es-MX/messages.json';
  import msg_fr_FR from '$lib/i18n/fr-FR/messages.json';
  
  addTranslationForLanguage('fr-FR', msg_fr_FR);
  addTranslationForLanguage('de-DE', msg_de_DE);
  addTranslationForLanguage('es-MX', msg_es_MX);
  addTranslationForLanguage('en-US', msg_en_US);

Version 1.x

• You still can use the version 1.x way, even if it is deprecated:

  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)

General usage (v2 or v1)

• In your Svelte code, for singular form you can use the $_ derived store:

  <script>
    // in order to use strings with parameters, you need to include this library:
    import { sprintf } from 'sprintf-js';
  </script>
  <div>
      {@html sprintf($_('Welcome, <b>%s</b>'), $user.profile.name)}
      <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 sprintf($_n('One file deleted', '%s 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.

Extraction

### xgettext

You can use [```xgettext```](https://www.gnu.org/software/gettext/manual/html_node/xgettext-Invocation.html) directly:

```bash
xgettext -f files.txt -o messages.pot -L JavaScript --from-code="utf-8" --no-wrap --keyword=$_

Merging

If you already have previous po files, you can use a command like this to merge the strings:

msgmerge -U your_old_translation.po latest_strings.pot

Translation files

svelte-i18n-gettext uses standard gettext .po files, which must be manually converted into the JSON as produced by gettext-parser using the po2json.pl Perl script, which can be found here. Any other tool which produces the same format should be useful.

Dependencies

svelte-i18n-gettext depends on the follownig node packages:

• @postalsys/gettext
• sprintf-js (if you need to include variables in some msgid)
• gettext-parser
• detect-browser-language (optional)

Live example

You can try this software live here.

There is also a local example project in the example directory.

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. But you can use any languaje.
• Improvements and fixes are welcome.

License

Copyright (c) 2023-2025 Rodolfo González González.

Licensed under BSD-3-Clause license. Read the LICENSE file.