fix: handle complex template expressions

salesforce · Dec 3, 2024 · d53c8c5 · d53c8c5
1 parent bad5068
commit d53c8c5
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 6 deletions.
diff --git a/packages/@lwc/ssr-compiler/src/compile-template/index.ts b/packages/@lwc/ssr-compiler/src/compile-template/index.ts
@@ -107,8 +107,12 @@ export default function compileTemplate(
     const preserveComments = !!root.directives.find(
         (directive) => directive.name === 'PreserveComments'
     )?.value?.value;
+    const experimentalComplexExpressions = Boolean(options.experimentalComplexExpressions);
 
-    const { addImport, getImports, statements } = templateIrToEsTree(root!, { preserveComments });
+    const { addImport, getImports, statements } = templateIrToEsTree(root!, {
+        preserveComments,
+        experimentalComplexExpressions,
+    });
     addImport(['renderStylesheets', 'hasScopedStaticStylesheets']);
     for (const [imports, source] of getStylesheetImports(filename)) {
         addImport(imports, source);

diff --git a/packages/@lwc/ssr-compiler/src/compile-template/shared.ts b/packages/@lwc/ssr-compiler/src/compile-template/shared.ts
@@ -73,11 +73,15 @@ function getRootMemberExpression(node: EsMemberExpression): EsMemberExpression {
     return node.object.type === 'MemberExpression' ? getRootMemberExpression(node.object) : node;
 }
 
-function getRootIdentifier(node: EsMemberExpression): EsIdentifier {
+function getRootIdentifier(node: EsMemberExpression, cxt: TransformerContext): EsIdentifier | null {
     const rootMemberExpression = getRootMemberExpression(node);
     if (is.identifier(rootMemberExpression.object)) {
         return rootMemberExpression.object;
     }
+    if (cxt.templateOptions.experimentalComplexExpressions) {
+        // TODO [#3370]: Implement complex template expressions
+        return null;
+    }
     // Should be impossible to hit, at least until we implement complex template expressions
     /* v8 ignore next */
     throw new Error(
@@ -94,21 +98,26 @@ function getRootIdentifier(node: EsMemberExpression): EsIdentifier {
  * @param cxt
  */
 export function getScopedExpression(expression: EsExpression, cxt: TransformerContext) {
-    let scopeReferencedId: EsExpression;
+    let scopeReferencedId: EsExpression | null = null;
     if (is.memberExpression(expression)) {
         // e.g. `foo.bar` -> scopeReferencedId is `foo`
-        scopeReferencedId = getRootIdentifier(expression);
+        scopeReferencedId = getRootIdentifier(expression, cxt);
     } else if (is.identifier(expression)) {
         // e.g. `foo` -> scopeReferencedId is `foo`
         scopeReferencedId = expression;
-    } else {
+    }
+    if (scopeReferencedId === null) {
+        if (cxt.templateOptions.experimentalComplexExpressions) {
+            // TODO [#3370]: Implement complex template expressions
+            return expression;
+        }
         // Should be impossible to hit, at least until we implement complex template expressions
         /* v8 ignore next */
         throw new Error(
             `Invalid expression, must be a MemberExpression or Identifier, found type="${expression.type}": \`${JSON.stringify(expression)}\``
         );
     }
-    return cxt.isLocalVar(scopeReferencedId?.name)
+    return cxt.isLocalVar(scopeReferencedId.name)
         ? expression
         : b.memberExpression(b.identifier('instance'), expression);
 }

diff --git a/packages/@lwc/ssr-compiler/src/compile-template/types.ts b/packages/@lwc/ssr-compiler/src/compile-template/types.ts
@@ -28,4 +28,5 @@ export interface TransformerContext {
 
 export interface TemplateOpts {
     preserveComments: boolean;
+    experimentalComplexExpressions: boolean;
 }