svelte-i18n-gettext Svelte Themes

Svelte I18n Gettext

i18n (translation) for Svelte using gettext.

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:

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.

Top categories

Loading Svelte Themes