feat(plugin-qiankun): 主应用通过model跟子应用通讯

packages/fes-plugin-qiankun/src/constants.js

@@ -1,4 +1,4 @@
 export const defaultMainRootId = '#root-master';
 export const defaultHistoryType = 'hash';
-export const qiankunStateForMicroModelNamespace = '@@qiankunStateForMicro';
+export const qiankunStateForMicroModelNamespace = 'qiankunStateForMicro';
-export const qiankunStateFromMainModelNamespace = '@@qiankunStateFromMain';
+export const qiankunStateFromMainModelNamespace = 'qiankunStateFromMain';

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

@@ -1,6 +1,10 @@
-import { readFileSync } from 'fs';
+import { readFileSync, existsSync } from 'fs';
 import { join } from 'path';
-import { defaultMainRootId, defaultHistoryType } from '../constants';
+import {
+    defaultMainRootId,
+    defaultHistoryType,
+    qiankunStateForMicroModelNamespace
+} from '../constants';
 import modifyRoutes from './modifyRoutes';
 
 const namespace = 'plugin-qiankun/main';
@@ -8,11 +12,15 @@ const namespace = 'plugin-qiankun/main';
 export function isMasterEnable(api) {
     return (
         !!api.userConfig?.qiankun?.main
-      || !!process.env.INITIAL_QIANKUN_MAIN_OPTIONS
+        || !!process.env.INITIAL_QIANKUN_MAIN_OPTIONS
     );
 }
 
 export default function (api) {
+    const {
+        utils: { Mustache, winPath }
+    } = api;
+
     api.describe({
         enableBy: () => isMasterEnable(api)
     });
@@ -27,22 +35,47 @@ export default function (api) {
     const absMicroAppPath = join(namespace, 'MicroApp.js');
     const absRuntimePath = join(namespace, 'runtime.js');
     const absMasterOptionsPath = join(namespace, 'masterOptions.js');
-    const absGetMicroAppRouteCompPath = join(namespace, 'getMicroAppRouteComponent.js');
+    const absGetMicroAppRouteCompPath = join(
+        namespace,
+        'getMicroAppRouteComponent.js'
+    );
 
     api.onGenerateFiles(() => {
+        const HAS_PLUGIN_MODEL = api.hasPlugins(['@fesjs/plugin-model']);
         api.writeTmpFile({
             path: absMicroAppPath,
-            content: readFileSync(join(__dirname, 'runtime/MicroApp.tpl'), 'utf-8')
+            content: Mustache.render(
+                readFileSync(join(__dirname, 'runtime/MicroApp.tpl'), 'utf-8'),
+                {
+                    qiankunStateForMicroModelNamespace,
+                    HAS_PLUGIN_MODEL:
+                        HAS_PLUGIN_MODEL
+                        && existsSync(
+                            winPath(
+                                join(
+                                    api.paths.absSrcPath,
+                                    'models/qiankunStateForMicro.js'
+                                )
+                            )
+                        )
+                }
+            )
         });
 
         api.writeTmpFile({
             path: absRuntimePath,
-            content: readFileSync(join(__dirname, 'runtime/runtime.tpl'), 'utf-8')
+            content: readFileSync(
+                join(__dirname, 'runtime/runtime.tpl'),
+                'utf-8'
+            )
         });
 
         api.writeTmpFile({
             path: absGetMicroAppRouteCompPath,
-            content: readFileSync(join(__dirname, 'runtime/getMicroAppRouteComponent.tpl'), 'utf-8')
+            content: readFileSync(
+                join(__dirname, 'runtime/getMicroAppRouteComponent.tpl'),
+                'utf-8'
+            )
         });
 
         const { main: options } = api.config?.qiankun || {};

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

@@ -10,6 +10,9 @@ import { loadMicroApp } from "qiankun";
 import mergeWith from "lodash/mergeWith";
 // eslint-disable-next-line import/extensions
 import { getMasterOptions } from "./masterOptions";
+{{#HAS_PLUGIN_MODEL}}
+import { useModel } from '@@/core/pluginExports';
+{{/HAS_PLUGIN_MODEL}}
 
 function unmountMicroApp(microApp) {
     if (microApp && microApp.mountPromise) {
@@ -27,7 +30,7 @@ export const MicroApp = defineComponent({
         lifeCycles: Object,
         className: String,
     },
-    setup(props) {
+    setup(props, { attrs }) {
         const {
             masterHistoryType,
             apps = [],
@@ -35,6 +38,14 @@ export const MicroApp = defineComponent({
             ...globalSettings
         } = getMasterOptions();
 
+{{#HAS_PLUGIN_MODEL}}
+        // 约定使用 src/models/qiankunStateForMicro 中的数据作为主应用透传给微应用的 props，优先级高于 propsFromConfig
+        const stateForSlave = useModel('{{{qiankunStateForMicroModelNamespace}}}');
+{{/HAS_PLUGIN_MODEL}}
+{{^HAS_PLUGIN_MODEL}}
+        const stateForSlave = reactive({});
+{{/HAS_PLUGIN_MODEL}}
+
         // 挂载节点
         const containerRef = ref(null);
         const microAppRef = ref();
@@ -59,16 +70,7 @@ export const MicroApp = defineComponent({
             return {};
         });
 
-        const propsFromParamsRef = computed(() => {
+        const propsFromParams = attrs;
-            const {
-                name,
-                settings,
-                lifeCycles,
-                className,
-                ...propsFromParams
-            } = props;
-            return propsFromParams || {};
-        });
 
         // 只有当name变化时才重新加载新的子应用
         const loadApp = () => {
@@ -82,7 +84,8 @@ export const MicroApp = defineComponent({
                     container: containerRef.value,
                     props: {
                         ...propsFromConfigRef.value,
-                        ...propsFromParamsRef.value,
+                        ...stateForSlave,
+                        ...propsFromParams,
                     },
                 },
                 {
@@ -130,7 +133,8 @@ export const MicroApp = defineComponent({
                                 // 返回 microApp.update 形成链式调用
                                 return microApp.update({
                                     ...propsFromConfigRef.value,
-                                    ...propsFromParamsRef.value,
+                                    ...stateForSlave,
+                                    ...propsFromParams,
                                 });
                             }
                         }
@@ -152,7 +156,9 @@ export const MicroApp = defineComponent({
             loadApp();
         });
 
-        watch([propsFromConfigRef, propsFromParamsRef], () => {
+        watch(()=>{
+            return {...{}, ...propsFromConfigRef.value, ...stateForSlave, ...propsFromParams}
+        }, () => {
             updateApp();
         });