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

package/dist/framework/api.d.ts

@@ -1,12 +1,12 @@
 import { SlotSet } from './vm';
 import { LightningElementConstructor } from './base-lightning-element';
-import { VNode, VNodes, VElement, VText, VCustomElement, VComment, VElementData, VStatic, Key, VFragment, VScopedSlotFragment, VStaticElementData } from './vnodes';
+import { Key, VComment, VCustomElement, VElement, VElementData, VFragment, VNode, VNodes, VScopedSlotFragment, VStatic, VStaticElementData, VText } from './vnodes';
 declare function ssf(slotName: unknown, factory: (value: any, key: any) => VFragment): VScopedSlotFragment;
 declare function st(fragment: Element, key: Key, data?: VStaticElementData): 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/renderer.d.ts

@@ -41,7 +41,7 @@ export interface RendererAPI {
     isConnected: (node: N) => boolean;
     insertStylesheet: (content: string, target?: ShadowRoot) => void;
     assertInstanceOfHTMLElement: (elm: any, msg: string) => void;
-    createCustomElement: (tagName: string, upgradeCallback: LifecycleCallback, connectedCallback?: LifecycleCallback, disconnectedCallback?: LifecycleCallback) => E;
+    createCustomElement: (tagName: string, upgradeCallback: LifecycleCallback, connectedCallback: LifecycleCallback, disconnectedCallback: LifecycleCallback) => E;
     ownerDocument(elm: E): Document;
     registerContextConsumer: (element: E, adapterContextToken: string, subscriptionPayload: WireContextSubscriptionPayload) => void;
 }

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';
@@ -134,6 +135,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

@@ -1734,15 +1734,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.
+ariaReflection.applyAriaReflection(LightningElement.prototype);
 shared.defineProperty(LightningElement, 'CustomElementConstructor', {
     get() {
         // If required, a runtime-specific implementation must be defined.
@@ -2605,15 +2600,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.
+    ariaReflection.applyAriaReflection(BaseBridgeElement.prototype);
 }
 shared.freeze(BaseBridgeElement);
 shared.seal(BaseBridgeElement.prototype);
@@ -3729,16 +3724,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
@@ -3756,7 +3751,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.
@@ -4321,6 +4316,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 shared.isAPIFeatureEnabled(5 /* APIFeature.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE */, apiVersion);
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -4486,10 +4489,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
@@ -5265,9 +5274,8 @@ function getComponentAPIVersion(Ctor) {
     const metadata = registeredComponentMap.get(Ctor);
     const apiVersion = metadata === null || metadata === void 0 ? void 0 : metadata.apiVersion;
     if (shared.isUndefined(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 shared.LOWEST_API_VERSION;
     }
     return apiVersion;
@@ -5425,6 +5433,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,
@@ -5467,6 +5476,7 @@ function createVM(elm, ctor, renderer, options) {
         setHook,
         getHook,
         renderer,
+        apiVersion,
     };
     if (process.env.NODE_ENV !== 'production') {
         vm.debugInfo = shared.create(null);
@@ -6051,11 +6061,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();
@@ -6066,7 +6071,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;
@@ -6076,28 +6082,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;
@@ -6132,7 +6136,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();
@@ -6921,5 +6925,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 3.1.3 */
+/** version: 4.0.0-alpha.0 */
 //# sourceMappingURL=index.cjs.js.map