3 Star 9 Fork 1

罪. / i18n-chain

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 3.95 KB
一键复制 编辑 原始数据 按行查看 历史
罪. 提交于 2020-01-06 10:12 . docs: Sort title

English | 中文

Are you always copy and paste duplicate i18n code like t('home:submit') t('common:something:success'). It take working slowly, and you are very easy to make typo if you don't recheck words carefully.

I don't like that way, I prefer to write code as a chain like i18n.common.something.success with typescript checking. So, why not try this package?

Compatibility

IE Edge Chrome Firefox Safari Node
9+ 12+ 5+ 4+ 5+ *

Define locales

// ./src/i18n/locales/en.ts

const en = {
  button: {
    submit: 'Submit',
    cancel: 'Go back',
  },
  user: {
    profile: 'Tom',
  },
};

export default en;
export type Locale = typeof en;
// ./src/i18n/locales/zh.ts

import { Locale } from './en';

const zh: Locale = {
  button: {
    submit: '提交',
    cancel: '返回',
  },
  user: {
    profile: '原罪',
  },
};

export default zh;

Create i18n instance

// ./src/i18n/index.ts

import { createI18n } from '@i18n-chain/*';
import en from './locales/en';

const i18n = createI18n({
  defaultLocale: {
    key: 'en',
    values: en,
  },
});

export default i18n;

Import locales

First way, define immediately.

import { createI18n } from '@i18n-chain/*';
import zh from './locales/zh';

const i18n = createI18n({
  defaultLocale: { ... },
});

i18n._.define('zh', zh);

export default i18n;

Second way, async import. loader will be invoked when locales doesn't defined.

const i18n = createI18n({
  defaultLanguage: { ... },
  loader: (name) => import('./locales/' + name),
});

export default i18n;

Switch locale

i18n._.locale('zh');

String literal

Feel free to try i18n._.t('button.submit') and i18n.button.submit, they have the same effect. Unfortunately, you can't enjoy type checking by using chain._.t('xx.yy.zz').

Template with parameters

You are required to use array to define template when parameters exist.

const en = {
  property: ['{{property1}}template{{property2}}', { property1: value2, property2: value2 }],
};

The second element in array is an object that is default value of template.

const en = {
  user: {
    profile: [
      'My name is {{name}}, I born in {{country}}, I am {{age}} old now, my birthday is {{birthday}}',
      {
        country: undefined,
        name: 'Tom',
        age: (value: number = 20) => {
          if (value <= 1) {
            return `${value} year`;
          } else {
            return `${value} years`;
          }
        },
        birthday: (value: Date) => {
          return value.toString();
        },
      },
    ],
  },
};

////////////////////////////////////
// The above code equivalent to definition below: (automatically)
interface User {
  Profile {
    country: string | number;
    name?: string;
    age?: number;
    birthday: Date;
  }
}
/////////////////////////////////////

// Minium configuration
i18n.user.profile({
  age: 20,
  country: 'China',
});

// Append optional property `name`
i18n.user.profile({
  age: 30,
  country: 'Usa',
  name: 'Lucy',
});

The primary difference between method age and birthday is: age has default parameter (value: number = 20) => {...} but birthday doesn't have. It's optional to input value to property who has default parameter value on function.


Set undefined to property if you want to force input value when invoking method.

const en = {
  template: ['Hello, {{world}}', { world: undefined }]
};

More Usage

Platforms I18n
React & React-Native @i18n-chain/react
Vue Coming soon...
Angular Coming soon...
Taro @i18n-chain/taro
NodeJs & Vanilla-Js @i18n-chain/core

Demos

React I18n

TypeScript
1
https://gitee.com/geekact/i18n-chain.git
git@gitee.com:geekact/i18n-chain.git
geekact
i18n-chain
i18n-chain
master

搜索帮助