@lwc/template-compiler 7.0.3 → 7.0.5

package/dist/codegen/codegen.d.ts

@@ -69,7 +69,7 @@ export default class CodeGen {
     genScopedId(id: string | t.Expression): t.CallExpression;
     genScopedFragId(id: string | t.Expression): t.CallExpression;
     genClassExpression(value: Expression): import("estree").Expression;
-    genNormalizeClassName(className: t.Expression): t.CallExpression | t.ConditionalExpression;
+    genNormalizeClassName(className: t.Expression): t.CallExpression;
     /**
      * Generates childs vnodes when slot content is static.
      * @param slotName

package/dist/index.cjs.js

@@ -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,20 +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' &&
-            // 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));
@@ -13158,7 +13148,7 @@ function serializeAttrs(element, codeGen) {
      */
     const attrs = [];
     let hasClassAttr = false;
-    const collector = ({ name, value, hasExpression, isIdOrIdRef, }) => {
+    const collector = ({ name, value, hasExpression, hasIdOrIdRef, hasSvgUseHref, hasScopedFragmentRef, }) => {
         let v = typeof value === 'string' ? templateStringEscape(value) : value;
         if (name === 'class') {
             hasClassAttr = true;
@@ -13184,7 +13174,7 @@ 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.
             // TODO [#3658]: `disableSyntheticShadowSupport` should also disable this dynamic behavior
-            const needsPlaceholder = hasExpression || isIdOrIdRef;
+            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(needsPlaceholder ? `\${"${v}"}` : ` ${name}="${shared.htmlEscape(v, true)}"`);
@@ -13200,13 +13190,22 @@ function serializeAttrs(element, codeGen) {
         // 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));
+        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,
-            isIdOrIdRef,
+            hasIdOrIdRef,
+            hasSvgUseHref,
+            hasScopedFragmentRef,
             name,
-            value: hasExpression || isIdOrIdRef
+            value: hasExpression || hasIdOrIdRef || hasSvgUseHref || hasScopedFragmentRef
                 ? codeGen.getStaticExpressionToken(attr)
                 : value.value,
         };
@@ -13462,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;
 }
@@ -13628,7 +13632,7 @@ class CodeGen {
         return classExpression;
     }
     genNormalizeClassName(className) {
-        return this._renderApiCall(RENDER_APIS.normalizeClassName, [className], className);
+        return this._renderApiCall(RENDER_APIS.normalizeClassName, [className]);
     }
     /**
      * Generates childs vnodes when slot content is static.
@@ -13726,19 +13730,13 @@ class CodeGen {
         //       usage of the lwc:inner-html, and in an iteration, usages are dynamically generated.
         return conditionalExpression(binaryExpression('!==', memberExpression(identifier(TEMPLATE_PARAMS.CONTEXT), identifier(`_rawHtml$${instance}`)), assignmentExpression('=', memberExpression(identifier(TEMPLATE_PARAMS.CONTEXT), identifier(`_rawHtml$${instance}`)), expr)), assignmentExpression('=', memberExpression(identifier(TEMPLATE_PARAMS.CONTEXT), identifier(`_sanitizedHtml$${instance}`)), this.genSanitizeHtmlContent(expr)), memberExpression(identifier(TEMPLATE_PARAMS.CONTEXT), identifier(`_sanitizedHtml$${instance}`)));
     }
-    _renderApiCall(primitive, params, fallbackForCompilerEngineVersionMismatch) {
+    _renderApiCall(primitive, params) {
         const { name, alias } = primitive;
         let identifier$1 = this.usedApis[name];
         if (!identifier$1) {
             identifier$1 = this.usedApis[name] = identifier(alias);
         }
-        const callExpression$1 = callExpression(identifier$1, params);
-        // Check if the property actually exists before calling, to allow
-        // for older engines to work with newer compilers
-        // TODO [#4313]: remove temporary logic to support v7 compiler + v6 engine
-        return fallbackForCompilerEngineVersionMismatch
-            ? conditionalExpression(identifier$1, callExpression$1, fallbackForCompilerEngineVersionMismatch)
-            : callExpression$1;
+        return callExpression(identifier$1, params);
     }
     beginScope() {
         this.scope = this.createScope(this.scope);
@@ -13877,13 +13875,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.
@@ -13893,30 +13891,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;
                     // 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) {
+                        !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}`;
@@ -13927,9 +13933,12 @@ class CodeGen {
                             databag.push(property$1(identifier('className'), this.genClassExpression(value)));
                         }
                         else {
-                            // non-class, non-style (i.e. generic attribute or ID/IDRef)
+                            // 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);
                     }
@@ -13943,7 +13952,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) {
@@ -14447,7 +14456,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);
@@ -14696,5 +14706,5 @@ exports.default = compile;
 exports.kebabcaseToCamelcase = kebabcaseToCamelcase;
 exports.parse = parse;
 exports.toPropertyName = toPropertyName;
-/** version: 7.0.3 */
+/** version: 7.0.5 */
 //# sourceMappingURL=index.cjs.js.map