MobX i18n

Responsive Translation utility based on TypeScript & MobX

Features

• Type hinting of Text keys
• Lambda Expression values
• Space utility for CJK & other characters
• Responsive re-rendering
• Async loading of Language packages
• support HTTP protocol for Server-side rendering
• support BOM/DOM language API for Client-side rendering

Versions

SemVer	branch	status	ES decorator	MobX
>=0.5.0	main	✅developing	stage-3	>=6.11
<0.5.0	master	❌deprecated	stage-2	>=4 <6.11

React/Next.js example

Original from https://github.com/kaiyuanshe/kaiyuanshe.github.io

Installation

npm i mobx mobx-react mobx-i18n
Copy

Configuration

tsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "useDefineForClassFields": true,
        "experimentalDecorators": false
    }
}
Copy

Translation

translation/zh-CN.ts

import { textJoin } from 'mobx-i18n';

export default {
    open_source: '开源',
    project: '项目',
    love: ({ a, b }: Record<'a' | 'b', string>) => textJoin(a, '爱', b)
} as const;
Copy

translation/en-US.ts

import { textJoin } from 'mobx-i18n';

export default {
    open_source: 'Open Source',
    project: 'project',
    love: ({ a, b }: Record<'a' | 'b', string>) => textJoin(a, 'love', b)
} as const;
Copy

Initialization

model/Translation.ts

export const i18n = new TranslationModel({
    'zh-CN': zhCN,
    'en-US': () => import('../translation/en-US')
});

export const LanguageName: Record<(typeof i18n)['currentLanguage'], string> = {
    'zh-CN': '简体中文',
    'en-US': 'English'
};
Copy

pages/index.ts

import { GetServerSideProps } from 'next';
import { textJoin, parseLanguageHeader } from 'mobx-i18n';

import { i18n, LanguageName } from 'model/Translation';

export const getServerSideProps: GetServerSideProps = ({ req }) => {
    const languages = parseLanguageHeader(req.headers['accept-language'] || '');

    await i18n.loadLanguages(languages);

    return { props: {} };
};

@observer
export default class HomePage extends PureComponent {
    render() {
        const { currentLanguage, t } = i18n;

        return (
            <>
                <select
                    value={currentLanguage}
                    onChange={({ currentTarget: { value } }) =>
                        i18n.changeLanguage(value as typeof currentLanguage)
                    }
                >
                    {Object.entries(LanguageName).map(([code, name]) => (
                        <option key={code} value={code}>
                            {name}
                        </option>
                    ))}
                </select>
                <p>
                    {t('love', {
                        a: '我',
                        b: textJoin(t('open_source'), t('project'))
                    })}
                </p>
            </>
        );
    }
}
Copy

Inspired by

1. https://github.com/infinum/react-mobx-translatable
2. https://github.com/jverhoelen/react-mobx-i18n
3. https://github.com/QuiiBz/next-international