feat: log shadow mode through engine reporting API

packages/@lwc/engine-core/src/framework/reporting.ts

@@ -6,13 +6,16 @@
  */
 import { noop } from '@lwc/shared';
 
+import { ShadowMode } from './vm';
+
 export const enum ReportingEventId {
     CrossRootAriaInSyntheticShadow = 'CrossRootAriaInSyntheticShadow',
     CompilerRuntimeVersionMismatch = 'CompilerRuntimeVersionMismatch',
     NonStandardAriaReflection = 'NonStandardAriaReflection',
     TemplateMutation = 'TemplateMutation',
     StylesheetMutation = 'StylesheetMutation',
     ConnectedCallbackWhileDisconnected = 'ConnectedCallbackWhileDisconnected',
+    ShadowModeUsage = 'ShadowModeUsage',
 }
 
 export interface BasePayload {
@@ -44,13 +47,18 @@ export interface StylesheetMutationPayload extends BasePayload {
 
 export interface ConnectedCallbackWhileDisconnectedPayload extends BasePayload {}
 
+export interface ShadowModeUsagePayload extends BasePayload {
+    mode: ShadowMode;
+}
+
 export type ReportingPayloadMapping = {
     [ReportingEventId.CrossRootAriaInSyntheticShadow]: CrossRootAriaInSyntheticShadowPayload;
     [ReportingEventId.CompilerRuntimeVersionMismatch]: CompilerRuntimeVersionMismatchPayload;
     [ReportingEventId.NonStandardAriaReflection]: NonStandardAriaReflectionPayload;
     [ReportingEventId.TemplateMutation]: TemplateMutationPayload;
     [ReportingEventId.StylesheetMutation]: StylesheetMutationPayload;
     [ReportingEventId.ConnectedCallbackWhileDisconnected]: ConnectedCallbackWhileDisconnectedPayload;
+    [ReportingEventId.ShadowModeUsage]: ShadowModeUsagePayload;
 };
 
 export type ReportingDispatcher<T extends ReportingEventId = ReportingEventId> = (

packages/@lwc/engine-core/src/framework/vm.ts

@@ -376,6 +376,14 @@ export function createVM<HostNode, HostElement>(
     vm.shadowMode = computeShadowMode(def, vm.owner, renderer);
     vm.tro = getTemplateReactiveObserver(vm);
 
+    // We don't need to report the shadow mode if we're rendering in light DOM
+    if (isReportingEnabled() && vm.renderMode === RenderMode.Shadow) {
+        report(ReportingEventId.ShadowModeUsage, {
+            tagName: vm.tagName,
+            mode: vm.shadowMode,
+        });
+    }
+
     if (process.env.NODE_ENV !== 'production') {
         vm.toString = (): string => {
             return `[object:vm ${def.name} (${vm.idx})]`;

packages/@lwc/integration-karma/helpers/test-utils.js

@@ -345,6 +345,23 @@ window.TestUtils = (function (lwc, jasmine, beforeAll) {
         jasmine.addMatchers(customMatchers);
     });
 
+    /**
+     *
+     * @param {jasmine.Spy} dispatcher
+     * @param {String[]} runtimeEvents List of runtime events to filter by. If no list is provided, all events will be dispatched.
+     */
+    function attachReportingControlDispatcher(dispatcher, runtimeEvents) {
+        lwc.__unstable__ReportingControl.attachDispatcher((eventName, payload) => {
+            if (!runtimeEvents || runtimeEvents.includes(eventName)) {
+                dispatcher(eventName, payload);
+            }
+        });
+    }
+
+    function detachReportingControlDispatcher() {
+        lwc.__unstable__ReportingControl.detachDispatcher();
+    }
+
     function extractDataIds(root) {
         var nodes = {};
 
@@ -566,5 +583,7 @@ window.TestUtils = (function (lwc, jasmine, beforeAll) {
         nonStandardAriaProperties: nonStandardAriaProperties,
         nonPolyfilledAriaProperties: nonPolyfilledAriaProperties,
         getPropertyDescriptor: getPropertyDescriptor,
+        attachReportingControlDispatcher: attachReportingControlDispatcher,
+        detachReportingControlDispatcher: detachReportingControlDispatcher,
     };
 })(LWC, jasmine, beforeAll);

packages/@lwc/integration-karma/test/accessibility/non-standard-aria-props/index.spec.js

@@ -1,5 +1,9 @@
-import { createElement, __unstable__ReportingControl as reportingControl } from 'lwc';
-import { nonStandardAriaProperties } from 'test-utils';
+import { createElement } from 'lwc';
+import {
+    attachReportingControlDispatcher,
+    detachReportingControlDispatcher,
+    nonStandardAriaProperties,
+} from 'test-utils';
 import Light from 'x/light';
 import Shadow from 'x/shadow';
 
@@ -10,11 +14,11 @@ if (process.env.ENABLE_ARIA_REFLECTION_GLOBAL_POLYFILL) {
 
         beforeEach(() => {
             dispatcher = jasmine.createSpy();
-            reportingControl.attachDispatcher(dispatcher);
+            attachReportingControlDispatcher(dispatcher, ['NonStandardAriaReflection']);
         });
 
         afterEach(() => {
-            reportingControl.detachDispatcher();
+            detachReportingControlDispatcher();
         });
 
         nonStandardAriaProperties.forEach((prop) => {
@@ -61,7 +65,6 @@ if (process.env.ENABLE_ARIA_REFLECTION_GLOBAL_POLYFILL) {
                                 elm.getPropOnElement(prop);
                             }).toLogWarningDev(inComponentWarning);
 
-                            expect(dispatcher).toHaveBeenCalledTimes(2);
                             expect(dispatcher.calls.allArgs()).toEqual([
                                 [
                                     'NonStandardAriaReflection',
@@ -93,7 +96,6 @@ if (process.env.ENABLE_ARIA_REFLECTION_GLOBAL_POLYFILL) {
                                 return unused; // remove lint warning
                             }).toLogWarningDev(outsideComponentWarning);
 
-                            expect(dispatcher).toHaveBeenCalledTimes(2);
                             expect(dispatcher.calls.allArgs()).toEqual([
                                 [
                                     'NonStandardAriaReflection',

packages/@lwc/integration-karma/test/accessibility/synthetic-cross-root-aria/index.spec.js

@@ -1,4 +1,6 @@
-import { createElement, __unstable__ReportingControl as reportingControl } from 'lwc';
+import { createElement } from 'lwc';
+import { attachReportingControlDispatcher, detachReportingControlDispatcher } from 'test-utils';
+
 import AriaContainer from 'x/ariaContainer';
 import Valid from 'x/valid';
 
@@ -18,11 +20,14 @@ if (!process.env.NATIVE_SHADOW) {
 
         beforeEach(() => {
             dispatcher = jasmine.createSpy();
-            reportingControl.attachDispatcher(dispatcher);
+            attachReportingControlDispatcher(dispatcher, [
+                'CrossRootAriaInSyntheticShadow',
+                'NonStandardAriaReflection',
+            ]);
         });
 
         afterEach(() => {
-            reportingControl.detachDispatcher();
+            detachReportingControlDispatcher();
         });
 
         describe('detection', () => {
@@ -150,44 +155,45 @@ if (!process.env.NATIVE_SHADOW) {
                             expectWarningForNonStandardPropertyAccess(() => {
                                 sourceElm.setAriaLabelledBy(value);
                             });
-                            expect(dispatcher.calls.allArgs()).toEqual([
-                                ...(usePropertyAccess
-                                    ? [
-                                          [
-                                              'NonStandardAriaReflection',
-                                              {
-                                                  tagName: 'x-aria-source',
-                                                  propertyName: 'ariaLabelledBy',
-                                                  isSetter: true,
-                                                  setValueType:
-                                                      value === null ? 'null' : typeof value,
-                                              },
-                                          ],
-                                      ]
-                                    : []),
-                            ]);
+
+                            if (usePropertyAccess) {
+                                expect(dispatcher.calls.allArgs()).toEqual([
+                                    [
+                                        'NonStandardAriaReflection',
+                                        {
+                                            tagName: 'x-aria-source',
+                                            propertyName: 'ariaLabelledBy',
+                                            isSetter: true,
+                                            setValueType: value === null ? 'null' : typeof value,
+                                        },
+                                    ],
+                                ]);
+                            } else {
+                                expect(dispatcher).not.toHaveBeenCalled();
+                            }
                         });
                     });
 
                     it('ignores id that references nonexistent element', () => {
                         expectWarningForNonStandardPropertyAccess(() => {
                             sourceElm.setAriaLabelledBy('does-not-exist-at-all-lol');
                         });
-                        expect(dispatcher.calls.allArgs()).toEqual([
-                            ...(usePropertyAccess
-                                ? [
-                                      [
-                                          'NonStandardAriaReflection',
-                                          {
-                                              tagName: 'x-aria-source',
-                                              propertyName: 'ariaLabelledBy',
-                                              isSetter: true,
-                                              setValueType: 'string',
-                                          },
-                                      ],
-                                  ]
-                                : []),
-                        ]);
+
+                        if (usePropertyAccess) {
+                            expect(dispatcher.calls.allArgs()).toEqual([
+                                [
+                                    'NonStandardAriaReflection',
+                                    {
+                                        tagName: 'x-aria-source',
+                                        propertyName: 'ariaLabelledBy',
+                                        isSetter: true,
+                                        setValueType: 'string',
+                                    },
+                                ],
+                            ]);
+                        } else {
+                            expect(dispatcher).not.toHaveBeenCalled();
+                        }
                     });
 
                     [
@@ -215,6 +221,7 @@ if (!process.env.NATIVE_SHADOW) {
                                     ...expectedMessages,
                                     expectedMessageForCrossRootForSecondTarget,
                                 ]);
+
                                 expect(dispatcher.calls.allArgs()).toEqual([
                                     ...getExpectedDispatcherCalls(true),
                                     [
@@ -269,6 +276,7 @@ if (!process.env.NATIVE_SHADOW) {
                     const valid = createElement('x-valid', { is: Valid });
                     document.body.appendChild(valid);
                     valid.linkElements({ reverseOrder });
+
                     expect(dispatcher).not.toHaveBeenCalled();
                 });
             });

packages/@lwc/integration-karma/test/api/freezeTemplate/index.spec.js

@@ -1,20 +1,17 @@
-import {
-    registerTemplate,
-    freezeTemplate,
-    setFeatureFlagForTest,
-    __unstable__ReportingControl as reportingControl,
-} from 'lwc';
+import { registerTemplate, freezeTemplate, setFeatureFlagForTest } from 'lwc';
+
+import { attachReportingControlDispatcher, detachReportingControlDispatcher } from 'test-utils';
 
 describe('freezeTemplate', () => {
     let dispatcher;
 
     beforeEach(() => {
         dispatcher = jasmine.createSpy();
-        reportingControl.attachDispatcher(dispatcher);
+        attachReportingControlDispatcher(dispatcher, ['StylesheetMutation', 'TemplateMutation']);
     });
 
     afterEach(() => {
-        reportingControl.detachDispatcher();
+        detachReportingControlDispatcher();
     });
 
     it('should warn when setting tmpl.stylesheetToken', () => {

packages/@lwc/integration-karma/test/component/native-vs-synthetic-lifecycle/index.spec.js

@@ -1,4 +1,6 @@
-import { __unstable__ReportingControl as reportingControl, createElement } from 'lwc';
+import { createElement } from 'lwc';
+import { attachReportingControlDispatcher, detachReportingControlDispatcher } from 'test-utils';
+
 import Component from 'x/component';
 import Parent from 'x/parent';
 
@@ -9,12 +11,12 @@ if (!window.lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
 
         beforeEach(() => {
             dispatcher = jasmine.createSpy();
-            reportingControl.attachDispatcher(dispatcher);
+            attachReportingControlDispatcher(dispatcher, ['ConnectedCallbackWhileDisconnected']);
             logger = spyOn(console, 'warn');
         });
 
         afterEach(() => {
-            reportingControl.detachDispatcher();
+            detachReportingControlDispatcher();
         });
 
         function expectLogs(regexes) {

packages/@lwc/integration-karma/test/mixed-shadow-mode/reporting/index.spec.js

@@ -0,0 +1,89 @@
+import { createElement } from 'lwc';
+import { attachReportingControlDispatcher, detachReportingControlDispatcher } from 'test-utils';
+
+import Component from 'x/component';
+import Parent from 'x/parent';
+import Light from 'x/light';
+
+// Should be kept in sync with the enum in vm.ts
+const ShadowMode = {
+    Native: 0,
+    Synthetic: 1,
+};
+
+describe('ShadowModeUsage', () => {
+    let dispatcher;
+
+    beforeEach(() => {
+        dispatcher = jasmine.createSpy();
+        attachReportingControlDispatcher(dispatcher, ['ShadowModeUsage']);
+    });
+
+    afterEach(() => {
+        detachReportingControlDispatcher();
+    });
+
+    it('should report the shadow mode for the rendered component', () => {
+        const element = createElement('x-component', { is: Component });
+        document.body.appendChild(element);
+
+        expect(dispatcher).toHaveBeenCalledWith('ShadowModeUsage', {
+            tagName: 'x-component',
+            mode: process.env.NATIVE_SHADOW ? ShadowMode.Native : ShadowMode.Synthetic,
+        });
+    });
+
+    it('should report the shadow mode for all rendered components', () => {
+        const element = createElement('x-parent', { is: Parent });
+        document.body.appendChild(element);
+
+        expect(dispatcher).toHaveBeenCalledTimes(3);
+        // x-parent depends on environment
+        expect(dispatcher).toHaveBeenCalledWith('ShadowModeUsage', {
+            tagName: 'x-parent',
+            mode: process.env.NATIVE_SHADOW ? ShadowMode.Native : ShadowMode.Synthetic,
+        });
+        // x-native should be set to native always
+        expect(dispatcher).toHaveBeenCalledWith('ShadowModeUsage', {
+            tagName: 'x-native',
+            mode: ShadowMode.Native,
+        });
+        // x-component depends on environment
+        expect(dispatcher).toHaveBeenCalledWith('ShadowModeUsage', {
+            tagName: 'x-component',
+            mode: process.env.NATIVE_SHADOW ? ShadowMode.Native : ShadowMode.Synthetic,
+        });
+    });
+
+    it('should report the shadow mode for components when created using CustomElementConstructor', () => {
+        const ParentCustomElement = Parent.CustomElementConstructor;
+        customElements.define('x-parent-custom-element', ParentCustomElement);
+
+        const element = document.createElement('x-parent-custom-element');
+        document.body.appendChild(element);
+
+        expect(dispatcher).toHaveBeenCalledTimes(3);
+        // x-parent depends on environment
+        expect(dispatcher).toHaveBeenCalledWith('ShadowModeUsage', {
+            tagName: 'X-PARENT-CUSTOM-ELEMENT',
+            mode: process.env.NATIVE_SHADOW ? ShadowMode.Native : ShadowMode.Synthetic,
+        });
+        // x-native should be set to native always
+        expect(dispatcher).toHaveBeenCalledWith('ShadowModeUsage', {
+            tagName: 'x-native',
+            mode: ShadowMode.Native,
+        });
+        // x-component depends on environment
+        expect(dispatcher).toHaveBeenCalledWith('ShadowModeUsage', {
+            tagName: 'x-component',
+            mode: process.env.NATIVE_SHADOW ? ShadowMode.Native : ShadowMode.Synthetic,
+        });
+    });
+
+    it('should report no shadow mode for light DOM components', () => {
+        const element = createElement('x-light', { is: Light });
+        document.body.appendChild(element);
+
+        expect(dispatcher).toHaveBeenCalledTimes(0);
+    });
+});

packages/@lwc/integration-karma/test/mixed-shadow-mode/reporting/x/component/component.html

@@ -0,0 +1,3 @@
+<template>
+    <div>default component</div>
+</template>

packages/@lwc/integration-karma/test/mixed-shadow-mode/reporting/x/component/component.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {}

packages/@lwc/integration-karma/test/mixed-shadow-mode/reporting/x/light/light.html

@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+    <p>Hello, Light DOM</p>
+</template>