fix(kit): prevent duplicate registration of devtool plugin (#457)

Author: webfansplz

packages/devtools-kit/src/core/index.ts

@@ -18,7 +18,7 @@ import {
 import { onLegacyDevToolsPluginApiAvailable } from '../compat'
 import { DevToolsHooks } from '../types'
 import { createAppRecord, removeAppRecordId } from './app'
-import { callDevToolsPluginSetupFn, createComponentsDevToolsPlugin, registerDevToolsPlugin, setupDevToolsPlugin } from './plugin'
+import { callDevToolsPluginSetupFn, createComponentsDevToolsPlugin, registerDevToolsPlugin, removeRegisteredPluginApp, setupDevToolsPlugin } from './plugin'
 import { normalizeRouterInfo } from './router'
 
 export function initDevTools() {
@@ -74,10 +74,9 @@ export function initDevTools() {
       setActiveAppRecord(normalizedAppRecord)
       setActiveAppRecordId(normalizedAppRecord.id)
       normalizeRouterInfo(normalizedAppRecord, activeAppRecord)
+      registerDevToolsPlugin(normalizedAppRecord.app)
     }
-
     setupDevToolsPlugin(...createComponentsDevToolsPlugin(normalizedAppRecord.app))
-    registerDevToolsPlugin(normalizedAppRecord.app)
 
     updateDevToolsState({
       connected: true,
@@ -104,6 +103,7 @@ export function initDevTools() {
       devtoolsContext.hooks.callHook(DevToolsMessagingHookKeys.SEND_ACTIVE_APP_UNMOUNTED_TO_CLIENT)
     }
     target.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps.splice(target.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps.indexOf(app), 1)
+    removeRegisteredPluginApp(app)
   })
 
   subscribeDevToolsHook()

packages/devtools-kit/src/core/plugin/index.ts

@@ -1,19 +1,21 @@
+import { target } from '@vue/devtools-shared'
 import { App, PluginDescriptor, PluginSetupFunction } from '../../types'
 import { hook } from '../../hook'
 import { devtoolsContext, devtoolsPluginBuffer } from '../../ctx'
 import { DevToolsPluginAPI } from '../../api'
 
 export * from './components'
 
+target.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__ ??= new Set<App>()
+
 export function setupDevToolsPlugin(pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) {
   return hook.setupDevToolsPlugin(pluginDescriptor, setupFn)
 }
 
 export function callDevToolsPluginSetupFn(plugin: [PluginDescriptor, PluginSetupFunction], app: App) {
   const [pluginDescriptor, setupFn] = plugin
-  // @TODO: need check
-  // if (pluginDescriptor.app !== app)
-  // return
+  if (pluginDescriptor.app !== app)
+    return
 
   const api = new DevToolsPluginAPI({
     plugin: {
@@ -32,7 +34,17 @@ export function callDevToolsPluginSetupFn(plugin: [PluginDescriptor, PluginSetup
 
   setupFn(api)
 }
+
+export function removeRegisteredPluginApp(app: App) {
+  target.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.delete(app)
+}
+
 export function registerDevToolsPlugin(app: App) {
+  if (target.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.has(app))
+    return
+
+  target.__VUE_DEVTOOLS_KIT__REGISTERED_PLUGIN_APPS__.add(app)
+
   devtoolsPluginBuffer.forEach((plugin) => {
     callDevToolsPluginSetupFn(plugin, app)
   })

packages/devtools-kit/src/ctx/api.ts

@@ -8,6 +8,7 @@ import { getRootElementsFromComponentInstance } from '../core/component/tree/el'
 import { openInEditor } from '../core/open-in-editor'
 import { normalizeRouterInfo } from '../core/router'
 import { getComponentInspector } from '../core/component-inspector'
+import { registerDevToolsPlugin } from '../core/plugin'
 import type { DevToolsContextHooks, DevToolsMessagingHooks, DevToolsV6PluginAPIHookPayloads } from './hook'
 import { DevToolsContextHookKeys, DevToolsV6PluginAPIHookKeys } from './hook'
 import { activeAppRecord, devtoolsAppRecords, setActiveAppRecord, setActiveAppRecordId } from './state'
@@ -108,6 +109,7 @@ export function createDevToolsApi(hooks: Hookable<DevToolsContextHooks & DevTool
         setActiveAppRecord(appRecord)
         normalizeRouterInfo(appRecord, activeAppRecord)
         callInspectorUpdatedHook()
+        registerDevToolsPlugin(appRecord.app)
       }
     },
     // inspect dom

packages/playground/basic/package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "@tanstack/vue-query": "^5.41.0",
     "@vueuse/core": "^10.10.0",
+    "element-plus": "^2.7.5",
     "pinia": "^2.1.7",
     "unplugin-auto-import": "^0.17.6",
     "vee-validate": "^4.13.1",

packages/playground/basic/src/main.ts

@@ -4,10 +4,11 @@ import { createRouter, createWebHistory } from 'vue-router'
 import { VueQueryPlugin } from '@tanstack/vue-query'
 import { addCustomCommand } from '@vue/devtools-api'
 
+import ElementPlus from 'element-plus'
 import store from './stores/vuexStore'
 
 import App from './App.vue'
-
+import 'element-plus/dist/index.css'
 import Home from './pages/Home.vue'
 import Hey from './pages/Hey.vue'
 import VueQuery from './pages/VueQuery.vue'
@@ -16,8 +17,8 @@ import './style.css'
 import 'uno.css'
 
 const pinia = createPinia()
-
 const app = createApp(App)
+app.use(ElementPlus)
 
 // devtools.connect()
 

packages/playground/basic/vite.config.ts

@@ -5,7 +5,7 @@ import commonjs from '@rollup/plugin-commonjs'
 import Unocss from 'unocss/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import inspect from 'vite-plugin-inspect'
-
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
@@ -21,6 +21,7 @@ export default defineConfig({
         'vue-router',
         '@vueuse/core',
       ],
+      resolvers: [ElementPlusResolver()],
     }),
     inspect(),
   ],