From 72c8c093f5479b45716302ddc65e95706247ede0 Mon Sep 17 00:00:00 2001 From: Jason Ye <40873183+jye-sf@users.noreply.github.com> Date: Wed, 7 Feb 2024 10:57:20 -0800 Subject: [PATCH] feat: add reporting for shadowSupportMode (#3980) * feat: add reporting for shadowSupportMode --- .../@lwc/engine-core/src/framework/def.ts | 12 ++++ .../engine-core/src/framework/reporting.ts | 10 ++- .../shadowSupportModeReporting/index.spec.js | 66 +++++++++++++++++++ .../shadowSupportModeReporting/x/any/any.js | 5 ++ .../x/native/native.js | 5 ++ .../shadowSupportModeReporting/x/none/none.js | 3 + .../x/reset/reset.js | 5 ++ 7 files changed, 105 insertions(+), 1 deletion(-) create mode 100644 packages/@lwc/integration-karma/test/mixed-shadow-mode/shadowSupportModeReporting/index.spec.js create mode 100644 packages/@lwc/integration-karma/test/mixed-shadow-mode/shadowSupportModeReporting/x/any/any.js create mode 100644 packages/@lwc/integration-karma/test/mixed-shadow-mode/shadowSupportModeReporting/x/native/native.js create mode 100644 packages/@lwc/integration-karma/test/mixed-shadow-mode/shadowSupportModeReporting/x/none/none.js create mode 100644 packages/@lwc/integration-karma/test/mixed-shadow-mode/shadowSupportModeReporting/x/reset/reset.js diff --git a/packages/@lwc/engine-core/src/framework/def.ts b/packages/@lwc/engine-core/src/framework/def.ts index 1e3d2f1e5b..6d1b333abc 100644 --- a/packages/@lwc/engine-core/src/framework/def.ts +++ b/packages/@lwc/engine-core/src/framework/def.ts @@ -48,6 +48,7 @@ import { HTMLElementConstructor, } from './base-bridge-element'; import { getComponentOrSwappedComponent } from './hot-swaps'; +import { isReportingEnabled, report, ReportingEventId } from './reporting'; export interface ComponentDef { name: string; @@ -198,6 +199,17 @@ function createComponentDef(Ctor: LightningElementConstructor): ComponentDef { let shadowSupportMode = superDef.shadowSupportMode; if (!isUndefined(ctorShadowSupportMode)) { shadowSupportMode = ctorShadowSupportMode; + + if ( + isReportingEnabled() && + (shadowSupportMode === ShadowSupportMode.Any || + shadowSupportMode === ShadowSupportMode.Native) + ) { + report(ReportingEventId.ShadowSupportModeUsage, { + tagName: Ctor.name, + mode: shadowSupportMode, + }); + } } let renderMode = superDef.renderMode; diff --git a/packages/@lwc/engine-core/src/framework/reporting.ts b/packages/@lwc/engine-core/src/framework/reporting.ts index b888e88dd1..c70a13386c 100644 --- a/packages/@lwc/engine-core/src/framework/reporting.ts +++ b/packages/@lwc/engine-core/src/framework/reporting.ts @@ -6,7 +6,7 @@ */ import { noop } from '@lwc/shared'; -import { ShadowMode } from './vm'; +import { ShadowMode, ShadowSupportMode } from './vm'; export const enum ReportingEventId { CrossRootAriaInSyntheticShadow = 'CrossRootAriaInSyntheticShadow', @@ -16,6 +16,7 @@ export const enum ReportingEventId { StylesheetMutation = 'StylesheetMutation', ConnectedCallbackWhileDisconnected = 'ConnectedCallbackWhileDisconnected', ShadowModeUsage = 'ShadowModeUsage', + ShadowSupportModeUsage = 'ShadowSupportModeUsage', } export interface BasePayload { @@ -51,6 +52,12 @@ export interface ShadowModeUsagePayload extends BasePayload { mode: ShadowMode; } +// TODO [#3981]: Add schema to o11y schema repo so that we can use 'ctorName' or 'name' +// instead of overloading 'tagName'. +export interface ShadowSupportModeUsagePayload extends BasePayload { + mode: ShadowSupportMode; +} + export type ReportingPayloadMapping = { [ReportingEventId.CrossRootAriaInSyntheticShadow]: CrossRootAriaInSyntheticShadowPayload; [ReportingEventId.CompilerRuntimeVersionMismatch]: CompilerRuntimeVersionMismatchPayload; @@ -59,6 +66,7 @@ export type ReportingPayloadMapping = { [ReportingEventId.StylesheetMutation]: StylesheetMutationPayload; [ReportingEventId.ConnectedCallbackWhileDisconnected]: ConnectedCallbackWhileDisconnectedPayload; [ReportingEventId.ShadowModeUsage]: ShadowModeUsagePayload; + [ReportingEventId.ShadowSupportModeUsage]: ShadowSupportModeUsagePayload; }; export type ReportingDispatcher = ( diff --git a/packages/@lwc/integration-karma/test/mixed-shadow-mode/shadowSupportModeReporting/index.spec.js b/packages/@lwc/integration-karma/test/mixed-shadow-mode/shadowSupportModeReporting/index.spec.js new file mode 100644 index 0000000000..6b19533d9f --- /dev/null +++ b/packages/@lwc/integration-karma/test/mixed-shadow-mode/shadowSupportModeReporting/index.spec.js @@ -0,0 +1,66 @@ +import { createElement } from 'lwc'; +import { attachReportingControlDispatcher, detachReportingControlDispatcher } from 'test-utils'; + +import Any from 'x/any'; +import Reset from 'x/reset'; +import None from 'x/none'; +import NativeOnly from 'x/native'; + +// Should be kept in sync with the enum in vm.ts +const ShadowSupportMode = { + Any: 'any', + Default: 'reset', + Native: 'native', +}; + +/** + * These tests must be the first ones to generate the component def for the components they use. + * This is because subsequent calls to create the component will use the cached ctor rather than + * recreating the entire def. We only report on that initial def creation for perf reasons. + */ +describe('shadow support mode reporting', () => { + let dispatcher; + + beforeEach(() => { + dispatcher = jasmine.createSpy(); + attachReportingControlDispatcher(dispatcher, ['ShadowSupportModeUsage']); + }); + + afterEach(() => { + detachReportingControlDispatcher(); + }); + + it('should report use of value "any"', () => { + expect(() => { + createElement('x-any', { is: Any }); + }).toLogWarningDev(/Invalid value 'any' for static property shadowSupportMode/); + + expect(dispatcher).toHaveBeenCalledTimes(1); + expect(dispatcher).toHaveBeenCalledWith('ShadowSupportModeUsage', { + tagName: Any.name, + mode: ShadowSupportMode.Any, + }); + }); + + it('should report use of value "native"', () => { + createElement('x-native', { is: NativeOnly }); + + expect(dispatcher).toHaveBeenCalledTimes(1); + expect(dispatcher).toHaveBeenCalledWith('ShadowSupportModeUsage', { + tagName: NativeOnly.name, + mode: ShadowSupportMode.Native, + }); + }); + + it('should not report use of value "reset"', () => { + createElement('x-reset', { is: Reset }); + + expect(dispatcher).toHaveBeenCalledTimes(0); + }); + + it('should not report when no value is provided', () => { + createElement('x-none', { is: None }); + + expect(dispatcher).toHaveBeenCalledTimes(0); + }); +}); diff --git a/packages/@lwc/integration-karma/test/mixed-shadow-mode/shadowSupportModeReporting/x/any/any.js b/packages/@lwc/integration-karma/test/mixed-shadow-mode/shadowSupportModeReporting/x/any/any.js new file mode 100644 index 0000000000..693f9545a9 --- /dev/null +++ b/packages/@lwc/integration-karma/test/mixed-shadow-mode/shadowSupportModeReporting/x/any/any.js @@ -0,0 +1,5 @@ +import { LightningElement } from 'lwc'; + +export default class Any extends LightningElement { + static shadowSupportMode = 'any'; +} diff --git a/packages/@lwc/integration-karma/test/mixed-shadow-mode/shadowSupportModeReporting/x/native/native.js b/packages/@lwc/integration-karma/test/mixed-shadow-mode/shadowSupportModeReporting/x/native/native.js new file mode 100644 index 0000000000..9397b74759 --- /dev/null +++ b/packages/@lwc/integration-karma/test/mixed-shadow-mode/shadowSupportModeReporting/x/native/native.js @@ -0,0 +1,5 @@ +import { LightningElement } from 'lwc'; + +export default class Native extends LightningElement { + static shadowSupportMode = 'native'; +} diff --git a/packages/@lwc/integration-karma/test/mixed-shadow-mode/shadowSupportModeReporting/x/none/none.js b/packages/@lwc/integration-karma/test/mixed-shadow-mode/shadowSupportModeReporting/x/none/none.js new file mode 100644 index 0000000000..f5c9723728 --- /dev/null +++ b/packages/@lwc/integration-karma/test/mixed-shadow-mode/shadowSupportModeReporting/x/none/none.js @@ -0,0 +1,3 @@ +import { LightningElement } from 'lwc'; + +export default class None extends LightningElement {} diff --git a/packages/@lwc/integration-karma/test/mixed-shadow-mode/shadowSupportModeReporting/x/reset/reset.js b/packages/@lwc/integration-karma/test/mixed-shadow-mode/shadowSupportModeReporting/x/reset/reset.js new file mode 100644 index 0000000000..3f5a2ec048 --- /dev/null +++ b/packages/@lwc/integration-karma/test/mixed-shadow-mode/shadowSupportModeReporting/x/reset/reset.js @@ -0,0 +1,5 @@ +import { LightningElement } from 'lwc'; + +export default class Reset extends LightningElement { + static shadowSupportMode = 'reset'; +}