attempt to guess the correct component name when displaying component events instead of showing "unknown"

Author: patinthehat

src/shared/helpers.ts

@@ -51,3 +51,16 @@ export const filterObjectByKeys = (obj: any, includeKeyPatterns: string[]) => {
 
     return result;
 };
+
+export const determineComponentNameDuringEvent = (options: Record<string, unknown>): string => {
+    const result: string = <string>options?.name ?? 'unknown';
+    let filename: string = <string>options?.__file ?? 'src/unknown.js';
+
+    if (result.length && result !== 'unknown') {
+        return result;
+    }
+
+    filename = filename.split('/').pop() ?? 'unknown.js';
+
+    return filename.replace(/\.[\w-_]+$/, '');
+};

src/v2/Vue2RayMixin.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-undef */
 // @ts-nocheck
 import { VueRay as Vue2Ray } from '../shared/VueRay';
+import { determineComponentNameDuringEvent } from '../shared/helpers';
 
 const conditionallyDisplayEvent = (eventName: string, options: Record<string, unknown>, rayInstance: any = null) => {
     if (Vue2Ray.shouldDisplayEvent(eventName)) {
@@ -11,8 +12,10 @@ const conditionallyDisplayEvent = (eventName: string, options: Record<string, un
             return;
         }
 
+        const componentName: string = determineComponentNameDuringEvent(options);
+
         rayInstance().table([
-            `component ${eventName}: <code>${options?.name ?? 'unknown'}</code>`,
+            `component ${eventName}: <code>${componentName}</code>`,
             `filename: <code>&lt;project root&gt;/${options?.__file ?? 'unknown.js'}</code>`,
         ]);
     }

src/v3/Vue3RayMixin.ts

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import { VueRay } from '../shared/VueRay';
+import { determineComponentNameDuringEvent } from '../shared/helpers';
 
 export let vue3Watch = null;
 
@@ -12,8 +13,10 @@ const conditionallyDisplayEvent = (eventName: string, options: Record<string, un
             return;
         }
 
+        const componentName: string = determineComponentNameDuringEvent(options);
+
         rayInstance().table([
-            `component ${eventName}: <code>${options?.name ?? 'unknown'}</code>`,
+            `component ${eventName}: <code>${componentName}</code>`,
             `filename: <code>&lt;project root&gt;/${options?.__file ?? 'unknown.js'}</code>`,
         ]);
     }

tests/shared/helpers.test.ts

@@ -1,6 +1,11 @@
 /* eslint-disable no-undef */
 
-import { createPackageMetaProperty, encodeHtmlEntities, matchPattern } from '../../src/shared/helpers';
+import {
+    createPackageMetaProperty,
+    determineComponentNameDuringEvent,
+    encodeHtmlEntities,
+    matchPattern,
+} from '../../src/shared/helpers';
 
 it('creates a package meta property', () => {
     const obj: any = { $rayMeta: null };
@@ -21,3 +26,10 @@ it('matches patterns', () => {
     expect(matchPattern('test', ['*t', 't*a'])).toBeTruthy();
     expect(matchPattern('test', ['x*', 'a*'])).toBeFalsy();
 });
+
+it('gets component names during events', () => {
+    expect(determineComponentNameDuringEvent({ name: 'Test', __file: '/project/src/HelloWorld.vue' })).toBe('Test');
+    expect(determineComponentNameDuringEvent({ name: 'unknown', __file: '/project/src/HelloWorld.vue' })).toBe('HelloWorld');
+    expect(determineComponentNameDuringEvent({ __file: '/project/src/components/HelloWorld.vue' })).toBe('HelloWorld');
+    expect(determineComponentNameDuringEvent({})).toBe('unknown');
+});