@lwc/engine-core 5.0.2 → 5.0.4

package/dist/framework/reporting.d.ts

@@ -1,10 +1,12 @@
+import { ShadowMode } from './vm';
 export declare const enum ReportingEventId {
     CrossRootAriaInSyntheticShadow = "CrossRootAriaInSyntheticShadow",
     CompilerRuntimeVersionMismatch = "CompilerRuntimeVersionMismatch",
     NonStandardAriaReflection = "NonStandardAriaReflection",
     TemplateMutation = "TemplateMutation",
     StylesheetMutation = "StylesheetMutation",
-    ConnectedCallbackWhileDisconnected = "ConnectedCallbackWhileDisconnected"
+    ConnectedCallbackWhileDisconnected = "ConnectedCallbackWhileDisconnected",
+    ShadowModeUsage = "ShadowModeUsage"
 }
 export interface BasePayload {
     tagName?: string;
@@ -29,6 +31,9 @@ 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;
@@ -36,6 +41,7 @@ export type ReportingPayloadMapping = {
     [ReportingEventId.TemplateMutation]: TemplateMutationPayload;
     [ReportingEventId.StylesheetMutation]: StylesheetMutationPayload;
     [ReportingEventId.ConnectedCallbackWhileDisconnected]: ConnectedCallbackWhileDisconnectedPayload;
+    [ReportingEventId.ShadowModeUsage]: ShadowModeUsagePayload;
 };
 export type ReportingDispatcher<T extends ReportingEventId = ReportingEventId> = (reportingEventId: T, payload: ReportingPayloadMapping[T]) => void;
 /** Callbacks to invoke when reporting is enabled **/

package/dist/index.cjs.js

@@ -425,54 +425,53 @@ const instrumentDef = (_a = shared.globalThis.__lwc_instrument_cmp_def) !== null
 const instrumentInstance = (_b = shared.globalThis.__lwc_instrument_cmp_instance) !== null && _b !== void 0 ? _b : shared.noop;
 
 /*
- * Copyright (c) 2023, salesforce.com, inc.
+ * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-// Apply ARIA string reflection behavior to a prototype.
-// This is deliberately kept separate from @lwc/aria-reflection. @lwc/aria-reflection is a global polyfill that is
-// needed for backwards compatibility in LEX, whereas `applyAriaReflection` is designed to only apply to our own
-// LightningElement/BaseBridgeElement prototypes.
-function applyAriaReflection(prototype) {
-    for (const propName of shared.keys(shared.AriaPropNameToAttrNameMap)) {
-        const attrName = shared.AriaPropNameToAttrNameMap[propName];
-        if (shared.isUndefined(shared.getOwnPropertyDescriptor(prototype, propName))) {
-            // Note that we need to call this.{get,set,has,remove}Attribute rather than dereferencing
-            // from Element.prototype, because these methods are overridden in LightningElement.
-            shared.defineProperty(prototype, propName, {
-                get() {
-                    return this.getAttribute(attrName);
-                },
-                set(newValue) {
-                    // TODO [#3284]: there is disagreement between browsers and the spec on how to treat undefined
-                    // Our historical behavior is to only treat null as removing the attribute
-                    // See also https://github.com/w3c/aria/issues/1858
-                    if (shared.isNull(newValue)) {
-                        this.removeAttribute(attrName);
-                    }
-                    else {
-                        this.setAttribute(attrName, newValue);
-                    }
-                },
-                // configurable and enumerable to allow it to be overridden – this mimics Safari's/Chrome's behavior
-                configurable: true,
-                enumerable: true,
-            });
-        }
-    }
-}
+// This is a temporary workaround to get the @lwc/engine-server to evaluate in node without having
+// to inject at runtime.
+const HTMLElementConstructor = typeof HTMLElement !== 'undefined' ? HTMLElement : function () { };
+const HTMLElementPrototype = HTMLElementConstructor.prototype;
 
 /*
- * Copyright (c) 2018, salesforce.com, inc.
+ * Copyright (c) 2023, salesforce.com, inc.
  * All rights reserved.
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-// This is a temporary workaround to get the @lwc/engine-server to evaluate in node without having
-// to inject at runtime.
-const HTMLElementConstructor = typeof HTMLElement !== 'undefined' ? HTMLElement : function () { };
-const HTMLElementPrototype = HTMLElementConstructor.prototype;
+// Apply ARIA string reflection behavior to a prototype.
+// This is deliberately kept separate from @lwc/aria-reflection. @lwc/aria-reflection is a global polyfill that is
+// needed for backwards compatibility in LEX, whereas this is designed to only apply to our own
+// LightningElement/BaseBridgeElement prototypes.
+// Note we only need to handle ARIA reflections that aren't already in Element.prototype
+const ariaReflectionPolyfillDescriptors = shared.create(null);
+for (const [propName, attrName] of shared.entries(shared.AriaPropNameToAttrNameMap)) {
+    if (shared.isUndefined(shared.getPropertyDescriptor(HTMLElementPrototype, propName))) {
+        // Note that we need to call this.{get,set,has,remove}Attribute rather than dereferencing
+        // from Element.prototype, because these methods are overridden in LightningElement.
+        ariaReflectionPolyfillDescriptors[propName] = {
+            get() {
+                return this.getAttribute(attrName);
+            },
+            set(newValue) {
+                // TODO [#3284]: there is disagreement between browsers and the spec on how to treat undefined
+                // Our historical behavior is to only treat null as removing the attribute
+                // See also https://github.com/w3c/aria/issues/1858
+                if (shared.isNull(newValue)) {
+                    this.removeAttribute(attrName);
+                }
+                else {
+                    this.setAttribute(attrName, newValue);
+                }
+            },
+            // configurable and enumerable to allow it to be overridden – this mimics Safari's/Chrome's behavior
+            configurable: true,
+            enumerable: true,
+        };
+    }
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -1846,11 +1845,22 @@ const lightningBasedDescriptors = shared.create(null);
 for (const propName in HTMLElementOriginalDescriptors) {
     lightningBasedDescriptors[propName] = createBridgeToElementDescriptor(propName, HTMLElementOriginalDescriptors[propName]);
 }
-shared.defineProperties(LightningElement.prototype, lightningBasedDescriptors);
 // Apply ARIA reflection to LightningElement.prototype, on both the browser and server.
 // This allows `this.aria*` property accessors to work from inside a component, and to reflect `aria-*` attrs.
 // Note this works regardless of whether the global ARIA reflection polyfill is applied or not.
-applyAriaReflection(LightningElement.prototype);
+if (process.env.IS_BROWSER) {
+    // In the browser, we use createBridgeToElementDescriptor, so we can get the normal reactivity lifecycle for
+    // aria* properties
+    for (const [propName, descriptor] of shared.entries(ariaReflectionPolyfillDescriptors)) {
+        lightningBasedDescriptors[propName] = createBridgeToElementDescriptor(propName, descriptor);
+    }
+}
+else {
+    // On the server, we cannot use createBridgeToElementDescriptor because getAttribute/setAttribute are
+    // not supported on HTMLElement. So apply the polyfill directly on top of LightningElement
+    shared.defineProperties(LightningElement.prototype, ariaReflectionPolyfillDescriptors);
+}
+shared.defineProperties(LightningElement.prototype, lightningBasedDescriptors);
 shared.defineProperty(LightningElement, 'CustomElementConstructor', {
     get() {
         // If required, a runtime-specific implementation must be defined.
@@ -2700,7 +2710,8 @@ function HTMLBridgeElementFactory(SuperClass, publicProperties, methods, observe
                 // and can break tooling that expects it to be iterable or defined, e.g. Jest:
                 // https://github.com/jestjs/jest/blob/b4c9587/packages/pretty-format/src/plugins/DOMElement.ts#L95
                 // It also doesn't make sense to override e.g. "constructor".
-                .filter((propName) => !(propName in HTMLElementPrototype)));
+                .filter((propName) => !(propName in HTMLElementPrototype) &&
+                !(propName in ariaReflectionPolyfillDescriptors)));
             for (const propName of nonPublicPropertiesToWarnOn) {
                 if (shared.ArrayIndexOf.call(publicProperties, propName) === -1) {
                     descriptors[propName] = createAccessorThatWarns(propName);
@@ -2770,21 +2781,22 @@ function HTMLBridgeElementFactory(SuperClass, publicProperties, methods, observe
     shared.defineProperties(HTMLBridgeElement.prototype, descriptors);
     return HTMLBridgeElement;
 }
-const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor, shared.getOwnPropertyNames(HTMLElementOriginalDescriptors), [], [], null, false);
-if (process.env.IS_BROWSER) {
-    // This ARIA reflection only really makes sense in the browser. On the server, there is no `renderedCallback()`,
-    // so you cannot do e.g. `this.template.querySelector('x-child').ariaBusy = 'true'`. So we don't need to expose
-    // ARIA props outside the LightningElement
-    //
-    // Apply ARIA reflection to HTMLBridgeElement.prototype. This allows `elm.aria*` property accessors to work from
-    // outside a component, and to reflect `aria-*` attrs. This is especially important because the template compiler
-    // compiles aria-* attrs on components to aria* props.
-    // Note this works regardless of whether the global ARIA reflection polyfill is applied or not.
-    //
-    // Also note that we apply this to BaseBridgeElement.prototype to avoid excessively redefining property
-    // accessors inside the HTMLBridgeElementFactory.
-    applyAriaReflection(BaseBridgeElement.prototype);
-}
+// We do some special handling of non-standard ARIA props like ariaLabelledBy as well as props without (as of this
+// writing) broad cross-browser support like ariaBrailleLabel. This is so the reflection works correctly and preserves
+// backwards compatibility with the previous global polyfill approach.
+//
+// The goal here is to expose `elm.aria*` property accessors to work from outside a component, and to reflect `aria-*`
+// attrs. This is especially important because the template compiler compiles aria-* attrs on components to aria* props.
+// Note this works regardless of whether the global ARIA reflection polyfill is applied or not.
+//
+// Also note this ARIA reflection only really makes sense in the browser. On the server, there is no
+// `renderedCallback()`, so you cannot do e.g. `this.template.querySelector('x-child').ariaBusy = 'true'`. So we don't
+// need to expose ARIA props outside the LightningElement
+const basePublicProperties = [
+    ...shared.getOwnPropertyNames(HTMLElementOriginalDescriptors),
+    ...(process.env.IS_BROWSER ? shared.getOwnPropertyNames(ariaReflectionPolyfillDescriptors) : []),
+];
+const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor, basePublicProperties, [], [], null, false);
 shared.freeze(BaseBridgeElement);
 shared.seal(BaseBridgeElement.prototype);
 
@@ -5810,6 +5822,13 @@ function createVM(elm, ctor, renderer, options) {
     vm.stylesheets = computeStylesheets(vm, def.ctor);
     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 === 1 /* RenderMode.Shadow */) {
+        report("ShadowModeUsage" /* ReportingEventId.ShadowModeUsage */, {
+            tagName: vm.tagName,
+            mode: vm.shadowMode,
+        });
+    }
     if (process.env.NODE_ENV !== 'production') {
         vm.toString = () => {
             return `[object:vm ${def.name} (${vm.idx})]`;
@@ -7352,5 +7371,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 5.0.2 */
+/** version: 5.0.4 */
 //# sourceMappingURL=index.cjs.js.map