[migrate] upgrade to ES Decorator stage-3 & Husky 9

[optimize] Memory Reducing based on JEMalloc [optimize] upgrade Upstream packages
idea2app · Jan 30, 2024 · 16a5056 · 16a5056 · github-actions · Jan 30, 2024
1 parent f2f8aa8
commit 16a5056
Show file tree

Hide file tree

Showing 12 changed files with 1,188 additions and 995 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,5 +1 @@
-#!/bin/sh
-
-. "$(dirname "$0")/_/husky.sh"
-
 npm test
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -1,5 +1 @@
-#!/bin/sh
-
-. "$(dirname "$0")/_/husky.sh"
-
 npm run build
diff --git a/Dockerfile b/Dockerfile
@@ -1,14 +1,19 @@
 FROM node:18-slim AS base
 RUN apt-get update && \
-    apt-get install ca-certificates curl -y --no-install-recommends
+    apt-get install ca-certificates curl libjemalloc-dev -y --no-install-recommends  && \
+    rm -rf /var/lib/apt/lists/*
+# set environment variable to preload JEMalloc
+ENV LD_PRELOAD="/usr/lib/x86_64-linux-gnu/libjemalloc.so.2"
+# set GC time, set arenas number, set background_thread run GC
+ENV MALLOC_CONF=dirty_decay_ms:1000,narenas:2,background_thread:true
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
 COPY . /app
 WORKDIR /app
 
 FROM base AS prod-deps
-RUN --mount=type=cache,id=pnpm,target=/pnpm/store  pnpm i --P --frozen-lockfile --ignore-scripts
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store  pnpm i -P --frozen-lockfile --ignore-scripts
 
 FROM base AS build
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store  pnpm i --frozen-lockfile

diff --git a/README.md b/README.md
@@ -111,7 +111,7 @@ pnpm container
 [19]: https://github.com/apps/settings
 [20]: https://github.com/new?template_name=Next-Bootstrap-ts&template_owner=idea2app
 [21]: https://codespaces.new/idea2app/Next-Bootstrap-ts
-[22]: https://github.com/idea2app/Next-Bootstrap-ts/blob/80967ed49045af9dbcf4d3695a2c39d53a6f71f1/.github/workflows/pull-request.yml#L9-L12
+[22]: https://github.com/idea2app/Next-Bootstrap-ts/blob/80967ed49045af9dbcf4d3695a2c39d53a6f71f1/.github/workflows/pull-request.yml#L9-L11
 [23]: https://github.com/idea2app/Next-Bootstrap-ts/settings/secrets/actions
 [24]: https://github.com/kaiyuanshe/kaiyuanshe.github.io/blob/bb4675a56bf1d6b207231313da5ed0af7cf0ebd6/.github/workflows/pull-request.yml#L32-L56
 [25]: https://github.com/idea2app/Next-Bootstrap-ts/issues/new/choose

diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,24 @@
+module.exports = {
+  presets: [
+    // https://babeljs.io/docs/babel-preset-typescript
+    [
+      '@babel/preset-typescript',
+      {
+        allowDeclareFields: true,
+        allowNamespaces: true,
+        allExtensions: true,
+        isTSX: true,
+      },
+    ],
+    // https://babeljs.io/docs/babel-preset-react
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+        development: process.env.BABEL_ENV === 'development',
+      },
+    ],
+  ],
+  // https://babeljs.io/docs/babel-plugin-proposal-decorators#note-compatibility-with-babelplugin-transform-class-properties
+  plugins: [['@babel/plugin-proposal-decorators', { version: '2023-05' }]],
+};
diff --git a/components/Git/Logo.tsx b/components/Git/Logo.tsx
@@ -1,4 +1,4 @@
-import * as MobX from 'mobx';
+import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { PureComponent } from 'react';
 import { Image } from 'react-bootstrap';
@@ -9,13 +9,8 @@ export interface GitLogoProps {
 
 @observer
 export class GitLogo extends PureComponent<GitLogoProps> {
-  constructor(props: GitLogoProps) {
-    super(props);
-    MobX.makeObservable?.(this);
-  }
-
-  @MobX.observable
-  path = '';
+  @observable
+  accessor path = '';
 
   async componentDidMount() {
     const { name } = this.props;

diff --git a/package.json b/package.json
@@ -1,14 +1,14 @@
 {
   "name": "@idea2app/next-bootstrap-ts",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "React project scaffold based on TypeScript, Next.js, Bootstrap & Workbox.",
   "private": true,
   "engines": {
     "node": ">=18"
   },
   "dependencies": {
     "@editorjs/code": "^2.9.0",
-    "@editorjs/editorjs": "^2.28.2",
+    "@editorjs/editorjs": "^2.29.0",
     "@editorjs/header": "^2.8.1",
     "@editorjs/image": "^2.9.0",
     "@editorjs/link": "^2.6.2",
@@ -17,48 +17,51 @@
     "@editorjs/quote": "^2.6.0",
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
-    "@next/mdx": "^14.0.4",
-    "@sentry/nextjs": "^7.91.0",
-    "copy-webpack-plugin": "^11.0.0",
+    "@next/mdx": "^14.1.0",
+    "@sentry/nextjs": "^7.98.0",
+    "copy-webpack-plugin": "^12.0.2",
     "editorjs-html": "^3.4.3",
-    "idea-react": "^1.0.0-rc.30",
+    "idea-react": "^2.0.0-rc.0",
     "koajax": "^0.9.6",
     "less": "^4.2.0",
-    "less-loader": "^11.1.4",
+    "less-loader": "^12.1.0",
     "lodash": "^4.17.21",
-    "mobx": "~6.10.2",
-    "mobx-i18n": "^0.4.2",
-    "mobx-react": "~9.0.2",
-    "mobx-restful": "^0.6.12",
-    "mobx-restful-table": "^1.2.2",
-    "next": "^14.0.4",
+    "mobx": "^6.12.0",
+    "mobx-i18n": "^0.5.0",
+    "mobx-react": "^9.1.0",
+    "mobx-restful": "^0.7.0-rc.0",
+    "mobx-restful-table": "^2.0.0-rc.0",
+    "next": "^14.1.0",
     "next-pwa": "~5.6.0",
-    "next-ssr-middleware": "^0.6.2",
+    "next-ssr-middleware": "^0.7.0",
     "next-with-less": "^3.0.1",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.9.2",
-    "react-bootstrap-editor": "^1.0.5",
+    "react-bootstrap": "^2.10.0",
+    "react-bootstrap-editor": "^2.0.0",
     "react-dom": "^18.2.0",
     "react-editor-js": "^2.1.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "remark-mdx-frontmatter": "^4.0.0",
     "web-utility": "^4.1.3",
-    "webpack": "^5.89.0"
+    "webpack": "^5.90.0"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-decorators": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@octokit/openapi-types": "^19.1.0",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^18.19.4",
-    "@types/react": "^18.2.46",
+    "@types/node": "^18.19.10",
+    "@types/react": "^18.2.48",
     "eslint": "^8.56.0",
-    "eslint-config-next": "^14.0.4",
+    "eslint-config-next": "^14.1.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "husky": "^8.0.3",
+    "husky": "^9.0.7",
     "lint-staged": "^15.2.0",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.4",
     "typescript": "~5.3.3"
   },
   "prettier": {
@@ -71,7 +74,7 @@
     "*.{js,mjs,ts,tsx}": "eslint --fix"
   },
   "scripts": {
-    "prepare": "husky install",
+    "prepare": "husky",
     "dev": "next dev",
     "build": "next build",
     "export": "next build  &&  next export",

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -10,69 +10,65 @@ import { framework, mainNav } from './api/home';
 
 export const getServerSideProps = compose(translator(i18n));
 
-const HomePage = observer(() => {
-  const { t } = i18n;
+const { t } = i18n;
 
-  return (
-    <>
-      <PageHead />
+const HomePage = observer(() => (
+  <Container as="main" className={styles.main}>
+    <PageHead />
 
-      <Container as="main" className={styles.main}>
-        <h1 className={`m-0 text-center ${styles.title}`}>
-          {t('welcome_to')}
-          <a className="text-primary mx-2" href="https://nextjs.org">
-            Next.js!
-          </a>
-        </h1>
+    <h1 className={`m-0 text-center ${styles.title}`}>
+      {t('welcome_to')}
+      <a className="text-primary mx-2" href="https://nextjs.org">
+        Next.js!
+      </a>
+    </h1>
 
-        <p className={`text-center fs-4 ${styles.description}`}>
-          {t('get_started_by_editing')}
-          <code className={`mx-2 rounded-3 bg-light ${styles.code}`}>
-            pages/index.tsx
-          </code>
-        </p>
+    <p className={`text-center fs-4 ${styles.description}`}>
+      {t('get_started_by_editing')}
+      <code className={`mx-2 rounded-3 bg-light ${styles.code}`}>
+        pages/index.tsx
+      </code>
+    </p>
 
-        <Row className="g-4" xs={1} sm={2} md={4}>
-          {mainNav().map(({ link, title, summary }) => (
-            <Col key={link}>
-              <Card
-                className={`h-100 p-4 rounded-3 border ${styles.card}`}
-                tabIndex={-1}
-              >
-                <Card.Body>
-                  <Card.Title as="h2" className="fs-4 mb-3">
-                    <a href={link} className="stretched-link">
-                      {title} &rarr;
-                    </a>
-                  </Card.Title>
-                  <Card.Text className="fs-5">{summary}</Card.Text>
-                </Card.Body>
-              </Card>
-            </Col>
-          ))}
-        </Row>
+    <Row className="g-4" xs={1} sm={2} md={4}>
+      {mainNav().map(({ link, title, summary }) => (
+        <Col key={link}>
+          <Card
+            className={`h-100 p-4 rounded-3 border ${styles.card}`}
+            tabIndex={-1}
+          >
+            <Card.Body>
+              <Card.Title as="h2" className="fs-4 mb-3">
+                <a href={link} className="stretched-link">
+                  {title} &rarr;
+                </a>
+              </Card.Title>
+              <Card.Text className="fs-5">{summary}</Card.Text>
+            </Card.Body>
+          </Card>
+        </Col>
+      ))}
+    </Row>
 
-        <h2 className="my-4 text-center">{t('upstream_projects')}</h2>
-        <Row className="g-4" xs={1} sm={2} md={3}>
-          {framework.map(
-            ({ title, languages, tags, summary, link, repository }) => (
-              <Col key={title}>
-                <GitCard
-                  className={`h-100 ${styles.card}`}
-                  full_name={title}
-                  html_url={repository}
-                  homepage={link}
-                  languages={languages}
-                  topics={tags}
-                  description={summary}
-                />
-              </Col>
-            ),
-          )}
-        </Row>
-      </Container>
-    </>
-  );
-});
+    <h2 className="my-4 text-center">{t('upstream_projects')}</h2>
+    <Row className="g-4" xs={1} sm={2} md={3}>
+      {framework.map(
+        ({ title, languages, tags, summary, link, repository }) => (
+          <Col key={title}>
+            <GitCard
+              className={`h-100 ${styles.card}`}
+              full_name={title}
+              html_url={repository}
+              homepage={link}
+              languages={languages}
+              topics={tags}
+              description={summary}
+            />
+          </Col>
+        ),
+      )}
+    </Row>
+  </Container>
+));
 
 export default HomePage;
diff --git a/pages/pagination.tsx b/pages/pagination.tsx
@@ -12,12 +12,12 @@ import { i18n } from '../models/Translation';
 
 export const getServerSideProps = compose(translator(i18n));
 
+const { t } = i18n;
+
 @observer
 export default class PaginationPage extends PureComponent {
   @computed
   get columns(): Column<GitRepository>[] {
-    const { t } = i18n;
-
     return [
       {
         key: 'full_name',
@@ -55,8 +55,6 @@ export default class PaginationPage extends PureComponent {
   }
 
   render() {
-    const { t } = i18n;
-
     return (
       <Container style={{ height: '91vh' }}>
         <PageHead title={t('pagination')} />