From 570e812a44f3629254d4f377163ea914aed190fd Mon Sep 17 00:00:00 2001 From: Alex Date: Fri, 7 Jun 2024 01:39:11 +0800 Subject: [PATCH 1/2] feat(core): expose activeComponent to window --- packages/devtools-kit/src/ctx/hook.ts | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/devtools-kit/src/ctx/hook.ts b/packages/devtools-kit/src/ctx/hook.ts index e1947ab65..8fee3d3ed 100644 --- a/packages/devtools-kit/src/ctx/hook.ts +++ b/packages/devtools-kit/src/ctx/hook.ts @@ -16,7 +16,7 @@ import type { } from '../types' import { highlight, unhighlight } from '../core/component-highlighter' import { getComponentBoundingRect } from '../core/component/state/bounding-rect' -import { getInstanceName } from '../core/component/utils' +import { getComponentInstance, getInstanceName } from '../core/component/utils' import { addInspector, getInspector } from './inspector' import { addTimelineLayer } from './timeline' import { DevToolsState, activeAppRecord } from './state' @@ -230,6 +230,9 @@ export interface DevToolsContextHooks extends DevToolsV6PluginAPIHooks { [DevToolsContextHookKeys.COMPONENT_UNHIGHLIGHT]: () => void } +const MAX_$VM = 10 +const $vmQueue: any[] = [] + export function createDevToolsCtxHooks() { const hooks = createHooks() hooks.hook(DevToolsContextHookKeys.ADD_INSPECTOR, ({ inspector, plugin }) => { @@ -295,6 +298,25 @@ export function createDevToolsCtxHooks() { resolve() }, DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE) }) + + // Expose instance data to window + // Copied from https://github.com/vuejs/devtools/blob/f03590025b0b4910cf539531c91384be51a8f8fa/packages/app-backend-core/src/component.ts#L57-L72 + const instance = getComponentInstance(activeAppRecord.value, _payload.nodeId) + if (typeof window !== 'undefined' && instance) { + const win = window as any + win.$vm = instance + + // $vm0, $vm1, $vm2, ... + if ($vmQueue[0] !== instance) { + if ($vmQueue.length >= MAX_$VM) { + $vmQueue.pop() + } + for (let i = $vmQueue.length; i > 0; i--) { + win[`$vm${i}`] = $vmQueue[i] = $vmQueue[i - 1] + } + win.$vm0 = $vmQueue[0] = instance + } + } } // @ts-expect-error hookable From d423b25a2da3746858613e91e18db3ab10be4d53 Mon Sep 17 00:00:00 2001 From: Alex Date: Tue, 11 Jun 2024 16:37:12 +0800 Subject: [PATCH 2/2] refactor: call with function at hookCallback --- .../src/core/plugin/components.ts | 3 +++ packages/devtools-kit/src/core/vm/index.ts | 26 +++++++++++++++++++ packages/devtools-kit/src/ctx/hook.ts | 24 +---------------- 3 files changed, 30 insertions(+), 23 deletions(-) create mode 100644 packages/devtools-kit/src/core/vm/index.ts diff --git a/packages/devtools-kit/src/core/plugin/components.ts b/packages/devtools-kit/src/core/plugin/components.ts index a8256ae57..1ac7e9b6b 100644 --- a/packages/devtools-kit/src/core/plugin/components.ts +++ b/packages/devtools-kit/src/core/plugin/components.ts @@ -6,6 +6,7 @@ import { DevToolsV6PluginAPIHookKeys, activeAppRecord, devtoolsContext, devtools import { ComponentWalker } from '../../core/component/tree/walker' import { getInstanceState } from '../../core/component/state' import { editState } from '../../core/component/state/editor' +import { exposeInstanceToWindow } from '../vm' const INSPECTOR_ID = 'components' @@ -58,6 +59,8 @@ export function createComponentsDevToolsPlugin(app: App): [PluginDescriptor, Plu }, DevToolsV6PluginAPIHookKeys.INSPECT_COMPONENT) // @ts-expect-error skip type @TODO payload.state = result + + exposeInstanceToWindow(componentInstance) } }) diff --git a/packages/devtools-kit/src/core/vm/index.ts b/packages/devtools-kit/src/core/vm/index.ts new file mode 100644 index 000000000..c79c99bfb --- /dev/null +++ b/packages/devtools-kit/src/core/vm/index.ts @@ -0,0 +1,26 @@ +const MAX_$VM = 10 +const $vmQueue: any[] = [] + +// Expose instance data to window +// Copied from https://github.com/vuejs/devtools/blob/f03590025b0b4910cf539531c91384be51a8f8fa/packages/app-backend-core/src/component.ts#L57-L72 +export function exposeInstanceToWindow(componentInstance: any) { + const win = window as any + if (typeof win === 'undefined') + return + + if (!componentInstance) + return + + win.$vm = componentInstance + + // $vm0, $vm1, $vm2, ... + if ($vmQueue[0] !== componentInstance) { + if ($vmQueue.length >= MAX_$VM) { + $vmQueue.pop() + } + for (let i = $vmQueue.length; i > 0; i--) { + win[`$vm${i}`] = $vmQueue[i] = $vmQueue[i - 1] + } + win.$vm0 = $vmQueue[0] = componentInstance + } +} diff --git a/packages/devtools-kit/src/ctx/hook.ts b/packages/devtools-kit/src/ctx/hook.ts index 8fee3d3ed..e1947ab65 100644 --- a/packages/devtools-kit/src/ctx/hook.ts +++ b/packages/devtools-kit/src/ctx/hook.ts @@ -16,7 +16,7 @@ import type { } from '../types' import { highlight, unhighlight } from '../core/component-highlighter' import { getComponentBoundingRect } from '../core/component/state/bounding-rect' -import { getComponentInstance, getInstanceName } from '../core/component/utils' +import { getInstanceName } from '../core/component/utils' import { addInspector, getInspector } from './inspector' import { addTimelineLayer } from './timeline' import { DevToolsState, activeAppRecord } from './state' @@ -230,9 +230,6 @@ export interface DevToolsContextHooks extends DevToolsV6PluginAPIHooks { [DevToolsContextHookKeys.COMPONENT_UNHIGHLIGHT]: () => void } -const MAX_$VM = 10 -const $vmQueue: any[] = [] - export function createDevToolsCtxHooks() { const hooks = createHooks() hooks.hook(DevToolsContextHookKeys.ADD_INSPECTOR, ({ inspector, plugin }) => { @@ -298,25 +295,6 @@ export function createDevToolsCtxHooks() { resolve() }, DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE) }) - - // Expose instance data to window - // Copied from https://github.com/vuejs/devtools/blob/f03590025b0b4910cf539531c91384be51a8f8fa/packages/app-backend-core/src/component.ts#L57-L72 - const instance = getComponentInstance(activeAppRecord.value, _payload.nodeId) - if (typeof window !== 'undefined' && instance) { - const win = window as any - win.$vm = instance - - // $vm0, $vm1, $vm2, ... - if ($vmQueue[0] !== instance) { - if ($vmQueue.length >= MAX_$VM) { - $vmQueue.pop() - } - for (let i = $vmQueue.length; i > 0; i--) { - win[`$vm${i}`] = $vmQueue[i] = $vmQueue[i - 1] - } - win.$vm0 = $vmQueue[0] = instance - } - } } // @ts-expect-error hookable