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

README.md

@@ -8,10 +8,10 @@
 ## Technology stack
 
 - Language: [TypeScript v5][2]
-- Component engine: [Nextjs v12][3]
+- 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/

components/Address/Card.tsx

@@ -1,5 +1,5 @@
 import { AddressOutput } from '@ideamall/data-model';
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { Card, CardProps } from 'react-bootstrap';
 
 export interface AddressProps
@@ -43,7 +43,9 @@ export const Address: FC<AddressProps> = ({
   </address>
 );
 
-export type AddressCardProps = AddressOutput & Pick<CardProps, 'as'>;
+export type AddressCardProps = PropsWithChildren<
+  AddressOutput & Pick<CardProps, 'as'>
+>;
 
 export const AddressCard: FC<AddressCardProps> = ({
   as,

components/Address/index.tsx

@@ -1,5 +1,5 @@
 import { AddressOutput } from '@ideamall/data-model';
-import { observable } from 'mobx';
+import { makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import {
   Field,
@@ -23,6 +23,11 @@ export interface AddressListProps
 
 @observer
 export class AddressList extends PureComponent<AddressListProps> {
+  constructor(props: AddressListProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   @observable
   creating = false;
 

components/AdminFrame.tsx

@@ -1,20 +1,21 @@
 import { Role } from '@ideamall/data-model';
 import { Icon } from 'idea-react';
 import { observer } from 'mobx-react';
-import { PureComponent } from 'react';
+import dynamic from 'next/dynamic';
+import { PropsWithChildren, PureComponent } from 'react';
 import { Container, Nav } from 'react-bootstrap';
 
 import { i18n } from '../models/Translation';
 import userStore from '../models/User';
 import { MainNavigator } from './MainNavigator';
 import { PageHead } from './PageHead';
-import { SessionBox } from './SessionBox';
 
-const { location } = globalThis,
+const SessionBox = dynamic(() => import('./SessionBox'), { ssr: false }),
+  { location } = globalThis,
   { t } = i18n;
 
 @observer
-export class AdminFrame extends PureComponent {
+export class AdminFrame extends PureComponent<PropsWithChildren> {
   get routes() {
     return [
       { path: '', icon: 'clipboard-data', title: t('dashboard') },
@@ -64,15 +65,15 @@ export class AdminFrame extends PureComponent {
                 )
                   return;
 
-                var { path, active } = this.routeOf(path);
+                const route = this.routeOf(path);
 
                 return (
                   <Nav.Link
                     className={`text-nowrap rounded-3 ${
-                      active ? 'bg-primary text-white' : ''
+                      route.active ? 'bg-primary text-white' : ''
                     }`}
-                    href={path}
-                    key={path}
+                    href={route.path}
+                    key={route.path}
                   >
                     <Icon className="me-3" name={icon} />
                     <span className="d-none d-sm-inline">{title}</span>

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 = '';
 

components/Goods/StyleEditor.tsx

@@ -1,8 +1,9 @@
 import { GoodsStyle } from '@ideamall/data-model';
-import { computed, observable } from 'mobx';
+import { computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
+import { observePropsState } from 'mobx-react-helper';
 import { BadgeInput } from 'mobx-restful-table';
-import { MouseEvent, PureComponent } from 'react';
+import { Component, MouseEvent } from 'react';
 import { Button, Col, Form, Row } from 'react-bootstrap';
 
 import { i18n } from '../../models/Translation';
@@ -16,17 +17,26 @@ export interface GoodsStyleEditorProps {
 }
 
 @observer
-export class GoodsStyleEditor extends PureComponent<GoodsStyleEditorProps> {
+@observePropsState
+export class GoodsStyleEditor extends Component<GoodsStyleEditorProps> {
+  constructor(props: GoodsStyleEditorProps) {
+    super(props);
+    makeObservable(this);
+  }
+
+  declare observedProps: GoodsStyleEditorProps;
+
   @observable
   innerValue = this.props.defaultValue || [];
 
   @computed
   get value() {
-    return this.props.value || this.innerValue;
+    return this.observedProps.value || this.innerValue;
   }
 
+  @computed
   get controlled() {
-    return Array.isArray(this.props.value);
+    return Array.isArray(this.observedProps.value);
   }
 
   handleCreate = (event: MouseEvent<HTMLButtonElement>) => {

components/MainNavigator.tsx

@@ -1,6 +1,6 @@
 import { Option, Select } from 'idea-react';
 import { observer } from 'mobx-react';
-import Link from 'next/link';
+import dynamic from 'next/dynamic';
 import { FC } from 'react';
 import {
   Container,
@@ -11,7 +11,8 @@ import {
 } from 'react-bootstrap';
 
 import { i18n, LanguageName } from '../models/Translation';
-import { UserMenu } from './UserMenu';
+
+const UserMenu = dynamic(() => import('./UserMenu'), { ssr: false });
 
 const Name = process.env.NEXT_PUBLIC_SITE_NAME || '';
 
@@ -37,9 +38,8 @@ export const MainNavigator: FC<MainNavigatorProps> = observer(
 
           <Navbar.Collapse id="navbar-inner">
             <Nav className="me-auto">
-              <Link href="/component" passHref>
-                <Nav.Link>{t('component')}</Nav.Link>
-              </Link>
+              <Nav.Link href="/component">{t('component')}</Nav.Link>
+
               <Nav.Link target="_blank" href="https://github.com/IdeaMall/PWA">
                 {t('source_code')}
               </Nav.Link>

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>
 

components/SessionBox.tsx

@@ -1,22 +1,26 @@
 import { Role } from '@ideamall/data-model';
 import { computed } from 'mobx';
 import { observer } from 'mobx-react';
+import { observePropsState } from 'mobx-react-helper';
 import Head from 'next/head';
-import { MouseEvent, PureComponent } from 'react';
+import { Component, MouseEvent, PropsWithChildren } from 'react';
 
 import userStore, { guard } from '../models/User';
 
-export interface SessionBoxProps {
+export type SessionBoxProps = PropsWithChildren<{
   className?: string;
   autoCover?: boolean;
   roles?: Role[];
-}
+}>;
 
 @observer
-export class SessionBox extends PureComponent<SessionBoxProps> {
+@observePropsState
+export default class SessionBox extends Component<SessionBoxProps> {
+  declare observedProps: SessionBoxProps;
+
   @computed
   get authorized() {
-    const { roles } = this.props,
+    const { roles } = this.observedProps,
       { session } = userStore;
 
     return !!(roles

components/UserMenu.tsx

@@ -1,31 +1,32 @@
 import { Role } from '@ideamall/data-model';
 import { observer } from 'mobx-react';
+import dynamic from 'next/dynamic';
 import { FC } from 'react';
 import { Button, Dropdown, DropdownButton } from 'react-bootstrap';
 
 import { i18n } from '../models/Translation';
 import userStore from '../models/User';
-import { SessionBox } from './SessionBox';
 
-const { t } = i18n;
+const SessionBox = dynamic(() => import('./SessionBox'), { ssr: false }),
+  { t } = i18n;
 
-export const UserMenu: FC = observer(() => {
+const UserMenu: FC = observer(() => {
   const { session } = userStore;
 
-  return (
-    <SessionBox>
-      {session ? (
-        <DropdownButton title={session.nickName || session.mobilePhone}>
-          {!session.roles?.includes(Role.Client) && (
-            <Dropdown.Item href="/admin">{t('dashboard')}</Dropdown.Item>
-          )}
-          <Dropdown.Item onClick={() => userStore.signOut()}>
-            {t('sign_out')}
-          </Dropdown.Item>
-        </DropdownButton>
-      ) : (
-        <Button>{t('sign_in')}</Button>
+  return session ? (
+    <DropdownButton title={session.nickName || session.mobilePhone}>
+      {!session.roles?.includes(Role.Client) && (
+        <Dropdown.Item href="/admin">{t('dashboard')}</Dropdown.Item>
       )}
+      <Dropdown.Item onClick={() => userStore.signOut()}>
+        {t('sign_out')}
+      </Dropdown.Item>
+    </DropdownButton>
+  ) : (
+    <SessionBox>
+      <Button>{t('sign_in')}</Button>
     </SessionBox>
   );
 });
+
+export default UserMenu;

models/Goods.ts

@@ -1,10 +1,15 @@
 import { GoodsItemOutput, GoodsOutput } from '@ideamall/data-model';
-import { observable } from 'mobx';
+import { makeObservable, observable } from 'mobx';
 
 import { TableModel } from './Base';
 import userStore from './User';
 
 export class GoodsModel extends TableModel<GoodsOutput> {
+  constructor() {
+    super();
+    makeObservable(this);
+  }
+
   client = userStore.client;
   baseURI = 'goods';
 

models/Statistic.ts

@@ -1,10 +1,15 @@
 import { StatisticSummary } from '@ideamall/data-model';
-import { observable } from 'mobx';
+import { makeObservable, observable } from 'mobx';
 import { BaseModel, toggle } from 'mobx-restful';
 
 import userStore from './User';
 
 export class StatisticModel extends BaseModel {
+  constructor() {
+    super();
+    makeObservable(this);
+  }
+
   baseURI = 'statistic';
   client = userStore.client;
 

models/User.ts

@@ -1,7 +1,7 @@
 import { Guard } from '@authing/guard';
 import { UserOutput } from '@ideamall/data-model';
 import { HTTPClient } from 'koajax';
-import { observable } from 'mobx';
+import { makeObservable, observable } from 'mobx';
 import { toggle } from 'mobx-restful';
 
 import { API_Host, TableModel } from './Base';
@@ -14,6 +14,11 @@ export const guard = new Guard({
 });
 
 export class UserModel extends TableModel<UserOutput> {
+  constructor() {
+    super();
+    makeObservable(this);
+  }
+
   baseURI = 'user';
 
   @observable

next.config.js

@@ -12,8 +12,4 @@ const { NODE_ENV } = process.env,
 /**
  * @type {import('next').NextConfig}
  */
-module.exports = withPWA(
-  withLess({
-    reactStrictMode: true,
-  }),
-);
+module.exports = withPWA(withLess({}));