[add] PR badges configuration

[optimize] simplify Repository model based on MobX-GitHub
[optimize] replace React with PReact to reduce Bundle Size
[optimize] upgrade to PNPM 9 & other Upstream packages

Author: TechQuery

.github/pr-badge.yml

@@ -0,0 +1,17 @@
+- icon: visualstudio
+  label: 'GitHub.dev'
+  message: 'PR-$prNumber'
+  color: 'blue'
+  url: 'https://github.dev/$owner/$repo/pull/$prNumber'
+
+- icon: github
+  label: 'GitHub codespaces'
+  message: 'PR-$prNumber'
+  color: 'black'
+  url: 'https://codespaces.new/$owner/$repo/pull/$prNumber'
+
+- icon: git
+  label: 'GitPod.io'
+  message: 'PR-$prNumber'
+  color: 'orange'
+  url: 'https://gitpod.io/?autostart=true#https://github.com/$owner/$repo/pull/$prNumber'

.github/workflows/main.yml

@@ -15,7 +15,7 @@ jobs:
 
       - uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 9
       - uses: actions/setup-node@v3
         if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
         with:

.github/workflows/pull-request.yml

@@ -13,7 +13,7 @@ jobs:
       VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
       VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
 
       - name: Deploy to Vercel

README.md

@@ -11,10 +11,10 @@ which is inspired by [WebCell scaffold][5].
 ## Technology stack
 
 - Language: [TypeScript v5][2]
-- Component engine: [React v18][1]
+- Component engine: [PReact v10][1]
 - State management: [MobX v6][3]
 - Component suite: [Ant Design v5][4] + [Bootstrap v5][9] (CSS utilities)
-- HTTP Client: [KoAJAX][10]
+- HTTP Client: [KoAJAX v1][10]
 - PWA framework: [Workbox v7][11]
 - Package bundler: [Parcel v2][12]
 - CI / CD: GitHub [Actions][13] + [Pages][14]
@@ -25,16 +25,27 @@ which is inspired by [WebCell scaffold][5].
 2. [Spinner](./src/component/Spinner.tsx)
 3. [REST Form](./src/component/RestForm.tsx)
 4. [REST Table](./src/component/RestTable.tsx)
+5. [GitHub logo](src/component/Git/Logo.tsx)
+6. [GitHub card](src/component/Git/Card.tsx)
 
 ## Best practice
 
-1.  Install **[Settings][15] GitHub app** in your account or organization
-2.  Click the **[Use this template][16] button** on the top of this GitHub repository's home page, then create your own repository in the app-installed namespace above
-3.  Click the **[Open in GitHub codespaces][7] button** on the top of ReadMe file, then an **online VS Code development environment** will be started immediately
-4.  Set [Vercel variables][17] as [Repository secrets][18], then every commit will get an independent **Preview URL**
-5.  Recommend to add a [Notification step in GitHub actions][19] for your Team IM app
-6.  Remind the PMs & users of your product to submit **Feature/Enhancement** requests or **Bug** reports with [Issue forms][20] instead of IM messages or Mobile Phone calls
-7.  Collect all these issues into [Project kanbans][21], then create **Pull requests** & add `closes #issue_number` into its description for automation
+1.  Install GitHub apps in your organization or account:
+
+    1.  [Probot settings][15]: set up Issue labels & Pull Request rules
+    2.  [PR badge][16]: set up Online [VS Code][17] editor entries in Pull Request description
+
+2.  Click the **[<kbd>Use this template</kbd>][18] button** on the top of this GitHub repository's home page, then create your own repository in the app-installed namespace above
+
+3.  Click the **[<kbd>Open in GitHub codespaces</kbd>][7] button** on the top of ReadMe file, then an **online VS Code development environment** will be started immediately
+
+4.  Set [Vercel variables][19] as [Repository secrets][20], then every commit will get an independent **Preview URL**
+
+5.  Recommend to add a [Notification step in GitHub actions][21] for your Team IM app
+
+6.  Remind the PMs & users of your product to submit **Feature/Enhancement** requests or **Bug** reports with [Issue forms][22] instead of IM messages or Mobile Phone calls
+
+7.  Collect all these issues into [Project kanbans][23], then create **Pull requests** & add `closes #issue_number` into its description for automation
 
 ## Development
 
