@lwc/ssr-compiler 8.5.0 → 8.7.0

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

@@ -14,4 +14,6 @@ export interface ComponentMetaState {
     tmplExplicitImports: Map<string, string> | null;
     cssExplicitImports: Map<string, string> | null;
     staticStylesheetIds: Set<string> | null;
+    publicFields: Array<string>;
+    privateFields: Array<string>;
 }

package/dist/estree/validators.d.ts

@@ -14,9 +14,15 @@ type RenderCall = CallExpression & {
     callee: RenderMemberExpression;
 };
 /** Returns `true` if the node is an identifier or `<something>.render()`. */
-export declare const isIdentOrRenderCall: (node: Node | null | undefined) => node is Identifier | RenderCall;
+export declare const isIdentOrRenderCall: {
+    (node: Node | null | undefined): node is Identifier | RenderCall;
+    __debugName: string;
+};
 /** A validator that returns `true` if the node is `null`. */
 type NullableChecker<T extends Node> = (node: Node | null | undefined) => node is T | null;
 /** Extends a validator to return `true` if the node is `null`. */
 export declare function isNullableOf<T extends Node>(validator: Checker<T>): NullableChecker<T>;
+export declare namespace isNullableOf {
+    var __debugName: string;
+}
 export {};

package/dist/index.cjs.js

@@ -11,9 +11,9 @@ var meriyah = require('meriyah');
 var immer = require('immer');
 var node_path = require('node:path');
 var acorn = require('acorn');
+var shared = require('@lwc/shared');
 var templateCompiler = require('@lwc/template-compiler');
 var builders = require('estree-toolkit/dist/builders');
-var shared = require('@lwc/shared');
 var util = require('util');
 
 /*
@@ -297,10 +297,13 @@ const getReplacementNode = (state, placeholderId) => {
         !(Array.isArray(replacementNode)
             ? replacementNode.every(validateReplacement)
             : validateReplacement(replacementNode))) {
-        const nodeType = Array.isArray(replacementNode)
+        const expectedType = validateReplacement.__debugName ||
+            validateReplacement.name ||
+            '(could not determine)';
+        const actualType = Array.isArray(replacementNode)
             ? `[${replacementNode.map((n) => n.type)}.join(', ')]`
             : replacementNode?.type;
-        throw new Error(`Validation failed for templated node of type ${nodeType}`);
+        throw new Error(`Validation failed for templated node. Expected type ${expectedType}, but received ${actualType}.`);
     }
     return replacementNode;
 };
@@ -431,6 +434,24 @@ const isIdentOrRenderCall = (node) => {
             estreeToolkit.is.identifier(node.callee.property) &&
             node.callee.property.name === 'render'));
 };
+isIdentOrRenderCall.__debugName = 'identifier or .render() call';
+/** Extends a validator to return `true` if the node is `null`. */
+function isNullableOf(validator) {
+    const nullableValidator = (node) => {
+        return node === null || validator(node);
+    };
+    if (process.env.NODE_ENV !== 'production') {
+        nullableValidator.__debugName = `nullable(${validator.__debugName || validator.name || 'unknown validator'})`;
+    }
+    return nullableValidator;
+}
+isNullableOf.__debugName = 'isNullableOf';
+if (process.env.NODE_ENV !== 'production') {
+    // Modifying another package's exports is a code smell!
+    for (const [key, val] of shared.entries(estreeToolkit.is)) {
+        val.__debugName = key;
+    }
+}
 
 /*
  * Copyright (c) 2024, salesforce.com, inc.
@@ -440,7 +461,13 @@ const isIdentOrRenderCall = (node) => {
  */
 const bGenerateMarkup = (esTemplate `
     export async function* generateMarkup(tagName, props, attrs, slotted) {
-        attrs = attrs ?? {};
+        attrs = attrs ?? Object.create(null);
+        props = props ?? Object.create(null);
+        props = __filterProperties(
+            props,
+            ${ /*public fields*/estreeToolkit.is.arrayExpression},
+            ${ /*private fields*/estreeToolkit.is.arrayExpression},
+        );
         const instance = new ${ /* Component class */estreeToolkit.is.identifier}({
             tagName: tagName.toUpperCase(),
         });
@@ -453,13 +480,15 @@ const bGenerateMarkup = (esTemplate `
         }
         const tmplFn = ${isIdentOrRenderCall} ?? __fallbackTmpl;
         yield \`<\${tagName}\`;
-        const shouldRenderScopeToken = tmplFn.hasScopedStylesheets || hasScopedStaticStylesheets(${ /*Component class */0});
+        const shouldRenderScopeToken =
+            tmplFn.hasScopedStylesheets ||
+            hasScopedStaticStylesheets(${ /*component class*/2});
         if (shouldRenderScopeToken) {
             yield \` class="\${tmplFn.stylesheetScopeToken}-host"\`;
         }
         yield* __renderAttrs(instance, attrs);
         yield '>';
-        yield* tmplFn(props, attrs, slotted, ${0}, instance);
+        yield* tmplFn(props, attrs, slotted, ${ /*component class*/2}, instance);
         yield \`</\${tagName}>\`;
     }
 `);
