@lwc/template-compiler 6.3.3 → 6.4.0

package/dist/index.cjs.js

@@ -75,7 +75,10 @@ const DASHED_TAGNAME_ELEMENT_SET = new Set([
     'missing-glyph',
 ]);
 // Subset of LWC template directives that can safely be statically optimized
-const STATIC_SAFE_DIRECTIVES = new Set(['Ref']);
+const STATIC_SAFE_DIRECTIVES = new Set([
+    'Ref',
+    'Key',
+]);
 
 /*
  * Copyright (c) 2024, Salesforce, Inc.
@@ -87,7 +90,7 @@ function toPropertyName(attr) {
     let prop = '';
     let shouldUpperCaseNext = false;
     for (let i = 0; i < attr.length; i++) {
-        const char = attr.charAt(i);
+        const char = shared.StringCharAt.call(attr, i);
         if (char === '-') {
             shouldUpperCaseNext = true;
         }
@@ -9317,6 +9320,9 @@ function isProperty(node) {
 function isScopedSlotFragment(node) {
     return node.type === 'ScopedSlotFragment';
 }
+function isAttribute$1(node) {
+    return node.type === 'Attribute';
+}
 
 exports.LWCDirectiveDomMode = void 0;
 (function (LWCDirectiveDomMode) {
@@ -12602,6 +12608,18 @@ function parseClassNames(classNames) {
         .map((className) => className.trim())
         .filter((className) => className.length);
 }
+
+/*
+ * 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
+ */
+// This set keeps track of static safe elements that have dynamic text in their direct children.
+const STATIC_ELEMENT_WITH_DYNAMIC_TEXT_SET = new WeakSet();
+// This map keeps track of static safe elements to their transformed children.
+// The children are transformed so that contiguous text nodes are consolidated into arrays.
+const STATIC_ELEMENT_TO_DYNAMIC_TEXT_CHILDREN_CACHE = new WeakMap();
 function isStaticNode(node, apiVersion) {
     let result = true;
     const { name: nodeName, namespace = '', attributes, directives, properties } = node;
@@ -12614,8 +12632,9 @@ function isStaticNode(node, apiVersion) {
     // it is an element
     result &&= isElement(node);
     // all attrs are static-safe
+    // the criteria to determine safety can be found in computeAttrValue
     result &&= attributes.every(({ name, value }) => {
-        return (isLiteral(value) &&
+        const isStaticSafeLiteral = isLiteral(value) &&
             name !== 'slot' &&
             // check for ScopedId
             name !== 'id' &&
@@ -12625,7 +12644,13 @@ function isStaticNode(node, apiVersion) {
             !isSvgUseHref(nodeName, name, namespace) &&
             // Check for ScopedFragId
             !(isAllowedFragOnlyUrlsXHTML(nodeName, name, namespace) &&
-                isFragmentOnlyUrl(value.value)));
+                isFragmentOnlyUrl(value.value));
+        const isStaticSafeExpression = isExpression$1(value) &&
+            name !== 'slot' &&
+            // TODO [#3624]: Revisit whether svgs can be included in static content optimization
+            // svg href needs sanitization.
+            !isSvgUseHref(nodeName, name, namespace);
+        return isStaticSafeLiteral || isStaticSafeExpression;
     });
     // all directives are static-safe
     result &&= !directives.some((directive) => !STATIC_SAFE_DIRECTIVES.has(directive.name));
@@ -12634,30 +12659,40 @@ function isStaticNode(node, apiVersion) {
     return result;
 }
 function collectStaticNodes(node, staticNodes, state) {
-    let childrenAreStatic = true;
-    let nodeIsStatic;
+    let childrenAreStaticSafe = true;
+    let nodeIsStaticSafe;
     if (isText(node)) {
-        nodeIsStatic = isLiteral(node.value);
+        nodeIsStaticSafe = true;
     }
     else if (isComment(node)) {
-        nodeIsStatic = true;
+        nodeIsStaticSafe = true;
     }
     else {
+        let hasDynamicText = false;
         // it is ElseBlock | ForBlock | If | BaseElement
         node.children.forEach((childNode) => {
             collectStaticNodes(childNode, staticNodes, state);
-            childrenAreStatic &&= staticNodes.has(childNode);
+            childrenAreStaticSafe &&= staticNodes.has(childNode);
+            // Collect nodes that have dynamic text ahead of time.
+            // We only need to know if the direct child has dynamic text.
+            hasDynamicText ||= isText(childNode) && !isStringLiteral(childNode.value);
         });
         // for IfBlock and ElseifBlock, traverse down the else branch
         if (isConditionalParentBlock(node) && node.else) {
             collectStaticNodes(node.else, staticNodes, state);
         }
-        nodeIsStatic =
+        nodeIsStaticSafe =
             isBaseElement(node) &&
                 !isCustomRendererHookRequired(node, state) &&
                 isStaticNode(node, state.config.apiVersion);
+        if (nodeIsStaticSafe && hasDynamicText) {
+            // Track when the static element contains dynamic text.
+            // This will alter the way the children need to be traversed to apply static parts.
+            // See transformStaticChildren below.
+            STATIC_ELEMENT_WITH_DYNAMIC_TEXT_SET.add(node);
+        }
     }
-    if (nodeIsStatic && childrenAreStatic) {
+    if (nodeIsStaticSafe && childrenAreStaticSafe) {
         staticNodes.add(node);
     }
 }
@@ -12668,6 +12703,62 @@ function getStaticNodes(root, state) {
     });
     return staticNodes;
 }
+// The purpose of this function is to concatenate the contiguous text nodes into a single array
+// to simplify the traversing logic when generating static parts and serializing the element.
+function transformStaticChildren(elm) {
+    const children = elm.children;
+    if (!children.length || !STATIC_ELEMENT_WITH_DYNAMIC_TEXT_SET.has(elm)) {
+        // The element either has no children or its children does not contain dynamic text.
+        return children;
+    }
+    if (STATIC_ELEMENT_TO_DYNAMIC_TEXT_CHILDREN_CACHE.has(elm)) {
+        return STATIC_ELEMENT_TO_DYNAMIC_TEXT_CHILDREN_CACHE.get(elm);
+    }
+    const result = [];
+    const len = children.length;
+    let current;
+    let next;
+    let contiguousTextNodes = null;
+    for (let i = 0; i < len; i++) {
+        current = children[i];
+        if (!isText(current)) {
+            contiguousTextNodes = null;
+            result.push(current);
+        }
+        else {
+            if (!shared.isNull(contiguousTextNodes)) {
+                // Already in a contiguous text node chain
+                // All contiguous nodes represent an expression in the source, it's guaranteed by the parser.
+                contiguousTextNodes.push(current);
+            }
+            else {
+                next = children[i + 1];
+                if (isExpression$1(current) || (!shared.isUndefined(next) && isText(next))) {
+                    // Text nodes can appear as follows:
+                    // 1. A single text literal node.
+                    // 2. A single text expression node.
+                    // 3. Contiguous series of text nodes (literal/expression mixed) with at least 1 expression.
+                    // When there is an expression in the source, the text nodes are split into contiguous text nodes.
+                    // When there is no expression in the source, the text will appear as a single text literal.
+                    // We normalize all of the contiguous text nodes or single text expression to an array.
+                    // Single text literal nodes (no expression or are not part of a contiguous set of text nodes) remain text nodes
+                    // and will not be consolidated to an array.
+                    // This is to normalize the traversal behavior when creating static parts and when serializing
+                    // the elements.
+                    contiguousTextNodes = [current];
+                }
+                // When contiguousTextNodes is null it is a single string literal.
+                result.push(contiguousTextNodes ?? current);
+            }
+        }
+    }
+    STATIC_ELEMENT_TO_DYNAMIC_TEXT_CHILDREN_CACHE.set(elm, result);
+    return result;
+}
+// Dynamic text is consolidated from individual text arrays into a single Text[].
+// Static text = a single text literal node (not in an array).
+// Dynamic text = At least 1 text expression node + 0 or more text literal nodes (always in an array).
+const isDynamicText = (nodes) => shared.isArray(nodes) && shared.ArrayEvery.call(nodes, isText);
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -12694,7 +12785,7 @@ const rawContentElements = new Set([
 function templateStringEscape(str) {
     return str.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
 }
-function serializeAttrs(element) {
+function serializeAttrs(element, codeGen) {
     /**
      * 0: styleToken in existing class attr
      * 1: styleToken for added class attr
@@ -12702,24 +12793,36 @@ function serializeAttrs(element) {
      */
     const attrs = [];
     let hasClassAttr = false;
-    const collector = ({ name, value }) => {
+    const collector = ({ name, value, hasExpression, }) => {
         let v = typeof value === 'string' ? templateStringEscape(value) : value;
         if (name === 'class') {
             hasClassAttr = true;
-            v += '${0}';
+            // ${0} maps to class token that will be appended to the string.
+            // See buildParseFragmentFn for details.
+            // The token is only needed when the class attribute is static.
+            // The token will be injected at runtime for expressions in parseFragmentFn.
+            if (!hasExpression) {
+                v += '${0}';
+            }
         }
         if (typeof v === 'string') {
-            attrs.push(`${name}="${shared.htmlEscape(v, true)}"`);
+            // Inject a placeholder where the staticPartId will go when an expression occurs.
+            // This is only needed for SSR to inject the expression value during serialization.
+            attrs.push(hasExpression ? `\${"${v}"}` : ` ${name}="${shared.htmlEscape(v, true)}"`);
         }
         else {
-            attrs.push(name);
+            attrs.push(` ${name}`);
         }
     };
     element.attributes
         .map((attr) => {
+        const hasExpression = isExpression$1(attr.value);
         return {
+            hasExpression,
             name: attr.name,
-            value: attr.value.value,
+            value: hasExpression
+                ? codeGen.getStaticExpressionToken(attr)
+                : attr.value.value,
         };
     })
         .forEach(collector);
@@ -12735,31 +12838,42 @@ function serializeAttrs(element) {
         };
     })
         .forEach(collector);
-    return (attrs.length > 0 ? ' ' : '') + attrs.join(' ') + (hasClassAttr ? '${2}' : '${3}');
+    // ${2} maps to style token attribute
+    // ${3} maps to class attribute token + style token attribute
+    // See buildParseFragmentFn for details.
+    return attrs.join('') + (hasClassAttr ? '${2}' : '${3}');
 }
-function serializeChildren(children, parentTagName, preserveComments) {
+function serializeChildren(node, parentTagName, codeGen) {
     let html = '';
-    children.forEach((child) => {
+    for (const child of transformStaticChildren(node)) {
         /* istanbul ignore else  */
-        if (isElement(child)) {
-            html += serializeStaticElement(child, preserveComments);
+        if (isDynamicText(child)) {
+            html += serializeDynamicTextNode(child, codeGen);
         }
         else if (isText(child)) {
-            html += serializeTextNode(child, rawContentElements.has(parentTagName.toUpperCase()));
+            html += serializeStaticTextNode(child, rawContentElements.has(parentTagName.toUpperCase()));
+        }
+        else if (isElement(child)) {
+            html += serializeStaticElement(child, codeGen);
         }
         else if (isComment(child)) {
-            html += serializeCommentNode(child, preserveComments);
+            html += serializeCommentNode(child, codeGen.preserveComments);
         }
         else {
             throw new TypeError('Unknown node found while serializing static content. Allowed nodes types are: Element, Text and Comment.');
         }
-    });
+    }
     return html;
 }
 function serializeCommentNode(comment, preserveComment) {
     return preserveComment ? `<!--${shared.htmlEscape(templateStringEscape(comment.value))}-->` : '';
 }
-function serializeTextNode(text, useRawContent) {
+function serializeDynamicTextNode(textNodes, codeGen) {
+    // The first text node is they key for contiguous text nodes and single expressions.
+    // This is guaranteed to have a value by the isDynamicText check.
+    return `\${"${codeGen.getStaticExpressionToken(textNodes[0])}"}`;
+}
+function serializeStaticTextNode(text, useRawContent) {
     let content;
     if (useRawContent) {
         content = text.raw;
@@ -12767,19 +12881,20 @@ function serializeTextNode(text, useRawContent) {
     else {
         content = shared.htmlEscape(text.value.value);
     }
-    return templateStringEscape(content);
+    content = templateStringEscape(content);
+    return content;
 }
-function serializeStaticElement(element, preserveComments) {
+function serializeStaticElement(element, codeGen) {
     const { name: tagName, namespace } = element;
     const isForeignElement = namespace !== shared.HTML_NAMESPACE;
     const hasChildren = element.children.length > 0;
-    let html = `<${tagName}${serializeAttrs(element)}`;
+    let html = `<${tagName}${serializeAttrs(element, codeGen)}`;
     if (isForeignElement && !hasChildren) {
         html += '/>';
         return html;
     }
     html += '>';
-    html += serializeChildren(element.children, tagName, preserveComments);
+    html += serializeChildren(element, tagName, codeGen);
     if (!shared.isVoidElement(tagName, namespace) || hasChildren) {
         html += `</${tagName}>`;
     }
@@ -12931,6 +13046,42 @@ function collectParamsFromMemberExpression(_node, _vars) {
     // the AST, we'll validate anyway.
     errors.invariant(false, errors.ParserDiagnostics.INVALID_EXPR_ARROW_FN_PARAM, ['member expressions']);
 }
+function bindAttributeExpression(attr, element, codeGen, addLegacySanitizationHook) {
+    const { name: elmName, namespace = '' } = element;
+    const { value: attrValue } = attr;
+    // Evaluate properties based on their attribute name
+    const attrName = isProperty(attr) ? attr.attributeName : attr.name;
+    const isUsedAsAttribute = isAttribute(element, attrName);
+    const expression = codeGen.bindExpression(attrValue);
+    // TODO [#2012]: Normalize global boolean attrs values passed to custom elements as props
+    if (isUsedAsAttribute && shared.isBooleanAttribute(attrName, elmName)) {
+        // We need to do some manipulation to allow the diffing algorithm add/remove the attribute
+        // without handling special cases at runtime.
+        return codeGen.genBooleanAttributeExpr(expression);
+    }
+    if (attrName === 'tabindex') {
+        return codeGen.genTabIndex([expression]);
+    }
+    if (attrName === 'id' || isIdReferencingAttribute(attrName)) {
+        return codeGen.genScopedId(expression);
+    }
+    if (codeGen.scopeFragmentId && isAllowedFragOnlyUrlsXHTML(elmName, attrName, namespace)) {
+        return codeGen.genScopedFragId(expression);
+    }
+    if (isSvgUseHref(elmName, attrName, namespace)) {
+        if (addLegacySanitizationHook) {
+            codeGen.usedLwcApis.add('sanitizeAttribute');
+            return callExpression(identifier('sanitizeAttribute'), [
+                literal$1(elmName),
+                literal$1(namespace),
+                literal$1(attrName),
+                codeGen.genScopedFragId(expression),
+            ]);
+        }
+        return codeGen.genScopedFragId(expression);
+    }
+    return expression;
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -12944,27 +13095,27 @@ const doStructuredClone = typeof structuredClone === 'function'
     ? structuredClone
     : (obj) => JSON.parse(JSON.stringify(obj));
 const RENDER_APIS = {
-    iterator: { name: 'i', alias: 'api_iterator' },
-    flatten: { name: 'f', alias: 'api_flatten' },
-    element: { name: 'h', alias: 'api_element' },
-    slot: { name: 's', alias: 'api_slot' },
+    bind: { name: 'b', alias: 'api_bind' },
+    comment: { name: 'co', alias: 'api_comment' },
     customElement: { name: 'c', alias: 'api_custom_element' },
-    dynamicCtor: { name: 'dc', alias: 'api_dynamic_component' },
     // TODO [#3331]: remove usage of lwc:dynamic in 246
     deprecatedDynamicCtor: { name: 'ddc', alias: 'api_deprecated_dynamic_component' },
-    bind: { name: 'b', alias: 'api_bind' },
-    text: { name: 't', alias: 'api_text' },
+    dynamicCtor: { name: 'dc', alias: 'api_dynamic_component' },
     dynamicText: { name: 'd', alias: 'api_dynamic_text' },
+    element: { name: 'h', alias: 'api_element' },
+    flatten: { name: 'f', alias: 'api_flatten' },
+    fragment: { name: 'fr', alias: 'api_fragment' },
+    iterator: { name: 'i', alias: 'api_iterator' },
     key: { name: 'k', alias: 'api_key' },
-    tabindex: { name: 'ti', alias: 'api_tab_index' },
-    scopedId: { name: 'gid', alias: 'api_scoped_id' },
-    scopedFragId: { name: 'fid', alias: 'api_scoped_frag_id' },
-    comment: { name: 'co', alias: 'api_comment' },
     sanitizeHtmlContent: { name: 'shc', alias: 'api_sanitize_html_content' },
-    fragment: { name: 'fr', alias: 'api_fragment' },
-    staticFragment: { name: 'st', alias: 'api_static_fragment' },
+    scopedFragId: { name: 'fid', alias: 'api_scoped_frag_id' },
+    scopedId: { name: 'gid', alias: 'api_scoped_id' },
     scopedSlotFactory: { name: 'ssf', alias: 'api_scoped_slot_factory' },
+    slot: { name: 's', alias: 'api_slot' },
+    staticFragment: { name: 'st', alias: 'api_static_fragment' },
     staticPart: { name: 'sp', alias: 'api_static_part' },
+    tabindex: { name: 'ti', alias: 'api_tab_index' },
+    text: { name: 't', alias: 'api_text' },
 };
 class CodeGen {
     constructor({ root, state, scopeFragmentId, }) {
@@ -12980,6 +13131,7 @@ class CodeGen {
         this.slotNames = new Set();
         this.memorizedIds = [];
         this.referencedComponents = new Set();
+        this.staticExpressionMap = new WeakMap();
         this.root = root;
         if (state.config.enableStaticContentOptimization) {
             this.staticNodes = getStaticNodes(root, state);
@@ -13028,6 +13180,9 @@ class CodeGen {
         return this._renderApiCall(RENDER_APIS.deprecatedDynamicCtor, args);
     }
     genText(value) {
+        return this._renderApiCall(RENDER_APIS.text, [this.genConcatenatedText(value)]);
+    }
+    genConcatenatedText(value) {
         const mappedValues = value.map((v) => {
             return typeof v === 'string'
                 ? literal$1(v)
@@ -13037,7 +13192,7 @@ class CodeGen {
         for (let i = 1, n = mappedValues.length; i < n; i++) {
             textConcatenation = binaryExpression('+', textConcatenation, mappedValues[i]);
         }
-        return this._renderApiCall(RENDER_APIS.text, [textConcatenation]);
+        return textConcatenation;
     }
     genComment(value) {
         return this._renderApiCall(RENDER_APIS.comment, [literal$1(value)]);
@@ -13058,9 +13213,6 @@ class CodeGen {
     genFlatten(children) {
         return this._renderApiCall(RENDER_APIS.flatten, children);
     }
-    genKey(compilerKey, value) {
-        return this._renderApiCall(RENDER_APIS.key, [compilerKey, value]);
-    }
     genScopedId(id) {
         if (typeof id === 'string') {
             return this._renderApiCall(RENDER_APIS.scopedId, [literal$1(id)]);
@@ -13121,6 +13273,28 @@ class CodeGen {
         this.hasRefs = true;
         return property$1(identifier('ref'), ref.value);
     }
+    genKeyExpression(ref, slotParentName) {
+        if (ref) {
+            // If element has user-supplied `key` or is in iterator, call `api.k`
+            const forKeyExpression = this.bindExpression(ref.value);
+            const key = this.generateKey();
+            return this._renderApiCall(RENDER_APIS.key, [literal$1(key), forKeyExpression]);
+        }
+        else {
+            // If standalone element with no user-defined key
+            let key = this.generateKey();
+            // Parent slot name could be the empty string
+            if (slotParentName !== undefined) {
+                // Prefixing the key is necessary to avoid conflicts with default content for the
+                // slot which might have similar keys. Each vnode will always have a key that starts
+                // with a numeric character from compiler. In this case, we add a unique notation
+                // for slotted vnodes keys, e.g.: `@foo:1:1`. Note that this is *not* needed for
+                // dynamic keys, since `api.k` already scopes based on the iteration.
+                key = `@${slotParentName}:${key}`;
+            }
+            return literal$1(key);
+        }
+    }
     /**
      * This routine generates an expression that avoids
      * computing the sanitized html of a raw html if it does not change
@@ -13230,10 +13404,9 @@ class CodeGen {
         return expression;
     }
     genStaticElement(element, slotParentName) {
-        const key = slotParentName !== undefined
-            ? `@${slotParentName}:${this.generateKey()}`
-            : this.generateKey();
-        const html = serializeStaticElement(element, this.preserveComments);
+        const staticParts = this.genStaticParts(element);
+        // Generate static parts prior to serialization to inject the corresponding static part Id into the serialized output.
+        const html = serializeStaticElement(element, this);
         const parseMethod = element.name !== 'svg' && element.namespace === shared.SVG_NAMESPACE
             ? PARSE_SVG_FRAGMENT_METHOD_NAME
             : PARSE_FRAGMENT_METHOD_NAME;
@@ -13254,9 +13427,14 @@ class CodeGen {
             identifier: identifier$1,
             expr,
         });
-        const args = [callExpression(identifier$1, []), literal$1(key)];
+        // Keys are only supported at the top level of a static block, and are serialized directly in the args for
+        // the `api_static_fragment` call. We don't need to support keys in static parts (i.e. children of
+        // the top-level element), because the compiler ignores any keys that aren't direct children of a
+        // for:each block (see error code 1149 - "KEY_SHOULD_BE_IN_ITERATION").
+        const key = element.directives.find(isKeyDirective);
+        const keyExpression = this.genKeyExpression(key, slotParentName);
+        const args = [identifier$1, keyExpression];
         // Only add the third argument (staticParts) if this element needs it
-        const staticParts = this.genStaticParts(element);
         if (staticParts) {
             args.push(staticParts);
         }
@@ -13264,52 +13442,106 @@ class CodeGen {
     }
     genStaticParts(element) {
         const stack = [element];
-        const partIdsToDatabagProps = new Map();
+        const partIdsToArgs = new Map();
         let partId = -1;
-        const addDatabagProp = (prop) => {
-            let databags = partIdsToDatabagProps.get(partId);
-            if (!databags) {
-                databags = [];
-                partIdsToDatabagProps.set(partId, databags);
+        const getPartIdArgs = (partId) => {
+            let args = partIdsToArgs.get(partId);
+            if (!args) {
+                args = { text: literal$1(null), databag: literal$1(null) };
+                partIdsToArgs.set(partId, args);
             }
-            databags.push(prop);
+            return args;
+        };
+        const setPartIdText = (text) => {
+            const args = getPartIdArgs(partId);
+            args.text = text;
+        };
+        const setPartIdDatabag = (databag) => {
+            const args = getPartIdArgs(partId);
+            args.databag = objectExpression(databag);
         };
         // Depth-first traversal. We assign a partId to each element, which is an integer based on traversal order.
         while (stack.length > 0) {
-            const node = stack.shift();
+            const current = stack.shift();
             // Skip comment nodes in parts count, as they will be stripped in production, unless when `lwc:preserve-comments` is enabled
-            if (!isComment(node) || this.preserveComments) {
+            if (isDynamicText(current) || !isComment(current) || this.preserveComments) {
                 partId++;
             }
-            if (isElement(node)) {
+            if (isDynamicText(current)) {
+                const textNodes = current;
+                const partToken = `${"t" /* STATIC_PART_TOKEN_ID.TEXT */}${partId}`;
+                // Use the first text node as the key.
+                // Dynamic text is guaranteed to have at least 1 text node in the array by transformStaticChildren.
+                this.staticExpressionMap.set(textNodes[0], partToken);
+                const concatenatedText = this.genConcatenatedText(textNodes.map(({ value }) => isStringLiteral(value) ? value.value : this.bindExpression(value)));
+                setPartIdText(concatenatedText);
+            }
+            else if (isElement(current)) {
+                const elm = current;
+                const databag = [];
                 // has event listeners
-                if (node.listeners.length) {
-                    addDatabagProp(this.genEventListeners(node.listeners));
+                if (elm.listeners.length) {
+                    databag.push(this.genEventListeners(elm.listeners));
                 }
-                // see STATIC_SAFE_DIRECTIVES for what's allowed here
-                for (const directive of node.directives) {
+                // See STATIC_SAFE_DIRECTIVES for what's allowed here.
+                // Also note that we don't generate the 'key' here, because we only support it at the top level
+                // directly passed into the `api_static_fragment` function, not as a part.
+                for (const directive of elm.directives) {
                     if (directive.name === 'Ref') {
-                        addDatabagProp(this.genRef(directive));
+                        databag.push(this.genRef(directive));
                     }
                 }
-                // For depth-first traversal, children must be preprended in order, so that they are processed before
+                const attributeExpressions = [];
+                for (const attribute of elm.attributes) {
+                    const { name, value } = attribute;
+                    if (isExpression$1(value)) {
+                        let partToken = '';
+                        if (name === 'style') {
+                            partToken = `${"s" /* STATIC_PART_TOKEN_ID.STYLE */}${partId}`;
+                            databag.push(property$1(identifier('style'), this.bindExpression(value)));
+                        }
+                        else if (name === 'class') {
+                            partToken = `${"c" /* STATIC_PART_TOKEN_ID.CLASS */}${partId}`;
+                            databag.push(property$1(identifier('className'), this.bindExpression(value)));
+                        }
+                        else {
+                            partToken = `${"a" /* STATIC_PART_TOKEN_ID.ATTRIBUTE */}${partId}:${name}`;
+                            attributeExpressions.push(property$1(literal$1(name), bindAttributeExpression(attribute, elm, this, false)));
+                        }
+                        this.staticExpressionMap.set(attribute, partToken);
+                    }
+                }
+                if (attributeExpressions.length) {
+                    databag.push(property$1(identifier('attrs'), objectExpression(attributeExpressions)));
+                }
+                if (databag.length) {
+                    setPartIdDatabag(databag);
+                }
+                // For depth-first traversal, children must be prepended in order, so that they are processed before
                 // siblings. Note that this is consistent with the order used in the diffing algo as well as
                 // `traverseAndSetElements` in @lwc/engine-core.
-                stack.unshift(...node.children);
+                stack.unshift(...transformStaticChildren(elm));
             }
         }
-        if (partIdsToDatabagProps.size === 0) {
-            return undefined; // no databags needed
+        if (partIdsToArgs.size === 0) {
+            return undefined; // no parts needed
         }
-        return arrayExpression([...partIdsToDatabagProps.entries()].map(([partId, databagProperties]) => {
-            return this.genStaticPart(partId, databagProperties);
+        return arrayExpression([...partIdsToArgs.entries()].map(([partId, { databag, text }]) => {
+            return this.genStaticPart(partId, databag, text);
         }));
     }
-    genStaticPart(partId, databagProperties) {
-        return this._renderApiCall(RENDER_APIS.staticPart, [
-            literal$1(partId),
-            objectExpression(databagProperties),
-        ]);
+    genStaticPart(partId, data, text) {
+        return this._renderApiCall(RENDER_APIS.staticPart, [literal$1(partId), data, text]);
+    }
+    getStaticExpressionToken(node) {
+        const token = this.staticExpressionMap.get(node);
+        /* istanbul ignore if */
+        if (shared.isUndefined(token)) {
+            // It should not be possible to hit this code path
+            const nodeName = isAttribute$1(node) ? node.name : 'text node';
+            throw new Error(`Template compiler internal error, unable to map ${nodeName} to a static expression.`);
+        }
+        return token;
     }
 }
 
@@ -13500,13 +13732,15 @@ function format(templateFn, codeGen) {
 function transform(codeGen) {
     const instrumentation = codeGen.state.config.instrumentation;
     function transformElement(element, slotParentName) {
+        // TODO [#4077]: Move databag gathering to after static element check as it doesn't seem to be used by static
+        // content optimization.
         const databag = elementDataBag(element, slotParentName);
-        let res;
         if (codeGen.staticNodes.has(element) && isElement(element)) {
             // do not process children of static nodes.
             return codeGen.genStaticElement(element, slotParentName);
         }
         const children = transformChildren(element);
+        let res;
         const { name } = element;
         // lwc:dynamic directive
         const deprecatedDynamicDirective = element.directives.find(isDynamicDirective);
@@ -13746,36 +13980,7 @@ function transform(codeGen) {
         const attrName = isProperty(attr) ? attr.attributeName : attr.name;
         const isUsedAsAttribute = isAttribute(element, attrName);
         if (isExpression$1(attrValue)) {
-            const expression = codeGen.bindExpression(attrValue);
-            // TODO [#2012]: Normalize global boolean attrs values passed to custom elements as props
-            if (isUsedAsAttribute && shared.isBooleanAttribute(attrName, elmName)) {
-                // We need to do some manipulation to allow the diffing algorithm add/remove the attribute
-                // without handling special cases at runtime.
-                return codeGen.genBooleanAttributeExpr(expression);
-            }
-            if (attrName === 'tabindex') {
-                return codeGen.genTabIndex([expression]);
-            }
-            if (attrName === 'id' || isIdReferencingAttribute(attrName)) {
-                return codeGen.genScopedId(expression);
-            }
-            if (codeGen.scopeFragmentId &&
-                isAllowedFragOnlyUrlsXHTML(elmName, attrName, namespace)) {
-                return codeGen.genScopedFragId(expression);
-            }
-            if (isSvgUseHref(elmName, attrName, namespace)) {
-                if (addLegacySanitizationHook) {
-                    codeGen.usedLwcApis.add('sanitizeAttribute');
-                    return callExpression(identifier('sanitizeAttribute'), [
-                        literal$1(elmName),
-                        literal$1(namespace),
-                        literal$1(attrName),
-                        codeGen.genScopedFragId(expression),
-                    ]);
-                }
-                return codeGen.genScopedFragId(expression);
-            }
-            return expression;
+            return bindAttributeExpression(attr, element, codeGen, addLegacySanitizationHook);
         }
         else if (isStringLiteral(attrValue)) {
             if (attrName === 'id') {
@@ -13926,26 +14131,7 @@ function transform(codeGen) {
             data.push(property$1(identifier('context'), contextObj));
         }
         // Key property on VNode
-        if (forKey) {
-            // If element has user-supplied `key` or is in iterator, call `api.k`
-            const forKeyExpression = codeGen.bindExpression(forKey.value);
-            const generatedKey = codeGen.genKey(literal$1(codeGen.generateKey()), forKeyExpression);
-            data.push(property$1(identifier('key'), generatedKey));
-        }
-        else {
-            // If standalone element with no user-defined key
-            let key = codeGen.generateKey();
-            // Parent slot name could be the empty string
-            if (slotParentName !== undefined) {
-                // Prefixing the key is necessary to avoid conflicts with default content for the
-                // slot which might have similar keys. Each vnode will always have a key that starts
-                // with a numeric character from compiler. In this case, we add a unique notation
-                // for slotted vnodes keys, e.g.: `@foo:1:1`. Note that this is *not* needed for
-                // dynamic keys, since `api.k` already scopes based on the iteration.
-                key = `@${slotParentName}:${key}`;
-            }
-            data.push(property$1(identifier('key'), literal$1(key)));
-        }
+        data.push(property$1(identifier('key'), codeGen.genKeyExpression(forKey, slotParentName)));
         // Event handler
         if (listeners.length) {
             data.push(codeGen.genEventListeners(listeners));
@@ -14059,5 +14245,5 @@ function compile(source, config) {
 exports.compile = compile;
 exports.default = compile;
 exports.parse = parse;
-/** version: 6.3.3 */
+/** version: 6.4.0 */
 //# sourceMappingURL=index.cjs.js.map