feat(vue3): inspect event listeners on components

Author: Akryum

packages/app-backend-vue3/src/components/data.ts

@@ -80,6 +80,7 @@ function getInstanceState (instance) {
     processProvide(instance),
     processInject(instance, mergedType),
     processRefs(instance),
+    processEventListeners(instance),
   )
 }
 
@@ -367,6 +368,31 @@ function processRefs (instance) {
     }))
 }
 
+function processEventListeners (instance) {
+  const emitsDefinition = instance.type.emits
+  const declaredEmits = Array.isArray(emitsDefinition) ? emitsDefinition : Object.keys(emitsDefinition ?? {})
+  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)
+      result.push({
+        type: 'event listeners',
+        key: eventName,
+        value: {
+          _custom: {
+            display: isDeclared ? '✅ Declared' : '⚠️ Not declared',
+            tooltip: !isDeclared ? `The event <code>${eventName}</code> is not declared in the <code>emits</code> option. It will leak into the component's attributes (<code>$attrs</code>).` : null,
+          },
+        },
+      })
+    }
+  }
+  return result
+}
+
 export function editState ({ componentInstance, path, state, type }: HookPayloads[Hooks.EDIT_COMPONENT_STATE], stateEditor: StateEditor, ctx: BackendContext) {
   if (!['data', 'props', 'computed', 'setup'].includes(type)) return
   let target: any

packages/app-frontend/src/assets/style/index.postcss

@@ -0,0 +1,10 @@
+.v-popper__popper.v-popper--theme-tooltip code {
+  @apply bg-gray-500/50 rounded px-1 text-[11px] font-mono;
+}
+
+// @TODO remove when vue-ui style is updated
+
+.vue-ui-group:not(.vertical) > .indicator >.content {
+  margin: 0 12px;
+  width: calc(100% - 24px);
+}

packages/app-frontend/src/assets/style/index.styl

@@ -139,7 +139,6 @@ $arrow-color = rgba(100, 100, 100, 0.5)
 .vue-ui-dark-mode .v-popper__popper.v-popper--theme-tooltip .vue-ui-icon svg
   fill #666
 
-
 .v-popper__popper.v-popper--theme-dropdown .v-popper__inner
   max-height calc(100vh - 32px - 8px - 4px)
   overflow-y auto
@@ -153,10 +152,3 @@ $arrow-color = rgba(100, 100, 100, 0.5)
 .right-icon-reveal:not(:hover)
   .vue-ui-icon.right
     opacity 0
-
-// @TODO remove when vue-ui style is updated
-
-.vue-ui-group:not(.vertical) > .indicator >.content {
-  margin: 0 12px;
-  width: calc(100% - 24px);
-}

packages/app-frontend/src/features/inspector/StateInspector.vue

@@ -23,6 +23,7 @@ const keyOrder = {
   refs: 6,
   $attrs: 7,
   attrs: 7,
+  'event listeners': 7,
   'setup (other)': 8,
 }
 

packages/app-frontend/src/index.ts

@@ -1,4 +1,5 @@
 import './assets/style/index.styl'
+import './assets/style/index.postcss'
 
 import { initStorage, Shell } from '@vue-devtools/shared-utils'
 import { createApp, connectApp } from './app'

packages/shell-dev-vue3/src/App.vue

@@ -81,6 +81,14 @@ export default {
     stopTimer () {
       clearInterval(this.timer)
     },
+
+    onFoo (...args) {
+      console.log('on foo', ...args)
+    },
+
+    onBar (...args) {
+      console.log('on bar', ...args)
+    },
   },
 }
 </script>
@@ -116,7 +124,10 @@ export default {
   <Child question="Life" />
   <NestedMore />
   <NativeTypes ref="nativeTypes" />
-  <EventEmit />
+  <EventEmit
+    @foo="onFoo"
+    @bar="onBar"
+  />
   <EventNesting />
   <AsyncComponent />
   <SuspenseExample />

packages/shell-dev-vue3/src/EventEmit.vue

@@ -1,3 +1,10 @@
+<script setup>
+// eslint-disable-next-line no-undef
+defineEmits([
+  'foo',
+])
+</script>
+
 <template>
   <div style="display: inline-block;">
     <button @click="$emit('foo', 42, 'a')">

packages/shell-dev-vue3/src/EventNesting.vue

@@ -10,6 +10,10 @@ export default {
       default: 0,
     },
   },
+
+  emits: [
+    'notify',
+  ],
 }
 </script>