Api version limit for complex template expressions (#5520)

* feat: added ability to toggle experimentalComplexExpressions in ssr fixtures

* chore: disable

* feat: ssr cte support

* fix: ssr coverage

* chore: revert test change

* fix: additional testing around ssr specific codepaths

* fix: additional testing around ssr specific codepaths

* feat: api specific errors, tests

* fix: bundlesize

* fix: retain original switch logic

* fix: review comments

Author: jhefferman-sfdc

packages/@lwc/errors/src/compiler/error-info/index.ts

@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 /**
- * Next error code: 1209
+ * Next error code: 1211
  */
 
 export * from './compiler';

packages/@lwc/errors/src/compiler/error-info/template-transform.ts

@@ -980,19 +980,35 @@ export const ParserDiagnostics = {
         url: '',
     },
 
-    COMPUTED_PROPERTY_ACCESS_NOT_ALLOWED_COMPLEX: {
+    COMPUTED_PROPERTY_ACCESS_NOT_ALLOWED_CTE_UNQUOTED: {
         code: 1207,
         message:
             'Template expression doesn\'t allow computed property access unless the expression is surrounded by quotes: "{0}"',
         level: DiagnosticLevel.Error,
         url: '',
     },
 
-    INVALID_NODE_COMPLEX: {
+    INVALID_NODE_CTE_UNQUOTED: {
         code: 1208,
         message:
             'Template expression doesn\'t allow {0} unless the expression is surrounded by quotes: "{1}"',
         level: DiagnosticLevel.Error,
         url: '',
     },
+
+    COMPUTED_PROPERTY_ACCESS_NOT_ALLOWED_CTE_API_VERSION: {
+        code: 1209,
+        message:
+            "Template expression doesn't allow computed property access. The current component API version ({1}) is insufficient and must be increased to at least {2} for this type of expression.",
+        level: DiagnosticLevel.Error,
+        url: '',
+    },
+
+    INVALID_NODE_CTE_API_VERSION: {
+        code: 1210,
+        message:
+            "Template expression doesn't allow {0}. The current component API version ({1}) is insufficient and must be increased to at least {2} for this type of expression.",
+        level: DiagnosticLevel.Error,
+        url: '',
+    },
 };

packages/@lwc/shared/src/api-version.ts

@@ -14,6 +14,9 @@ export const enum APIVersion {
     V61_250_SUMMER_24 = 61,
     V62_252_WINTER_25 = 62,
     V63_254_SPRING_25 = 63,
+    V64_256_SUMMER_25 = 64,
+    V65_258_WINTER_26 = 65,
+    V66_260_SPRING_26 = 66,
 }
 
 // These must be updated when the enum is updated.
@@ -27,6 +30,9 @@ const allVersions = [
     APIVersion.V61_250_SUMMER_24,
     APIVersion.V62_252_WINTER_25,
     APIVersion.V63_254_SPRING_25,
+    APIVersion.V64_256_SUMMER_25,
+    APIVersion.V65_258_WINTER_26,
+    APIVersion.V66_260_SPRING_26,
 ];
 const allVersionsSet = /*@__PURE__@*/ new Set(allVersions);
 export const LOWEST_API_VERSION = allVersions[0];
@@ -118,31 +124,38 @@ export const enum APIFeature {
 }
 
 /**
- *
  * @param apiVersionFeature
- * @param apiVersion
  */
-export function isAPIFeatureEnabled(
-    apiVersionFeature: APIFeature,
-    apiVersion: APIVersion
-): boolean {
+export function minApiVersion(apiVersionFeature: APIFeature): APIVersion {
     switch (apiVersionFeature) {
         case APIFeature.LOWERCASE_SCOPE_TOKENS:
         case APIFeature.TREAT_ALL_PARSE5_ERRORS_AS_ERRORS:
-            return apiVersion >= APIVersion.V59_246_WINTER_24;
+            return APIVersion.V59_246_WINTER_24;
         case APIFeature.DISABLE_OBJECT_REST_SPREAD_TRANSFORMATION:
         case APIFeature.SKIP_UNNECESSARY_REGISTER_DECORATORS:
         case APIFeature.USE_COMMENTS_FOR_FRAGMENT_BOOKENDS:
         case APIFeature.USE_FRAGMENTS_FOR_LIGHT_DOM_SLOTS:
-            return apiVersion >= APIVersion.V60_248_SPRING_24;
+            return APIVersion.V60_248_SPRING_24;
         case APIFeature.ENABLE_ELEMENT_INTERNALS_AND_FACE:
         case APIFeature.USE_LIGHT_DOM_SLOT_FORWARDING:
-            return apiVersion >= APIVersion.V61_250_SUMMER_24;
+            return APIVersion.V61_250_SUMMER_24;
         case APIFeature.ENABLE_THIS_DOT_HOST_ELEMENT:
         case APIFeature.ENABLE_THIS_DOT_STYLE:
         case APIFeature.TEMPLATE_CLASS_NAME_OBJECT_BINDING:
-            return apiVersion >= APIVersion.V62_252_WINTER_25;
+            return APIVersion.V62_252_WINTER_25;
         case APIFeature.ENABLE_COMPLEX_TEMPLATE_EXPRESSIONS:
-            return apiVersion >= APIVersion.V63_254_SPRING_25;
+            return APIVersion.V66_260_SPRING_26;
     }
 }
+
+/**
+ *
+ * @param apiVersionFeature
+ * @param apiVersion
+ */
+export function isAPIFeatureEnabled(
+    apiVersionFeature: APIFeature,
+    apiVersion: APIVersion
+): boolean {
+    return apiVersion >= minApiVersion(apiVersionFeature);
+}

packages/@lwc/ssr-compiler/src/__tests__/fixtures.spec.ts

@@ -61,7 +61,7 @@ async function compileFixture({
 }: {
     entry: string;
     dirname: string;
-    experimentalComplexExpressions: boolean;
+    experimentalComplexExpressions: boolean | undefined;
 }) {
     const modulesDir = path.resolve(dirname, './modules');
     const outputFile = path.resolve(dirname, './dist/compiled-experimental-ssr.js');

packages/@lwc/ssr-compiler/src/compile-template/expression.ts

@@ -5,6 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 import { bindExpression } from '@lwc/template-compiler';
+import { APIFeature, isAPIFeatureEnabled } from '@lwc/shared';
 import type {
     ComplexExpression as IrComplexExpression,
     Expression as IrExpression,
@@ -18,11 +19,17 @@ export function expressionIrToEs(
     node: IrExpression | IrComplexExpression,
     cxt: TransformerContext
 ): EsExpression {
+    const isComplexTemplateExpressionEnabled =
+        cxt.templateOptions.experimentalComplexExpressions &&
+        isAPIFeatureEnabled(
+            APIFeature.ENABLE_COMPLEX_TEMPLATE_EXPRESSIONS,
+            cxt.templateOptions.apiVersion
+        );
     return bindExpression(
         node as IrComplexExpression,
-        (n: EsIdentifier) => cxt.isLocalVar((n as EsIdentifier).name),
+        (n: EsIdentifier) => cxt.isLocalVar(n.name),
         'instance',
-        cxt.templateOptions.experimentalComplexExpressions
+        isComplexTemplateExpressionEnabled
     );
 }
 

packages/@lwc/ssr-compiler/src/compile-template/index.ts

@@ -116,10 +116,12 @@ export default function compileTemplate(
         (directive) => directive.name === 'PreserveComments'
     )?.value?.value;
     const experimentalComplexExpressions = Boolean(options.experimentalComplexExpressions);
+    const apiVersion = Number(options.apiVersion);
 
     const { addImport, getImports, statements, cxt } = templateIrToEsTree(root, {
         preserveComments,
         experimentalComplexExpressions,
+        apiVersion,
     });
     addImport(['renderStylesheets', 'hasScopedStaticStylesheets']);
     for (const [imports, source] of getStylesheetImports(filename)) {

packages/@lwc/ssr-compiler/src/compile-template/types.ts

@@ -48,4 +48,5 @@ export interface TransformerContext {
 export interface TemplateOpts {
     preserveComments: boolean;
     experimentalComplexExpressions: boolean;
+    apiVersion: number;
 }

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/invalid/invalid-api-version-call-expr-attribute/actual.html

@@ -0,0 +1,5 @@
+<template>
+    <section>
+        <x-child foo="{foo()}"></x-child>
+    </section>
+</template>

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/invalid/invalid-api-version-call-expr-attribute/ast.json

@@ -0,0 +1 @@
+{}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/invalid/invalid-api-version-call-expr-attribute/config.json

@@ -0,0 +1,4 @@
+{
+    "experimentalComplexExpressions": true,
+    "apiVersion": 59
+}