@@ -67,9 +78,11 @@ pnpm build
 [13]: https://github.com/features/actions
 [14]: https://pages.github.com/
 [15]: https://github.com/apps/settings
-[16]: https://github.com/new?template_name=React-MobX-Ant-Design-ts&template_owner=idea2app
-[17]: https://github.com/idea2app/Next-Bootstrap-ts/blob/80967ed49045af9dbcf4d3695a2c39d53a6f71f1/.github/workflows/pull-request.yml#L9-L11
-[18]: https://github.com/idea2app/React-MobX-Ant-Design-ts/settings/secrets/actions
-[19]: https://github.com/kaiyuanshe/kaiyuanshe.github.io/blob/bb4675a56bf1d6b207231313da5ed0af7cf0ebd6/.github/workflows/pull-request.yml#L32-L56
-[20]: https://github.com/idea2app/React-MobX-Ant-Design-ts/issues/new/choose
-[21]: https://github.com/idea2app/React-MobX-Ant-Design-ts/projects
+[16]: https://pullrequestbadge.com/
+[17]: https://code.visualstudio.com/
+[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
+[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

@@ -11,42 +11,45 @@
     "url": "https://github.com/idea2app/React-MobX-Ant-Design-ts/issues"
   },
   "dependencies": {
-    "@ant-design/cssinjs": "^1.18.4",
-    "@ant-design/icons": "^5.3.1",
-    "antd": "^5.14.2",
+    "@ant-design/cssinjs": "^1.20.0",
+    "@ant-design/icons": "^5.3.7",
+    "antd": "^5.18.0",
     "browser-unhandled-rejection": "^1.0.2",
-    "koajax": "^0.9.6",
+    "koajax": "^1.1.2",
     "lodash": "^4.17.21",
-    "mobx": "^6.12.0",
+    "mobx": "^6.12.3",
+    "mobx-github": "^0.3.1",
     "mobx-i18n": "^0.5.0",
-    "mobx-react": "^9.1.0",
+    "mobx-react": "^9.1.1",
     "mobx-react-helper": "^0.3.1",
-    "mobx-restful": "^0.7.0-rc.0",
-    "mobx-restful-table": "^2.0.0-rc.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router": "^6.22.2",
+    "mobx-restful": "^1.0.0-rc.6",
+    "mobx-restful-table": "^2.0.0-rc.1",
+    "preact": "^10.22.0",
+    "react-router": "^6.23.1",
     "react-router-class-tools": "^0.1.3",
-    "react-router-dom": "^6.22.2",
-    "web-utility": "^4.3.0"
+    "react-router-dom": "^6.23.1",
+    "web-utility": "^4.4.0"
   },
   "devDependencies": {
-    "@octokit/openapi-types": "^20.0.0",
     "@parcel/config-default": "~2.12.0",
     "@parcel/packager-raw-url": "~2.12.0",
     "@parcel/transformer-typescript-tsc": "~2.12.0",
     "@parcel/transformer-webmanifest": "~2.12.0",
-    "@types/lodash": "^4.14.202",
-    "@types/node": "^18.19.21",
-    "@types/react": "^18.2.61",
-    "@types/react-dom": "^18.2.19",
+    "@types/lodash": "^4.17.4",
+    "@types/node": "^18.19.34",
     "husky": "^9.0.11",
-    "lint-staged": "^15.2.2",
+    "lint-staged": "^15.2.5",
     "parcel": "~2.12.0",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.1",
     "process": "^0.11.10",
-    "typescript": "~5.3.3",
-    "workbox-cli": "^7.0.0"
+    "typescript": "~5.4.5",
+    "workbox-cli": "^7.1.0"
+  },
+  "alias": {
+    "react": "preact/compat",
+    "react-dom/test-utils": "preact/test-utils",
+    "react-dom": "preact/compat",
+    "react/jsx-runtime": "preact/jsx-runtime"
   },
   "prettier": {
     "singleQuote": true,