refactor: 优化乾坤和layout

.gitignore

@@ -7,6 +7,7 @@
 .temp
 .hound
 .fes
+.fes*
 dist
 *.log
 node_modules

docs/README.md

@@ -13,7 +13,7 @@ features:
   - title: Fast
     details: Fes.js 内置路由、构建、插件管理，提供测试、布局、权限、国际化、状态管理、请求、数据字典、Svg等插件，可以满足大部分日常开发需求。
   - title: Easy
-    details: 基于Vue.js 3.0，上手简单。贯彻 “约定优于配置” 思想，在设计插件上尽可能用约定替代配置，依然提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
+    details: 基于Vue.js 3.0，上手非常简单。贯彻 “约定优于配置” 思想，在设计插件上尽可能用约定替代配置，依然提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
   - title: Strong
     details: 仅仅需要关心页面内容，减少犯错的机会！提供单元测试、覆盖测试的能力保障项目质量。
   - title: 可扩展

docs/reference/api/README.md

@@ -74,7 +74,6 @@ Fes.js 路由基于 [Vue Router 4.0](https://next.router.vuejs.org/introduction.
 返回当前 `router` 实例。
 ```js
 import { getRouter } from "@fesjs/fes";
-
 const router = getRouter();
 router.push();
 ```

docs/reference/plugin/dev/api.md

@@ -301,7 +301,7 @@ import { access, useAccess } from '@fesjs/fes';
 ```js
 api.addCoreExports(() => [
     {
-        specifiers: ['getRoutes', 'getRouter', 'getHistory', 'destroyRouter'],
+        specifiers: ['getRoutes'],
         source: absCoreFilePath
     }
 ]);

docs/reference/plugin/plugins/qiankun.md

@@ -269,3 +269,24 @@ export default {
 
 - 主应用使用 props 的模式传递数据（参考主应用装载子应用配置一节）
 - 子应用在生命周期钩子中获取 props 消费数据（参考子应用运行时配置一节） 
+
+
+### MicroApp
+| 属性   | 说明       | 类型          | 默认值     |
+| ---- | ----------- | ------------- | ---------- |
+| name  | 子应用名称，传入`qiankun.main.apps`配置中的`name` | String                      |  -      |
+| settings  | 子应用配置信息        | Object                      |  {}      |
+| props  | 传入子应用的参数        | Object                      |  {}      |
+| lifeCycles  | 子应用生命周期钩子        | Object                      |  {}      |
+| cacheName  | 子应用缓存名称，配置后根据`name`+`cacheName`缓存子应用实例     | Object                      |  -      |
+
+
+### MicroAppWithMemoHistory
+| 属性   | 说明       | 类型          | 默认值     |
+| ---- | ----------- | ------------- | ---------- |
+| name  | 子应用名称，传入`qiankun.main.apps`配置中的`name` | String                      |  -      |
+| settings  | 子应用配置信息        | Object                      |  {}      |
+| props  | 传入子应用的参数        | Object                      |  {}      |
+| lifeCycles  | 子应用生命周期钩子        | Object                      |  {}      |
+| cacheName  | 子应用缓存名称，配置后根据`name`+`cacheName`缓存子应用实例     | Object                      |  -      |
+| url  | 子应用的路由地址    | String                      |  -      |

packages/fes-plugin-layout/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fesjs/plugin-layout",
-  "version": "5.0.0-beta.4",
+  "version": "5.0.0-beta.5",
   "description": "@fesjs/plugin-layout",
   "main": "lib/index.js",
   "files": [

packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue

@@ -9,7 +9,7 @@
             @close="handleCloseTab"
             @update:modelValue="switchPage"
         >
-            <FTabPane v-for="page in pageList" :key="page.path" :value="page.path" :closable="route.path !== page.path">
+            <FTabPane v-for="page in pageList" :key="page.path" :value="page.path" :closable="pageList.length > 1">
                 <template #tab>
                     {{ page.title }}
                     <ReloadOutlined v-show="route.path === page.path" class="layout-tabs-close-icon" @click="reloadPage(page.path)" />
@@ -22,8 +22,8 @@
             </template>
         </FTabs>
         <router-view v-slot="{ Component, route }">
-            <keep-alive>
+            <keep-alive :include="keepAlivePages">
-                <component :is="Component" :key="getPageKey(route)" />
+                <component :is="getComponent(Component, route, true)" :key="getPageKey(route)" />
             </keep-alive>
         </router-view>
     </template>
@@ -59,11 +59,12 @@ export default {
             return {
                 path: _route.path,
                 route: _route,
-                name: _route.meta.name,
+                name: _route.meta.name ?? _route.name,
                 title: computed(() => transTitle(title)),
                 key: getKey(),
             };
         };
+        const keepAlivePages = ref([]);
 
         const route = useRoute();
         const router = useRouter();
@@ -71,11 +72,11 @@ export default {
         const actions = [
             {
                 value: 'closeOtherPage',
-                label: '关闭其他',
+                label: '关闭其他页签',
             },
             {
                 value: 'reloadPage',
-                label: '刷新当前页',
+                label: '刷新当前页签',
             },
         ];
 
@@ -88,22 +89,37 @@ export default {
             return true;
         });
         // 还需要考虑参数
-        const switchPage = (path) => {
+        const switchPage = async (path) => {
             const selectedPage = findPage(path);
             if (selectedPage) {
-                router.push({
+                await router.push({
                     path,
                     query: selectedPage.route.query,
                     params: selectedPage.route.params,
                 });
             }
         };
-        const handleCloseTab = (targetKey) => {
+        const handleCloseTab = async (targetKey) => {
             const selectedPage = findPage(targetKey);
             const list = [...pageList.value];
             const index = list.indexOf(selectedPage);
+            if (route.path === selectedPage.path) {
+                if (list.length > 1) {
+                    if (list.length - 1 === index) {
+                        await switchPage(list[index - 1].path);
+                    } else {
+                        await switchPage(list[index + 1].path);
+                    }
+                }
+            }
             list.splice(index, 1);
             pageList.value = list;
+            const _keepAlivePages = [...keepAlivePages.value];
+            const keepIndex = _keepAlivePages.indexOf(selectedPage.name);
+            if (keepIndex !== -1) {
+                _keepAlivePages.splice(keepIndex, 1);
+            }
+            keepAlivePages.value = _keepAlivePages;
         };
         const reloadPage = (path) => {
             const selectedPage = findPage(path || unref(route.path));
@@ -114,6 +130,7 @@ export default {
         const closeOtherPage = (path) => {
             const selectedPage = findPage(path || unref(route.path));
             pageList.value = [selectedPage];
+            keepAlivePages.value = [selectedPage.name];
         };
         const getPageKey = (_route) => {
             const selectedPage = findPage(_route.path);
@@ -133,10 +150,10 @@ export default {
                 default:
             }
         };
-        const keepAlivePages = ref([]);
+
-        const getComponent = (Component, _route) => {
+        const getComponent = (Component, _route, isKeep = false) => {
-            if (_route.meta['keep-alive']) {
+            if (isKeep || _route.meta['keep-alive']) {
-                const name = _route.meta?.name || _route.name;
+                const name = _route.meta?.name ?? _route.name;
                 if (name) {
                     // 修改组件的 name
                     Component.type.name = name;

packages/fes-plugin-qiankun/examples/micro/src/pages/micro/index.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="haizekuo">micro - index</div>
+    <input />
 </template>
 <config>
 {
@@ -10,7 +11,9 @@
 <script>
 export default {
     setup() {
-        return {};
+        return {
+            bigData: new Array(5 * 1024 * 1024),
+        };
     },
 };
 </script>

packages/fes-plugin-qiankun/examples/micro/src/pages/micro/test.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="haizekuo">micro - test</div>
+    <input />
 </template>
 <config>
 {
@@ -10,7 +11,9 @@
 <script>
 export default {
     setup() {
-        return {};
+        return {
+            bigData: new Array(5 * 1024 * 1024),
+        };
     },
 };
 </script>

packages/fes-plugin-qiankun/examples/vite-main/src/pages/index.vue

@@ -1,6 +1,7 @@
 <template>
     <div>
         main
+        <input />
         <FTabs v-model="activeKey">
             <FTabPane name="Tab 1" value="1">
                 <MicroAppWithMemoHistory key="1" name="micro" url="/micro" />

packages/fes-plugin-qiankun/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fesjs/plugin-qiankun",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0-beta.5",
   "description": "@fesjs/plugin-qiankun",
   "main": "lib/index.js",
   "files": [

packages/fes-plugin-qiankun/src/main/modifyRoutes.js

@@ -1,16 +1,13 @@
 import { defaultHistoryType } from '../constants';
 
 function getMicroApp(options) {
-    const { key, microAppName, masterHistoryType, base, namespace, ...normalizedRouteProps } = options;
+    const { key, microAppName, cacheName, masterHistoryType, base, namespace, ...normalizedRouteProps } = options;
-    return `() => {
+    return `(async () => {
-return new Promise((resolve)=>{
+const { getMicroAppRouteComponent } = await import('@@/${namespace}/getMicroAppRouteComponent');
-    import('@@/${namespace}/getMicroAppRouteComponent').then(({ getMicroAppRouteComponent })=>{
+return getMicroAppRouteComponent({key: '${key}', appName: '${microAppName}', cacheName: '${cacheName}', base: '${base}', masterHistoryType: '${masterHistoryType}', routeProps: ${JSON.stringify(
-        resolve(getMicroAppRouteComponent({ key: '${key}', appName: '${microAppName}', base: '${base}', masterHistoryType: '${masterHistoryType}', routeProps: ${JSON.stringify(
         normalizedRouteProps,
-    )}  }))
+    )} })
-    })
+})()`;
-})
-}`;
 }
 
 function modifyRoutesWithAttachMode({ routes, masterHistoryType, base, namespace }) {
@@ -20,6 +17,7 @@ function modifyRoutesWithAttachMode({ routes, masterHistoryType, base, namespace
                 if (route.meta && route.meta.microApp) {
                     route.component = getMicroApp({
                         key: route.path,
+                        cacheName: route.meta.cacheName ?? route.path,
                         microAppName: route.meta.microApp,
                         masterHistoryType,
                         base,

packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl

@@ -12,13 +12,13 @@ import { mergeWith } from "{{{LODASH_ES}}}";
 // eslint-disable-next-line import/extensions
 import { getMasterOptions } from "./masterOptions";
 
-function unmountMicroApp(microApp) {
+async function unmountMicroApp(microApp) {
     if (!microApp) {
         return;
     }
     const status = microApp.getStatus();
     if (status === 'MOUNTED') {
-        microApp.unmount();
+        await microApp.unmount();
     }
 }
 
@@ -28,6 +28,7 @@ export const MicroApp = defineComponent({
             type: String,
             required: true
         },
+        cacheName: String,
         settings: Object,
         props: Object,
         lifeCycles: Object
@@ -64,11 +65,11 @@ export const MicroApp = defineComponent({
             return {};
         });
 
+        
         const propsConfigRef = computed(() => {
             return {
                 ...propsFromConfigRef.value,
                 ...props.props,
-                ...attrs
             };
         });
 
@@ -77,13 +78,13 @@ export const MicroApp = defineComponent({
             const appConfig = appConfigRef.value;
             const { name, entry } = appConfig;
             // 加载新的
-            microAppRef.value = loadMicroApp(
+            const app = loadMicroApp(
                 {
                     // 保证唯一
-                    name: `${name}_${Date.now()}`,
+                    name: `${name}_${props.cacheName || ''}`,
                     entry: entry,
                     container: containerRef.value,
-                    props: {...propsConfigRef.value}
+                    props: {...propsConfigRef.value, ...attrs}
                 },
                 {
                     ...globalSettings,
@@ -96,6 +97,12 @@ export const MicroApp = defineComponent({
                     (v1, v2) => concat(v1 ?? [], v2 ?? [])
                 )
             );
+            ['loadPromise', 'bootstrapPromise', 'mountPromise', 'unmountPromise'].forEach((key)=>{
+                app[key].catch((e)=>{
+                    console.warn("[@fesjs/plugin-qiankun]", e)
+                })
+            })
+            microAppRef.value = app;
         };
 
         // 当参数变化时，update子应用
@@ -131,7 +138,7 @@ export const MicroApp = defineComponent({
                             }
 
                             // 返回 microApp.update 形成链式调用
-                            return microApp.update({...propsConfigRef.value});
+                            return microApp.update({...propsConfigRef.value, ...attrs});
                         }
                     }
                 );

packages/fes-plugin-qiankun/src/main/runtime/MicroAppWithMemoHistory.jsx

@@ -1,4 +1,4 @@
-import { defineComponent, watch } from 'vue';
+import { defineComponent, watch, onUnmounted } from 'vue';
 // eslint-disable-next-line import/extensions
 import { MicroApp } from './MicroApp';
 
@@ -11,6 +11,7 @@ export const MicroAppWithMemoHistory = defineComponent({
             type: String,
             required: true,
         },
+        cacheName: String,
         settings: Object,
         props: Object,
         lifeCycles: Object,
@@ -28,6 +29,9 @@ export const MicroAppWithMemoHistory = defineComponent({
                 microRouter.push(props.url);
             },
         );
+        onUnmounted(() => {
+            microRouter = null;
+        });
         return () => <MicroApp onRouterInit={onRouterInit} {...props} {...attrs}></MicroApp>;
     },
 });

packages/fes-plugin-qiankun/src/main/runtime/getMicroAppRouteComponent.jsx

@@ -1,6 +1,6 @@
 // eslint-disable-next-line import/extensions
 import { MicroApp } from './MicroApp';
 
-export function getMicroAppRouteComponent({ key, appName, base, masterHistoryType, routeProps }) {
+export function getMicroAppRouteComponent({ key, appName, base, masterHistoryType, routeProps, cacheName }) {
-    return <MicroApp key={key} base={base} masterHistoryType={masterHistoryType} name={appName} {...routeProps} />;
+    return <MicroApp key={key} base={base} masterHistoryType={masterHistoryType} name={appName} cacheName={cacheName} {...routeProps} />;
 }

packages/fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl

@@ -1,4 +1,4 @@
-import { plugin, ApplyPluginsType, getRouter, getHistory, destroyRouter } from '@@/core/coreExports';
+import { plugin, ApplyPluginsType, getHistory, destroyRouter } from '@@/core/coreExports';
 {{#HAS_PLUGIN_MODEL}}
 import { setModelState } from './qiankunModel';
 {{/HAS_PLUGIN_MODEL}}
@@ -18,6 +18,7 @@ function isPromise(obj) {
 let render = () => {};
 let cacheAppPromise = null;
 let hasMountedAtLeastOnce = false;
+const cache = {};
 
 export default () => defer.promise;
 
@@ -48,6 +49,7 @@ export function genBootstrap(oldRender, appPromise) {
         if (isPromise(appPromise)) {
             cacheAppPromise = appPromise;
         }
+        appPromise = null;
     };
 }
 
@@ -91,6 +93,11 @@ export function genMount(mountElementId) {
             defer.resolve();
         }
         hasMountedAtLeastOnce = true;
+        cacheAppPromise.then((app)=>{
+            if(!cache[props.name]) {
+                cache[props.name] = app;
+            }
+        })
     };
 }
 
@@ -109,9 +116,21 @@ export function genUpdate() {
 // 子应用生命周期钩子Unmount
 export function genUnmount() {
     return async (props) => {
-        const history = getHistory();
+        Object.keys(history).forEach(key=>{
-        history.destroy();  // 会触发app.unmount
+            delete history[key]
+        })
+        const routerHistory = getHistory();
+        routerHistory?.destroy();
         destroyRouter();
+        if (cache[props.name]) {
+            setTimeout(() => {
+                const app = cache[props.name];
+                app.unmount();
+                app._container.innerHTML = '';
+                delete cache[props.name];
+                cacheAppPromise = null;
+            }, 0);
+        }
         const slaveRuntime = getSlaveRuntime();
         if (slaveRuntime.unmount) {
             await slaveRuntime.unmount(props);

packages/fes-plugin-qiankun/src/micro/runtime/runtime.tpl

@@ -1,5 +1,5 @@
-import { createMemoryHistory, getHistory } from '@@/core/coreExports';
+import { createMemoryHistory } from '@@/core/coreExports';
-import qiankunRender, { clientRenderOptsStack, history } from './lifecycles';
+import qiankunRender, { clientRenderOptsStack, history as historyConfig } from './lifecycles';
 
 
 export const render = oldRender => qiankunRender().then(oldRender);
@@ -15,19 +15,18 @@ export function modifyClientRenderOpts(memo) {
 }
 
 export function modifyCreateHistory(memo) {
-    if (history.url) {
+    if (historyConfig.url) {
         return createMemoryHistory
     }
     return memo;
 }
 
-export function onRouterCreated({ router }) {
+export function onRouterCreated({ router, history }) {
-     if(history.url) {
+     if(historyConfig.url) {
-        const memoryHistory = getHistory();
+        history.push(historyConfig.url)
-        memoryHistory.push(history.url)
     }
-    if(history.onRouterInit){
+    if(historyConfig.onRouterInit){
-        history.onRouterInit(router)
+        historyConfig.onRouterInit(router)
     }
 }
 

packages/fes-preset-built-in/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fesjs/preset-built-in",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0-beta.5",
   "description": "@fesjs/preset-built-in",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl

@@ -60,6 +60,7 @@ const beforeRender = async ({rootElement}) => {
             console.error(e);
         }
         app.unmount();
+        app._container.innerHTML = '';
     }
 };
 

packages/fes-preset-built-in/src/plugins/route/template/routeExports.tpl

@@ -5,9 +5,6 @@ const ROUTER_BASE = '{{{ routerBase }}}';
 let router = null;
 let history = null;
 export const createRouter = (routes) => {
-  if (router) {
-    return router;
-  }
   const createHistory = plugin.applyPlugins({
     key: 'modifyCreateHistory',
     type: ApplyPluginsType.modify,
@@ -31,7 +28,7 @@ export const createRouter = (routes) => {
   plugin.applyPlugins({
     key: 'onRouterCreated',
     type: ApplyPluginsType.event,
-    args: { router },
+    args: { router, history },
   });
 
   return router;