@kainstar/svelte-i18next

@kainstar/svelte-i18next is a Svelte library for internationalization using i18next. It referenced partial features provided by react-i18next and do some simplification.

Why not svelte-i18next or svelte-i18n?

svelte-i18n is based on intl-messageformat rather than i18next which I am more familiar with, and it's a singleton architecture that is not easy to expand.

svelte-i18next is a very simple wrapper for i18next and no any options to customize behaviors.

And most important, both svelte-i18next and svelte-i18n are not provide powerful features like Trans in react-i18next, that's why I making this library.

Features

• Context-based multi-instance by setI18nContext
• Basic t function
• Advanced Trans Component

Install

npm install @kainstar/svelte-i18next

Usage

i18n.ts:

import i18next from 'i18next';

i18next.init({
  debug: true,
  lng: 'zh-CN',
  resources: {
    // ...
  },
});

export default i18next;

App.svelte:

<script lang="ts">
import { setI18nContext } from '@kainstar/svelte-i18next';
import i18nInstance from './i18n';

setI18nContext(i18nInstance);
</script>

Child.svelte:

<script lang="ts">
import { getTranslation, Trans } from '@kainstar/svelte-i18next';

const { t } = getTranslation();
</script>

<!-- use $t function or Trans component to translate -->
<p>{$t('i18nKey')}</p>
<Trans i18nKey="i18nKey">

Advanced Trans Component

Trans component can enables you nest any svelte components and native html tag to be translated as one cohesive string.

Let's say you have a translation like this:

@kainstar/svelte-i18next is a powerful internationalization library. Here to see

Before:

<p>
  <code>@kainstar/svelte-i18next</code> is a <strong>powerful</strong> internationalization library. <Link href="https://github.com/kainstar/svelte-i18next">Here to see</Link>
</p>

After:

message: <code>@kainstar/svelte-i18next</code>is a <strong>powerful</strong> internationalization library. <Link href="https://github.com/kainstar/svelte-i18next">Here to see</Link>

<p>
  <Trans
    i18nKey="message"
    components={{
      Link
    }}
  />
</p>

What different with {@html} ?

{@html} is a svelte directive that can render raw html string, but it can't render you custom components.

Can I attach props to components?

Yes, you can pass a [comp, props] tuple as component value like:

<Trans i18nKey="message" components={{
  Link: [Link, { target: '_blank' }]
}}>

Is Trans treat component children as defaultValue?

No, svelte can't check or modify slot content, so Trans will ignore children and only use i18nKey.

I18next extends options

@kainstar/svelte-i18next extends some options for i18next.init:

interface SvelteI18nextOptions {
  /**
   * Set which events trigger a re-render, can be set to false or string of events
   * @default 'languageChanged'
   */
  bindI18n?: string | false;
  /**
   * Set which events on store trigger a re-render, can be set to false or string of events
   * @default false
   */
  bindI18nStore?: string | false;
  /**
   * Which tag will be treated as native HTML tag Trans component.
   * If a tag is not custom component and native HTML tag, it will be render as string.
   * `true` will keep all tags
   * @default true
   */
  transKeepTags?: readonly string[] | true;
}

i18next.init({
  svelte: {
    // ...custom options here
  },
});