@lwc/template-compiler 8.5.0 → 8.6.0

package/dist/index.js

@@ -11366,6 +11366,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;
     }
@@ -11539,6 +11541,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);
@@ -12541,6 +12544,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(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;
@@ -12987,14 +13015,33 @@ function serializeAttrs(element, codeGen) {
      */
     const attrs = [];
     let hasClassAttr = false;
-    const collector = ({ name, value, hasExpression, hasSvgUseHref, needsScoping, }) => {
+    const collector = ({ name, value, isProp, 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);
-        if (typeof value === 'string') {
+        // `<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}="${htmlEscape(String(value), true)}"`);
+            }
+        }
+        else if (typeof value === 'string') {
             let v = templateStringEscape(value);
             if (name === 'class') {
                 // ${0} maps to class token that will be appended to the string.
@@ -13030,12 +13077,25 @@ 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;
-            // 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}="${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}="${htmlEscape(v, true)}"`;
+            }
+            attrs.push(nameAndValue);
         }
         else {
             attrs.push(` ${escapedAttributeName}`);
@@ -13062,23 +13122,33 @@ function serializeAttrs(element, codeGen) {
         return {
             hasExpression,
             hasSvgUseHref,
+            isProp: false,
             needsScoping,
             name,
             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.
+    // 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: prop.attributeName,
-            value: prop.value.value,
+            name: attributeName,
+            value: value.value,
+            isProp: true,
         };
     })
         .forEach(collector);
@@ -14131,17 +14201,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;
@@ -14607,5 +14689,5 @@ function compile(source, filename, config) {
 }
 
 export { ElementDirectiveName, LWCDirectiveDomMode, LWCDirectiveRenderMode, LwcTagName, RootDirectiveName, TemplateDirectiveName, compile, compile as default, generateScopeTokens, kebabcaseToCamelcase, parse, toPropertyName };
-/** version: 8.5.0 */
+/** version: 8.6.0 */
 //# sourceMappingURL=index.js.map