feat: update to umijs 4

Author: Aarebecca

SECURITY.md

@@ -13,7 +13,7 @@ currently being supported with security updates.
 | pnpm       | 7.x                     |
 | antd       | 4.x                     |
 | react      | 17.x                    |
-| umi        | 3.x                     |
+| umi        | 4.x                     |
 | father     | 2.x                     |
 | webpack    | 5.x                     |
 

package.json

@@ -51,7 +51,7 @@
     "react": "17",
     "react-dom": "17.x",
     "stream-browserify": "^3.0.0",
-    "umi": "3.x"
+    "@umijs/max": "4.x"
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.1",

packages/gi-site/.umirc.ts

@@ -1,6 +1,6 @@
+import { defineConfig } from 'umi';
 import GI_SDK from '@antv/gi-sdk/package.json';
 import GI_THEME_ANTD from '@antv/gi-theme-antd/package.json';
-
 import deps_externals from './scripts/deps_externals.json';
 export const G6_VERSION = '4.8.14';
 export const GRAPHIN_VERSION = '2.7.16';
@@ -26,22 +26,25 @@ export const externalScripts = deps_externals.map(c => {
   return { src: c.url };
 });
 console.log('externals', externals, BUILD_MODE);
+const BASE_CONFIG = {
+  links: [
+    {
+      href: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7svFR6wkPMoAAAAAAAAAAAAADmJ7AQ/original',
+      rel: 'shortcut icon',
+    },
+  ],
+};
 const EXTRA_CONFIG = isDev
   ? {
       externals: {
         react: 'React',
         'react-dom': 'ReactDOM',
         antd: 'antd',
-        // '@antv/g6': 'G6',
-        // '@antv/graphin': 'Graphin',
       },
       scripts: [
-        'https://gw.alipayobjects.com/os/lib/react/17.0.2/umd/react.production.min.js',
-        'https://gw.alipayobjects.com/os/lib/react-dom/17.0.2/umd/react-dom.production.min.js',
+        'https://gw.alipayobjects.com/os/lib/react/18.2.0/umd/react.production.min.js',
+        'https://gw.alipayobjects.com/os/lib/react-dom/18.2.0/umd/react-dom.production.min.js',
         'https://gw.alipayobjects.com/os/lib/antd/4.24.8/dist/antd.min.js',
-        // 'https://gw.alipayobjects.com/os/lib/antv/g6/4.8.8/dist/g6.min.js',
-        // // 'https://gw.alipayobjects.com/os/lib/antv/graphin/2.7.13/dist/graphin.min.js',
-        // 'http://localhost:5501/graphin.min.js',
       ],
       links: [],
     }
@@ -58,31 +61,48 @@ const EXTRA_CONFIG = isDev
     };
 
 export default {
-  // base: '/',
   base: '/',
+  title: 'AntV Insight 让数据栩栩如生',
+  metas: [
+    {
+      name: 'keywords',
+      content: 'AntV Insight 数据可视化平台 图可视化 地理可视化 分析应用低代码构建',
+    },
+    {
+      name: 'description',
+      content:
+        'AntV Insight 是蚂蚁集团 AntV 团队推出的一款数据分析产品，用户可以在线完成视觉映射，分析洞察工作，也可以一键导出SDK，二次开发，集成部署',
+    },
+  ],
+  externals: EXTRA_CONFIG.externals,
+  scripts: EXTRA_CONFIG.scripts,
+  links: [...BASE_CONFIG.links, ...EXTRA_CONFIG.links],
+  styles: ['body {background: var(--background-color); color: var(--text-color)}'],
+  headScripts: [
+    'https://www.googletagmanager.com/gtag/js?id=G-9Z6Z0NTLFB',
+    "window.dataLayer = window.dataLayer || [];function gtag() {dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-9Z6Z0NTLFB');",
+    "window.TracertCmdCache = window.TracertCmdCache || [];var t = window.Tracert || {_isRenderInit: !0,call: function () {window.TracertCmdCache.push(arguments);},},f = ['call','start','config','logPv','info','err','click','expo','pageName','pageState','time','timeEnd','parse','checkExpo','stringify','report','set','before'];for (let i = 0; i < f.length; i++) {(function (fn) {t[fn] = function () {var a = [],l = arguments.length;for (var j = 0; j < l; j++) {a.push(arguments[j]);}a.unshift(fn);window.TracertCmdCache.push(a);};})(f[i]);}window.Tracert = t;window._to = window._to || {};function filterLog(logType) {return function (opts) {return !!window.GI_USER_INFO?.outUserNo;};}window.Tracert.call('before', 'logPv', filterLog('PageMonitor'));window.Tracert.call('before', 'expo', filterLog('expo'));window.Tracert.call('before', 'click', filterLog('click'));",
+    'https://ur.alipay.com/tracert_a3220.js',
+  ],
   publicPath: BUILD_MODE === 'docker' ? '/public/' : '/',
   hash: true,
-  favicon: 'https://gw.alipayobjects.com/zos/bmw-prod/b9a0f537-3768-445d-aa39-ff49de82124a.svg',
+  favicons: ['https://gw.alipayobjects.com/zos/bmw-prod/b9a0f537-3768-445d-aa39-ff49de82124a.svg'],
   history: {
-    type: 'hash',
+    type: 'browser',
   },
   alias: {
     '@': './src',
-  },
-  nodeModulesTransform: {
-    type: 'none',
+    // '@antv/gi-sdk': '../gi-sdk/src',
   },
   routes: [
-    { exact: true, path: '/', redirect: '/home' },
+    { exact: true, path: '', redirect: '/home' },
     { exact: true, path: '/workspace/:projectId', component: 'Analysis' },
     { exact: true, path: '/share/:shareId', component: 'Share' },
     { exact: true, path: '/tabs/:type', component: 'Tab' },
     {
       path: '/',
-      component: '@/layouts/index',
+      component: '@/layouts/Main',
       routes: [
-        { exact: true, path: '/workspace', component: 'Workspace' },
-        { exact: true, path: '/services', component: 'ServerCenter' },
         { exact: true, path: '/home', component: 'Home' },
         {
           path: '/dataset',
@@ -182,25 +202,34 @@ export default {
             },
           ],
         },
-        { component: '404' },
+        { exact: true, path: '/services', component: 'ServerCenter' },
+        { exact: true, path: '/workspace', component: 'Workspace' },
       ],
     },
+    { component: '404' },
   ],
