[optimize] upgrade to Node.js 20, MobX RESTful 1, KoAJAX 3 & other latest Upstream packages/actions

.github/workflows/main.yml

@@ -13,16 +13,16 @@ jobs:
     permissions:
       contents: write
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
           version: 9
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
         with:
-          node-version: 18
+          node-version: 20
           cache: pnpm
 
       - name: Install Dependencies
@@ -34,7 +34,7 @@ jobs:
         run: pnpm export
 
       - name: Deploy to GitHub pages
-        uses: peaceiris/actions-gh-pages@v3
+        uses: peaceiris/actions-gh-pages@v4
         if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
         with:
           publish_dir: ./out

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-slim AS base
+FROM node:20-slim AS base
 RUN apt-get update && \
     apt-get install ca-certificates curl libjemalloc-dev -y --no-install-recommends  && \
     rm -rf /var/lib/apt/lists/*

models/Repository.ts

@@ -1,10 +1,5 @@
 import { HTTPClient } from 'koajax';
-import {
-  githubClient,
-  RepositoryFilter,
-  RepositoryModel,
-  UserModel,
-} from 'mobx-github';
+import { githubClient, RepositoryModel, UserModel } from 'mobx-github';
 import { parseCookie } from 'mobx-i18n';
 import { toggle } from 'mobx-restful';
 
@@ -51,32 +46,6 @@ export class GitRepositoryModel extends RepositoryModel {
     );
     return body!;
   }
-
-  async loadNewPage(
-    pageIndex: number,
-    pageSize: number,
-    filter: RepositoryFilter,
-  ) {
-    const { pageData, totalCount } = await this.loadPage(
-      pageIndex,
-      pageSize,
-      filter,
-    );
-    this.pageSize = pageSize;
-
-    const list = [...this.pageList];
-    list[pageIndex - 1] = pageData;
-    this.pageList = list;
-
-    this.totalCount =
-      totalCount != null
-        ? isNaN(totalCount) || totalCount < 0
-          ? Infinity
-          : totalCount
-        : Infinity;
-
-    return { pageData, totalCount };
-  }
 }
 
 export const userStore = new UserModel();

next.config.mjs

@@ -9,7 +9,7 @@ import withLess from 'next-with-less';
 import RemarkFrontMatter from 'remark-frontmatter';
 import RemarkGfm from 'remark-gfm';
 import RemarkMdxFrontMatter from 'remark-mdx-frontmatter';
-import wp from 'webpack';
+import WP from 'webpack';
 
 const { NODE_ENV, SENTRY_AUTH_TOKEN, SENTRY_ORG, SENTRY_PROJECT } = process.env;
 const isDev = NODE_ENV === 'development';
@@ -33,7 +33,7 @@ const withPWA = setPWA({
  */
 const webpack = config => {
   config.plugins.push(
-    new wp.NormalModuleReplacementPlugin(/^node:/, resource => {
+    new WP.NormalModuleReplacementPlugin(/^node:/, resource => {
       resource.request = resource.request.replace(/^node:/, '');
     }),
   );
@@ -59,28 +59,10 @@ const rewrites = async () => ({
   beforeFiles: [
     {
       source: '/proxy/github.com/:path*',
-      has: isDev
-        ? undefined
-        : [
-            {
-              type: 'header',
-              key: 'Host',
-              value: 'test.oss-toolbox.kaiyuanshe.cn',
-            },
-          ],
       destination: 'https://github.com/:path*',
     },
     {
       source: '/proxy/raw.githubusercontent.com/:path*',
-      has: isDev
-        ? undefined
-        : [
-            {
-              type: 'header',
-              key: 'Host',
-              value: 'test.oss-toolbox.kaiyuanshe.cn',
-            },
-          ],
       destination: 'https://raw.githubusercontent.com/:path*',
     },
   ],

package.json

@@ -4,33 +4,34 @@
   "description": "React project scaffold based on TypeScript, Next.js, Bootstrap & Workbox.",
   "private": true,
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "dependencies": {
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
-    "@next/mdx": "^14.2.5",
-    "@sentry/nextjs": "^8.26.0",
+    "@next/mdx": "^14.2.7",
+    "@sentry/nextjs": "^8.28.0",
+    "@swc/helpers": "^0.5.13",
     "classnames": "^2.5.1",
     "copy-webpack-plugin": "^12.0.2",
     "file-type": "^19.4.1",
     "idea-react": "^2.0.0-rc.2",
-    "koajax": "^1.1.2",
+    "koajax": "^3.0.1",
     "less": "^4.2.0",
     "less-loader": "^12.2.0",
     "license-filter": "^0.2.4",
     "lodash": "^4.17.21",
     "markdown-ime": "^1.0.3",
-    "marked": "^14.0.0",
+    "marked": "^14.1.0",
     "mobx": "^6.13.1",
-    "mobx-github": "^0.3.2",
+    "mobx-github": "^0.3.4",
     "mobx-i18n": "^0.5.0",
     "mobx-react": "^9.1.1",
-    "mobx-restful": "^0.7.0-rc.0",
-    "mobx-restful-table": "^2.0.0-rc.1",
-    "next": "^14.2.5",
+    "mobx-restful": "^1.0.1",
+    "mobx-restful-table": "^2.0.0",
+    "next": "^14.2.7",
     "next-pwa": "~5.6.0",
-    "next-ssr-middleware": "^0.8.5",
+    "next-ssr-middleware": "^0.8.7",
     "next-with-less": "^3.0.1",
     "primereact": "^10.8.2",
     "react": "^18.3.1",
@@ -40,30 +41,34 @@
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "remark-mdx-frontmatter": "^5.0.0",
+    "styled-jsx": "^5.1.6",
     "turndown": "^7.2.0",
     "turndown-plugin-gfm": "^1.0.2",
     "web-utility": "^4.4.0",
-    "webpack": "^5.93.0",
+    "webpack": "^5.94.0",
     "yaml": "^2.5.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.24.7",
     "@babel/plugin-transform-typescript": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
     "@types/lodash": "^4.17.7",
-    "@types/node": "^18.19.45",
-    "@types/react": "^18.3.4",
+    "@types/node": "^20.16.3",
+    "@types/react": "^18.3.5",
     "@types/turndown": "^5.0.5",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.2.5",
+    "eslint-config-next": "^14.2.7",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "get-git-folder": "^0.1.2",
     "husky": "^9.1.5",
-    "lint-staged": "^15.2.9",
+    "lint-staged": "^15.2.10",
     "prettier": "^3.3.3",
     "typescript": "~5.5.4"
   },
+  "resolutions": {
+    "native-file-system-adapter": "npm:@tech_query/native-file-system-adapter@^3.0.1"
+  },
   "prettier": {
     "singleQuote": true,
     "trailingComma": "all",
@@ -81,7 +86,7 @@
     "export": "next build  &&  next export",
     "start": "next start",
     "lint": "next lint",
-    "test": "lint-staged  &&  npm run lint",
+    "test": "lint-staged  &&  npm run lint  &&  tsc --noEmit",
     "pack-image": "docker build -t kaiyuanshe/oss-toolbox:latest .",
     "container": "docker rm -f oss-toolbox  &&  docker run --name oss-toolbox -p 3000:3000 -d kaiyuanshe/oss-toolbox:latest"
   }

pages/api/core.ts

@@ -17,7 +17,8 @@ export function safeAPI(handler: NextAPI): NextAPI {
         res.status(400);
         return res.send({ message: (error as Error).message });
       }
-      let { message, status, body } = error;
+      const { message, response } = error;
+      let { status, body } = response;
 
       res.status(status);
       res.statusMessage = message;

pages/api/polyfill.ts

@@ -1,4 +1,5 @@
 import { HTTPClient } from 'koajax';
+import { DataObject } from 'mobx-restful';
 
 import { safeAPI } from './core';
 
@@ -25,23 +26,17 @@ export const UserAgent: Record<string, string> = {
     'Mozilla/5.0 (Linux; U; Android 4.0.2; en-us; Galaxy Nexus Build/ICL53F) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30',
 };
 
-export default safeAPI(
-  async ({ method, url, query, headers, body }, response) => {
-    delete headers.host;
+export default safeAPI(async ({ url, query, headers }, response) => {
+  delete headers.host;
 
-    const UA = UserAgent[query.browser as string];
+  const UA = UserAgent[query.browser as string];
 
-    const { status, body: data } = await polyfillClient.request({
-      // @ts-ignore
-      method,
-      path: url!,
-      // @ts-ignore
-      headers: { ...headers, 'User-Agent': UA },
-      body: body || undefined,
-    });
-
-    response.status(status);
-    response.setHeader('Access-Control-Allow-Headers', '*');
-    response.send(data);
-  },
-);
+  const { status, body: data } = await polyfillClient.get(
+    url!,
+    { ...headers, 'User-Agent': UA } as DataObject,
+    { responseType: 'text' },
+  );
+  response.status(status);
+  response.setHeader('Access-Control-Allow-Headers', '*');
+  response.send(data);
+});

pages/index.tsx

@@ -1,8 +1,7 @@
 import { Loading } from 'idea-react';
-import { RepositoryModel } from 'mobx-github';
+import { GitRepository, RepositoryModel } from 'mobx-github';
 import { observer } from 'mobx-react';
 import { ScrollList } from 'mobx-restful-table';
-import { InferGetServerSidePropsType } from 'next';
 import { cache, compose, errorLogger, translator } from 'next-ssr-middleware';
 import { FC } from 'react';
 import { Col, Container, Row } from 'react-bootstrap';
@@ -22,13 +21,11 @@ export const getServerSideProps = compose(
     const list = await new RepositoryModel('kaiyuanshe').getList({
       relation: ['languages'],
     });
-    return { props: { list } };
+    return { props: JSON.parse(JSON.stringify({ list })) };
   },
 );
 
-const ProjectListPage: FC<
-  InferGetServerSidePropsType<typeof getServerSideProps>
-> = observer(({ list }) => (
+const ProjectListPage: FC<{ list: GitRepository[] }> = observer(({ list }) => (
   <Container>
     <PageHead title={t('kaiyuanshe_projects')} />
     <h1 className="my-4">{t('kaiyuanshe_projects')}</h1>