@lwc/template-compiler 8.22.1 → 8.22.4

package/dist/codegen/expression.d.ts

@@ -1,6 +1,13 @@
 import * as t from '../shared/estree';
-import type { Attribute, BaseElement, ComplexExpression, Property } from '../shared/types';
+import type { Attribute, BaseElement, Expression, ComplexExpression, Property } from '../shared/types';
 import type CodeGen from './codegen';
+/**
+ * Bind the passed expression to the component instance. It applies the following transformation to the expression:
+ * - {value} --> {$cmp.value}
+ * - {value[index]} --> {$cmp.value[$cmp.index]}
+ * @param expression
+ */
+export declare function bindExpression(expression: Expression | t.Literal | ComplexExpression, isLocalIdentifier: (node: t.Identifier) => boolean, templateInstanceName: string, experimentalComplexExpressions: boolean): t.Expression;
 /**
  * Bind the passed expression to the component instance. It applies the following
  * transformation to the expression:
@@ -22,6 +29,6 @@ import type CodeGen from './codegen';
  * @param expression
  * @param codeGen
  */
-export declare function bindComplexExpression(expression: ComplexExpression, codeGen: CodeGen): t.Expression;
+export declare function bindComplexExpression(expression: ComplexExpression, isLocalIdentifier: (node: t.Identifier) => boolean, templateInstanceName: string): t.Expression;
 export declare function bindAttributeExpression(attr: Attribute | Property, element: BaseElement, codeGen: CodeGen, addLegacySanitizationHook: boolean): import("estree").Identifier | import("estree").MemberExpression | import("estree").ArrayExpression | import("estree").ObjectExpression | import("estree").ArrowFunctionExpression | import("estree").UnaryExpression | import("estree").SimpleLiteral | import("estree").RegExpLiteral | import("estree").BigIntLiteral | import("estree").AssignmentExpression | import("estree").AwaitExpression | import("estree").BinaryExpression | import("estree").SimpleCallExpression | import("estree").NewExpression | import("estree").ChainExpression | import("estree").ClassExpression | import("estree").ConditionalExpression | import("estree").FunctionExpression | import("estree").ImportExpression | import("estree").LogicalExpression | import("estree").MetaProperty | import("estree").SequenceExpression | import("estree").TaggedTemplateExpression | import("estree").TemplateLiteral | import("estree").ThisExpression | import("estree").UpdateExpression | import("estree").YieldExpression;
 //# sourceMappingURL=expression.d.ts.map

package/dist/index.cjs.js

@@ -10087,104 +10087,6 @@ function isReservedES6Keyword(str) {
     return REVERSED_KEYWORDS.has(str);
 }
 
