diff --git a/packages/devtools-kit/src/core/component/state/process.ts b/packages/devtools-kit/src/core/component/state/process.ts
index eb38e2474..ed052f547 100644
--- a/packages/devtools-kit/src/core/component/state/process.ts
+++ b/packages/devtools-kit/src/core/component/state/process.ts
@@ -3,7 +3,7 @@ import type { InspectorState } from '../types'
import { camelize } from '@vue/devtools-shared'
import { ensurePropertyExists, returnError } from '../utils'
import { vueBuiltins } from './constants'
-import { getPropType, getSetupStateType, toRaw } from './util'
+import { escape, getPropType, getSetupStateType, toRaw } from './util'
function mergeOptions(
to: any,
@@ -279,6 +279,15 @@ function processRefs(instance: VueAppInstance) {
}))
}
+const vnodeEvents = new Set([
+ 'vnode-before-mount',
+ 'vnode-mounted',
+ 'vnode-before-update',
+ 'vnode-updated',
+ 'vnode-before-unmount',
+ 'vnode-unmounted',
+])
+
function processEventListeners(instance: VueAppInstance) {
const emitsDefinition = instance.type.emits
const declaredEmits = Array.isArray(emitsDefinition) ? emitsDefinition : Object.keys(emitsDefinition ?? {})
@@ -288,16 +297,18 @@ function processEventListeners(instance: VueAppInstance) {
const [prefix, ...eventNameParts] = key.split(/(?=[A-Z])/)
if (prefix === 'on') {
const eventName = eventNameParts.join('-').toLowerCase()
+ const isBuiltIn = vnodeEvents.has(eventName)
const isDeclared = declaredEmits.includes(eventName)
+ const text = isBuiltIn ? '✅ Built-in' : isDeclared ? '✅ Declared' : '⚠️ Not declared'
result.push({
type: 'event listeners',
key: eventName,
value: {
_custom: {
- displayText: isDeclared ? '✅ Declared' : '⚠️ Not declared',
- key: isDeclared ? '✅ Declared' : '⚠️ Not declared',
- value: isDeclared ? '✅ Declared' : '⚠️ Not declared',
- tooltipText: !isDeclared ? `The event ${eventName} is not declared in the emits option. It will leak into the component's attributes ($attrs).` : null,
+ displayText: text,
+ key: text,
+ value: text,
+ tooltipText: isBuiltIn ? `The event ${escape(eventName)} is part of Vue and doesn't need to be declared by the component` : !isDeclared ? `The event ${escape(eventName)} is not declared in the emits option. It will leak into the component's attributes ($attrs).` : null,
},
},
})