@@ -481,7 +510,7 @@ const bAssignGenerateMarkupToComponentClass = (esTemplate `
  *  - deferring to the template function for yielding child content
  */
 function addGenerateMarkupExport(program, state, filename) {
-    const { hasRenderMethod, tmplExplicitImports } = state;
+    const { hasRenderMethod, privateFields, publicFields, tmplExplicitImports } = state;
     const classIdentifier = estreeToolkit.builders.identifier(state.lwcClassName);
     const renderCall = hasRenderMethod
         ? estreeToolkit.builders.callExpression(estreeToolkit.builders.memberExpression(estreeToolkit.builders.identifier('instance'), estreeToolkit.builders.identifier('render')), [])
@@ -493,13 +522,14 @@ function addGenerateMarkupExport(program, state, filename) {
     program.body.unshift(bImportDeclaration([
         {
             fallbackTmpl: '__fallbackTmpl',
+            filterProperties: '__filterProperties',
             mutationTracker: '__mutationTracker',
             renderAttrs: '__renderAttrs',
             SYMBOL__SET_INTERNALS: '__SYMBOL__SET_INTERNALS',
         },
     ]));
     program.body.unshift(bImportDeclaration(['hasScopedStaticStylesheets']));
-    program.body.push(bGenerateMarkup(classIdentifier, renderCall));
+    program.body.push(bGenerateMarkup(estreeToolkit.builders.arrayExpression(publicFields.map(estreeToolkit.builders.literal)), estreeToolkit.builders.arrayExpression(privateFields.map(estreeToolkit.builders.literal)), classIdentifier, renderCall));
 }
 /**
  * Attach the `generateMarkup` function to the Component class so that it can be found later
@@ -549,13 +579,23 @@ const visitors = {
         }
     },
     PropertyDefinition(path, state) {
-        if (path.node &&
-            path.node.static &&
-            estreeToolkit.is.identifier(path.node.key) &&
-            path.node.key.name === 'stylesheets' &&
-            estreeToolkit.is.arrayExpression(path.node.value) &&
-            path.node.value.elements.every((el) => estreeToolkit.is.identifier(el))) {
-            catalogStaticStylesheets(path.node.value.elements.map((el) => el.name), state);
+        const node = path.node;
+        if (!estreeToolkit.is.identifier(node?.key)) {
+            return;
+        }
+        // TODO [#4773]: Why do we get conflicting PropertyDefinition types when removing "vitest/globals"?
+        const decorators = node.decorators;
+        if (estreeToolkit.is.identifier(decorators[0]?.expression) && decorators[0].expression.name === 'api') {
+            state.publicFields.push(node.key.name);
+        }
+        else {
+            state.privateFields.push(node.key.name);
+        }
+        if (node.static &&
+            node.key.name === 'stylesheets' &&
+            estreeToolkit.is.arrayExpression(node.value) &&
+            node.value.elements.every((el) => estreeToolkit.is.identifier(el))) {
+            catalogStaticStylesheets(node.value.elements.map((el) => el.name), state);
         }
     },
     MethodDefinition(path, state) {
@@ -615,6 +655,8 @@ function compileJS(src, filename, compilationMode) {
         tmplExplicitImports: null,
         cssExplicitImports: null,
         staticStylesheetIds: null,
+        publicFields: [],
+        privateFields: [],
     };
     estreeToolkit.traverse(ast, visitors, state);
     if (!state.isLWC) {
@@ -1787,6 +1829,12 @@ var DiagnosticLevel;
         level: DiagnosticLevel.Error,
         url: '',
     },
+    IGNORED_SLOT_ATTRIBUTE_IN_CHILD: {
+        code: 1201,
+        message: 'The slot attribute in {0} will be ignored due to its ancestor {1}. It must be a direct child of the containing component.',
+        level: DiagnosticLevel.Warning,
+        url: '',
+    },
 });
 
 /**
@@ -1799,7 +1847,7 @@ var CompilerMetrics;
     CompilerMetrics["LWCSpreadDirective"] = "lwc-spread-directive";
     CompilerMetrics["DynamicImportTransform"] = "dynamic-import-transform";
 })(CompilerMetrics || (CompilerMetrics = {}));
-/** version: 8.5.0 */
+/** version: 8.7.0 */
 
 /*
  * Copyright (c) 2024, Salesforce, Inc.
@@ -1960,8 +2008,8 @@ function expressionIrToEs(node, cxt) {
  */
 const bYieldFromChildGenerator = (esTemplateWithYield `
     {
-        const childProps = ${estreeToolkit.is.objectExpression};
-        const childAttrs = ${estreeToolkit.is.objectExpression};
+        const childProps = __cloneAndDeepFreeze(${ /* child props */estreeToolkit.is.objectExpression});
+        const childAttrs = ${ /* child attrs */estreeToolkit.is.objectExpression};
         const slottedContent = {
             light: Object.create(null),
             shadow: async function* () {
@@ -1976,13 +2024,16 @@ const bYieldFromChildGenerator = (esTemplateWithYield `
                 slottedContent.light[name] = [fn]
             }
         }
-        ${ /* addContent statements */estreeToolkit.is.callExpression}
+        ${ /* light DOM addContent statements */estreeToolkit.is.callExpression}
+        ${ /* scoped slot 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}
+    addContent(${ /* slot name */estreeToolkit.is.expression} ?? "", async function* (${
+/* scoped slot data variable */ isNullableOf(estreeToolkit.is.identifier)}) {
+        // FIXME: make validation work again  
+        ${ /* slot content */false}
     });
 `);
 const bImportGenerateMarkup = (localName, importPath) => estreeToolkit.builders.importDeclaration([estreeToolkit.builders.importSpecifier(estreeToolkit.builders.identifier('generateMarkup'), estreeToolkit.builders.identifier(localName))], estreeToolkit.builders.literal(importPath));
@@ -2006,46 +2057,43 @@ function getChildAttrsOrProps(attrs, cxt) {
     });
     return estreeToolkit.builders.objectExpression(objectAttrsOrProps);
 }
-function reflectAriaPropsAsAttrs(props) {
-    return props
-        .map((prop) => {
-        if (prop.attributeName.startsWith('aria-') || prop.attributeName === 'role') {
-            return {
-                type: 'Attribute',
-                name: prop.attributeName,
-                value: prop.value,
-            };
-        }
-        return null;
-    })
-        .filter((el) => el !== null);
-}
 const Component = function Component(node, cxt) {
     // Import the custom component's generateMarkup export.
     const childGeneratorLocalName = `generateMarkup_${templateCompiler.toPropertyName(node.name)}`;
     const importPath = templateCompiler.kebabcaseToCamelcase(node.name);
     const componentImport = bImportGenerateMarkup(childGeneratorLocalName, importPath);
     cxt.hoist(componentImport, childGeneratorLocalName);
+    cxt.hoist(bImportDeclaration([{ cloneAndDeepFreeze: '__cloneAndDeepFreeze' }]), 'import:cloneAndDeepFreeze');
     const childTagName = node.name;
-    const attributes = [...node.attributes, ...reflectAriaPropsAsAttrs(node.properties)];
-    const shadowSlotContent = optimizeAdjacentYieldStmts(irChildrenToEs(node.children, cxt));
-    const lightSlotContent = node.children.map((child) => {
+    // Anything inside the slotted content is a normal slotted content except for `<template lwc:slot-data>` which is a scoped slot.
+    const slottableChildren = node.children.filter((child) => child.type !== 'ScopedSlotFragment');
+    const scopedSlottableChildren = node.children.filter((child) => child.type === 'ScopedSlotFragment');
+    const shadowSlotContent = optimizeAdjacentYieldStmts(irChildrenToEs(slottableChildren, cxt));
+    const lightSlotContent = slottableChildren.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);
+            return bAddContent(slotName, null, slotContent);
         }
         else {
-            return bAddContent(estreeToolkit.builders.literal(''), irToEs(child, cxt));
+            return bAddContent(estreeToolkit.builders.literal(''), null, irToEs(child, cxt));
         }
     });
+    const scopedSlotContent = scopedSlottableChildren.map((child) => {
+        const boundVariableName = child.slotData.value.name;
+        const boundVariable = estreeToolkit.builders.identifier(boundVariableName);
+        cxt.pushLocalVars([boundVariableName]);
+        // TODO [#4768]: what if the bound variable is `generateMarkup` or some framework-specific identifier?
+        const addContentExpr = bAddContent(child.slotName, boundVariable, irChildrenToEs(child.children, cxt));
+        cxt.popLocalVars();
+        return addContentExpr;
+    });
     return [
-        bYieldFromChildGenerator(getChildAttrsOrProps(node.properties, cxt), getChildAttrsOrProps(attributes, cxt), shadowSlotContent, lightSlotContent, estreeToolkit.builders.identifier(childGeneratorLocalName), estreeToolkit.builders.literal(childTagName)),
+        bYieldFromChildGenerator(getChildAttrsOrProps(node.properties, cxt), getChildAttrsOrProps(node.attributes, cxt), shadowSlotContent, lightSlotContent, scopedSlotContent, estreeToolkit.builders.identifier(childGeneratorLocalName), estreeToolkit.builders.literal(childTagName)),
     ];
 };
 
