chore: use umi4 (#75)

Co-authored-by: wwsun <ww.sww@outlook.com>

.npmrc

@@ -0,0 +1,2 @@
+registry=https://registry.npmmirror.com/
+

apps/playground/.env

@@ -1,2 +0,0 @@
-PORT=6006
-HOST=local.netease.com

apps/playground/.gitignore

@@ -0,0 +1,9 @@
+/node_modules
+/.env.local
+/.umirc.local.ts
+/config/config.local.ts
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/dist
+.swc

apps/playground/.umirc.ts

@@ -1,33 +1,15 @@
 import path from 'path';
+import { defineConfig } from 'umi';
 
 const resolvePackageIndex = (relativeEntry: string) =>
-  path.resolve(__dirname, '../../../packages/', relativeEntry);
+  path.resolve(__dirname, '../../packages/', relativeEntry);
 
-export default {
+export default defineConfig({
   routes: [
-    {
-      exact: true,
-      path: '/',
-      component: 'index',
-      name: '首页',
-    },
+    { path: '/', component: 'index' },
+    { path: '/docs', component: 'docs' },
   ],
-  devServer: {
-    host: 'local.netease.com',
-    port: 8008,
-    https: {
-      key: path.resolve(__dirname, 'local.netease.com-key.pem'),
-      cert: path.resolve(__dirname, 'local.netease.com.pem'),
-    },
-    headers: { 'Origin-Agent-Cluster': '?0' },
-  },
-  targets: {
-    chrome: 79,
-    firefox: false,
-    safari: false,
-    edge: false,
-    ios: false,
-  },
+  npmClient: 'yarn',
   alias: {
     '@music163/tango-helpers': resolvePackageIndex('helpers/src/index.ts'),
     '@music163/tango-core': resolvePackageIndex('core/src/index.ts'),
@@ -44,6 +26,19 @@ export default {
     moment: 'moment',
     antd: 'antd',
   },
+  headScripts: [
+    'https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.development.js',
+    'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.development.js',
+    'https://cdn.jsdelivr.net/npm/react-is@18.2.0/umd/react-is.production.min.js',
+    'https://cdn.jsdelivr.net/npm/moment/min/moment-with-locales.js',
+    'https://cdn.jsdelivr.net/npm/styled-components@5.3.11/dist/styled-components.js',
+    'https://cdn.jsdelivr.net/npm/@babel/standalone@7.15.6/babel.js',
+    'https://cdn.jsdelivr.net/npm/antd@4.24.13/dist/antd-with-locales.min.js',
+  ],
+  https: {
+    key: path.resolve(__dirname, 'local.netease.com-key.pem'),
+    cert: path.resolve(__dirname, 'local.netease.com.pem'),
+  },
   chainWebpack: (config: any) => {
     // @see https://github.com/graphql/graphql-js/issues/1272#issuecomment-393903706
     config.module
@@ -61,4 +56,5 @@ export default {
     config.module.rule('js').include.add(resolvePackageIndex('ui/src'));
     return config;
   },
-};
+  monorepoRedirect: {},
+});

apps/playground/README.md

@@ -1,5 +0,0 @@
-# `playground`
-
-搭建平台演示示例
-
-## 说明

apps/playground/package.json

@@ -2,24 +2,26 @@
   "name": "playground",
   "version": "0.0.0",
   "private": true,
-  "description": "playground of tango-apps",
-  "license": "MIT",
-  "author": "wwsun <ww.sun@outlook.com>",
-  "files": [
-    "lib"
-  ],
+  "author": "Wells <ww.sun@outlook.com>",
   "scripts": {
-    "build": "COMPRESS=none umi build",
-    "start": "umi dev"
+    "dev": "HOST=local.netease.com umi dev",
+    "build": "umi build",
+    "postinstall": "umi setup",
+    "setup": "umi setup",
+    "start": "npm run dev"
   },
   "dependencies": {
     "@ant-design/icons": "^4.8.0",
+    "@music163/tango-core": "*",
     "@music163/tango-designer": "*",
     "@music163/tango-helpers": "*",
     "antd": "^4.24.2",
-    "coral-system": "^1.0.5"
+    "coral-system": "^1.0.5",
+    "umi": "^4.0.89"
   },
   "devDependencies": {
-    "umi": "^3.5.24"
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^5.0.3"
   }
 }

apps/playground/plugin.ts

@@ -0,0 +1,10 @@
+import type { IApi } from 'umi';
+
+export default (api: IApi) => {
+  api.addMiddlewares(() => {
+    return (req, res, next) => {
+      res.setHeader('Origin-Agent-Cluster', '?0');
+      next();
+    };
+  });
+};

apps/playground/src/helpers/index.tsx

@@ -6,6 +6,8 @@ import { registerSetter } from '@music163/tango-designer';
 import type { ComponentPrototypeType } from '@music163/tango-helpers';
 import { FooSetter } from '../components';
 
+export * from './mock-files';
+
 export const bootHelperVariables = [
   {
     key: '$helpers',

apps/playground/src/layouts/index.less

@@ -2,4 +2,5 @@
 @import '~antd/dist/antd.less'; // 引入官方提供的 less 样式入口文件
 
 @primary-color: #2f54eb;
-@border-radius-base: 2px;
+@border-radius-base: 2px;
+

apps/playground/src/layouts/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Outlet } from 'umi';
+import './index.less';
+
+export default function Layout() {
+  return (
+    <div>
+      <Outlet />
+    </div>
+  );
+}

apps/playground/src/pages/docs.tsx

@@ -0,0 +1,9 @@
+const DocsPage = () => {
+  return (
+    <div>
+      <p>This is umi docs.</p>
+    </div>
+  );
+};
+
+export default DocsPage;

apps/playground/src/pages/document.ejs

@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tango Playground</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.development.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.development.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/react-is@16.13.1/umd/react-is.production.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/moment/min/moment-with-locales.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/styled-components@5.3.11/dist/styled-components.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.15.6/babel.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/prettier@2.6.0/standalone.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/prettier@2.6.0/parser-babel.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/antd@4.24.13/dist/antd-with-locales.min.js"></script>
-  </body>
-</html>

apps/playground/src/pages/index.tsx

@@ -15,9 +15,7 @@ import {
   themeLight,
 } from '@music163/tango-designer';
 import { createEngine, Workspace } from '@music163/tango-core';
-import { Logo, ProjectDetail, bootHelperVariables } from './share';
-import { sampleFiles } from '../mock/project';
-import './index.less';
+import { Logo, ProjectDetail, bootHelperVariables, sampleFiles } from '../helpers';
 import {
   ApiOutlined,
   AppstoreAddOutlined,

apps/playground/tsconfig.json

@@ -1,3 +1,3 @@
 {
-  "extends": "../../tsconfig.json"
+  "extends": "./src/.umi/tsconfig.json"
 }

apps/playground/typings.d.ts

@@ -0,0 +1 @@
+import 'umi/typings';

package.json

@@ -6,7 +6,7 @@
     "apps/*"
   ],
   "scripts": {
-    "start": "yarn workspace playground start",
+    "start": "yarn workspace playground dev",
     "start:docs": "yarn workspace storybook storybook",
     "start:site": "yarn workspace website start",
     "deploy:site": "yarn workspace website deploy",