@lwc/template-compiler 7.0.1-alpha.0 → 7.0.2

package/dist/index.cjs.js

@@ -10912,6 +10912,138 @@ function validateExpressionAst(rootNode) {
     });
 }
 
+/*
+ * 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
+ */
+// https://262.ecma-international.org/12.0/#sec-keywords-and-reserved-words
+// prettier-ignore
+const REVERSED_KEYWORDS = new Set([
+    // Reserved keywords
+    'await', 'break', 'case', 'catch', 'class', 'const', 'continue', 'debugger', 'default', 'delete',
+    'do', 'else', 'enum', 'export', 'extends', 'false', 'finally', 'for', 'function', 'if', 'import',
+    'in', 'instanceof', 'new', 'null', 'return', 'super', 'switch', 'this', 'throw', 'true', 'try',
+    'typeof', 'var', 'void', 'while', 'with', 'yield',
+    // Strict mode only reserved keywords
+    'let', 'static', 'implements', 'interface', 'package', 'private', 'protected', 'public'
+]);
+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(node, config) {
+    // TODO [#3370]: remove experimental template expression flag
+    if (config.experimentalComplexExpressions) {
+        return validateExpressionAst(node);
+    }
+    const isValidNode = isIdentifier(node) || isMemberExpression(node);
+    errors.invariant(isValidNode, errors.ParserDiagnostics.INVALID_NODE, [node.type]);
+    if (isMemberExpression(node)) {
+        errors.invariant(config.experimentalComputedMemberExpression || !node.computed, errors.ParserDiagnostics.COMPUTED_PROPERTY_ACCESS_NOT_ALLOWED);
+        const { object, property } = node;
+        if (!isIdentifier(object)) {
+            validateExpression(object, config);
+        }
+        if (!isIdentifier(property)) {
+            validateExpression(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 validatePreparsedJsExpressions(ctx) {
+    ctx.preparsedJsExpressions?.forEach(({ parsedExpression, rawText }) => {
+        const acornLoc = parsedExpression.loc;
+        const parse5Loc = {
+            startLine: acornLoc.start.line,
+            startCol: acornLoc.start.column,
+            startOffset: parsedExpression.start,
+            endLine: acornLoc.end.line,
+            endCol: acornLoc.end.column,
+            endOffset: parsedExpression.end,
+        };
+        ctx.withErrorWrapping(() => {
+            validateExpressionAst(parsedExpression);
+        }, errors.ParserDiagnostics.TEMPLATE_EXPRESSION_PARSING_ERROR, sourceLocation(parse5Loc), (err) => `Invalid expression ${rawText} - ${err.message}`);
+    });
+}
+function parseExpression(ctx, source, location) {
+    const { ecmaVersion } = ctx;
+    return ctx.withErrorWrapping(() => {
+        const parsed = acorn.parseExpressionAt(source, 1, {
+            ecmaVersion,
+            // TODO [#3370]: remove experimental template expression flag
+            allowAwaitOutsideFunction: ctx.config.experimentalComplexExpressions,
+        });
+        validateSourceIsParsedExpression(source, parsed);
+        validateExpression(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]);
+    }
+}
+
 /*
  * Copyright (c) 2023, salesforce.com, inc.
  * All rights reserved.
@@ -11069,17 +11201,19 @@ class TemplateHtmlTokenizer extends Tokenizer {
         }
     }
 }
-function isTemplateExpressionTextNodeValue(value) {
-    return value?.[0] === '{';
-}
 function isTemplateElement(node) {
     return node.nodeName === 'template';
 }
 function isTextNode(node) {
     return node?.nodeName === '#text';
 }
-function isTemplateExpressionTextNode(node) {
-    return isTextNode(node) && isTemplateExpressionTextNodeValue(node.value);
+function isTemplateExpressionTextNode(node, html) {
+    return (isTextNode(node) &&
+        isTemplateExpressionTextNodeValue(node.value, node.sourceCodeLocation.startOffset, html));
+}
+function isTemplateExpressionTextNodeValue(value, startOffset, html) {
+    return (value.startsWith(EXPRESSION_SYMBOL_START) &&
+        html.startsWith(EXPRESSION_SYMBOL_START, startOffset));
 }
 /**
  * This class extends `parse5`'s internal parser. The heavy lifting is
@@ -11101,11 +11235,12 @@ class TemplateHtmlParser extends Parser {
     _insertCharacters(token) {
         const parentNode = this.openElements.current;
         const previousPeer = parentNode.childNodes.at(-1);
+        const html = this.tokenizer.preprocessor.html;
         if (
         // If we're not dealing with a template expression...
-        !isTemplateExpressionTextNodeValue(token.chars) &&
+        !isTemplateExpressionTextNodeValue(token.chars, token.location.startOffset, html) &&
             // ... and the previous node wasn't a text-node-template-expression...
-            !isTemplateExpressionTextNode(previousPeer)) {
+            !isTemplateExpressionTextNode(previousPeer, html)) {
             // ... concatenate the provided characters with the previous token's characters.
             return super._insertCharacters(token);
         }
@@ -11225,138 +11360,6 @@ function decodeTextContent(source) {
     return he__namespace.decode(source);
 }
 
-/*
- * 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
- */
-// https://262.ecma-international.org/12.0/#sec-keywords-and-reserved-words
-// prettier-ignore
-const REVERSED_KEYWORDS = new Set([
-    // Reserved keywords
-    'await', 'break', 'case', 'catch', 'class', 'const', 'continue', 'debugger', 'default', 'delete',
-    'do', 'else', 'enum', 'export', 'extends', 'false', 'finally', 'for', 'function', 'if', 'import',
-    'in', 'instanceof', 'new', 'null', 'return', 'super', 'switch', 'this', 'throw', 'true', 'try',
-    'typeof', 'var', 'void', 'while', 'with', 'yield',
-    // Strict mode only reserved keywords
-    'let', 'static', 'implements', 'interface', 'package', 'private', 'protected', 'public'
-]);
-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(node, config) {
-    // TODO [#3370]: remove experimental template expression flag
-    if (config.experimentalComplexExpressions) {
-        return validateExpressionAst(node);
-    }
-    const isValidNode = isIdentifier(node) || isMemberExpression(node);
-    errors.invariant(isValidNode, errors.ParserDiagnostics.INVALID_NODE, [node.type]);
-    if (isMemberExpression(node)) {
-        errors.invariant(config.experimentalComputedMemberExpression || !node.computed, errors.ParserDiagnostics.COMPUTED_PROPERTY_ACCESS_NOT_ALLOWED);
-        const { object, property } = node;
-        if (!isIdentifier(object)) {
-            validateExpression(object, config);
-        }
-        if (!isIdentifier(property)) {
-            validateExpression(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 validatePreparsedJsExpressions(ctx) {
-    ctx.preparsedJsExpressions?.forEach(({ parsedExpression, rawText }) => {
-        const acornLoc = parsedExpression.loc;
-        const parse5Loc = {
-            startLine: acornLoc.start.line,
-            startCol: acornLoc.start.column,
-            startOffset: parsedExpression.start,
-            endLine: acornLoc.end.line,
-            endCol: acornLoc.end.column,
-            endOffset: parsedExpression.end,
-        };
-        ctx.withErrorWrapping(() => {
-            validateExpressionAst(parsedExpression);
-        }, errors.ParserDiagnostics.TEMPLATE_EXPRESSION_PARSING_ERROR, sourceLocation(parse5Loc), (err) => `Invalid expression ${rawText} - ${err.message}`);
-    });
-}
-function parseExpression(ctx, source, location) {
-    const { ecmaVersion } = ctx;
-    return ctx.withErrorWrapping(() => {
-        const parsed = acorn.parseExpressionAt(source, 1, {
-            ecmaVersion,
-            // TODO [#3370]: remove experimental template expression flag
-            allowAwaitOutsideFunction: ctx.config.experimentalComplexExpressions,
-        });
-        validateSourceIsParsedExpression(source, parsed);
-        validateExpression(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]);
-    }
-}
-
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -12958,15 +12961,15 @@ function parseStyleText(cssText) {
     }
     return styleMap;
 }
+const IMPORTANT_FLAG = /\s*!\s*important\s*$/i;
 // Given a map of CSS property keys to values, return an array AST like:
 // ['color', 'blue', false]    // { color: 'blue' }
 // ['background', 'red', true] // { background: 'red !important' }
 function styleMapToStyleDeclsAST(styleMap) {
     const styles = Object.entries(styleMap).map(([key, value]) => {
-        const important = value.endsWith('!important');
+        const important = IMPORTANT_FLAG.test(value);
         if (important) {
-            // trim off the trailing "!important" (10 chars)
-            value = value.substring(0, value.length - 10).trim();
+            value = value.replace(IMPORTANT_FLAG, '').trim();
         }
         return [key, value, important];
     });
@@ -13007,10 +13010,6 @@ function isStaticNode(node, apiVersion) {
     result &&= attributes.every(({ name, value }) => {
         const isStaticSafeLiteral = isLiteral(value) &&
             name !== 'slot' &&
-            // check for ScopedId
-            name !== 'id' &&
-            name !== 'spellcheck' && // spellcheck is specially handled by the vnodes.
-            !isIdReferencingAttribute(name) &&
             // svg href needs sanitization.
             !isSvgUseHref(nodeName, name, namespace) &&
             // Check for ScopedFragId
@@ -13159,7 +13158,7 @@ function serializeAttrs(element, codeGen) {
      */
     const attrs = [];
     let hasClassAttr = false;
-    const collector = ({ name, value, hasExpression, }) => {
+    const collector = ({ name, value, hasExpression, isIdOrIdRef, }) => {
         let v = typeof value === 'string' ? templateStringEscape(value) : value;
         if (name === 'class') {
             hasClassAttr = true;
@@ -13171,10 +13170,24 @@ function serializeAttrs(element, codeGen) {
                 v += '${0}';
             }
         }
+        // `spellcheck` string values are specially handled to massage them into booleans.
+        // For backwards compat with non-static-optimized templates, we also treat any non-`"false"`
+        // value other than the valueless format (e.g. `<div spellcheck>`) as `"true"`,
+        // even though per MDN, the empty string and `"true"` are equivalent:
+        // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck
+        if (name === 'spellcheck' && typeof v === 'string' && !hasExpression) {
+            v = String(v.toLowerCase() !== 'false');
+        }
         if (typeof v === 'string') {
+            // IDs/IDRefs must be handled dynamically at runtime due to synthetic shadow scoping.
+            // Skip serializing here and handle it as if it were a dynamic attribute instead.
+            // Note that, to maintain backwards compatibility with the non-static output, we treat the valueless
+            // "boolean" format (e.g. `<div id>`) as the empty string, which is semantically equivalent.
+            // TODO [#3658]: `disableSyntheticShadowSupport` should also disable this dynamic behavior
+            const needsPlaceholder = hasExpression || isIdOrIdRef;
             // Inject a placeholder where the staticPartId will go when an expression occurs.
             // This is only needed for SSR to inject the expression value during serialization.
-            attrs.push(hasExpression ? `\${"${v}"}` : ` ${name}="${shared.htmlEscape(v, true)}"`);
+            attrs.push(needsPlaceholder ? `\${"${v}"}` : ` ${name}="${shared.htmlEscape(v, true)}"`);
         }
         else {
             attrs.push(` ${name}`);
@@ -13182,13 +13195,20 @@ function serializeAttrs(element, codeGen) {
     };
     element.attributes
         .map((attr) => {
-        const hasExpression = isExpression$1(attr.value);
+        const { name, value } = attr;
+        const hasExpression = isExpression$1(value);
+        // IDs/IDRefs must be handled dynamically at runtime due to synthetic shadow scoping.
+        // Note that for backwards compat we only consider non-booleans to be dynamic IDs/IDRefs
+        // TODO [#3658]: `disableSyntheticShadowSupport` should also disable this dynamic behavior
+        const isIdOrIdRef = (name === 'id' || isIdReferencingAttribute(name)) &&
+            (isExpression$1(value) || isStringLiteral(value));
         return {
             hasExpression,
-            name: attr.name,
-            value: hasExpression
+            isIdOrIdRef,
+            name,
+            value: hasExpression || isIdOrIdRef
                 ? codeGen.getStaticExpressionToken(attr)
-                : attr.value.value,
+                : value.value,
         };
     })
         .forEach(collector);
@@ -13601,7 +13621,7 @@ class CodeGen {
     }
     genClassExpression(value) {
         let classExpression = this.bindExpression(value);
-        const isClassNameObjectBindingEnabled = shared.isAPIFeatureEnabled(11 /* APIFeature.TEMPLATE_CLASS_NAME_OBJECT_BINDING */, this.state.config.apiVersion);
+        const isClassNameObjectBindingEnabled = shared.isAPIFeatureEnabled(10 /* APIFeature.TEMPLATE_CLASS_NAME_OBJECT_BINDING */, this.state.config.apiVersion);
         if (isClassNameObjectBindingEnabled) {
             classExpression = this.genNormalizeClassName(classExpression);
         }
@@ -13715,6 +13735,7 @@ class CodeGen {
         const callExpression$1 = callExpression(identifier$1, params);
         // Check if the property actually exists before calling, to allow
         // for older engines to work with newer compilers
+        // TODO [#4313]: remove temporary logic to support v7 compiler + v6 engine
         return fallbackForCompilerEngineVersionMismatch
             ? conditionalExpression(identifier$1, callExpression$1, fallbackForCompilerEngineVersionMismatch)
             : callExpression$1;
@@ -13890,7 +13911,12 @@ class CodeGen {
                 const attributeExpressions = [];
                 for (const attribute of elm.attributes) {
                     const { name, value } = attribute;
-                    if (isExpression$1(value)) {
+                    // IDs/IDRefs must be handled dynamically at runtime due to synthetic shadow scoping.
+                    // Note that for backwards compat we only consider non-booleans to be dynamic IDs/IDRefs
+                    // TODO [#3658]: `disableSyntheticShadowSupport` should also disable this dynamic behavior
+                    const isIdOrIdRef = (name === 'id' || isIdReferencingAttribute(name)) &&
+                        (isExpression$1(value) || isStringLiteral(value));
+                    if (isExpression$1(value) || isIdOrIdRef) {
                         let partToken = '';
                         if (name === 'style') {
                             partToken = `${"s" /* STATIC_PART_TOKEN_ID.STYLE */}${partId}`;
@@ -13901,6 +13927,7 @@ class CodeGen {
                             databag.push(property$1(identifier('className'), this.genClassExpression(value)));
                         }
                         else {
+                            // non-class, non-style (i.e. generic attribute or ID/IDRef)
                             partToken = `${"a" /* STATIC_PART_TOKEN_ID.ATTRIBUTE */}${partId}:${name}`;
                             attributeExpressions.push(property$1(literal$1(name), bindAttributeExpression(attribute, elm, this, false)));
                         }
@@ -14402,6 +14429,7 @@ function transform(codeGen) {
             if (attrName === 'id') {
                 return codeGen.genScopedId(attrValue.value);
             }
+            // `spellcheck` string values are specially handled to massage them into booleans.
             if (attrName === 'spellcheck') {
                 return literal$1(attrValue.value.toLowerCase() !== 'false');
             }
@@ -14668,5 +14696,5 @@ exports.default = compile;
 exports.kebabcaseToCamelcase = kebabcaseToCamelcase;
 exports.parse = parse;
 exports.toPropertyName = toPropertyName;
-/** version: 7.0.0 */
+/** version: 7.0.2 */
 //# sourceMappingURL=index.cjs.js.map