@@ -2059,17 +2107,32 @@ const bYield$1 = (expr) => estreeToolkit.builders.expressionStatement(estreeTool
 // TODO [#4714]: scope token renders as a suffix for literals, but prefix for expressions
 const bConditionalLiveYield = (esTemplateWithYield `
     {
-        const shouldRenderScopeToken = ${ /* isClass */estreeToolkit.is.literal} &&
+        const attrName = ${ /* attribute name */estreeToolkit.is.literal};
+        let attrValue = ${ /* attribute value expression */estreeToolkit.is.expression};
+        const isHtmlBooleanAttr = ${ /* isHtmlBooleanAttr */estreeToolkit.is.literal};
+
+        const shouldRenderScopeToken = attrName === 'class' &&
             (hasScopedStylesheets || hasScopedStaticStylesheets(Cmp));
         const prefix = shouldRenderScopeToken ? stylesheetScopeToken + ' ' : '';
 
-        const attrValue = ${ /* attribute value expression */estreeToolkit.is.expression};
-        const valueType = typeof attrValue;
+        // Global HTML boolean attributes are specially coerced into booleans
+        // https://github.com/salesforce/lwc/blob/f34a347/packages/%40lwc/template-compiler/src/codegen/index.ts#L450-L454
+        if (isHtmlBooleanAttr) {
+            attrValue = attrValue ? '' : undefined;
+        }
 
-        if (attrValue && (valueType === 'string' || valueType === 'boolean')) {
-            yield ' ' + ${ /* attribute name */estreeToolkit.is.literal};
-            if (valueType === 'string') {
-                yield \`="\${prefix}\${htmlEscape(attrValue, true)}"\`;
+        // Global HTML "tabindex" attribute is specially massaged into a stringified number
+        // This follows the historical behavior in api.ts:
+        // https://github.com/salesforce/lwc/blob/f34a347/packages/%40lwc/engine-core/src/framework/api.ts#L193-L211
+        if (attrName === 'tabindex') {
+            const shouldNormalize = attrValue > 0 && typeof attrValue !== 'boolean';
+            attrValue = shouldNormalize ? 0 : attrValue;
+        }
+
+        if (attrValue !== undefined && attrValue !== null) {
+            yield ' ' + attrName;
+            if (attrValue !== '') {
+                yield \`="\${prefix}\${htmlEscape(String(attrValue), true)}"\`;
             }
         }
     }
@@ -2077,10 +2140,18 @@ const bConditionalLiveYield = (esTemplateWithYield `
 // TODO [#4714]: scope token renders as a suffix for literals, but prefix for expressions
 const bStringLiteralYield = (esTemplateWithYield `
     {
-        const shouldRenderScopeToken = ${ /* isClass */estreeToolkit.is.literal} &&
+        const attrName = ${ /* attribute name */estreeToolkit.is.literal}
+        const attrValue = ${ /* attribute value */estreeToolkit.is.literal};
+
+        const shouldRenderScopeToken = attrName === 'class' &&
             (hasScopedStylesheets || hasScopedStaticStylesheets(Cmp));
         const suffix = shouldRenderScopeToken ? ' ' + stylesheetScopeToken : '';
-        yield ' ' + ${ /* attribute name */estreeToolkit.is.literal} + '="' + "${ /* attribute value */estreeToolkit.is.literal}" + suffix + '"'
+
+        yield ' ' + attrName;
+        if (attrValue !== '' || shouldRenderScopeToken) {
+            yield '="' + attrValue + suffix + '"';
+        }
+        
     }
 `);
 const bConditionallyYieldScopeTokenClass = (esTemplateWithYield `
@@ -2091,7 +2162,10 @@ const bConditionallyYieldScopeTokenClass = (esTemplateWithYield `
         }
     }
 `);
-function yieldAttrOrPropLiteralValue(name, valueNode, isClass) {
+const bYieldSanitizedHtml = esTemplateWithYield `
+    yield sanitizeHtmlContent(${ /* lwc:inner-html content */estreeToolkit.is.expression})
+`;
+function yieldAttrOrPropLiteralValue(name, valueNode) {
     const { value, type } = valueNode;
     if (typeof value === 'string') {
         let yieldedValue;
@@ -2102,19 +2176,25 @@ function yieldAttrOrPropLiteralValue(name, valueNode, isClass) {
             // @ts-expect-error weird indirection results in wrong overload being picked up
             yieldedValue = shared.StringReplace.call(shared.StringTrim.call(value), /\s+/g, ' ');
         }
+        else if (name === 'spellcheck') {
+            // `spellcheck` string values are specially handled to massage them into booleans.
+            // https://github.com/salesforce/lwc/blob/fe4e95f/packages/%40lwc/template-compiler/src/codegen/index.ts#L445-L448
+            yieldedValue = String(value.toLowerCase() !== 'false');
+        }
         else {
             yieldedValue = value;
         }
-        return [bStringLiteralYield(estreeToolkit.builders.literal(isClass), estreeToolkit.builders.literal(name), estreeToolkit.builders.literal(yieldedValue))];
+        return [bStringLiteralYield(estreeToolkit.builders.literal(name), estreeToolkit.builders.literal(yieldedValue))];
     }
     else if (typeof value === 'boolean') {
         return [bYield$1(estreeToolkit.builders.literal(` ${name}`))];
     }
     throw new Error(`Unknown attr/prop literal: ${type}`);
 }
-function yieldAttrOrPropLiveValue(name, value, isClass, cxt) {
+function yieldAttrOrPropLiveValue(elementName, name, value, cxt) {
+    const isHtmlBooleanAttr = shared.isBooleanAttribute(name, elementName);
     const scopedExpression = getScopedExpression(value, cxt);
-    return [bConditionalLiveYield(estreeToolkit.builders.literal(isClass), scopedExpression, estreeToolkit.builders.literal(name))];
+    return [bConditionalLiveYield(estreeToolkit.builders.literal(name), scopedExpression, estreeToolkit.builders.literal(isHtmlBooleanAttr))];
 }
 function reorderAttributes(attrs, props) {
     let classAttr = null;
@@ -2141,19 +2221,28 @@ const Element = function Element(node, cxt) {
     const innerHtmlDirective = node.type === 'Element' && node.directives.find((dir) => dir.name === 'InnerHTML');
     const attrsAndProps = reorderAttributes(node.attributes, node.properties);
     let hasClassAttribute = false;
-    const yieldAttrsAndProps = attrsAndProps.flatMap((attr) => {
+    const yieldAttrsAndProps = attrsAndProps
+        .filter(({ name }) => {
+        // `<input checked>`/`<input value>` is treated as a property, not an attribute,
+        // so should never be SSR'd. See https://github.com/salesforce/lwc/issues/4763
+        return !(node.name === 'input' && (name === 'value' || name === 'checked'));
+    })
+        .flatMap((attr) => {
         const { name, value, type } = attr;
-        // For classes, these may need to be prefixed with the scope token
-        const isClass = type === 'Attribute' && name === 'class';
-        if (isClass) {
-            hasClassAttribute = true;
+        if (type === 'Attribute') {
+            if (name === 'inner-h-t-m-l' || name === 'outer-h-t-m-l') {
+                throw new Error(`Cannot set attribute "${name}" on <${node.name}>.`);
+            }
+            else if (name === 'class') {
+                hasClassAttribute = true;
+            }
         }
         cxt.hoist(bImportHtmlEscape(), importHtmlEscapeKey);
         if (value.type === 'Literal') {
-            return yieldAttrOrPropLiteralValue(name, value, isClass);
+            return yieldAttrOrPropLiteralValue(name, value);
         }
         else {
-            return yieldAttrOrPropLiveValue(name, value, isClass, cxt);
+            return yieldAttrOrPropLiveValue(node.name, name, value, cxt);
         }
     });
     if (shared.isVoidElement(node.name, shared.HTML_NAMESPACE)) {
@@ -2168,7 +2257,8 @@ const Element = function Element(node, cxt) {
     else if (innerHtmlDirective) {
         const value = innerHtmlDirective.value;
         const unsanitizedHtmlExpression = value.type === 'Literal' ? estreeToolkit.builders.literal(value.value) : expressionIrToEs(value, cxt);
-        childContent = [bYield$1(unsanitizedHtmlExpression)];
+        childContent = [bYieldSanitizedHtml(unsanitizedHtmlExpression)];
+        cxt.hoist(bImportDeclaration(['sanitizeHtmlContent']), 'import:sanitizeHtmlContent');
     }
     else {
         childContent = [];
@@ -2294,13 +2384,19 @@ const IfBlock = function IfBlock(node, cxt) {
  */
 const bConditionalSlot = (esTemplateWithYield `
     if (isLightDom) {
-        // start bookend HTML comment
+        const isScopedSlot = ${ /* isScopedSlot */estreeToolkit.is.literal};
+        // start bookend HTML comment for light DOM slot vfragment
         yield '<!---->';
 
+        // scoped slot factory has its own vfragment hence its own bookend
+        if (isScopedSlot) {
+            yield '<!---->';
+        }
+
         const generators = slottedContent?.light[${ /* slotName */estreeToolkit.is.expression} ?? ""];
         if (generators) {
             for (const generator of generators) {
-                yield* generator();
+                yield* generator(${ /* scoped slot data */isNullableOf(estreeToolkit.is.expression)});
             }
         } else {
             // If we're in this else block, then the generator _must_ have yielded
@@ -2310,19 +2406,29 @@ const bConditionalSlot = (esTemplateWithYield `
             // TODO: default/fallback slot content
             ${ /* slot fallback content */estreeToolkit.is.statement}
         }
+        
+        // scoped slot factory has its own vfragment hence its own bookend
+        if (isScopedSlot) {
+            yield '<!---->';
+        }
 
-        // end bookend HTML comment
+        // end bookend HTML comment for light DOM slot vfragment
         yield '<!---->';
     } else {
         ${ /* slot element AST */estreeToolkit.is.statement}
     }
 `);
 const Slot = function Slot(node, ctx) {
+    const slotBindDirective = node.directives.find((dir) => dir.name === 'SlotBind');
+    const slotBound = slotBindDirective?.value
+        ? getScopedExpression(slotBindDirective.value, ctx)
+        : null;
     const slotName = bAttributeValue(node, 'name');
     // FIXME: avoid serializing the slot's children twice
     const slotAst = Element(node, ctx);
     const slotChildren = irChildrenToEs(node.children, ctx);
-    return [bConditionalSlot(slotName, slotChildren, slotAst)];
+    const isScopedSlot = estreeToolkit.builders.literal(Boolean(slotBound));
+    return [bConditionalSlot(isScopedSlot, slotName, slotBound, slotChildren, slotAst)];
 };
 
 /*
@@ -2334,12 +2440,16 @@ const Slot = function Slot(node, ctx) {
 const bYield = (expr) => estreeToolkit.builders.expressionStatement(estreeToolkit.builders.yieldExpression(expr));
 const bYieldEscapedString = (esTemplateWithYield `
     const ${estreeToolkit.is.identifier} = ${estreeToolkit.is.expression};
-    if (typeof ${0} === 'string') {
-        yield (${estreeToolkit.is.literal} && ${0} === '') ? '\\u200D' : htmlEscape(${0});
-    } else if (typeof ${0} === 'number') {
-        yield ${0}.toString();
-    } else {
-        yield ${0} ? htmlEscape(${0}.toString()) : '\\u200D';
+    switch (typeof ${0}) {
+        case 'string':
+            yield (${estreeToolkit.is.literal} && ${0} === '') ? '\\u200D' : htmlEscape(${0});
+            break;
+        case 'number':
+        case 'boolean':
+            yield String(${0});
+            break;
+        default:
+            yield ${0} ? htmlEscape(${0}.toString()) : '\\u200D';
     }
 `);
 function isLiteral(node) {
@@ -2572,5 +2682,5 @@ function compileTemplateForSSR(src, filename, options, mode = 'asyncYield') {
 
 exports.compileComponentForSSR = compileComponentForSSR;
 exports.compileTemplateForSSR = compileTemplateForSSR;
-/** version: 8.5.0 */
+/** version: 8.7.0 */
 //# sourceMappingURL=index.cjs.js.map