[migrate] replace React 19 with Preact 10 to reduce Bundle Size

[optimize] simplify i18n, Router & Model details

Author: TechQuery

README.md

@@ -82,6 +82,6 @@ pnpm build
 [18]: https://github.com/new?template_name=React-MobX-Ant-Design-ts&template_owner=idea2app
 [19]: https://github.com/idea2app/React-MobX-Ant-Design-ts/blob/ae6204a04c108eddff7ff5265341676b55918509/.github/workflows/main.yml#L10-L12
 [20]: https://github.com/idea2app/React-MobX-Ant-Design-ts/settings/secrets/actions
-[21]: https://github.com/kaiyuanshe/kaiyuanshe.github.io/blob/bb4675a56bf1d6b207231313da5ed0af7cf0ebd6/.github/workflows/pull-request.yml#L32-L56
+[21]: https://github.com/idea2app/Lark-Next-Bootstrap-ts/blob/5c58fd8c6faf85a89a19a0358c315dc8909098e7/.github/workflows/main.yml#L31-L60
 [22]: https://github.com/idea2app/React-MobX-Ant-Design-ts/issues/new/choose
 [23]: https://github.com/idea2app/React-MobX-Ant-Design-ts/projects

package.json

@@ -15,6 +15,7 @@
     "@ant-design/icons": "^6.1.0",
     "antd": "^6.0.1",
     "browser-unhandled-rejection": "^1.0.2",
+    "idb-keyval": "^6.2.2",
     "koajax": "^3.1.2",
     "lodash": "^4.17.21",
     "mobx": "^6.15.0",
@@ -24,8 +25,9 @@
     "mobx-react-helper": "^0.5.1",
     "mobx-restful": "^2.1.4",
     "mobx-restful-table": "^2.6.2",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "preact": "^10.28.0",
+    "react": "npm:@preact/compat",
+    "react-dom": "npm:@preact/compat",
     "react-router": "^7.10.0",
     "react-router-class-tools": "^0.2.1",
     "react-router-dom": "^7.10.0",
@@ -56,6 +58,11 @@
       "msgpackr-extract"
     ]
   },
+  "alias": {
+    "react": "preact/compat",
+    "react-dom": "preact/compat",
+    "react/jsx-runtime": "preact/jsx-runtime"
+  },
   "@parcel/resolver-default": {
     "packageExports": true
   },

pnpm-lock.yaml

@@ -156,7 +156,7 @@ export class RestTable<T extends DataObject> extends ObservedComponent<
       this.props;
 
     const checkable = deletable || typeof onCheck === 'function',
-      { t } = this.props.translator,
+      { t } = props.translator,
       { downloading, pageSize, pageIndex, totalCount = 0, currentPage } = store;
 
     return (

src/component/RestTable.tsx

@@ -8,6 +8,8 @@ export const i18n = new TranslationModel({
   'en-US': () => import('../translation/en-US')
 });
 
+export const { t } = i18n;
+
 export const LanguageName: Record<(typeof i18n)['currentLanguage'], string> = {
   'zh-CN': '简体中文',
   'zh-TW': '繁體中文',

src/model/Translation.ts

@@ -1,4 +1,6 @@
+import { clear } from 'idb-keyval';
 import { observable } from 'mobx';
+import { persist, restore } from 'mobx-restful';
 
 export interface Passport {
   account: string;
@@ -9,27 +11,26 @@ export interface User extends Pick<Passport, 'account'> {
   avatar?: string;
 }
 
-const { localStorage: store } = globalThis;
-
 export class UserModel {
+  @persist()
   @observable
-  accessor session: User | undefined =
-    store['session'] && JSON.parse(store['session']);
+  accessor session: User | undefined;
+
+  restored = restore(this, 'User');
 
   async signIn({ account, key }: Passport) {
     if (account !== 'admin' || key !== '19890604')
       throw new URIError("The key can't be forgotten!");
 
-    this.session = {
+    return (this.session = {
       account,
       avatar: 'https://github.com/idea2app.png'
-    };
-    store['session'] = JSON.stringify(this.session);
+    });
   }
 
   signOut() {
     this.session = undefined;
-    store.clear();
+    return clear();
   }
 }
 

src/model/User.ts

@@ -4,12 +4,11 @@ import { Component } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-class-tools';
 
 import project from '../model/Project';
-import { i18n } from '../model/Translation';
-
-const { t } = i18n;
+import { t } from '../model/Translation';
 
+@withRouter
 @observer
-class HomePage extends Component<
+export class HomePage extends Component<
   RouteComponentProps<{}, {}, { guest: string }>
 > {
   componentDidMount() {
@@ -52,5 +51,3 @@ class HomePage extends Component<
     );
   }
 }
-
-export default withRouter(HomePage);

src/page/Home.tsx

@@ -6,9 +6,7 @@ import { Component } from 'react';
 import { Badge } from '../component/Badge';
 import { Column, RestTable } from '../component/RestTable';
 import { repositoryStore } from '../model/service';
-import { i18n } from '../model/Translation';
-
-const { t } = i18n;
+import { i18n, t } from '../model/Translation';
 
 @observer
 export class PaginationPage extends Component {

src/page/Pagination.tsx

@@ -1,7 +1,7 @@
 import { HashRouter, Route, Routes } from 'react-router-dom';
 
 import { PageBox } from '../component/PageBox';
-import HomePage from './Home';
+import { HomePage } from './Home';
 import { PaginationPage } from './Pagination';
 import { ScrollListPage } from './ScrollList';