refactor: use devtools realize emit

Author: cuixiaorui

src/emitMixin.ts

@@ -1,34 +1,53 @@
-import { getCurrentInstance } from 'vue'
+import { setDevtoolsHook, ComponentPublicInstance } from 'vue'
 
-export const attachEmitListener = () => {
-  return {
-    beforeCreate() {
-      let events: Record<string, unknown[]> = {}
-      ;(this as any).__emitted = events
-      const originalEmit = getCurrentInstance()!.emit
-      getCurrentInstance()!.emit = (event: string, ...args: unknown[]) => {
-        events[event]
-          ? (events[event] = [...events[event], [...args]])
-          : (events[event] = [[...args]])
+const enum DevtoolsHooks {
+  COMPONENT_EMIT = 'component:emit'
+}
+
+export const attachEmitListener = (vm: ComponentPublicInstance) => {
+  let events: Record<string, unknown[]> = {}
+  ;(vm as any).__emitted = events
+  // use devtools capture this "emit"
+  setDevtoolsHook(createDevTools(events))
+}
+
+function createDevTools(events) {
+  const devTools: any = {
+    emit(type, ...payload) {
+      if (type !== DevtoolsHooks.COMPONENT_EMIT) return
+
+      // The first argument is root component
+      // The second argument is  vm
+      // The third argument is event
+      // The fourth argument is args of event
+      recordEvent(events, payload[2], payload[3])
+      wrapperWarn()
+    }
+  }
+
+  return devTools
+}
+
+function recordEvent(events, event, args) {
+  events[event]
+    ? (events[event] = [...events[event], [...args]])
+    : (events[event] = [[...args]])
+}
 
-        // Vue will warn you if you emit an event that is not declared in `emits` and
-        // if the parent is not listening for that event.
-        // since we intercept the event, we are never listening for it explicitly on the
-        // Parent component. Swallow those events then restore the console.warn.
-        // TODO: find out if this is doable using `app.config.warnHandler` (does not appear
-        // work right now). https://github.com/vuejs/vue-test-utils-next/issues/197
-        const consoleWarnSave = console.warn
-        console.warn = (msg: string, ...rest: unknown[]) => {
-          if (msg.includes('[Vue warn]: Component emitted event')) {
-            return
-          } else {
-            consoleWarnSave(msg, ...rest)
-          }
-        }
-        originalEmit(event, ...args)
-        console.warn = consoleWarnSave
-        return [event, ...args]
-      }
+// Vue will warn you if you emit an event that is not declared in `emits` and
+// if the parent is not listening for that event.
+// since we intercept the event, we are never listening for it explicitly on the
+// Parent component. Swallow those events then restore the console.warn.
+// TODO: find out if this is doable using `app.config.warnHandler` (does not appear
+// work right now). https://github.com/vuejs/vue-test-utils-next/issues/197
+function wrapperWarn() {
+  const consoleWarnSave = console.warn
+  console.warn = (msg: string, ...rest: unknown[]) => {
+    if (msg.includes('[Vue warn]: Component emitted event')) {
+      return
+    } else {
+      consoleWarnSave(msg, ...rest)
     }
   }
+  console.warn = consoleWarnSave
 }

src/mount.ts

@@ -408,9 +408,6 @@ export function mount(
     }
   }
 
-  // add tracking for emitted events
-  app.mixin(attachEmitListener())
-
   // stubs
   // even if we are using `mount`, we will still
   // stub out Transition and Transition Group by default.
@@ -449,6 +446,9 @@ export function mount(
   const $vm = Reflect.ownKeys(appRef).length ? appRef : vm
   console.warn = warnSave
 
+  // add tracking for emitted events
+  attachEmitListener($vm)
+
   return createWrapper(app, $vm, setProps)
 }