Vision

To make internationalization easy and enjoyable 😄💪🏻

Requirement

• svelte >= 3.0.0
• i18n-pro >= 2.0.0

Features

• lightweight： +
• The following features are inherited from i18n-pro
  • simple
  • flexible
  • automatic-translation
  • keyless

Live Demo

• Implementation based on Store
  • Open in CodeSandbox
  • 
• Implementation based on Context
  • Open in CodeSandbox
  • 

Principle

This library has corresponding implementations for the Store and Context features based on i18n-pro and Svelte

Implementation based on Store

Mainly composed of 4 part

• createI18n
• t
• setI18n
• i18nState

createI18n：Initialize internationalization
t：Get internationalization text
setI18n：Set language or language package
i18nState：The current state of internationalization

A simple example is as follows

// i18n.ts
import { createI18n } from '@i18n-pro/svelte'

createI18n( {
  namespace: 'testNamespace',
  locale: "en",
  langs: {
    zh: {
      'hello world': '你好世界',
    },
    ja:{
      "hello world": "こんにちは世界",
    },
  }
})

// App.svelte
<script>
  import { t } from '@i18n-pro/svelte'
</script>

<div>
  {$t('hello world')}
</div>

// index.ts
import './i18n'
import App from './App.svelte'

new App({
  target: document.getElementById('app'),
})

Implementation based on Context

Mainly composed of 2 part

• I18nProvider
• useI18n

I18nProvider：Configure container components for internationalization initialization properties
useI18n：Hook method for obtaining internationalization API and state

A simple example is as follows

// App.svelte
<script>
  import { useI18n } from '@i18n-pro/svelte/context'
  const { t } = useI18n()
</script>

<div>
  {$t('hello world')}
</div>

// Root.svelte
<script>
  import { I18nProvider } from '@i18n-pro/svelte/context'
  import App from './App.svelte'
</script>

<I18nProvider
  namespace="i18n-example"
  locale="en"
  langs={{
    zh: {
      'hello world': '你好世界',
    },
    ja:{
      "hello world": "こんにちは世界",
    },
  }}
>
  <App/>
</I18nProvider>

// index.ts
import App from './Root.svelte'

new App({
  target: document.getElementById('app'),
})

Help Document

To avoid unnecessary duplicate document content, some of the documents in this library are linked to the content in i18n-pro
The i18n-pro related link in the current document is based on the 2.1.0 version. If you are using a different version, you need to check the document corresponding to the version you are using to avoid inconsistent usage

• Current Library
  • Quick Start
    • Implementation based on Store
    • Implementation based on Context
  • API
    • Implementation based on Store
    • Implementation based on Context
  • Changelog
• i18n-pro
  • Command Line
  • Matching Rules
  • Q&A
  • Translation Log

License

MIT

Copyright (c) 2023-present Eyelly Wu