svelte-i18next

The preset for svelte-i18next. It reads the $i18n store in Svelte components, plus everything of i18next.

The svelte-i18next preset supports svelte-i18next, the Svelte store for i18next.

Detection

The preset applies when the project depends on svelte-i18next. x18n still tests the presets after it, such as i18next and general.

x18n.config.ts
import { defineConfig } from '@x18n/core'

export default defineConfig({
  presets: ['svelte-i18next'],
})

What it adds

The preset includes everything of the i18next preset: the : namespace separator, the default namespace translation, the derived keys {key}_*, the placeholders and the calls of i18next. If the i18next preset also applies, x18n adds these plugins one time.

Supported syntax

createI18nStore(i18next) returns a store. Components read it as $i18n, so $i18n.t and i18n.t count as translate calls. The second argument can set the namespace with ns.

src/routes/+page.svelte
<script>
  import { getContext } from 'svelte'

  const i18n = getContext('i18n')
</script>

<h1>{$i18n.t('home.title')}</h1>
<p title={$i18n.t('errors:notFound')}>{$i18n.t('apple', { count: 2 })}</p>

The Svelte scanner reads the <script> blocks and the template expressions of .svelte files. It runs in Node only.

Placeholders

The same as for i18next: {{name}} and $t(key).

Extraction templates

KindsTemplateImports
svelte-text{$i18n.t('{key}'{args})}none
svelte-attribute{attr}={$i18n.t('{key}'{args})}none
js-string, js-templatei18next.t('{key}'{args})import i18next from 'i18next'

The Svelte templates add no imports. Components get the store either from a module (import i18n from './i18n') or from the context (getContext('i18n')), so x18n assumes i18n is already in scope.