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

添加调试信息输出，更新库配置

Browse Source
This commit is contained in:
陈梓阳 2025-05-16 11:57:11 +08:00
parent 89a1b631de
commit 935b69e939
6 changed files with 53 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
index.ts
View File

@ -1,21 +0,0 @@
import Invoker, { InvokerModName } from "./src/components/Invoker";
import { hh } from './src/components/DemiHelper';
import { InvokerItem } from "./src/components/InvokerItem";
import { InvokerContext } from "./src/types/InvokerContext";
import { Vue2Instance } from "./src/types/Vue2Instance";
import { ModContext } from "./src/types/ModContext";
import Receiver from "./src/components/Receiver";
import { ConfigureModPage, modPageConfig } from "./src/modPageConfig";
export {
modPageConfig,
ConfigureModPage,
Invoker,
Receiver,
type InvokerItem,
type InvokerContext,
type InvokerModName,
type Vue2Instance,
type ModContext,
hh,
}

6
package.json
View File

@ -3,6 +3,12 @@
"private": true,
"version": "1.0.0",
"type": "module",
"main": "src/index.ts",
"files": [
"src",
"package.json",
"README.MD"
],
"scripts": {
"dev": "vite",
"build": "vue-tsc -b && vite build",

7
src/components/Invoker.tsx
View File

@ -42,7 +42,7 @@ export default defineComponent({
const invokerKey = modPageConfig.Invoker.invokerKey;
const url = ref<string | undefined>('');
console.log(`[Mod-Invoker] setting up invoker, id: ${id}, name: ${props.name}, invokerKey: ${invokerKey}`);
console.log(`[Mod-Invoker] 1. setting up invoker, id: ${id}, name: ${props.name}, invokerKey: ${invokerKey}`);
window[invokerKey] ||= {};
window[invokerKey][id] = {
@ -56,6 +56,7 @@ export default defineComponent({
function updateComponent() {
// 判断子页面vue对象是否存在
receiver?.Update(); // 强制渲染
console.log("[Mod-Invoker] update component");
}
// 子组件调用
@ -67,10 +68,10 @@ export default defineComponent({
}
}
/** 当Receiver初始化完毕后触发 */
/** 当Receiver初始化完毕后由它触发 */
function initFinish(context: ModContext) {
receiver = context;
console.log('[Mod-Invoker] initFinish')
console.log('[Mod-Invoker] 3.1. invoker init finished', receiver)
}
function getRefs() {

45
src/components/Receiver.ts
View File

@ -18,39 +18,36 @@ export default defineComponent({
const instance = getCurrentInstance();
let invokerContext: InvokerContext = null!;
const renderVersion = ref(0);
console.log(`[Mod-Receiver] receiver setup, invokerId: ${props.parentId}, invokerKey: ${props.parentKey}`);
console.log(`[Mod-Receiver] 2. receiver setup, invokerId: ${props.parentId}, invokerKey: ${props.parentKey}`);
if (window.parent != window) {
const invoker = window.parent[props.parentKey][props.parentId];
invokerContext = invoker;
console.log("[Mod-Receiver] 3. got invoker context", invokerContext);
}
else {
throw new Error("[Receiver] 组件必须在iframe中使用");
throw new Error("[Mod-Receiver] the receiver must be in an iframe");
}
const renderItems = ref(invokerContext.getRenderContext() ?? []);
onMounted(() => {
nextTick().then(() => {
console.log('mounted-finish');
if (!invokerContext['modContext']) {
invokerContext.initFinish({
get renderVersion() {
return renderVersion.value;
},
Update: function (): void {
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;
}
});
// 若Invoker未接收到当前实例(首次初始化)，则进行初始化
if (!invokerContext.receiver) {
invokerContext.initFinish({
get renderVersion() {
return renderVersion.value;
},
Update: function (): void {
renderVersion.value += 1;
renderItems.value = invokerContext.getRenderContext() ?? [];
instance?.proxy?.$forceUpdate();
},
// @ts-ignore
get refs() {
return instance?.proxy?.$refs;
}
});
});
}
return (createElem) => {
const render = isVue2 ? createElem : h;
try {
@ -59,11 +56,11 @@ export default defineComponent({
const itemList = invokerContext.getRenderContext() ?? [];
// const list = renderContext(itemList);
console.log("[Mod-Receiver] rendering: ", itemList);
console.log("[Mod-Receiver] 4. rendering: ", itemList);
// @ts-ignore
return hh('div', undefined, itemList, render);
}
console.log("[Mod-Receiver] 'getRenderContext' method not found");
console.warn("[Mod-Receiver] 'getRenderContext' method not found");
return hh('div', undefined, undefined, render);
}
catch (e) {

21
src/index.ts Normal file
View File

@ -0,0 +1,21 @@
import Invoker, { InvokerModName } from "./components/Invoker";
import { hh } from './components/DemiHelper';
import { InvokerItem } from "./components/InvokerItem";
import { InvokerContext } from "./types/InvokerContext";
import { Vue2Instance } from "./types/Vue2Instance";
import { ModContext } from "./types/ModContext";
import Receiver from "./components/Receiver";
import { ConfigureModPage, modPageConfig } from "./modPageConfig";
export {
modPageConfig,
ConfigureModPage,
Invoker,
Receiver,
type InvokerItem,
type InvokerContext,
type InvokerModName,
type Vue2Instance,
type ModContext,
hh,
}

2
tsconfig.app.json
View File

@ -23,5 +23,5 @@
"noUncheckedSideEffectImports": true,
"noImplicitAny": false
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "index.ts"]
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/index.ts"]
}