diff --git a/packages/fes-plugin-qiankun/src/constants.js b/packages/fes-plugin-qiankun/src/constants.js index 1bd6bbc5..3d0e6263 100644 --- a/packages/fes-plugin-qiankun/src/constants.js +++ b/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 qiankunStateFromMainModelNamespace = '@@qiankunStateFromMain'; +export const qiankunStateForMicroModelNamespace = 'qiankunStateForMicro'; +export const qiankunStateFromMainModelNamespace = 'qiankunStateFromMain'; diff --git a/packages/fes-plugin-qiankun/src/main/index.js b/packages/fes-plugin-qiankun/src/main/index.js index 78c7da2a..2caea696 100644 --- a/packages/fes-plugin-qiankun/src/main/index.js +++ b/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 || {}; diff --git a/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl b/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl index 43c21cd0..45514077 100644 --- a/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl +++ b/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 { - name, - settings, - lifeCycles, - className, - ...propsFromParams - } = props; - return propsFromParams || {}; - }); + const propsFromParams = attrs; // 只有当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(); });