feat: respect devtools definition (#2311)

webfansplz · web-flow · commit c3cc713b91a0 · 2024-01-23T16:39:52.000+01:00
Fixes #2310
diff --git a/src/emit.ts b/src/emit.ts
@@ -4,6 +4,7 @@ import {
   ComponentPublicInstance,
   ComponentInternalInstance
 } from 'vue'
+import { getGlobalThis } from './utils'
 
 type Events<T = unknown> = Record<number, Record<string, T[]>>
 
@@ -28,18 +29,38 @@ export function emitted<T = unknown>(
 }
 
 export const attachEmitListener = () => {
-  // use devtools to capture this "emit"
-  setDevtoolsHook(createDevTools(), {})
+  const target = getGlobalThis()
+  // override emit to capture events when devtools is defined
+  if (target.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
+    const _emit = target.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit
+    target.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit = (
+      eventType: any,
+      ...payload: any[]
+    ) => {
+      _emit.call(target.__VUE_DEVTOOLS_GLOBAL_HOOK__, eventType, ...payload)
+      captureDevtoolsVueComponentEmitEvent(eventType, payload)
+    }
+  } else {
+    // use devtools to capture this "emit"
+    setDevtoolsHook(createDevTools(), {})
+  }
+}
+
+function captureDevtoolsVueComponentEmitEvent(
+  eventType: string,
+  payload: any[]
+) {
+  if (eventType === DevtoolsHooks.COMPONENT_EMIT) {
+    const [_, componentVM, event, eventArgs] = payload
+    recordEvent(componentVM, event, eventArgs)
+  }
 }
 
 // devtools hook only catches Vue component custom events
 function createDevTools(): any {
   return {
     emit(eventType, ...payload) {
-      if (eventType !== DevtoolsHooks.COMPONENT_EMIT) return
-
-      const [_, componentVM, event, eventArgs] = payload
-      recordEvent(componentVM, event, eventArgs)
+      captureDevtoolsVueComponentEmitEvent(eventType, payload)
     }
   } as Partial<typeof devtools>
 }
diff --git a/src/utils.ts b/src/utils.ts
@@ -235,3 +235,20 @@ export function isScriptSetup(
     vm && (vm.$ as unknown as { setupState: any }).setupState.__isScriptSetup
   )
 }
+
+let _globalThis: any
+export const getGlobalThis = (): any => {
+  return (
+    _globalThis ||
+    (_globalThis =
+      typeof globalThis !== 'undefined'
+        ? globalThis
+        : typeof self !== 'undefined'
+          ? self
+          : typeof window !== 'undefined'
+            ? window
+            : typeof global !== 'undefined'
+              ? global
+              : {})
+  )
+}
