@lwc/engine-core 3.8.0 → 4.0.0

package/dist/index.js

@@ -1,8 +1,7 @@
 /**
  * Copyright (C) 2023 salesforce.com, inc.
  */
-import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, ArrayIndexOf, ArraySplice, create, seal, isArray as isArray$1, isFunction as isFunction$1, keys, hasOwnProperty as hasOwnProperty$1, globalThis as globalThis$1, forEach, AriaPropNameToAttrNameMap, getPropertyDescriptor, defineProperties, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, isObject, freeze, KEY__SYNTHETIC_MODE, isString, assert, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, isFalse, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyNames as getOwnPropertyNames$1, getOwnPropertyDescriptors, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, kebabCaseToCamelCase, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, StringSlice, ArrayShift, ArrayUnshift, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, ArrayPop, isNumber, StringReplace, LOWEST_API_VERSION, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, ArrayFilter, StringSplit, arrayEvery, ArrayIncludes, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse } from '@lwc/shared';
-import { applyAriaReflection } from '@lwc/aria-reflection';
+import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, ArrayIndexOf, ArraySplice, create, seal, isArray as isArray$1, isFunction as isFunction$1, keys, hasOwnProperty as hasOwnProperty$1, globalThis as globalThis$1, AriaPropNameToAttrNameMap, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, forEach, getPropertyDescriptor, defineProperties, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, isObject, freeze, KEY__SYNTHETIC_MODE, isString, assert, toString as toString$1, isFalse, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyNames as getOwnPropertyNames$1, getOwnPropertyDescriptors, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, kebabCaseToCamelCase, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, StringSlice, ArrayShift, ArrayUnshift, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, ArrayPop, isAPIFeatureEnabled, isNumber, StringReplace, LOWEST_API_VERSION, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, ArrayFilter, StringSplit, arrayEvery, ArrayIncludes, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse } from '@lwc/shared';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
 
 /*
@@ -415,6 +414,45 @@ var _a, _b;
 const instrumentDef = (_a = globalThis$1.__lwc_instrument_cmp_def) !== null && _a !== void 0 ? _a : noop;
 const instrumentInstance = (_b = globalThis$1.__lwc_instrument_cmp_instance) !== null && _b !== void 0 ? _b : noop;
 
+/*
+ * 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
+ */
+// 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 keys(AriaPropNameToAttrNameMap)) {
+        const attrName = AriaPropNameToAttrNameMap[propName];
+        if (isUndefined$1(getOwnPropertyDescriptor$1(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.
+            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 (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.
  * All rights reserved.
@@ -1799,15 +1837,10 @@ for (const propName in HTMLElementOriginalDescriptors) {
     lightningBasedDescriptors[propName] = createBridgeToElementDescriptor(propName, HTMLElementOriginalDescriptors[propName]);
 }
 defineProperties(LightningElement.prototype, lightningBasedDescriptors);
-function applyAriaReflectionToLightningElement() {
-    // If ARIA reflection is not applied globally to Element.prototype, or if we are running server-side,
-    // apply it to LightningElement.prototype.
-    // This allows `this.aria*` property accessors to work from inside a component, and to reflect `aria-*` attrs.
-    applyAriaReflection(LightningElement.prototype);
-}
-if (!process.env.IS_BROWSER || lwcRuntimeFlags.DISABLE_ARIA_REFLECTION_POLYFILL) {
-    applyAriaReflectionToLightningElement();
-}
+// 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);
 defineProperty(LightningElement, 'CustomElementConstructor', {
     get() {
         // If required, a runtime-specific implementation must be defined.
@@ -2732,15 +2765,15 @@ 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
-    if (lwcRuntimeFlags.DISABLE_ARIA_REFLECTION_POLYFILL) {
-        // If ARIA reflection is not applied globally to Element.prototype, apply it 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
-        //
-        // Also note that we apply this to BaseBridgeElement.prototype to avoid excessively redefining property
-        // accessors inside the HTMLBridgeElementFactory.
-        applyAriaReflection(BaseBridgeElement.prototype);
-    }
+    //
+    // 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);
 }
 freeze(BaseBridgeElement);
 seal(BaseBridgeElement.prototype);
@@ -4792,10 +4825,16 @@ function s(slotName, data, children, slotset) {
         children = newChildren;
     }
     const vmBeingRendered = getVMBeingRendered();
-    const { renderMode, shadowMode } = vmBeingRendered;
+    const { renderMode, shadowMode, apiVersion } = vmBeingRendered;
     if (renderMode === 0 /* RenderMode.Light */) {
-        sc(children);
-        return children;
+        // light DOM slots - backwards-compatible behavior uses flattening, new behavior uses fragments
+        if (isAPIFeatureEnabled(2 /* APIFeature.USE_FRAGMENTS_FOR_LIGHT_DOM_SLOTS */, apiVersion)) {
+            return fr(data.key, children, 0);
+        }
+        else {
+            sc(children);
+            return children;
+        }
     }
     if (shadowMode === 1 /* ShadowMode.Synthetic */) {
         // TODO [#1276]: compiler should give us some sort of indicator when a vnodes collection is dynamic
@@ -5706,6 +5745,7 @@ function getNearestShadowAncestor(owner) {
 function createVM(elm, ctor, renderer, options) {
     const { mode, owner, tagName, hydrated } = options;
     const def = getComponentInternalDef(ctor);
+    const apiVersion = getComponentAPIVersion(ctor);
     const vm = {
         elm,
         def,
@@ -5751,6 +5791,7 @@ function createVM(elm, ctor, renderer, options) {
         setHook,
         getHook,
         renderer,
+        apiVersion,
     };
     if (process.env.NODE_ENV !== 'production') {
         vm.debugInfo = create(null);
@@ -6386,10 +6427,11 @@ const NON_STANDARD_ARIA_PROPS = [
     'ariaLabelledBy',
     'ariaOwns',
 ];
-function isLightningElement(elm) {
-    // The former case is for `this.prop` (inside component) and the latter is for `element.prop` (outside component).
-    // In both cases, we apply the non-standard prop even when the global polyfill is disabled, so this is kosher.
-    return elm instanceof LightningElement || elm instanceof BaseBridgeElement;
+function isGlobalAriaPolyfillLoaded() {
+    // Sniff for the legacy polyfill being loaded. The reason this works is because ariaActiveDescendant is a
+    // non-standard ARIA property reflection that is only supported in our legacy polyfill. See
+    // @lwc/aria-reflection/README.md for details.
+    return !isUndefined$1(getOwnPropertyDescriptor$1(Element.prototype, 'ariaActiveDescendant'));
 }
 function findVM(elm) {
     // If it's a shadow DOM component, then it has a host
@@ -6401,7 +6443,8 @@ function findVM(elm) {
     // Else it might be a light DOM component. Walk up the tree trying to find the owner
     let parentElement = elm;
     while (!isNull((parentElement = parentElement.parentElement))) {
-        if (isLightningElement(parentElement)) {
+        if (parentElement instanceof BaseBridgeElement) {
+            // parentElement is an LWC component
             const vm = getAssociatedVMIfPresent(parentElement);
             if (!isUndefined$1(vm)) {
                 return vm;
@@ -6411,28 +6454,26 @@ function findVM(elm) {
     // If we return undefined, it's because the element was rendered wholly outside a LightningElement
 }
 function checkAndReportViolation(elm, prop, isSetter, setValue) {
-    if (!isLightningElement(elm)) {
-        const vm = findVM(elm);
-        if (process.env.NODE_ENV !== 'production') {
-            logWarnOnce(`Element <${elm.tagName.toLowerCase()}> ` +
-                (isUndefined$1(vm) ? '' : `owned by <${vm.elm.tagName.toLowerCase()}> `) +
-                `uses non-standard property "${prop}". This will be removed in a future version of LWC. ` +
-                `See https://sfdc.co/deprecated-aria`);
-        }
-        let setValueType;
-        if (isSetter) {
-            // `typeof null` is "object" which is not very useful for detecting null.
-            // We mostly want to know null vs undefined vs other types here, due to
-            // https://github.com/salesforce/lwc/issues/3284
-            setValueType = isNull(setValue) ? 'null' : typeof setValue;
-        }
-        report("NonStandardAriaReflection" /* ReportingEventId.NonStandardAriaReflection */, {
-            tagName: vm === null || vm === void 0 ? void 0 : vm.tagName,
-            propertyName: prop,
-            isSetter,
-            setValueType,
-        });
-    }
+    const vm = findVM(elm);
+    if (process.env.NODE_ENV !== 'production') {
+        logWarnOnce(`Element <${elm.tagName.toLowerCase()}> ` +
+            (isUndefined$1(vm) ? '' : `owned by <${vm.elm.tagName.toLowerCase()}> `) +
+            `uses non-standard property "${prop}". This will be removed in a future version of LWC. ` +
+            `See https://sfdc.co/deprecated-aria`);
+    }
+    let setValueType;
+    if (isSetter) {
+        // `typeof null` is "object" which is not very useful for detecting null.
+        // We mostly want to know null vs undefined vs other types here, due to
+        // https://github.com/salesforce/lwc/issues/3284
+        setValueType = isNull(setValue) ? 'null' : typeof setValue;
+    }
+    report("NonStandardAriaReflection" /* ReportingEventId.NonStandardAriaReflection */, {
+        tagName: vm === null || vm === void 0 ? void 0 : vm.tagName,
+        propertyName: prop,
+        isSetter,
+        setValueType,
+    });
 }
 function enableDetection() {
     const { prototype } = Element;
@@ -6451,6 +6492,9 @@ function enableDetection() {
         }
         // @ts-ignore
         const { get, set } = descriptor;
+        // It's important for this defineProperty call to happen _after_ ARIA accessors are applied to the
+        // BaseBridgeElement and LightningElement prototypes. Otherwise, we will log/report for access of non-standard
+        // props on these prototypes, which we actually don't want. We only care about access on generic HTMLElements.
         defineProperty(prototype, prop, {
             get() {
                 checkAndReportViolation(this, prop, false, undefined);
@@ -6466,16 +6510,14 @@ function enableDetection() {
     }
 }
 // No point in running this code if we're not in a browser, or if the global polyfill is not loaded
-if (process.env.IS_BROWSER) {
-    if (!lwcRuntimeFlags.DISABLE_ARIA_REFLECTION_POLYFILL) {
-        // Always run detection in dev mode, so we can at least print to the console
-        if (process.env.NODE_ENV !== 'production') {
-            enableDetection();
-        }
-        else {
-            // In prod mode, only enable detection if reporting is enabled
-            onReportingEnabled(enableDetection);
-        }
+if (process.env.IS_BROWSER && isGlobalAriaPolyfillLoaded()) {
+    // Always run detection in dev mode, so we can at least print to the console
+    if (process.env.NODE_ENV !== 'production') {
+        enableDetection();
+    }
+    else {
+        // In prod mode, only enable detection if reporting is enabled
+        onReportingEnabled(enableDetection);
     }
 }
 
@@ -7225,5 +7267,5 @@ function readonly(obj) {
 }
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, reportingControl as __unstable__ReportingControl, api$1 as api, computeShadowAndRenderMode, connectRootElement, createContextProviderWithRegister, createVM, disconnectRootElement, freezeTemplate, getAssociatedVMIfPresent, getComponentAPIVersion, getComponentConstructor, getComponentDef, getComponentHtmlPrototype, hydrateRoot, isComponentConstructor, parseFragment, parseSVGFragment, readonly, registerComponent, registerDecorators, registerTemplate, runFormAssociatedCallback, runFormDisabledCallback, runFormResetCallback, runFormStateRestoreCallback, sanitizeAttribute, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/** version: 3.8.0 */
+/** version: 4.0.0 */
 //# sourceMappingURL=index.js.map