@lwc/template-compiler 7.0.3-alpha.0 → 7.0.3

package/dist/index.js

@@ -12937,15 +12937,15 @@ function parseStyleText(cssText) {
     }
     return styleMap;
 }
+const IMPORTANT_FLAG = /\s*!\s*important\s*$/i;
 // Given a map of CSS property keys to values, return an array AST like:
 // ['color', 'blue', false]    // { color: 'blue' }
 // ['background', 'red', true] // { background: 'red !important' }
 function styleMapToStyleDeclsAST(styleMap) {
     const styles = Object.entries(styleMap).map(([key, value]) => {
-        const important = value.endsWith('!important');
+        const important = IMPORTANT_FLAG.test(value);
         if (important) {
-            // trim off the trailing "!important" (10 chars)
-            value = value.substring(0, value.length - 10).trim();
+            value = value.replace(IMPORTANT_FLAG, '').trim();
         }
         return [key, value, important];
     });
@@ -12986,9 +12986,6 @@ function isStaticNode(node, apiVersion) {
     result &&= attributes.every(({ name, value }) => {
         const isStaticSafeLiteral = isLiteral(value) &&
             name !== 'slot' &&
-            // check for ScopedId
-            name !== 'id' &&
-            !isIdReferencingAttribute(name) &&
             // svg href needs sanitization.
             !isSvgUseHref(nodeName, name, namespace) &&
             // Check for ScopedFragId
@@ -13137,7 +13134,7 @@ function serializeAttrs(element, codeGen) {
      */
     const attrs = [];
     let hasClassAttr = false;
-    const collector = ({ name, value, hasExpression, }) => {
+    const collector = ({ name, value, hasExpression, isIdOrIdRef, }) => {
         let v = typeof value === 'string' ? templateStringEscape(value) : value;
         if (name === 'class') {
             hasClassAttr = true;
@@ -13158,9 +13155,15 @@ function serializeAttrs(element, codeGen) {
             v = String(v.toLowerCase() !== 'false');
         }
         if (typeof v === 'string') {
+            // IDs/IDRefs must be handled dynamically at runtime due to synthetic shadow scoping.
+            // 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.
+            // TODO [#3658]: `disableSyntheticShadowSupport` should also disable this dynamic behavior
+            const needsPlaceholder = hasExpression || isIdOrIdRef;
             // 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}="${htmlEscape(v, true)}"`);
+            attrs.push(needsPlaceholder ? `\${"${v}"}` : ` ${name}="${htmlEscape(v, true)}"`);
         }
         else {
             attrs.push(` ${name}`);
@@ -13168,13 +13171,20 @@ function serializeAttrs(element, codeGen) {
     };
     element.attributes
         .map((attr) => {
-        const hasExpression = isExpression$1(attr.value);
+        const { name, value } = attr;
+        const hasExpression = isExpression$1(value);
+        // IDs/IDRefs must be handled dynamically at runtime due to synthetic shadow scoping.
+        // Note that for backwards compat we only consider non-booleans to be dynamic IDs/IDRefs
+        // TODO [#3658]: `disableSyntheticShadowSupport` should also disable this dynamic behavior
+        const isIdOrIdRef = (name === 'id' || isIdReferencingAttribute(name)) &&
+            (isExpression$1(value) || isStringLiteral(value));
         return {
             hasExpression,
-            name: attr.name,
-            value: hasExpression
+            isIdOrIdRef,
+            name,
+            value: hasExpression || isIdOrIdRef
                 ? codeGen.getStaticExpressionToken(attr)
-                : attr.value.value,
+                : value.value,
         };
     })
         .forEach(collector);
@@ -13587,7 +13597,7 @@ class CodeGen {
     }
     genClassExpression(value) {
         let classExpression = this.bindExpression(value);
-        const isClassNameObjectBindingEnabled = isAPIFeatureEnabled(11 /* APIFeature.TEMPLATE_CLASS_NAME_OBJECT_BINDING */, this.state.config.apiVersion);
+        const isClassNameObjectBindingEnabled = isAPIFeatureEnabled(10 /* APIFeature.TEMPLATE_CLASS_NAME_OBJECT_BINDING */, this.state.config.apiVersion);
         if (isClassNameObjectBindingEnabled) {
             classExpression = this.genNormalizeClassName(classExpression);
         }
@@ -13877,7 +13887,12 @@ class CodeGen {
                 const attributeExpressions = [];
                 for (const attribute of elm.attributes) {
                     const { name, value } = attribute;
-                    if (isExpression$1(value)) {
+                    // IDs/IDRefs must be handled dynamically at runtime due to synthetic shadow scoping.
+                    // Note that for backwards compat we only consider non-booleans to be dynamic IDs/IDRefs
+                    // TODO [#3658]: `disableSyntheticShadowSupport` should also disable this dynamic behavior
+                    const isIdOrIdRef = (name === 'id' || isIdReferencingAttribute(name)) &&
+                        (isExpression$1(value) || isStringLiteral(value));
+                    if (isExpression$1(value) || isIdOrIdRef) {
                         let partToken = '';
                         if (name === 'style') {
                             partToken = `${"s" /* STATIC_PART_TOKEN_ID.STYLE */}${partId}`;
@@ -13888,6 +13903,7 @@ class CodeGen {
                             databag.push(property$1(identifier('className'), this.genClassExpression(value)));
                         }
                         else {
+                            // non-class, non-style (i.e. generic attribute or ID/IDRef)
                             partToken = `${"a" /* STATIC_PART_TOKEN_ID.ATTRIBUTE */}${partId}:${name}`;
                             attributeExpressions.push(property$1(literal$1(name), bindAttributeExpression(attribute, elm, this, false)));
                         }
@@ -14652,5 +14668,5 @@ function compile(source, filename, config) {
 }
 
 export { ElementDirectiveName, LWCDirectiveDomMode, LWCDirectiveRenderMode, LwcTagName, RootDirectiveName, TemplateDirectiveName, compile, compile as default, kebabcaseToCamelcase, parse, toPropertyName };
-/** version: 7.0.0 */
+/** version: 7.0.3 */
 //# sourceMappingURL=index.js.map