-/*
- * Copyright (c) 2018, salesforce.com, inc.
- * All rights reserved.
- * SPDX-License-Identifier: MIT
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
- */
-const EXPRESSION_SYMBOL_START = '{';
-const EXPRESSION_SYMBOL_END = '}';
-const POTENTIAL_EXPRESSION_RE = /^.?{.+}.*$/;
-const WHITESPACES_RE = /\s/;
-function isExpression(source) {
-    // Issue #3418: Legacy behavior, previous regex treated "{}" attribute value as non expression
-    return source[0] === '{' && source.slice(-1) === '}' && source.length > 2;
-}
-function isPotentialExpression(source) {
-    return !!source.match(POTENTIAL_EXPRESSION_RE);
-}
-function validateExpression(source, node, config) {
-    const isValidNode = isIdentifier(node) || isMemberExpression(node);
-    // INVALID_XYZ_COMPLEX provides additional context to the user if CTE is enabled.
-    // The author may not have delimited the CTE with quotes, resulting in it being parsed
-    // as a legacy expression.
-    errors.invariant(isValidNode, config.experimentalComplexExpressions
-        ? errors.ParserDiagnostics.INVALID_NODE_COMPLEX
-        : errors.ParserDiagnostics.INVALID_NODE, [node.type, source]);
-    if (isMemberExpression(node)) {
-        errors.invariant(config.experimentalComputedMemberExpression || !node.computed, config.experimentalComplexExpressions
-            ? errors.ParserDiagnostics.COMPUTED_PROPERTY_ACCESS_NOT_ALLOWED_COMPLEX
-            : errors.ParserDiagnostics.COMPUTED_PROPERTY_ACCESS_NOT_ALLOWED, [source]);
-        const { object, property } = node;
-        if (!isIdentifier(object)) {
-            validateExpression(source, object, config);
-        }
-        if (!isIdentifier(property)) {
-            validateExpression(source, property, config);
-        }
-    }
-}
-function validateSourceIsParsedExpression(source, parsedExpression) {
-    if (parsedExpression.end === source.length - 1) {
-        return;
-    }
-    let unclosedParenthesisCount = 0;
-    for (let i = 0, n = parsedExpression.start; i < n; i++) {
-        if (source[i] === '(') {
-            unclosedParenthesisCount++;
-        }
-    }
-    // source[source.length - 1] === '}', n = source.length - 1 is to avoid processing '}'.
-    for (let i = parsedExpression.end, n = source.length - 1; i < n; i++) {
-        const character = source[i];
-        if (character === ')') {
-            unclosedParenthesisCount--;
-        }
-        else if (character === ';') {
-            // acorn parseExpressionAt will stop at the first ";", it may be that the expression is not
-            // a multiple expression ({foo;}), but this is a case that we explicitly do not want to support.
-            // in such case, let's fail with the same error as if it were a multiple expression.
-            errors.invariant(false, errors.ParserDiagnostics.MULTIPLE_EXPRESSIONS);
-        }
-        else {
-            errors.invariant(WHITESPACES_RE.test(character), errors.ParserDiagnostics.TEMPLATE_EXPRESSION_PARSING_ERROR, ['Unexpected end of expression']);
-        }
-    }
-    errors.invariant(unclosedParenthesisCount === 0, errors.ParserDiagnostics.TEMPLATE_EXPRESSION_PARSING_ERROR, [
-        'Unexpected end of expression',
-    ]);
-}
-function parseExpression(ctx, source, location) {
-    const { ecmaVersion } = ctx;
-    return ctx.withErrorWrapping(() => {
-        const parsed = acorn.parseExpressionAt(source, 1, {
-            ecmaVersion,
-            allowAwaitOutsideFunction: false,
-            onComment: () => errors.invariant(false, errors.ParserDiagnostics.INVALID_EXPR_COMMENTS_DISALLOWED),
-        });
-        validateSourceIsParsedExpression(source, parsed);
-        validateExpression(source, parsed, ctx.config);
-        return { ...parsed, location };
-    }, errors.ParserDiagnostics.TEMPLATE_EXPRESSION_PARSING_ERROR, location, (err) => `Invalid expression ${source} - ${err.message}`);
-}
-function parseIdentifier(ctx, source, location) {
-    let isValid = true;
-    isValid = acorn.isIdentifierStart(source.charCodeAt(0));
-    for (let i = 1; i < source.length && isValid; i++) {
-        isValid = acorn.isIdentifierChar(source.charCodeAt(i));
-    }
-    if (isValid && !isReservedES6Keyword(source)) {
-        return {
-            ...identifier(source),
-            location,
-        };
-    }
-    else {
-        ctx.throwAtLocation(errors.ParserDiagnostics.INVALID_IDENTIFIER, location, [source]);
-    }
-}
-
 /**
  * @typedef { import('estree').Node} Node
  * @typedef {{
@@ -10616,6 +10518,120 @@ function parseComplexExpression(ctx, source, templateSource, location, expressio
     }, errors.ParserDiagnostics.TEMPLATE_EXPRESSION_PARSING_ERROR, location, (err) => `Invalid expression ${source} - ${err.message}`);
 }
 
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+const EXPRESSION_SYMBOL_START = '{';
+const EXPRESSION_SYMBOL_END = '}';
+const POTENTIAL_EXPRESSION_RE = /^.?{.+}.*$/;
+const WHITESPACES_RE = /\s/;
+function isExpression(source) {
+    // Issue #3418: Legacy behavior, previous regex treated "{}" attribute value as non expression
+    return source[0] === '{' && source.slice(-1) === '}' && source.length > 2;
+}
+function isPotentialExpression(source) {
+    return !!source.match(POTENTIAL_EXPRESSION_RE);
+}
+const minCteApiVersion = shared.minApiVersion(11 /* APIFeature.ENABLE_COMPLEX_TEMPLATE_EXPRESSIONS */);
+function validateExpression(source, node, ctx, unquotedAttributeExpression) {
+    const cteOnlyNode = !isIdentifier(node) && !isMemberExpression(node);
+    // If this node is not an identifier or a member expression (the only two nodes allowed if complexTemplateExpressions are disabled),
+    // then we throw if the following invariants do not hold true.
+    if (cteOnlyNode) {
+        // complexTemplateExpressions must be enabled if this is a cteOnlyNode.
+        errors.invariant(ctx.config.experimentalComplexExpressions, errors.ParserDiagnostics.INVALID_NODE, [
+            node.type,
+        ]);
+        // complexTemplateExpressions must be enabled and the component API version must be sufficient.
+        errors.invariant(isComplexTemplateExpressionEnabled(ctx), errors.ParserDiagnostics.INVALID_NODE_CTE_API_VERSION, [node.type, ctx.apiVersion, minCteApiVersion]);
+        // complexTemplateExpressions must be enabled, the component API version must be sufficient and the expression should not be
+        // an unquoted attribute expression.
+        errors.invariant(isComplexTemplateExpressionEnabled(ctx) && !unquotedAttributeExpression, errors.ParserDiagnostics.INVALID_NODE_CTE_UNQUOTED, [node.type, source]);
+    }
+    if (isMemberExpression(node)) {
+        // If this is a computed node and experimentalComputedMemberExpressions is not enabled,
+        // then we throw if the following invariants do not hold true.
+        if (!ctx.config.experimentalComputedMemberExpression && node.computed) {
+            // complexTemplateExpressions must be enabled.
+            errors.invariant(ctx.config.experimentalComplexExpressions, errors.ParserDiagnostics.COMPUTED_PROPERTY_ACCESS_NOT_ALLOWED, [source]);
+            // complexTemplateExpressions must be enabled and the component API version must be sufficient.
+            errors.invariant(isComplexTemplateExpressionEnabled(ctx), errors.ParserDiagnostics.COMPUTED_PROPERTY_ACCESS_NOT_ALLOWED_CTE_API_VERSION, [source, ctx.apiVersion, minCteApiVersion]);
+            // complexTemplateExpressions must be enabled, the component API version must be sufficient and the expression
+            // should not be an unquoted attribute expression.
+            errors.invariant(isComplexTemplateExpressionEnabled(ctx) && !unquotedAttributeExpression, errors.ParserDiagnostics.COMPUTED_PROPERTY_ACCESS_NOT_ALLOWED_CTE_UNQUOTED, [source]);
+        }
+        const { object, property } = node;
+        if (!isIdentifier(object)) {
+            validateExpression(source, object, ctx, unquotedAttributeExpression);
+        }
+        if (!isIdentifier(property)) {
+            validateExpression(source, property, ctx, unquotedAttributeExpression);
+        }
+    }
+}
+function validateSourceIsParsedExpression(source, parsedExpression) {
+    if (parsedExpression.end === source.length - 1) {
+        return;
+    }
+    let unclosedParenthesisCount = 0;
+    for (let i = 0, n = parsedExpression.start; i < n; i++) {
+        if (source[i] === '(') {
+            unclosedParenthesisCount++;
+        }
+    }
+    // source[source.length - 1] === '}', n = source.length - 1 is to avoid processing '}'.
+    for (let i = parsedExpression.end, n = source.length - 1; i < n; i++) {
+        const character = source[i];
+        if (character === ')') {
+            unclosedParenthesisCount--;
+        }
+        else if (character === ';') {
+            // acorn parseExpressionAt will stop at the first ";", it may be that the expression is not
+            // a multiple expression ({foo;}), but this is a case that we explicitly do not want to support.
+            // in such case, let's fail with the same error as if it were a multiple expression.
+            errors.invariant(false, errors.ParserDiagnostics.MULTIPLE_EXPRESSIONS);
+        }
+        else {
+            errors.invariant(WHITESPACES_RE.test(character), errors.ParserDiagnostics.TEMPLATE_EXPRESSION_PARSING_ERROR, ['Unexpected end of expression']);
+        }
+    }
+    errors.invariant(unclosedParenthesisCount === 0, errors.ParserDiagnostics.TEMPLATE_EXPRESSION_PARSING_ERROR, [
+        'Unexpected end of expression',
+    ]);
+}
+function parseExpression(ctx, source, location, unquotedAttributeExpression) {
+    const { ecmaVersion } = ctx;
+    return ctx.withErrorWrapping(() => {
+        const parsed = acorn.parseExpressionAt(source, 1, {
+            ecmaVersion,
+            allowAwaitOutsideFunction: false,
+            onComment: () => errors.invariant(false, errors.ParserDiagnostics.INVALID_EXPR_COMMENTS_DISALLOWED),
+        });
+        validateSourceIsParsedExpression(source, parsed);
+        validateExpression(source, parsed, ctx, unquotedAttributeExpression);
+        return { ...parsed, location };
+    }, errors.ParserDiagnostics.TEMPLATE_EXPRESSION_PARSING_ERROR, location, (err) => `Invalid expression ${source} - ${err.message}`);
+}
+function parseIdentifier(ctx, source, location) {
+    let isValid = true;
+    isValid = acorn.isIdentifierStart(source.charCodeAt(0));
+    for (let i = 1; i < source.length && isValid; i++) {
+        isValid = acorn.isIdentifierChar(source.charCodeAt(i));
+    }
+    if (isValid && !isReservedES6Keyword(source)) {
+        return {
+            ...identifier(source),
+            location,
+        };
+    }
+    else {
+        ctx.throwAtLocation(errors.ParserDiagnostics.INVALID_IDENTIFIER, location, [source]);
+    }
+}
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -11081,7 +11097,9 @@ function normalizeAttributeValue(ctx, raw, tag, attr, location) {
     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.
             const unquoted = raw.replace(/"/g, '');
@@ -11527,7 +11545,7 @@ function parseText(ctx, rawText, sourceLocation, location) {
         }
         let value;
         if (isExpression(token)) {
-            value = parseExpression(ctx, token, sourceLocation);
+            value = parseExpression(ctx, token, sourceLocation, false);
         }
         else {
             value = literal(decodeTextContent(token));
@@ -11579,7 +11597,7 @@ function parseTextNode(ctx, parse5Text) {
         return [];
     }
     const sourceLocation$1 = sourceLocation(location);
-    return ctx.config.experimentalComplexExpressions
+    return isComplexTemplateExpressionEnabled(ctx)
         ? parseTextComplex(ctx, rawText, sourceLocation$1, location)
         : parseText(ctx, rawText, sourceLocation$1, location);
 }
@@ -12462,13 +12480,13 @@ function getTemplateAttribute(ctx, tag, attribute$1, attributeLocation) {
         to be used.
     */
     const isPotentialComplexExpression = quotedExpression && !escapedExpression && value.startsWith(EXPRESSION_SYMBOL_START);
-    if (ctx.config.experimentalComplexExpressions && isPotentialComplexExpression) {
+    if (isComplexTemplateExpressionEnabled(ctx) && isPotentialComplexExpression) {
         const attributeNameOffset = attribute$1.name.length + 2; // The +2 accounts for the '="' in the attribute: attr="...
         const templateSource = ctx.getSource(attributeLocation.startOffset + attributeNameOffset);
         attrValue = parseComplexExpression(ctx, value, templateSource, location).expression;
     }
     else if (isExpression(value) && !escapedExpression) {
-        attrValue = parseExpression(ctx, value, location);
+        attrValue = parseExpression(ctx, value, location, !quotedExpression);
     }
     else if (isBooleanAttribute) {
         attrValue = literal(true);
@@ -13067,6 +13085,48 @@ function serializeStaticElement(element, codeGen) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
+/**
+ * Bind the passed expression to the component instance. It applies the following transformation to the expression:
+ * - {value} --> {$cmp.value}
+ * - {value[index]} --> {$cmp.value[$cmp.index]}
+ * @param expression
+ */
+function bindExpression(expression, isLocalIdentifier, templateInstanceName, experimentalComplexExpressions) {
+    if (isIdentifier(expression)) {
+        if (!isLocalIdentifier(expression)) {
+            return memberExpression(identifier(templateInstanceName), expression);
+        }
+        else {
+            return expression;
+        }
+    }
+    // TODO [#3370]: remove experimental template expression flag
+    if (experimentalComplexExpressions) {
+        // Cloning here is necessary because `this.replace()` is destructive, and we might use the
+        // node later during static content optimization
+        expression = structuredClone(expression);
+        return bindComplexExpression(expression, isLocalIdentifier, templateInstanceName);
+    }
+    // Cloning here is necessary because `this.replace()` is destructive, and we might use the
+    // node later during static content optimization
+    expression = structuredClone(expression);
+    // TODO [#3370]: when the template expression flag is removed, the
+    // ComplexExpression type should be redefined as an ESTree Node. Doing
+    // so when the flag is still in place results in a cascade of required
+    // type changes across the codebase.
+    walk(expression, {
+        leave(node, parent) {
+            if (parent !== null &&
+                isIdentifier(node) &&
+                isMemberExpression(parent) &&
+                parent.object === node &&
+                !isLocalIdentifier(node)) {
+                this.replace(memberExpression(identifier(templateInstanceName), node));
+            }
+        },
+    });
+    return expression;
+}
 /**
  * Bind the passed expression to the component instance. It applies the following
  * transformation to the expression:
@@ -13088,7 +13148,7 @@ function serializeStaticElement(element, codeGen) {
  * @param expression
  * @param codeGen
  */
-function bindComplexExpression(expression, codeGen) {
+function bindComplexExpression(expression, isLocalIdentifier, templateInstanceName) {
     const expressionScopes = new ExpressionScopes();
     // TODO [#3370]: when the template expression flag is removed, the
     // ComplexExpression type should be redefined as an ESTree Node. Doing
@@ -13112,9 +13172,9 @@ function bindComplexExpression(expression, codeGen) {
                 isIdentifier$1 &&
                 !(isMemberExpression(parent) && parent.property === node && !parent.computed) &&
                 !(isProperty$1(parent) && parent.key === node) &&
-                !codeGen.isLocalIdentifier(node) &&
+                !isLocalIdentifier(node) &&
                 !expressionScopes.isScopedToExpression(node)) {
-                this.replace(memberExpression(identifier(TEMPLATE_PARAMS.INSTANCE), node));
+                this.replace(memberExpression(identifier(templateInstanceName), node));
             }
         },
     });
@@ -13595,43 +13655,7 @@ class CodeGen {
      * @param expression
      */
     bindExpression(expression) {
-        if (isIdentifier(expression)) {
-            if (!this.isLocalIdentifier(expression)) {
-                return memberExpression(identifier(TEMPLATE_PARAMS.INSTANCE), expression);
-            }
-            else {
-                return expression;
-            }
-        }
-        // TODO [#3370]: remove experimental template expression flag
-        if (this.state.config.experimentalComplexExpressions) {
-            // Cloning here is necessary because `this.replace()` is destructive, and we might use the
-            // node later during static content optimization
-            expression = structuredClone(expression);
-            return bindComplexExpression(expression, this);
-        }
-        // We need access to both this `this` and the walker's `this` in the walker
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const scope = this;
-        // Cloning here is necessary because `this.replace()` is destructive, and we might use the
-        // node later during static content optimization
-        expression = structuredClone(expression);
-        // TODO [#3370]: when the template expression flag is removed, the
-        // ComplexExpression type should be redefined as an ESTree Node. Doing
-        // so when the flag is still in place results in a cascade of required
-        // type changes across the codebase.
-        walk(expression, {
-            leave(node, parent) {
-                if (parent !== null &&
-                    isIdentifier(node) &&
-                    isMemberExpression(parent) &&
-                    parent.object === node &&
-                    !scope.isLocalIdentifier(node)) {
-                    this.replace(memberExpression(identifier(TEMPLATE_PARAMS.INSTANCE), node));
-                }
-            },
-        });
-        return expression;
+        return bindExpression(expression, this.isLocalIdentifier.bind(this), TEMPLATE_PARAMS.INSTANCE, this.state.config.experimentalComplexExpressions);
     }
     genStaticElement(element, slotParentName) {
         const staticParts = this.genStaticParts(element);
@@ -14543,11 +14567,12 @@ function compile(source, filename, config) {
     };
 }
 
+exports.bindExpression = bindExpression;
 exports.compile = compile;
 exports.default = compile;
 exports.generateScopeTokens = generateScopeTokens;
 exports.kebabcaseToCamelcase = kebabcaseToCamelcase;
 exports.parse = parse;
 exports.toPropertyName = toPropertyName;
-/** version: 8.22.1 */
+/** version: 8.22.4 */
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { Config } from './config';
 export { toPropertyName } from './shared/utils';
 export { kebabcaseToCamelcase } from './shared/naming';
 export { generateScopeTokens } from './scopeTokens';
+export { bindExpression } from './codegen/expression';
 /**
  * Parses HTML markup into an AST
  * @param source HTML markup to parse

package/dist/index.js

@@ -3,7 +3,7 @@
  */
 import { invariant, TemplateErrors, generateCompilerError, CompilerError, normalizeToDiagnostic, generateCompilerDiagnostic, ParserDiagnostics, DiagnosticLevel, CompilerMetrics } from '@lwc/errors';
 import path from 'path';
-import { StringCharAt, hasOwnProperty, getAPIVersionFromNumber, HTML_NAMESPACE, AriaAttrNameToPropNameMap, fromEntries, ArrayFrom, SPECIAL_PROPERTY_ATTRIBUTE_MAPPING, isAPIFeatureEnabled, ID_REFERENCING_ATTRIBUTES_SET, SVG_NAMESPACE, isBooleanAttribute, isGlobalHtmlAttribute, isAriaAttribute, isVoidElement, MATHML_NAMESPACE, isNull, isUndefined, IMPORTANT_FLAG, isArray, ArrayEvery, ArraySome, normalizeStyleAttributeValue, htmlEscape, parseStyleText, LWC_VERSION_COMMENT } from '@lwc/shared';
+import { StringCharAt, hasOwnProperty, getAPIVersionFromNumber, HTML_NAMESPACE, AriaAttrNameToPropNameMap, fromEntries, ArrayFrom, SPECIAL_PROPERTY_ATTRIBUTE_MAPPING, isAPIFeatureEnabled, minApiVersion, ID_REFERENCING_ATTRIBUTES_SET, SVG_NAMESPACE, isBooleanAttribute, isGlobalHtmlAttribute, isAriaAttribute, isVoidElement, MATHML_NAMESPACE, isNull, isUndefined, IMPORTANT_FLAG, isArray, ArrayEvery, ArraySome, normalizeStyleAttributeValue, htmlEscape, parseStyleText, LWC_VERSION_COMMENT } from '@lwc/shared';
 import * as he from 'he';
 import { parseExpressionAt, isIdentifierStart, isIdentifierChar } from 'acorn';
 import * as astring from 'astring';
@@ -10063,104 +10063,6 @@ function isReservedES6Keyword(str) {
     return REVERSED_KEYWORDS.has(str);
 }
 
-/*
- * Copyright (c) 2018, salesforce.com, inc.
- * All rights reserved.
- * SPDX-License-Identifier: MIT
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
- */
-const EXPRESSION_SYMBOL_START = '{';
-const EXPRESSION_SYMBOL_END = '}';
-const POTENTIAL_EXPRESSION_RE = /^.?{.+}.*$/;
-const WHITESPACES_RE = /\s/;
-function isExpression(source) {
-    // Issue #3418: Legacy behavior, previous regex treated "{}" attribute value as non expression
-    return source[0] === '{' && source.slice(-1) === '}' && source.length > 2;
-}
-function isPotentialExpression(source) {
-    return !!source.match(POTENTIAL_EXPRESSION_RE);
-}
-function validateExpression(source, node, config) {
-    const isValidNode = isIdentifier(node) || isMemberExpression(node);
-    // INVALID_XYZ_COMPLEX provides additional context to the user if CTE is enabled.
-    // The author may not have delimited the CTE with quotes, resulting in it being parsed
-    // as a legacy expression.
-    invariant(isValidNode, config.experimentalComplexExpressions
-        ? ParserDiagnostics.INVALID_NODE_COMPLEX
-        : ParserDiagnostics.INVALID_NODE, [node.type, source]);
-    if (isMemberExpression(node)) {
-        invariant(config.experimentalComputedMemberExpression || !node.computed, config.experimentalComplexExpressions
-            ? ParserDiagnostics.COMPUTED_PROPERTY_ACCESS_NOT_ALLOWED_COMPLEX
-            : ParserDiagnostics.COMPUTED_PROPERTY_ACCESS_NOT_ALLOWED, [source]);
-        const { object, property } = node;
-        if (!isIdentifier(object)) {
-            validateExpression(source, object, config);
-        }
-        if (!isIdentifier(property)) {
-            validateExpression(source, property, config);
-        }
-    }
-}
-function validateSourceIsParsedExpression(source, parsedExpression) {
-    if (parsedExpression.end === source.length - 1) {
-        return;
-    }
-    let unclosedParenthesisCount = 0;
-    for (let i = 0, n = parsedExpression.start; i < n; i++) {
-        if (source[i] === '(') {
-            unclosedParenthesisCount++;
-        }
-    }
-    // source[source.length - 1] === '}', n = source.length - 1 is to avoid processing '}'.
-    for (let i = parsedExpression.end, n = source.length - 1; i < n; i++) {
-        const character = source[i];
-        if (character === ')') {
-            unclosedParenthesisCount--;
-        }
-        else if (character === ';') {
-            // acorn parseExpressionAt will stop at the first ";", it may be that the expression is not
-            // a multiple expression ({foo;}), but this is a case that we explicitly do not want to support.
-            // in such case, let's fail with the same error as if it were a multiple expression.
-            invariant(false, ParserDiagnostics.MULTIPLE_EXPRESSIONS);
-        }
-        else {
-            invariant(WHITESPACES_RE.test(character), ParserDiagnostics.TEMPLATE_EXPRESSION_PARSING_ERROR, ['Unexpected end of expression']);
-        }
-    }
-    invariant(unclosedParenthesisCount === 0, ParserDiagnostics.TEMPLATE_EXPRESSION_PARSING_ERROR, [
-        'Unexpected end of expression',
-    ]);
-}
-function parseExpression(ctx, source, location) {
-    const { ecmaVersion } = ctx;
-    return ctx.withErrorWrapping(() => {
-        const parsed = parseExpressionAt(source, 1, {
-            ecmaVersion,
-            allowAwaitOutsideFunction: false,
-            onComment: () => invariant(false, ParserDiagnostics.INVALID_EXPR_COMMENTS_DISALLOWED),
-        });
-        validateSourceIsParsedExpression(source, parsed);
-        validateExpression(source, parsed, ctx.config);
-        return { ...parsed, location };
-    }, ParserDiagnostics.TEMPLATE_EXPRESSION_PARSING_ERROR, location, (err) => `Invalid expression ${source} - ${err.message}`);
-}
-function parseIdentifier(ctx, source, location) {
-    let isValid = true;
-    isValid = isIdentifierStart(source.charCodeAt(0));
-    for (let i = 1; i < source.length && isValid; i++) {
-        isValid = isIdentifierChar(source.charCodeAt(i));
-    }
-    if (isValid && !isReservedES6Keyword(source)) {
-        return {
-            ...identifier(source),
-            location,
-        };
-    }
-    else {
-        ctx.throwAtLocation(ParserDiagnostics.INVALID_IDENTIFIER, location, [source]);
-    }
-}
-
 /**
  * @typedef { import('estree').Node} Node
  * @typedef {{
@@ -10592,6 +10494,120 @@ function parseComplexExpression(ctx, source, templateSource, location, expressio
     }, ParserDiagnostics.TEMPLATE_EXPRESSION_PARSING_ERROR, location, (err) => `Invalid expression ${source} - ${err.message}`);
 }
 
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+const EXPRESSION_SYMBOL_START = '{';
+const EXPRESSION_SYMBOL_END = '}';
+const POTENTIAL_EXPRESSION_RE = /^.?{.+}.*$/;
+const WHITESPACES_RE = /\s/;
+function isExpression(source) {
+    // Issue #3418: Legacy behavior, previous regex treated "{}" attribute value as non expression
+    return source[0] === '{' && source.slice(-1) === '}' && source.length > 2;
+}
+function isPotentialExpression(source) {
+    return !!source.match(POTENTIAL_EXPRESSION_RE);
+}
+const minCteApiVersion = minApiVersion(11 /* APIFeature.ENABLE_COMPLEX_TEMPLATE_EXPRESSIONS */);
+function validateExpression(source, node, ctx, unquotedAttributeExpression) {
+    const cteOnlyNode = !isIdentifier(node) && !isMemberExpression(node);
+    // If this node is not an identifier or a member expression (the only two nodes allowed if complexTemplateExpressions are disabled),
+    // then we throw if the following invariants do not hold true.
+    if (cteOnlyNode) {
+        // complexTemplateExpressions must be enabled if this is a cteOnlyNode.
+        invariant(ctx.config.experimentalComplexExpressions, ParserDiagnostics.INVALID_NODE, [
+            node.type,
+        ]);
+        // complexTemplateExpressions must be enabled and the component API version must be sufficient.
+        invariant(isComplexTemplateExpressionEnabled(ctx), ParserDiagnostics.INVALID_NODE_CTE_API_VERSION, [node.type, ctx.apiVersion, minCteApiVersion]);
+        // complexTemplateExpressions must be enabled, the component API version must be sufficient and the expression should not be
+        // an unquoted attribute expression.
+        invariant(isComplexTemplateExpressionEnabled(ctx) && !unquotedAttributeExpression, ParserDiagnostics.INVALID_NODE_CTE_UNQUOTED, [node.type, source]);
+    }
+    if (isMemberExpression(node)) {
+        // If this is a computed node and experimentalComputedMemberExpressions is not enabled,
+        // then we throw if the following invariants do not hold true.
+        if (!ctx.config.experimentalComputedMemberExpression && node.computed) {
+            // complexTemplateExpressions must be enabled.
+            invariant(ctx.config.experimentalComplexExpressions, ParserDiagnostics.COMPUTED_PROPERTY_ACCESS_NOT_ALLOWED, [source]);
+            // complexTemplateExpressions must be enabled and the component API version must be sufficient.
+            invariant(isComplexTemplateExpressionEnabled(ctx), ParserDiagnostics.COMPUTED_PROPERTY_ACCESS_NOT_ALLOWED_CTE_API_VERSION, [source, ctx.apiVersion, minCteApiVersion]);
+            // complexTemplateExpressions must be enabled, the component API version must be sufficient and the expression
+            // should not be an unquoted attribute expression.
+            invariant(isComplexTemplateExpressionEnabled(ctx) && !unquotedAttributeExpression, ParserDiagnostics.COMPUTED_PROPERTY_ACCESS_NOT_ALLOWED_CTE_UNQUOTED, [source]);
+        }
+        const { object, property } = node;
+        if (!isIdentifier(object)) {
+            validateExpression(source, object, ctx, unquotedAttributeExpression);
+        }
+        if (!isIdentifier(property)) {
+            validateExpression(source, property, ctx, unquotedAttributeExpression);
+        }
+    }
+}
+function validateSourceIsParsedExpression(source, parsedExpression) {
+    if (parsedExpression.end === source.length - 1) {
+        return;
+    }
+    let unclosedParenthesisCount = 0;
+    for (let i = 0, n = parsedExpression.start; i < n; i++) {
+        if (source[i] === '(') {
+            unclosedParenthesisCount++;
+        }
+    }
+    // source[source.length - 1] === '}', n = source.length - 1 is to avoid processing '}'.
+    for (let i = parsedExpression.end, n = source.length - 1; i < n; i++) {
+        const character = source[i];
+        if (character === ')') {
+            unclosedParenthesisCount--;
+        }
+        else if (character === ';') {
+            // acorn parseExpressionAt will stop at the first ";", it may be that the expression is not
+            // a multiple expression ({foo;}), but this is a case that we explicitly do not want to support.
+            // in such case, let's fail with the same error as if it were a multiple expression.
+            invariant(false, ParserDiagnostics.MULTIPLE_EXPRESSIONS);
+        }
+        else {
+            invariant(WHITESPACES_RE.test(character), ParserDiagnostics.TEMPLATE_EXPRESSION_PARSING_ERROR, ['Unexpected end of expression']);
+        }
+    }
+    invariant(unclosedParenthesisCount === 0, ParserDiagnostics.TEMPLATE_EXPRESSION_PARSING_ERROR, [
+        'Unexpected end of expression',
+    ]);
+}
+function parseExpression(ctx, source, location, unquotedAttributeExpression) {
+    const { ecmaVersion } = ctx;
+    return ctx.withErrorWrapping(() => {
+        const parsed = parseExpressionAt(source, 1, {
+            ecmaVersion,
+            allowAwaitOutsideFunction: false,
+            onComment: () => invariant(false, ParserDiagnostics.INVALID_EXPR_COMMENTS_DISALLOWED),
+        });
+        validateSourceIsParsedExpression(source, parsed);
+        validateExpression(source, parsed, ctx, unquotedAttributeExpression);
+        return { ...parsed, location };
+    }, ParserDiagnostics.TEMPLATE_EXPRESSION_PARSING_ERROR, location, (err) => `Invalid expression ${source} - ${err.message}`);
+}
+function parseIdentifier(ctx, source, location) {
+    let isValid = true;
+    isValid = isIdentifierStart(source.charCodeAt(0));
+    for (let i = 1; i < source.length && isValid; i++) {
+        isValid = isIdentifierChar(source.charCodeAt(i));
+    }
+    if (isValid && !isReservedES6Keyword(source)) {
+        return {
+            ...identifier(source),
+            location,
+        };
+    }
+    else {
+        ctx.throwAtLocation(ParserDiagnostics.INVALID_IDENTIFIER, location, [source]);
+    }
+}
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -11057,7 +11073,9 @@ function normalizeAttributeValue(ctx, raw, tag, attr, location) {
     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.
             const unquoted = raw.replace(/"/g, '');
@@ -11503,7 +11521,7 @@ function parseText(ctx, rawText, sourceLocation, location) {
         }
         let value;
         if (isExpression(token)) {
-            value = parseExpression(ctx, token, sourceLocation);
+            value = parseExpression(ctx, token, sourceLocation, false);
         }
         else {
             value = literal(decodeTextContent(token));
@@ -11555,7 +11573,7 @@ function parseTextNode(ctx, parse5Text) {
         return [];
     }
     const sourceLocation$1 = sourceLocation(location);
-    return ctx.config.experimentalComplexExpressions
+    return isComplexTemplateExpressionEnabled(ctx)
         ? parseTextComplex(ctx, rawText, sourceLocation$1, location)
         : parseText(ctx, rawText, sourceLocation$1, location);
 }
@@ -12438,13 +12456,13 @@ function getTemplateAttribute(ctx, tag, attribute$1, attributeLocation) {
         to be used.
     */
     const isPotentialComplexExpression = quotedExpression && !escapedExpression && value.startsWith(EXPRESSION_SYMBOL_START);
-    if (ctx.config.experimentalComplexExpressions && isPotentialComplexExpression) {
+    if (isComplexTemplateExpressionEnabled(ctx) && isPotentialComplexExpression) {
         const attributeNameOffset = attribute$1.name.length + 2; // The +2 accounts for the '="' in the attribute: attr="...
         const templateSource = ctx.getSource(attributeLocation.startOffset + attributeNameOffset);
         attrValue = parseComplexExpression(ctx, value, templateSource, location).expression;
     }
     else if (isExpression(value) && !escapedExpression) {
-        attrValue = parseExpression(ctx, value, location);
+        attrValue = parseExpression(ctx, value, location, !quotedExpression);
     }
     else if (isBooleanAttribute) {
         attrValue = literal(true);
@@ -13043,6 +13061,48 @@ function serializeStaticElement(element, codeGen) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
+/**
+ * Bind the passed expression to the component instance. It applies the following transformation to the expression:
+ * - {value} --> {$cmp.value}
+ * - {value[index]} --> {$cmp.value[$cmp.index]}
+ * @param expression
+ */
+function bindExpression(expression, isLocalIdentifier, templateInstanceName, experimentalComplexExpressions) {
+    if (isIdentifier(expression)) {
+        if (!isLocalIdentifier(expression)) {
+            return memberExpression(identifier(templateInstanceName), expression);
+        }
+        else {
+            return expression;
+        }
+    }
+    // TODO [#3370]: remove experimental template expression flag
+    if (experimentalComplexExpressions) {
+        // Cloning here is necessary because `this.replace()` is destructive, and we might use the
+        // node later during static content optimization
+        expression = structuredClone(expression);
+        return bindComplexExpression(expression, isLocalIdentifier, templateInstanceName);
+    }
+    // Cloning here is necessary because `this.replace()` is destructive, and we might use the
+    // node later during static content optimization
+    expression = structuredClone(expression);
+    // TODO [#3370]: when the template expression flag is removed, the
+    // ComplexExpression type should be redefined as an ESTree Node. Doing
+    // so when the flag is still in place results in a cascade of required
+    // type changes across the codebase.
+    walk(expression, {
+        leave(node, parent) {
+            if (parent !== null &&
+                isIdentifier(node) &&
+                isMemberExpression(parent) &&
+                parent.object === node &&
+                !isLocalIdentifier(node)) {
+                this.replace(memberExpression(identifier(templateInstanceName), node));
+            }
+        },
+    });
+    return expression;
+}
 /**
  * Bind the passed expression to the component instance. It applies the following
  * transformation to the expression:
@@ -13064,7 +13124,7 @@ function serializeStaticElement(element, codeGen) {
  * @param expression
  * @param codeGen
  */
-function bindComplexExpression(expression, codeGen) {
+function bindComplexExpression(expression, isLocalIdentifier, templateInstanceName) {
     const expressionScopes = new ExpressionScopes();
     // TODO [#3370]: when the template expression flag is removed, the
     // ComplexExpression type should be redefined as an ESTree Node. Doing
@@ -13088,9 +13148,9 @@ function bindComplexExpression(expression, codeGen) {
                 isIdentifier$1 &&
                 !(isMemberExpression(parent) && parent.property === node && !parent.computed) &&
                 !(isProperty$1(parent) && parent.key === node) &&
-                !codeGen.isLocalIdentifier(node) &&
+                !isLocalIdentifier(node) &&
                 !expressionScopes.isScopedToExpression(node)) {
-                this.replace(memberExpression(identifier(TEMPLATE_PARAMS.INSTANCE), node));
+                this.replace(memberExpression(identifier(templateInstanceName), node));
             }
         },
     });
@@ -13571,43 +13631,7 @@ class CodeGen {
      * @param expression
      */
     bindExpression(expression) {
-        if (isIdentifier(expression)) {
-            if (!this.isLocalIdentifier(expression)) {
-                return memberExpression(identifier(TEMPLATE_PARAMS.INSTANCE), expression);
-            }
-            else {
-                return expression;
-            }
-        }
-        // TODO [#3370]: remove experimental template expression flag
-        if (this.state.config.experimentalComplexExpressions) {
-            // Cloning here is necessary because `this.replace()` is destructive, and we might use the
-            // node later during static content optimization
-            expression = structuredClone(expression);
-            return bindComplexExpression(expression, this);
-        }
-        // We need access to both this `this` and the walker's `this` in the walker
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const scope = this;
-        // Cloning here is necessary because `this.replace()` is destructive, and we might use the
-        // node later during static content optimization
-        expression = structuredClone(expression);
-        // TODO [#3370]: when the template expression flag is removed, the
-        // ComplexExpression type should be redefined as an ESTree Node. Doing
-        // so when the flag is still in place results in a cascade of required
-        // type changes across the codebase.
-        walk(expression, {
-            leave(node, parent) {
-                if (parent !== null &&
-                    isIdentifier(node) &&
-                    isMemberExpression(parent) &&
-                    parent.object === node &&
-                    !scope.isLocalIdentifier(node)) {
-                    this.replace(memberExpression(identifier(TEMPLATE_PARAMS.INSTANCE), node));
-                }
-            },
-        });
-        return expression;
+        return bindExpression(expression, this.isLocalIdentifier.bind(this), TEMPLATE_PARAMS.INSTANCE, this.state.config.experimentalComplexExpressions);
     }
     genStaticElement(element, slotParentName) {
         const staticParts = this.genStaticParts(element);
@@ -14519,6 +14543,6 @@ function compile(source, filename, config) {
     };
 }
 
-export { ElementDirectiveName, LWCDirectiveDomMode, LWCDirectiveRenderMode, LwcTagName, RootDirectiveName, TemplateDirectiveName, compile, compile as default, generateScopeTokens, kebabcaseToCamelcase, parse, toPropertyName };
-/** version: 8.22.1 */
+export { ElementDirectiveName, LWCDirectiveDomMode, LWCDirectiveRenderMode, LwcTagName, RootDirectiveName, TemplateDirectiveName, bindExpression, compile, compile as default, generateScopeTokens, kebabcaseToCamelcase, parse, toPropertyName };
+/** version: 8.22.4 */
 //# sourceMappingURL=index.js.map

package/dist/parser/expression.d.ts

@@ -6,6 +6,6 @@ export declare const EXPRESSION_SYMBOL_END = "}";
 export declare function isExpression(source: string): boolean;
 export declare function isPotentialExpression(source: string): boolean;
 export declare function validateSourceIsParsedExpression(source: string, parsedExpression: Node): void;
-export declare function parseExpression(ctx: ParserCtx, source: string, location: SourceLocation): Expression;
+export declare function parseExpression(ctx: ParserCtx, source: string, location: SourceLocation, unquotedAttributeExpression: boolean): Expression;
 export declare function parseIdentifier(ctx: ParserCtx, source: string, location: SourceLocation): Identifier;
 //# sourceMappingURL=expression.d.ts.map

package/package.json

@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/template-compiler",
-    "version": "8.22.1",
+    "version": "8.22.4",
     "description": "Template compiler package",
     "keywords": [
         "lwc"
@@ -46,8 +46,8 @@
         }
     },
     "dependencies": {
-        "@lwc/errors": "8.22.1",
-        "@lwc/shared": "8.22.1",
+        "@lwc/errors": "8.22.4",
+        "@lwc/shared": "8.22.4",
         "acorn": "~8.15.0",
         "astring": "~1.9.0",
         "he": "~1.2.0"