@lwc/ssr-compiler 8.19.0 → 8.20.0

package/dist/compile-template/ir-to-es.d.ts

@@ -7,5 +7,6 @@ export declare function templateIrToEsTree(node: IrNode, contextOpts: TemplateOp
     addImport: (imports: string | string[] | Record<string, string | undefined>, source?: string) => void;
     getImports: () => import("estree").ImportDeclaration[];
     statements: EsStatement[];
+    cxt: TransformerContext;
 };
 //# sourceMappingURL=ir-to-es.d.ts.map

package/dist/compile-template/types.d.ts

@@ -1,14 +1,31 @@
 import type { Node as IrNode } from '@lwc/template-compiler';
 import type { Statement as EsStatement } from 'estree';
 export type Transformer<T extends IrNode = IrNode> = (node: T, cxt: TransformerContext) => EsStatement[];
+export interface SlotMetadataContext {
+    shadow: {
+        isDuplicate: (uniqueNodeId: string) => boolean;
+        register: (uniqueNodeId: string, kebabCmpName: string) => string;
+        getFnName: (uniqueNodeId: string) => string | null;
+    };
+}
 export interface TransformerContext {
     pushLocalVars: (vars: string[]) => void;
     popLocalVars: () => void;
     isLocalVar: (varName: string | null | undefined) => boolean;
+    getLocalVars: () => string[];
     templateOptions: TemplateOpts;
     siblings: IrNode[] | undefined;
     currentNodeIndex: number | undefined;
     isSlotted?: boolean;
+    hoistedStatements: {
+        module: EsStatement[];
+        templateFn: EsStatement[];
+    };
+    hoist: {
+        module: (stmt: EsStatement, optionalDedupeKey?: unknown) => void;
+        templateFn: (stmt: EsStatement, optionalDedupeKey?: unknown) => void;
+    };
+    slots: SlotMetadataContext;
     import: (imports: string | string[] | Record<string, string | undefined>, source?: string) => void;
 }
 export interface TemplateOpts {

package/dist/index.cjs.js

@@ -27,7 +27,7 @@ var util = require('util');
 const EMIT_IDENT = estreeToolkit.builders.identifier('$$emit');
 /** Function names that may be transmogrified. All should start with `__lwc`. */
 // Rollup may rename variables to prevent shadowing. When it does, it uses the format `foo$0`, `foo$1`, etc.
-const TRANSMOGRIFY_TARGET = /^__lwc(GenerateMarkup|GenerateSlottedContent|Tmpl)(?:\$\d+)?$/;
+const TRANSMOGRIFY_TARGET = /^__lwc(Generate|Tmpl).*$/;
 const isWithinFn = (nodePath) => {
     const { node } = nodePath;
     if (!node) {
@@ -1569,49 +1569,55 @@ if (process.env.NODE_ENV !== 'production') {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
+// This function will be defined once and hoisted to the top of the template function. It'll be
+// referenced deeper in the call stack where the function is called or passed as a parameter.
+// It is a higher-order function that curries local variables that may be referenced by the
+// shadow slot content.
+const bGenerateShadowSlottedContent = (esTemplateWithYield `
+    const ${ /* function name */estreeToolkit.is.identifier} = (${ /* local vars */estreeToolkit.is.identifier}) => async function* ${ /* function name */0}(contextfulParent) {
+        // The 'contextfulParent' variable is shadowed here so that a contextful relationship
+        // is established between components rendered in slotted content & the "parent"
+        // component that contains the <slot>.
+        ${ /* shadow slot content */estreeToolkit.is.statement}
+    };
+`);
+// By passing in the set of local variables (which correspond 1:1 to the variables expected by
+// the referenced function), `shadowSlottedContent` will be curried function that can generate
+// shadow-slotted content.
+const bGenerateShadowSlottedContentRef = (esTemplateWithYield `
+    const shadowSlottedContent = ${ /* reference to hoisted fn */estreeToolkit.is.identifier}(${ /* local vars */estreeToolkit.is.identifier});
+`);
+const bNullishGenerateShadowSlottedContent = (esTemplateWithYield `
+    const shadowSlottedContent = null;
+`);
+const blightSlottedContentMap = (esTemplateWithYield `
+    const ${ /* name of the content map */estreeToolkit.is.identifier} = Object.create(null);
+`);
+const bNullishLightSlottedContentMap = (esTemplateWithYield `
+    const ${ /* name of the content map */estreeToolkit.is.identifier} = null;
+`);
 const bGenerateSlottedContent = (esTemplateWithYield `
-        const shadowSlottedContent = ${ /* hasShadowSlottedContent */estreeToolkit.is.literal}
-            ? async function* __lwcGenerateSlottedContent(contextfulParent) {
-                // The 'contextfulParent' variable is shadowed here so that a contextful relationship
-                // is established between components rendered in slotted content & the "parent"
-                // component that contains the <slot>.
-
-                ${ /* shadow slot content */estreeToolkit.is.statement}
-            } 
-            // Avoid creating the object unnecessarily
-            : null;
-
-        const lightSlottedContentMap = ${ /* hasLightSlottedContent */estreeToolkit.is.literal} 
-            ? Object.create(null)
-            // Avoid creating the object unnecessarily
-            : null;
-        
-        // The containing slot treats scoped slotted content differently.
-        const scopedSlottedContentMap = ${ /* hasScopedSlottedContent */estreeToolkit.is.literal} 
-            ? Object.create(null)
-            // Avoid creating the object unnecessarily
-            : null;
-
-        function addSlottedContent(name, fn, contentMap) {
-            let contentList = contentMap[name];
-            if (contentList) {
-                contentList.push(fn);
-            } else {
-                contentMap[name] = [fn];
-            }
-        }
-
-        ${ /* light DOM addLightContent statements */estreeToolkit.is.expressionStatement}
-        ${ /* scoped slot addLightContent statements */estreeToolkit.is.expressionStatement}
+    ${ /* const shadowSlottedContent = ... */estreeToolkit.is.variableDeclaration}
+    ${ /* const lightSlottedContentMap */estreeToolkit.is.variableDeclaration}
+    ${ /* const scopedSlottedContentMap */estreeToolkit.is.variableDeclaration}
+    ${ /* light DOM addLightContent statements */estreeToolkit.is.expressionStatement}
+    ${ /* scoped slot addLightContent statements */estreeToolkit.is.expressionStatement}
 `);
 // Note that this function name (`__lwcGenerateSlottedContent`) does not need to be scoped even though
 // it may be repeated multiple times in the same scope, because it's a function _expression_ rather
 // than a function _declaration_, so it isn't available to be referenced anywhere.
 const bAddSlottedContent = (esTemplate `
-    addSlottedContent(${ /* slot name */estreeToolkit.is.expression} ?? "", async function* __lwcGenerateSlottedContent(contextfulParent, ${
-/* scoped slot data variable */ isNullableOf(estreeToolkit.is.identifier)}, slotAttributeValue) {
-        ${ /* slot content */estreeToolkit.is.statement}
-    }, ${ /* content map */estreeToolkit.is.identifier});
+    addSlottedContent(
+        ${ /* slot name */estreeToolkit.is.expression} ?? "",
+        async function* __lwcGenerateSlottedContent(
+            contextfulParent,
+            ${ /* scoped slot data variable */isNullableOf(estreeToolkit.is.identifier)},
+            slotAttributeValue)
+        {
+            ${ /* slot content */estreeToolkit.is.statement}
+        },
+        ${ /* content map */estreeToolkit.is.identifier}
+    );
 `);
 function getShadowSlottedContent(slottableChildren, cxt) {
     return optimizeAdjacentYieldStmts(irChildrenToEs(slottableChildren, cxt, (child) => {
@@ -1675,7 +1681,7 @@ function getLightSlottedContent(rootNodes, cxt) {
         });
         const { isSlotted: originalIsSlotted } = cxt;
         cxt.isSlotted = ancestorIndices.length > 1 || clone.type === 'Slot';
-        const slotContent = irToEs(clone, cxt);
+        const slotContent = optimizeAdjacentYieldStmts(irToEs(clone, cxt));
         cxt.isSlotted = originalIsSlotted;
         results.push(estreeToolkit.builders.expressionStatement(bAddSlottedContent(slotName, null, slotContent, estreeToolkit.builders.identifier('lightSlottedContentMap'))));
     };
@@ -1735,15 +1741,46 @@ function getSlottedContent(node, cxt) {
             ? estreeToolkit.builders.literal(child.slotName.value)
             : expressionIrToEs(child.slotName, cxt);
         // TODO [#4768]: what if the bound variable is `generateMarkup` or some framework-specific identifier?
-        const addLightContentExpr = estreeToolkit.builders.expressionStatement(bAddSlottedContent(slotName, boundVariable, irChildrenToEs(child.children, cxt), estreeToolkit.builders.identifier('scopedSlottedContentMap')));
+        const addLightContentExpr = estreeToolkit.builders.expressionStatement(bAddSlottedContent(slotName, boundVariable, optimizeAdjacentYieldStmts(irChildrenToEs(child.children, cxt)), estreeToolkit.builders.identifier('scopedSlottedContentMap')));
         cxt.popLocalVars();
         return addLightContentExpr;
     });
-    const hasShadowSlottedContent = estreeToolkit.builders.literal(shadowSlotContent.length > 0);
-    const hasLightSlottedContent = estreeToolkit.builders.literal(lightSlotContent.length > 0);
-    const hasScopedSlottedContent = estreeToolkit.builders.literal(scopedSlotContent.length > 0);
+    const hasShadowSlottedContent = shadowSlotContent.length > 0;
+    const hasLightSlottedContent = lightSlotContent.length > 0;
+    const hasScopedSlottedContent = scopedSlotContent.length > 0;
     cxt.isSlotted = isSlotted;
-    return bGenerateSlottedContent(hasShadowSlottedContent, shadowSlotContent, hasLightSlottedContent, hasScopedSlottedContent, lightSlotContent, scopedSlotContent);
+    if (hasShadowSlottedContent || hasLightSlottedContent || hasScopedSlottedContent) {
+        cxt.import('addSlottedContent');
+    }
+    // Elsewhere, nodes and their subtrees are cloned. This design decision means that
+    // the node objects themselves cannot be used as unique identifiers (e.g. as keys
+    // in a map). However, for a given template, a node's location information does
+    // uniquely identify that node.
+    const uniqueNodeId = `${node.name}:${node.location.start}:${node.location.end}`;
+    const localVars = cxt.getLocalVars();
+    const localVarIds = localVars.map(estreeToolkit.builders.identifier);
+    if (hasShadowSlottedContent && !cxt.slots.shadow.isDuplicate(uniqueNodeId)) {
+        // Colon characters in <lwc:component> element name will result in an invalid
+        // JavaScript identifier if not otherwise accounted for.
+        const kebabCmpName = shared.kebabCaseToCamelCase(node.name).replace(':', '_');
+        const shadowSlotContentFnName = cxt.slots.shadow.register(uniqueNodeId, kebabCmpName);
+        const shadowSlottedContentFn = bGenerateShadowSlottedContent(estreeToolkit.builders.identifier(shadowSlotContentFnName), 
+        // If the slot-fn were defined here instead of hoisted to the top of the module,
+        // the local variables (e.g. from for:each) would be closed-over. When hoisted,
+        // however, we need to curry these variables.
+        localVarIds, shadowSlotContent);
+        cxt.hoist.templateFn(shadowSlottedContentFn, node);
+    }
+    const shadowSlottedContentFn = hasShadowSlottedContent
+        ? bGenerateShadowSlottedContentRef(estreeToolkit.builders.identifier(cxt.slots.shadow.getFnName(uniqueNodeId)), localVarIds)
+        : bNullishGenerateShadowSlottedContent();
+    const lightSlottedContentMap = hasLightSlottedContent
+        ? blightSlottedContentMap(estreeToolkit.builders.identifier('lightSlottedContentMap'))
+        : bNullishLightSlottedContentMap(estreeToolkit.builders.identifier('lightSlottedContentMap'));
+    const scopedSlottedContentMap = hasScopedSlottedContent
+        ? blightSlottedContentMap(estreeToolkit.builders.identifier('scopedSlottedContentMap'))
+        : bNullishLightSlottedContentMap(estreeToolkit.builders.identifier('scopedSlottedContentMap'));
+    return bGenerateSlottedContent(shadowSlottedContentFn, lightSlottedContentMap, scopedSlottedContentMap, lightSlotContent, scopedSlotContent);
 }
 
 /*
@@ -2290,13 +2327,72 @@ function createNewContext(templateOptions) {
         }
         return false;
     };
+    const getLocalVars = () => localVarStack.flatMap((varsSet) => Array.from(varsSet));
+    const hoistedStatements = {
+        module: [],
+        templateFn: [],
+    };
+    const hoistedModuleDedupe = new Set();
+    const hoistedTemplateDedupe = new Set();
+    const hoist = {
+        // Anything added here will be inserted at the top of the compiled template's
+        // JS module.
+        module(stmt, optionalDedupeKey) {
+            if (optionalDedupeKey) {
+                if (hoistedModuleDedupe.has(optionalDedupeKey)) {
+                    return;
+                }
+                hoistedModuleDedupe.add(optionalDedupeKey);
+            }
+            hoistedStatements.module.push(stmt);
+        },
+        // Anything added here will be inserted at the top of the JavaScript function
+        // corresponding to the template (typically named `__lwcTmpl`).
+        templateFn(stmt, optionalDedupeKey) {
+            if (optionalDedupeKey) {
+                if (hoistedTemplateDedupe.has(optionalDedupeKey)) {
+                    return;
+                }
+                hoistedTemplateDedupe.add(optionalDedupeKey);
+            }
+            hoistedStatements.templateFn.push(stmt);
+        },
+    };
+    const shadowSlotToFnName = new Map();
+    let fnNameUniqueId = 0;
+    // At present, we only track shadow-slotted content. This is because the functions
+    // corresponding to shadow-slotted content are deduped and hoisted to the top of
+    // the template function, whereas light-dom-slotted content is inlined. It may be
+    // desirable to also track light-dom-slotted content at some future point in time.
+    const slots = {
+        shadow: {
+            isDuplicate(uniqueNodeId) {
+                return shadowSlotToFnName.has(uniqueNodeId);
+            },
+            register(uniqueNodeId, kebabCmpName) {
+                if (slots.shadow.isDuplicate(uniqueNodeId)) {
+                    return shadowSlotToFnName.get(uniqueNodeId);
+                }
+                const shadowSlotContentFnName = `__lwcGenerateShadowSlottedContent_${kebabCmpName}_${fnNameUniqueId++}`;
+                shadowSlotToFnName.set(uniqueNodeId, shadowSlotContentFnName);
+                return shadowSlotContentFnName;
+            },
+            getFnName(uniqueNodeId) {
+                return shadowSlotToFnName.get(uniqueNodeId) ?? null;
+            },
+        },
+    };
     return {
         getImports: () => importManager.getImportDeclarations(),
         cxt: {
             pushLocalVars,
             popLocalVars,
             isLocalVar,
+            getLocalVars,
             templateOptions,
+            hoist,
+            hoistedStatements,
+            slots,
             import: importManager.add.bind(importManager),
             siblings: undefined,
             currentNodeIndex: undefined,
@@ -2409,6 +2505,7 @@ function templateIrToEsTree(node, contextOpts) {
         addImport: cxt.import,
         getImports,
         statements,
+        cxt,
     };
 }
 
@@ -2480,6 +2577,7 @@ function compileTemplate(src, filename, options, compilationMode) {
         experimentalComputedMemberExpression: options.experimentalComputedMemberExpression,
         experimentalComplexExpressions: options.experimentalComplexExpressions,
         enableDynamicComponents: options.enableDynamicComponents,
+        enableLwcOn: options.enableLwcOn,
         preserveHtmlComments: options.preserveHtmlComments,
         enableStaticContentOptimization: options.enableStaticContentOptimization,
         instrumentation: options.instrumentation,
@@ -2503,7 +2601,7 @@ function compileTemplate(src, filename, options, compilationMode) {
     }
     const preserveComments = !!root.directives.find((directive) => directive.name === 'PreserveComments')?.value?.value;
     const experimentalComplexExpressions = Boolean(options.experimentalComplexExpressions);
-    const { addImport, getImports, statements } = templateIrToEsTree(root, {
+    const { addImport, getImports, statements, cxt } = templateIrToEsTree(root, {
         preserveComments,
         experimentalComplexExpressions,
     });
@@ -2511,7 +2609,14 @@ function compileTemplate(src, filename, options, compilationMode) {
     for (const [imports, source] of getStylesheetImports(filename)) {
         addImport(imports, source);
     }
-    let tmplDecl = bExportTemplate(optimizeAdjacentYieldStmts(statements));
+    let tmplDecl = bExportTemplate(optimizeAdjacentYieldStmts([
+        // Deep in the compiler, we may choose to hoist statements and declarations
+        // to the top of the template function. After `templateIrToEsTree`, these
+        // hoisted statements/declarations are prepended to the template function's
+        // body.
+        ...cxt.hoistedStatements.templateFn,
+        ...statements,
+    ]));
     // Ideally, we'd just do ${LWC_VERSION_COMMENT} in the code template,
     // but placeholders have a special meaning for `esTemplate`.
     tmplDecl = immer.produce(tmplDecl, (draft) => {
@@ -2522,7 +2627,15 @@ function compileTemplate(src, filename, options, compilationMode) {
             },
         ];
     });
-    let program = estreeToolkit.builders.program([...getImports(), tmplDecl], 'module');
+    let program = estreeToolkit.builders.program([
+        // All import declarations come first...
+        ...getImports(),
+        // ... followed by any statements or declarations that need to be hoisted
+        // to the top of the module scope...
+        ...cxt.hoistedStatements.module,
+        // ... followed by the template function declaration itself.
+        tmplDecl,
+    ], 'module');
     addScopeTokenDeclarations(program, filename, options.namespace, options.name);
     if (compilationMode === 'async' || compilationMode === 'sync') {
         program = transmogrify(program, compilationMode);
@@ -2553,5 +2666,5 @@ function compileTemplateForSSR(src, filename, options, mode = shared.DEFAULT_SSR
 
 exports.compileComponentForSSR = compileComponentForSSR;
 exports.compileTemplateForSSR = compileTemplateForSSR;
-/** version: 8.19.0 */
+/** version: 8.20.0 */
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2025 Salesforce, Inc.
  */
-import { AMBIGUOUS_PROP_SET, DISALLOWED_PROP_SET, LWC_VERSION_COMMENT, normalizeStyleAttributeValue, normalizeTabIndex, StringReplace, StringTrim, entries, isUndefined, HTML_NAMESPACE, isVoidElement, isBooleanAttribute, DEFAULT_SSR_MODE, generateCustomElementTagName } from '@lwc/shared';
+import { AMBIGUOUS_PROP_SET, DISALLOWED_PROP_SET, LWC_VERSION_COMMENT, normalizeStyleAttributeValue, normalizeTabIndex, StringReplace, StringTrim, entries, kebabCaseToCamelCase, isUndefined, HTML_NAMESPACE, isVoidElement, isBooleanAttribute, DEFAULT_SSR_MODE, generateCustomElementTagName } from '@lwc/shared';
 import { generate } from 'astring';
 import { builders, traverse, is } from 'estree-toolkit';
 import { parseModule } from 'meriyah';
@@ -23,7 +23,7 @@ import { inspect } from 'util';
 const EMIT_IDENT = builders.identifier('$$emit');
 /** Function names that may be transmogrified. All should start with `__lwc`. */
 // Rollup may rename variables to prevent shadowing. When it does, it uses the format `foo$0`, `foo$1`, etc.
-const TRANSMOGRIFY_TARGET = /^__lwc(GenerateMarkup|GenerateSlottedContent|Tmpl)(?:\$\d+)?$/;
+const TRANSMOGRIFY_TARGET = /^__lwc(Generate|Tmpl).*$/;
 const isWithinFn = (nodePath) => {
     const { node } = nodePath;
     if (!node) {
@@ -1565,49 +1565,55 @@ if (process.env.NODE_ENV !== 'production') {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
+// This function will be defined once and hoisted to the top of the template function. It'll be
+// referenced deeper in the call stack where the function is called or passed as a parameter.
+// It is a higher-order function that curries local variables that may be referenced by the
+// shadow slot content.
+const bGenerateShadowSlottedContent = (esTemplateWithYield `
+    const ${ /* function name */is.identifier} = (${ /* local vars */is.identifier}) => async function* ${ /* function name */0}(contextfulParent) {
+        // The 'contextfulParent' variable is shadowed here so that a contextful relationship
+        // is established between components rendered in slotted content & the "parent"
+        // component that contains the <slot>.
+        ${ /* shadow slot content */is.statement}
+    };
+`);
+// By passing in the set of local variables (which correspond 1:1 to the variables expected by
+// the referenced function), `shadowSlottedContent` will be curried function that can generate
+// shadow-slotted content.
+const bGenerateShadowSlottedContentRef = (esTemplateWithYield `
+    const shadowSlottedContent = ${ /* reference to hoisted fn */is.identifier}(${ /* local vars */is.identifier});
+`);
+const bNullishGenerateShadowSlottedContent = (esTemplateWithYield `
+    const shadowSlottedContent = null;
+`);
+const blightSlottedContentMap = (esTemplateWithYield `
+    const ${ /* name of the content map */is.identifier} = Object.create(null);
+`);
+const bNullishLightSlottedContentMap = (esTemplateWithYield `
+    const ${ /* name of the content map */is.identifier} = null;
+`);
 const bGenerateSlottedContent = (esTemplateWithYield `
-        const shadowSlottedContent = ${ /* hasShadowSlottedContent */is.literal}
-            ? async function* __lwcGenerateSlottedContent(contextfulParent) {
-                // The 'contextfulParent' variable is shadowed here so that a contextful relationship
-                // is established between components rendered in slotted content & the "parent"
-                // component that contains the <slot>.
-
-                ${ /* shadow slot content */is.statement}
-            } 
-            // Avoid creating the object unnecessarily
-            : null;
-
-        const lightSlottedContentMap = ${ /* hasLightSlottedContent */is.literal} 
-            ? Object.create(null)
-            // Avoid creating the object unnecessarily
-            : null;
-        
-        // The containing slot treats scoped slotted content differently.
-        const scopedSlottedContentMap = ${ /* hasScopedSlottedContent */is.literal} 
-            ? Object.create(null)
-            // Avoid creating the object unnecessarily
-            : null;
-
-        function addSlottedContent(name, fn, contentMap) {
-            let contentList = contentMap[name];
-            if (contentList) {
-                contentList.push(fn);
-            } else {
-                contentMap[name] = [fn];
-            }
-        }
-
-        ${ /* light DOM addLightContent statements */is.expressionStatement}
-        ${ /* scoped slot addLightContent statements */is.expressionStatement}
+    ${ /* const shadowSlottedContent = ... */is.variableDeclaration}
+    ${ /* const lightSlottedContentMap */is.variableDeclaration}
+    ${ /* const scopedSlottedContentMap */is.variableDeclaration}
+    ${ /* light DOM addLightContent statements */is.expressionStatement}
+    ${ /* scoped slot addLightContent statements */is.expressionStatement}
 `);
 // Note that this function name (`__lwcGenerateSlottedContent`) does not need to be scoped even though
 // it may be repeated multiple times in the same scope, because it's a function _expression_ rather
 // than a function _declaration_, so it isn't available to be referenced anywhere.
 const bAddSlottedContent = (esTemplate `
-    addSlottedContent(${ /* slot name */is.expression} ?? "", async function* __lwcGenerateSlottedContent(contextfulParent, ${
-/* scoped slot data variable */ isNullableOf(is.identifier)}, slotAttributeValue) {
-        ${ /* slot content */is.statement}
-    }, ${ /* content map */is.identifier});
+    addSlottedContent(
+        ${ /* slot name */is.expression} ?? "",
+        async function* __lwcGenerateSlottedContent(
+            contextfulParent,
+            ${ /* scoped slot data variable */isNullableOf(is.identifier)},
+            slotAttributeValue)
+        {
+            ${ /* slot content */is.statement}
+        },
+        ${ /* content map */is.identifier}
+    );
 `);
 function getShadowSlottedContent(slottableChildren, cxt) {
     return optimizeAdjacentYieldStmts(irChildrenToEs(slottableChildren, cxt, (child) => {
@@ -1671,7 +1677,7 @@ function getLightSlottedContent(rootNodes, cxt) {
         });
         const { isSlotted: originalIsSlotted } = cxt;
         cxt.isSlotted = ancestorIndices.length > 1 || clone.type === 'Slot';
-        const slotContent = irToEs(clone, cxt);
+        const slotContent = optimizeAdjacentYieldStmts(irToEs(clone, cxt));
         cxt.isSlotted = originalIsSlotted;
         results.push(builders.expressionStatement(bAddSlottedContent(slotName, null, slotContent, builders.identifier('lightSlottedContentMap'))));
     };
@@ -1731,15 +1737,46 @@ function getSlottedContent(node, cxt) {
             ? builders.literal(child.slotName.value)
             : expressionIrToEs(child.slotName, cxt);
         // TODO [#4768]: what if the bound variable is `generateMarkup` or some framework-specific identifier?
-        const addLightContentExpr = builders.expressionStatement(bAddSlottedContent(slotName, boundVariable, irChildrenToEs(child.children, cxt), builders.identifier('scopedSlottedContentMap')));
+        const addLightContentExpr = builders.expressionStatement(bAddSlottedContent(slotName, boundVariable, optimizeAdjacentYieldStmts(irChildrenToEs(child.children, cxt)), builders.identifier('scopedSlottedContentMap')));
         cxt.popLocalVars();
         return addLightContentExpr;
     });
-    const hasShadowSlottedContent = builders.literal(shadowSlotContent.length > 0);
-    const hasLightSlottedContent = builders.literal(lightSlotContent.length > 0);
-    const hasScopedSlottedContent = builders.literal(scopedSlotContent.length > 0);
+    const hasShadowSlottedContent = shadowSlotContent.length > 0;
+    const hasLightSlottedContent = lightSlotContent.length > 0;
+    const hasScopedSlottedContent = scopedSlotContent.length > 0;
     cxt.isSlotted = isSlotted;
-    return bGenerateSlottedContent(hasShadowSlottedContent, shadowSlotContent, hasLightSlottedContent, hasScopedSlottedContent, lightSlotContent, scopedSlotContent);
+    if (hasShadowSlottedContent || hasLightSlottedContent || hasScopedSlottedContent) {
+        cxt.import('addSlottedContent');
+    }
+    // Elsewhere, nodes and their subtrees are cloned. This design decision means that
+    // the node objects themselves cannot be used as unique identifiers (e.g. as keys
+    // in a map). However, for a given template, a node's location information does
+    // uniquely identify that node.
+    const uniqueNodeId = `${node.name}:${node.location.start}:${node.location.end}`;
+    const localVars = cxt.getLocalVars();
+    const localVarIds = localVars.map(builders.identifier);
+    if (hasShadowSlottedContent && !cxt.slots.shadow.isDuplicate(uniqueNodeId)) {
+        // Colon characters in <lwc:component> element name will result in an invalid
+        // JavaScript identifier if not otherwise accounted for.
+        const kebabCmpName = kebabCaseToCamelCase(node.name).replace(':', '_');
+        const shadowSlotContentFnName = cxt.slots.shadow.register(uniqueNodeId, kebabCmpName);
+        const shadowSlottedContentFn = bGenerateShadowSlottedContent(builders.identifier(shadowSlotContentFnName), 
+        // If the slot-fn were defined here instead of hoisted to the top of the module,
+        // the local variables (e.g. from for:each) would be closed-over. When hoisted,
+        // however, we need to curry these variables.
+        localVarIds, shadowSlotContent);
+        cxt.hoist.templateFn(shadowSlottedContentFn, node);
+    }
+    const shadowSlottedContentFn = hasShadowSlottedContent
+        ? bGenerateShadowSlottedContentRef(builders.identifier(cxt.slots.shadow.getFnName(uniqueNodeId)), localVarIds)
+        : bNullishGenerateShadowSlottedContent();
+    const lightSlottedContentMap = hasLightSlottedContent
+        ? blightSlottedContentMap(builders.identifier('lightSlottedContentMap'))
+        : bNullishLightSlottedContentMap(builders.identifier('lightSlottedContentMap'));
+    const scopedSlottedContentMap = hasScopedSlottedContent
+        ? blightSlottedContentMap(builders.identifier('scopedSlottedContentMap'))
+        : bNullishLightSlottedContentMap(builders.identifier('scopedSlottedContentMap'));
+    return bGenerateSlottedContent(shadowSlottedContentFn, lightSlottedContentMap, scopedSlottedContentMap, lightSlotContent, scopedSlotContent);
 }
 
 /*
@@ -2286,13 +2323,72 @@ function createNewContext(templateOptions) {
         }
         return false;
     };
+    const getLocalVars = () => localVarStack.flatMap((varsSet) => Array.from(varsSet));
+    const hoistedStatements = {
+        module: [],
+        templateFn: [],
+    };
+    const hoistedModuleDedupe = new Set();
+    const hoistedTemplateDedupe = new Set();
+    const hoist = {
+        // Anything added here will be inserted at the top of the compiled template's
+        // JS module.
+        module(stmt, optionalDedupeKey) {
+            if (optionalDedupeKey) {
+                if (hoistedModuleDedupe.has(optionalDedupeKey)) {
+                    return;
+                }
+                hoistedModuleDedupe.add(optionalDedupeKey);
+            }
+            hoistedStatements.module.push(stmt);
+        },
+        // Anything added here will be inserted at the top of the JavaScript function
+        // corresponding to the template (typically named `__lwcTmpl`).
+        templateFn(stmt, optionalDedupeKey) {
+            if (optionalDedupeKey) {
+                if (hoistedTemplateDedupe.has(optionalDedupeKey)) {
+                    return;
+                }
+                hoistedTemplateDedupe.add(optionalDedupeKey);
+            }
+            hoistedStatements.templateFn.push(stmt);
+        },
+    };
+    const shadowSlotToFnName = new Map();
+    let fnNameUniqueId = 0;
+    // At present, we only track shadow-slotted content. This is because the functions
+    // corresponding to shadow-slotted content are deduped and hoisted to the top of
+    // the template function, whereas light-dom-slotted content is inlined. It may be
+    // desirable to also track light-dom-slotted content at some future point in time.
+    const slots = {
+        shadow: {
+            isDuplicate(uniqueNodeId) {
+                return shadowSlotToFnName.has(uniqueNodeId);
+            },
+            register(uniqueNodeId, kebabCmpName) {
+                if (slots.shadow.isDuplicate(uniqueNodeId)) {
+                    return shadowSlotToFnName.get(uniqueNodeId);
+                }
+                const shadowSlotContentFnName = `__lwcGenerateShadowSlottedContent_${kebabCmpName}_${fnNameUniqueId++}`;
+                shadowSlotToFnName.set(uniqueNodeId, shadowSlotContentFnName);
+                return shadowSlotContentFnName;
+            },
+            getFnName(uniqueNodeId) {
+                return shadowSlotToFnName.get(uniqueNodeId) ?? null;
+            },
+        },
+    };
     return {
         getImports: () => importManager.getImportDeclarations(),
         cxt: {
             pushLocalVars,
             popLocalVars,
             isLocalVar,
+            getLocalVars,
             templateOptions,
+            hoist,
+            hoistedStatements,
+            slots,
             import: importManager.add.bind(importManager),
             siblings: undefined,
             currentNodeIndex: undefined,
@@ -2405,6 +2501,7 @@ function templateIrToEsTree(node, contextOpts) {
         addImport: cxt.import,
         getImports,
         statements,
+        cxt,
     };
 }
 
@@ -2476,6 +2573,7 @@ function compileTemplate(src, filename, options, compilationMode) {
         experimentalComputedMemberExpression: options.experimentalComputedMemberExpression,
         experimentalComplexExpressions: options.experimentalComplexExpressions,
         enableDynamicComponents: options.enableDynamicComponents,
+        enableLwcOn: options.enableLwcOn,
         preserveHtmlComments: options.preserveHtmlComments,
         enableStaticContentOptimization: options.enableStaticContentOptimization,
         instrumentation: options.instrumentation,
@@ -2499,7 +2597,7 @@ function compileTemplate(src, filename, options, compilationMode) {
     }
     const preserveComments = !!root.directives.find((directive) => directive.name === 'PreserveComments')?.value?.value;
     const experimentalComplexExpressions = Boolean(options.experimentalComplexExpressions);
-    const { addImport, getImports, statements } = templateIrToEsTree(root, {
+    const { addImport, getImports, statements, cxt } = templateIrToEsTree(root, {
         preserveComments,
         experimentalComplexExpressions,
     });
@@ -2507,7 +2605,14 @@ function compileTemplate(src, filename, options, compilationMode) {
     for (const [imports, source] of getStylesheetImports(filename)) {
         addImport(imports, source);
     }
-    let tmplDecl = bExportTemplate(optimizeAdjacentYieldStmts(statements));
+    let tmplDecl = bExportTemplate(optimizeAdjacentYieldStmts([
+        // Deep in the compiler, we may choose to hoist statements and declarations
+        // to the top of the template function. After `templateIrToEsTree`, these
+        // hoisted statements/declarations are prepended to the template function's
+        // body.
+        ...cxt.hoistedStatements.templateFn,
+        ...statements,
+    ]));
     // Ideally, we'd just do ${LWC_VERSION_COMMENT} in the code template,
     // but placeholders have a special meaning for `esTemplate`.
     tmplDecl = produce(tmplDecl, (draft) => {
@@ -2518,7 +2623,15 @@ function compileTemplate(src, filename, options, compilationMode) {
             },
         ];
     });
-    let program = builders.program([...getImports(), tmplDecl], 'module');
+    let program = builders.program([
+        // All import declarations come first...
+        ...getImports(),
+        // ... followed by any statements or declarations that need to be hoisted
+        // to the top of the module scope...
+        ...cxt.hoistedStatements.module,
+        // ... followed by the template function declaration itself.
+        tmplDecl,
+    ], 'module');
     addScopeTokenDeclarations(program, filename, options.namespace, options.name);
     if (compilationMode === 'async' || compilationMode === 'sync') {
         program = transmogrify(program, compilationMode);
@@ -2548,5 +2661,5 @@ function compileTemplateForSSR(src, filename, options, mode = DEFAULT_SSR_MODE)
 }
 
 export { compileComponentForSSR, compileTemplateForSSR };
-/** version: 8.19.0 */
+/** version: 8.20.0 */
 //# sourceMappingURL=index.js.map

package/dist/shared.d.ts

@@ -1,36 +1,6 @@
 import type { LwcBabelPluginOptions } from '@lwc/babel-plugin-component';
 import type { Config as TemplateCompilerConfig } from '@lwc/template-compiler';
 export type Expression = string;
-export type Instruction = IEmitTagName | IEmitStaticString | IEmitExpression | IStartConditional | IEndConditional | IInvokeConnectedCallback | IRenderChild | IHoistImport | IHoistInstantiation;
-export interface IEmitTagName {
-    kind: 'emitTagName';
-}
-export interface IEmitStaticString {
-    kind: 'emitStaticString';
-}
-export interface IEmitExpression {
-    kind: 'emitExpression';
-    expression: Expression;
-}
-export interface IStartConditional {
-    kind: 'startConditional';
-}
-export interface IEndConditional {
-    kind: 'endConditional';
-}
-export interface IInvokeConnectedCallback {
-    kind: 'invokeConnectedCallback';
-}
-export interface IRenderChild {
-    kind: 'renderChild';
-    dynamic: Expression | null;
-}
-export interface IHoistImport {
-    kind: 'hoistImport';
-}
-export interface IHoistInstantiation {
-    kind: 'hoistInstantiation';
-}
 export type TemplateTransformOptions = Pick<TemplateCompilerConfig, 'name' | 'namespace'>;
 export type ComponentTransformOptions = Partial<Pick<LwcBabelPluginOptions, 'name' | 'namespace'>> & {
     experimentalDynamicComponent?: LwcBabelPluginOptions['dynamicImports'];

package/package.json

@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/ssr-compiler",
-    "version": "8.19.0",
+    "version": "8.20.0",
     "description": "Compile component for use during server-side rendering",
     "keywords": [
         "compiler",
@@ -49,9 +49,9 @@
     },
     "dependencies": {
         "@babel/types": "7.27.0",
-        "@lwc/errors": "8.19.0",
-        "@lwc/shared": "8.19.0",
-        "@lwc/template-compiler": "8.19.0",
+        "@lwc/errors": "8.20.0",
+        "@lwc/shared": "8.20.0",
+        "@lwc/template-compiler": "8.20.0",
         "acorn": "8.14.1",
         "astring": "^1.9.0",
         "estree-toolkit": "^1.7.12",
@@ -59,7 +59,7 @@
         "meriyah": "^5.0.0"
     },
     "devDependencies": {
-        "@lwc/babel-plugin-component": "8.19.0",
+        "@lwc/babel-plugin-component": "8.20.0",
         "@types/estree": "^1.0.7"
     }
 }