upgrade dep: umi 4.x & react 18

2026-11-05 21:24:58 +00:00 · 2022-04-28 10:44:42 +08:00
parent da4abc2293
commit 4042d5ba3a
14 changed files with 157 additions and 145 deletions
@@ -5,6 +5,7 @@ npm-debug.log
 yarn-error.log
 yarn.lock
 package-lock.json
+pnpm-lock.yaml

 # ide
 .idea
@@ -0,0 +1,5 @@
+import routes from './config/routes'
+
+export default {
+    routes
+}
@@ -1,6 +1,4 @@
-import type { IConfig } from 'umi'
-
-const config: IConfig = {
+const config = {
  publicPath: 'https://cdn.antd-admin.zuiidea.com/',
 }

@@ -1,30 +1,22 @@
 /**
 * see more, https://umijs.org/config
 */
-import type { IConfig } from 'umi'
 import lessToJs from 'less-vars-to-js'
 import fs from 'fs'
 import path from 'path'
-import routes from './routes'
 import proxy from './proxy'

 const theme = lessToJs(
  fs.readFileSync(path.join(__dirname, '../src/themes/default.less'), 'utf8')
 )

-const config: IConfig = {
+const config = {
  hash: true,
  ignoreMomentLocale: true,
  targets: { ie: 11 },
-  dynamicImport: {},
  theme,
  proxy,
-  routes,
  devtool: 'eval',
-  nodeModulesTransform: {
-    type: 'none',
-    exclude: [],
-  },
  mock: {
    exclude: ['utils/index'],
  },
@@ -62,8 +54,6 @@ const config: IConfig = {
  chainWebpack: (memo) => {
    memo.module.rule('po').test(/\.po$/).use('po').loader('@lingui/loader')
  },
-  fastRefresh: {},
-  esbuild: {},
 }

 export default config
@@ -1,10 +1,8 @@
-import type { IRoute } from 'umi'
-
-const routes: IRoute[] = [
+const routes = [
  {
    exact: false,
    path: '/',
-    component: '@/layouts',
+    component: '@/layouts/index',
    routes: [
      { exact: true, path: '/login', component: '@/pages/login' },
      { exact: true, path: '/user', component: '@/pages/user' },
@@ -1,74 +1,73 @@
 {
  "name": "antd-admin",
-  "version": "5.3.0",
+  "version": "6.0.0-a.1",
  "license": "MIT",
  "description": "An admin dashboard application demo built upon Ant Design and UmiJS",
  "dependencies": {
-    "@ant-design/icons": "^4.6.2",
-    "@ant-design/pro-layout": "^6.16.0",
-    "@lingui/core": "^3.8.2",
-    "@lingui/detect-locale": "^3.8.2",
-    "@lingui/react": "^3.8.2",
-    "antd": "^4.15.0",
-    "axios": "^0.21.0",
-    "classnames": "^2.2.6",
+    "@ant-design/icons": "^4.7.0",
+    "@ant-design/pro-layout": "^6.35.0",
+    "@lingui/core": "^3.13.3",
+    "@lingui/detect-locale": "^3.13.3",
+    "@lingui/react": "^3.13.3",
+    "antd": "^4.20.1",
+    "axios": "^0.27.2",
+    "classnames": "^2.3.1",
    "dva-model-extend": "^0.1.2",
-    "echarts": "^5.0.0",
-    "echarts-for-react": "^3.0.0",
-    "echarts-gl": "^2.0.2",
-    "echarts-liquidfill": "^3.0.0",
+    "echarts": "^5.3.2",
+    "echarts-for-react": "^3.0.2",
+    "echarts-gl": "^2.0.9",
+    "echarts-liquidfill": "^3.1.0",
    "json-format": "^1.0.1",
-    "lodash": "^4.17.11",
-    "md5": "^2.2.1",
+    "lodash": "^4.17.21",
+    "make-plural": "^7.1.0",
+    "md5": "^2.3.0",
    "nprogress": "^0.2.0",
-    "path-to-regexp": "^6.1.0",
-    "prop-types": "^15.7.0",
-    "qs": "^6.10.0",
-    "react": "^17.0.2",
-    "react-countup": "^4.2.0",
-    "react-dom": "^17.0.2",
-    "react-helmet": "^6.0.0",
+    "path-to-regexp": "^6.2.0",
+    "prop-types": "^15.8.1",
+    "qs": "^6.10.3",
+    "react": "^18.1.0",
+    "react-countup": "^6.2.0",
+    "react-dom": "^18.1.0",
+    "react-helmet": "^6.1.0",
    "react-highcharts": "^16.1.0",
-    "react-perfect-scrollbar": "^1.5.0",
-    "recharts": "^2.0.0",
-    "store": "^2.0.0"
+    "react-perfect-scrollbar": "^1.5.8",
+    "react-router-dom": "^6.3.0",
+    "recharts": "^2.1.9",
+    "store": "^2.0.12"
  },
  "devDependencies": {
-    "@babel/preset-react": "^7.12.13",
+    "@babel/preset-react": "^7.16.7",
    "@lingui/babel-preset-react": "^2.9.2",
-    "@lingui/cli": "^3.8.2",
-    "@lingui/loader": "^3.8.2",
-    "@lingui/macro": "^3.8.2",
-    "@typescript-eslint/eslint-plugin": "^4.20.0",
-    "@typescript-eslint/parser": "^4.20.0",
-    "@umijs/plugin-esbuild": "^1.2.0",
-    "@umijs/preset-react": "^1.8.0",
-    "babel-eslint": "^10.0.0",
-    "babel-plugin-dev-expression": "^0.2.1",
-    "babel-plugin-import": "^1.10.0",
-    "babel-plugin-macros": "^3.0.1",
-    "babel-plugin-module-resolver": "^3.1.1",
-    "cross-env": "^7.0.0",
-    "eslint": "^7.23.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-config-react-app": "^6.0.0",
+    "@lingui/cli": "^3.13.3",
+    "@lingui/loader": "^3.13.3",
+    "@lingui/macro": "^3.13.3",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/parser": "^5.21.0",
+    "babel-plugin-dev-expression": "^0.2.3",
+    "babel-plugin-import": "^1.13.5",
+    "babel-plugin-macros": "^3.1.0",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.14.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-flowtype": "^5.4.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.23.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^6.0.0",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "husky": "^7.0.4",
    "less-vars-to-js": "^1.3.0",
-    "lint-staged": "^10.0.0",
+    "lint-staged": "^12.4.1",
    "mockjs": "^1.1.0",
-    "prettier": "^2.0.0",
-    "stylelint": "^13.2.0",
-    "stylelint-config-prettier": "^8.0.0",
-    "stylelint-config-standard": "^21.0.0",
-    "typescript": "^4.2.3",
-    "umi": "^3.4.25"
+    "prettier": "^2.6.2",
+    "stylelint": "^14.8.0",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard": "^25.0.0",
+    "typescript": "^4.6.3",
+    "umi": "4.0.0-canary.20220428.1"
  },
  "engines": {
    "node": ">= 10.0.0"
@@ -84,31 +83,18 @@
    ]
  },
  "lingui": {
-    "fallbackLocales": {
-      "default": "en"
-    },
+    "fallbackLocales": { "default": "en" },
    "sourceLocale": "en",
-    "locales": [
-      "en",
-      "zh",
-      "pt-br"
-    ],
+    "locales": [ "en", "zh", "pt-br"],
    "catalogs": [
      {
        "path": "src/locales/{locale}/messages",
-        "include": [
-          "src/pages"
-        ],
-        "exclude": [
-          "**/node_modules/**"
-        ]
+        "include": ["src"],
+        "exclude": ["**/node_modules/**"]
      }
    ],
-    "orderBy": "origin",
-    "runtimeConfigModule": [
-      "@/i18n",
-      "i18n"
-    ]
+    "format": "minimal",
+    "runtimeConfigModule": ["@/hooks/useIntlProvider", "i18n"]
  },
  "scripts": {
    "start": "umi dev",
@@ -1,13 +1,16 @@
-import { useHistory, useLocation, UseRequestProvider } from 'umi'
-import useIntlProvider from './useIntlProvider'
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useLingui } from '@lingui/react';
 import useConfig from './useConfig'
-import useRequest from './useRequest'
+import useIntlProvider from './useIntlProvider'
+import useLocalStorage from './useLocalStorage';
+import useRequest from './useRequest';

 export {
-  useIntlProvider,
-  useHistory,
+  useConfig,
+  useNavigate,
  useLocation,
  useRequest,
-  UseRequestProvider,
-  useConfig,
+  useLocalStorage,
+  useIntlProvider,
+  useLingui,
 }
@@ -1,42 +1,47 @@
-import { useEffect, useContext, useState, useCallback } from 'react'
-import { ConfigContext } from '@/utils/context'
-import { LOCALE_LANGUAGE } from '@/configs'
-import { ISupportedLocales } from '@/typings'
-import { ConfigProviderProps } from 'antd/lib/config-provider'
-import { antdI18nMap } from '@/configs'
-import { i18n } from '@/i18n'
-import zh_CN from 'antd/lib/locale/zh_CN'
-import en_US from 'antd/lib/locale/en_US'
-import pt_BR from 'antd/lib/locale/pt_BR'
+import { useEffect, useContext, useState } from 'react';
+import { setupI18n } from '@lingui/core';
+import { LOCALE_LANGUAGE } from '@/configs/constants';
+import { ConfigContext } from '@/utils/context';
+import { useLocalStorage } from '@/hooks';
+import { antdI18nMap } from '@/configs';
+import { SupportedLocales } from '@/typings';
+import { ConfigProviderProps } from 'antd/lib/config-provider';
+import { en, zh } from 'make-plural/plurals';

-const antdLocaleMap = {
-  zh_CN,
-  en_US,
-  pt_BR
-}
+export const i18n = setupI18n({
+  localeData: {
+    en: { plurals: en },
+    zh: { plurals: zh },
+  },
+});

 const useIntlProvider = () => {
-  const { language } = useContext(ConfigContext)
-  const [locale, setLocale] = useState<ConfigProviderProps['locale']>()
+  const { language: defaultLocale } = useContext(ConfigContext);
+  const [language, setLanguage] = useLocalStorage<SupportedLocales>(
+    LOCALE_LANGUAGE,
+    defaultLocale
+  );
+
+  const [locale, setLocale] = useState<ConfigProviderProps['locale']>();

  useEffect(() => {
-    setLocale(antdLocaleMap[antdI18nMap[language]])
-    localStorage.setItem(LOCALE_LANGUAGE, language)
-  }, [language])
+    import(`@/locales/${language}/messages.json`).then(data => {
+      i18n.load(language, data.default);
+      i18n.activate(language);
+    });

-  const setLanguage = useCallback((language: ISupportedLocales) => {
-    if (language !== i18n.locale) {
-      localStorage.setItem(LOCALE_LANGUAGE, language)
-      window.location.reload()
-    }
-  }, [])
+    const path = antdI18nMap[language];
+    import(`antd/lib/locale/${path}.js`).then(data => {
+      setLocale(data.default);
+    });
+  }, [language]);

  return {
    language,
    setLanguage,
    locale,
    i18n,
-  }
-}
+  };
+};

-export default useIntlProvider
+export default useIntlProvider;
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+
+const useLocalStorage = <T>(
+  key: string,
+  initialValue?: T
+): [T, (value: T) => void] => {
+  let defaultValue = initialValue;
+  try {
+    const item = window.localStorage.getItem(key);
+    defaultValue = item ? JSON.parse(item) : initialValue;
+  } catch (error) {
+    defaultValue = initialValue;
+  }
+
+  const [state, setState] = useState(defaultValue as T);
+  const setValue = (value: T) => {
+    try {
+      const valueToStore = value instanceof Function ? value(state) : value;
+      setState(valueToStore);
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return [state, setValue];
+};
+
+export default useLocalStorage;
@@ -3,7 +3,8 @@ import { Dropdown, Menu, Avatar } from 'antd'
 import { language, languages } from '@/configs'
 import { ISupportedLocales } from '@/typings'
 import { Trans } from '@lingui/macro'
-import { useRequest, useHistory, useConfig } from '@/hooks'
+import { history } from 'umi'
+import { useRequest, useConfig } from '@/hooks'
 import { logoutUser } from '@/services'
 import styles from './index.less'

@@ -12,7 +13,6 @@ const { SubMenu } = Menu
 const NotFoundPage: React.FC = () => {
  const { language: locale, setLanguage, userInfo } = useConfig()
  const currentLanguage = language[locale]
-  const history = useHistory()
  const { run: runLogoutUser } = useRequest(logoutUser, {
    manual: true,
    onSuccess: () => history.push('/login'),
@@ -1,12 +1,13 @@
 import React from 'react'
+import { history } from 'umi'
 import { ConfigProvider } from 'antd'
 import { I18nProvider } from '@lingui/react'
 import {
  useIntlProvider,
  useRequest,
-  UseRequestProvider,
-  useHistory,
 } from '@/hooks'
+// @ts-ignore
+import { Outlet } from 'umi'
 import { ConfigContext } from '@/utils/context'
 import request from '@/utils/request'
 import { queryUserInfo, IUserInfo } from '@/services'
@@ -14,7 +15,6 @@ import BaseLayout from './BaseLayout'

 const Layout: React.FC = (props) => {
  const { language, setLanguage, i18n, locale } = useIntlProvider()
-  const history = useHistory()

  const {
    data: userInfo,
@@ -43,13 +43,7 @@ const Layout: React.FC = (props) => {
    <ConfigContext.Provider value={globalConfig}>
      <I18nProvider i18n={i18n}>
        <ConfigProvider locale={locale}>
-          <UseRequestProvider
-            value={{
-              requestMethod: request,
-            }}
-          >
-            <BaseLayout>{props.children}</BaseLayout>
-          </UseRequestProvider>
+          <BaseLayout><Outlet /></BaseLayout>
        </ConfigProvider>
      </I18nProvider>
    </ConfigContext.Provider>
@@ -1,6 +1,6 @@
 import React from 'react'
-import { Redirect } from 'umi'
+import { Navigate } from 'react-router-dom'

-const Index: React.FC = () => <Redirect to="/dashboard" />
+const Index: React.FC = () => <Navigate to="/user" />

 export default Index
@@ -1,10 +1,11 @@
 import React from 'react'
+import { history } from 'umi'
 import { Button, Row, Input, Form } from 'antd'
 import { GithubOutlined } from '@ant-design/icons'
 import { GlobalFooter } from '@/components'
 import { Trans, t } from '@lingui/macro'
 import { config, languages } from '@/configs'
-import { useRequest, useHistory, useConfig } from '@/hooks'
+import { useRequest, useConfig } from '@/hooks'
 import { loginUser, ILoginUserParams } from '@/services'
 import styles from './index.less'

@@ -27,7 +28,7 @@ const Login: React.FC = () => {
  const { run: runLogin, loading } = useRequest(loginUser, {
    manual: true,
  })
-  const history = useHistory()
+
  const { queryUserInfo } = useConfig()

  const handleFinish = (values: ILoginUserParams) => {
@@ -54,11 +54,13 @@ const columns: ColumnType<IUserItem>[] = [
  {
    title: <Trans>Email</Trans>,
    dataIndex: 'email',
+    ellipsis: true,
    key: 'email',
  },
  {
    title: <Trans>Address</Trans>,
    dataIndex: 'address',
+    ellipsis: true,
    key: 'address',
  },
  {