diff --git a/packages/devtools-kit/src/compat/index.ts b/packages/devtools-kit/src/compat/index.ts new file mode 100644 index 00000000..fabbbf66 --- /dev/null +++ b/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, + }) +} diff --git a/packages/devtools-kit/src/core/index.ts b/packages/devtools-kit/src/core/index.ts index 7e0d9323..b3e86a0b 100644 --- a/packages/devtools-kit/src/core/index.ts +++ b/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) diff --git a/packages/devtools-kit/src/hook/index.ts b/packages/devtools-kit/src/hook/index.ts index a9079589..293c377f 100644 --- a/packages/devtools-kit/src/hook/index.ts +++ b/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(DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, (pluginDescriptor, setupFn) => { + hook.on(DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, (pluginDescriptor, setupFn, options) => { + if (options?.target === 'legacy') + return devtoolsHooks.callHook(DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, pluginDescriptor, setupFn) }) } diff --git a/packages/devtools-kit/src/types/hook.ts b/packages/devtools-kit/src/types/hook.ts index f4059a58..78e6d55f 100644 --- a/packages/devtools-kit/src/types/hook.ts +++ b/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 emit: (event: DevToolsHooks, ...payload: any[]) => void on: (event: DevToolsHooks, handler: T) => () => void