feat(kit): init component emit event listener

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

@@ -3,7 +3,7 @@ import { debounce } from 'perfect-debounce'
 import { getInstanceState } from '../../core/component/state'
 import { editState } from '../../core/component/state/editor'
 import { ComponentWalker } from '../../core/component/tree/walker'
-import { getAppRecord, getComponentId, getComponentInstance } from '../../core/component/utils'
+import { getAppRecord, getComponentId, getComponentInstance, getInstanceName } from '../../core/component/utils'
 import { activeAppRecord, devtoolsContext, devtoolsState, DevToolsV6PluginAPIHookKeys } from '../../ctx'
 import { hook } from '../../hook'
 import { exposeInstanceToWindow } from '../vm'
@@ -82,6 +82,15 @@ export function createComponentsDevToolsPlugin(app: App): [PluginDescriptor, Plu
  api.sendInspectorState(INSPECTOR_ID)
  }, 120)
 
+ hook.on.componentEmit(async (app, instance, event, params) => {
+ const appRecord = await getAppRecord(app)
+
+ if (!appRecord)
+ return
+ const componentName = getInstanceName(instance)
+ console.log('component-emit', componentName, event, params)
+ })
+
  const componentAddedCleanup = hook.on.componentAdded(async (app, uid, parentUid, component) => {
  if (devtoolsState.highPerfModeEnabled)
  return

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

@@ -21,6 +21,9 @@ const on: VueHooks['on'] = {
  componentAdded(fn) {
  return devtoolsHooks.hook(DevToolsHooks.COMPONENT_ADDED, fn)
  },
+ componentEmit(fn) {
+ return devtoolsHooks.hook(DevToolsHooks.COMPONENT_EMIT, fn)
+ },
  componentUpdated(fn) {
  return devtoolsHooks.hook(DevToolsHooks.COMPONENT_UPDATED, fn)
  },
@@ -113,6 +116,12 @@ export function subscribeDevToolsHook() {
  devtoolsHooks.callHook(DevToolsHooks.COMPONENT_REMOVED, app, uid, parentUid, component)
  })
 
+ hook.on<DevToolsEvent[DevToolsHooks.COMPONENT_EMIT]>(DevToolsHooks.COMPONENT_EMIT, async (app, instance, event, params) => {
+ if (!app || !instance || devtoolsState.highPerfModeEnabled)
+ return
+ devtoolsHooks.callHook(DevToolsHooks.COMPONENT_EMIT, app, instance, event, params)
+ })
+
  // devtools plugin setup
  hook.on<DevToolsEvent[DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]>(DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, (pluginDescriptor, setupFn, options) => {
  if (options?.target === 'legacy')

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

@@ -26,6 +26,7 @@ export interface DevToolsEvent {
  [DevToolsHooks.APP_CONNECTED]: () => void
  [DevToolsHooks.APP_UNMOUNT]: (app: VueAppInstance['appContext']['app']) => void | Promise<void>
  [DevToolsHooks.COMPONENT_ADDED]: (app: HookAppInstance, uid: number, parentUid: number, component: VueAppInstance) => void | Promise<void>
+ [DevToolsHooks.COMPONENT_EMIT]: (app: HookAppInstance, instance: VueAppInstance, event: string, params: unknown) => void | Promise<void>
  [DevToolsHooks.COMPONENT_UPDATED]: DevToolsEvent['component:added']
  [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent['component:added']
  [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction, options?: { target?: string }) => void
@@ -51,6 +52,7 @@ export interface VueHooks {
  vueAppUnmount: (fn: DevToolsEvent[DevToolsHooks.APP_UNMOUNT]) => void
  vueAppConnected: (fn: DevToolsEvent[DevToolsHooks.APP_CONNECTED]) => void
  componentAdded: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_ADDED]) => () => void
+ componentEmit: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_EMIT]) => () => void
  componentUpdated: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_UPDATED]) => () => void
  componentRemoved: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_REMOVED]) => () => void
  setupDevtoolsPlugin: (fn: DevToolsEvent[DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]) => void

packages/playground/basic/src/pages/Home.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import Foo from '../components/Foo.vue'
 
+const emit = defineEmits(['update'])
 const visible = ref(false)
-
 const obj = reactive<{
  count: number
  foo?: number
@@ -16,12 +16,19 @@ obj.foo = toRef(obj, 'count')
 // @ts-expect-error type guard
 obj.bar = ref('bar')
 
+function trigger() {
+ emit('update', 1)
+}
+
 const toRefObj = toRefs(obj)
 </script>
 
 <template>
  <div class="m-auto mt-3 h-80 w-120 flex flex-col items-center justify-center rounded bg-[#363636]">
  Home
+ <button @click="trigger">
+ Click me
+ </button>
  <Foo v-if="visible" />
  <img src="/vite.svg" alt="Vite Logo">
  <button class="w-30 cursor-pointer" @click="visible = !visible">