blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-06 03:59:53 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
万纯 2021-03-24 18:57:53 +08:00
parent 1394f72f6e
commit d31e4d7613
3 changed files with 62 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/fes-plugin-qiankun/src/constants.js
View File

@ -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';

47
packages/fes-plugin-qiankun/src/main/index.js
View File

@ -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 || {};

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

@ -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();
});