web-extend-plugin-vue2 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-extend-plugin-vue2",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Vue 2.7 host runtime for web-extend-plugin: manifest bootstrap, hostApi, registries, ExtensionPoint",
   "type": "module",
   "main": "./src/index.js",

package/src/bridge.test.js

@@ -1,38 +1,38 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { createRequestBridge } from './bridge.js'
-
-describe('createRequestBridge', () => {
-  const originalFetch = globalThis.fetch
-
-  beforeEach(() => {
-    globalThis.fetch = vi.fn(() => Promise.resolve(new Response(null, { status: 200 })))
-  })
-
-  afterEach(() => {
-    globalThis.fetch = originalFetch
-  })
-
-  it('allows paths under /api/', async () => {
-    const bridge = createRequestBridge()
-    await bridge.request('/api/channels')
-    expect(globalThis.fetch).toHaveBeenCalledWith(
-      '/api/channels',
-      expect.objectContaining({ credentials: 'same-origin' })
-    )
-  })
-
-  it('rejects paths outside allowlist', async () => {
-    const bridge = createRequestBridge()
-    await expect(bridge.request('/fp-api/x')).rejects.toThrow(/not allowed/)
-    await expect(bridge.request('http://evil.com/api/x')).rejects.toThrow()
-  })
-
-  it('honors custom allowedPathPrefixes', async () => {
-    const bridge = createRequestBridge({ allowedPathPrefixes: ['/fp-api/'] })
-    await bridge.request('/fp-api/frontend-plugins')
-    expect(globalThis.fetch).toHaveBeenCalledWith(
-      '/fp-api/frontend-plugins',
-      expect.objectContaining({ credentials: 'same-origin' })
-    )
-  })
-})
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { createRequestBridge } from './bridge.js'
+
+describe('createRequestBridge', () => {
+  const originalFetch = globalThis.fetch
+
+  beforeEach(() => {
+    globalThis.fetch = vi.fn(() => Promise.resolve(new Response(null, { status: 200 })))
+  })
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch
+  })
+
+  it('allows paths under /api/', async () => {
+    const bridge = createRequestBridge()
+    await bridge.request('/api/channels')
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      '/api/channels',
+      expect.objectContaining({ credentials: 'same-origin' })
+    )
+  })
+
+  it('rejects paths outside allowlist', async () => {
+    const bridge = createRequestBridge()
+    await expect(bridge.request('/fp-api/x')).rejects.toThrow(/not allowed/)
+    await expect(bridge.request('http://evil.com/api/x')).rejects.toThrow()
+  })
+
+  it('honors custom allowedPathPrefixes', async () => {
+    const bridge = createRequestBridge({ allowedPathPrefixes: ['/fp-api/'] })
+    await bridge.request('/fp-api/frontend-plugins')
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      '/fp-api/frontend-plugins',
+      expect.objectContaining({ credentials: 'same-origin' })
+    )
+  })
+})

package/src/components/ExtensionPoint.vue

@@ -50,6 +50,7 @@ export default {
   },
   computed: {
     items() {
+      void registries.slotRevision
       return registries.slots[this.pointId] || []
     },
     forwardProps() {

package/src/createHostApi.js

@@ -143,6 +143,7 @@ export function createHostApi(pluginId, router, hostKitOptions = {}) {
         })
       }
       list.sort((a, b) => b.priority - a.priority)
