@lwc/engine-core 3.5.0 → 3.7.0

package/dist/framework/api.d.ts

@@ -1,8 +1,9 @@
 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 { VNode, VNodes, VElement, VText, VCustomElement, VComment, VElementData, VStatic, Key, VFragment, VScopedSlotFragment, 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, data?: VStaticElementData): VStatic;
+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;
@@ -56,6 +57,7 @@ declare const api: Readonly<{
     shc: typeof shc;
     ssf: typeof ssf;
     ddc: typeof ddc;
+    sp: typeof sp;
 }>;
 export default api;
 export type RenderAPI = typeof api;

package/dist/framework/base-bridge-element.d.ts

@@ -3,5 +3,5 @@ export interface HTMLElementConstructor {
     prototype: HTMLElement;
     new (): HTMLElement;
 }
-export declare function HTMLBridgeElementFactory(SuperClass: HTMLElementConstructor, publicProperties: string[], methods: string[], observedFields: string[], proto: LightningElement | null): HTMLElementConstructor;
+export declare function HTMLBridgeElementFactory(SuperClass: HTMLElementConstructor, publicProperties: string[], methods: string[], observedFields: string[], proto: LightningElement | null, hasCustomSuperClass: boolean): HTMLElementConstructor;
 export declare const BaseBridgeElement: HTMLElementConstructor;

package/dist/framework/modules/events.d.ts

@@ -1,3 +1,3 @@
 import { RendererAPI } from '../renderer';
-import { VBaseElement, VStatic } from '../vnodes';
-export declare function applyEventListeners(vnode: VBaseElement | VStatic, renderer: RendererAPI): void;
+import { VBaseElement, VStaticPart } from '../vnodes';
+export declare function applyEventListeners(vnode: VBaseElement | VStaticPart, renderer: RendererAPI): void;

package/dist/framework/modules/refs.d.ts

@@ -0,0 +1,3 @@
+import { VM } from '../vm';
+import { VBaseElement, VStaticPart } from '../vnodes';
+export declare function applyRefs(vnode: VBaseElement | VStaticPart, owner: VM): void;

package/dist/framework/modules/static-parts.d.ts

@@ -0,0 +1,10 @@
+import { VStatic } from '../vnodes';
+import { RendererAPI } from '../renderer';
+/**
+ * Given an array of static parts, do all the mounting required for these parts.
+ *
+ * @param root - the root element
+ * @param vnode - the parent VStatic
+ * @param renderer - the renderer to use
+ */
+export declare function applyStaticParts(root: Element, vnode: VStatic, renderer: RendererAPI): void;

package/dist/framework/renderer.d.ts

