fix(devtools-kit): dynamically register setupFn of plugins (#247)

vuejs · Feb 26, 2024 · d6b92f4 · d6b92f4
1 parent 90285de
commit d6b92f4
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 24 deletions.
diff --git a/packages/devtools-kit/src/api/plugin.ts b/packages/devtools-kit/src/api/plugin.ts
@@ -13,31 +13,35 @@ export function setupDevToolsPlugin(pluginDescriptor: PluginDescriptor, setupFn:
   return hook.setupDevToolsPlugin(pluginDescriptor, setupFn)
 }
 
-export function registerPlugin(app: App<any>, api: DevToolsPluginApi) {
-  const plugins = devtoolsState.pluginBuffer.filter(([plugin]) => plugin.app === app)
-  plugins.forEach(async ([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
+
+  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 (plugin.packageName === 'vue-router') {
-      const id = getRouterDevToolsId(`${plugin.id}`)
-      if (plugin.app === app) {
-        devtoolsAppRecords.value = devtoolsAppRecords.value.map(item => ({
-          ...item,
-          routerId: id,
-        }))
-      }
+  // 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)
-  })
+  }
+  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) => {

diff --git a/packages/playground/basic/src/App.vue b/packages/playground/basic/src/App.vue
@@ -20,6 +20,12 @@
           /hello
         </span>
       </RouterLink>
+      |
+      <RouterLink to="/hey/123123">
+        <span>
+          /hey/123123
+        </span>
+      </RouterLink>
     </div>
   </div>
 </template>
diff --git a/packages/playground/basic/src/pages/Hey.vue b/packages/playground/basic/src/pages/Hey.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
+import { useCounterStore } from '../stores'
+
 const route = useRoute()
+const counterStore = useCounterStore()
 </script>
 
 <template>
   <div class="container">
     Hey: {{ route.params.id }}
+    Counter: {{ counterStore.count }}
   </div>
 </template>