svelte-i18next

Apresentando o invólucro esbelto para i18next.

Esta biblioteca, baseada em i18next, envolve uma instância i18next dentro de um armazenamento svelte e observa os eventos i18next como languageChanged, recurso adicionado, etc. para poder renderizar nossos componentes svelte.

Pacote:-

GitHub:-

A implementação fica assim:

O pacote cria um Svelte gravável de i18next e escuta os eventos acionados por qualquer atualização na instância i18next.
Por exemplo, se um aplicativo carregar um novo namespace para suas traduções, o pacote svelte_i18next acionará o
i18next.on(‘loaded’, function(loaded) {})evento.

Confira aqui os eventos do i18next .

Uso:

i18n.js

import i18next from "i18next";
import { createI18nStore } from "svelte-i18next";

i18next.init({
   lng: 'en',
   resources: {
     en: {
       translation: {
         "key": "hello world"
       }
     }
   }
});

export const i18n = createI18nStore(i18next);

<script>
  import i18n from './i18n.js';
</script>

<div>
    {$i18n.t('key')}}
</div>

Você também pode usar namespaces como usaria i18next e o wrapper svelte renderizará novamente as traduções com base no namespace fornecido.

import { createI18nStore } from 'svelte-i18next'
const i18n = createI18nStore(i18n_instance) 
i18n.loadNamespaces(['example']) // this triggers the re-render and loads translations from the provided namespace.
<div>
    {$i18n.t(key)}
</div>

Mostre um pouco de amor @svelte-i18next ❤