Skip to content

Commit 64d018f

Browse files
patinthehatPatrick
authored and
Patrick
committed
attempt to guess the correct component name when displaying component events instead of showing "unknown"
1 parent 921c602 commit 64d018f

File tree

4 files changed

+34
-3
lines changed

4 files changed

+34
-3
lines changed

src/shared/helpers.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,16 @@ export const filterObjectByKeys = (obj: any, includeKeyPatterns: string[]) => {
5151

5252
return result;
5353
};
54+
55+
export const determineComponentNameDuringEvent = (options: Record<string, unknown>): string => {
56+
const result: string = <string>options?.name ?? 'unknown';
57+
let filename: string = <string>options?.__file ?? 'src/unknown.js';
58+
59+
if (result.length && result !== 'unknown') {
60+
return result;
61+
}
62+
63+
filename = filename.split('/').pop() ?? 'unknown.js';
64+
65+
return filename.replace(/\.[\w-_]+$/, '');
66+
};

src/v2/Vue2RayMixin.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* eslint-disable no-undef */
22
// @ts-nocheck
33
import { VueRay as Vue2Ray } from '../shared/VueRay';
4+
import { determineComponentNameDuringEvent } from '../shared/helpers';
45

56
const conditionallyDisplayEvent = (eventName: string, options: Record<string, unknown>, rayInstance: any = null) => {
67
if (Vue2Ray.shouldDisplayEvent(eventName)) {
@@ -11,8 +12,10 @@ const conditionallyDisplayEvent = (eventName: string, options: Record<string, un
1112
return;
1213
}
1314

15+
const componentName: string = determineComponentNameDuringEvent(options);
16+
1417
rayInstance().table([
15-
`component ${eventName}: <code>${options?.name ?? 'unknown'}</code>`,
18+
`component ${eventName}: <code>${componentName}</code>`,
1619
`filename: <code>&lt;project root&gt;/${options?.__file ?? 'unknown.js'}</code>`,
1720
]);
1821
}

src/v3/Vue3RayMixin.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// @ts-nocheck
22
import { VueRay } from '../shared/VueRay';
3+
import { determineComponentNameDuringEvent } from '../shared/helpers';
34

45
export let vue3Watch = null;
56

@@ -12,8 +13,10 @@ const conditionallyDisplayEvent = (eventName: string, options: Record<string, un
1213
return;
1314
}
1415

16+
const componentName: string = determineComponentNameDuringEvent(options);
17+
1518
rayInstance().table([
16-
`component ${eventName}: <code>${options?.name ?? 'unknown'}</code>`,
19+
`component ${eventName}: <code>${componentName}</code>`,
1720
`filename: <code>&lt;project root&gt;/${options?.__file ?? 'unknown.js'}</code>`,
1821
]);
1922
}

tests/shared/helpers.test.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
/* eslint-disable no-undef */
22

3-
import { createPackageMetaProperty, encodeHtmlEntities, matchPattern } from '../../src/shared/helpers';
3+
import {
4+
createPackageMetaProperty,
5+
determineComponentNameDuringEvent,
6+
encodeHtmlEntities,
7+
matchPattern,
8+
} from '../../src/shared/helpers';
49

510
it('creates a package meta property', () => {
611
const obj: any = { $rayMeta: null };
@@ -21,3 +26,10 @@ it('matches patterns', () => {
2126
expect(matchPattern('test', ['*t', 't*a'])).toBeTruthy();
2227
expect(matchPattern('test', ['x*', 'a*'])).toBeFalsy();
2328
});
29+
30+
it('gets component names during events', () => {
31+
expect(determineComponentNameDuringEvent({ name: 'Test', __file: '/project/src/HelloWorld.vue' })).toBe('Test');
32+
expect(determineComponentNameDuringEvent({ name: 'unknown', __file: '/project/src/HelloWorld.vue' })).toBe('HelloWorld');
33+
expect(determineComponentNameDuringEvent({ __file: '/project/src/components/HelloWorld.vue' })).toBe('HelloWorld');
34+
expect(determineComponentNameDuringEvent({})).toBe('unknown');
35+
});

0 commit comments

Comments
 (0)