[refactor] expose Language Map Loading utility for Front & Back ends

[optimize] merge Language Changing methods
[optimize] simplify Example codes
[optimize] upgrade to Node.js 22, PNPM 10, TypeDoc 0.28 & other latest Upstream packages

Author: TechQuery

.github/workflows/main.yml

@@ -14,10 +14,10 @@ jobs:
 
             - uses: pnpm/action-setup@v4
               with:
-                  version: 9
+                  version: 10
             - uses: actions/setup-node@v4
               with:
-                  node-version: 20
+                  node-version: 22
                   registry-url: https://registry.npmjs.org
                   cache: pnpm
             - name: Install Dependencies

ReadMe.md

@@ -10,14 +10,14 @@ Responsive **Translation** utility based on [TypeScript][1] & [MobX][2]
 
 ## 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)
+- [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
 
@@ -26,14 +26,14 @@ Responsive **Translation** utility based on [TypeScript][1] & [MobX][2]
 | `>=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)
+## Text internationalization (React example)
 
-Original from https://github.com/kaiyuanshe/kaiyuanshe.github.io
+Original from https://github.com/idea2app/React-MobX-Bootstrap-ts
 
 ### Installation
 
 ```shell
-npm i mobx mobx-react mobx-i18n next-ssr-middleware
+npm i mobx mobx-react mobx-i18n
 ```
 
 ### Configuration
@@ -92,47 +92,45 @@ export const LanguageName: Record<(typeof i18n)['currentLanguage'], string> = {
 };
 ```
 
-#### `pages/index.tsx`
+#### `page/index.tsx`
 
 ```tsx
 import { textJoin } from 'mobx-i18n';
-import { compose, translator } from 'next-ssr-middleware';
-import { Component } from 'react';
+import { observer } from 'mobx-react';
 
 import { i18n, LanguageName } from '../model/Translation';
 
-export const getServerSideProps = compose(translator(i18n));
+export const HomePage = observer(() => {
+    const { currentLanguage, t } = i18n;
+
+    return (
+        <>
+            <select
+                value={currentLanguage}
+                onChange={({ currentTarget: { value } }) =>
+                    i18n.loadLanguages(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>
+        </>
+    );
+});
+```
 
-@observer
-export default class HomePage extends Component {
-    render() {
-        const { currentLanguage, t } = i18n;
+### Server Side Rendering (Next.js example)
 
-        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>
-            </>
-        );
-    }
-}
-```
+You can use [React Context API][7] to share the `TranslationModel` instance cross Class & Function components in Client & Server runtimes, which has been all set in an [One-key Template Repository][8].
 
 ## Text to Speech (WebCell example)
 
@@ -197,3 +195,5 @@ export class ArticlePage extends HTMLElement {
 [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
+[7]: https://legacy.reactjs.org/docs/context.html#passing-info-automatically-through-a-tree
+[8]: https://github.com/idea2app/Next-Bootstrap-ts

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mobx-i18n",
-    "version": "0.6.0",
+    "version": "0.7.0",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "Responsive Translation utility based on TypeScript & MobX",
@@ -27,32 +27,38 @@
     "module": "dist/index.esm.js",
     "main": "dist/index.js",
     "dependencies": {
-        "@swc/helpers": "^0.5.13",
+        "@swc/helpers": "^0.5.17",
+        "@types/node": "^22.15.14",
         "regenerator-runtime": "^0.14.1",
-        "web-utility": "^4.4.0"
+        "web-utility": "^4.4.3"
     },
     "peerDependencies": {
         "mobx": ">=6.11"
     },
     "devDependencies": {
-        "@parcel/config-default": "~2.12.0",
-        "@parcel/packager-ts": "~2.12.0",
-        "@parcel/transformer-typescript-tsc": "~2.12.0",
-        "@parcel/transformer-typescript-types": "~2.12.0",
-        "@types/jest": "^29.5.13",
-        "@types/node": "^20.16.10",
-        "husky": "^9.1.6",
+        "@parcel/config-default": "~2.14.4",
+        "@parcel/packager-ts": "~2.14.4",
+        "@parcel/transformer-typescript-tsc": "~2.14.4",
+        "@parcel/transformer-typescript-types": "~2.14.4",
+        "@types/jest": "^29.5.14",
+        "husky": "^9.1.7",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
-        "lint-staged": "^15.2.10",
-        "mobx": "^6.13.3",
-        "parcel": "~2.12.0",
-        "prettier": "^3.3.3",
-        "ts-jest": "^29.2.5",
+        "lint-staged": "^15.5.2",
+        "mobx": "^6.13.7",
+        "parcel": "~2.14.4",
+        "prettier": "^3.5.3",
+        "ts-jest": "^29.3.2",
         "ts-node": "^10.9.2",
-        "typedoc": "^0.26.8",
-        "typedoc-plugin-mdn-links": "^3.3.2",
-        "typescript": "~5.6.2"
+        "typedoc": "^0.28.4",
+        "typedoc-plugin-mdn-links": "^5.0.1",
+        "typescript": "~5.8.3"
+    },
+    "pnpm": {
+        "onlyBuiltDependencies": [
+            "@parcel/watcher",
+            "@swc/core"
+        ]
     },
     "prettier": {
         "singleQuote": true,