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, }, }, })