+      registries.slotRevision++
     },
 
     /**

package/src/default-runtime-config.js

@@ -1,58 +1,58 @@
-/**
- * 宿主可覆盖的默认运行时配置（路径、白名单、超时等）。
- * 使用方式：`resolveRuntimeOptions({ ...defaultWebExtendPluginRuntime, manifestListPath: '/api/my-plugins' })`
- * 或只传需要改动的字段：`resolveRuntimeOptions({ manifestListPath: '/api/my-plugins' })`。
- *
- * @module default-runtime-config
- */
-
-/**
- * @typedef {typeof defaultWebExtendPluginRuntime} WebExtendPluginDefaultRuntime
- */
-
-export const defaultWebExtendPluginRuntime = {
-  /** 清单 HTTP 服务前缀（与后端 context-path 对齐），不含尾部 `/` */
-  manifestBase: '/fp-api',
-
-  /**
-   * 拉取插件清单的 **路径段**（以 `/` 开头），拼在 `manifestBase` 之后。
-   * 完整 URL：`{manifestBase}{manifestListPath}` → 默认 `/fp-api/api/frontend-plugins`
-   */
-  manifestListPath: '/api/frontend-plugins',
-
-  /** 清单 `fetch` 的 `credentials`，需 Cookie 会话时用 `include` */
-  manifestFetchCredentials: 'include',
-
-  /** 插件 dev 服务存活探测路径（拼在 `webPluginDevOrigin` 后） */
-  devPingPath: '/__web_plugin_dev_ping',
-
-  /** 插件 dev 热更新 SSE 路径（拼在插件 dev 的 origin 后） */
-  devReloadSsePath: '/__web_plugin_reload_stream',
-
-  /** 隐式 dev 映射里，每个 id 对应的入口路径（相对插件 dev origin） */
-  webPluginDevEntryPath: '/src/plugin-entry.js',
-
-  /** `fetch(devPingUrl)` 超时毫秒数 */
-  devPingTimeoutMs: 500,
-
-  /**
-   * **隐式 dev 映射**（可选）：开发模式下若 `webPluginDevOrigin` 上 ping 成功，运行时会为若干插件 id 自动生成
-   * `{ id → origin + webPluginDevEntryPath }`，从而用 dev 服务入口替代清单里的 dist，便于热更新联调。
-   *
-   * 插件 id 来源优先级：`webPluginDevIds`（或 `VITE_WEB_PLUGIN_DEV_IDS`）→ 本字段。**默认 `[]`**，
-   * 避免把仓库示例 id 写进通用宿主；联调时在 `.env` 里设 `VITE_WEB_PLUGIN_DEV_IDS=com.xxx,com.yyy`，
-   * 或 `resolveRuntimeOptions({ defaultImplicitDevPluginIds: ['com.xxx'] })` 即可。
-   */
-  defaultImplicitDevPluginIds: [],
-
-  /**
-   * 允许通过 `<script>` / 动态 `import()` 加载的插件脚本所在主机名（小写），防误配公网 URL。
-   */
-  allowedScriptHosts: ['localhost', '127.0.0.1', '::1'],
-
-  /**
-   * `hostApi.getBridge().request(path)` 允许的 path 前缀；须以 `/` 开头。
-   * 需与后端实际 API 前缀一致。
-   */
-  bridgeAllowedPathPrefixes: ['/api/']
-}
+/**
+ * 宿主可覆盖的默认运行时配置（路径、白名单、超时等）。
+ * 使用方式：`resolveRuntimeOptions({ ...defaultWebExtendPluginRuntime, manifestListPath: '/api/my-plugins' })`
+ * 或只传需要改动的字段：`resolveRuntimeOptions({ manifestListPath: '/api/my-plugins' })`。
+ *
+ * @module default-runtime-config
+ */
+
+/**
+ * @typedef {typeof defaultWebExtendPluginRuntime} WebExtendPluginDefaultRuntime
+ */
+
+export const defaultWebExtendPluginRuntime = {
+  /** 清单 HTTP 服务前缀（与后端 context-path 对齐），不含尾部 `/` */
+  manifestBase: '/fp-api',
+
+  /**
+   * 拉取插件清单的 **路径段**（以 `/` 开头），拼在 `manifestBase` 之后。
+   * 完整 URL：`{manifestBase}{manifestListPath}` → 默认 `/fp-api/api/frontend-plugins`
+   */
+  manifestListPath: '/api/frontend-plugins',
+
+  /** 清单 `fetch` 的 `credentials`，需 Cookie 会话时用 `include` */
+  manifestFetchCredentials: 'include',
+
+  /** 插件 dev 服务存活探测路径（拼在 `webPluginDevOrigin` 后） */
+  devPingPath: '/__web_plugin_dev_ping',
+
+  /** 插件 dev 热更新 SSE 路径（拼在插件 dev 的 origin 后） */
+  devReloadSsePath: '/__web_plugin_reload_stream',
+
+  /** 隐式 dev 映射里，每个 id 对应的入口路径（相对插件 dev origin） */
+  webPluginDevEntryPath: '/src/plugin-entry.js',
+
+  /** `fetch(devPingUrl)` 超时毫秒数 */
+  devPingTimeoutMs: 500,
+
+  /**
+   * **隐式 dev 映射**（可选）：开发模式下若 `webPluginDevOrigin` 上 ping 成功，运行时会为若干插件 id 自动生成
+   * `{ id → origin + webPluginDevEntryPath }`，从而用 dev 服务入口替代清单里的 dist，便于热更新联调。
+   *
+   * 插件 id 来源优先级：`webPluginDevIds`（或 `VITE_WEB_PLUGIN_DEV_IDS`）→ 本字段。**默认 `[]`**，
+   * 避免把仓库示例 id 写进通用宿主；联调时在 `.env` 里设 `VITE_WEB_PLUGIN_DEV_IDS=com.xxx,com.yyy`，
+   * 或 `resolveRuntimeOptions({ defaultImplicitDevPluginIds: ['com.xxx'] })` 即可。
+   */
+  defaultImplicitDevPluginIds: [],
+
+  /**
+   * 允许通过 `<script>` / 动态 `import()` 加载的插件脚本所在主机名（小写），防误配公网 URL。
+   */
+  allowedScriptHosts: ['localhost', '127.0.0.1', '::1'],
+
+  /**
+   * `hostApi.getBridge().request(path)` 允许的 path 前缀；须以 `/` 开头。
+   * 需与后端实际 API 前缀一致。
+   */
+  bridgeAllowedPathPrefixes: ['/api/']
+}

