feat(qiankun): 支持 qiankun2.0 特性 (#148)

* fix(qiankun): 支持 qiankun2.0 特性

* fix(qiankun): 兼容 windows path

* fix(qiankun): 支持动态获取 matched base

* fix(qiankun): 路由关联模式下 singular 强制为 true

* chore(qiankun): 更新 qiankun 版本

* fix(qiankun): 修正 unmount 逻辑

* fix(qiankun): 修复会影响 tree-shaking 的问题

* fix(qiankun): 修复运行时设置 setMasterOptions 不生效的问题

* fix(qiankun): 合并运行时 app 的 props 配置

* fix(qiankun): 允许路由关联模式下手动设置 singular 模式，默认为 true

* fix(qiankun): 增加路由绑定别名及组件别名导出功能

* fix(qiankun): 拆分 qiankun 配置加载

* chore(qiankun): update demo

* fix(qiankun): 改回 api.config (#178)

* feat(qiankun): 支持通过其他插件来懒启动 qiankun plugin (#179)

* chore(qiankun): 移除一些失效的配置

* chore(qiankun): demo 精简

* fix(qiankun): 修复应用提前渲染导致的 runtime 信息还未加载的问题

* chore(qiankun): 移除无效的包声明

* fix(qiankun): 修复全栈应用获取 package.json 出错的问题

* feat(qiankun): 支持主应用配置了 base 的场景

* feat: add update hook and use useModel as new communication api (#214)

* chore(qiankun): optimize code

* feat(qiankun): 支持自动动态设置子应用动态路由 base

* chore(qiankun): optimize code

* feat(qiankun): 移除异步启动，使用 process.env.initialQiankunMasterOptions 动态设置 qiankun master plugin

* feat(qiankun): 使用 loader 代替 loadingComponent

* fix(qiankun): 修复 MicroApp 组件模板问题

* feat(qiankun): 移除自带的 antd loading

* feat(qiankun): 导出 getMasterOptions

* fix(qiankun): remove unused code

* fix(qiankun): v2.3.0-4

* fix(qiankun): 修复 prefetch 被忽略的问题

* fix(qiankun): 修复开启 defer 时 qiankunStart 调用在其他初始化方法中导致死锁的问题

* fix(qiankun): v2.3.0-6

* chore(qiankun): rename jsSandbox -> sandbox

* feat(qiankun): add MicroApp updating log

* feat(qiankun): 支持通过 globalState.ts 导出 props 到子应用

* fix(qiankun): 修复 qiankun 插件生成 mock 时 React undefined 的问题

* chore(qiankun): v2.3.0-7

* feat: qiankun 支持动态修改 history (#267)

* feat(qiankun): globalState.ts 的方式改为 app.ts 中导出 useQiankunStateForSlave

* chore(qiankun): update comment

* chore(qiankun): optimize code

* chore(qiankun): optimize code

* chore(qiankun): add upgrade link

* fix(qiankun): 兼容子应用单独打开场景

Co-authored-by: 早弦 <tianyi.mty@antfin.com>
Co-authored-by: fkysly <fkysly@hotmail.com>
Co-authored-by: Troy Li <troy.lty@antfin.com>
Co-authored-by: 砖家 <576679268@qq.com>

example/app.tsx

@@ -16,32 +16,32 @@ export const layout = {
   logout: () => {
     alert('退出登录成功');
   },
-  rightRender: (initialState: any, setInitialState: any) => {
-    console.log('initialState', initialState);
-    return (
-      <>
-        <SelectLang
-          postLocalesData={locales => [
-            ...locales,
-            {
-              lang: 'nl-NL', // 荷兰语的 key 与 antd 保持一致
-              label: 'Nederlands', // 荷兰语的“荷兰语”
-              icon: '🇳🇱', // 荷兰国旗
-              title: 'Taal', // 荷兰语的“语言”
-            },
-          ]}
-          onItemClick={({ key }) => alert(key)}
-        />
-        <button
-          onClick={() => {
-            setInitialState({ name: 'SS' });
-          }}
-        >
-          {initialState.name}
-        </button>
-      </>
-    );
-  },
+  // rightRender: (initialState: any, setInitialState: any) => {
+  //   console.log('initialState', initialState);
+  //   return (
+  //     <>
+  //       <SelectLang
+  //         postLocalesData={locales => [
+  //           ...locales,
+  //           {
+  //             lang: 'nl-NL', // 荷兰语的 key 与 antd 保持一致
+  //             label: 'Nederlands', // 荷兰语的“荷兰语”
+  //             icon: '🇳🇱', // 荷兰国旗
+  //             title: 'Taal', // 荷兰语的“语言”
+  //           },
+  //         ]}
+  //         onItemClick={({ key }) => alert(key)}
+  //       />
+  //       <button
+  //         onClick={() => {
+  //           setInitialState({ name: 'SS' });
+  //         }}
+  //       >
+  //         {initialState.name}
+  //       </button>
+  //     </>
+  //   );
+  // },
   patchMenus: (menus: MenuItem[], initialInfo: InitialState) => {
     if (initialInfo?.initialState?.name === 'test') {
       return [

example/pages/plugin-model.js

@@ -3,11 +3,11 @@ import { useModel } from 'umi';
 import styles from './plugin-model.css';
 
 export default () => {
-  const bar = useModel('bar');
+  const bar = useModel('bar', c => c.description);
   const setCount = useModel('bar', c => c.setCount);
   return (
     <div>
-      <h1 className={styles.title}>Page plugin-model {bar.description}</h1>
+      <h1 className={styles.title}>Page plugin-model {bar}</h1>
       <button onClick={() => setCount(c => c + 1)}>add</button>
     </div>
   );

packages/plugin-qiankun/.fatherrc.ts

@@ -0,0 +1,9 @@
+export default {
+  runtimeHelpers: true,
+  browserFiles: [
+    'src/master/runtimePlugin.ts',
+    'src/slave/lifecycles.ts',
+    'src/slave/runtimePlugin.ts',
+    'src/common.ts',
+  ],
+};

packages/plugin-qiankun/README.md

@@ -1,8 +1,6 @@
 # @umijs/plugin-qiankun
 
-## Under development, probably has breaking changes before major version release.
-
-> umi plugin for qiankun.
+> umi plugin for [qiankun](https://qiankun.umijs.org/).
 
 See our website [@umijs/plugin-qiankun](https://umijs.org/plugins/plugin-qiankun) for more information.
 
@@ -11,11 +9,11 @@ See our website [@umijs/plugin-qiankun](https://umijs.org/plugins/plugin-qiankun
 Using npm:
 
 ```bash
-$ npm install --save-dev @umijs/plugin-qiankun@next
+$ npm install --save-dev @umijs/plugin-qiankun
 ```
 
 or using yarn:
 
 ```bash
-$ yarn add @umijs/plugin-qiankun@next --dev
+$ yarn add @umijs/plugin-qiankun --dev
 ```

packages/plugin-qiankun/examples/app1/.umirc.js

@@ -1,5 +1,5 @@
 export default {
-  base: '/app1',
+  base: '/app1Name',
   publicPath: '/app1/',
   outputPath: './dist/app1',
   mountElementId: 'app1',
@@ -8,6 +8,7 @@ export default {
   },
   plugins: [
     require.resolve('../../../plugin-dva/lib'),
+    require.resolve('../../../plugin-model/lib'),
     require.resolve('../../../plugin-antd/lib'),
     require.resolve('../../../plugin-qiankun/lib'),
   ],

packages/plugin-qiankun/examples/app1/app.js

@@ -0,0 +1,6 @@
+export const qiankun = {
+  // 应用 render 之前触发
+  async update(props) {
+    console.log('app1 update', props);
+  },
+};

packages/plugin-qiankun/examples/app1/pages/index.js

@@ -1,9 +1,13 @@
 import React from 'react';
+import { useModel } from 'umi';
 
 export default function() {
+  const { testProp1, globalState } = useModel('@@qiankunStateFromMaster') || {};
   return (
     <div>
       <h1>Dashboard 1</h1>
+      <p>testProp1: {testProp1}</p>
+      <p>globalState: {JSON.stringify(globalState)}</p>
     </div>
   );
 }

packages/plugin-qiankun/examples/app2/.umirc.js

@@ -10,18 +10,8 @@ export default {
   },
   plugins: [
     require.resolve('../../../plugin-dva/lib'),
+    require.resolve('../../../plugin-model/lib'),
     require.resolve('../../../plugin-antd/lib'),
     require.resolve('../../../plugin-qiankun/lib'),
   ],
-  // TODO 测试约定式路由下的情况
-  routes: [
-    {
-      path: '/user',
-      component: './user',
-    },
-    {
-      path: '/',
-      component: './index',
-    },
-  ],
 };

packages/plugin-qiankun/examples/app2/layouts/index.js

@@ -1,5 +1,5 @@
 import { Layout, Menu } from 'antd';
-import Link from 'umi/link';
+import { Link } from 'umi';
 import style from './style.less';
 
 const { SubMenu } = Menu;

packages/plugin-qiankun/examples/app2/pages/user/model.js

@@ -22,6 +22,9 @@ export default {
   reducers: {
     querySuccess(state, { payload }) {
       state.list = payload.list;
+      return {
+        ...state,
+      };
     },
   },
 };

packages/plugin-qiankun/examples/app3/.umirc.js

@@ -6,7 +6,7 @@ export default {
     slave: {},
   },
   plugins: [
-    require.resolve('../../../plugin-dva/lib'),
+    require.resolve('../../../plugin-model/lib'),
     require.resolve('../../../plugin-antd/lib'),
     require.resolve('../../../plugin-qiankun/lib'),
   ],

packages/plugin-qiankun/examples/master/.umirc.js

@@ -14,22 +14,45 @@ export default {
     },
   },
   qiankun: {
-    master: {
-      defer: true,
-      jsSandbox: true,
-      prefetch: true,
-    },
+    master: {},
   },
+  routes: [
+    {
+      path: '/',
+      component: '../layouts/index.js',
+      routes: [
+        {
+          path: '/app1',
+          microApp: 'app1',
+          settings: { singular: false },
+        },
+        {
+          path: '/app2',
+          exact: false,
+          component: './app2/index.js',
+        },
+        {
+          path: '/app3',
+          microApp: 'app3',
+        },
+        {
+          path: '/',
+          component: './index.js',
+        },
+      ],
+    },
+  ],
   plugins: [
     require.resolve('../../../plugin-dva/lib'),
+    require.resolve('../../../plugin-model/lib'),
     require.resolve('../../../plugin-antd/lib'),
     require.resolve('../../../plugin-qiankun/lib'),
     // [
     //   '../../index',
     //   {
     //     master: {
     //       defer: true,
-    //       jsSandbox: true,
+    //       sandbox: true,
     //       prefetch: true,
     //     },
     //   },

packages/plugin-qiankun/examples/master/app.js

@@ -1,3 +1,15 @@
+import { useState } from 'react';
 import request from './services/request';
 
 export const qiankun = request('/apps').then(apps => ({ apps }));
+
+export const useQiankunStateForSlave = () => {
+  const [globalState, setQiankunGlobalState] = useState({
+    slogan: 'Hello MicroFrontend',
+  });
+
+  return {
+    globalState,
+    setQiankunGlobalState,
+  };
+};

packages/plugin-qiankun/examples/master/layouts/index.js

@@ -51,24 +51,22 @@ export default class extends React.PureComponent {
             {apps.map((app, index) => {
               if (index === 2) {
                 return (
-                  <Menu.Item key={app.base}>
+                  <Menu.Item key={app.to}>
                     <Link to="/app3/123">{app.name}</Link>
                   </Menu.Item>
                 );
               }
               return (
-                <Menu.Item key={app.base}>
-                  <Link to={app.base}>{app.name}</Link>
+                <Menu.Item key={app.to}>
+                  <Link to={app.to}>{app.name}</Link>
                 </Menu.Item>
               );
             })}
           </Menu>
         </Header>
         <Content className={style.content}>
           {renderBreadCrumb(location.pathname)}
-          {// 加载master pages，此处判断较为简单，实际需排除所有子应用base打头的路径
-          selectKey === '/' ? children : null}
-          {apps.length ? <div id="root-subapp-container" /> : null}
+          {children}
         </Content>
         <Footer className={style.footer}>
           Ant Design ©2019 Created by Ant UED

packages/plugin-qiankun/examples/master/mock/app.js

@@ -3,23 +3,23 @@ export default {
     {
       name: 'app1',
       entry: 'http://localhost:8001/app1',
-      base: '/app1',
-      mountElementId: 'root-subapp-container',
+      to: '/app1',
+      props: {
+        testProp1: 'test1',
+      },
     },
     {
       name: 'app2',
       entry: 'http://localhost:8002/app2',
-      base: '/app2',
-      mountElementId: 'root-subapp-container',
+      to: '/app2',
       props: {
-        testProp: 'test',
+        testProp2: 'test2',
       },
     },
     {
       name: 'app3',
       entry: 'http://localhost:8003/app3',
-      base: '/app3/:abc',
-      mountElementId: 'root-subapp-container',
+      to: '/app3',
     },
   ],
 };

packages/plugin-qiankun/examples/master/models/base.js

@@ -1,5 +1,4 @@
 import { query } from '@/services/app';
-import { qiankunStart } from 'umi';
 
 function sleep(ms) {
   return new Promise(resolve => setTimeout(resolve, ms));
@@ -30,9 +29,6 @@ export default {
           apps,
         },
       });
-
-      // 模拟手动控制 qiankun 启动时机的场景, 需要 defer 配置为 true
-      setTimeout(qiankunStart, 200);
     },
   },
 

packages/plugin-qiankun/examples/master/pages/app2/index.js

@@ -0,0 +1,9 @@
+import { MicroApp } from 'umi';
+
+export default function() {
+  return (
+    <div>
+      <MicroApp name="app2" />
+    </div>
+  );
+}

packages/plugin-qiankun/examples/master/pages/index.js

@@ -1,6 +1,11 @@
+import React, { useState } from 'react';
+import { MicroApp, useModel } from 'umi';
 import style from './index.css';
 
 export default function() {
+  const [microAppState, setState] = useState('Hello');
+  const { setQiankunGlobalState } = useModel('@@qiankunStateForSlave');
+
   return (
     <div className={style.container}>
       <h2>Welcome to use QianKun ~</h2>
@@ -15,6 +20,13 @@ export default function() {
         </a>
         提Issue
       </p>
+      <button
+        onClick={() => setQiankunGlobalState({ slogan: 'Hello Qiankun' })}
+      >
+        修改全局 state
+      </button>
+      <button onClick={() => setState(s => s + 'o')}>修改子应用 props</button>
+      <MicroApp testProp1={microAppState} name="app1" />
     </div>
   );
 }