-  ...EXTRA_CONFIG,
+
   request: {
     dataField: '',
   },
-  // ...EXTRA_CONFIG,
-  analyze: {
-    analyzerMode: 'server',
-    analyzerPort: 8888,
-    openAnalyzer: true,
-    // generate stats file while ANALYZE_DUMP exist
-    generateStatsFile: false,
-    statsFilename: 'stats.json',
-    logLevel: 'info',
-    defaultSizes: 'parsed', // stat  // gzip
+  fastRefresh: true,
+  mfsu: {
+    // exclude: ['@antv/*', '@alipay/*'],
+    // strategy: 'eager',
   },
+  // monorepoRedirect: {
+  //   srcDir: ['src'],
+  // },
+  // analyze: {
+  // analyzerMode: 'server',
+  // analyzerPort: 8888,
+  // openAnalyzer: true,
+  // // generate stats file while ANALYZE_DUMP exist
+  // generateStatsFile: false,
+  // statsFilename: 'stats.json',
+  // logLevel: 'info',
+  // defaultSizes: 'parsed', // stat  // gzip
+  // },
   chainWebpack(memo, { type }) {
     memo.module
       .rule('mjs$')

packages/gi-site/package.json

@@ -10,15 +10,14 @@
   ],
   "main": "dist/app.js",
   "scripts": {
-    "analyse": "ANALYZE=1 NODE_OPTIONS=--max_old_space_size=4096 umi build",
-    "build": "node --experimental-json-modules scripts/pre-build.mjs && NODE_OPTIONS=--max_old_space_size=4096 umi build",
-    "build:docker": "node scripts/link.mjs && cd ../../ && npm run build:all:umd && cd packages/gi-site/ &&  BUILD_MODE=docker node scripts/pre-build.mjs  && node scripts/copy-assets.mjs && BUILD_MODE=docker  NODE_OPTIONS=--max_old_space_size=4096 umi build",
+    "analyse": "ANALYZE=1 NODE_OPTIONS=--max_old_space_size=4096 max build",
+    "build": "node --experimental-json-modules scripts/pre-build.mjs && NODE_OPTIONS=--max_old_space_size=4096 max build",
+    "build:docker": "node scripts/link.mjs && cd ../../ && npm run build:all:umd && cd packages/gi-site/ &&  BUILD_MODE=docker node scripts/pre-build.mjs  && node scripts/copy-assets.mjs && BUILD_MODE=docker  NODE_OPTIONS=--max_old_space_size=4096 max build",
     "deploy": "node ./scripts/deploy.js",
-    "start": "node --experimental-json-modules scripts/link.mjs && node scripts/pre-build.mjs && cross-env NODE_OPTIONS=--max_old_space_size=4096 cross-env PORT=8000 umi dev",
+    "start": "node --experimental-json-modules scripts/link.mjs && node scripts/pre-build.mjs && cross-env NODE_OPTIONS=--max_old_space_size=4096 cross-env PORT=8000 max dev",
     "link": "node scripts/link.mjs",
     "unlink": "cross-env UNLINK=true node scripts/link.mjs",
     "eject": "cross-env EJECT=true node scripts/link.mjs"
-
   },
   "dependencies": {
     "@ant-design/charts": "^1.0.21",
@@ -41,12 +40,14 @@
     "@antv/gi-common-components": "workspace:*",
     "@antv/gi-sdk": "workspace:*",
     "@antv/gi-theme-antd": "workspace:*",
+    "@antv/s2-react": "^1.41.0",
+    "@antv/s2": "^1.48.0",
+    "@antv/util": "^3.3.2",
     "@faker-js/faker": "latest",
     "@fast-csv/format": "latest",
     "@types/classnames": "^2.2.9",
     "@types/node": "^7.0.12",
     "@types/systemjs": "latest",
-    "@umijs/preset-react": "^1.8.12",
     "ahooks": "^2.10.9",
     "classnames": "^2.2.6",
     "d3-scale": "^4.0.0",
@@ -62,10 +63,10 @@
     "node-fetch": "^3.3.0",
     "react-color": "^2.19.3",
     "react-monaco-editor": "^0.48.0",
-    "react-router-dom": "^5.1.1",
     "swr": "^1.2.2",
     "systemjs": "^6.11.0",
-    "umi": "^3.5.18",
+    "@umijs/max": "^4.0.0",
+    "umi": "^4.0.0",
     "umi-request": "^1.3.9",
     "use-immer": "^0.7.0",
     "xlsx2js": "^1.3.8"

packages/gi-site/scripts/pre-build.mjs

@@ -43,15 +43,15 @@ const depsPackage = [
     name: 'localforage',
   },
   {
-    url: 'https://gw.alipayobjects.com/os/lib/react/17.0.2/umd/react.production.min.js',
-    version: '17.0.2',
+    url: 'https://gw.alipayobjects.com/os/lib/react/18.2.0/umd/react.production.min.js',
+    version: '18.2.0',
     global: 'React',
     name: 'react',
   },
   {
-    url: 'https://gw.alipayobjects.com/os/lib/react-dom/17.0.2/umd/react-dom.production.min.js',
+    url: 'https://gw.alipayobjects.com/os/lib/react-dom/18.2.0/umd/react-dom.production.min.js',
     name: 'react-dom',
-    version: '17.0.2',
+    version: '18.2.0',
     global: 'ReactDOM',
   },
   {

packages/gi-site/src/components/DataSource/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useImmer } from 'use-immer';
-import { getSearchParams } from '../../components/utils';
+import { getSearchParams } from '../utils';
 import Detail from './Detail';
 import './index.less';
 import SideList from './List';

packages/gi-site/src/components/Empty/index.tsx

@@ -1,14 +1,13 @@
 import { Button, Empty } from 'antd';
 import * as React from 'react';
-import { useHistory } from 'react-router-dom';
+import { history } from 'umi';
 interface EmptyDemoProps {
   url: string;
   title: string;
 }
 
 const EmptyDemo: React.FunctionComponent<EmptyDemoProps> = props => {
   const { url, title } = props;
-  const history = useHistory();
 
   return (
     <Empty

packages/gi-site/src/components/Navbar/Links.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'umi';
 interface LinksProps {
   active: string;
 }

packages/gi-site/src/components/Navbar/SaveWorkbook.tsx

@@ -1,8 +1,8 @@
+import { history } from 'umi';
 import { SaveOutlined } from '@ant-design/icons';
 import { Graph } from '@antv/graphin';
 import { Button, notification, Tooltip } from 'antd';
 import * as React from 'react';
-import { useHistory } from 'react-router-dom';
 import { useContext } from '../../pages/Analysis/hooks/useContext';
 import * as ProjectServices from '../../services/project';
 import type { IProject } from '../../services/typing';
@@ -23,7 +23,6 @@ const getCover = async (graph: Graph) => {
 
 const SaveWorkbook: React.FunctionComponent<SaveWorkbookProps> = props => {
   const { workbookId } = props;
-  const history = useHistory();
   const { context, updateContext } = useContext();
   const { config, activeAssetsKeys, name, graphRef } = context;
   const handleSave = async () => {

packages/gi-site/src/components/Navbar/SiteNav.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useHistory } from 'react-router-dom';
+import { history } from 'umi';
 import DataModeCard from '../DataModeCard';
 import Github from './Github';
 import Links from './Links';
@@ -28,7 +28,6 @@ const styles = {
 
 const SiteNav: React.FunctionComponent<WorkbookBarProps> = props => {
   const { active } = props;
-  const history = useHistory();
 
   return (
     <header style={styles.container} className="gi-navbar-container">