Table of Contents

Vision
Requirement
Features
Live Demo
Principle
  Implementation based on Store
  Implementation based on Context
License

Vision

To make internationalization easy and enjoyable 😄💪🏻

Requirement

• svelte >= 3.0.0
• i18n-pro >= 3.0.0 < 4.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

1// i18n.ts
2import { createI18n } from '@i18n-pro/svelte'
3
4createI18n( {
5  namespace: 'testNamespace',
6  locale: "en",
7  langs: {
8    zh: {
9      'hello world': '你好世界',
10    },
11    ja:{
12      "hello world": "こんにちは世界",
13    },
14  }
15})
16
17// App.svelte
18<script>
19  import { t } from '@i18n-pro/svelte'
20</script>
21
22<div>
23  {$t('hello world')}
24</div>
25
26// index.ts
27import './i18n'
28import App from './App.svelte'
29
30new App({
31  target: document.getElementById('app'),
32})

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

1// App.svelte
2<script>
3  import { useI18n } from '@i18n-pro/svelte/context'
4  const { t } = useI18n()
5</script>
6
7<div>
8  {$t('hello world')}
9</div>
10
11// Root.svelte
12<script>
13  import { I18nProvider } from '@i18n-pro/svelte/context'
14  import App from './App.svelte'
15</script>
16
17<I18nProvider
18  namespace="i18n-example"
19  locale="en"
20  langs={{
21    zh: {
22      'hello world': '你好世界',
23    },
24    ja:{
25      "hello world": "こんにちは世界",
26    },
27  }}
28>
29  <App/>
30</I18nProvider>
31
32// index.ts
33import App from './Root.svelte'
34
35new App({
36  target: document.getElementById('app'),
37})

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 3.0.0-alpha.2 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