@lwc/template-compiler 7.2.0 → 7.2.1

package/README.md

@@ -62,6 +62,7 @@ const { code, warnings } = compile(`<template><h1>Hello World!</h1></template>`,
 -   `enableLwcSpread` (boolean, optional, `true` by default) - Deprecated. Ignored by template-compiler. `lwc:spread` is always enabled.
 -   `customRendererConfig` (CustomRendererConfig, optional) - specifies a configuration to use to match elements. Matched elements will get a custom renderer hook in the generated template.
 -   `instrumentation` (InstrumentationObject, optional) - instrumentation object to gather metrics and non-error logs for internal use. See the `@lwc/errors` package for details on the interface.
+-   `disableSyntheticShadowSupport` (type: `boolean`, default: `false`) - Set to true if synthetic shadow DOM support is not needed, which can result in smaller/faster output.
 
     -   Example 1: Config to match `<use>` elements under the `svg` namespace and have `href` attribute set.
 

package/dist/codegen/codegen.d.ts

@@ -36,6 +36,11 @@ export default class CodeGen {
      * State maintains information about the current compilation configs.
      */
     readonly state: State;
+    /**
+     * True if this is a synthetic shadow template - otherwise, we may apply certain optimizations
+     * that only exist for native shadow and light DOM.
+     */
+    readonly isSyntheticShadow: boolean;
     currentId: number;
     currentKey: number;
     innerHtmlInstances: number;
@@ -66,8 +71,8 @@ export default class CodeGen {
     genIterator(iterable: t.Expression, callback: t.FunctionExpression): import("estree").CallExpression;
     genBind(handler: t.Expression): import("estree").CallExpression;
     genFlatten(children: t.Expression[]): import("estree").CallExpression;
-    genScopedId(id: string | t.Expression): t.CallExpression;
-    genScopedFragId(id: string | t.Expression): t.CallExpression;
+    genScopedId(id: string | t.Expression): t.Expression | t.Literal;
+    genScopedFragId(id: string | t.Expression): t.Expression | t.Literal;
     genClassExpression(value: Expression): import("estree").Expression;
     genNormalizeClassName(className: t.Expression): t.CallExpression;
     /**

package/dist/config.d.ts

@@ -64,6 +64,8 @@ export interface Config {
      * The API version to associate with the compiled template
      */
     apiVersion?: number;
+    /** Set to true if synthetic shadow DOM support is not needed, which can result in smaller/faster output. */
+    disableSyntheticShadowSupport?: boolean;
 }
 type OptionalConfigNames = 'customRendererConfig' | 'instrumentation' | 'namespace' | 'name';
 type RequiredConfigOptions = Required<Omit<Config, OptionalConfigNames>>;

package/dist/index.cjs.js

@@ -210,6 +210,7 @@ const AVAILABLE_OPTION_NAMES = new Set([
     'instrumentation',
     'namespace',
     'name',
+    'disableSyntheticShadowSupport',
 ]);
 function normalizeCustomRendererConfig(config) {
     const tagNames = [];
@@ -261,6 +262,7 @@ function normalizeConfig(config) {
         enableDynamicComponents: false,
         enableStaticContentOptimization: true,
         enableLwcSpread: true,
+        disableSyntheticShadowSupport: false,
         ...config,
         apiVersion, // overrides the config apiVersion
         ...{ customRendererConfig },
@@ -13148,7 +13150,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;
@@ -13173,8 +13175,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}="${shared.htmlEscape(v, true)}"`);
@@ -13187,25 +13188,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,
         };
@@ -13544,6 +13546,9 @@ class CodeGen {
         this.scope = this.createScope();
         this.state = state;
         this.apiVersion = shared.getAPIVersionFromNumber(state.config.apiVersion);
+        this.isSyntheticShadow =
+            this.renderMode !== exports.LWCDirectiveRenderMode.light &&
+                !this.state.config.disableSyntheticShadowSupport;
     }
     generateKey() {
         return this.currentKey++;
@@ -13612,16 +13617,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);
@@ -13910,7 +13913,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
@@ -13922,7 +13924,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}`;
@@ -14706,5 +14711,5 @@ exports.default = compile;
 exports.kebabcaseToCamelcase = kebabcaseToCamelcase;
 exports.parse = parse;
 exports.toPropertyName = toPropertyName;
-/** version: 7.2.0 */
+/** version: 7.2.1 */
 //# sourceMappingURL=index.cjs.js.map