diff --git a/packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts b/packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts index 6902462327..0e28cd52b5 100644 --- a/packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts +++ b/packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts @@ -21,7 +21,6 @@ export const expectedFailures = new Set([ 'render-dynamic-value/index.js', 'scoped-slots/advanced/index.js', 'scoped-slots/default-slot/index.js', - 'scoped-slots/expression/index.js', 'scoped-slots/mixed-with-light-dom-slots-inside/index.js', 'scoped-slots/mixed-with-light-dom-slots-outside/index.js', 'slot-forwarding/slots/mixed/index.js', diff --git a/packages/@lwc/ssr-compiler/src/compile-template/shared.ts b/packages/@lwc/ssr-compiler/src/compile-template/shared.ts index 37569670a6..53d15230b5 100644 --- a/packages/@lwc/ssr-compiler/src/compile-template/shared.ts +++ b/packages/@lwc/ssr-compiler/src/compile-template/shared.ts @@ -23,6 +23,11 @@ import type { Property as EsProperty, Statement as EsStatement, } from 'estree'; +import type { + ComplexExpression as IrComplexExpression, + Expression as IrExpression, + Literal as IrLiteral, +} from '@lwc/template-compiler'; export function optimizeAdjacentYieldStmts(statements: EsStatement[]): EsStatement[] { let prevStmt: EsStatement | null = null; @@ -172,3 +177,11 @@ export function getChildAttrsOrProps( return b.objectExpression(objectAttrsOrProps); } + +/** + * Determine if the provided node is of type Literal + * @param node + */ +export function isLiteral(node: IrLiteral | IrExpression | IrComplexExpression): node is IrLiteral { + return node.type === 'Literal'; +} diff --git a/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/slotted-content.ts b/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/slotted-content.ts index 9970bc7d45..f39c3da3fe 100644 --- a/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/slotted-content.ts +++ b/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/slotted-content.ts @@ -10,6 +10,8 @@ import { builders as b, is } from 'estree-toolkit'; import { bAttributeValue, optimizeAdjacentYieldStmts } from '../../shared'; import { esTemplate, esTemplateWithYield } from '../../../estemplate'; import { irChildrenToEs, irToEs } from '../../ir-to-es'; +import { isLiteral } from '../../shared'; +import { expressionIrToEs } from '../../expression'; import { isNullableOf } from '../../../estree/validators'; import type { CallExpression as EsCallExpression, Expression as EsExpression } from 'estree'; @@ -186,13 +188,14 @@ export function getSlottedContent( const boundVariableName = child.slotData.value.name; const boundVariable = b.identifier(boundVariableName); cxt.pushLocalVars([boundVariableName]); + + const slotName = isLiteral(child.slotName) + ? b.literal(child.slotName.value) + : expressionIrToEs(child.slotName, cxt); + // TODO [#4768]: what if the bound variable is `generateMarkup` or some framework-specific identifier? const addLightContentExpr = b.expressionStatement( - bAddLightContent( - child.slotName as EsExpression, - boundVariable, - irChildrenToEs(child.children, cxt) - ) + bAddLightContent(slotName, boundVariable, irChildrenToEs(child.children, cxt)) ); cxt.popLocalVars(); return addLightContentExpr; diff --git a/packages/@lwc/ssr-compiler/src/compile-template/transformers/text.ts b/packages/@lwc/ssr-compiler/src/compile-template/transformers/text.ts index f55d9ed6e2..b4ec3694bf 100644 --- a/packages/@lwc/ssr-compiler/src/compile-template/transformers/text.ts +++ b/packages/@lwc/ssr-compiler/src/compile-template/transformers/text.ts @@ -8,18 +8,14 @@ import { builders as b, is } from 'estree-toolkit'; import { esTemplateWithYield } from '../../estemplate'; import { expressionIrToEs } from '../expression'; +import { isLiteral } from '../shared'; import { bYieldTextContent, isLastConcatenatedNode } from '../adjacent-text-nodes'; import type { Statement as EsStatement, ExpressionStatement as EsExpressionStatement, } from 'estree'; -import type { - ComplexExpression as IrComplexExpression, - Expression as IrExpression, - Literal as IrLiteral, - Text as IrText, -} from '@lwc/template-compiler'; +import type { Text as IrText } from '@lwc/template-compiler'; import type { Transformer } from '../types'; const bBufferTextContent = esTemplateWithYield` @@ -27,10 +23,6 @@ const bBufferTextContent = esTemplateWithYield` textContentBuffer += massageTextContent(${/* string value */ is.expression}); `; -function isLiteral(node: IrLiteral | IrExpression | IrComplexExpression): node is IrLiteral { - return node.type === 'Literal'; -} - export const Text: Transformer = function Text(node, cxt): EsStatement[] { cxt.import(['htmlEscape', 'massageTextContent']);