@lwc/engine-core 6.3.3 → 6.4.0

package/dist/index.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2024 Salesforce, Inc.
  */
-import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, ArrayIndexOf, ArraySplice, create, isFalse, isFunction as isFunction$1, isObject, seal, isAPIFeatureEnabled, isArray as isArray$1, keys, hasOwnProperty as hasOwnProperty$1, entries, AriaPropNameToAttrNameMap, getPropertyDescriptor, forEach, defineProperties, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, freeze, KEY__SYNTHETIC_MODE, assert, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyNames as getOwnPropertyNames$1, getOwnPropertyDescriptors, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, kebabCaseToCamelCase, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, isString, 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 { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, ArrayIndexOf, ArraySplice, create, isFalse, isFunction as isFunction$1, isObject, seal, isAPIFeatureEnabled, isArray as isArray$1, keys, hasOwnProperty as hasOwnProperty$1, entries, AriaPropNameToAttrNameMap, getPropertyDescriptor, forEach, defineProperties, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, freeze, KEY__SYNTHETIC_MODE, assert, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyNames as getOwnPropertyNames$1, getOwnPropertyDescriptors, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, kebabCaseToCamelCase, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, isString, StringSlice, ArrayShift, ArrayUnshift, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, ArrayPop, isNumber, StringReplace, htmlEscape, StringCharAt, 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';
 
 /*
@@ -499,29 +499,6 @@ function assertNotProd() {
         throw new ReferenceError();
     }
 }
-// Temporary fix for when the LWC v5 compiler is used in conjunction with a v6+ engine
-// The old compiler format used the "slot" attribute in the `data` bag, whereas the new
-// format uses the special `slotAssignment` key.
-// This should be removed when the LWC v5 compiler is not used anywhere where it could be mismatched
-// with another LWC engine version.
-// TODO [#3974]: remove temporary logic to support v5 compiler + v6+ engine
-function applyTemporaryCompilerV5SlotFix(data) {
-    if (lwcRuntimeFlags.DISABLE_TEMPORARY_V5_COMPILER_SUPPORT) {
-        return data;
-    }
-    const { attrs } = data;
-    if (!isUndefined$1(attrs)) {
-        const { slot } = attrs;
-        if (!isUndefined$1(slot) && !isNull(slot)) {
-            return {
-                ...data,
-                attrs: cloneAndOmitKey(attrs, 'slot'),
-                slotAssignment: String(slot),
-            };
-        }
-    }
-    return data;
-}
 function shouldBeFormAssociated(Ctor) {
     const ctorFormAssociated = Boolean(Ctor.formAssociated);
     const apiVersion = getComponentAPIVersion(Ctor);
@@ -3668,6 +3645,12 @@ function isVScopedSlotFragment(vnode) {
 function isVStatic(vnode) {
     return vnode.type === 4 /* VNodeType.Static */;
 }
