Merge branch 'feat/update-umi4' into conflict-upgrade-umi4

.npmrc

@@ -2,4 +2,5 @@
 registry=https://registry.npmmirror.com
 # pnpm
 auto-install-peers=true
-git-checks=false
+git-checks=false
+# public-hoist-pattern[]=*

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

@@ -56,7 +56,7 @@
     "react": "17",
     "react-dom": "17.x",
     "stream-browserify": "^3.0.0",
-    "umi": "3.x"
+    "@umijs/max": "4.x"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",

packages/gi-assets-advance/src/components/AnalysisHistory/TemplateModal.tsx

@@ -1,5 +1,4 @@
-import { useContext } from '@antv/gi-sdk';
-import { createUuid } from '@antv/gi-sdk/lib/process/common';
+import { useContext, utils } from '@antv/gi-sdk';
 import * as React from 'react';
 import { useImmer } from 'use-immer';
 import { CheckCircleFilled, PictureOutlined } from '@ant-design/icons';
@@ -89,8 +88,8 @@ const TemplateModal: React.FC<TemplateModalProps> = props => {
       updateState(draft => {
         draft.configuring = undefined;
         draft.graphData = {
-          id: createUuid(),
-          name: createUuid(),
+          id: utils.createUuid(),
+          name: utils.createUuid(),
           nodes,
           edges: [
             {
@@ -125,8 +124,8 @@ const TemplateModal: React.FC<TemplateModalProps> = props => {
     updateState(draft => {
       draft.configuring = undefined;
       draft.graphData = {
-        id: createUuid(),
-        name: createUuid(),
+        id: utils.createUuid(),
+        name: utils.createUuid(),
         nodes,
         edges,
       };

packages/gi-assets-basic/src/components/LayoutSwitch/Component.tsx

@@ -1,6 +1,6 @@
 import type { GILayoutConfig, IGIAC } from '@antv/gi-sdk';
 import { Icon, extra, useContext, utils } from '@antv/gi-sdk';
-import { LayoutConfig } from '@antv/gi-sdk/lib/typing';
+import type { LayoutConfig } from '@antv/gi-sdk';
 import { Card, Popover, Radio, Space } from 'antd';
 import React, { memo, useEffect, useMemo } from 'react';
 import $i18n from '../../i18n';

packages/gi-sdk/src/GISDK.tsx

@@ -10,7 +10,6 @@ import { GraphInsightContext } from './context';
 import getComponents from './hooks/useComponents';
 import './index.less';
 import * as utils from './process';
-import { createUuid } from './process/common';
 import { registerLayouts, registerShapes } from './register';
 import type { GIComponentConfig, GIGraphData, Props, State } from './typing';
 
@@ -339,7 +338,7 @@ const GISDK = (props: Props) => {
           // @ts-ignore
           draft.history = (draft.history || []).concat([
             {
-              id: createUuid(),
+              id: utils.createUuid(),
               timestamp: time,
               ...param,
             },

packages/gi-sdk/src/index.tsx

@@ -69,6 +69,7 @@ export type {
   GraphSchemaData,
   ISourceDataMap,
   ServiceObject,
+  LayoutConfig,
 } from './typing';
 export { extra, template, useContext, utils, version };
 

packages/gi-sdk/src/process/index.ts

@@ -13,6 +13,7 @@ export {
   mergeObjectByRule,
   time,
   uniqueElementsBy,
+  createUuid,
 } from './common';
 export { filterByRules } from './filterByRules';
 export { findAllPath, getNeighbors } from './findAllPath';

packages/gi-site/.umirc.ts

@@ -1,3 +1,5 @@
+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';
@@ -21,6 +23,14 @@ 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: {
@@ -59,16 +69,13 @@ export default {
   base: '/',
   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',
   },
   alias: {
     '@': './src',
   },
-  nodeModulesTransform: {
-    type: 'none',
-  },
   routes: [
     { exact: true, path: '/', redirect: '/home' },
     { exact: true, path: '/workspace/:projectId', component: 'Analysis' },
@@ -202,17 +209,21 @@ export default {
   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
-  },
+  mfsu: false,
+  // monorepoRedirect: {
+  //   srcDir: ['.', 'src'],
+  //   exclude: [/^(?!@alipay|@antv).*/],
+  // },
+  // 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,11 +10,12 @@
   ],
   "main": "dist/app.js",
   "scripts": {
+    "analyse": "ANALYZE=1 NODE_OPTIONS=--max_old_space_size=4096 max build",
     "build:docker": "node scripts/link.mjs &&  cd ../../ && npm run clean && npm run build:all:es && 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 && node scripts/sync-to-httpservice.mjs",
     "analyze": "ANALYZE=1 NODE_OPTIONS=--max_old_space_size=4096 umi build",
     "build": "npm run prebuild && NODE_OPTIONS=--max_old_space_size=4096 umi build",
     "deploy": "node ./scripts/deploy.js",
-    "start": "npm run prebuild && cross-env --max_old_space_size=4096 cross-env PORT=8000 umi dev",
+    "start": "npm run prebuild && cross-env --max_old_space_size=4096 cross-env PORT=8000 max dev",
     "start:node_version_18": "npm run prebuild && cross-env NODE_OPTIONS=--openssl-legacy-provider --max_old_space_size=4096 cross-env PORT=8000 umi dev",
     "link": "node scripts/link.mjs",
     "unlink": "cross-env UNLINK=true node scripts/link.mjs",
@@ -48,7 +49,7 @@
     "@types/classnames": "^2.2.9",
     "@types/node": "^7.0.12",
     "@types/systemjs": "latest",
-    "@umijs/preset-react": "^1.8.12",
+    "@umijs/max": "^4.0.0",
     "ahooks": "^3.7.7",
     "classnames": "^2.2.6",
     "d3-scale": "^4.0.0",
@@ -64,12 +65,11 @@
     "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.41",
-    "umi-request": "^1.4.0",
-    "use-immer": "^0.9.0",
+    "umi": "^4.0.0",
+    "umi-request": "^1.3.9",
+    "use-immer": "^0.7.0",
     "xlsx2js": "^1.3.8"
   },
   "devDependencies": {
@@ -81,8 +81,8 @@
   "peerDependencies": {
     "@antv/graphin": "^2.7.27",
     "antd": "4.x",
-    "react": "17.x",
-    "react-dom": "17.x"
+    "react": "18.x",
+    "react-dom": "18.x"
   },
   "publishConfig": {
     "access": "public"

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

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

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,15 +1,13 @@
 import { Button, Empty } from 'antd';
 import * as React from 'react';
-import { useHistory } from 'react-router-dom';
-import $i18n from '../../i18n';
+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';
 import $i18n from '../../i18n';
 interface LinksProps {
   active: string;

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

@@ -1,9 +1,9 @@
+import { history } from 'umi';
 import { SaveOutlined } from '@ant-design/icons';
 import { useShortcuts } from '@antv/gi-sdk';
 import { Graph } from '@antv/graphin';
 import { Button, notification, Tooltip } from 'antd';
 import * as React from 'react';
-import { useHistory } from 'react-router-dom';
 import $i18n from '../../i18n';
 import { useContext } from '../../pages/Analysis/hooks/useContext';
 import * as ProjectServices from '../../services/project';
@@ -26,7 +26,6 @@ const getCover = async (graph: Graph) => {
 
 const SaveWorkbook: React.FunctionComponent<SaveWorkbookProps> = props => {
   const { workbookId, context: projectContext = {} } = props;
-  const history = useHistory();
   const { context, updateContext } = useContext();
   const { config, activeAssetsKeys, name, graphRef } = context;
   const { name: projectName, datasetId } = projectContext;

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';
@@ -30,7 +30,6 @@ const styles = {
 
 const SiteNav: React.FunctionComponent<WorkbookBarProps> = props => {
   const { active } = props;
-  const history = useHistory();
 
   return (
     <header style={styles.container} className="gi-navbar-container">

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

@@ -6,7 +6,7 @@ import $i18n from '../../i18n';
 import './index.less';
 
 interface ThemeProps {
-  changeTheme: (val: string) => void;
+  changeTheme?: (val: string) => void;
 }
 const options = [
   {

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

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { useHistory } from 'react-router-dom';
+import { history } from 'umi';
 import { useContext } from '../../pages/Analysis/hooks/useContext';
 import ProjectTitle from '../ProjectTitle';
 import useTheme from '../ThemeVars/useTheme';
@@ -40,7 +40,6 @@ const WorkbookBar: React.FunctionComponent<WorkbookBarProps> = props => {
   const { workbookId } = props;
   const { context, updateContext } = useContext();
   const { changeTheme } = useTheme(context, updateContext);
-  const history = useHistory();
   const { name } = context;
 
   return (

packages/gi-site/src/layouts/SideNav.tsx

@@ -1,3 +1,4 @@
+import { history, useLocation, Outlet } from 'umi';
 import {
   AppstoreOutlined,
   BookOutlined,
@@ -121,8 +122,7 @@ const getItems = location => {
 };
 
 const SideNav: React.FunctionComponent<ILayoutProps> = props => {
-  //@ts-ignore
-  const { children, location, history } = props;
+  const location = useLocation();
   const [state, setState] = React.useState({
     active: location.pathname.split('/').splice(0, 3).join('/'),
   });
@@ -150,7 +150,7 @@ const SideNav: React.FunctionComponent<ILayoutProps> = props => {
           width: 'calc(100% - 160px)',
         }}
       >
-        {children}
+        <Outlet />
       </div>
     </div>
   );

packages/gi-site/src/layouts/index.tsx

@@ -1,32 +1,14 @@
 import * as React from 'react';
-import Navbar from '../components/Navbar/SiteNav';
+import { Outlet } from 'umi';
 import { BUILD_MODE } from '../env';
-import useInitial from '../hooks/useInitial';
-import useUpdate from '../hooks/useUpdate';
-import './index.less';
+
 /** 挂载在浏览器全局下面，方便其他资产包需要 */
 window['GI_PUBLIC_PATH'] = BUILD_MODE === 'docker' ? '/public/' : '/';
 
 interface ILayoutProps {}
 
-const Layout: React.FunctionComponent<ILayoutProps> = props => {
-  //@ts-ignore
-  const { children, location } = props;
-  const active = location.pathname.split('/')[1];
-  React.useEffect(() => {
-    useUpdate();
-    useInitial();
-  }, []);
-
-  return (
-    <>
-      <div className="gi-layout">
-        <Navbar active={active}></Navbar>
-        {/* <BaseNavbar active={active}></BaseNavbar> */}
-        <div className="gi-layout__container">{children}</div>
-      </div>
-    </>
-  );
+const Layout: React.FunctionComponent<ILayoutProps> = () => {
+  return <Outlet />;
 };
 
 export default Layout;