diff --git a/index.ts b/index.ts deleted file mode 100644 index 123b853..0000000 --- a/index.ts +++ /dev/null @@ -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, -} \ No newline at end of file diff --git a/package.json b/package.json index 5daa080..77afe2e 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/Invoker.tsx b/src/components/Invoker.tsx index 33b9ec1..7ba090c 100644 --- a/src/components/Invoker.tsx +++ b/src/components/Invoker.tsx @@ -42,7 +42,7 @@ export default defineComponent({ const invokerKey = modPageConfig.Invoker.invokerKey; const url = ref(''); - 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() { diff --git a/src/components/Receiver.ts b/src/components/Receiver.ts index b1d04ed..e0cedf2 100644 --- a/src/components/Receiver.ts +++ b/src/components/Receiver.ts @@ -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) { diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..256cdc5 --- /dev/null +++ b/src/index.ts @@ -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, +} \ No newline at end of file diff --git a/tsconfig.app.json b/tsconfig.app.json index 0c1a0c2..94c91f5 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -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"] }