[optimize] upgrade to Node.js 20, MobX RESTful 1, KoAJAX 3 & other la…

…test Upstream packages/actions [optimize] simplify some Logic details
kaiyuanshe · Sep 3, 2024 · 2641d49 · 2641d49 · github-actions · Sep 3, 2024
1 parent b2d38a5
commit 2641d49
Showing 10 changed files with 818 additions and 795 deletions.
diff --git a/.github/workflows/main.yml b/.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

diff --git a/Dockerfile b/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/*

diff --git a/models/Repository.ts b/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();

diff --git a/next.config.mjs b/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*',
     },
   ],

diff --git a/package.json b/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"
   }

diff --git a/pages/api/core.ts b/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;

diff --git a/pages/api/polyfill.ts b/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);
+});
diff --git a/pages/index.tsx b/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>

diff --git a/pages/issue.tsx b/pages/issue.tsx
@@ -1,9 +1,8 @@
 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 { compose, translator } from 'next-ssr-middleware';
+import { cache, compose, errorLogger, translator } from 'next-ssr-middleware';
 import { FC } from 'react';
 import { Breadcrumb, Container, Row } from 'react-bootstrap';
 
@@ -12,49 +11,53 @@ import { PageHead } from '../components/PageHead';
 import { repositoryStore } from '../models/Repository';
 import { i18n } from '../models/Translation';
 
-export const getServerSideProps = compose(translator(i18n), async () => {
-  const list = await new RepositoryModel('kaiyuanshe').getList({
-    relation: ['issues'],
-  });
-  return { props: { list } };
-});
+export const getServerSideProps = compose(
+  cache(),
+  errorLogger,
+  translator(i18n),
+  async () => {
+    const list = await new RepositoryModel('kaiyuanshe').getList({
+      relation: ['issues'],
+    });
+    return { props: JSON.parse(JSON.stringify({ list })) };
+  },
+);
 
 const { t } = i18n;
 
-const IssuesPage: FC<InferGetServerSidePropsType<typeof getServerSideProps>> =
-  observer(({ list }) => (
-    <Container className="py-5">
-      <PageHead title="GitHub issues" />
-      <Breadcrumb>
-        <Breadcrumb.Item href="/">
-          {t('open_source_treasure_box')}
-        </Breadcrumb.Item>
-        <Breadcrumb.Item active>GitHub issues</Breadcrumb.Item>
-      </Breadcrumb>
-      <h1>GitHub issues</h1>
+const IssuesPage: FC<{ list: GitRepository[] }> = observer(({ list }) => (
+  <Container className="py-5">
+    <PageHead title="GitHub issues" />
+    <Breadcrumb>
+      <Breadcrumb.Item href="/">
+        {t('open_source_treasure_box')}
+      </Breadcrumb.Item>
+      <Breadcrumb.Item active>GitHub issues</Breadcrumb.Item>
+    </Breadcrumb>
+    <h1>GitHub issues</h1>
 
-      {repositoryStore.downloading > 0 && <Loading />}
+    {repositoryStore.downloading > 0 && <Loading />}
 
-      <ScrollList
-        translator={i18n}
-        store={repositoryStore}
-        filter={{
-          relation: ['issues'],
-        }}
-        defaultData={list}
-        renderList={allItems => (
-          <Row as="ul" className="list-unstyled g-4">
-            {allItems.map(
-              repository =>
-                !repository.archived &&
-                repository.issues?.[0] && (
-                  <IssueModule key={repository.name} {...repository} />
-                ),
-            )}
-          </Row>
-        )}
-      />
-    </Container>
-  ));
+    <ScrollList
+      translator={i18n}
+      store={repositoryStore}
+      filter={{
+        relation: ['issues'],
+      }}
+      defaultData={list}
+      renderList={allItems => (
+        <Row as="ul" className="list-unstyled g-4">
+          {allItems.map(
+            repository =>
+              !repository.archived &&
+              repository.issues?.[0] && (
+                <IssueModule key={repository.name} {...repository} />
+              ),
+          )}
+        </Row>
+      )}
+    />
+  </Container>
+));
 
 export default IssuesPage;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml