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

package/dist/index.cjs.js

@@ -12961,15 +12961,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];
     });
@@ -12996,7 +12996,7 @@ const STATIC_ELEMENT_WITH_DYNAMIC_TEXT_SET = new WeakSet();
 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;
+    const { namespace = '', attributes, directives, properties } = node;
     // SVG is excluded from static content optimization in older API versions due to issues with case sensitivity
     // in CSS scope tokens. See https://github.com/salesforce/lwc/issues/3313
     if (!shared.isAPIFeatureEnabled(0 /* APIFeature.LOWERCASE_SCOPE_TOKENS */, apiVersion) &&
@@ -13007,23 +13007,10 @@ function isStaticNode(node, apiVersion) {
     result &&= isElement(node);
     // all attrs are static-safe
     // the criteria to determine safety can be found in computeAttrValue
-    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
-            !(isAllowedFragOnlyUrlsXHTML(nodeName, name, namespace) &&
-                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;
+    result &&= attributes.every(({ name }) => {
+        // Slots are not safe because the VDOM handles them specially in synthetic shadow and light DOM mode
+        // TODO [#4351]: `disableSyntheticShadowSupport` should allow slots to be static-optimized
+        return name !== 'slot';
     });
     // all directives are static-safe
     result &&= !directives.some((directive) => !STATIC_SAFE_DIRECTIVES.has(directive.name));
@@ -13161,7 +13148,7 @@ function serializeAttrs(element, codeGen) {
      */
     const attrs = [];
     let hasClassAttr = false;
-    const collector = ({ name, value, hasExpression, }) => {
+    const collector = ({ name, value, hasExpression, hasIdOrIdRef, hasSvgUseHref, hasScopedFragmentRef, }) => {
         let v = typeof value === 'string' ? templateStringEscape(value) : value;
         if (name === 'class') {
             hasClassAttr = true;
@@ -13182,9 +13169,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 || hasIdOrIdRef || hasSvgUseHref || hasScopedFragmentRef;
             // 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)}"`);
+            attrs.push(needsPlaceholder ? `\${"${v}"}` : ` ${name}="${shared.htmlEscape(v, true)}"`);
         }
         else {
             attrs.push(` ${name}`);
@@ -13192,13 +13185,29 @@ 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 hasIdOrIdRef = (name === 'id' || isIdReferencingAttribute(name)) && !isBooleanLiteral(value);
+        // For boolean literals (e.g. `<use xlink:href>`), there is no reason to sanitize since it's empty
+        const hasSvgUseHref = isSvgUseHref(element.name, name, element.namespace) && !isBooleanLiteral(value);
+        // `<a href="#foo">` and `<area href="#foo">` must be dynamic due to synthetic shadow scoping
+        // Note this only applies if there is an `id` attribute somewhere in the template
+        const hasScopedFragmentRef = codeGen.scopeFragmentId &&
+            isStringLiteral(value) &&
+            isAllowedFragOnlyUrlsXHTML(element.name, name, element.namespace) &&
+            isFragmentOnlyUrl(value.value);
         return {
             hasExpression,
-            name: attr.name,
-            value: hasExpression
+            hasIdOrIdRef,
+            hasSvgUseHref,
+            hasScopedFragmentRef,
+            name,
+            value: hasExpression || hasIdOrIdRef || hasSvgUseHref || hasScopedFragmentRef
                 ? codeGen.getStaticExpressionToken(attr)
-                : attr.value.value,
+                : value.value,
         };
     })
         .forEach(collector);
@@ -13452,16 +13461,21 @@ function bindAttributeExpression(attr, element, codeGen, addLegacySanitizationHo
         return codeGen.genScopedFragId(expression);
     }
     if (isSvgUseHref(elmName, attrName, namespace)) {
+        // Apply the fragment id scoping transformation if necessary.
+        // This scoping can be skipped if the value is a string literal that doesn't start with a "#"
+        const value = isStringLiteral(attrValue) && !isFragmentOnlyUrl(attrValue.value)
+            ? literal$1(attrValue.value)
+            : codeGen.genScopedFragId(expression);
         if (addLegacySanitizationHook) {
             codeGen.usedLwcApis.add('sanitizeAttribute');
             return callExpression(identifier('sanitizeAttribute'), [
                 literal$1(elmName),
                 literal$1(namespace),
                 literal$1(attrName),
-                codeGen.genScopedFragId(expression),
+                value,
             ]);
         }
-        return codeGen.genScopedFragId(expression);
+        return value;
     }
     return expression;
 }
@@ -13611,7 +13625,7 @@ class CodeGen {
     }
     genClassExpression(value) {
         let classExpression = this.bindExpression(value);
-        const isClassNameObjectBindingEnabled = shared.isAPIFeatureEnabled(11 /* APIFeature.TEMPLATE_CLASS_NAME_OBJECT_BINDING */, this.state.config.apiVersion);
+        const isClassNameObjectBindingEnabled = shared.isAPIFeatureEnabled(10 /* APIFeature.TEMPLATE_CLASS_NAME_OBJECT_BINDING */, this.state.config.apiVersion);
         if (isClassNameObjectBindingEnabled) {
             classExpression = this.genNormalizeClassName(classExpression);
         }
@@ -13867,13 +13881,13 @@ class CodeGen {
         };
         // Depth-first traversal. We assign a partId to each element, which is an integer based on traversal order.
         while (stack.length > 0) {
-            const current = stack.shift();
+            const currentNode = stack.shift();
             // Skip comment nodes in parts count, as they will be stripped in production, unless when `lwc:preserve-comments` is enabled
-            if (isContiguousText(current) || !isComment(current) || this.preserveComments) {
+            if (isContiguousText(currentNode) || !isComment(currentNode) || this.preserveComments) {
                 partId++;
             }
-            if (isContiguousText(current)) {
-                const textNodes = current;
+            if (isContiguousText(currentNode)) {
+                const textNodes = currentNode;
                 if (hasDynamicText(textNodes)) {
                     const partToken = `${"t" /* STATIC_PART_TOKEN_ID.TEXT */}${partId}`;
                     // Use the first text node as the key.
@@ -13883,25 +13897,38 @@ class CodeGen {
                     setPartIdText(concatenatedText);
                 }
             }
-            else if (isElement(current)) {
-                const elm = current;
+            else if (isElement(currentNode)) {
                 const databag = [];
                 // has event listeners
-                if (elm.listeners.length) {
-                    databag.push(this.genEventListeners(elm.listeners));
+                if (currentNode.listeners.length) {
+                    databag.push(this.genEventListeners(currentNode.listeners));
                 }
                 // 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) {
+                for (const directive of currentNode.directives) {
                     if (directive.name === 'Ref') {
                         databag.push(this.genRef(directive));
                     }
                 }
                 const attributeExpressions = [];
-                for (const attribute of elm.attributes) {
+                for (const attribute of currentNode.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)) &&
+                        !isBooleanLiteral(value);
+                    // For boolean literals (e.g. `<use xlink:href>`), there is no reason to sanitize since it's empty
+                    const isSvgHref = isSvgUseHref(currentNode.name, name, currentNode.namespace) &&
+                        !isBooleanLiteral(value);
+                    // `<a href="#foo">` and `<area href="#foo">` must be dynamic due to synthetic shadow scoping
+                    // Note this only applies if there is an `id` attribute somewhere in the template
+                    const isScopedFragmentRef = this.scopeFragmentId &&
+                        isStringLiteral(value) &&
+                        isAllowedFragOnlyUrlsXHTML(currentNode.name, name, currentNode.namespace) &&
+                        isFragmentOnlyUrl(value.value);
+                    if (isExpression$1(value) || isIdOrIdRef || isSvgHref || isScopedFragmentRef) {
                         let partToken = '';
                         if (name === 'style') {
                             partToken = `${"s" /* STATIC_PART_TOKEN_ID.STYLE */}${partId}`;
@@ -13912,8 +13939,12 @@ class CodeGen {
                             databag.push(property$1(identifier('className'), this.genClassExpression(value)));
                         }
                         else {
+                            // non-class, non-style (i.e. generic attribute or ID/IDRef or svg use href)
                             partToken = `${"a" /* STATIC_PART_TOKEN_ID.ATTRIBUTE */}${partId}:${name}`;
-                            attributeExpressions.push(property$1(literal$1(name), bindAttributeExpression(attribute, elm, this, false)));
+                            attributeExpressions.push(property$1(literal$1(name), bindAttributeExpression(attribute, currentNode, this, 
+                            // `addLegacySanitizationHook` is true because `isCustomRendererHookRequired`
+                            // being false is a precondition for static nodes.
+                            true)));
                         }
                         this.staticExpressionMap.set(attribute, partToken);
                     }
@@ -13927,7 +13958,7 @@ class CodeGen {
                 // 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(...transformStaticChildren(elm, this.preserveComments));
+                stack.unshift(...transformStaticChildren(currentNode, this.preserveComments));
             }
         }
         if (partIdsToArgs.size === 0) {
@@ -14431,7 +14462,8 @@ function transform(codeGen) {
                 return codeGen.genScopedFragId(attrValue.value);
             }
             if (isSvgUseHref(elmName, attrName, namespace)) {
-                // apply the fragment id tranformation if necessary
+                // Apply the fragment id scoping transformation if necessary.
+                // This scoping can be skipped if the value is a string literal that doesn't start with a "#"
                 const value = isFragmentOnlyUrl(attrValue.value)
                     ? codeGen.genScopedFragId(attrValue.value)
                     : literal$1(attrValue.value);
@@ -14680,5 +14712,5 @@ exports.default = compile;
 exports.kebabcaseToCamelcase = kebabcaseToCamelcase;
 exports.parse = parse;
 exports.toPropertyName = toPropertyName;
-/** version: 7.0.0 */
+/** version: 7.0.4 */
 //# sourceMappingURL=index.cjs.js.map