[optimize] upgrade to MobX 6, React 18 & Next.js 13

[optimize] update Upstream packages
idea2app · Aug 29, 2023 · d1954ec · d1954ec · github-actions · Aug 29, 2023
1 parent b9a20b0
commit d1954ec
Show file tree

Hide file tree

Showing 13 changed files with 1,075 additions and 1,282 deletions.
diff --git a/README.md b/README.md
@@ -7,11 +7,11 @@
 
 ## Technology stack
 
-- Language: [TypeScript v4][2]
-- Component engine: [Nextjs v12][3]
+- Language: [TypeScript v5][2]
+- Component engine: [Nextjs v13][3]
 - Component suite: [Bootstrap v5][4]
 - PWA framework: [Workbox v6][5]
-- State management: [MobX][9]
+- State management: [MobX v6][9]
 - CI / CD: GitHub [Actions][11] + [Vercel][12]
 
 ## Getting Started
@@ -55,7 +55,7 @@ pnpm pack-image
 pnpm container
 ```
 
-[1]: https://reactjs.org/
+[1]: https://react.dev/
 [2]: https://www.typescriptlang.org/
 [3]: https://nextjs.org/
 [4]: https://getbootstrap.com/

diff --git a/components/Client/Partner.tsx b/components/Client/Partner.tsx
@@ -32,9 +32,9 @@ export const Partner: FC<PartnerProps> = ({
         href={address + ''}
         rel="noreferrer"
       >
-        {name}
+        {name + ''}
       </a>
     </h3>
-    <p className="text-muted">{summary}</p>
+    <p className="text-muted">{summary + ''}</p>
   </div>
 );
diff --git a/components/Git/Logo.tsx b/components/Git/Logo.tsx
@@ -1,4 +1,4 @@
-import { observable } from 'mobx';
+import { makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { PureComponent } from 'react';
 import { Image } from 'react-bootstrap';
@@ -9,6 +9,11 @@ export interface GitLogoProps {
 
 @observer
 export class GitLogo extends PureComponent<GitLogoProps> {
+  constructor(props: GitLogoProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   @observable
   path = '';
 

diff --git a/components/Member/Card.tsx b/components/Member/Card.tsx
@@ -10,26 +10,18 @@ export interface MemberCardProps extends Member {
 }
 
 export const MemberCard: FC<MemberCardProps> = observer(
-  ({
-    className = 'shadow-sm',
-    nickname,
-    type,
-    skill,
-    position,
-    summary,
-    github,
-  }) => (
+  ({ className = 'shadow-sm', nickname, skill, position, summary, github }) => (
     <Card className={className}>
       <Card.Body className="d-flex flex-column gap-3">
         <Card.Title as="h3" className="h5 d-flex justify-content-between">
-          <span style={{ lineHeight: '3rem' }}>{nickname}</span>
+          <span style={{ lineHeight: '3rem' }}>{nickname + ''}</span>
           {github && (
             <Avatar src={`https://github.com/${github}.png`} size={3} />
           )}
         </Card.Title>
-        {position && <Card.Subtitle>{position}</Card.Subtitle>}
+        {position && <Card.Subtitle>{position + ''}</Card.Subtitle>}
 
-        <Card.Text>{summary}</Card.Text>
+        <Card.Text>{summary + ''}</Card.Text>
       </Card.Body>
 
       <Card.Footer>

diff --git a/components/PageHead.tsx b/components/PageHead.tsx
@@ -1,10 +1,10 @@
 import Head from 'next/head';
-import type { FC } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 
-export interface PageHeadProps {
+export type PageHeadProps = PropsWithChildren<{
   title?: string;
   description?: string;
-}
+}>;
 
 const Name = process.env.NEXT_PUBLIC_SITE_NAME,
   Summary = process.env.NEXT_PUBLIC_SITE_SUMMARY;
