fix: compatible with newer version of tango & umi

.umirc.ts

@@ -1,9 +1,6 @@
 import path from 'path';
 import { defineConfig } from 'umi';
 
-const resolvePackageIndex = (relativeEntry: string) =>
-  path.resolve(__dirname, '../../packages/', relativeEntry);
-
 export default defineConfig({
   base: '/designer',
   publicPath: '/designer/',
@@ -47,6 +44,7 @@ export default defineConfig({
     key: path.resolve(__dirname, 'local.netease.com-key.pem'),
     cert: path.resolve(__dirname, 'local.netease.com.pem'),
   },
+  jsMinifier: 'terser',
   chainWebpack: (config: any) => {
     // @see https://github.com/graphql/graphql-js/issues/1272#issuecomment-393903706
     config.module

src/demo/index.ts

@@ -1,6 +1,8 @@
-import { mergeDemo } from '../utils';
+import { DemoItemType, mergeDemo } from '../utils';
 import example from './example';
 
 export default {
   example: mergeDemo(example),
+} as {
+  [x: string]: DemoItemType;
 };

src/helpers/mock-files.ts

@@ -76,7 +76,7 @@ const tangoConfigJson = {
 };
 
 const routesCode = `
-import Index from "./pages/list";
+import Index from "./pages/index";
 
 const routes = [
   {
@@ -258,7 +258,7 @@ export const sampleFiles = [
   { filename: '/src/index.less', code: lessCode },
   { filename: '/src/style.css', code: cssCode },
   { filename: '/src/index.js', code: entryCode },
-  { filename: '/src/pages/list.js', code: viewHomeCode },
+  { filename: '/src/pages/index.js', code: viewHomeCode },
   { filename: '/src/components/button.js', code: componentsButtonCode },
   { filename: '/src/components/prototype.js', code: componentsPrototypeCode },
   { filename: '/src/routes.js', code: routesCode },

src/pages/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { Box } from 'coral-system';
 import { Button, Space } from 'antd';
 import {
@@ -15,7 +15,6 @@ import {
   themeLight,
 } from '@music163/tango-designer';
 import { createEngine, Workspace } from '@music163/tango-core';
-import { IRouteComponentProps } from 'umi';
 import { Logo, ProjectDetail, bootHelperVariables, sampleFiles } from '../helpers';
 import {
   ApiOutlined,
@@ -27,6 +26,7 @@ import {
 
 import demo from '../demo';
 import { DemoItemType } from '../utils';
+import { useLocation, useMatch } from 'umi';
 
 // 1. 实例化工作区
 const workspace = new Workspace({
@@ -50,19 +50,27 @@ const sandboxQuery = new DndQuery({
 /**
  * 3. 平台初始化，访问 https://local.netease.com:6006/
  */
-export default function App({ match, location }: IRouteComponentProps<any, any>) {
+export default function App() {
   const [menuLoading, setMenuLoading] = useState(true);
   const [menuData, setMenuData] = useState(false);
 
-  const name = match?.params?.name || location?.query?.name;
+  const location = useLocation();
+  const match = useMatch({ path: '/:name' });
+  const name = useMemo(() => {
+    if (match?.params?.name) {
+      return match?.params?.name;
+    }
+    const query = new URLSearchParams(location.search);
+    return query.get('name') || undefined;
+  }, [match?.params, location.search]);
 
   useEffect(() => {
     if (!name || !demo[name]) {
       return;
     }
 
     (demo[name] as DemoItemType)?.files?.forEach?.((item) => {
-      workspace.updateFile(item.filename, item.code);
+      workspace.addFile(item.filename, item.code);
     });
   }, [name]);
 
@@ -78,7 +86,7 @@ export default function App({ match, location }: IRouteComponentProps<any, any>)
     >
       <DesignerPanel
         logo={<Logo />}
-        description={<ProjectDetail name={demo[name] && (demo[name]?.title || name)} />}
+        description={<ProjectDetail name={name && demo[name] && (demo[name]?.title || name)} />}
         actions={
           <Box px="l">
             <Toolbar>