package/src/dispose-plugin.js

@@ -1,55 +1,56 @@
-/**
- * 单插件卸载：与 `bootstrapPlugins` / `createHostApi` 对称，清理注册表与 DOM 副作用。
- *
- * @module dispose-plugin
- */
-import Vue from 'vue'
-import { registries } from './registries.js'
-import { runPluginTeardowns } from './teardown-registry.js'
-
-/**
- * 卸载指定 id 的插件：依次执行 teardown、移除菜单与扩展点条目、删除 activator、移除带 `data-plugin-asset` 的节点。
- *
- * **路由**：Vue Router 3 无公开 `removeRoute`，此处不改动 matcher；动态路由需整页刷新或自行维护路由表。
- *
- * @param {string} pluginId 与 manifest.id 一致
- */
-export function disposeWebPlugin(pluginId) {
-  if (!pluginId || typeof pluginId !== 'string') {
-    return
-  }
-
-  runPluginTeardowns(pluginId)
-
-  for (let i = registries.menus.length - 1; i >= 0; i--) {
-    if (registries.menus[i].pluginId === pluginId) {
-      registries.menus.splice(i, 1)
-    }
-  }
-
-  const slots = registries.slots
-  for (const pointId of Object.keys(slots)) {
-    const list = slots[pointId]
-    if (!Array.isArray(list)) {
-      continue
-    }
-    const next = list.filter((x) => x.pluginId !== pluginId)
-    if (next.length === 0) {
-      Vue.delete(slots, pointId)
-    } else if (next.length !== list.length) {
-      Vue.set(slots, pointId, next)
-    }
-  }
-
-  if (typeof window !== 'undefined' && window.__PLUGIN_ACTIVATORS__) {
-    delete window.__PLUGIN_ACTIVATORS__[pluginId]
-  }
-
-  if (typeof document !== 'undefined') {
-    document.querySelectorAll('[data-plugin-asset]').forEach((el) => {
-      if (el.getAttribute('data-plugin-asset') === pluginId) {
-        el.remove()
-      }
-    })
-  }
-}
+/**
+ * 单插件卸载：与 `bootstrapPlugins` / `createHostApi` 对称，清理注册表与 DOM 副作用。
+ *
+ * @module dispose-plugin
+ */
+import Vue from 'vue'
+import { registries } from './registries.js'
+import { runPluginTeardowns } from './teardown-registry.js'
+
+/**
+ * 卸载指定 id 的插件：依次执行 teardown、移除菜单与扩展点条目、删除 activator、移除带 `data-plugin-asset` 的节点。
+ *
+ * **路由**：Vue Router 3 无公开 `removeRoute`，此处不改动 matcher；动态路由需整页刷新或自行维护路由表。
+ *
+ * @param {string} pluginId 与 manifest.id 一致
+ */
+export function disposeWebPlugin(pluginId) {
+  if (!pluginId || typeof pluginId !== 'string') {
+    return
+  }
+
+  runPluginTeardowns(pluginId)
+
+  for (let i = registries.menus.length - 1; i >= 0; i--) {
+    if (registries.menus[i].pluginId === pluginId) {
+      registries.menus.splice(i, 1)
+    }
+  }
+
+  const slots = registries.slots
+  for (const pointId of Object.keys(slots)) {
+    const list = slots[pointId]
+    if (!Array.isArray(list)) {
+      continue
+    }
+    const next = list.filter((x) => x.pluginId !== pluginId)
+    if (next.length === 0) {
+      Vue.delete(slots, pointId)
+    } else if (next.length !== list.length) {
+      Vue.set(slots, pointId, next)
+    }
+  }
+  registries.slotRevision++
+
+  if (typeof window !== 'undefined' && window.__PLUGIN_ACTIVATORS__) {
+    delete window.__PLUGIN_ACTIVATORS__[pluginId]
+  }
+
+  if (typeof document !== 'undefined') {
+    document.querySelectorAll('[data-plugin-asset]').forEach((el) => {
+      if (el.getAttribute('data-plugin-asset') === pluginId) {
+        el.remove()
+      }
+    })
+  }
+}

