Svelte Translate Pro

Svelte Internationalization (i18n) with Dynamic Language Loading

This project provides a flexible internationalization (i18n) solution for Svelte applications, with support for multiple languages and dynamic translation loading. It allows you to load translation files at runtime, switch languages dynamically, and retrieve translations with support for interpolation.

Features

• Support for multiple languages.
• Dynamic loading of translation files.
• Page-specific translations.
• Interpolation of variables in translation strings.
• Reactive translation system using Svelte stores.

Installation

To get started, simply install the package using npm or yarn:

1npm install svelte-translate-pro

or

1yarn add svelte-translate-pro

Usage

1. Define Supported Languages

You can define the languages supported by your application using the AppLanguages enum:

1import { AppLanguages } from 'svelte-translate-pro';
2
3console.log(AppLanguages.EN); // "en"

2. Load Translation Files

Use the loadTranslation function to dynamically load a translation data for a given language.

1import { loadTranslation, AppLanguages } from 'svelte-translate-pro';
2
3import en from "/lib/translations/en.json"
4
5await loadTranslation(AppLanguages.EN, en);
6

Translation File Example (fr.json)

1{
2  "navbar.title": "Bienvenue",
3  "footer.contact": "Contactez-nous"
4}

3. Get the Current Language

You can retrieve the current language using the getActiveLanguage function.

1import { getActiveLanguage } from 'svelte-translate-pro';
2
3const currentLang = getActiveLanguage();
4console.log(currentLang); // "en"

4. Set Page-Specific Translations

Use setPageSpecificTranslations to update translations for the current page. This allows you to set translations that are specific to the page content.

1import { setPageSpecificTranslations, AppLanguages } from 'svelte-translate-pro';
2
3setPageSpecificTranslations({
4    [AppLanguages.EN]: { "title": "Welcome to the page" },
5    [AppLanguages.FA]: { "title": "به صفحه خوش آمدید" }
6});

5. Retrieve Translations

You can use the $t$ store to retrieve translations reactively in your Svelte components.

1<script lang="ts">
2  import { t$ } from 'svelte-translate-pro';
3</script>
4
5<h1>{$t$('navbar.title')}</h1> <!-- Displays the translation for "navbar.title" -->

You can also pass variables for interpolation:

1const variables = { name: "John" };
2const translatedText = $t$('greeting', variables);

Example with Interpolation (greeting key in JSON):

1{
2  "greeting": "Hello, {{name}}!"
3}

Example with Language-Specific Variables

You can also pass language-specific values for interpolation:

1$t$('greeting', { name: {
2  [AppLanguages.EN]: "John",
3  [AppLanguages.FA]: "جان"
4}});

Inline Translation

If you need to provide inline translations directly in the code, you can use the following format:

1$t$({
2  [AppLanguages.EN]: "Hello, World!",
3  [AppLanguages.FA]: "سلام دنیا!"
4});

6. Language Switching

You can switch the language by calling the setActiveLanguage function, which updates the application's language:

1import { setActiveLanguage, AppLanguages } from 'svelte-translate-pro';
2
3setActiveLanguage(AppLanguages.FA); // Switches to Persian (FA)
4setActiveLanguage(AppLanguages.EN); // Switches to English (EN)

7. Debugging

When loading translations in development mode (DEV environment variable is true), you will see console logs indicating successful translation file loading.

1DEBUG=vite-plugin-svelte:node-modules-onwarn pnpm build

API Reference

AppLanguages

An enum that defines the supported languages:

1export enum AppLanguages {
2    EN = "en",
3    FA = "fa",
4    ES = "es",
5    DE = "de",
6    FR = "fr",
7    IT = "it",
8    RU = "ru",
9    CN = "zh-cn",
10    JP = "ja",
11    AR = "ar"
12}

getActiveLanguage(): AppLanguage

Gets the current language of the application.

1const lang = getActiveLanguage(); // "en"

setPageSpecificTranslations(data: Record<AppLanguage, TranslationData>)

Sets page-specific translations for the current page.

1setPageSpecificTranslations({
2    en: { "title": "Welcome" },
3    fa: { "title": "به صفحه خوش آمدید" }
4});

t$: Readable

A derived store that provides a reactive translation function.

1<h1>{$t$('navbar.title')}</h1>

TranslationObject

Represents a translation object that can map language codes to translation strings.

1type TranslationObject = Partial<Record<AppLanguage, string>>;

TranslationData

Represents translation data for a single language.

1type TranslationData = Record<string, string>;

reactiveTranslate: Reactive Translations for Arrays

reactiveTranslateis a utility function that provides a reactive array of translated items based on the current language.

1import { reactiveTranslate } from "svelte-translate-pro";
2
3const tabs = reactiveTranslate((t) => [
4    { title: t("tabs.recieve"), id: 1 },
5    { title: t("tabs.send"), id: 2 },
6]);
7

1<div>
2    {#each $tabs as tab}
3        <button>{tab.title}</button>
4    {/each}
5</div>

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

Contributions are welcome! Please fork this repository and submit your pull requests.

---

Happy coding and enjoy using the Svelte i18n system!