feat: Register plugin when plugin is added

vuejs · Feb 26, 2024 · 6f9a2fb · 6f9a2fb
1 parent a5c1688
commit 6f9a2fb
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 31 deletions.
diff --git a/packages/devtools-kit/src/api/plugin.ts b/packages/devtools-kit/src/api/plugin.ts
@@ -1,48 +1,47 @@
 import type { App } from 'vue'
-import { toRaw, watch } from 'vue'
 import { PluginDescriptor, PluginSetupFunction } from '../types'
 import { devtoolsAppRecords, devtoolsState } from '../state'
 import { hook } from '../hook'
 import { getRouterDevToolsId } from '../core/router'
 import type { DevToolsPluginApi } from './api'
 
 export function collectDevToolsPlugin(pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) {
-  devtoolsState.pluginBuffer.value.push([pluginDescriptor, setupFn])
+  devtoolsState.pluginBuffer.push([pluginDescriptor, setupFn])
 }
 
 export function setupDevToolsPlugin(pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) {
   return hook.setupDevToolsPlugin(pluginDescriptor, setupFn)
 }
 
-export function registerPlugin(app: App<any>, api: DevToolsPluginApi) {
-  watch(() => devtoolsState.pluginBuffer.value.length, (_, oldVal) => {
-    const pluginDiffs = devtoolsState.pluginBuffer.value.slice((oldVal || 1) - 1).filter(([plugin]) => toRaw(plugin).app === app)
-    pluginDiffs.forEach(([plugin, setupFn]) => {
-      if (plugin.packageName === 'vue-query') {
-        /**
-         * Skip it for now because plugin api doesn't support vue-query devtools plugin:
-         * https://github.com/TanStack/query/blob/main/packages/vue-query/src/devtools/devtools.ts
-         * @TODO: Need to discuss if we should be full compatible with the old devtools plugin api.
-         */
-        return
-      }
+export function setupExternalPlugin(plugin: [PluginDescriptor, PluginSetupFunction], app: App<any>, api: DevToolsPluginApi) {
+  const [pluginDescriptor, setupFn] = plugin
+  if (pluginDescriptor.app !== app)
+    return
 
-      // edge case for router plugin
-      if (plugin.packageName === 'vue-router') {
-        const id = getRouterDevToolsId(`${plugin.id}`)
-        if (plugin.app === app) {
-          devtoolsAppRecords.value = devtoolsAppRecords.value.map(item => ({
-            ...item,
-            routerId: id,
-          }))
-        }
-      }
-      setupFn(api)
-    })
-  }, {
-    immediate: true,
-  })
+  if (pluginDescriptor.packageName === 'vue-query') {
+    /**
+     * Skip it for now because plugin api doesn't support vue-query devtools plugin:
+     * https://github.com/TanStack/query/blob/main/packages/vue-query/src/devtools/devtools.ts
+     * @TODO: Need to discuss if we should be full compatible with the old devtools plugin api.
+     */
+    return
+  }
+
+  // edge case for router plugin
+  if (pluginDescriptor.packageName === 'vue-router') {
+    const id = getRouterDevToolsId(`${pluginDescriptor.id}`)
+    if (pluginDescriptor.app === app) {
+      devtoolsAppRecords.value = devtoolsAppRecords.value.map(item => ({
+        ...item,
+        routerId: id,
+      }))
+    }
+  }
+  setupFn(api)
+}
 
+export function registerPlugin(app: App<any>, api: DevToolsPluginApi) {
+  devtoolsState.pluginBuffer.forEach(plugin => setupExternalPlugin(plugin, app, api))
   devtoolsAppRecords.value = devtoolsAppRecords.value.map((record) => {
     const globalProperties = record.app?.config?.globalProperties
     if (!globalProperties)

diff --git a/packages/devtools-kit/src/core/index.ts b/packages/devtools-kit/src/core/index.ts
@@ -2,7 +2,7 @@ import { target } from '@vue/devtools-shared'
 import { createDevToolsHook, devtoolsHooks, hook, subscribeDevToolsHook } from '../hook'
 import { DevToolsHooks } from '../types'
 import { devtoolsAppRecords, devtoolsState, getDevToolsEnv } from '../state'
-import { DevToolsEvents, DevToolsPluginApi, apiHooks, collectDevToolsPlugin } from '../api'
+import { DevToolsEvents, DevToolsPluginApi, apiHooks, collectDevToolsPlugin, setupExternalPlugin } from '../api'
 import { createAppRecord, setActiveAppRecord } from './app-record'
 
 export function initDevTools() {
@@ -22,7 +22,13 @@ export function initDevTools() {
     target.__VUE_DEVTOOLS_GLOBAL_HOOK__ = createDevToolsHook()
 
   // setup old devtools plugin (compatible with pinia, router, etc)
-  hook.on.setupDevtoolsPlugin(collectDevToolsPlugin)
+  hook.on.setupDevtoolsPlugin((pluginDescriptor, setupFn) => {
+    collectDevToolsPlugin(pluginDescriptor, setupFn)
+    const { app, api } = devtoolsAppRecords.active || {}
+    if (!app || !api)
+      return
+    setupExternalPlugin([pluginDescriptor, setupFn], app, api)
+  })
 
   // create app record
   hook.on.vueAppInit(async (app, version) => {