@lwc/engine-core 3.8.0 → 4.0.0

package/dist/framework/api.d.ts

@@ -1,13 +1,13 @@
 import { SlotSet } from './vm';
 import { LightningElementConstructor } from './base-lightning-element';
-import { VNode, VNodes, VElement, VText, VCustomElement, VComment, VElementData, VStatic, Key, VFragment, VScopedSlotFragment, VStaticPart, VStaticPartData } from './vnodes';
+import { Key, VComment, VCustomElement, VElement, VElementData, VFragment, VNode, VNodes, VScopedSlotFragment, VStatic, VText, VStaticPart, VStaticPartData } from './vnodes';
 declare function sp(partId: number, data: VStaticPartData): VStaticPart;
 declare function ssf(slotName: unknown, factory: (value: any, key: any) => VFragment): VScopedSlotFragment;
 declare function st(fragment: Element, key: Key, parts?: VStaticPart[]): VStatic;
 declare function fr(key: Key, children: VNodes, stable: 0 | 1): VFragment;
 declare function h(sel: string, data: VElementData, children?: VNodes): VElement;
 declare function ti(value: any): number;
-declare function s(slotName: string, data: VElementData, children: VNodes, slotset: SlotSet | undefined): VElement | VNodes;
+declare function s(slotName: string, data: VElementData, children: VNodes, slotset: SlotSet | undefined): VElement | VNodes | VFragment;
 declare function c(sel: string, Ctor: LightningElementConstructor, data: VElementData, children?: VNodes): VCustomElement;
 declare function i(iterable: Iterable<any>, factory: (value: any, index: number, first: boolean, last: boolean) => VNodes | VNode): VNodes;
 /**

package/dist/framework/vm.d.ts

@@ -1,3 +1,4 @@
+import { APIVersion } from '@lwc/shared';
 import { HostNode, HostElement, RendererAPI } from './renderer';
 import { Template } from './template';
 import { ComponentDef } from './def';
@@ -141,6 +142,10 @@ export interface VM<N = HostNode, E = HostElement> {
     /**
      * Any stylesheets associated with the component */
     stylesheets: TemplateStylesheetFactories | null;
+    /**
+     * API version associated with this VM
+     */
+    apiVersion: APIVersion;
 }
 type VMAssociable = HostNode | LightningElement;
 export declare function rerenderVM(vm: VM): void;

package/dist/index.cjs.js

@@ -6,7 +6,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var shared = require('@lwc/shared');
-var ariaReflection = require('@lwc/aria-reflection');
 var features = require('@lwc/features');
 
 /*
@@ -419,6 +418,45 @@ var _a, _b;
 const instrumentDef = (_a = shared.globalThis.__lwc_instrument_cmp_def) !== null && _a !== void 0 ? _a : shared.noop;
 const instrumentInstance = (_b = shared.globalThis.__lwc_instrument_cmp_instance) !== null && _b !== void 0 ? _b : shared.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 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,
+            });
+        }
+    }
+}
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -1803,15 +1841,10 @@ for (const propName in HTMLElementOriginalDescriptors) {
     lightningBasedDescriptors[propName] = createBridgeToElementDescriptor(propName, HTMLElementOriginalDescriptors[propName]);
 }
 shared.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.
-    ariaReflection.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);
 shared.defineProperty(LightningElement, 'CustomElementConstructor', {
     get() {
         // If required, a runtime-specific implementation must be defined.
@@ -2736,15 +2769,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.
-        ariaReflection.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);
 }
 shared.freeze(BaseBridgeElement);
 shared.seal(BaseBridgeElement.prototype);
@@ -4796,10 +4829,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 (shared.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
@@ -5710,6 +5749,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,
@@ -5755,6 +5795,7 @@ function createVM(elm, ctor, renderer, options) {
         setHook,
         getHook,
         renderer,
+        apiVersion,
     };
     if (process.env.NODE_ENV !== 'production') {
         vm.debugInfo = shared.create(null);
@@ -6390,10 +6431,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 !shared.isUndefined(shared.getOwnPropertyDescriptor(Element.prototype, 'ariaActiveDescendant'));
 }
 function findVM(elm) {
     // If it's a shadow DOM component, then it has a host
@@ -6405,7 +6447,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 (!shared.isNull((parentElement = parentElement.parentElement))) {
-        if (isLightningElement(parentElement)) {
+        if (parentElement instanceof BaseBridgeElement) {
+            // parentElement is an LWC component
             const vm = getAssociatedVMIfPresent(parentElement);
             if (!shared.isUndefined(vm)) {
                 return vm;
@@ -6415,28 +6458,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()}> ` +
-                (shared.isUndefined(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 = shared.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()}> ` +
+            (shared.isUndefined(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 = shared.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;
@@ -6455,6 +6496,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.
         shared.defineProperty(prototype, prop, {
             get() {
                 checkAndReportViolation(this, prop, false, undefined);
@@ -6470,16 +6514,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);
     }
 }
 
@@ -7271,5 +7313,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 3.8.0 */
+/** version: 4.0.0 */
 //# sourceMappingURL=index.cjs.js.map