web-extend-plugin-vue2 0.3.1 → 0.3.2

package/dist/index.mjs

@@ -3255,13 +3255,30 @@ function getRegisteredTopRouteNamesForPlugin(pluginId) {
 }
 
 /**
- * 宿主侧响应式注册表：扩展点槽位（供布局与 `ExtensionPoint` 消费）。
- * 菜单/侧栏树完全由宿主基于路由快照自行映射，框架不维护平行菜单列表。
+ * Host-side reactive registries for extension-point slot components.
+ * Menus/sidebar mapping stays on the host and is not duplicated here.
  */
-const registries = Vue.observable({
+const registries = {
     slots: {},
     slotRevision: 0
-});
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function ensureRegistriesReactive(VueLike) {
+    if (!VueLike || typeof VueLike.observable !== 'function') {
+        return registries;
+    }
+    if (registries.__wepObservedBy__ === VueLike) {
+        return registries;
+    }
+    VueLike.observable(registries);
+    Object.defineProperty(registries, '__wepObservedBy__', {
+        value: VueLike,
+        configurable: true,
+        enumerable: false,
+        writable: true
+    });
+    return registries;
+}
 
 /**
  * 按插件 id 收集 `onTeardown` 回调，供 `disposeWebPlugin` 统一执行。
@@ -4470,6 +4487,9 @@ function createHostApi(pluginId, router, hostKitOptions = {}) {
     const hostContext = hostKitOptions.hostContext != null && typeof hostKitOptions.hostContext === 'object'
         ? hostKitOptions.hostContext
         : Object.freeze({});
+    const hostVue = hostContext && hostContext.Vue;
+    const VueRuntime = hostVue || Vue;
+    ensureRegistriesReactive(VueRuntime);
     registerPluginTeardown(pluginId, () => {
         clearContributedRoutesForPlugin(pluginId);
     });
@@ -4525,7 +4545,7 @@ function createHostApi(pluginId, router, hostKitOptions = {}) {
                 return;
             }
             if (!registries.slots[pointId]) {
-                Vue.set(registries.slots, pointId, []);
+                VueRuntime.set(registries.slots, pointId, []);
             }
             const list = registries.slots[pointId];
             for (const c of components) {
@@ -4563,62 +4583,64 @@ function createHostApi(pluginId, router, hostKitOptions = {}) {
     };
 }
 
-/**
- * 布局中的扩展点占位；插件通过 `hostApi.registerSlotComponents(pointId, ...)` 注入组件。
- * 样式由宿主全局 CSS 覆盖 `.extension-point` / `.plugin-point-error`。
- */
-const SlotErrorBoundary = Vue.extend({
-    name: 'SlotErrorBoundary',
-    props: { label: String },
-    data() {
-        return { error: null };
-    },
-    errorCaptured(err) {
-        this.error = err instanceof Error && err.message ? err.message : String(err);
-        console.error('[wep:ExtensionPoint]', this.label, err);
-        return false;
-    },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    render(h) {
-        if (this.error) {
-            return h('div', { class: 'plugin-point-error' }, `[插件 ${this.label}] 渲染失败`);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function createExtensionPointComponent(VueLike = Vue) {
+    ensureRegistriesReactive(VueLike);
+    const SlotErrorBoundary = VueLike.extend({
+        name: 'SlotErrorBoundary',
+        props: { label: String },
+        data() {
+            return { error: null };
+        },
+        errorCaptured(err) {
+            this.error = err instanceof Error && err.message ? err.message : String(err);
+            console.error('[wep:ExtensionPoint]', this.label, err);
+            return false;
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        render(h) {
+            if (this.error) {
+                return h('div', { class: 'plugin-point-error' }, `[插件 ${this.label}] 渲染失败`);
+            }
+            const d = this.$slots.default;
+            return d && d[0] ? d[0] : h('span');
         }
-        const d = this.$slots.default;
-        return d && d[0] ? d[0] : h('span');
-    }
-});
-var ExtensionPoint = Vue.extend({
-    name: 'ExtensionPoint',
-    components: { SlotErrorBoundary },
-    props: {
-        pointId: { type: String, required: true },
-        slotProps: { type: Object, default: () => ({}) }
-    },
-    computed: {
-        items() {
-            void registries.slotRevision;
-            return registries.slots[this.pointId] || [];
+    });
+    return VueLike.extend({
+        name: 'ExtensionPoint',
+        components: { SlotErrorBoundary },
+        props: {
+            pointId: { type: String, required: true },
+            slotProps: { type: Object, default: () => ({}) }
         },
-        forwardProps() {
-            return this.slotProps || {};
+        computed: {
+            items() {
+                void registries.slotRevision;
+                return registries.slots[this.pointId] || [];
+            },
+            forwardProps() {
+                return this.slotProps || {};
+            }
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        render(h) {
+            return h('div', {
+                class: 'extension-point',
+                attrs: { 'data-point-id': this.pointId }
+            }, this.items.map((item) => h(SlotErrorBoundary, {
+                key: item.key,
+                props: { label: item.pluginId }
+            }, [h(item.component, { props: this.forwardProps })])));
         }
-    },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    render(h) {
-        return h('div', {
-            class: 'extension-point',
-            attrs: { 'data-point-id': this.pointId }
-        }, this.items.map((item) => h(SlotErrorBoundary, {
-            key: item.key,
-            props: { label: item.pluginId }
-        }, [h(item.component, { props: this.forwardProps })])));
-    }
-});
+    });
+}
+var ExtensionPoint = createExtensionPointComponent();
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function installWebExtendPluginVue2(Vue, router, options) {
-    if (Vue && ExtensionPoint) {
-        Vue.component('ExtensionPoint', ExtensionPoint);
+    if (Vue) {
+        ensureRegistriesReactive(Vue);
+        Vue.component('ExtensionPoint', createExtensionPointComponent(Vue));
     }
     const runtime = resolveRuntimeOptions$1(options || {});
     return bootstrapPlugins$1(router, (id, r, kit) => createHostApi(id, r, kit || {}), runtime);