Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/idea2app/mobx-i18n
Responsive Translation utility based on TypeScript & MobX, which is much easier to learn & use than other i18n solutions of React, Vue & Angular.
https://github.com/idea2app/mobx-i18n
i18n international mobx responsive toolkit translate typescript utility
Last synced: about 2 months ago
JSON representation
Responsive Translation utility based on TypeScript & MobX, which is much easier to learn & use than other i18n solutions of React, Vue & Angular.
- Host: GitHub
- URL: https://github.com/idea2app/mobx-i18n
- Owner: idea2app
- Created: 2022-11-18T23:48:27.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-07T15:26:55.000Z (3 months ago)
- Last Synced: 2024-11-11T21:54:12.570Z (about 2 months ago)
- Topics: i18n, international, mobx, responsive, toolkit, translate, typescript, utility
- Language: TypeScript
- Homepage: https://idea2app.github.io/MobX-i18n/
- Size: 252 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: ReadMe.md
Awesome Lists containing this project
README
# MobX i18n
Responsive **Translation** utility based on [TypeScript][1] & [MobX][2]
[][2]
[][3]
[][4]
[][5]
## Features
- [x] **Type hinting** of Text keys
- [x] **Lambda Expression** values
- [x] Space utility for CJK & other characters
- [x] **Responsive re-rendering**
- [x] **Async loading** of Language packages
- [x] support **HTTP protocol** for **Server-side rendering**
- [x] support BOM/DOM language API for Client-side rendering
- [x] [Speech Synthesis API][6] for **Text-to-Speech** (TTS)
## 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` |
## Text internationalization (React/Next.js example)
Original from https://github.com/kaiyuanshe/kaiyuanshe.github.io
### Installation
```shell
npm i mobx mobx-react mobx-i18n next-ssr-middleware
```
### Configuration
#### `tsconfig.json`
```json
{
"compilerOptions": {
"target": "ES6",
"useDefineForClassFields": true,
"experimentalDecorators": false
}
}
```
### Translation
#### `translation/zh-CN.ts`
```typescript
import { textJoin } from 'mobx-i18n';
export default {
open_source: '开源',
project: '项目',
love: ({ a, b }: Record<'a' | 'b', string>) => textJoin(a, '爱', b)
} as const;
```
#### `translation/en-US.ts`
```typescript
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;
```
### Initialization
#### `model/Translation.ts`
```typescript
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'
};
```
#### `pages/index.tsx`
```tsx
import { textJoin } from 'mobx-i18n';
import { compose, translator } from 'next-ssr-middleware';
import { Component } from 'react';
import { i18n, LanguageName } from '../model/Translation';
export const getServerSideProps = compose(translator(i18n));
@observer
export default class HomePage extends Component {
render() {
const { currentLanguage, t } = i18n;
return (
<>
i18n.changeLanguage(value as typeof currentLanguage)
}
>
{Object.entries(LanguageName).map(([code, name]) => (
{name}
))}
{t('love', {
a: '我',
b: textJoin(t('open_source'), t('project'))
})}
>
);
}
}
```
## Text to Speech (WebCell example)
### `pages/article.tsx`
```tsx
import { component, observer } from 'web-cell';
import { SpeechSynthesisModel, SpeechSynthesisState } from 'mobx-i18n';
@component({ tagName: 'article-page' })
@observer
export class ArticlePage extends HTMLElement {
storeTTS = new SpeechSynthesisModel();
toggleSpeaking = () => {
const { storeTTS } = this;
if (storeTTS.state !== SpeechSynthesisState.Clear)
return storeTTS.toggle();
const text = SpeechSynthesisModel.getReadableText(
this.querySelector('article')
);
storeTTS.speak(text);
};
render() {
const speaking = this.storeTTS.state === SpeechSynthesisState.Speaking;
return (
<>
{speaking ? '🔇' : '📢'}
The Four Freedoms
- Freedom of speech and expression
- Freedom of worship
- Freedom from want
- Freedom from fear
>
);
}
}
```
## 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
[1]: https://www.typescriptlang.org/
[2]: https://mobx.js.org/
[3]: https://libraries.io/npm/mobx-i18n
[4]: https://github.com/idea2app/MobX-i18n/actions/workflows/main.yml
[5]: https://nodei.co/npm/mobx-i18n/
[6]: https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis