@lwc/ssr-compiler 8.3.0 → 8.5.0

package/dist/index.cjs.js

@@ -8,14 +8,155 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var astring = require('astring');
 var estreeToolkit = require('estree-toolkit');
 var meriyah = require('meriyah');
-var shared = require('@lwc/shared');
-var acorn = require('acorn');
 var immer = require('immer');
 var node_path = require('node:path');
+var acorn = require('acorn');
 var templateCompiler = require('@lwc/template-compiler');
 var builders = require('estree-toolkit/dist/builders');
+var shared = require('@lwc/shared');
 var util = require('util');
 
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+const EMIT_IDENT = estreeToolkit.builders.identifier('$$emit');
+// Rollup may rename variables to prevent shadowing. When it does, it uses the format `foo$0`, `foo$1`, etc.
+const TMPL_FN_PATTERN = /tmpl($\d+)?/;
+const GEN_MARKUP_PATTERN = /generateMarkup($\d+)?/;
+const isWithinFn = (pattern, nodePath) => {
+    const { node } = nodePath;
+    if (!node) {
+        return false;
+    }
+    if (node.type === 'FunctionDeclaration' && pattern.test(node.id.name)) {
+        return true;
+    }
+    if (nodePath.parentPath) {
+        return isWithinFn(pattern, nodePath.parentPath);
+    }
+    return false;
+};
+const visitors$2 = {
+    FunctionDeclaration(path, state) {
+        const { node } = path;
+        if (!node?.async || !node?.generator) {
+            return;
+        }
+        // Component authors might conceivably use async generator functions in their own code. Therefore,
+        // when traversing & transforming written+generated code, we need to disambiguate generated async
+        // generator functions from those that were written by the component author.
+        if (!isWithinFn(GEN_MARKUP_PATTERN, path) && !isWithinFn(TMPL_FN_PATTERN, path)) {
+            return;
+        }
+        node.generator = false;
+        node.async = state.mode === 'async';
+        node.params.unshift(EMIT_IDENT);
+    },
+    YieldExpression(path, state) {
+        const { node } = path;
+        if (!node) {
+            return;
+        }
+        // Component authors might conceivably use generator functions within their own code. Therefore,
+        // when traversing & transforming written+generated code, we need to disambiguate generated yield
+        // expressions from those that were written by the component author.
+        if (!isWithinFn(TMPL_FN_PATTERN, path) && !isWithinFn(GEN_MARKUP_PATTERN, path)) {
+            return;
+        }
+        if (node.delegate) {
+            // transform `yield* foo(arg)` into `foo($$emit, arg)` or `await foo($$emit, arg)`
+            if (node.argument?.type !== 'CallExpression') {
+                throw new Error('Implementation error: cannot transmogrify complex yield-from expressions');
+            }
+            const callExpr = node.argument;
+            callExpr.arguments.unshift(EMIT_IDENT);
+            path.replaceWith(state.mode === 'sync' ? callExpr : estreeToolkit.builders.awaitExpression(callExpr));
+        }
+        else {
+            // transform `yield foo` into `$$emit(foo)`
+            const emittedExpression = node.argument;
+            if (!emittedExpression) {
+                throw new Error('Implementation error: cannot transform a yield expression that yields nothing');
+            }
+            path.replaceWith(estreeToolkit.builders.callExpression(EMIT_IDENT, [emittedExpression]));
+        }
+    },
+    ImportSpecifier(path, _state) {
+        // @lwc/ssr-runtime has a couple of helper functions that need to conform to either the generator or
+        // no-generator compilation mode/paradigm. Since these are simple helper functions, we can maintain
+        // two implementations of each helper method:
+        //
+        // - renderAttrs vs renderAttrsNoYield
+        // - fallbackTmpl vs fallbackTmplNoYield
+        //
+        // If this becomes too burdensome to maintain, we can officially deprecate the generator-based approach
+        // and switch the @lwc/ssr-runtime implementation wholesale over to the no-generator paradigm.
+        const { node } = path;
+        if (!node || node.imported.type !== 'Identifier') {
+            throw new Error('Implementation error: unexpected missing identifier in import specifier');
+        }
+        if (path.parent?.type !== 'ImportDeclaration' ||
+            path.parent.source.value !== '@lwc/ssr-runtime') {
+            return;
+        }
+        if (node.imported.name === 'fallbackTmpl') {
+            node.imported.name = 'fallbackTmplNoYield';
+        }
+        else if (node.imported.name === 'renderAttrs') {
+            node.imported.name = 'renderAttrsNoYield';
+        }
+    },
+};
+/**
+ * Transforms async-generator code into either the async or synchronous alternatives that are
+ * ~semantically equivalent. For example, this template:
+ *
+ *   <template>
+ *       <div>foobar</div>
+ *       <x-child></x-child>
+ *   </template>
+ *
+ * Is compiled into the following JavaScript, intended for execution during SSR & stripped down
+ * for the purposes of this example:
+ *
+ *   async function* tmpl(props, attrs, slottedContent, Cmp, instance) {
+ *       yield '<div>foobar</div>';
+ *       const childProps = {};
+ *       const childAttrs = {};
+ *       yield* generateChildMarkup("x-child", childProps, childAttrs, childSlottedContentGenerator);
+ *   }
+ *
+ * When transmogrified in async-mode, the above generated template function becomes the following:
+ *
+ *   async function tmpl($$emit, props, attrs, slottedContent, Cmp, instance) {
+ *       $$emit('<div>foobar</div>');
+ *       const childProps = {};
+ *       const childAttrs = {};
+ *       await generateChildMarkup($$emit, "x-child", childProps, childAttrs, childSlottedContentGenerator);
+ *   }
+ *
+ * When transmogrified in sync-mode, the template function becomes the following:
+ *
+ *   function tmpl($$emit, props, attrs, slottedContent, Cmp, instance) {
+ *       $$emit('<div>foobar</div>');
+ *       const childProps = {};
+ *       const childAttrs = {};
+ *       generateChildMarkup($$emit, "x-child", childProps, childAttrs, childSlottedContentGenerator);
+ *   }
+ *
+ * There are tradeoffs for each of these modes. Notably, the async-yield variety is the easiest to transform
+ * into either of the other varieties and, for that reason, is the variety that is "authored" by the SSR compiler.
+ */
+function transmogrify(compiledComponentAst, mode = 'sync') {
+    const state = {
+        mode,
+    };
+    return immer.produce(compiledComponentAst, (astDraft) => estreeToolkit.traverse(astDraft, visitors$2, state));
+}
+
 /*
  * Copyright (c) 2024, salesforce.com, inc.
  * All rights reserved.
@@ -69,6 +210,72 @@ function catalogTmplImport(path, state) {
     state.tmplExplicitImports.set(specifier.local.name, source.value);
 }
 
+/*
+ * Copyright (c) 2024, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+/** Creates a default import statement, e.g. `import pkg from "pkg"` */
+const bImportDefaultDeclaration = (name, source) => estreeToolkit.builders.importDeclaration([estreeToolkit.builders.importDefaultSpecifier(estreeToolkit.builders.identifier(name))], estreeToolkit.builders.literal(source));
+/**
+ * Creates an import statement, e.g. `import { foo, bar as $bar$ } from "pkg"`.
+ * Does not support default or namespace imports (`import pkg` or `import * as pkg`).
+ * @param imports names to be imported; values can be a string (plain import) or object (aliased)
+ * @param source source location to import from; defaults to @lwc/ssr-runtime
+ */
+const bImportDeclaration = (imports, source = '@lwc/ssr-runtime') => {
+    const specifiers = imports
+        .flatMap((imp) => (typeof imp === 'string' ? [[imp, imp]] : Object.entries(imp)))
+        .map(([imported, local]) => estreeToolkit.builders.importSpecifier(estreeToolkit.builders.identifier(imported), estreeToolkit.builders.identifier(local)));
+    return estreeToolkit.builders.importDeclaration(specifiers, estreeToolkit.builders.literal(source));
+};
+
+/*
+ * Copyright (c) 2024, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+function catalogAndReplaceStyleImports(path, state) {
+    const specifier = path.node.specifiers[0];
+    if (typeof path.node.source.value !== 'string' ||
+        !path.node.source.value.endsWith('.css') ||
+        path.node.specifiers.length !== 1 ||
+        specifier.type !== 'ImportDefaultSpecifier') {
+        return;
+    }
+    // Any file ending in `*.scoped.css` which is directly imported into a Component `*.js` file (and assumed
+    // to be used for `static stylesheets`) is assumed to be scoped, so needs to be marked as such with a query param.
+    // Outside of SSR, this is done by `@lwc/babel-plugin-component`, so we need to emulate its behavior. The goal here
+    // is for `@lwc/template-compiler` to know to add `stylesheet.$scoped$ = true` to its compiled output, which it
+    // detects using the query param.
+    if (path.node?.source.value.endsWith('.scoped.css')) {
+        path.replaceWith(estreeToolkit.builders.importDeclaration(path.node.specifiers, estreeToolkit.builders.literal(path.node.source.value + '?scoped=true')));
+    }
+    state.cssExplicitImports = state.cssExplicitImports ?? new Map();
+    state.cssExplicitImports.set(specifier.local.name, path.node.source.value);
+}
+/**
+ * This adds implicit style imports to the compiled component artifact.
+ */
+function getStylesheetImports(filepath) {
+    const moduleName = /(?<moduleName>[^/]+)\.html$/.exec(filepath)?.groups?.moduleName;
+    if (!moduleName) {
+        throw new Error(`Could not determine module name from file path: ${filepath}`);
+    }
+    return [
+        bImportDefaultDeclaration('defaultStylesheets', `./${moduleName}.css`),
+        bImportDefaultDeclaration('defaultScopedStylesheets', `./${moduleName}.scoped.css?scoped=true`),
+    ];
+}
+function catalogStaticStylesheets(ids, state) {
+    state.staticStylesheetIds = state.staticStylesheetIds ?? new Set();
+    for (const id of ids) {
+        state.staticStylesheetIds.add(id);
+    }
+}
+
 /*
  * Copyright (c) 2024, salesforce.com, inc.
  * All rights reserved.
@@ -78,7 +285,7 @@ function catalogTmplImport(path, state) {
 /** Placeholder value to use to opt out of validation. */
 const NO_VALIDATION = false;
 const PLACEHOLDER_PREFIX = `__ESTEMPLATE_${Math.random().toString().slice(2)}_PLACEHOLDER__`;
-const getReplacementNode = (state, placeholderId, nodeType) => {
+const getReplacementNode = (state, placeholderId) => {
     const key = Number(placeholderId.slice(PLACEHOLDER_PREFIX.length));
     const nodeCount = state.replacementNodes.length;
     if (key >= nodeCount) {
@@ -90,6 +297,9 @@ const getReplacementNode = (state, placeholderId, nodeType) => {
         !(Array.isArray(replacementNode)
             ? replacementNode.every(validateReplacement)
             : validateReplacement(replacementNode))) {
+        const nodeType = Array.isArray(replacementNode)
+            ? `[${replacementNode.map((n) => n.type)}.join(', ')]`
+            : replacementNode?.type;
         throw new Error(`Validation failed for templated node of type ${nodeType}`);
     }
     return replacementNode;
@@ -97,7 +307,7 @@ const getReplacementNode = (state, placeholderId, nodeType) => {
 const visitors$1 = {
     Identifier(path, state) {
         if (path.node?.name.startsWith(PLACEHOLDER_PREFIX)) {
-            const replacementNode = getReplacementNode(state, path.node.name, path.node.type);
+            const replacementNode = getReplacementNode(state, path.node.name);
             if (replacementNode === null) {
                 path.remove();
             }
@@ -123,7 +333,7 @@ const visitors$1 = {
         if (typeof path.node?.value === 'string' &&
             path.node.value.startsWith(PLACEHOLDER_PREFIX)) {
             // A literal can only be replaced with a single node
-            const replacementNode = getReplacementNode(state, path.node.value, path.node.type);
+            const replacementNode = getReplacementNode(state, path.node.value);
             path.replaceWith(replacementNode);
         }
     },
@@ -213,52 +423,6 @@ function esTemplateWithYield(javascriptSegments, ...validators) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-const bDefaultStyleImport = (esTemplate `
-    import defaultStylesheets from '${estreeToolkit.is.literal}';
-`);
-const bDefaultScopedStyleImport = (esTemplate `
-    import defaultScopedStylesheets from '${estreeToolkit.is.literal}';
-`);
-function catalogStyleImport(path, state) {
-    const specifier = path.node.specifiers[0];
-    if (typeof path.node.source.value !== 'string' ||
-        !path.node.source.value.endsWith('.css') ||
-        path.node.specifiers.length !== 1 ||
-        specifier.type !== 'ImportDefaultSpecifier') {
-        return;
-    }
-    state.cssExplicitImports = state.cssExplicitImports ?? new Map();
-    state.cssExplicitImports.set(specifier.local.name, path.node.source.value);
-}
-/**
- * This adds implicit style imports to the compiled component artifact.
- */
-function getStylesheetImports(filepath) {
-    const moduleName = /(?<moduleName>[^/]+)\.html$/.exec(filepath)?.groups?.moduleName;
-    if (!moduleName) {
-        throw new Error(`Could not determine module name from file path: ${filepath}`);
-    }
-    return [
-        bDefaultStyleImport(estreeToolkit.builders.literal(`./${moduleName}.css`)),
-        bDefaultScopedStyleImport(estreeToolkit.builders.literal(`./${moduleName}.scoped.css?scoped=true`)),
-    ];
-}
-function catalogStaticStylesheets(ids, state) {
-    state.staticStylesheetIds = state.staticStylesheetIds ?? new Set();
-    for (const id of ids) {
-        state.staticStylesheetIds.add(id);
-    }
-}
-
-/*
- * Copyright (c) 2024, salesforce.com, inc.
- * All rights reserved.
- * SPDX-License-Identifier: MIT
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
- */
-const isStringLiteral = (node) => {
-    return estreeToolkit.is.literal(node) && typeof node.value === 'string';
-};
 /** Returns `true` if the node is an identifier or `<something>.render()`. */
 const isIdentOrRenderCall = (node) => {
     return (estreeToolkit.is.identifier(node) ||
@@ -267,20 +431,6 @@ const isIdentOrRenderCall = (node) => {
             estreeToolkit.is.identifier(node.callee.property) &&
             node.callee.property.name === 'render'));
 };
-/** Extends a validator to return `true` if the node is `null`. */
-function isNullableOf(validator) {
-    return (node) => node === null || validator(node);
-}
-
-/*
- * Copyright (c) 2024, salesforce.com, inc.
- * All rights reserved.
- * SPDX-License-Identifier: MIT
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
- */
-const bImportDeclaration = (esTemplate `
-    import ${estreeToolkit.is.identifier} from "${isStringLiteral}";
-`);
 
 /*
  * Copyright (c) 2024, salesforce.com, inc.
@@ -291,11 +441,10 @@ const bImportDeclaration = (esTemplate `
 const bGenerateMarkup = (esTemplate `
     export async function* generateMarkup(tagName, props, attrs, slotted) {
         attrs = attrs ?? {};
-        ${isNullableOf(estreeToolkit.is.expressionStatement)};
-        const instance = new ${estreeToolkit.is.identifier}({
+        const instance = new ${ /* Component class */estreeToolkit.is.identifier}({
             tagName: tagName.toUpperCase(),
         });
-        instance[__SYMBOL__SET_INTERNALS](props, __REFLECTED_PROPS__, attrs);
+        instance[__SYMBOL__SET_INTERNALS](props, attrs);
         instance.isConnected = true;
         if (instance.connectedCallback) {
             __mutationTracker.enable(instance);
@@ -304,55 +453,21 @@ const bGenerateMarkup = (esTemplate `
         }
         const tmplFn = ${isIdentOrRenderCall} ?? __fallbackTmpl;
         yield \`<\${tagName}\`;
-        yield tmplFn.stylesheetScopeTokenHostClass ?? '';
-        yield* __renderAttrs(instance, attrs)
+        const shouldRenderScopeToken = tmplFn.hasScopedStylesheets || hasScopedStaticStylesheets(${ /*Component class */0});
+        if (shouldRenderScopeToken) {
+            yield \` class="\${tmplFn.stylesheetScopeToken}-host"\`;
+        }
+        yield* __renderAttrs(instance, attrs);
         yield '>';
-        yield* tmplFn(props, attrs, slotted, ${1}, instance);
+        yield* tmplFn(props, attrs, slotted, ${0}, instance);
         yield \`</\${tagName}>\`;
     }
 `);
-const bInsertFallbackTmplImport = (esTemplate `
-    import {
-        fallbackTmpl as __fallbackTmpl,
-	mutationTracker as __mutationTracker,
-        renderAttrs as __renderAttrs,
-        SYMBOL__SET_INTERNALS as __SYMBOL__SET_INTERNALS,
-    } from '@lwc/ssr-runtime';
-`);
-const bCreateReflectedPropArr = (esTemplate `
-    const __REFLECTED_PROPS__ = ${estreeToolkit.is.arrayExpression};
-`);
-function bReflectedAttrsObj(reflectedPropNames) {
-    // This will build getter properties for each reflected property. It'll look
-    // something like this:
-    //
-    //   get ['aria-checked']() {
-    //      return props.ariaChecked;
-    //   }
-    //
-    // The props object will be kept up-to-date with any new values set on the corresponding
-    // property name in the component instance.
-    const reflectedAttrAccessors = [];
-    for (const propName of reflectedPropNames) {
-        reflectedAttrAccessors.push(estreeToolkit.builders.property('get', estreeToolkit.builders.literal(shared.AriaPropNameToAttrNameMap[propName]), estreeToolkit.builders.functionExpression(null, [], estreeToolkit.builders.blockStatement([
-            estreeToolkit.builders.returnStatement(estreeToolkit.builders.callExpression(estreeToolkit.builders.identifier('String'), [
-                estreeToolkit.builders.memberExpression(estreeToolkit.builders.identifier('props'), estreeToolkit.builders.identifier(propName)),
-            ])),
-        ]))), estreeToolkit.builders.property('set', estreeToolkit.builders.literal(shared.AriaPropNameToAttrNameMap[propName]), estreeToolkit.builders.functionExpression(null, [estreeToolkit.builders.identifier('val')], estreeToolkit.builders.blockStatement([
-            estreeToolkit.builders.expressionStatement(estreeToolkit.builders.assignmentExpression('=', estreeToolkit.builders.memberExpression(estreeToolkit.builders.identifier('props'), estreeToolkit.builders.identifier(propName)), estreeToolkit.builders.identifier('val'))),
-        ]))));
+const bAssignGenerateMarkupToComponentClass = (esTemplate `
+    {
+        ${ /* lwcClassName */estreeToolkit.is.identifier}[__SYMBOL__GENERATE_MARKUP] = generateMarkup;
     }
-    // This mutates the `attrs` object, adding the reflected aria attributes that have been
-    // detected. Example:
-    //
-    //   attrs = {
-    //     ...attrs,
-    //     get ['aria-checked']() {
-    //       return props.ariaChecked;
-    //     }
-    //   }
-    return estreeToolkit.builders.expressionStatement(estreeToolkit.builders.assignmentExpression('=', estreeToolkit.builders.identifier('attrs'), estreeToolkit.builders.objectExpression([estreeToolkit.builders.spreadElement(estreeToolkit.builders.identifier('attrs')), ...reflectedAttrAccessors])));
-}
+`);
 /**
  * This builds a generator function `generateMarkup` and adds it to the component JS's
  * compilation output. `generateMarkup` acts as the glue between component JS and its
@@ -372,17 +487,31 @@ function addGenerateMarkupExport(program, state, filename) {
         ? estreeToolkit.builders.callExpression(estreeToolkit.builders.memberExpression(estreeToolkit.builders.identifier('instance'), estreeToolkit.builders.identifier('render')), [])
         : estreeToolkit.builders.identifier('tmpl');
     if (!tmplExplicitImports) {
-        const defaultTmplPath = `./${node_path.basename(filename, 'js')}html`;
-        program.body.unshift(bImportDeclaration(estreeToolkit.builders.identifier('tmpl'), estreeToolkit.builders.literal(defaultTmplPath)));
-    }
-    let attrsAugmentation = null;
-    if (state.reflectedPropsInPlay.size) {
-        attrsAugmentation = bReflectedAttrsObj([...state.reflectedPropsInPlay]);
+        const defaultTmplPath = `./${node_path.parse(filename).name}.html`;
+        program.body.unshift(bImportDefaultDeclaration('tmpl', defaultTmplPath));
     }
-    const reflectedPropArr = estreeToolkit.builders.arrayExpression([...state.reflectedPropsInPlay].map((propName) => estreeToolkit.builders.literal(propName)));
-    program.body.unshift(bInsertFallbackTmplImport());
-    program.body.push(bCreateReflectedPropArr(reflectedPropArr));
-    program.body.push(bGenerateMarkup(attrsAugmentation, classIdentifier, renderCall));
+    program.body.unshift(bImportDeclaration([
+        {
+            fallbackTmpl: '__fallbackTmpl',
+            mutationTracker: '__mutationTracker',
+            renderAttrs: '__renderAttrs',
+            SYMBOL__SET_INTERNALS: '__SYMBOL__SET_INTERNALS',
+        },
+    ]));
+    program.body.unshift(bImportDeclaration(['hasScopedStaticStylesheets']));
+    program.body.push(bGenerateMarkup(classIdentifier, renderCall));
+}
+/**
+ * Attach the `generateMarkup` function to the Component class so that it can be found later
+ * during `renderComponent`.
+ */
+function assignGenerateMarkupToComponent(program, state) {
+    program.body.unshift(bImportDeclaration([
+        {
+            SYMBOL__GENERATE_MARKUP: '__SYMBOL__GENERATE_MARKUP',
+        },
+    ]));
+    program.body.push(bAssignGenerateMarkupToComponentClass(estreeToolkit.builders.identifier(state.lwcClassName)));
 }
 
 /*
@@ -393,19 +522,13 @@ function addGenerateMarkupExport(program, state, filename) {
  */
 const visitors = {
     $: { scope: true },
-    Identifier(path, state) {
-        const reflectedAttrName = shared.AriaPropNameToAttrNameMap[path.node.name];
-        if (reflectedAttrName) {
-            state.reflectedPropsInPlay.add(path.node.name);
-        }
-    },
     ImportDeclaration(path, state) {
         if (!path.node || !path.node.source.value || typeof path.node.source.value !== 'string') {
             return;
         }
         replaceLwcImport(path, state);
         catalogTmplImport(path, state);
-        catalogStyleImport(path, state);
+        catalogAndReplaceStyleImports(path, state);
     },
     ClassDeclaration(path, state) {
         if (!path.node?.superClass) {
@@ -474,8 +597,8 @@ const visitors = {
         }
     },
 };
-function compileJS(src, filename) {
-    const ast = meriyah.parseModule(src, {
+function compileJS(src, filename, compilationMode) {
+    let ast = meriyah.parseModule(src, {
         module: true,
         next: true,
     });
@@ -492,7 +615,6 @@ function compileJS(src, filename) {
         tmplExplicitImports: null,
         cssExplicitImports: null,
         staticStylesheetIds: null,
-        reflectedPropsInPlay: new Set(),
     };
     estreeToolkit.traverse(ast, visitors, state);
     if (!state.isLWC) {
@@ -503,10 +625,11 @@ function compileJS(src, filename) {
             code: astring.generate(ast, {}),
         };
     }
-    if (state.cssExplicitImports || state.staticStylesheetIds) {
-        throw new Error(`Unimplemented static stylesheets, but found:\n${[...state.cssExplicitImports].join('  \n')}`);
-    }
     addGenerateMarkupExport(ast, state, filename);
+    assignGenerateMarkupToComponent(ast, state);
+    if (compilationMode === 'async' || compilationMode === 'sync') {
+        ast = transmogrify(ast, compilationMode);
+    }
     return {
         code: astring.generate(ast, {}),
     };
@@ -1676,7 +1799,7 @@ var CompilerMetrics;
     CompilerMetrics["LWCSpreadDirective"] = "lwc-spread-directive";
     CompilerMetrics["DynamicImportTransform"] = "dynamic-import-transform";
 })(CompilerMetrics || (CompilerMetrics = {}));
-/** version: 8.3.0 */
+/** version: 8.5.0 */
 
 /*
  * Copyright (c) 2024, Salesforce, Inc.
@@ -1687,27 +1810,21 @@ var CompilerMetrics;
 const bStylesheetTokenDeclaration = (esTemplate `
     const stylesheetScopeToken = '${estreeToolkit.is.literal}';
 `);
-const bAdditionalDeclarations = [
-    (esTemplate `
-        const hasScopedStylesheets = defaultScopedStylesheets && defaultScopedStylesheets.length > 0;
-    `),
-    (esTemplate `
-        const stylesheetScopeTokenClass = hasScopedStylesheets ? \` class="\${stylesheetScopeToken}"\` : '';
-    `),
-    (esTemplate `
-        const stylesheetScopeTokenHostClass = hasScopedStylesheets ? \` class="\${stylesheetScopeToken}-host"\` : '';
-    `),
-    (esTemplate `
-        const stylesheetScopeTokenClassPrefix = hasScopedStylesheets ? (stylesheetScopeToken + ' ') : '';
-    `),
-];
+const bHasScopedStylesheetsDeclaration = (esTemplate `
+    const hasScopedStylesheets = defaultScopedStylesheets !== undefined && defaultScopedStylesheets.length > 0;
+`);
 // Scope tokens are associated with a given template. This is assigned here so that it can be used in `generateMarkup`.
+// We also need to keep track of whether the template has any scoped styles or not so that we can render (or not) the
+// scope token.
 const tmplAssignmentBlock = (esTemplate `
-    ${estreeToolkit.is.identifier}.stylesheetScopeTokenHostClass = stylesheetScopeTokenHostClass;
+  {
+    ${ /* template */estreeToolkit.is.identifier}.hasScopedStylesheets = hasScopedStylesheets;
+    ${ /* template */0}.stylesheetScopeToken = stylesheetScopeToken;
+  }
 `);
 function addScopeTokenDeclarations(program, filename, namespace, componentName) {
     const { scopeToken } = templateCompiler.generateScopeTokens(filename, namespace, componentName);
-    program.body.unshift(bStylesheetTokenDeclaration(builders.builders.literal(scopeToken)), ...bAdditionalDeclarations.map((declaration) => declaration()));
+    program.body.unshift(bStylesheetTokenDeclaration(builders.builders.literal(scopeToken)), bHasScopedStylesheetsDeclaration());
     program.body.push(tmplAssignmentBlock(builders.builders.identifier('tmpl')));
 }
 
@@ -1717,9 +1834,7 @@ function addScopeTokenDeclarations(program, filename, namespace, componentName)
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-const bImportHtmlEscape = (esTemplate `
-    import { htmlEscape } from '@lwc/shared';
-`);
+const bImportHtmlEscape = () => bImportDeclaration(['htmlEscape']);
 const importHtmlEscapeKey = 'import:htmlEscape';
 // This is a mostly-correct regular expression will only match if the entire string
 // provided is a valid ECMAScript identifier. Its imperfections lie in the fact that
@@ -1756,6 +1871,44 @@ function optimizeAdjacentYieldStmts(statements) {
     })
         .filter((el) => el !== null);
 }
+function bAttributeValue(node, attrName) {
+    if (!('attributes' in node)) {
+        throw new TypeError(`Cannot get attribute value from ${node.type}`);
+    }
+    const nameAttrValue = node.attributes.find((attr) => attr.name === attrName)?.value;
+    if (!nameAttrValue) {
+        return estreeToolkit.builders.literal(null);
+    }
+    else if (nameAttrValue.type === 'Literal') {
+        const name = typeof nameAttrValue.value === 'string' ? nameAttrValue.value : '';
+        return estreeToolkit.builders.literal(name);
+    }
+    else {
+        return estreeToolkit.builders.memberExpression(estreeToolkit.builders.literal('instance'), nameAttrValue);
+    }
+}
+function getRootMemberExpression$2(node) {
+    return node.object.type === 'MemberExpression' ? getRootMemberExpression$2(node.object) : node;
+}
+function getRootIdentifier$1(node) {
+    const rootMemberExpression = getRootMemberExpression$2(node);
+    return estreeToolkit.is.identifier(rootMemberExpression?.object) ? rootMemberExpression.object : null;
+}
+/**
+ * Given an expression in a context, return an expression that may be scoped to that context.
+ * For example, for the expression `foo`, it will typically be `instance.foo`, but if we're
+ * inside a `for:each` block then the `foo` variable may refer to the scoped `foo`,
+ * e.g. `<template for:each={foos} for:item="foo">`
+ * @param expression
+ */
+function getScopedExpression(expression, cxt) {
+    const scopeReferencedId = estreeToolkit.is.memberExpression(expression)
+        ? getRootIdentifier$1(expression)
+        : null;
+    return cxt.isLocalVar(scopeReferencedId?.name)
+        ? expression
+        : estreeToolkit.builders.memberExpression(estreeToolkit.builders.identifier('instance'), expression);
+}
 
 /*
  * Copyright (c) 2024, salesforce.com, inc.
@@ -1778,8 +1931,8 @@ const Comment = function Comment(node, cxt) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-function getRootMemberExpression$2(node) {
-    return node.object.type === 'MemberExpression' ? getRootMemberExpression$2(node.object) : node;
+function getRootMemberExpression$1(node) {
+    return node.object.type === 'MemberExpression' ? getRootMemberExpression$1(node.object) : node;
 }
 function expressionIrToEs(node, cxt) {
     if (node.type === 'Identifier') {
@@ -1790,7 +1943,7 @@ function expressionIrToEs(node, cxt) {
     }
     else if (node.type === 'MemberExpression') {
         const nodeClone = structuredClone(node);
-        const rootMemberExpr = getRootMemberExpression$2(nodeClone);
+        const rootMemberExpr = getRootMemberExpression$1(nodeClone);
         if (!cxt.isLocalVar(rootMemberExpr.object.name)) {
             rootMemberExpr.object = estreeToolkit.builders.memberExpression(estreeToolkit.builders.identifier('instance'), rootMemberExpr.object);
         }
@@ -1809,12 +1962,29 @@ const bYieldFromChildGenerator = (esTemplateWithYield `
     {
         const childProps = ${estreeToolkit.is.objectExpression};
         const childAttrs = ${estreeToolkit.is.objectExpression};
-        async function* childSlottedContentGenerator() {
-            ${estreeToolkit.is.statement}
+        const slottedContent = {
+            light: Object.create(null),
+            shadow: async function* () {
+                ${ /* shadow slot content */estreeToolkit.is.statement}
+            }
         };
-        yield* ${estreeToolkit.is.identifier}(${estreeToolkit.is.literal}, childProps, childAttrs, childSlottedContentGenerator);
+        function addContent(name, fn) {
+            let contentList = slottedContent.light[name]
+            if (contentList) {
+                contentList.push(fn)
+            } else {
+                slottedContent.light[name] = [fn]
+            }
+        }
+        ${ /* addContent statements */estreeToolkit.is.callExpression}
+        yield* ${estreeToolkit.is.identifier}(${estreeToolkit.is.literal}, childProps, childAttrs, slottedContent);
     }
 `);
+const bAddContent = (esTemplate `
+    addContent(${ /* slot name */estreeToolkit.is.expression} ?? "", async function* () {
+        ${ /* slot content */estreeToolkit.is.statement}
+    });
+`);
 const bImportGenerateMarkup = (localName, importPath) => estreeToolkit.builders.importDeclaration([estreeToolkit.builders.importSpecifier(estreeToolkit.builders.identifier('generateMarkup'), estreeToolkit.builders.identifier(localName))], estreeToolkit.builders.literal(importPath));
 function getChildAttrsOrProps(attrs, cxt) {
     const objectAttrsOrProps = attrs.map((attr) => {
@@ -1858,8 +2028,24 @@ const Component = function Component(node, cxt) {
     cxt.hoist(componentImport, childGeneratorLocalName);
     const childTagName = node.name;
     const attributes = [...node.attributes, ...reflectAriaPropsAsAttrs(node.properties)];
+    const shadowSlotContent = optimizeAdjacentYieldStmts(irChildrenToEs(node.children, cxt));
+    const lightSlotContent = node.children.map((child) => {
+        if ('attributes' in child) {
+            const slotName = bAttributeValue(child, 'slot');
+            // FIXME: We don't know what happens for slot attributes inside an lwc:if block
+            // Light DOM slots do not actually render the `slot` attribute.
+            const clone = immer.produce(child, (draft) => {
+                draft.attributes = draft.attributes.filter((attr) => attr.name !== 'slot');
+            });
+            const slotContent = irToEs(clone, cxt);
+            return bAddContent(slotName, slotContent);
+        }
+        else {
+            return bAddContent(estreeToolkit.builders.literal(''), irToEs(child, cxt));
+        }
+    });
     return [
-        bYieldFromChildGenerator(getChildAttrsOrProps(node.properties, cxt), getChildAttrsOrProps(attributes, cxt), optimizeAdjacentYieldStmts(irChildrenToEs(node.children, cxt)), estreeToolkit.builders.identifier(childGeneratorLocalName), estreeToolkit.builders.literal(childTagName)),
+        bYieldFromChildGenerator(getChildAttrsOrProps(node.properties, cxt), getChildAttrsOrProps(attributes, cxt), shadowSlotContent, lightSlotContent, estreeToolkit.builders.identifier(childGeneratorLocalName), estreeToolkit.builders.literal(childTagName)),
     ];
 };
 
@@ -1870,23 +2056,39 @@ const Component = function Component(node, cxt) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 const bYield$1 = (expr) => estreeToolkit.builders.expressionStatement(estreeToolkit.builders.yieldExpression(expr));
+// TODO [#4714]: scope token renders as a suffix for literals, but prefix for expressions
 const bConditionalLiveYield = (esTemplateWithYield `
     {
-        const prefix = (${ /* isClass */estreeToolkit.is.literal} && stylesheetScopeTokenClassPrefix) || '';
-        const attrOrPropValue = ${estreeToolkit.is.expression};
-        const valueType = typeof attrOrPropValue;
-        if (attrOrPropValue && (valueType === 'string' || valueType === 'boolean')) {
-            yield ' ' + ${estreeToolkit.is.literal};
+        const shouldRenderScopeToken = ${ /* isClass */estreeToolkit.is.literal} &&
+            (hasScopedStylesheets || hasScopedStaticStylesheets(Cmp));
+        const prefix = shouldRenderScopeToken ? stylesheetScopeToken + ' ' : '';
+
+        const attrValue = ${ /* attribute value expression */estreeToolkit.is.expression};
+        const valueType = typeof attrValue;
+
+        if (attrValue && (valueType === 'string' || valueType === 'boolean')) {
+            yield ' ' + ${ /* attribute name */estreeToolkit.is.literal};
             if (valueType === 'string') {
-                yield \`="\${prefix}\${htmlEscape(attrOrPropValue, true)}"\`;
+                yield \`="\${prefix}\${htmlEscape(attrValue, true)}"\`;
             }
         }
     }
 `);
+// TODO [#4714]: scope token renders as a suffix for literals, but prefix for expressions
 const bStringLiteralYield = (esTemplateWithYield `
     {
-        const prefix = (${ /* isClass */estreeToolkit.is.literal} && stylesheetScopeTokenClassPrefix) || '';
-        yield ' ' + ${estreeToolkit.is.literal} + '="' + prefix + "${estreeToolkit.is.literal}" + '"'
+        const shouldRenderScopeToken = ${ /* isClass */estreeToolkit.is.literal} &&
+            (hasScopedStylesheets || hasScopedStaticStylesheets(Cmp));
+        const suffix = shouldRenderScopeToken ? ' ' + stylesheetScopeToken : '';
+        yield ' ' + ${ /* attribute name */estreeToolkit.is.literal} + '="' + "${ /* attribute value */estreeToolkit.is.literal}" + suffix + '"'
+    }
+`);
+const bConditionallyYieldScopeTokenClass = (esTemplateWithYield `
+    {
+        const shouldRenderScopeToken = hasScopedStylesheets || hasScopedStaticStylesheets(Cmp);
+        if (shouldRenderScopeToken) {
+            yield \` class="\${stylesheetScopeToken}"\`;
+        }
     }
 `);
 function yieldAttrOrPropLiteralValue(name, valueNode, isClass) {
@@ -1910,9 +2112,9 @@ function yieldAttrOrPropLiteralValue(name, valueNode, isClass) {
     }
     throw new Error(`Unknown attr/prop literal: ${type}`);
 }
-function yieldAttrOrPropLiveValue(name, value, isClass) {
-    const instanceMemberRef = estreeToolkit.builders.memberExpression(estreeToolkit.builders.identifier('instance'), value);
-    return [bConditionalLiveYield(estreeToolkit.builders.literal(isClass), instanceMemberRef, estreeToolkit.builders.literal(name))];
+function yieldAttrOrPropLiveValue(name, value, isClass, cxt) {
+    const scopedExpression = getScopedExpression(value, cxt);
+    return [bConditionalLiveYield(estreeToolkit.builders.literal(isClass), scopedExpression, estreeToolkit.builders.literal(name))];
 }
 function reorderAttributes(attrs, props) {
     let classAttr = null;
@@ -1951,7 +2153,7 @@ const Element = function Element(node, cxt) {
             return yieldAttrOrPropLiteralValue(name, value, isClass);
         }
         else {
-            return yieldAttrOrPropLiveValue(name, value, isClass);
+            return yieldAttrOrPropLiveValue(name, value, isClass, cxt);
         }
     });
     if (shared.isVoidElement(node.name, shared.HTML_NAMESPACE)) {
@@ -1974,7 +2176,7 @@ const Element = function Element(node, cxt) {
     return [
         bYield$1(estreeToolkit.builders.literal(`<${node.name}`)),
         // If we haven't already prefixed the scope token to an existing class, add an explicit class here
-        ...(hasClassAttribute ? [] : [bYield$1(estreeToolkit.builders.identifier('stylesheetScopeTokenClass'))]),
+        ...(hasClassAttribute ? [] : [bConditionallyYieldScopeTokenClass()]),
         ...yieldAttrsAndProps,
         bYield$1(estreeToolkit.builders.literal(`>`)),
         ...childContent,
@@ -1988,13 +2190,6 @@ const Element = function Element(node, cxt) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-function getRootMemberExpression$1(node) {
-    return node.object.type === 'MemberExpression' ? getRootMemberExpression$1(node.object) : node;
-}
-function getRootIdentifier$1(node) {
-    const rootMemberExpression = getRootMemberExpression$1(node);
-    return estreeToolkit.is.identifier(rootMemberExpression?.object) ? rootMemberExpression.object : null;
-}
 const bForOfYieldFrom$1 = (esTemplate `
     for (let [${estreeToolkit.is.identifier}, ${estreeToolkit.is.identifier}] of Object.entries(${estreeToolkit.is.expression} ?? {})) {
         ${estreeToolkit.is.statement};
@@ -2009,12 +2204,7 @@ const ForEach = function ForEach(node, cxt) {
     });
     cxt.popLocalVars();
     const expression = node.expression;
-    const scopeReferencedId = estreeToolkit.is.memberExpression(expression)
-        ? getRootIdentifier$1(expression)
-        : null;
-    const iterable = cxt.isLocalVar(scopeReferencedId?.name)
-        ? node.expression
-        : estreeToolkit.builders.memberExpression(estreeToolkit.builders.identifier('instance'), node.expression);
+    const iterable = getScopedExpression(expression, cxt);
     return [
         bForOfYieldFrom$1(estreeToolkit.builders.identifier(forIndexId), estreeToolkit.builders.identifier(forItemId), iterable, optimizeAdjacentYieldStmts(forEachStatements)),
     ];
@@ -2038,9 +2228,6 @@ const bForOfYieldFrom = (esTemplate `
         ${estreeToolkit.is.statement};
     }
 `);
-const bToIteratorDirectiveImport = (esTemplate `
-    import { toIteratorDirective } from '@lwc/ssr-runtime';
-`);
 const ForOf = function ForEach(node, cxt) {
     const id = node.iterator.name;
     cxt.pushLocalVars([id]);
@@ -2055,7 +2242,7 @@ const ForOf = function ForEach(node, cxt) {
     const iterable = cxt.isLocalVar(scopeReferencedId?.name)
         ? node.expression
         : estreeToolkit.builders.memberExpression(estreeToolkit.builders.identifier('instance'), node.expression);
-    cxt.hoist(bToIteratorDirectiveImport(), 'toIteratorDirective');
+    cxt.hoist(bImportDeclaration(['toIteratorDirective']), 'import:toIteratorDirective');
     return [
         bForOfYieldFrom(estreeToolkit.builders.identifier(id), iterable, optimizeAdjacentYieldStmts(forEachStatements)),
     ];
@@ -2110,9 +2297,11 @@ const bConditionalSlot = (esTemplateWithYield `
         // start bookend HTML comment
         yield '<!---->';
 
-        const generator = slottedContent[${ /* slotName */estreeToolkit.is.expression} ?? ""];
-        if (generator) {
-            yield* generator();
+        const generators = slottedContent?.light[${ /* slotName */estreeToolkit.is.expression} ?? ""];
+        if (generators) {
+            for (const generator of generators) {
+                yield* generator();
+            }
         } else {
             // If we're in this else block, then the generator _must_ have yielded
             // something. It's impossible for a slottedContent["foo"] to exist
@@ -2129,18 +2318,7 @@ const bConditionalSlot = (esTemplateWithYield `
     }
 `);
 const Slot = function Slot(node, ctx) {
-    const nameAttrValue = node.attributes.find((attr) => attr.name === 'name')?.value;
-    let slotName;
-    if (!nameAttrValue) {
-        slotName = estreeToolkit.builders.literal('');
-    }
-    else if (nameAttrValue.type === 'Literal') {
-        const name = typeof nameAttrValue.value === 'string' ? nameAttrValue.value : '';
-        slotName = estreeToolkit.builders.literal(name);
-    }
-    else {
-        slotName = estreeToolkit.builders.memberExpression(estreeToolkit.builders.literal('instance'), nameAttrValue);
-    }
+    const slotName = bAttributeValue(node, 'name');
     // FIXME: avoid serializing the slot's children twice
     const slotAst = Element(node, ctx);
     const slotChildren = irChildrenToEs(node.children, ctx);
@@ -2296,9 +2474,6 @@ function templateIrToEsTree(node, contextOpts) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-const bStyleValidationImport = (esTemplate `
-    import { validateStyleTextContents } from '@lwc/ssr-runtime';
-`);
 // TODO [#4663]: Render mode mismatch between template and compiler should throw.
 const bExportTemplate = (esTemplate `
     export default async function* tmpl(props, attrs, slottedContent, Cmp, instance) {
@@ -2307,34 +2482,28 @@ const bExportTemplate = (esTemplate `
             yield \`<template shadowrootmode="open"\${Cmp.delegatesFocus ? ' shadowrootdelegatesfocus' : ''}>\`
         }
         
-        if (defaultStylesheets || defaultScopedStylesheets) {
-            // Flatten all stylesheets infinitely and concatenate
-            const stylesheets = [defaultStylesheets, defaultScopedStylesheets].filter(Boolean).flat(Infinity);
-    
-            for (const stylesheet of stylesheets) {
-                const token = stylesheet.$scoped$ ? stylesheetScopeToken : undefined;
-                const useActualHostSelector = !stylesheet.$scoped$ || Cmp.renderMode !== 'light';
-                const useNativeDirPseudoclass = true;
-                yield '<style' + stylesheetScopeTokenClass + ' type="text/css">';
-                const styleContents = stylesheet(token, useActualHostSelector, useNativeDirPseudoclass);
-                validateStyleTextContents(styleContents);
-                yield styleContents;
-                yield '</style>';
-            }
+        const { stylesheets: staticStylesheets } = Cmp;
+        if (defaultStylesheets || defaultScopedStylesheets || staticStylesheets) {
+            const stylesheets = [defaultStylesheets, defaultScopedStylesheets, staticStylesheets];
+            yield renderStylesheets(
+                stylesheets, 
+                stylesheetScopeToken, 
+                Cmp, 
+                hasScopedStylesheets,
+            );
         }
 
         ${estreeToolkit.is.statement};
 
         if (!isLightDom) {
             yield '</template>';
-        }
-
-        if (slottedContent) {
-            yield* slottedContent();
+            if (slottedContent?.shadow) {
+                yield* slottedContent.shadow();
+            }
         }
     }
 `);
-function compileTemplate(src, filename, options) {
+function compileTemplate(src, filename, options, compilationMode) {
     const { root, warnings } = templateCompiler.parse(src, {
         // `options` is from @lwc/compiler, and may have flags that @lwc/template-compiler doesn't
         // know about, so we must explicitly extract the relevant props.
@@ -2371,13 +2540,16 @@ function compileTemplate(src, filename, options) {
     const { hoisted, statements } = templateIrToEsTree(root, { preserveComments });
     const moduleBody = [
         ...hoisted,
-        bStyleValidationImport(),
+        bImportDeclaration(['renderStylesheets', 'hasScopedStaticStylesheets']),
         bExportTemplate(optimizeAdjacentYieldStmts(statements)),
     ];
-    const program = estreeToolkit.builders.program(moduleBody, 'module');
+    let program = estreeToolkit.builders.program(moduleBody, 'module');
     addScopeTokenDeclarations(program, filename, options.namespace, options.name);
     const stylesheetImports = getStylesheetImports(filename);
     program.body.unshift(...stylesheetImports);
+    if (compilationMode === 'async' || compilationMode === 'sync') {
+        program = transmogrify(program, compilationMode);
+    }
     return {
         code: astring.generate(program, {}),
     };
@@ -2389,16 +2561,16 @@ function compileTemplate(src, filename, options) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-function compileComponentForSSR(src, filename, _options) {
-    const { code } = compileJS(src, filename);
+function compileComponentForSSR(src, filename, _options, mode = 'asyncYield') {
+    const { code } = compileJS(src, filename, mode);
     return { code, map: undefined };
 }
-function compileTemplateForSSR(src, filename, options) {
-    const { code } = compileTemplate(src, filename, options);
+function compileTemplateForSSR(src, filename, options, mode = 'asyncYield') {
+    const { code } = compileTemplate(src, filename, options, mode);
     return { code, map: undefined };
 }
 
 exports.compileComponentForSSR = compileComponentForSSR;
 exports.compileTemplateForSSR = compileTemplateForSSR;
-/** version: 8.3.0 */
+/** version: 8.5.0 */
 //# sourceMappingURL=index.cjs.js.map