package/src/registries.js

@@ -14,5 +14,10 @@ import Vue from 'vue'
 export const registries = Vue.observable({
   menus: [],
   /** 扩展点 id → 已注册组件列表（内容区 / 工具栏等共用模型） */
-  slots: {}
+  slots: {},
+  /**
+   * 每次变更 slots 时递增，供 ExtensionPoint 计算属性显式依赖。
+   * Vue 2 对「先访问不存在的 slots[key]、后 Vue.set 补 key」的依赖收集不可靠，会导致扩展点不刷新。
+   */
+  slotRevision: 0
 })

package/src/teardown-registry.js

@@ -1,44 +1,44 @@
-/**
- * 按 `pluginId` 收集 `onTeardown` 回调，供 `disposeWebPlugin` 统一执行。
- *
- * @module teardown-registry
- */
-
-/** @type {Map<string, Function[]>} */
-const byPlugin = new Map()
-
-/**
- * 登记插件卸载时要执行的同步回调（建议只做解绑、清定时器等轻量逻辑）。
- * @param {string} pluginId
- * @param {() => void} fn
- */
-export function registerPluginTeardown(pluginId, fn) {
-  if (typeof fn !== 'function') {
-    return
-  }
-  let arr = byPlugin.get(pluginId)
-  if (!arr) {
-    arr = []
-    byPlugin.set(pluginId, arr)
-  }
-  arr.push(fn)
-}
-
-/**
- * 执行并清空该插件已登记的全部 teardown；调用后 Map 中不再保留该 id。
- * @param {string} pluginId
- */
-export function runPluginTeardowns(pluginId) {
-  const arr = byPlugin.get(pluginId)
-  if (!arr) {
-    return
-  }
-  byPlugin.delete(pluginId)
-  for (const fn of arr) {
-    try {
-      fn()
-    } catch (e) {
-      console.warn('[plugins] teardown failed', pluginId, e)
-    }
-  }
-}
+/**
+ * 按 `pluginId` 收集 `onTeardown` 回调，供 `disposeWebPlugin` 统一执行。
+ *
+ * @module teardown-registry
+ */
+
+/** @type {Map<string, Function[]>} */
+const byPlugin = new Map()
+
+/**
+ * 登记插件卸载时要执行的同步回调（建议只做解绑、清定时器等轻量逻辑）。
+ * @param {string} pluginId
+ * @param {() => void} fn
+ */
+export function registerPluginTeardown(pluginId, fn) {
+  if (typeof fn !== 'function') {
+    return
+  }
+  let arr = byPlugin.get(pluginId)
+  if (!arr) {
+    arr = []
+    byPlugin.set(pluginId, arr)
+  }
+  arr.push(fn)
+}
+
+/**
+ * 执行并清空该插件已登记的全部 teardown；调用后 Map 中不再保留该 id。
+ * @param {string} pluginId
+ */
+export function runPluginTeardowns(pluginId) {
+  const arr = byPlugin.get(pluginId)
+  if (!arr) {
+    return
+  }
+  byPlugin.delete(pluginId)
+  for (const fn of arr) {
+    try {
+      fn()
+    } catch (e) {
+      console.warn('[plugins] teardown failed', pluginId, e)
+    }
+  }
+}