feat(qiankun): merge 1.x features to 2.x (#138)

* chore(qiankun): optimize code * feat(qiankun): merge keepOriginalRoutes feature and getMatchedBase feature * feat(qiankun): 增加一些日志 * feat(qiankun): 修复路由正则匹配过于精确的问题 * feat(qiankun): 支持传入 shouldNotModifyPublicPath 参数来关闭 qiankun 注入的 runtimePublicPath * feat(qiankun): 支持使用 rootExports.ts * feat(qiankun): optimize types * feat(qiankun): optimize
umijs · Apr 7, 2020 · ffac76d · ffac76d
1 parent 7e6ae94
commit ffac76d
Show file tree

Hide file tree

Showing 12 changed files with 353 additions and 115 deletions.
diff --git a/packages/plugin-qiankun/examples/app1/.umirc.js b/packages/plugin-qiankun/examples/app1/.umirc.js
@@ -3,16 +3,6 @@ export default {
   publicPath: '/app1/',
   outputPath: './dist/app1',
   mountElementId: 'app1',
-  routes: [
-    {
-      path: '/user',
-      component: './user',
-    },
-    {
-      path: '/',
-      component: './index',
-    },
-  ],
   qiankun: {
     slave: {},
   },

diff --git a/packages/plugin-qiankun/examples/app1/layouts/index.js b/packages/plugin-qiankun/examples/app1/layouts/index.js
@@ -1,9 +1,8 @@
 import { Layout, Menu } from 'antd';
-import Link from 'umi/link';
+import { Link } from 'umi';
 import style from './style.less';
 
-const { SubMenu } = Menu;
-const { Header, Content, Sider } = Layout;
+const { Content, Sider } = Layout;
 
 export default ({ children }) => (
   <Layout className={style.layout}>

diff --git a/packages/plugin-qiankun/examples/app2/app.js b/packages/plugin-qiankun/examples/app2/app.js
@@ -1,14 +1,14 @@
 export const qiankun = {
   // 应用加载之前
   async bootstrap(props) {
-    console.log('app1 bootstrap', props);
+    console.log('app2 bootstrap', props);
   },
   // 应用 render 之前触发
   async mount(props) {
-    console.log('app1 mount', props);
+    console.log('app2 mount', props);
   },
   // 应用卸载之后触发
   async unmount(props) {
-    console.log('app1 unmount', props);
+    console.log('app2 unmount', props);
   },
 };
diff --git a/packages/plugin-qiankun/package.json b/packages/plugin-qiankun/package.json
@@ -4,6 +4,13 @@
   "description": "umi plugin for qiankun",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
+  "scripts": {
+    "start": "npm-run-all --parallel start:*",
+    "start:master": "cd examples/master && umi dev",
+    "start:app1": "cd examples/app1 && umi dev",
+    "start:app2": "cd examples/app2 && umi dev",
+    "start:app3": "cd examples/app3 && umi dev"
+  },
   "files": [
     "lib",
     "master.js",
@@ -38,12 +45,13 @@
   "dependencies": {
     "@babel/runtime": "^7.4.5",
     "address": "^1.1.2",
+    "lodash": "^4.17.15",
     "path-to-regexp": "^1.7.0",
     "qiankun": "^1.4.2"
   },
   "devDependencies": {
-    "concurrently": "^5.1.0",
     "mockjs": "^1.0.1-beta3",
+    "npm-run-all": "^4.1.5",
     "umi-request": "^1.1.0"
   }
 }
diff --git a/packages/plugin-qiankun/src/__tests__/common.test.ts b/packages/plugin-qiankun/src/__tests__/common.test.ts
@@ -3,7 +3,8 @@
  * @since 2019-10-22
  */
 
-import { testPathWithPrefix } from '../common';
+import { addSpecifyPrefixedRoute, testPathWithPrefix } from '../common';
+import { expectRoutes, originRoutes } from './mock';
 
 it('testPathPrefix', () => {
   // browser history
@@ -65,12 +66,16 @@ it('testPathPrefix', () => {
   expect(testPathWithPrefix('/js/:abc', '/js/123')).toBeTruthy();
   expect(testPathWithPrefix('/js/:abc/', '/js/123')).toBeFalsy();
   expect(testPathWithPrefix('/js/:abc/jsx', '/js/123/jsx')).toBeTruthy();
+  expect(testPathWithPrefix('/js/:abc/jsx', '/js/123/jsx/hello')).toBeTruthy();
   expect(testPathWithPrefix('/js/:abc/jsx', '/js/123')).toBeFalsy();
   expect(testPathWithPrefix('/js/:abc/jsx', '/js/123/css')).toBeFalsy();
   expect(
     testPathWithPrefix('/js/:abc/jsx/:cde', '/js/123/jsx/kkk'),
   ).toBeTruthy();
   expect(testPathWithPrefix('/js/:abc/jsx/:cde', '/js/123/jsk')).toBeFalsy();
+  expect(
+    testPathWithPrefix('/js/:abc/jsx/:cde', '/js/123/jsx/kkk/hello'),
+  ).toBeTruthy();
   expect(testPathWithPrefix('/js/:abc?', '/js')).toBeTruthy();
   expect(testPathWithPrefix('/js/*', '/js/245')).toBeTruthy();
 
@@ -82,13 +87,36 @@ it('testPathPrefix', () => {
   expect(testPathWithPrefix('#/:abc/js', '#/js/123')).toBeFalsy();
   expect(testPathWithPrefix('#/js/:abc', '#/js/123')).toBeTruthy();
   expect(testPathWithPrefix('#/js/:abc/', '#/js/123')).toBeFalsy();
+  expect(testPathWithPrefix('#/js/:abc/', '#/js/123/jsx')).toBeTruthy();
   expect(testPathWithPrefix('#/js/:abc/jsx', '#/js/123/jsx')).toBeTruthy();
+  expect(
+    testPathWithPrefix('#/js/:abc/jsx', '#/js/123/jsx/hello'),
+  ).toBeTruthy();
+  expect(
+    testPathWithPrefix('#/js/:abc/jsx', '#/js/123/jsx/hello?test=1'),
+  ).toBeTruthy();
   expect(testPathWithPrefix('#/js/:abc/jsx', '#/js/123')).toBeFalsy();
   expect(testPathWithPrefix('#/js/:abc/jsx', '#/js/123/css')).toBeFalsy();
   expect(
     testPathWithPrefix('#/js/:abc/jsx/:cde', '#/js/123/jsx/kkk'),
   ).toBeTruthy();
+  expect(
+    testPathWithPrefix('#/js/:abc/jsx/:cde', '#/js/123/jsx/kkk/hello'),
+  ).toBeTruthy();
   expect(testPathWithPrefix('#/js/:abc/jsx/:cde', '#/js/123/jsk')).toBeFalsy();
   expect(testPathWithPrefix('#/js/:abc?', '#/js')).toBeTruthy();
   expect(testPathWithPrefix('#/js/*', '#/js/245')).toBeTruthy();
 });
+
+it('testRecursiveCoverRouter', () => {
+  // 在原route的基础上添加指定路由单测
+  expect(String(addSpecifyPrefixedRoute(originRoutes, 'test'))).toEqual(
+    String(expectRoutes),
+  );
+  expect(String(addSpecifyPrefixedRoute(originRoutes, 'test', 'app2'))).toEqual(
+    String(expectRoutes),
+  );
+  expect(String(addSpecifyPrefixedRoute(originRoutes, true, 'test'))).toEqual(
+    String(expectRoutes),
+  );
+});
diff --git a/packages/plugin-qiankun/src/__tests__/mock/index.ts b/packages/plugin-qiankun/src/__tests__/mock/index.ts
@@ -0,0 +1,120 @@
+export const originSingleRoute = [
+  {
+    path: '/',
+    exact: true,
+    _title: 'app2',
+    _title_default: 'app2',
+  },
+  {
+    path: '/user',
+    exact: true,
+    _title: 'app2',
+    _title_default: 'app2',
+  },
+  {
+    _title: 'app2',
+    _title_default: 'app2',
+  },
+];
+
+export const expectCoverRoute = [
+  {
+    path: '/',
+    exact: true,
+    _title: 'app2',
+    _title_default: 'app2',
+  },
+  {
+    path: '/test/user',
+    exact: true,
+    _title: 'app2',
+    _title_default: 'app2',
+  },
+  {
+    _title: 'app2',
+    _title_default: 'app2',
+  },
+];
+
+export const originRoutes = [
+  {
+    path: '/',
+    routes: [
+      {
+        path: '/',
+        exact: true,
+        _title: 'app2',
+        _title_default: 'app2',
+      },
+      {
+        path: '/user',
+        exact: true,
+        _title: 'app2',
+        _title_default: 'app2',
+      },
+      {
+        _title: 'app2',
+        _title_default: 'app2',
+      },
+    ],
+    _title: 'app2',
+    _title_default: 'app2',
+  },
+  {
+    _title: 'app2',
+    _title_default: 'app2',
+  },
+];
+
+export const expectRoutes = [
+  {
+    path: '/app2',
+    routes: [
+      {
+        path: '/',
+        exact: true,
+        _title: 'app2',
+        _title_default: 'app2',
+      },
+      {
+        path: '/test/user',
+        exact: true,
+        _title: 'app2',
+        _title_default: 'app2',
+      },
+      {
+        _title: 'app2',
+        _title_default: 'app2',
+      },
+    ],
+    _title: 'app2',
+    _title_default: 'app2',
+  },
+  {
+    path: '/',
+    routes: [
+      {
+        path: '/',
+        exact: true,
+        _title: 'app2',
+        _title_default: 'app2',
+      },
+      {
+        path: '/user',
+        exact: true,
+        _title: 'app2',
+        _title_default: 'app2',
+      },
+      {
+        _title: 'app2',
+        _title_default: 'app2',
+      },
+    ],
+    _title: 'app2',
+    _title_default: 'app2',
+  },
+  {
+    _title: 'app2',
+    _title_default: 'app2',
+  },
+];
diff --git a/packages/plugin-qiankun/src/common.ts b/packages/plugin-qiankun/src/common.ts
@@ -3,15 +3,18 @@
  * @since 2019-06-20
  */
 
+import { cloneDeep } from 'lodash';
 import pathToRegexp from 'path-to-regexp';
+import { IRoute } from 'umi';
+import { SlaveOptions } from './types';
 
 export const defaultMountContainerId = 'root-subapp';
 
 // 主应用跟子应用的默认 root id 区分开，避免冲突
 export const defaultMasterRootId = 'root-master';
 export const defaultSlaveRootId = 'root-slave';
 
-export const defaultHistoryMode = 'browser';
+export const defaultHistoryType = 'browser';
 
 // @formatter:off
 export const noop = () => {};
@@ -32,7 +35,9 @@ function testPathWithStaticPrefix(pathPrefix: string, realPath: string) {
 }
 
 function testPathWithDynamicRoute(dynamicRoute: string, realPath: string) {
-  return !!pathToRegexp(dynamicRoute, { strict: true }).exec(realPath);
+  return !!pathToRegexp(dynamicRoute, { strict: true, end: false }).exec(
+    realPath,
+  );
 }
 
 export function testPathWithPrefix(pathPrefix: string, realPath: string) {
@@ -41,3 +46,39 @@ export function testPathWithPrefix(pathPrefix: string, realPath: string) {
     testPathWithDynamicRoute(pathPrefix, realPath)
   );
 }
+
+const recursiveCoverRouter = (source: Array<IRoute>, nameSpacePath: string) =>
+  source.map((router: IRoute) => {
+    if (router.routes) {
+      recursiveCoverRouter(router.routes, nameSpacePath);
+    }
+    if (router.path !== '/' && router.path) {
+      return {
+        ...router,
+        path: `${nameSpacePath}${router.path}`,
+      };
+    }
+    return router;
+  });
+
+export const addSpecifyPrefixedRoute = (
+  originRoute: Array<IRoute>,
+  keepOriginalRoutes: SlaveOptions['keepOriginalRoutes'],
+  pkgName?: string,
+) => {
+  const copyBase = originRoute.filter(_ => _.path === '/');
+  if (!copyBase[0]) {
+    return originRoute;
+  }
+
+  const nameSpaceRouter: any = cloneDeep(copyBase[0]);
+  const nameSpace = keepOriginalRoutes === true ? pkgName : keepOriginalRoutes;
+
+  nameSpaceRouter.path = `/${nameSpace}`;
+  nameSpaceRouter.routes = recursiveCoverRouter(
+    nameSpaceRouter.routes,
+    `/${nameSpace}`,
+  );
+
+  return [nameSpaceRouter, ...originRoute];
+};
diff --git a/packages/plugin-qiankun/src/index.ts b/packages/plugin-qiankun/src/index.ts
@@ -1,5 +1,5 @@
-import { IApi } from 'umi';
 import assert from 'assert';
+import { IApi } from 'umi';
 import master from './master';
 import slave from './slave';