@lwc/template-compiler 7.2.0 → 7.2.2

package/dist/index.js

@@ -186,6 +186,7 @@ const AVAILABLE_OPTION_NAMES = new Set([
     'instrumentation',
     'namespace',
     'name',
+    'disableSyntheticShadowSupport',
 ]);
 function normalizeCustomRendererConfig(config) {
     const tagNames = [];
@@ -237,6 +238,7 @@ function normalizeConfig(config) {
         enableDynamicComponents: false,
         enableStaticContentOptimization: true,
         enableLwcSpread: true,
+        disableSyntheticShadowSupport: false,
         ...config,
         apiVersion, // overrides the config apiVersion
         ...{ customRendererConfig },
@@ -11901,7 +11903,7 @@ function getTemplateRoot(ctx, documentFragment) {
         (isTextNode$1(child) && child.value.trim().length));
     if (validRoots.length > 1) {
         const duplicateRoot = validRoots[1].sourceCodeLocation ?? undefined;
-        ctx.throw(ParserDiagnostics.MULTIPLE_ROOTS_FOUND, [], duplicateRoot ? sourceLocation(duplicateRoot) : duplicateRoot ?? undefined);
+        ctx.throw(ParserDiagnostics.MULTIPLE_ROOTS_FOUND, [], duplicateRoot ? sourceLocation(duplicateRoot) : (duplicateRoot ?? undefined));
     }
     const [root] = validRoots;
     if (!root || !isElementNode(root)) {
@@ -13124,7 +13126,7 @@ function serializeAttrs(element, codeGen) {
      */
     const attrs = [];
     let hasClassAttr = false;
-    const collector = ({ name, value, hasExpression, hasIdOrIdRef, hasSvgUseHref, hasScopedFragmentRef, }) => {
+    const collector = ({ name, value, hasExpression, hasSvgUseHref, needsScoping, }) => {
         let v = typeof value === 'string' ? templateStringEscape(value) : value;
         if (name === 'class') {
             hasClassAttr = true;
@@ -13149,8 +13151,7 @@ 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.
-            // TODO [#3658]: `disableSyntheticShadowSupport` should also disable this dynamic behavior
-            const needsPlaceholder = hasExpression || hasIdOrIdRef || hasSvgUseHref || hasScopedFragmentRef;
+            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}"}` : ` ${name}="${htmlEscape(v, true)}"`);
@@ -13163,25 +13164,26 @@ function serializeAttrs(element, codeGen) {
         .map((attr) => {
         const { name, value } = attr;
         const hasExpression = isExpression$1(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);
         // 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);
+        // If we're not running in synthetic shadow mode (light or shadow+disableSyntheticShadowSupport),
+        // then static IDs/IDrefs/fragment refs will be rendered directly into HTML strings.
+        const needsScoping = codeGen.isSyntheticShadow && (hasIdOrIdRef || hasScopedFragmentRef);
         return {
             hasExpression,
-            hasIdOrIdRef,
             hasSvgUseHref,
-            hasScopedFragmentRef,
+            needsScoping,
             name,
-            value: hasExpression || hasIdOrIdRef || hasSvgUseHref || hasScopedFragmentRef
+            value: hasExpression || hasSvgUseHref || needsScoping
                 ? codeGen.getStaticExpressionToken(attr)
                 : value.value,
         };
@@ -13520,6 +13522,9 @@ class CodeGen {
         this.scope = this.createScope();
         this.state = state;
         this.apiVersion = getAPIVersionFromNumber(state.config.apiVersion);
+        this.isSyntheticShadow =
+            this.renderMode !== LWCDirectiveRenderMode.light &&
+                !this.state.config.disableSyntheticShadowSupport;
     }
     generateKey() {
         return this.currentKey++;
@@ -13588,16 +13593,14 @@ class CodeGen {
         return this._renderApiCall(RENDER_APIS.flatten, children);
     }
     genScopedId(id) {
-        if (typeof id === 'string') {
-            return this._renderApiCall(RENDER_APIS.scopedId, [literal$1(id)]);
-        }
-        return this._renderApiCall(RENDER_APIS.scopedId, [id]);
+        const value = typeof id === 'string' ? literal$1(id) : id;
+        return this.isSyntheticShadow ? this._renderApiCall(RENDER_APIS.scopedId, [value]) : value;
     }
     genScopedFragId(id) {
-        if (typeof id === 'string') {
-            return this._renderApiCall(RENDER_APIS.scopedFragId, [literal$1(id)]);
-        }
-        return this._renderApiCall(RENDER_APIS.scopedFragId, [id]);
+        const value = typeof id === 'string' ? literal$1(id) : id;
+        return this.isSyntheticShadow
+            ? this._renderApiCall(RENDER_APIS.scopedFragId, [value])
+            : value;
     }
     genClassExpression(value) {
         let classExpression = this.bindExpression(value);
@@ -13886,7 +13889,6 @@ class CodeGen {
                     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)) &&
                         !isBooleanLiteral(value);
                     // For boolean literals (e.g. `<use xlink:href>`), there is no reason to sanitize since it's empty
@@ -13898,7 +13900,10 @@ class CodeGen {
                         isStringLiteral(value) &&
                         isAllowedFragOnlyUrlsXHTML(currentNode.name, name, currentNode.namespace) &&
                         isFragmentOnlyUrl(value.value);
-                    if (isExpression$1(value) || isIdOrIdRef || isSvgHref || isScopedFragmentRef) {
+                    // If we're not running in synthetic shadow mode (light or shadow+disableSyntheticShadowSupport),
+                    // then static IDs/IDrefs/fragment refs will be rendered directly into HTML strings.
+                    const needsScoping = this.isSyntheticShadow && (isIdOrIdRef || isScopedFragmentRef);
+                    if (isExpression$1(value) || isSvgHref || needsScoping) {
                         let partToken = '';
                         if (name === 'style') {
                             partToken = `${"s" /* STATIC_PART_TOKEN_ID.STYLE */}${partId}`;
@@ -14678,5 +14683,5 @@ function compile(source, filename, config) {
 }
 
 export { ElementDirectiveName, LWCDirectiveDomMode, LWCDirectiveRenderMode, LwcTagName, RootDirectiveName, TemplateDirectiveName, compile, compile as default, kebabcaseToCamelcase, parse, toPropertyName };
-/** version: 7.2.0 */
+/** version: 7.2.2 */
 //# sourceMappingURL=index.js.map