@lwc/template-compiler 8.5.0 → 8.7.0

package/dist/index.cjs.js

@@ -11390,6 +11390,8 @@ function isAttribute(element, attrName) {
     }
     // Handle input tag value="" and checked attributes that are only used for state initialization.
     // Because .setAttribute() won't update the value, those attributes should be considered as props.
+    // Note: this is tightly-coupled with static-element-serializer.ts which treats `<input checked="...">`
+    // and `<input value="...">` as special because of the logic below.
     if (element.name === 'input' && (attrName === 'value' || attrName === 'checked')) {
         return false;
     }
@@ -11563,6 +11565,7 @@ function parseElement(ctx, parse5Elm, parentNode, parse5ParentLocation) {
         applyKey(ctx, parsedAttr, element);
         applyLwcDirectives(ctx, parsedAttr, element);
         applyAttributes(ctx, parsedAttr, element);
+        validateSlotAttribute(ctx, parsedAttr, parentNode, element);
         validateElement(ctx, element, parse5Elm);
         validateAttributes(ctx, parsedAttr, element);
         validateProperties(ctx, element);
@@ -12565,6 +12568,31 @@ function validateAttributes(ctx, parsedAttr, element) {
         }
     }
 }
+function validateSlotAttribute(ctx, parsedAttr, parentNode, element) {
+    const slotAttr = parsedAttr.get('slot');
+    if (!slotAttr) {
+        return;
+    }
+    function isElementOrSlot(node) {
+        return isElement(node) || isSlot(node);
+    }
+    // Find the nearest ancestor that is an element or `<slot>`, and stop if we hit a component.
+    // E.g. this should warn due to the `<div>`: `<x-foo><div><span slot=bar></span></div></x-foo>`
+    // And this should _not_ warn: `<div><x-foo><span slot=bar></span></x-foo></div>`
+    const elementOrSlotAncestor = ctx.findAncestor(isElementOrSlot, ({ current }) => current && !isComponent(current) && !isExternalComponent(current), parentNode);
+    // Warn if a `slot` attribute is on an element that isn't an immediate child of a containing LWC component or
+    // `lwc:external` component. This is a case that all three of native-shadow/synthetic-shadow/light DOM will
+    // simply ignore, but it's good to warn, so that developers realize that they may be making a mistake.
+    // Note that, for the purposes of being considered an "immediate child," virtual elements like `for:each` and
+    // `lwc:if` don't count - only rendered elements (including `<slot>`s) count.
+    // Example of invalid usage: `<x-foo><div><span slot=bar></span></div></x-foo>`
+    if (elementOrSlotAncestor) {
+        ctx.warnOnNode(errors.ParserDiagnostics.IGNORED_SLOT_ATTRIBUTE_IN_CHILD, slotAttr, [
+            `<${element.name}>`,
+            `<${elementOrSlotAncestor.name}>`,
+        ]);
+    }
+}
 function validateProperties(ctx, element) {
     for (const prop of element.properties) {
         const { attributeName: attrName, value } = prop;
@@ -12874,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) {
@@ -13055,11 +13105,23 @@ function serializeAttrs(element, codeGen) {
             // 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.
             const needsPlaceholder = hasExpression || hasSvgUseHref || needsScoping;
-            // 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(needsPlaceholder
-                ? `\${"${v}"}`
-                : ` ${escapedAttributeName}="${shared.htmlEscape(v, true)}"`);
+            let nameAndValue;
+            if (needsPlaceholder) {
+                // 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.
+                nameAndValue = `\${"${v}"}`;
+            }
+            else if (v === '') {
+                // In HTML, there is no difference between the empty string value (`<div foo="">`) and "boolean true"
+                // (`<div foo>`). They are both parsed identically, and the DOM treats them the same (`getAttribute`
+                // returns the empty string). Here we prefer the shorter format.
+                // https://html.spec.whatwg.org/multipage/introduction.html#a-quick-introduction-to-html:syntax-attributes
+                nameAndValue = ` ${escapedAttributeName}`;
+            }
+            else {
+                nameAndValue = ` ${escapedAttributeName}="${shared.htmlEscape(v, true)}"`;
+            }
+            attrs.push(nameAndValue);
         }
         else {
             attrs.push(` ${escapedAttributeName}`);
@@ -13091,21 +13153,16 @@ function serializeAttrs(element, codeGen) {
             value: hasExpression || hasSvgUseHref || needsScoping
                 ? codeGen.getStaticExpressionToken(attr)
                 : value.value,
+            elementName: element.name,
         };
     })
         .forEach(collector);
-    // This is tightly coupled with the logic in the parser that decides when an attribute should be
-    // a property: https://github.com/salesforce/lwc/blob/master/packages/%40lwc/template-compiler/src/parser/attribute.ts#L198-L218
-    // Because a component can't be a static element, we only look in the property bag on value and checked attribute
-    // from the input.
-    element.properties
-        .map((prop) => {
-        return {
-            name: prop.attributeName,
-            value: prop.value.value,
-        };
-    })
-        .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.
@@ -14155,17 +14212,29 @@ function transform(codeGen) {
         const children = parent.children;
         const childrenIterator = children[Symbol.iterator]();
         let current;
+        function isTextOrIgnoredComment(node) {
+            return isText(node) || (isComment(node) && !codeGen.preserveComments);
+        }
         while ((current = childrenIterator.next()) && !current.done) {
             let child = current.value;
-            if (isText(child)) {
+            // Concatenate contiguous text nodes together (while skipping ignored comments)
+            // E.g. `<div>{foo}{bar}</div>` can be concatenated into a single text node expression,
+            // and so can `<div>{foo}<!-- baz -->{bar}</div>` if comments are ignored.
+            if (isTextOrIgnoredComment(child)) {
                 const continuousText = [];
                 // Consume all the contiguous text nodes.
                 do {
-                    continuousText.push(child);
+                    if (isText(child)) {
+                        continuousText.push(child);
+                    }
                     current = childrenIterator.next();
                     child = current.value;
-                } while (!current.done && isText(child));
-                res.push(transformText(continuousText));
+                } while (!current.done && isTextOrIgnoredComment(child));
+                // Only push an api_text call if we actually have text to render.
+                // (We might just have iterated through a sequence of ignored comments.)
+                if (continuousText.length) {
+                    res.push(transformText(continuousText));
+                }
                 // Early exit if a text node is the last child node.
                 if (current.done) {
                     break;
@@ -14636,5 +14705,5 @@ exports.generateScopeTokens = generateScopeTokens;
 exports.kebabcaseToCamelcase = kebabcaseToCamelcase;
 exports.parse = parse;
 exports.toPropertyName = toPropertyName;
-/** version: 8.5.0 */
+/** version: 8.7.0 */
 //# sourceMappingURL=index.cjs.js.map