diff --git a/packages/app-backend-vue3/src/components/data.ts b/packages/app-backend-vue3/src/components/data.ts index 30718c760..e4ec65b71 100644 --- a/packages/app-backend-vue3/src/components/data.ts +++ b/packages/app-backend-vue3/src/components/data.ts @@ -1,6 +1,6 @@ import { BackendContext } from '@vue-devtools/app-backend-api' import { getInstanceName, getUniqueComponentId } from './util' -import { camelize, StateEditor, SharedData } from '@vue-devtools/shared-utils' +import { camelize, StateEditor, SharedData, kebabize } from '@vue-devtools/shared-utils' import { ComponentInstance, CustomState, HookPayloads, Hooks, InspectedComponentData } from '@vue/devtools-api' import { returnError } from '../util' @@ -371,20 +371,24 @@ function processRefs (instance) { function processEventListeners (instance) { const emitsDefinition = instance.type.emits const declaredEmits = Array.isArray(emitsDefinition) ? emitsDefinition : Object.keys(emitsDefinition ?? {}) + const declaredEmitsMap = declaredEmits.reduce((emitsMap, key) => { + emitsMap[kebabize(key)] = key + return emitsMap + }, {}) const keys = Object.keys(instance.vnode.props ?? {}) const result = [] for (const key of keys) { const [prefix, ...eventNameParts] = key.split(/(?=[A-Z])/) if (prefix === 'on') { const eventName = eventNameParts.join('-').toLowerCase() - const isDeclared = declaredEmits.includes(eventName) + const normalizedEventName = declaredEmitsMap[eventName] result.push({ type: 'event listeners', - key: eventName, + key: normalizedEventName || eventName, value: { _custom: { - display: isDeclared ? '✅ Declared' : '⚠️ Not declared', - tooltip: !isDeclared ? `The event ${eventName} is not declared in the emits option. It will leak into the component's attributes ($attrs).` : null, + display: normalizedEventName ? '✅ Declared' : '⚠️ Not declared', + tooltip: !normalizedEventName ? `The event ${eventName} is not declared in the emits option. It will leak into the component's attributes ($attrs).` : null, }, }, })