@lwc/engine-core 3.1.2 → 4.0.0-alpha.0

package/dist/index.js

@@ -1,7 +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, assert, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, isFalse, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyNames as getOwnPropertyNames$1, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, kebabCaseToCamelCase, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, isString, StringSlice, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, ArrayPop, isNumber, StringReplace, ArrayUnshift, 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, ArrayShift } from '@lwc/shared';
+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, assert, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, isFalse, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyNames as getOwnPropertyNames$1, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, kebabCaseToCamelCase, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, isString, StringSlice, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, ArrayPop, isAPIFeatureEnabled, isNumber, StringReplace, ArrayUnshift, 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, ArrayShift } from '@lwc/shared';
 import { applyAriaReflection } from '@lwc/aria-reflection';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
 
@@ -1730,15 +1730,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.
@@ -2601,15 +2596,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);
@@ -3725,16 +3720,16 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
         // the custom element from the registry is expecting an upgrade callback
         vm = createViewModelHook(elm, vnode, renderer);
     };
-    let connectedCallback;
-    let disconnectedCallback;
-    if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
-        connectedCallback = (elm) => {
+    const connectedCallback = (elm) => {
+        if (shouldUseNativeCustomElementLifecycle(vm)) {
             connectRootElement(elm);
-        };
-        disconnectedCallback = (elm) => {
+        }
+    };
+    const disconnectedCallback = (elm) => {
+        if (shouldUseNativeCustomElementLifecycle(vm)) {
             disconnectRootElement(elm);
-        };
-    }
+        }
+    };
     // Should never get a tag with upper case letter at this point; the compiler
     // should produce only tags with lowercase letters. However, the Java
     // compiler may generate tagnames with uppercase letters so - for backwards
