@lwc/template-compiler 8.6.0 → 8.8.0

package/dist/index.cjs.js

@@ -12902,8 +12902,30 @@ function isStaticNode(node, apiVersion) {
     });
     // all directives are static-safe
     result &&= !directives.some((directive) => !STATIC_SAFE_DIRECTIVES.has(directive.name));
-    // all properties are static
-    result &&= properties.every((prop) => isLiteral(prop.value));
+    // Sanity check to ensure that only `<input value>`/`<input checked>` are treated as props for elements
+    /* v8 ignore start */
+    if (process.env.NODE_ENV === 'test' && isElement(node)) {
+        for (const { attributeName } of properties) {
+            if (node.name !== 'input' &&
+                !(attributeName === 'checked' || attributeName === 'value')) {
+                throw new Error(`Expected to only see <input value>/<input checked> treated as an element prop. ` +
+                    `Instead found <${node.name} ${attributeName}>`);
+            }
+        }
+    }
+    /* v8 ignore stop */
+    // `<input checked="...">` and `<input value="...">` have a peculiar attr/prop relationship, so the engine
+    // has historically treated them as props rather than attributes:
+    // https://github.com/salesforce/lwc/blob/b584d39/packages/%40lwc/template-compiler/src/parser/attribute.ts#L217-L221
+    // For example, an element might be rendered as `<input type=checkbox>` but `input.checked` could
+    // still return true. `value` behaves similarly. `value` and `checked` behave surprisingly
+    // because the attributes actually represent the "default" value rather than the current one:
+    // - https://jakearchibald.com/2024/attributes-vs-properties/#value-on-input-fields
+    // - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#checked
+    // For this reason, we currently avoid the static content optimization, and treat `value`/`checked` only as
+    // runtime props.
+    // TODO [#4775]: allow static optimization for `<input value>`/`<input checked>`
+    result &&= properties.length === 0;
     return result;
 }
 function collectStaticNodes(node, staticNodes, state) {
@@ -13039,33 +13061,14 @@ function serializeAttrs(element, codeGen) {
      */
     const attrs = [];
     let hasClassAttr = false;
-    const collector = ({ name, value, isProp, hasExpression, hasSvgUseHref, needsScoping, }) => {
+    const collector = ({ name, value, hasExpression, hasSvgUseHref, needsScoping, }) => {
         // Do not serialize boolean class/style attribute (consistent with non-static optimized)
         if (typeof value === 'boolean' && (name === 'class' || name === 'style')) {
             return;
         }
         // See W-16614169
         const escapedAttributeName = templateStringEscape(name);
-        // `<input checked="...">` and `<input value="...">` have a peculiar attr/prop relationship, so the engine
-        // has historically treated them as props rather than attributes:
-        // https://github.com/salesforce/lwc/blob/b584d39/packages/%40lwc/template-compiler/src/parser/attribute.ts#L217-L221
-        // For example, an element might be rendered as `<input type=checkbox>` but `input.checked` could
-        // still return true. `value` behaves similarly. `value` and `checked` behave surprisingly
-        // because the attributes actually represent the "default" value rather than the current one:
-        // - https://jakearchibald.com/2024/attributes-vs-properties/#value-on-input-fields
-        // - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#checked
-        if (isProp) {
-            // The below logic matches the behavior of non-static-optimized DOM nodes.
-            // There is no functional difference between e.g. `checked="checked"` and `checked` but we
-            // match byte-for-byte the non-static-optimized HTML that would be rendered.
-            if (name === 'checked' || (name === 'value' && value === '')) {
-                attrs.push(` ${escapedAttributeName}`);
-            }
-            else {
-                attrs.push(` ${escapedAttributeName}="${shared.htmlEscape(String(value), true)}"`);
-            }
-        }
-        else if (typeof value === 'string') {
+        if (typeof value === 'string') {
             let v = templateStringEscape(value);
             if (name === 'class') {
                 // ${0} maps to class token that will be appended to the string.
@@ -13091,7 +13094,7 @@ function serializeAttrs(element, codeGen) {
                 v = String(v.toLowerCase() !== 'false');
             }
             if (name === 'style' && !hasExpression) {
-                v = shared.normalizeStyleAttribute(v);
+                v = shared.normalizeStyleAttributeValue(v);
                 if (v === '') {
                     // Do not serialize empty style attribute (consistent with non-static optimized)
                     return;
@@ -13101,7 +13104,6 @@ function serializeAttrs(element, codeGen) {
             // Skip serializing here and handle it as if it were a dynamic attribute instead.
             // Note that, to maintain backwards compatibility with the non-static output, we treat the valueless
             // "boolean" format (e.g. `<div id>`) as the empty string, which is semantically equivalent.
-            // `isProp` corresponds to `value` or `checked` on an `<input>` which is treated as a prop at runtime.
             const needsPlaceholder = hasExpression || hasSvgUseHref || needsScoping;
             let nameAndValue;
             if (needsPlaceholder) {
@@ -13146,7 +13148,6 @@ function serializeAttrs(element, codeGen) {
         return {
             hasExpression,
             hasSvgUseHref,
-            isProp: false,
             needsScoping,
             name,
             value: hasExpression || hasSvgUseHref || needsScoping
@@ -13156,26 +13157,12 @@ function serializeAttrs(element, codeGen) {
         };
     })
         .forEach(collector);
-    // See note above about `<input value>`/`<input checked>`
-    element.properties
-        .map((prop) => {
-        const { attributeName, value } = prop;
-        // Sanity check to ensure that only `<input value>`/`<input checked>` are treated as props
-        /* v8 ignore start */
-        if (process.env.NODE_ENV === 'test') {
-            if (element.name !== 'input' &&
-                !(attributeName === 'checked' || attributeName === 'value')) {
-                throw new Error('Expected to only see `<input value>`/`<input checked>` here; instead found `<${element.name} ${attributeName}>');
-            }
-        }
-        /* v8 ignore stop */
-        return {
-            name: attributeName,
-            value: value.value,
-            isProp: true,
-        };
-    })
-        .forEach(collector);
+    /* v8 ignore start */
+    // TODO [#4775]: allow static optimization for `<input value>`/`<input checked>`
+    if (process.env.NODE_ENV === 'test' && element.properties.length > 0) {
+        throw new Error('Expected zero properties at this point, found ' + element.properties.length);
+    }
+    /* v8 ignore stop */
     // ${2} maps to style token attribute
     // ${3} maps to class attribute token + style token attribute
     // See buildParseFragmentFn for details.
@@ -14718,5 +14705,5 @@ exports.generateScopeTokens = generateScopeTokens;
 exports.kebabcaseToCamelcase = kebabcaseToCamelcase;
 exports.parse = parse;
 exports.toPropertyName = toPropertyName;
-/** version: 8.6.0 */
+/** version: 8.8.0 */
 //# sourceMappingURL=index.cjs.js.map