+function isVStaticPartElement(vnode) {
+    return vnode.type === 1 /* VStaticPartType.Element */;
+}
+function isVStaticPartText(vnode) {
+    return vnode.type === 0 /* VStaticPartType.Text */;
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -3677,7 +3660,8 @@ function isVStatic(vnode) {
  */
 const ColonCharCode = 58;
 function patchAttributes(oldVnode, vnode, renderer) {
-    const { attrs, external } = vnode.data;
+    const { data, elm } = vnode;
+    const { attrs } = data;
     if (isUndefined$1(attrs)) {
         return;
     }
@@ -3686,7 +3670,8 @@ function patchAttributes(oldVnode, vnode, renderer) {
     if (oldAttrs === attrs) {
         return;
     }
-    const { elm } = vnode;
+    // Note VStaticPartData does not contain the external property so it will always default to false.
+    const external = 'external' in data ? data.external : false;
     const { setAttribute, removeAttribute, setProperty } = renderer;
     for (const key in attrs) {
         const cur = attrs[key];
@@ -3790,8 +3775,7 @@ function patchProps(oldVnode, vnode, renderer) {
  */
 const classNameToClassMap = create(null);
 function getMapFromClassName(className) {
-    // Intentionally using == to match undefined and null values from computed style attribute
-    if (className == null) {
+    if (isUndefined$1(className) || isNull(className) || className === '') {
         return EmptyObject;
     }
     // computed class names must be string
@@ -3830,10 +3814,16 @@ function patchClassAttribute(oldVnode, vnode, renderer) {
     if (oldClass === newClass) {
         return;
     }
-    const { getClassList } = renderer;
-    const classList = getClassList(elm);
     const newClassMap = getMapFromClassName(newClass);
     const oldClassMap = getMapFromClassName(oldClass);
+    if (oldClassMap === newClassMap) {
+        // These objects are cached by className string (`classNameToClassMap`), so we can only get here if there is
+        // a key collision due to types, e.g. oldClass is `undefined` and newClass is `""` (empty string), or oldClass
+        // is `1` (number) and newClass is `"1"` (string).
+        return;
+    }
+    const { getClassList } = renderer;
+    const classList = getClassList(elm);
     let name;
     for (name in oldClassMap) {
         // remove only if it is not in the new class collection and it is not set from within the instance
@@ -3855,8 +3845,13 @@ function patchClassAttribute(oldVnode, vnode, renderer) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 // The style property is a string when defined via an expression in the template.
-function patchStyleAttribute(oldVnode, vnode, renderer) {
+function patchStyleAttribute(oldVnode, vnode, renderer, owner) {
     const { elm, data: { style: newStyle }, } = vnode;
+    if (process.env.NODE_ENV !== 'production') {
+        if (!isNull(newStyle) && !isUndefined$1(newStyle) && !isString(newStyle)) {
+            logError(`Invalid 'style' attribute passed to <${elm.tagName.toLowerCase()}> is ignored. This attribute must be a string value.`, owner);
+        }
+    }
     const oldStyle = isNull(oldVnode) ? undefined : oldVnode.data.style;
     if (oldStyle === newStyle) {
         return;
@@ -3877,8 +3872,8 @@ function patchStyleAttribute(oldVnode, vnode, renderer) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 function applyEventListeners(vnode, renderer) {
-    const { elm } = vnode;
-    const on = vnode.data?.on;
+    const { elm, data } = vnode;
+    const { on } = data;
     if (isUndefined$1(on)) {
         return;
     }
@@ -3955,12 +3950,47 @@ function applyRefs(vnode, owner) {
     refVNodes[ref] = vnode;
 }
 
+/*
+ * Copyright (c) 2024, 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 patchTextVNode(n1, n2, renderer) {
+    n2.elm = n1.elm;
+    if (n2.text !== n1.text) {
+        updateTextContent$1(n2, renderer);
+    }
+}
+function patchTextVStaticPart(n1, n2, renderer) {
+    if (isNull(n1) || n2.text !== n1.text) {
+        updateTextContent$1(n2, renderer);
+    }
+}
+function updateTextContent$1(vnode, renderer) {
+    const { elm, text } = vnode;
+    const { setText } = renderer;
+    if (process.env.NODE_ENV !== 'production') {
+        unlockDomMutation();
+    }
+    setText(elm, text);
+    if (process.env.NODE_ENV !== 'production') {
+        lockDomMutation();
+    }
+}
+
 /*
  * 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
  */
+/**
+ * Given an array of static parts, mounts the DOM element to the part based on the staticPartId
+ * @param root the root element
+ * @param parts an array of VStaticParts
+ * @param renderer the renderer to use
+ */
 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
@@ -4026,18 +4056,30 @@ function mountStaticParts(root, vnode, renderer) {
     traverseAndSetElements(root, parts, renderer);
     // Currently only event listeners and refs are supported for static vnodes
     for (const part of parts) {
-        // Event listeners only need to be applied once when mounting
-        applyEventListeners(part, renderer);
-        // Refs must be updated after every render due to refVNodes getting reset before every render
-        applyRefs(part, owner);
+        if (isVStaticPartElement(part)) {
+            // Event listeners only need to be applied once when mounting
+            applyEventListeners(part, renderer);
+            // Refs must be updated after every render due to refVNodes getting reset before every render
+            applyRefs(part, owner);
+            patchAttributes(null, part, renderer);
+            patchClassAttribute(null, part, renderer);
+            patchStyleAttribute(null, part, renderer, owner);
+        }
+        else {
+            if (process.env.NODE_ENV !== 'production' && !isVStaticPartText(part)) {
+                throw new Error(`LWC internal error, encountered unknown static part type: ${part.type}`);
+            }
+            patchTextVStaticPart(null, part, renderer);
+        }
     }
 }
 /**
- * Mounts elements to the newly generated VStatic node
+ * Updates the static elements based on the content of the VStaticParts
  * @param n1 the previous VStatic vnode
  * @param n2 the current VStatic vnode
+ * @param renderer the renderer to use
  */
-function patchStaticParts(n1, n2) {
+function patchStaticParts(n1, n2, 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) {
@@ -4052,12 +4094,49 @@ function patchStaticParts(n1, n2) {
         assert.isTrue(currParts.length === prevParts?.length, 'Expected static parts to be the same for the same element. This is an error with the LWC framework itself.');
     }
     for (let i = 0; i < currParts.length; i++) {
+        const prevPart = prevParts[i];
         const part = currParts[i];
         // Patch only occurs if the vnode is newly generated, which means the part.elm is always undefined
         // Since the vnode and elements are the same we can safely assume that prevParts[i].elm is defined.
-        part.elm = prevParts[i].elm;
-        // Refs must be updated after every render due to refVNodes getting reset before every render
-        applyRefs(part, currPartsOwner);
+        part.elm = prevPart.elm;
+        if (process.env.NODE_ENV !== 'production' && prevPart.type !== part.type) {
+            throw new Error(`LWC internal error, static part types do not match. Previous type was ${prevPart.type} and current type is ${part.type}`);
+        }
+        if (isVStaticPartElement(part)) {
+            // Refs must be updated after every render due to refVNodes getting reset before every render
+            applyRefs(part, currPartsOwner);
+            patchAttributes(prevPart, part, renderer);
+            patchClassAttribute(prevPart, part, renderer);
+            patchStyleAttribute(prevPart, part, renderer, currPartsOwner);
+        }
+        else {
+            patchTextVStaticPart(null, part, renderer);
+        }
+    }
+}
+/**
+ * Mounts the hydration specific attributes
+ * @param vnode the parent VStatic node
+ * @param renderer the renderer to use
+ */
+function hydrateStaticParts(vnode, renderer) {
+    if (!process.env.IS_BROWSER) {
+        return;
+    }
+    const { parts, owner } = vnode;
+    if (isUndefined$1(parts)) {
+        return;
+    }
+    // Note, hydration doesn't patch attributes because hydration validation occurs before this routine
+    // which guarantees that the elements are the same.
+    // We only need to apply the parts for things that cannot be done on the server.
+    for (const part of parts) {
+        if (isVStaticPartElement(part)) {
+            // Event listeners only need to be applied once when mounting
+            applyEventListeners(part, renderer);
+            // Refs must be updated after every render due to refVNodes getting reset before every render
+            applyRefs(part, owner);
+        }
     }
 }
 
@@ -4095,7 +4174,7 @@ function patch(n1, n2, parent, renderer) {
     switch (n2.type) {
         case 0 /* VNodeType.Text */:
             // VText has no special capability, fallback to the owner's renderer
-            patchText(n1, n2, renderer);
+            patchTextVNode(n1, n2, renderer);
             break;
         case 1 /* VNodeType.Comment */:
             // VComment has no special capability, fallback to the owner's renderer
@@ -4142,12 +4221,6 @@ function mount(node, parent, renderer, anchor) {
             break;
     }
 }
-function patchText(n1, n2, renderer) {
-    n2.elm = n1.elm;
-    if (n2.text !== n1.text) {
-        updateTextContent(n2, renderer);
-    }
-}
 function mountText(vnode, parent, anchor, renderer) {
     const { owner } = vnode;
     const { createText } = renderer;
@@ -4160,7 +4233,7 @@ function patchComment(n1, n2, renderer) {
     // FIXME: Comment nodes should be static, we shouldn't need to diff them together. However
     // it is the case today.
     if (n2.text !== n1.text) {
-        updateTextContent(n2, renderer);
+        updateTextContent$1(n2, renderer);
     }
 }
 function mountComment(vnode, parent, anchor, renderer) {
@@ -4204,7 +4277,7 @@ function patchStatic(n1, n2, renderer) {
     // slotAssignments can only apply to the top level element, never to a static part.
     patchSlotAssignment(n1, n2, renderer);
     // The `refs` object is blown away in every re-render, so we always need to re-apply them
-    patchStaticParts(n1, n2);
+    patchStaticParts(n1, n2, renderer);
 }
 function patchElement(n1, n2, renderer) {
     const elm = (n2.elm = n1.elm);
@@ -4215,19 +4288,20 @@ function mountStatic(vnode, parent, anchor, renderer) {
     const { owner } = vnode;
     const { cloneNode, isSyntheticShadowDefined } = renderer;
     const elm = (vnode.elm = cloneNode(vnode.fragment, true));
+    // Define the root node shadow resolver
     linkNodeToShadow(elm, owner, renderer);
     applyElementRestrictions(elm, vnode);
-    // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
     const { renderMode, shadowMode } = owner;
     if (isSyntheticShadowDefined) {
+        // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
         if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
             elm[KEY__SHADOW_STATIC] = true;
         }
     }
     // slotAssignments can only apply to the top level element, never to a static part.
     patchSlotAssignment(null, vnode, renderer);
-    insertNode(elm, parent, anchor, renderer);
     mountStaticParts(elm, vnode, renderer);
+    insertNode(elm, parent, anchor, renderer);
 }
 function mountCustomElement(vnode, parent, anchor, renderer) {
     const { sel, owner, ctor } = vnode;
@@ -4392,17 +4466,6 @@ function linkNodeToShadow(elm, owner, renderer) {
         }
     }
 }
-function updateTextContent(vnode, renderer) {
-    const { elm, text } = vnode;
-    const { setText } = renderer;
-    if (process.env.NODE_ENV !== 'production') {
-        unlockDomMutation();
-    }
-    setText(elm, text);
-    if (process.env.NODE_ENV !== 'production') {
-        lockDomMutation();
-    }
-}
 function insertFragmentOrNode(vnode, parent, anchor, renderer) {
     if (process.env.NODE_ENV !== 'production') {
         unlockDomMutation();
@@ -4447,15 +4510,16 @@ function patchElementPropsAndAttrsAndRefs$1(oldVnode, vnode, renderer) {
         applyStaticClassAttribute(vnode, renderer);
         applyStaticStyleAttribute(vnode, renderer);
     }
+    const { owner } = vnode;
     // Attrs need to be applied to element before props IE11 will wipe out value on radio inputs if
     // value is set before type=radio.
     patchClassAttribute(oldVnode, vnode, renderer);
-    patchStyleAttribute(oldVnode, vnode, renderer);
+    patchStyleAttribute(oldVnode, vnode, renderer, owner);
     patchAttributes(oldVnode, vnode, renderer);
     patchProps(oldVnode, vnode, renderer);
     patchSlotAssignment(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);
+    applyRefs(vnode, owner);
 }
 function applyStyleScoping(elm, owner, renderer) {
     const { getClassList } = renderer;
@@ -4857,10 +4921,14 @@ function addVNodeToChildLWC(vnode) {
     ArrayPush$1.call(getVMBeingRendered().velements, vnode);
 }
 // [s]tatic [p]art
-function sp(partId, data) {
+function sp(partId, data, text) {
+    // Static part will always have either text or data, it's guaranteed by the compiler.
+    const type = isNull(text) ? 1 /* VStaticPartType.Element */ : 0 /* VStaticPartType.Text */;
     return {
+        type,
         partId,
         data,
+        text,
         elm: undefined, // elm is defined later
     };
 }
@@ -4877,8 +4945,9 @@ function ssf(slotName, factory) {
     };
 }
 // [st]atic node
-function st(fragment, key, parts) {
+function st(fragmentFactory, key, parts) {
     const owner = getVMBeingRendered();
+    const fragment = fragmentFactory(parts);
     const vnode = {
         type: 4 /* VNodeType.Static */,
         sel: undefined,
@@ -4920,9 +4989,6 @@ function h(sel, data, children = EmptyArray) {
         // checking reserved internal data properties
         assert.isFalse(data.className && data.classMap, `vnode.data.className and vnode.data.classMap ambiguous declaration.`);
         assert.isFalse(data.styleDecls && data.style, `vnode.data.styleDecls and vnode.data.style ambiguous declaration.`);
-        if (data.style && !isString(data.style)) {
-            logError(`Invalid 'style' attribute passed to <${sel}> is ignored. This attribute must be a string value.`, vmBeingRendered);
-        }
         forEach.call(children, (childVnode) => {
             if (childVnode != null) {
                 assert.isTrue('type' in childVnode &&
@@ -4932,8 +4998,6 @@ function h(sel, data, children = EmptyArray) {
             }
         });
     }
-    // TODO [#3974]: remove temporary logic to support v5 compiler + v6+ engine
-    data = applyTemporaryCompilerV5SlotFix(data);
     const { key, slotAssignment } = data;
     const vnode = {
         type: 2 /* VNodeType.Element */,
@@ -4970,8 +5034,6 @@ function s(slotName, data, children, slotset) {
     }
     const vmBeingRendered = getVMBeingRendered();
     const { renderMode, apiVersion } = vmBeingRendered;
-    // TODO [#3974]: remove temporary logic to support v5 compiler + v6+ engine
-    data = applyTemporaryCompilerV5SlotFix(data);
     if (!isUndefined$1(slotset) &&
         !isUndefined$1(slotset.slotAssignments) &&
         !isUndefined$1(slotset.slotAssignments[slotName]) &&
@@ -5075,8 +5137,6 @@ function c(sel, Ctor, data, children = EmptyArray) {
             });
         }
     }
-    // TODO [#3974]: remove temporary logic to support v5 compiler + v6+ engine
-    data = applyTemporaryCompilerV5SlotFix(data);
     const { key, slotAssignment } = data;
     let elm, aChildren, vm;
     const vnode = {
@@ -5138,16 +5198,19 @@ function i(iterable, factory) {
         if (process.env.NODE_ENV !== 'production') {
             const vnodes = isArray$1(vnode) ? vnode : [vnode];
             forEach.call(vnodes, (childVnode) => {
-                if (!isNull(childVnode) && isObject(childVnode) && !isUndefined$1(childVnode.sel)) {
+                // Check that the child vnode is either an element or VStatic
+                if (!isNull(childVnode) && (isVBaseElement(childVnode) || isVStatic(childVnode))) {
                     const { key } = childVnode;
+                    // In @lwc/engine-server the fragment doesn't have a tagName, default to the VM's tagName.
+                    const { tagName } = vmBeingRendered;
                     if (isString(key) || isNumber(key)) {
                         if (keyMap[key] === 1 && isUndefined$1(iterationError)) {
-                            iterationError = `Duplicated "key" attribute value for "<${childVnode.sel}>" in ${vmBeingRendered} for item number ${j}. A key with value "${childVnode.key}" appears more than once in the iteration. Key values must be unique numbers or strings.`;
+                            iterationError = `Duplicated "key" attribute value in "<${tagName}>" for item number ${j}. A key with value "${key}" appears more than once in the iteration. Key values must be unique numbers or strings.`;
                         }
                         keyMap[key] = 1;
                     }
                     else if (isUndefined$1(iterationError)) {
-                        iterationError = `Invalid "key" attribute value in "<${childVnode.sel}>" in ${vmBeingRendered} for item number ${j}. Set a unique "key" value on all iterated child elements.`;
+                        iterationError = `Invalid "key" attribute value in "<${tagName}>" for item number ${j}. Set a unique "key" value on all iterated child elements.`;
                     }
                 }
             });
@@ -5546,6 +5609,111 @@ function validateLightDomTemplate(template, vm) {
         }
     }
 }
+const browserExpressionSerializer = (partToken, classAttrToken) => {
+    // This will insert the scoped style token as a static class attribute in the fragment
+    // bypassing the need to call applyStyleScoping when mounting static parts.
+    const type = StringCharAt.call(partToken, 0);
+    switch (type) {
+        case "c" /* STATIC_PART_TOKEN_ID.CLASS */:
+            return classAttrToken;
+        case "t" /* STATIC_PART_TOKEN_ID.TEXT */:
+            // Using a single space here gives us a single empty text node
+            return ' ';
+        default:
+            return '';
+    }
+};
+const serializerNoop = () => {
+    throw new Error('LWC internal error, attempted to serialize partToken without static parts');
+};
+// This function serializes the expressions generated by static content optimization.
+// Currently this is only needed for SSR.
+// TODO [#4078]: Split the implementation between @lwc/engine-dom and @lwc/engine-server
+function buildSerializeExpressionFn(parts) {
+    if (process.env.IS_BROWSER) {
+        return browserExpressionSerializer;
+    }
+    if (isUndefined$1(parts)) {
+        // Technically this should not be reachable, if there are no parts there should be no partTokens
+        // and this function should never be invoked.
+        return serializerNoop;
+    }
+    const partIdsToParts = new Map();
+    for (const staticPart of parts) {
+        partIdsToParts.set(`${staticPart.partId}`, staticPart);
+    }
+    const parsePartToken = (partToken) => {
+        // The partTokens are split into 3 section:
+        // 1. The first character represents the expression type (attribute, class, style, or text).
+        // 2. For attributes, the characters from index 1 to the first occurrence of a ':' is the partId.
+        // 3. Everything after the first ':' represents the attribute name.
+        // 4. For non-attributes everything from index 1 to the string length is the partId.
+        // Ex, attribute: a0:data-name, a = an attribute, 0 = partId, data-name = attribute name.
+        // Ex, style: s0, s = a style attribute, 0 = partId.
+        const type = StringCharAt.call(partToken, 0);
+        let delimiterIndex = partToken.length;
+        let attrName = '';
+        if (type === "a" /* STATIC_PART_TOKEN_ID.ATTRIBUTE */) {
+            delimiterIndex = partToken.indexOf(':');
+            // Only VStaticPartData.attrs have an attribute name
+            attrName = partToken.substring(delimiterIndex + 1);
+        }
+        const partId = partToken.substring(1, delimiterIndex);
+        const part = partIdsToParts.get(partId) ?? EmptyObject;
+        return { type, part, attrName };
+    };
+    return (partToken, classToken) => {
+        const { type, part, attrName } = parsePartToken(partToken);
+        switch (type) {
+            case "a" /* STATIC_PART_TOKEN_ID.ATTRIBUTE */:
+                return serializeAttribute(part, attrName);
+            case "c" /* STATIC_PART_TOKEN_ID.CLASS */: // class
+                return serializeClassAttribute(part, classToken);
+            case "s" /* STATIC_PART_TOKEN_ID.STYLE */: // style
+                return serializeStyleAttribute(part);
+            case "t" /* STATIC_PART_TOKEN_ID.TEXT */: // text
+                return serializeTextContent(part);
+            default:
+                // This should not be reachable
+                throw new Error(`LWC internal error, unrecognized part token during serialization ${partToken}`);
+        }
+    };
+}
+function serializeTextContent(part) {
+    const { text } = part;
+    if (text === '') {
+        return '\u200D'; // Special serialization for empty text nodes
+    }
+    // Note the serialization logic doesn't need to validate against the style tag as in serializeTextContent
+    // because style tags are always inserted through the engine.
+    // User input of style tags are blocked, furthermore, all dynamic text is escaped at this point.
+    return htmlEscape(text);
+}
+function serializeStyleAttribute(part) {
+    const { data: { style }, } = part;
+    // This is designed to mirror logic patchStyleAttribute
+    return isString(style) && style.length ? ` style="${htmlEscape(style, true)}"` : '';
+}
+function serializeAttribute(part, name) {
+    const { data: { attrs = {} }, } = part;
+    const rawValue = attrs[name];
+    let value = '';
+    // The undefined and null checks here are designed to match patchAttributes routine.
+    if (!isUndefined$1(rawValue) && !isNull(rawValue)) {
+        const stringifiedValue = String(rawValue);
+        value = stringifiedValue.length
+            ? ` ${name}="${htmlEscape(stringifiedValue, true)}"`
+            : ` ${name}`;
+    }
+    return value;
+}
+function serializeClassAttribute(part, classToken) {
+    const classMap = getMapFromClassName(part.data?.className);
+    // Trim the leading and trailing whitespace here because classToken contains a leading space and
+    // there will be a trailing space if classMap is empty.
+    const computedClassName = `${classToken} ${keys(classMap).join(' ')}`.trim();
+    return computedClassName.length ? ` class="${htmlEscape(computedClassName, true)}"` : '';
+}
 // This should be a no-op outside of LWC's Karma tests, where it's not needed
 let registerFragmentCache = noop;
 // Only used in LWC's Karma tests
@@ -5567,7 +5735,7 @@ function buildParseFragmentFn(createFragmentFn) {
     return (strings, ...keys) => {
         const cache = create(null);
         registerFragmentCache(cache);
-        return function () {
+        return function (parts) {
             const { context: { hasScopedStyles, stylesheetToken, legacyStylesheetToken }, shadowMode, renderer, } = getVMBeingRendered();
             const hasStyleToken = !isUndefined$1(stylesheetToken);
             const isSyntheticShadow = shadowMode === 1 /* ShadowMode.Synthetic */;
@@ -5579,14 +5747,27 @@ function buildParseFragmentFn(createFragmentFn) {
             if (hasStyleToken && isSyntheticShadow) {
                 cacheKey |= 2 /* FragmentCache.SHADOW_MODE_SYNTHETIC */;
             }
-            if (!isUndefined$1(cache[cacheKey])) {
-                return cache[cacheKey];
+            // Cache is only here to prevent calling innerHTML multiple times which doesn't happen on the server.
+            if (process.env.IS_BROWSER) {
+                // Disable this on the server to prevent cache poisoning when expressions are used.
+                const cached = cache[cacheKey];
+                if (!isUndefined$1(cached)) {
+                    return cached;
+                }
             }
             // If legacy stylesheet tokens are required, then add them to the rendered string
             const stylesheetTokenToRender = stylesheetToken + (hasLegacyToken ? ` ${legacyStylesheetToken}` : '');
             const classToken = hasScopedStyles && hasStyleToken ? ' ' + stylesheetTokenToRender : '';
             const classAttrToken = hasScopedStyles && hasStyleToken ? ` class="${stylesheetTokenToRender}"` : '';
             const attrToken = hasStyleToken && isSyntheticShadow ? ' ' + stylesheetTokenToRender : '';
+            // In the browser, we provide the entire class attribute as a perf optimization to avoid applying it on mount.
+            // The remaining class expression will be applied when the static parts are mounted.
+            // In SSR, the entire class attribute (expression included) is assembled along with the fragment.
+            // This is why in the browser we provide the entire class attribute and in SSR we only provide the class token.
+            const exprClassToken = process.env.IS_BROWSER ? classAttrToken : classToken;
+            // TODO [#3624]: The implementation of this function should be specific to @lwc/engine-dom and @lwc/engine-server.
+            // Find a way to split this in a future refactor.
+            const serializeExpression = buildSerializeExpressionFn(parts);
             let htmlFragment = '';
             for (let i = 0, n = keys.length; i < n; i++) {
                 switch (keys[i]) {
@@ -5602,6 +5783,10 @@ function buildParseFragmentFn(createFragmentFn) {
                     case 3: // ${1}${2}
                         htmlFragment += strings[i] + classAttrToken + attrToken;
                         break;
+                    default: // expressions ${partId:attributeName/textId}
+                        htmlFragment +=
+                            strings[i] + serializeExpression(keys[i], exprClassToken);
+                        break;
                 }
             }
             htmlFragment += strings[strings.length - 1];
@@ -6484,25 +6669,25 @@ function forceRehydration(vm) {
         scheduleRehydration(vm);
     }
 }
-function runFormAssociatedCustomElementCallback(vm, faceCb) {
+function runFormAssociatedCustomElementCallback(vm, faceCb, args) {
     const { renderMode, shadowMode } = vm;
     if (shadowMode === 1 /* ShadowMode.Synthetic */ && renderMode !== 0 /* RenderMode.Light */) {
         throw new Error('Form associated lifecycle methods are not available in synthetic shadow. Please use native shadow or light DOM.');
     }
-    invokeComponentCallback(vm, faceCb);
+    invokeComponentCallback(vm, faceCb, args);
 }
-function runFormAssociatedCallback(elm) {
+function runFormAssociatedCallback(elm, form) {
     const vm = getAssociatedVM(elm);
     const { formAssociatedCallback } = vm.def;
     if (!isUndefined$1(formAssociatedCallback)) {
-        runFormAssociatedCustomElementCallback(vm, formAssociatedCallback);
+        runFormAssociatedCustomElementCallback(vm, formAssociatedCallback, [form]);
     }
 }
-function runFormDisabledCallback(elm) {
+function runFormDisabledCallback(elm, disabled) {
     const vm = getAssociatedVM(elm);
     const { formDisabledCallback } = vm.def;
     if (!isUndefined$1(formDisabledCallback)) {
-        runFormAssociatedCustomElementCallback(vm, formDisabledCallback);
+        runFormAssociatedCustomElementCallback(vm, formDisabledCallback, [disabled]);
     }
 }
 function runFormResetCallback(elm) {
@@ -6512,11 +6697,11 @@ function runFormResetCallback(elm) {
         runFormAssociatedCustomElementCallback(vm, formResetCallback);
     }
 }
-function runFormStateRestoreCallback(elm) {
+function runFormStateRestoreCallback(elm, state, reason) {
     const vm = getAssociatedVM(elm);
     const { formStateRestoreCallback } = vm.def;
     if (!isUndefined$1(formStateRestoreCallback)) {
-        runFormAssociatedCustomElementCallback(vm, formStateRestoreCallback);
+        runFormAssociatedCustomElementCallback(vm, formStateRestoreCallback, [state, reason]);
     }
 }
 function resetRefVNodes(vm) {
@@ -6884,9 +7069,12 @@ function hydrateText(node, vnode, renderer) {
     if (!hasCorrectNodeType(vnode, node, 3 /* EnvNodeTypes.TEXT */, renderer)) {
         return handleMismatch(node, vnode, renderer);
     }
+    return updateTextContent(node, vnode, vnode.owner, renderer);
+}
+function updateTextContent(node, vnode, owner, renderer) {
     if (process.env.NODE_ENV !== 'production') {
         if (!textNodeContentsAreEqual(node, vnode, renderer)) {
-            logWarn('Hydration mismatch: text values do not match, will recover from the difference', vnode.owner);
+            logWarn('Hydration mismatch: text values do not match, will recover from the difference', owner);
         }
     }
     const { setText } = renderer;
@@ -6912,11 +7100,24 @@ function hydrateComment(node, vnode, renderer) {
 }
 function hydrateStaticElement(elm, vnode, renderer) {
     if (!hasCorrectNodeType(vnode, elm, 1 /* EnvNodeTypes.ELEMENT */, renderer) ||
-        !areCompatibleNodes(vnode.fragment, elm, vnode, renderer)) {
+        !areCompatibleStaticNodes(vnode.fragment, elm, vnode, renderer)) {
+        return handleMismatch(elm, vnode, renderer);
+    }
+    return hydrateStaticElementParts(elm, vnode, renderer);
+}
+function hydrateStaticElementParts(elm, vnode, renderer) {
+    const { parts } = vnode;
+    if (!isUndefined$1(parts)) {
+        // Elements must first be set on the static part to validate against.
+        traverseAndSetElements(elm, parts, renderer);
+    }
+    if (!haveCompatibleStaticParts(vnode, renderer)) {
         return handleMismatch(elm, vnode, renderer);
     }
     vnode.elm = elm;
-    mountStaticParts(elm, vnode, renderer);
+    // Hydration only requires applying event listeners and refs.
+    // All other expressions should be applied during SSR or through the handleMismatch routine.
+    hydrateStaticParts(vnode, renderer);
     return elm;
 }
 function hydrateFragment(elm, vnode, renderer) {
@@ -7092,12 +7293,13 @@ function isMatchingElement(vnode, elm, renderer, shouldValidateAttr = () => true
         }
         return false;
     }
-    const hasCompatibleAttrs = validateAttrs(vnode, elm, renderer, shouldValidateAttr);
+    const { data } = vnode;
+    const hasCompatibleAttrs = validateAttrs(vnode, elm, data, renderer, shouldValidateAttr);
     const hasCompatibleClass = shouldValidateAttr('class')
-        ? validateClassAttr(vnode, elm, renderer)
+        ? validateClassAttr(vnode, elm, data, renderer)
         : true;
     const hasCompatibleStyle = shouldValidateAttr('style')
-        ? validateStyleAttr(vnode, elm, renderer)
+        ? validateStyleAttr(vnode, elm, data, renderer)
         : true;
     return hasCompatibleAttrs && hasCompatibleClass && hasCompatibleStyle;
 }
@@ -7114,8 +7316,8 @@ function attributeValuesAreEqual(vnodeValue, value) {
     // In all other cases, the two values are not considered equal
     return false;
 }
-function validateAttrs(vnode, elm, renderer, shouldValidateAttr) {
-    const { data: { attrs = {} }, } = vnode;
+function validateAttrs(vnode, elm, data, renderer, shouldValidateAttr) {
+    const { attrs = {} } = data;
     let nodesAreCompatible = true;
     // Validate attributes, though we could always recovery from those by running the update mods.
     // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
@@ -7123,21 +7325,22 @@ function validateAttrs(vnode, elm, renderer, shouldValidateAttr) {
         if (!shouldValidateAttr(attrName)) {
             continue;
         }
-        const { owner } = vnode;
         const { getAttribute } = renderer;
         const elmAttrValue = getAttribute(elm, attrName);
         if (!attributeValuesAreEqual(attrValue, elmAttrValue)) {
             if (process.env.NODE_ENV !== 'production') {
                 const { getProperty } = renderer;
-                logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found ${isNull(elmAttrValue) ? 'null' : `"${elmAttrValue}"`}`, owner);
+                logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found ${isNull(elmAttrValue) ? 'null' : `"${elmAttrValue}"`}`, vnode.owner);
             }
             nodesAreCompatible = false;
         }
     }
     return nodesAreCompatible;
 }
-function validateClassAttr(vnode, elm, renderer) {
-    const { data, owner } = vnode;
+function validateClassAttr(vnode, elm, data, renderer) {
+    const { owner } = vnode;
+    // classMap is never available on VStaticPartData so it can default to undefined
+    // casting to prevent TS error.
     let { className, classMap } = data;
     const { getProperty, getClassList, getAttribute } = renderer;
     // we don't care about legacy for hydration. it's a new use case
@@ -7210,8 +7413,9 @@ function validateClassAttr(vnode, elm, renderer) {
     }
     return nodesAreCompatible;
 }
-function validateStyleAttr(vnode, elm, renderer) {
-    const { data: { style, styleDecls }, } = vnode;
+function validateStyleAttr(vnode, elm, data, renderer) {
+    // Note styleDecls is always undefined for VStaticPartData, casting here to default it to undefined
+    const { style, styleDecls } = data;
     const { getAttribute } = renderer;
     const elmStyle = getAttribute(elm, 'style') || '';
     let vnodeStyle;
@@ -7251,7 +7455,7 @@ function validateStyleAttr(vnode, elm, renderer) {
     }
     return nodesAreCompatible;
 }
-function areCompatibleNodes(client, ssr, vnode, renderer) {
+function areCompatibleStaticNodes(client, ssr, vnode, renderer) {
     const { getProperty, getAttribute } = renderer;
     if (getProperty(client, 'nodeType') === 3 /* EnvNodeTypes.TEXT */) {
         if (!hasCorrectNodeType(vnode, ssr, 3 /* EnvNodeTypes.TEXT */, renderer)) {
@@ -7268,24 +7472,63 @@ function areCompatibleNodes(client, ssr, vnode, renderer) {
     if (!hasCorrectNodeType(vnode, ssr, 1 /* EnvNodeTypes.ELEMENT */, renderer)) {
         return false;
     }
+    const { owner, parts } = vnode;
     let isCompatibleElements = true;
     if (getProperty(client, 'tagName') !== getProperty(ssr, 'tagName')) {
         if (process.env.NODE_ENV !== 'production') {
-            logError(`Hydration mismatch: expecting element with tag "${getProperty(client, 'tagName').toLowerCase()}" but found "${getProperty(ssr, 'tagName').toLowerCase()}".`, vnode.owner);
+            logError(`Hydration mismatch: expecting element with tag "${getProperty(client, 'tagName').toLowerCase()}" but found "${getProperty(ssr, 'tagName').toLowerCase()}".`, owner);
         }
         return false;
     }
     const clientAttrsNames = getProperty(client, 'getAttributeNames').call(client);
     clientAttrsNames.forEach((attrName) => {
         if (getAttribute(client, attrName) !== getAttribute(ssr, attrName)) {
-            if (process.env.NODE_ENV !== 'production') {
-                logError(`Mismatch hydrating element <${getProperty(client, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${getAttribute(client, attrName)}" but found "${getAttribute(ssr, attrName)}"`, vnode.owner);
+            // Check if the root element attributes have expressions, if it does then we need to delegate hydration
+            // validation to haveCompatibleStaticParts.
+            // Note if there are no parts then it is a fully static fragment.
+            // partId === 0 will always refer to the root element, this is guaranteed by the compiler.
+            if (parts?.[0].partId !== 0) {
+                if (process.env.NODE_ENV !== 'production') {
+                    logError(`Mismatch hydrating element <${getProperty(client, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${getAttribute(client, attrName)}" but found "${getAttribute(ssr, attrName)}"`, owner);
+                }
+                isCompatibleElements = false;
             }
-            isCompatibleElements = false;
         }
     });
     return isCompatibleElements;
 }
+function haveCompatibleStaticParts(vnode, renderer) {
+    const { parts, owner } = vnode;
+    if (isUndefined$1(parts)) {
+        return true;
+    }
+    // The validation here relies on 2 key invariants:
+    // 1. It's never the case that `parts` is undefined on the server but defined on the client (or vice-versa)
+    // 2. It's never the case that `parts` has one length on the server but another on the client
+    for (const part of parts) {
+        const { elm } = part;
+        if (isVStaticPartElement(part)) {
+            if (!hasCorrectNodeType(vnode, elm, 1 /* EnvNodeTypes.ELEMENT */, renderer)) {
+                return false;
+            }
+            const { data } = part;
+            const hasMatchingAttrs = validateAttrs(vnode, elm, data, renderer, () => true);
+            const hasMatchingStyleAttr = validateStyleAttr(vnode, elm, data, renderer);
+            const hasMatchingClass = validateClassAttr(vnode, elm, data, renderer);
+            if (isFalse(hasMatchingAttrs && hasMatchingStyleAttr && hasMatchingClass)) {
+                return false;
+            }
+        }
+        else {
+            // VStaticPartText
+            if (!hasCorrectNodeType(vnode, elm, 3 /* EnvNodeTypes.TEXT */, renderer)) {
+                return false;
+            }
+            updateTextContent(elm, part, owner, renderer);
+        }
+    }
+    return true;
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7557,5 +7800,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, shouldBeFormAssociated, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/** version: 6.3.3 */
+/** version: 6.4.0 */
 //# sourceMappingURL=index.js.map