[add] Speech Synthesis model & Translation test script (#6)

.github/workflows/main.yml

@@ -7,26 +7,26 @@ jobs:
     Build-and-Publish:
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@v3
+            - uses: actions/checkout@v4
 
-            - uses: pnpm/action-setup@v2
+            - uses: pnpm/action-setup@v4
               with:
-                  version: 8
-            - uses: actions/setup-node@v3
+                  version: 9
+            - uses: actions/setup-node@v4
               with:
-                  node-version: 18
+                  node-version: 20
                   registry-url: https://registry.npmjs.org
                   cache: pnpm
             - name: Install Dependencies
               run: pnpm i --frozen-lockfile
 
             - name: Build & Publish
-              run: npm publish
+              run: npm publish --access public --provenance
               env:
                   NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
             - name: Update document
-              uses: peaceiris/actions-gh-pages@v3
+              uses: peaceiris/actions-gh-pages@v4
               with:
                   publish_dir: ./docs
                   personal_token: ${{ secrets.GITHUB_TOKEN }}

.husky/pre-commit

@@ -1,5 +1 @@
-#!/bin/sh
-
-. "$(dirname "$0")/_/husky.sh"
-
 npm test

.husky/pre-push

@@ -1,5 +1 @@
-#!/bin/sh
-
-. "$(dirname "$0")/_/husky.sh"
-
 npm run build

.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Debug Jest",
+            "type": "node",
+            "request": "launch",
+            "runtimeArgs": [
+                "--inspect-brk",
+                "${workspaceRoot}/node_modules/jest/bin/jest.js",
+                "--runInBand"
+            ],
+            "console": "integratedTerminal",
+            "internalConsoleOptions": "neverOpen"
+        }
+    ]
+}

ReadMe.md

@@ -17,6 +17,7 @@ Responsive **Translation** utility based on [TypeScript][1] & [MobX][2]
 -   [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
 
@@ -25,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` |
 
-## React/Next.js example
+## Text internationalization (React/Next.js example)
 
 Original from https://github.com/kaiyuanshe/kaiyuanshe.github.io
 
 ### Installation
 
 ```shell
-npm i mobx mobx-react mobx-i18n
+npm i mobx mobx-react mobx-i18n next-ssr-middleware
 ```
 
 ### Configuration
@@ -91,24 +92,19 @@ export const LanguageName: Record<(typeof i18n)['currentLanguage'], string> = {
 };
 ```
 
-#### `pages/index.ts`
+#### `pages/index.tsx`
 
 ```tsx
-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'] || '');
+import { textJoin } from 'mobx-i18n';
+import { compose, translator } from 'next-ssr-middleware';
+import { Component } from 'react';
 
-    await i18n.loadLanguages(languages);
+import { i18n, LanguageName } from '../model/Translation';
 
-    return { props: {} };
-};
+export const getServerSideProps = compose(translator(i18n));
 
 @observer
-export default class HomePage extends PureComponent {
+export default class HomePage extends Component {
     render() {
         const { currentLanguage, t } = i18n;
 
@@ -138,6 +134,57 @@ export default class HomePage extends PureComponent {
 }
 ```
 
+## 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 (
+            <>
+                <button
+                    style={{ background: speaking ? 'red' : 'blue' }}
+                    onClick={this.toggleSpeaking}
+                >
+                    {speaking ? '🔇' : '📢'}
+                </button>
+                <article>
+                    <h1>The Four Freedoms</h1>
+                    <ol>
+                        <li>Freedom of speech and expression</li>
+                        <li>Freedom of worship</li>
+                        <li>Freedom from want</li>
+                        <li>Freedom from fear</li>
+                    </ol>
+                </article>
+            </>
+        );
+    }
+}
+```
+
 ## Inspired by
 
 1. https://github.com/infinum/react-mobx-translatable
@@ -149,3 +196,4 @@ export default class HomePage extends PureComponent {
 [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

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mobx-i18n",
-    "version": "0.5.0",
+    "version": "0.6.0",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "Responsive Translation utility based on TypeScript & MobX",
@@ -27,25 +27,32 @@
     "module": "dist/index.esm.js",
     "main": "dist/index.js",
     "dependencies": {
-        "@swc/helpers": "^0.5.3",
-        "regenerator-runtime": "^0.14.1"
+        "@swc/helpers": "^0.5.13",
+        "regenerator-runtime": "^0.14.1",
+        "web-utility": "^4.4.0"
     },
     "peerDependencies": {
         "mobx": ">=6.11"
     },
     "devDependencies": {
-        "@parcel/config-default": "~2.11.0",
-        "@parcel/packager-ts": "~2.11.0",
-        "@parcel/transformer-typescript-tsc": "~2.11.0",
-        "@parcel/transformer-typescript-types": "~2.11.0",
-        "husky": "^8.0.3",
-        "lint-staged": "^15.2.0",
-        "mobx": "^6.12.0",
-        "parcel": "~2.11.0",
-        "prettier": "^3.2.4",
-        "typedoc": "^0.25.7",
-        "typedoc-plugin-mdn-links": "^3.1.12",
-        "typescript": "~5.3.3"
+        "@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",
+        "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",
+        "ts-node": "^10.9.2",
+        "typedoc": "^0.26.8",
+        "typedoc-plugin-mdn-links": "^3.3.2",
+        "typescript": "~5.6.2"
     },
     "prettier": {
         "singleQuote": true,
@@ -56,15 +63,19 @@
     "lint-staged": {
         "*.{md,json,yml,ts}": "prettier --write"
     },
+    "jest": {
+        "preset": "ts-jest",
+        "testEnvironment": "jsdom"
+    },
     "browserslist": "> 0.5%, last 2 versions, not dead, IE 11",
     "targets": {
         "main": {
             "optimize": true
         }
     },
     "scripts": {
-        "prepare": "husky install",
-        "test": "lint-staged",
+        "prepare": "husky",
+        "test": "lint-staged && jest",
         "build": "rm -rf dist/ docs/  &&  parcel build  &&  typedoc source/",
         "prepublishOnly": "npm test  &&  npm run build"
     }