@@ -16,8 +16,7 @@ export const PageHead: FC<PageHeadProps> = ({
 }) => (
   <Head>
     <title>
-      {title}
-      {title && ' - '}
+      {title ? `${title} - ` : ''}
       {Name}
     </title>
 

diff --git a/components/Project/Card.tsx b/components/Project/Card.tsx
@@ -1,6 +1,5 @@
 import classNames from 'classnames';
 import { text2color } from 'idea-react';
-import Link from 'next/link';
 import { FC } from 'react';
 import { Badge, Card } from 'react-bootstrap';
 import { formatDate } from 'web-utility';
@@ -24,12 +23,14 @@ export const ProjectCard: FC<ProjectCardProps> = ({
   <Card className={classNames('rounded-3 border', styles.card, className)}>
     <Card.Body className="d-flex flex-column">
       <Card.Title as="h3" className="flex-fill fs-5 d-flex align-items-center">
-        <Link href={`/project/${id}`} passHref>
-          <a className="stretched-link text-truncate me-auto" title={name + ''}>
-            {name}
-          </a>
-        </Link>
-        <Badge bg={text2color(workForm + '', ['light'])}>{workForm}</Badge>
+        <a
+          className="stretched-link text-truncate me-auto"
+          title={name + ''}
+          href={`/project/${id}`}
+        >
+          {name + ''}
+        </a>
+        <Badge bg={text2color(workForm + '', ['light'])}>{workForm + ''}</Badge>
       </Card.Title>
       <ul className="list-inline ">
         {(type as string[])?.map(value => (
@@ -45,7 +46,8 @@ export const ProjectCard: FC<ProjectCardProps> = ({
       </ul>
     </Card.Body>
     <Card.Footer className="d-flex">
-      <strong className="flex-fill">￥{price}</strong>
+      <strong className="flex-fill">￥{price + ''}</strong>
+
       <time>🏁 {formatDate(+settlementDate!, 'YYYY-MM-DD')}</time>
     </Card.Footer>
   </Card>

diff --git a/components/Section.tsx b/components/Section.tsx
@@ -1,9 +1,11 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { Button } from 'react-bootstrap';
 
 import { i18n } from '../models/Translation';
 
-export type SectionProps = Partial<Record<'id' | 'title' | 'link', string>>;
+export type SectionProps = PropsWithChildren<
+  Partial<Record<'id' | 'title' | 'link', string>>
+>;
 
 const { t } = i18n;
 

diff --git a/models/Repository.ts b/models/Repository.ts
@@ -1,6 +1,6 @@
 import { components } from '@octokit/openapi-types';
 import { memoize } from 'lodash';
-import { observable } from 'mobx';
+import { makeObservable, observable } from 'mobx';
 import { ListModel, toggle } from 'mobx-restful';
 import { averageOf, buildURLData } from 'web-utility';
 
@@ -28,6 +28,11 @@ const getGitLanguages = memoize(async (URI: string) => {
 });
 
 export class RepositoryModel extends ListModel<GitRepository> {
+  constructor() {
+    super();
+    makeObservable(this);
+  }
+
   client = githubClient;
   baseURI = 'orgs/idea2app/repos';
   indexKey = 'full_name' as const;

diff --git a/next.config.js b/next.config.js
@@ -23,6 +23,5 @@ module.exports = withPWA(
       );
       return config;
     },
-    reactStrictMode: true,
   }),
 );
diff --git a/package.json b/package.json
@@ -1,46 +1,46 @@
 {
   "name": "@idea2app/ows",
-  "version": "2.0.0-beta",
+  "version": "2.0.0-rc",
   "description": "React project scaffold based on TypeScript, Next.js, Bootstrap & Workbox.",
   "private": true,
   "dependencies": {
     "classnames": "^2.3.2",
     "file-type": "^18.5.0",
-    "idea-react": "1.0.0-rc.10",
-    "koajax": "^0.8.4",
+    "idea-react": "^1.0.0-rc.22",
+    "koajax": "^0.8.6",
     "lodash": "^4.17.21",
-    "mobx": "^5.15.7",
-    "mobx-i18n": "^0.3.15",
-    "mobx-lark": "1.0.0-rc.2",
-    "mobx-react": "^6.3.1",
-    "mobx-restful": "^0.6.5",
-    "mobx-restful-table": "^1.0.4",
-    "next": "^12.3.4",
-    "next-ssr-middleware": "^0.5.0",
-    "react": "^17.0.2",
+    "mobx": "^6.10.1",
+    "mobx-i18n": "^0.4.1",
+    "mobx-lark": "^1.0.0-rc.7",
+    "mobx-react": "^9.0.1",
+    "mobx-restful": "^0.6.11",
+    "mobx-restful-table": "^1.1.2",
+    "next": "^13.4.19",
+    "next-ssr-middleware": "^0.5.1",
+    "react": "^18.2.0",
     "react-bootstrap": "^2.8.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "web-utility": "^4.1.0",
     "webpack": "^5.88.2"
   },
   "devDependencies": {
-    "@octokit/openapi-types": "^17.2.0",
-    "@types/lodash": "^4.14.196",
-    "@types/node": "^18.17.3",
-    "@types/react": "^17.0.60",
-    "eslint": "^8.46.0",
-    "eslint-config-next": "^13.4.13",
+    "@octokit/openapi-types": "^18.0.0",
+    "@types/lodash": "^4.14.197",
+    "@types/node": "^18.17.12",
+    "@types/react": "^18.2.21",
+    "eslint": "^8.48.0",
+    "eslint-config-next": "^13.4.19",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
     "less": "^4.2.0",
     "less-loader": "^11.1.3",
-    "lint-staged": "^13.2.3",
+    "lint-staged": "^14.0.1",
     "next-pwa": "~5.6.0",
-    "next-with-less": "^2.0.5",
-    "prettier": "^3.0.1",
+    "next-with-less": "^3.0.1",
+    "prettier": "^3.0.3",
     "ts-node": "^10.9.1",
-    "typescript": "~5.1.6"
+    "typescript": "~5.2.2"
   },
   "prettier": {
     "singleQuote": true,

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -2,17 +2,18 @@ import '../styles/globals.less';
 
 import { Option, Select } from 'idea-react';
 import { HTTPError } from 'koajax';
-import { observer, useStaticRendering } from 'mobx-react';
+import { configure } from 'mobx';
+import { enableStaticRendering, observer } from 'mobx-react';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
-import Link from 'next/link';
 import { Container, Image, Nav, Navbar } from 'react-bootstrap';
 
 import { isServer } from '../models/Base';
 import { i18n, LanguageName } from '../models/Translation';
 
-// eslint-disable-next-line react-hooks/rules-of-hooks
-useStaticRendering(isServer());
+configure({ enforceActions: 'never' });
+
+enableStaticRendering(isServer());
 
 globalThis.addEventListener?.('unhandledrejection', ({ reason }) => {
   var { message, statusText } = reason as HTTPError;
@@ -52,24 +53,23 @@ const AppShell = observer(({ Component, pageProps }: AppProps) => {
 
           <Navbar.Collapse id="navbar-inner">
             <Nav className="ms-auto me-3">
-              <Link href="/project" passHref>
-                <Nav.Link>{t('latest_projects')}</Nav.Link>
-              </Link>
+              <Nav.Link href="/project">{t('latest_projects')}</Nav.Link>
+
               <Nav.Link
                 target="_blank"
                 href="https://idea2app.feishu.cn/docx/THOEdTXzGopJnGxFlLocb8wVnkf"
               >
                 {t('careers')}
               </Nav.Link>
-              <Link href="/open-source" passHref>
-                <Nav.Link>{t('open_source_project')}</Nav.Link>
-              </Link>
-              <Link href="/member" passHref>
-                <Nav.Link>{t('member')}</Nav.Link>
-              </Link>
-              <Link href="/#partner" passHref>
-                <Nav.Link>{t('partner')}</Nav.Link>
-              </Link>
+
+              <Nav.Link href="/open-source">
+                {t('open_source_project')}
+              </Nav.Link>
+
+              <Nav.Link href="/member">{t('member')}</Nav.Link>
+
+              <Nav.Link href="/#partner">{t('partner')}</Nav.Link>
+
               <Nav.Link target="_blank" href="https://github.com/idea2app">
                 GitHub
               </Nav.Link>

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -11,11 +11,11 @@ export default function Document() {
 
         <link
           rel="stylesheet"
-          href="https://unpkg.com/[email protected].0/dist/css/bootstrap.min.css"
+          href="https://unpkg.com/[email protected].1/dist/css/bootstrap.min.css"
         />
         <link
           rel="stylesheet"
-          href="https://unpkg.com/[email protected].4/font/bootstrap-icons.css"
+          href="https://unpkg.com/[email protected].5/font/bootstrap-icons.css"
         />
       </Head>