@@ -3752,7 +3747,7 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
     insertNode(elm, parent, anchor, renderer);
     if (vm) {
         if (process.env.IS_BROWSER) {
-            if (!lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+            if (!shouldUseNativeCustomElementLifecycle(vm)) {
                 if (process.env.NODE_ENV !== 'production') {
                     // With synthetic lifecycle callbacks, it's possible for elements to be removed without the engine
                     // noticing it (e.g. `appendChild` the same host element twice). This test ensures we don't regress.
@@ -4317,6 +4312,14 @@ function updateStaticChildren(c1, c2, parent, renderer) {
         }
     }
 }
+function shouldUseNativeCustomElementLifecycle(vm) {
+    if (lwcRuntimeFlags.DISABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+        // temporary "kill switch"
+        return false;
+    }
+    const apiVersion = getComponentAPIVersion(vm.component.constructor);
+    return isAPIFeatureEnabled(5 /* APIFeature.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE */, apiVersion);
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -4482,10 +4485,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
@@ -5261,9 +5270,8 @@ function getComponentAPIVersion(Ctor) {
     const metadata = registeredComponentMap.get(Ctor);
     const apiVersion = metadata === null || metadata === void 0 ? void 0 : metadata.apiVersion;
     if (isUndefined$1(apiVersion)) {
-        // This should only occur in our Karma tests; in practice every component
-        // is registered, and so this code path should not get hit. But to be safe,
-        // return the lowest possible version.
+        // This should only occur in two places: 1) our Karma tests, with unregistered components, and
+        // 2) the ACT compiler. To be safe, return the lowest possible API version.
         return LOWEST_API_VERSION;
     }
     return apiVersion;
@@ -5350,7 +5358,7 @@ function invokeServiceHook(vm, cbs) {
 }
 
 /*
- * 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
@@ -5421,6 +5429,7 @@ function getNearestShadowAncestor(vm) {
 function createVM(elm, ctor, renderer, options) {
     const { mode, owner, tagName, hydrated } = options;
     const def = getComponentInternalDef(ctor);
+    const apiVersion = getComponentAPIVersion(ctor);
     const vm = {
         elm,
         def,
@@ -5463,6 +5472,7 @@ function createVM(elm, ctor, renderer, options) {
         setHook,
         getHook,
         renderer,
+        apiVersion,
     };
     if (process.env.NODE_ENV !== 'production') {
         vm.debugInfo = create(null);
@@ -5541,7 +5551,7 @@ function warnOnStylesheetsMutation(ctor) {
 }
 function computeShadowMode(vm, renderer) {
     const { def } = vm;
-    const { isSyntheticShadowDefined, isNativeShadowDefined } = renderer;
+    const { isSyntheticShadowDefined } = renderer;
     let shadowMode;
     if (isSyntheticShadowDefined) {
         if (def.renderMode === 0 /* RenderMode.Light */) {
@@ -5549,34 +5559,25 @@ function computeShadowMode(vm, renderer) {
             // everything defaults to native when the synthetic shadow polyfill is unavailable.
             shadowMode = 0 /* ShadowMode.Native */;
         }
-        else if (isNativeShadowDefined) {
-            // Not combined with above condition because @lwc/features only supports identifiers in
-            // the if-condition.
-            if (lwcRuntimeFlags.ENABLE_MIXED_SHADOW_MODE) {
-                if (def.shadowSupportMode === "any" /* ShadowSupportMode.Any */) {
+        else if (lwcRuntimeFlags.ENABLE_MIXED_SHADOW_MODE) {
+            if (def.shadowSupportMode === "any" /* ShadowSupportMode.Any */) {
+                shadowMode = 0 /* ShadowMode.Native */;
+            }
+            else {
+                const shadowAncestor = getNearestShadowAncestor(vm);
+                if (!isNull(shadowAncestor) && shadowAncestor.shadowMode === 0 /* ShadowMode.Native */) {
+                    // Transitive support for native Shadow DOM. A component in native mode
+                    // transitively opts all of its descendants into native.
                     shadowMode = 0 /* ShadowMode.Native */;
                 }
                 else {
-                    const shadowAncestor = getNearestShadowAncestor(vm);
-                    if (!isNull(shadowAncestor) &&
-                        shadowAncestor.shadowMode === 0 /* ShadowMode.Native */) {
-                        // Transitive support for native Shadow DOM. A component in native mode
-                        // transitively opts all of its descendants into native.
-                        shadowMode = 0 /* ShadowMode.Native */;
-                    }
-                    else {
-                        // Synthetic if neither this component nor any of its ancestors are configured
-                        // to be native.
-                        shadowMode = 1 /* ShadowMode.Synthetic */;
-                    }
+                    // Synthetic if neither this component nor any of its ancestors are configured
+                    // to be native.
+                    shadowMode = 1 /* ShadowMode.Synthetic */;
                 }
             }
-            else {
-                shadowMode = 1 /* ShadowMode.Synthetic */;
-            }
         }
         else {
-            // Synthetic if there is no native Shadow DOM support.
             shadowMode = 1 /* ShadowMode.Synthetic */;
         }
     }
@@ -6056,11 +6057,6 @@ 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 findVM(elm) {
     // If it's a shadow DOM component, then it has a host
     const { host } = elm.getRootNode();
@@ -6071,7 +6067,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;
@@ -6081,28 +6078,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;
@@ -6137,7 +6132,7 @@ 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) {
+    if (lwcRuntimeFlags.ENABLE_ARIA_REFLECTION_GLOBAL_POLYFILL) {
         // Always run detection in dev mode, so we can at least print to the console
         if (process.env.NODE_ENV !== 'production') {
             enableDetection();
@@ -6888,5 +6883,5 @@ function readonly(obj) {
 }
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, reportingControl as __unstable__ReportingControl, api$1 as api, connectRootElement, createContextProviderWithRegister, createVM, disconnectRootElement, freezeTemplate, getAssociatedVMIfPresent, getComponentAPIVersion, getComponentConstructor, getComponentDef, getComponentHtmlPrototype, hydrateRoot, isComponentConstructor, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/** version: 3.1.2 */
+/** version: 4.0.0-alpha.0 */
 //# sourceMappingURL=index.js.map