val-i18n-svelte

Svelte goodies for val-i18n.

Install

npm add val-i18n-svelte val-i18n value-enhancer

API

• <I18nProvide> to set i18n context automatically (supports async loading).

• setI18n to set i18n context manually.

• useTranslate to get updated i18n.t$ observable.

• useLang to get updated i18n.lang$ observable.

• useI18n to get i18n$ observable.

• <Trans> component to insert Svelte element into the translation message.

You can run the example in this repo by pnpm dev.

Usage

See live example on Svelte REPL.

With static locales:

Set i18n context in root component:

<script>
  import { setI18n, useTranslate } from "val-i18n-svelte";
  import { I18n } from "val-i18n";

  const locales = { en: { apple: "apple" } };
  const i18n = new I18n("en", locales);
  setI18n(i18n);
</script>

<div>....</div>

Access i18n in descendent components (any level):

<script>
  import { useTranslate, useLang, useI18n } from "val-i18n-svelte";

  const t = useTranslate();
  const lang = useLang();
  const i18n = useI18n();
</script>

<div>{$t("apple")}</div>
<button on:click={() => $i18n.switchLang("zh")}>{$lang}</button>

With dynamic locales:

Set i18n context in root component:

<script>
  import { I18nProvider } from "val-i18n-svelte";
  import { I18n } from "val-i18n";

  const loader = I18n.preload("en", (lang) => import(`../locales/${lang}.json`));
</script>

<I18nProvider i18n={loader}>.....</I18nProvider>

Access i18n in descendent components (any level):

<script>
  import { useTranslate, useLang, useI18n } from "val-i18n-svelte";

  const t = useTranslate();
  const lang = useLang();
  const i18n = useI18n();
</script>

<div>{$t("apple")}</div>
<button on:click={() => $i18n.switchLang("zh")}>{$lang}</button>

If you need to access i18n in root component:

<I18nProvider let:t let:i18n let:lang>
  <div>{t("apple")}</div>
  <button on:click={() => i18n.switchLang("zh")}>{lang}</button>
</I18nProvider>

Trans Component

To insert Svelte elements into the translation message:

<script>
  import { useTranslate, Trans } from "val-i18n-svelte";
  /*
    with locale:
    {
      visit: "Visit this address {{fruit}}.",
    }
  */
  const t = useTranslate();
</script>

<Trans message={$t("visit")}>
  <a href="https://github.com/crimx/val-i18n-svelte">val-i18n-svelte</a>
</Trans>

↓Outputs:

Visit this address <a href="https://github.com/crimx/val-i18n-svelte">val-i18n-svelte</a>.

To inset multiple Svelte elements into the translate message, due to the limitation of Svelte (without dynamic slot name support), you need to use let:key to access the key of the placeholder. The key is the name of the placeholder in the translation message.

<script>
  import { useTranslate, Trans } from "val-i18n-svelte";
  /*
    with locale:
    {
      author: "CRIMX",
      fruit: "apple",
      eat: "{{name}} eats {{fruit}}.",
    }
  */
  const t = useTranslate();
</script>

<Trans message={$t("eat")} let:key>
  {#if key === "name"}
    <strong>{$t("author")}</strong>
  {:else if key === "fruit"}
    <i>{$t("fruit")}</i>
  {/if}
</Trans>

↓Outputs:

<strong>CRIMX</strong> eats <i>apple</i>.

Sub-context With Nested I18n

You can add extra setI18n or <Ii18nProvider /> in descendent components to override the context. Only the descendent components of the new context will be affected.

Developing

This project is created by create-svelte.

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.