@@ -14,6 +14,7 @@ export interface RendererAPI {
     createText: (content: string) => N;
     createComment: (content: string) => N;
     nextSibling: (node: N) => N | null;
+    previousSibling: (node: N) => N | null;
     attachShadow: (element: E, options: ShadowRootInit) => N;
     getProperty: (node: N, key: string) => any;
     setProperty: (node: N, key: string, value: any) => void;

package/dist/framework/utils.d.ts

@@ -1,6 +1,4 @@
 import { StylesheetFactory, TemplateStylesheetFactories } from './stylesheet';
-import { VM } from './vm';
-import { VBaseElement, VStatic } from './vnodes';
 type Callback = () => void;
 export declare const SPACE_CHAR = 32;
 export declare const EmptyObject: any;
@@ -16,6 +14,5 @@ export declare function cloneAndOmitKey(object: {
     [key: string]: any;
 };
 export declare function flattenStylesheets(stylesheets: TemplateStylesheetFactories): StylesheetFactory[];
-export declare function setRefVNode(vm: VM, ref: string, vnode: VBaseElement | VStatic): void;
 export declare function assertNotProd(): void;
 export {};

package/dist/framework/vm.d.ts

@@ -3,7 +3,7 @@ import { Template } from './template';
 import { ComponentDef } from './def';
 import { LightningElement, LightningElementConstructor } from './base-lightning-element';
 import { ReactiveObserver } from './mutation-tracker';
-import { VNodes, VCustomElement, VNode, VBaseElement, VStatic } from './vnodes';
+import { VNodes, VCustomElement, VNode, VBaseElement, VStaticPart } from './vnodes';
 import { TemplateStylesheetFactories } from './stylesheet';
 type ShadowRootMode = 'open' | 'closed';
 export interface TemplateCache {
@@ -30,7 +30,8 @@ export declare const enum ShadowMode {
 }
 export declare const enum ShadowSupportMode {
     Any = "any",
-    Default = "reset"
+    Default = "reset",
+    Native = "native"
 }
 export declare const enum LwcDomMode {
     Manual = "manual"
@@ -61,7 +62,7 @@ export interface Context {
     wiredDisconnecting: Array<() => void>;
 }
 export type RefVNodes = {
-    [name: string]: VBaseElement | VStatic;
+    [name: string]: VBaseElement | VStaticPart;
 };
 export interface VM<N = HostNode, E = HostElement> {
     /** The host element */

package/dist/framework/vnodes.d.ts

@@ -27,13 +27,18 @@ export interface VScopedSlotFragment extends BaseVNode {
     type: VNodeType.ScopedSlotFragment;
     slotName: unknown;
 }
-export type VStaticElementData = Pick<VElementData, 'on' | 'ref'>;
+export interface VStaticPart {
+    readonly partId: number;
+    readonly data: VStaticPartData;
+    elm: Element | undefined;
+}
+export type VStaticPartData = Pick<VElementData, 'on' | 'ref'>;
 export interface VStatic extends BaseVNode {
     readonly type: VNodeType.Static;
     readonly sel: undefined;
     readonly key: Key;
     readonly fragment: Element;
-    readonly data: VStaticElementData | undefined;
+    readonly parts: VStaticPart[] | undefined;
     elm: Element | undefined;
 }
 export interface VFragment extends BaseVNode, BaseVParent {

package/dist/index.cjs.js

@@ -392,20 +392,6 @@ function flattenStylesheets(stylesheets) {
     }
     return list;
 }
-// Set a ref (lwc:ref) on a VM, from a template API
-function setRefVNode(vm, ref, vnode) {
-    if (process.env.NODE_ENV !== 'production' && shared.isUndefined(vm.refVNodes)) {
-        throw new Error('refVNodes must be defined when setting a ref');
-    }
-    // If this method is called, then vm.refVNodes is set as the template has refs.
-    // If not, then something went wrong and we threw an error above.
-    const refVNodes = vm.refVNodes;
-    // In cases of conflict (two elements with the same ref), prefer, the last one,
-    // in depth-first traversal order.
-    if (!(ref in refVNodes) || refVNodes[ref].key < vnode.key) {
-        refVNodes[ref] = vnode;
-    }
-}
 // Throw an error if we're running in prod mode. Ensures code is truly removed from prod mode.
 function assertNotProd() {
     /* istanbul ignore if */
@@ -2624,7 +2610,7 @@ function createAccessorThatWarns(propName) {
         configurable: true,
     };
 }
-function HTMLBridgeElementFactory(SuperClass, publicProperties, methods, observedFields, proto) {
+function HTMLBridgeElementFactory(SuperClass, publicProperties, methods, observedFields, proto, hasCustomSuperClass) {
     const HTMLBridgeElement = class extends SuperClass {
     };
     // generating the hash table for attributes to avoid duplicate fields and facilitate validation
@@ -2635,7 +2621,8 @@ function HTMLBridgeElementFactory(SuperClass, publicProperties, methods, observe
     const descriptors = shared.create(null);
     // present a hint message so that developers are aware that they have not decorated property with @api
     if (process.env.NODE_ENV !== 'production') {
-        if (!shared.isUndefined(proto) && !shared.isNull(proto)) {
+        // TODO [#3761]: enable for components that don't extend from LightningElement
+        if (!shared.isUndefined(proto) && !shared.isNull(proto) && !hasCustomSuperClass) {
             const nonPublicPropertiesToWarnOn = new Set([
                 // getters, setters, and methods
                 ...shared.keys(shared.getOwnPropertyDescriptors(proto)),
@@ -2716,7 +2703,7 @@ function HTMLBridgeElementFactory(SuperClass, publicProperties, methods, observe
     shared.defineProperties(HTMLBridgeElement.prototype, descriptors);
     return HTMLBridgeElement;
 }
-const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor, shared.getOwnPropertyNames(HTMLElementOriginalDescriptors), [], [], null);
+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
@@ -3026,7 +3013,8 @@ function createComponentDef(Ctor) {
         }
         if (!shared.isUndefined(ctorShadowSupportMode) &&
             ctorShadowSupportMode !== "any" /* ShadowSupportMode.Any */ &&
-            ctorShadowSupportMode !== "reset" /* ShadowSupportMode.Default */) {
+            ctorShadowSupportMode !== "reset" /* ShadowSupportMode.Default */ &&
+            ctorShadowSupportMode !== "native" /* ShadowSupportMode.Native */) {
             logError(`Invalid value for static property shadowSupportMode: '${ctorShadowSupportMode}'`);
         }
         if (!shared.isUndefined(ctorRenderMode) &&
@@ -3040,8 +3028,9 @@ function createComponentDef(Ctor) {
     const proto = Ctor.prototype;
     let { connectedCallback, disconnectedCallback, renderedCallback, errorCallback, formAssociatedCallback, formResetCallback, formDisabledCallback, formStateRestoreCallback, render, } = proto;
     const superProto = getCtorProto(Ctor);
-    const superDef = superProto !== LightningElement ? getComponentInternalDef(superProto) : lightingElementDef;
-    const bridge = HTMLBridgeElementFactory(superDef.bridge, shared.keys(apiFields), shared.keys(apiMethods), shared.keys(observedFields), proto);
+    const hasCustomSuperClass = superProto !== LightningElement;
+    const superDef = hasCustomSuperClass ? getComponentInternalDef(superProto) : lightingElementDef;
+    const bridge = HTMLBridgeElementFactory(superDef.bridge, shared.keys(apiFields), shared.keys(apiMethods), shared.keys(observedFields), proto, hasCustomSuperClass);
     const props = shared.assign(shared.create(null), superDef.props, apiFields);
     const propsConfig = shared.assign(shared.create(null), superDef.propsConfig, apiFieldsConfig);
     const methods = shared.assign(shared.create(null), superDef.methods, apiMethods);
@@ -3699,6 +3688,106 @@ function applyStaticStyleAttribute(vnode, renderer) {
     }
 }
 
+/*
+ * 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
+ */
+// Set a ref (lwc:ref) on a VM, from a template API
+function applyRefs(vnode, owner) {
+    const { data } = vnode;
+    const { ref } = data;
+    if (shared.isUndefined(ref)) {
+        return;
+    }
+    if (process.env.NODE_ENV !== 'production' && shared.isUndefined(owner.refVNodes)) {
+        throw new Error('refVNodes must be defined when setting a ref');
+    }
+    // If this method is called, then vm.refVNodes is set as the template has refs.
+    // If not, then something went wrong and we threw an error above.
+    const refVNodes = owner.refVNodes;
+    // In cases of conflict (two elements with the same ref), prefer the last one,
+    // in depth-first traversal order. This happens automatically due to how we render
+    refVNodes[ref] = vnode;
+}
+
+/*
+ * 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
+ */
+function traverseAndSetElements(root, parts, renderer) {
+    const numParts = parts.length;
+    // Optimization given that, in most cases, there will be one part, and it's just the root
+    if (numParts === 1) {
+        const firstPart = parts[0];
+        if (firstPart.partId === 0) {
+            // 0 means the root node
+            firstPart.elm = root;
+            return;
+        }
+    }
+    const partIdsToParts = new Map();
+    for (const staticPart of parts) {
+        partIdsToParts.set(staticPart.partId, staticPart);
+    }
+    let numFoundParts = 0;
+    const { previousSibling, getLastChild } = renderer;
+    const stack = [root];
+    let partId = -1;
+    // Depth-first traversal. We assign a partId to each element, which is an integer based on traversal order.
+    while (stack.length > 0) {
+        const elm = shared.ArrayShift.call(stack);
+        partId++;
+        const part = partIdsToParts.get(partId);
+        if (!shared.isUndefined(part)) {
+            part.elm = elm;
+            if (++numFoundParts === numParts) {
+                return; // perf optimization - stop traversing once we've found everything we need
+            }
+        }
+        // For depth-first traversal, prepend to the stack in reverse order
+        // Note that we traverse using `*Child`/`*Sibling` rather than `children` because the browser uses a linked
+        // list under the hood to represent the DOM tree, so it's faster to do this than to create an underlying array
+        // by calling `children`.
+        let child = getLastChild(elm);
+        while (!shared.isNull(child)) {
+            shared.ArrayUnshift.call(stack, child);
+            child = previousSibling(child);
+        }
+    }
+    if (process.env.NODE_ENV !== 'production') {
+        shared.assert.isTrue(numFoundParts === numParts, `Should have found all parts by now. Found ${numFoundParts}, needed ${numParts}.`);
+    }
+}
+/**
+ * Given an array of static parts, do all the mounting required for these parts.
+ *
+ * @param root - the root element
+ * @param vnode - the parent VStatic
+ * @param renderer - the renderer to use
+ */
+function applyStaticParts(root, vnode, renderer) {
+    // On the server, we don't support ref (because it relies on renderedCallback), nor do we
+    // support event listeners (no interactivity), so traversing parts makes no sense
+    if (!process.env.IS_BROWSER) {
+        return;
+    }
+    const { parts, owner } = vnode;
+    if (shared.isUndefined(parts)) {
+        return;
+    }
+    traverseAndSetElements(root, parts, renderer); // this adds `part.elm` to each `part`
+    for (const part of parts) {
+        // Event listeners are only applied once when mounting, so they are allowed for static vnodes
+        applyEventListeners(part, renderer);
+        // Refs are allowed as well
+        applyRefs(part, owner);
+    }
+}
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -3835,13 +3924,13 @@ function mountElement(vnode, parent, anchor, renderer) {
     applyStyleScoping(elm, owner, renderer);
     applyDomManual(elm, vnode);
     applyElementRestrictions(elm, vnode);
-    patchElementPropsAndAttrs$1(null, vnode, renderer);
+    patchElementPropsAndAttrsAndRefs$1(null, vnode, renderer);
     insertNode(elm, parent, anchor, renderer);
     mountVNodes(vnode.children, elm, renderer, null);
 }
 function patchElement(n1, n2, renderer) {
     const elm = (n2.elm = n1.elm);
-    patchElementPropsAndAttrs$1(n1, n2, renderer);
+    patchElementPropsAndAttrsAndRefs$1(n1, n2, renderer);
     patchChildren(n1.children, n2.children, elm, renderer);
 }
 function mountStatic(vnode, parent, anchor, renderer) {
@@ -3858,8 +3947,7 @@ function mountStatic(vnode, parent, anchor, renderer) {
         }
     }
     insertNode(elm, parent, anchor, renderer);
-    // Event listeners are only applied once when mounting, so they are allowed for static vnodes
-    applyEventListeners(vnode, renderer);
+    applyStaticParts(elm, vnode, renderer);
 }
 function mountCustomElement(vnode, parent, anchor, renderer) {
     const { sel, owner } = vnode;
@@ -3914,7 +4002,7 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
     if (vm) {
         allocateChildren(vnode, vm);
     }
-    patchElementPropsAndAttrs$1(null, vnode, renderer);
+    patchElementPropsAndAttrsAndRefs$1(null, vnode, renderer);
     insertNode(elm, parent, anchor, renderer);
     if (vm) {
         if (process.env.IS_BROWSER) {
@@ -3951,7 +4039,7 @@ function patchCustomElement(n1, n2, parent, renderer) {
         // Otherwise patch the existing component with new props/attrs/etc.
         const elm = (n2.elm = n1.elm);
         const vm = (n2.vm = n1.vm);
-        patchElementPropsAndAttrs$1(n1, n2, renderer);
+        patchElementPropsAndAttrsAndRefs$1(n1, n2, renderer);
         if (!shared.isUndefined(vm)) {
             // in fallback mode, the allocation will always set children to
             // empty and delegate the real allocation to the slot elements
@@ -4098,7 +4186,7 @@ function removeNode(node, parent, renderer) {
         lockDomMutation();
     }
 }
-function patchElementPropsAndAttrs$1(oldVnode, vnode, renderer) {
+function patchElementPropsAndAttrsAndRefs$1(oldVnode, vnode, renderer) {
     if (shared.isNull(oldVnode)) {
         applyEventListeners(vnode, renderer);
         applyStaticClassAttribute(vnode, renderer);
@@ -4110,6 +4198,8 @@ function patchElementPropsAndAttrs$1(oldVnode, vnode, renderer) {
     patchStyleAttribute(oldVnode, vnode, renderer);
     patchAttributes(oldVnode, vnode, renderer);
     patchProps(oldVnode, vnode, renderer);
+    // The `refs` object is blown away in every re-render, so we always need to re-apply them
+    applyRefs(vnode, vnode.owner);
 }
 function applyStyleScoping(elm, owner, renderer) {
     const { getClassList } = renderer;
@@ -4511,6 +4601,14 @@ const SymbolIterator = Symbol.iterator;
 function addVNodeToChildLWC(vnode) {
     shared.ArrayPush.call(getVMBeingRendered().velements, vnode);
 }
+// [s]tatic [p]art
+function sp(partId, data) {
+    return {
+        partId,
+        data,
+        elm: undefined, // elm is defined later
+    };
+}
 // [s]coped [s]lot [f]actory
 function ssf(slotName, factory) {
     return {
@@ -4524,7 +4622,7 @@ function ssf(slotName, factory) {
     };
 }
 // [st]atic node
-function st(fragment, key, data) {
+function st(fragment, key, parts) {
     const owner = getVMBeingRendered();
     const vnode = {
         type: 4 /* VNodeType.Static */,
@@ -4533,12 +4631,8 @@ function st(fragment, key, data) {
         elm: undefined,
         fragment,
         owner,
-        data,
+        parts,
     };
-    const ref = data === null || data === void 0 ? void 0 : data.ref;
-    if (!shared.isUndefined(ref)) {
-        setRefVNode(owner, ref, vnode);
-    }
     return vnode;
 }
 // [fr]agment node
@@ -4580,7 +4674,7 @@ function h(sel, data, children = EmptyArray) {
             }
         });
     }
-    const { key, ref } = data;
+    const { key } = data;
     const vnode = {
         type: 2 /* VNodeType.Element */,
         sel,
@@ -4590,9 +4684,6 @@ function h(sel, data, children = EmptyArray) {
         key,
         owner: vmBeingRendered,
     };
-    if (!shared.isUndefined(ref)) {
-        setRefVNode(vmBeingRendered, ref, vnode);
-    }
     return vnode;
 }
 // [t]ab[i]ndex function
@@ -4701,7 +4792,7 @@ function c(sel, Ctor, data, children = EmptyArray) {
             });
         }
     }
-    const { key, ref } = data;
+    const { key } = data;
     let elm, aChildren, vm;
     const vnode = {
         type: 3 /* VNodeType.CustomElement */,
@@ -4717,9 +4808,6 @@ function c(sel, Ctor, data, children = EmptyArray) {
         vm,
     };
     addVNodeToChildLWC(vnode);
-    if (!shared.isUndefined(ref)) {
-        setRefVNode(vmBeingRendered, ref, vnode);
-    }
     return vnode;
 }
 // [i]terable node
@@ -5010,6 +5098,7 @@ const api = shared.freeze({
     shc,
     ssf,
     ddc,
+    sp,
 });
 
 /*
@@ -5724,8 +5813,10 @@ function computeShadowMode(def, owner, renderer) {
             // everything defaults to native when the synthetic shadow polyfill is unavailable.
             shadowMode = 0 /* ShadowMode.Native */;
         }
-        else if (lwcRuntimeFlags.ENABLE_MIXED_SHADOW_MODE) {
-            if (def.shadowSupportMode === "any" /* ShadowSupportMode.Any */) {
+        else if (lwcRuntimeFlags.ENABLE_MIXED_SHADOW_MODE ||
+            def.shadowSupportMode === "native" /* ShadowSupportMode.Native */) {
+            if (def.shadowSupportMode === "any" /* ShadowSupportMode.Any */ ||
+                def.shadowSupportMode === "native" /* ShadowSupportMode.Native */) {
                 shadowMode = 0 /* ShadowMode.Native */;
             }
             else {
@@ -6470,7 +6561,7 @@ function hydrateStaticElement(elm, vnode, renderer) {
         return handleMismatch(elm, vnode, renderer);
     }
     vnode.elm = elm;
-    applyEventListeners(vnode, renderer);
+    applyStaticParts(elm, vnode, renderer);
     return elm;
 }
 function hydrateFragment(elm, vnode, renderer) {
@@ -6504,7 +6595,7 @@ function hydrateElement(elm, vnode, renderer) {
             }
         }
     }
-    patchElementPropsAndAttrs(vnode, renderer);
+    patchElementPropsAndAttrsAndRefs(vnode, renderer);
     if (!isDomManual) {
         const { getFirstChild } = renderer;
         hydrateChildren(getFirstChild(elm), vnode.children, elm, owner);
@@ -6537,7 +6628,7 @@ function hydrateCustomElement(elm, vnode, renderer) {
     vnode.elm = elm;
     vnode.vm = vm;
     allocateChildren(vnode, vm);
-    patchElementPropsAndAttrs(vnode, renderer);
+    patchElementPropsAndAttrsAndRefs(vnode, renderer);
     // Insert hook section:
     if (process.env.NODE_ENV !== 'production') {
         shared.assert.isTrue(vm.state === 0 /* VMState.created */, `${vm} cannot be recycled.`);
@@ -6602,9 +6693,11 @@ function handleMismatch(node, vnode, renderer) {
     removeNode(node, parentNode, renderer);
     return vnode.elm;
 }
-function patchElementPropsAndAttrs(vnode, renderer) {
+function patchElementPropsAndAttrsAndRefs(vnode, renderer) {
     applyEventListeners(vnode, renderer);
     patchProps(null, vnode, renderer);
+    // The `refs` object is blown away in every re-render, so we always need to re-apply them
+    applyRefs(vnode, vnode.owner);
 }
 function hasCorrectNodeType(vnode, node, nodeType, renderer) {
     const { getProperty } = renderer;
@@ -7125,5 +7218,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 3.5.0 */
+/** version: 3.7.0 */
 //# sourceMappingURL=index.cjs.js.map