From 01e7c2135336fa25de11a31749aadd50b2dee94a Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Fri, 20 Jan 2023 16:37:36 +0100
Subject: [PATCH] feat(vue3): inspect event listeners on components

---
 .../app-backend-vue3/src/components/data.ts   | 26 +++++++++++++++++++
 .../src/assets/style/index.postcss            | 10 +++++++
 .../app-frontend/src/assets/style/index.styl  |  8 ------
 .../src/features/inspector/StateInspector.vue |  1 +
 packages/app-frontend/src/index.ts            |  1 +
 packages/shell-dev-vue3/src/App.vue           | 13 +++++++++-
 packages/shell-dev-vue3/src/EventEmit.vue     |  7 +++++
 packages/shell-dev-vue3/src/EventNesting.vue  |  4 +++
 8 files changed, 61 insertions(+), 9 deletions(-)
 create mode 100644 packages/app-frontend/src/assets/style/index.postcss

diff --git a/packages/app-backend-vue3/src/components/data.ts b/packages/app-backend-vue3/src/components/data.ts
index f7c1e143d..958f8b551 100644
--- a/packages/app-backend-vue3/src/components/data.ts
+++ b/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
diff --git a/packages/app-frontend/src/assets/style/index.postcss b/packages/app-frontend/src/assets/style/index.postcss
new file mode 100644
index 000000000..52a46e713
--- /dev/null
+++ b/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);
+}
diff --git a/packages/app-frontend/src/assets/style/index.styl b/packages/app-frontend/src/assets/style/index.styl
index f32e0beb8..1a3dafe53 100644
--- a/packages/app-frontend/src/assets/style/index.styl
+++ b/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);
-}
diff --git a/packages/app-frontend/src/features/inspector/StateInspector.vue b/packages/app-frontend/src/features/inspector/StateInspector.vue
index 7ad08e7de..a328211c0 100644
--- a/packages/app-frontend/src/features/inspector/StateInspector.vue
+++ b/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,
 }
 
diff --git a/packages/app-frontend/src/index.ts b/packages/app-frontend/src/index.ts
index 2812363fa..3959c8d8b 100644
--- a/packages/app-frontend/src/index.ts
+++ b/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'
diff --git a/packages/shell-dev-vue3/src/App.vue b/packages/shell-dev-vue3/src/App.vue
index 2deb62739..b850ccf20 100644
--- a/packages/shell-dev-vue3/src/App.vue
+++ b/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 />
diff --git a/packages/shell-dev-vue3/src/EventEmit.vue b/packages/shell-dev-vue3/src/EventEmit.vue
index 87acf3a22..4e81a7a5c 100644
--- a/packages/shell-dev-vue3/src/EventEmit.vue
+++ b/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')">
diff --git a/packages/shell-dev-vue3/src/EventNesting.vue b/packages/shell-dev-vue3/src/EventNesting.vue
index 19d31e2ef..81f6941c4 100644
--- a/packages/shell-dev-vue3/src/EventNesting.vue
+++ b/packages/shell-dev-vue3/src/EventNesting.vue
@@ -10,6 +10,10 @@ export default {
       default: 0,
     },
   },
+
+  emits: [
+    'notify',
+  ],
 }
 </script>