mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-12 12:28:42 +00:00
7c0a686cd9
# NEW HOOK API
`useI18n`: same as `useAFFiNEI18N`, with additional APIs
```ts
import { useI18n } from '@affine/i18n'
const i18n = useI18n()
i18n['hello world']() -> 你好世界
```
# NEW GLOBAL i18n Instance
`I18n`: use i18n capabilities outside of React
```ts
import { I18n } from '@affine/i18n'
I18n['hello world']() -> 你好世界
```
# NEW TYPES
`I18nKeys` -> all i18n keys
`I18nString` -> An i18n message (key&options)
transfer and store i18n text outside of React
```ts
const msg: I18nString = {
key: 'helloworld',
options: {
arg1: '123'
}
}
I18n.t(msg) -> 你好世界123
```
before:
```ts
registerCommand('open-page', {
name: t('command.open-page')
// ^- translation happens here,
})
```
after:
```ts
registerCommand('open-page', {
name: { key: 'command.open-page' }
// ^- store I18nString here, translate when the command render to UI
})
```
68 lines
1.8 KiB
Markdown
68 lines
1.8 KiB
Markdown
# i18n
|
|
|
|
## Usages
|
|
|
|
- Update missing translations into the base resources, a.k.a the `src/resources/en.json`
|
|
- Replace literal text with translation keys
|
|
|
|
```tsx
|
|
import { useI18n, LOCALES } from '@affine/i18n';
|
|
// src/resources/en.json
|
|
// {
|
|
// 'Text': 'some text',
|
|
// 'Switch to language': 'Switch to {{language}}', // <- you can interpolation by curly brackets
|
|
// };
|
|
|
|
const App = () => {
|
|
const i18n = useI18n();
|
|
const changeLanguage = (language: string) => {
|
|
i18n.changeLanguage(language);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div>{i18n['Workspace Settings']()}</div>
|
|
<>
|
|
{LOCALES.map(option => {
|
|
return (
|
|
<button
|
|
key={option.name}
|
|
onClick={() => {
|
|
changeLanguage(option.tag);
|
|
}}
|
|
>
|
|
{option.originalName}
|
|
</button>
|
|
);
|
|
})}
|
|
</>
|
|
</div>
|
|
);
|
|
};
|
|
```
|
|
|
|
## How the i18n workflow works?
|
|
|
|
- When the `src/resources/en.json`(base language) updated and merged to the develop branch, will trigger the `languages-sync` action.
|
|
- The `languages-sync` action will check the base language and add missing translations to the Tolgee platform.
|
|
- This way, partners from the community can update the translations.
|
|
|
|
## How to sync translations manually
|
|
|
|
- Set token as environment variable
|
|
|
|
```shell
|
|
export TOLGEE_API_KEY=tgpak_XXXXXXX
|
|
```
|
|
|
|
- Run the `sync-languages:check` to check all languages
|
|
- Run the `sync-languages` script to add new keys to the Tolgee platform
|
|
- Run the `download-resources` script to download the latest full-translation translation resources from the Tolgee platform
|
|
|
|
## References
|
|
|
|
- [AFFiNE | Tolgee](https://i18n.affine.pro/)
|
|
- [Tolgee Documentation](https://tolgee.io/docs/)
|
|
- [i18next](https://www.i18next.com/)
|
|
- [react-i18next](https://react.i18next.com/)
|