Api version limit for complex template expressions

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
+}

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

@@ -0,0 +1,15 @@
+{
+    "warnings": [
+        {
+            "code": 1210,
+            "message": "Invalid expression {foo()} - LWC1210: Template expression doesn't allow CallExpression. The current component API version (59) is insufficient and must be increased to at least 66 for this type of expression.",
+            "level": 1,
+            "location": {
+                "line": 3,
+                "column": 18,
+                "start": 42,
+                "length": 13
+            }
+        }
+    ]
+}

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

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

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

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

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

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

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/invalid/invalid-api-version-call-expr-text-node/metadata.json

@@ -0,0 +1,15 @@
+{
+    "warnings": [
+        {
+            "code": 1210,
+            "message": "Invalid expression {foo()} - LWC1210: Template expression doesn't allow CallExpression. The current component API version (59) is insufficient and must be increased to at least 66 for this type of expression.",
+            "level": 1,
+            "location": {
+                "line": 3,
+                "column": 18,
+                "start": 42,
+                "length": 7
+            }
+        }
+    ]
+}

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

@@ -0,0 +1,5 @@
+<template>
+    <section>
+        <p class="{classNames[0]}"></p>
+    </section>
+</template>

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

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

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

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

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/invalid/invalid-api-version-computed-prop-attribute/metadata.json

@@ -0,0 +1,15 @@
+{
+    "warnings": [
+        {
+            "code": 1209,
+            "message": "Invalid expression {classNames[0]} - LWC1209: Template expression doesn't allow computed property access. The current component API version (59) is insufficient and must be increased to at least 66 for this type of expression.",
+            "level": 1,
+            "location": {
+                "line": 3,
+                "column": 12,
+                "start": 36,
+                "length": 23
+            }
+        }
+    ]
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/invalid/invalid-api-version-computed-prop-node/actual.html

@@ -0,0 +1,3 @@
+<template>
+    {val[state.foo]}
+</template>

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/invalid/invalid-api-version-computed-prop-node/ast.json

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

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/invalid/invalid-api-version-computed-prop-node/config.json

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

packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/invalid/invalid-api-version-computed-prop-node/metadata.json

@@ -0,0 +1,15 @@
+{
+    "warnings": [
+        {
+            "code": 1209,
+            "message": "Invalid expression {val[state.foo]} - LWC1209: Template expression doesn't allow computed property access. The current component API version (59) is insufficient and must be increased to at least 66 for this type of expression.",
+            "level": 1,
+            "location": {
+                "line": 1,
+                "column": 11,
+                "start": 10,
+                "length": 22
+            }
+        }
+    ]
+}

packages/@lwc/template-compiler/src/parser/attribute.ts

@@ -24,7 +24,7 @@ import {
     isExpression,
     isPotentialExpression,
 } from './expression';
-import { isComplexTemplateExpressionEnabled } from './expression-complex';
+
 import {
     ATTR_NAME,
     DATA_RE,
@@ -111,7 +111,9 @@ export function normalizeAttributeValue(
     const isQuoted = isQuotedAttribute(rawAttrVal);
     const isEscaped = isEscapedAttribute(rawAttrVal);
     if (!isEscaped && isExpression(value)) {
-        if (isQuoted && !isComplexTemplateExpressionEnabled(ctx)) {
+        // Don't test for the API version here, just check if CTE is enabled.
+        // We can provide more specific errors w.r.t API versions after the expression has been parsed and we know what it is.
+        if (isQuoted && !ctx.config.experimentalComplexExpressions) {
             // <input value="{myValue}" />
             // -> ambiguity if the attribute value is a template identifier or a string literal.