# I18n

The current smallfish support for i18n lauguage, but in the future we will gradually add more international support.

# Using smallfish i18n

# Open smallfish i18n

// config/config.js
{
  "i18n": true
}

# Setting language packs

Smallfish specifies to store your language pack under src/i18n, like this:

─ src
   ├── ...
   ├── i18n         // * i18n related data
   | ├── zh-CN.json // * Chinese language pack
   | ├── en-US.json // * English language pack
   | ├── *.js       // * i18n data for a single language
   | └── index.js   // * i18n language data entry file
   └── ...

As you can see, there is an entry file and a language pack under the i18n directory. The entry file is very simple, that is, the introduction of each language pack:

module.exports = {
  'en-US': require('./en-US.json'),
  'zh-CN': require('./zh-CN.json'),
};

The json of the language pack is much simpler. It is a key-value pair, as follows:

// src/i18n/en-US.json
{
  "sf_page_SubPage_ChineseTest": "Chinese test",
  "sf_page_SubPage_LaLa": "La, la",
  "sf_page_SubPage_HaHaHa": "Ha ha ha",
  "sf_page_SubPage_IAmContinueToThe": "I am continue to the test",
  "sf_page_SubPage_IThink": "I think",
  "sf_page_SubPage_Is": "Is",
  "sf_page_SubPage_Big": "Big",
  "sf_page_SubPage_DDaysHHours": "{{d}} days {{h}} hours",
  "sf_page_SubPage_IAmTestHaHa": "I am test ha ha ha",
  "sf_page_SubPage_INowWithTheLanguage": "I now with the language a is {{inlanguage}}"
}

# Use in code

import i18n from 'smallfish/i18n';
import { Alert } from 'smallfish/antd';

export default () => (
  <div>
    <Alert message={i18n.t('sf_page_SubPage_LaLa')} />
    <span>
      {i18n.t('sf_page_SubPage_INowWithTheLanguage', {
        inlanguage: i18n.language,
      })}
    </span>
  </div>
);

The bottom library of smallfish/i18n is i18next. Smallfish has already configured the commonly used scheme for you. If you have more needs, you can refer to the corresponding documentation.

# Setting the default language

Usually smallfish/i18n will detect the user's system information and automatically set the corresponding language, but if you want to set the default language manually that a way:

Call the changeLanguage method

import i18n from 'smallfish/i18n';

i18n.changeLanguage('zh-CN');

# Date i18n

In smallfish we use the moment suite for time and date management, and the moment itself provides multi-language settings, so it's easy to use.

// Introduce the corresponding language pack
import 'smallfish/util/moment/locale/zh-cn';
import moment from 'smallfish/util/moment';

moment.fromNow(); // output: 几秒前

See more examples of language: moment i18n

# Automatically extract project copy

Currently not supported, so stay tuned

The smallfish layer relies on the powerful parrot-tool-must tool to extract the project's copy, so that even old projects can be replaced with one-click support for multi-language projects.

# Quick start

Modify your package.json and add the i18n command:

{
  script: {
    ...
    i18n: 'smallfish i18n',
    ...
  }
}

Run the command in the root directory:

# [path] To specify the path to be extracted, the default is the root directory.
$ npm run i18n [path] // or yarn i18n [path]

Running this command will do the following:

1. smallfish i18n will scan all the files in the corresponding directory, extract Chinese/English, and then replace these files with the i18n method:

+ import i18n from 'smallfish/i18n';
import { Alert } from 'smallfish/antd';

export default () => (
  <div>
-   <Alert message="I was originally a Chinese" />
+   <Alert message={i18n.t('sf_page_SubPage_LaLa')} />
-   <span>The current language is {inlanguage}</span>
+   <span>
+     {i18n.t('sf_page_SubPage_INowWithTheLanguage', {
+       inlanguage: i18n.language,
+     })}
+   </span>
  </div>
);

2. Automatically add the extracted copy to the language pack. Currently, it supports automatic conversion from Chinese to English, and will support more languages ​​in the future:

// src/i18n/zh-CN.json
{
  ...
  "sf_page_SubPage_LaLa": "我本身是个中文",
  "sf_page_SubPage_INowWithTheLanguage": "当前语言是 {{inlanguage}}",
  ...
}

// src/i18n/zh-CN.json
{
  ...
  "sf_page_SubPage_LaLa": "i am chinese",
  "sf_page_SubPage_INowWithTheLanguage": "current language is {{inlanguage}}",
  ...
}

You're done, this operation is incremental, so you can completely avoid having to deal with multi-language replacement problems in daily development, and you can replace it with one-click development.