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

index.ts

@@ -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,
-}

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",

src/components/Invoker.tsx

@@ -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() {

src/components/Receiver.ts

@@ -18,27 +18,25 @@ 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(() => {
+        // 若Invoker未接收到当前实例(首次初始化)，则进行初始化
-            nextTick().then(() => {
+        if (!invokerContext.receiver) {
-                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();
@@ -49,8 +47,7 @@ export default defineComponent({
                 }
             });
         }
-            });
+
-        });
         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) {

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,
+}

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"]
 }