Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/devtools-kit/src/core/plugin/components.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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)
}
})

Expand Down
26 changes: 26 additions & 0 deletions packages/devtools-kit/src/core/vm/index.ts
Original file line number Diff line number Diff line change
@@ -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
}
}