@lwc/ssr-compiler 8.5.0 → 8.6.0

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.
@@ -1787,6 +1808,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 +1826,7 @@ var CompilerMetrics;
     CompilerMetrics["LWCSpreadDirective"] = "lwc-spread-directive";
     CompilerMetrics["DynamicImportTransform"] = "dynamic-import-transform";
 })(CompilerMetrics || (CompilerMetrics = {}));
-/** version: 8.5.0 */
+/** version: 8.6.0 */
 
 /*
  * Copyright (c) 2024, Salesforce, Inc.
@@ -1976,13 +2003,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,20 +2036,6 @@ 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)}`;
@@ -2027,25 +2043,35 @@ const Component = function Component(node, cxt) {
     const componentImport = bImportGenerateMarkup(childGeneratorLocalName, importPath);
     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) => {
+    // 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)),
     ];
 };
 
@@ -2091,6 +2117,9 @@ const bConditionallyYieldScopeTokenClass = (esTemplateWithYield `
         }
     }
 `);
+const bYieldSanitizedHtml = esTemplateWithYield `
+    yield sanitizeHtmlContent(${ /* lwc:inner-html content */estreeToolkit.is.expression})
+`;
 function yieldAttrOrPropLiteralValue(name, valueNode, isClass) {
     const { value, type } = valueNode;
     if (typeof value === 'string') {
@@ -2143,10 +2172,15 @@ const Element = function Element(node, cxt) {
     let hasClassAttribute = false;
     const yieldAttrsAndProps = attrsAndProps.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;
+        let isClass = false;
+        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') {
+                isClass = true;
+                hasClassAttribute = true;
+            }
         }
         cxt.hoist(bImportHtmlEscape(), importHtmlEscapeKey);
         if (value.type === 'Literal') {
@@ -2168,7 +2202,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 +2329,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 +2351,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)];
 };
 
 /*
@@ -2572,5 +2623,5 @@ function compileTemplateForSSR(src, filename, options, mode = 'asyncYield') {
 
 exports.compileComponentForSSR = compileComponentForSSR;
 exports.compileTemplateForSSR = compileTemplateForSSR;
-/** version: 8.5.0 */
+/** version: 8.6.0 */
 //# sourceMappingURL=index.cjs.js.map