MES/vue-mod-page
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

更新配置项，更新Receiver入参，修复渲染错误

Browse Source
This commit is contained in:
陈梓阳
2025-05-13 16:15:11 +08:00
parent 5d2af32d68
commit 0c75dca9c3
7 changed files with 708 additions and 730 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1235
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

2
src/App.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
vue-{{ vueVer }}
<Invoker url="/child.html#?id={id}" style="border:1px solid red;height: 400px;overflow-y: scroll;" :items="items" />
<Invoker style="border:1px solid red;height: 400px;overflow-y: scroll;" :items="items" />
<component :is="dom" />
</div>
</template>

37
src/components/DemiHelper.ts
View File

@@ -1,8 +1,7 @@
import * as Vue3 from "vue";
// @ts-ignore
import { h, isVue2, isVue3, type VNode, type VNodeChildren, type VNodeData } from "vue-demi";
import { ComponentInternalInstance, h, isVue2, isVue3, type VNode, type VNodeChildren, type VNodeData } from "vue-demi";
import { InvokerItem } from "./InvokerItem";
import { ComponentInternalInstance } from "vue-demi/lib/v2/index.js";
function splitAttrs(obj: object) : { attrs: Record<string, any>, on: Record<string, any> } {
const attrs: Record<string, any> = {};
@@ -21,8 +20,8 @@ function splitAttrs(obj: object) : { attrs: Record<string, any>, on: Record<stri
/**
* 将扁平化的组件数据对象分离为Vue2形式的data对象
* @param rawData
* @returns
* @param rawData
* @returns
*/
function splitVue2Data(rawData?: Record<string, any> | null) {
console.warn("Handling Vue2 data: ", rawData);
@@ -54,11 +53,11 @@ function splitVue2Data(rawData?: Record<string, any> | null) {
/**
* 渲染具名插槽
* @param slotFn
* @param args
* @returns
* @param slotFn
* @param args
* @returns
*/
function renderSlot(slotFn: Function, args: any, ctx?: ComponentInternalInstance) {
function renderSlot(slotFn: Function, args: any, renderFunction?: Function) {
let child: string | Array<InvokerItem> | InvokerItem = slotFn(args);
// console.warn("Rendering Slot: ", child);
// 字符串情况
@@ -67,17 +66,18 @@ function renderSlot(slotFn: Function, args: any, ctx?: ComponentInternalInstance
}
// Array<InvokerItem>情况
else if (Array.isArray(child)) {
return child.map((c: InvokerItem) => hh(c.tag, c.data, c.children, ctx));
return child.map((c: InvokerItem) => hh(c.tag, c.data, c.children, renderFunction));
}
// InvokerItem情况
else {
return hh(child.tag, child.data, child.children, ctx);
return hh(child.tag, child.data, child.children, renderFunction);
}
}
export function hh(tag: string, data?: Record<string, any> | null, children?: string | Array<InvokerItem> | Record<string, Function>, ctx?: ComponentInternalInstance) {
export function hh(tag: string | object, data?: Record<string, any> | null, children?: string | Array<InvokerItem> | Record<string, Function>, renderFunction?: Function) {
// 适配Vue2渲染函数结构
// console.debug("Rendering", tag, data, children, `Vue Version: ${isVue2 ? 'Vue2' : 'Vue3'}`);
const render = renderFunction || h;
// 处理tag
let processedTag: string | object = tag;
@@ -103,7 +103,8 @@ export function hh(tag: string, data?: Record<string, any> | null, children?: st
}
// 子节点列表则递归处理
else if (Array.isArray(children)) {
processedChildren = children.map(child => hh(child.tag, child.data, child.children, ctx));
processedChildren = children.map(child => hh(child.tag, child.data, child.children, renderFunction));
console.warn("Processed Children: ", processedChildren);
}
// 处理具名插槽对象
else if (children && typeof children == 'object') {
@@ -111,7 +112,7 @@ export function hh(tag: string, data?: Record<string, any> | null, children?: st
processedChildren = Object.fromEntries(
Object.entries(children).map(([name, slotFn]) => [
name,
(args) => renderSlot(slotFn, args, ctx)
(args) => renderSlot(slotFn, args, renderFunction)
])
)
}
@@ -121,13 +122,15 @@ export function hh(tag: string, data?: Record<string, any> | null, children?: st
Object.entries(children).map(([name, slotFn]) => [
name,
(args) => {
return renderSlot(slotFn, args);
return renderSlot(slotFn, args, renderFunction);
}
])
);
}
}
console.debug("Processed", processedTag, processedData, processedChildren);
return h(processedTag, processedData, processedChildren);
}
console.debug("Processed", {
processedTag, processedData, processedChildren
});
return render(processedTag, processedData, processedChildren);
}

22
src/components/Invoker.tsx
View File

@@ -1,12 +1,14 @@
import {
defineComponent,
onBeforeUpdate,
onMounted,
onUnmounted,
ref,
watch,
type PropType
} from "vue-demi";
import { ModContext } from "../types/ModContext";
import { InvokerItem } from "./InvokerItem";
import { modPageConfig } from "../modPageConfig";
let idCount = 0;
export type InvokerModName = string;
@@ -37,9 +39,13 @@ export default defineComponent({
const id = ++idCount;
/** vue实例上下文，此处获取的是Receiver的vue组件实例 */
let receiver: ModContext | null = null;
const invokerKey = modPageConfig.Invoker.invokerKey;
const url = ref<string | undefined>('');
window["MES_MOD_INVOKERS"] ||= {};
window["MES_MOD_INVOKERS"][id] = {
console.log(`[Mod-Invoker] setting up invoker, id: ${id}, name: ${props.name}, invokerKey: ${invokerKey}`);
window[invokerKey] ||= {};
window[invokerKey][id] = {
getRenderContext,
initFinish,
receiver,
@@ -64,7 +70,7 @@ export default defineComponent({
/** 当Receiver初始化完毕后触发 */
function initFinish(context: ModContext) {
receiver = context;
console.log('[Mod-Invoker]initFinish')
console.log('[Mod-Invoker] initFinish')
}
function getRefs() {
@@ -92,11 +98,11 @@ export default defineComponent({
}
);
onBeforeUpdate(() => {
onMounted(async () => {
url.value = await modPageConfig.Invoker.GetModUrl?.(props.name ?? '', id.toString(), invokerKey);
})
});
onUnmounted(() => {
console.log("[Mod-Invoker] invoker-destroyed");
emit('destroyed');
});
@@ -107,7 +113,7 @@ export default defineComponent({
return (
<iframe
src={props.url.replace('{id}',id.toString())}
src={url.value}
scrolling={props.scroll ? "yes" : "no"}
style={`border: none; width: 100%; height: ${props.height}; `}
></iframe>

110
src/components/Receiver.ts
View File

@@ -1,94 +1,7 @@
import { defineComponent, nextTick, onMounted, ref, getCurrentInstance, isVue3 } from 'vue-demi';
import { defineComponent, nextTick, onMounted, ref, getCurrentInstance, isVue3, h } from 'vue-demi';
import { hh } from './DemiHelper';
import { InvokerContext } from '../types/InvokerContext';
console.log('receiver-loaded');
function renderContext(item: object | Array<any>, toSlot: boolean = false) {
/**
* 对象为字符串的情况
* # { tag: 'div', attrs: undefined, children: 'hhh' } => h('span', undefined, 'hhh')
*/
if (typeof item === 'string')
return item;
/**
* 对象为函数的情况
* # { tag: 'div', attrs: undefined, children: () => 'hhh' } => h('span', undefined, 'hhh')
*/
if (typeof (item) === "function") {
// return item;
return item();
}
/**
* 对象为数组的情况
* # { tag: 'div', attrs: undefined, [ { tag: 'span', attrs: undefined, 'hhh' } ] } => h('div', undefined, [ h('span', undefined, 'hhh') ])
*/
if (Array.isArray(item)) {
const list = item.map(i => {
if (isVue3) {
// const comp = resolveComponent(i.tag);
return hh(i.tag, i.attrs, i.children);
// return hDemi(comp, i.attrs, renderContext(i.children, typeof (comp) !== 'string') as any); // vue3
}
// const { attrs, listeners, ref } = splitAttrs(i.attrs);
const slots = renderContext(i.children);
if (typeof (slots) === "object") {
return hh(i.tag, {
attrs: i.attrs
// attrs,
// on: listeners,
// scopedSlots: slots,
// ref
});
}
return hh(i.tag, {
attrs: i.attrs,
}, slots);
});
if (toSlot) {
return () => list;
}
return list;
}
/**
* 复合对象的情况
* #
*/
const children: Record<string, any> = {};
for (const key in item) {
children[key] = function (scope) {
const child = item[key](scope);
if (isVue3) {
return hh(child.tag, child.attrs, renderContext(child.children, true));
}
if (Array.isArray(child)) {
const slots = renderContext(child);
return slots;
} else {
// const { attrs, listeners, ref } = splitAttrs(child.attrs);
const slots = renderContext(child.children);
return hh(child.tag, {
attrs: child.attrs
// attrs,
// on: listeners,
// ref
}, slots);
}
};
}
return children;
}
export default defineComponent({
name: 'Receiver',
props: {
@@ -98,13 +11,14 @@ export default defineComponent({
},
parentKey: {
type: String,
default: () => 'modInvoker'
default: () => 'MES_MOD_INVOKERS'
}
},
setup(props) {
const instance = getCurrentInstance();
let invokerContext: InvokerContext = null!;
const renderVersion = ref(0);
console.log(`[Mod-Receiver] receiver setup, invokerId: ${props.parentId}, invokerKey: ${props.parentKey}`);
if (window.parent != window) {
const invoker = window.parent[props.parentKey][props.parentId];
invokerContext = invoker;
@@ -112,7 +26,7 @@ export default defineComponent({
else {
throw new Error("[Receiver] 组件必须在iframe中使用");
}
const renderItems = ref(invokerContext.getRenderContext() ?? []);
onMounted(() => {
@@ -124,11 +38,12 @@ export default defineComponent({
return renderVersion.value;
},
Update: function (): void {
console.log('[Receiver] Force Update', renderVersion.value);
console.log('[Mod-Receiver] force update', renderVersion.value);
renderVersion.value += 1;
renderItems.value = invokerContext.getRenderContext() ?? [];
instance?.proxy?.$forceUpdate();
},
// @ts-ignore
get refs() {
return instance?.proxy?.$refs;
}
@@ -136,21 +51,22 @@ export default defineComponent({
}
});
});
return () => {
return (h) => {
try {
console.log('receiver-update', renderVersion.value);
if (renderVersion.value < 0) return;
if (invokerContext.getRenderContext) {
const itemList = invokerContext.getRenderContext() ?? [];
// const list = renderContext(itemList);
// console.log('item-list', list);
return hh('div', undefined, itemList);
console.log("[Mod-Receiver] rendering: ", itemList);
// @ts-ignore
return hh('div', undefined, itemList, h);
}
return hh('div');
console.log("[Mod-Receiver] 'getRenderContext' method not found");
return hh('div', undefined, undefined, h);
}
catch (e) {
console.error("[Receiver] 渲染节点过程中出现错误", e);
console.error("[Mod-Receiver] 渲染节点过程中出现错误", e);
}
};
}

14
src/main.ts
View File

@@ -1,5 +1,19 @@
import { createApp, Vue2 } from 'vue-demi'
import App from './App.vue'
import { ConfigureModPage } from './modPageConfig'
ConfigureModPage({
Invoker: {
GetModUrl: (modName, invokerId, invokerKey) => {
const query: Record<string, string> = {
id: invokerId,
key: invokerKey
};
const searchParam = new URLSearchParams(query);
return `/child.html#/?${searchParam.toString()}`
}
}
})
const app = createApp(App)
app.mount('#app')

18
src/modPageConfig.ts
View File

@@ -3,17 +3,29 @@ import { InvokerModName } from "./components/Invoker";
let _modPageConfig = {
Invoker: {
invokerKey: "MES_MOD_INVOKERS",
/** Invoker中计算ModUrl的方法 */
GetModUrl: undefined as ((modName: InvokerModName) => string | Promise<string>) | undefined,
GetModUrl: undefined as ((modName: InvokerModName, invokerId: string, invokerKey: string) => string | Promise<string>) | undefined,
}
}
export function ConfigureModPage(config: typeof _modPageConfig) {
export function ConfigureModPage(config: DeepPartial<typeof _modPageConfig>) {
Object.assign(_modPageConfig, {
..._modPageConfig,
...config,
Invoker: {
...config.Invoker,
..._modPageConfig.Invoker,
...config?.Invoker
}
});
}
export const modPageConfig: DeepReadonly<typeof _modPageConfig> = _modPageConfig;
type DeepPartial<T> = T extends Function // 排除Function，因为Function也是object
? T
: T extends object
? {
[P in keyof T]?: DeepPartial<T[P]>;
}
: T;