fix(kit): respect legacy devtools plugin registration

Author: webfansplz

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

@@ -0,0 +1,21 @@
+import { target } from '@vue/devtools-shared'
+
+// devtools <= 6.x
+export function isLegacyVueDevTools() {
+  return +(target.__VUE_DEVTOOLS_GLOBAL_HOOK__.devtoolsVersion?.[0] ?? 0) < 7
+}
+
+export function onLegacyDevToolsPluginApiAvailabled(cb: () => void) {
+  if (target.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__) {
+    cb()
+    return
+  }
+  // eslint-disable-next-line accessor-pairs
+  Object.defineProperty(target, '__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__', {
+    set(value) {
+      if (value)
+        cb()
+    },
+    configurable: true,
+  })
+}

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

@@ -3,6 +3,7 @@ import { createDevToolsHook, devtoolsHooks, hook, subscribeDevToolsHook } from '
 import { DevToolsHooks } from '../types'
 import { devtoolsAppRecords, devtoolsState, getDevToolsEnv } from '../state'
 import { DevToolsEvents, DevToolsPluginApi, apiHooks, collectDevToolsPlugin, setupExternalPlugin } from '../api'
+import { onLegacyDevToolsPluginApiAvailabled } from '../compat'
 import { createAppRecord, setActiveAppRecord } from './app-record'
 
 export function initDevTools() {
@@ -34,6 +35,13 @@ export function initDevTools() {
     setupExternalPlugin([pluginDescriptor, setupFn], app, api)
   })
 
+  onLegacyDevToolsPluginApiAvailabled(() => {
+    const normalizedPluginBuffer = devtoolsState.pluginBuffer.filter(([item]) => item.id !== 'components')
+    normalizedPluginBuffer.forEach(([pluginDescriptor, setupFn]) => {
+      target.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit(DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, pluginDescriptor, setupFn, { target: 'legacy' })
+    })
+  })
+
   // create app record
   hook.on.vueAppInit(async (app, version) => {
     const record = createAppRecord(app)

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

@@ -31,6 +31,7 @@ const on: VueHooks['on'] = {
 export function createDevToolsHook(): DevToolsHook {
   return {
     id: 'vue-devtools-next',
+    devtoolsVersion: '7.0',
     enabled: false,
     appRecords: [],
     apps: [],
@@ -105,7 +106,9 @@ export function subscribeDevToolsHook() {
   })
 
   // devtools plugin setup
-  hook.on<DevToolsEvent[DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]>(DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, (pluginDescriptor, setupFn) => {
+  hook.on<DevToolsEvent[DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]>(DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, (pluginDescriptor, setupFn, options) => {
+    if (options?.target === 'legacy')
+      return
     devtoolsHooks.callHook(DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, pluginDescriptor, setupFn)
   })
 }

packages/devtools-kit/src/types/hook.ts

@@ -26,12 +26,13 @@ export interface DevToolsEvent {
   [DevToolsHooks.COMPONENT_ADDED]: (app: HookAppInstance, uid: number, parentUid: number, component: VueAppInstance) => void
   [DevToolsHooks.COMPONENT_UPDATED]: DevToolsEvent['component:added']
   [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent['component:added']
-  [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) => void
+  [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction, options?: { target?: string }) => void
 }
 
 export interface DevToolsHook {
   id: string
   enabled?: boolean
+  devtoolsVersion: string
   events: Map<DevToolsHooks, Function[]>
   emit: (event: DevToolsHooks, ...payload: any[]) => void
   on: <T extends Function>(event: DevToolsHooks, handler: T) => () => void