@lwc/template-compiler 2.45.4 → 2.46.0

package/dist/index.js

@@ -2,7 +2,7 @@
 /**
  * Copyright (C) 2023 salesforce.com, inc.
  */
-import { invariant, TemplateErrors, generateCompilerError, CompilerError, normalizeToDiagnostic, generateCompilerDiagnostic, ParserDiagnostics, DiagnosticLevel } from '@lwc/errors';
+import { invariant, TemplateErrors, generateCompilerError, CompilerError, normalizeToDiagnostic, generateCompilerDiagnostic, ParserDiagnostics, DiagnosticLevel, CompilerMetrics } from '@lwc/errors';
 import { hasOwnProperty, HTML_NAMESPACE, AriaAttrNameToPropNameMap, isBooleanAttribute, isGlobalHtmlAttribute, ID_REFERENCING_ATTRIBUTES_SET, SVG_NAMESPACE, isAriaAttribute, isUndefined, isVoidElement, MATHML_NAMESPACE, isNull, htmlEscape, LWC_VERSION_COMMENT } from '@lwc/shared';
 import * as parse5 from 'parse5';
 import * as he from 'he';
@@ -116,6 +116,7 @@ const AVAILABLE_OPTION_NAMES = new Set([
     'experimentalDynamicDirective',
     'enableDynamicComponents',
     'preserveHtmlComments',
+    'instrumentation',
 ]);
 function normalizeCustomRendererConfig(config) {
     const tagNames = [];
@@ -150,6 +151,7 @@ function normalizeConfig(config) {
     const customRendererConfig = config.customRendererConfig
         ? normalizeCustomRendererConfig(config.customRendererConfig)
         : undefined;
+    const instrumentation = config.instrumentation || undefined;
     for (const property in config) {
         if (!AVAILABLE_OPTION_NAMES.has(property) && hasOwnProperty.call(config, property)) {
             throw generateCompilerError(TemplateErrors.UNKNOWN_OPTION_PROPERTY, {
@@ -157,9 +159,9 @@ function normalizeConfig(config) {
             });
         }
     }
-    return Object.assign(Object.assign({ preserveHtmlComments: false, experimentalComputedMemberExpression: false, 
+    return Object.assign(Object.assign(Object.assign({ preserveHtmlComments: false, experimentalComputedMemberExpression: false, 
         // TODO [#3370]: remove experimental template expression flag
-        experimentalComplexExpressions: false, experimentalDynamicDirective: false, enableDynamicComponents: false, enableStaticContentOptimization: true, enableLwcSpread: false }, config), { customRendererConfig });
+        experimentalComplexExpressions: false, experimentalDynamicDirective: false, enableDynamicComponents: false, enableStaticContentOptimization: true, enableLwcSpread: false }, config), { customRendererConfig }), { instrumentation });
 }
 
 function isIdentifier(node) {
@@ -1564,6 +1566,7 @@ class ParserCtx {
         this.ecmaVersion = config.experimentalComplexExpressions
             ? TMPL_EXPR_ECMASCRIPT_EDITION
             : 2020;
+        this.instrumentation = config.instrumentation;
     }
     getSource(start, end) {
         return this.source.slice(start, end);
@@ -3073,6 +3076,7 @@ function applyRootLwcDirectives(ctx, parsedAttr, root) {
     applyLwcPreserveCommentsDirective(ctx, parsedAttr, root);
 }
 function applyLwcRenderModeDirective(ctx, parsedAttr, root) {
+    var _a;
     const lwcRenderModeAttribute = parsedAttr.pick(RootDirectiveName.RenderMode);
     if (!lwcRenderModeAttribute) {
         return;
@@ -3084,6 +3088,7 @@ function applyLwcRenderModeDirective(ctx, parsedAttr, root) {
         ctx.throwOnNode(ParserDiagnostics.LWC_RENDER_MODE_INVALID_VALUE, root);
     }
     root.directives.push(renderModeDirective(renderDomAttr.value, lwcRenderModeAttribute.location));
+    (_a = ctx.instrumentation) === null || _a === void 0 ? void 0 : _a.incrementCounter(CompilerMetrics.LWCRenderModeDirective);
 }
 function applyLwcPreserveCommentsDirective(ctx, parsedAttr, root) {
     const lwcPreserveCommentAttribute = parsedAttr.pick(RootDirectiveName.PreserveComments);
@@ -3186,6 +3191,7 @@ function applyLwcExternalDirective(ctx, parsedAttr, element) {
     }
 }
 function applyLwcDynamicDirective(ctx, parsedAttr, element) {
+    var _a;
     const { name: tag } = element;
     const lwcDynamicAttribute = parsedAttr.pick(ElementDirectiveName.Dynamic);
     if (!lwcDynamicAttribute) {
@@ -3205,6 +3211,7 @@ function applyLwcDynamicDirective(ctx, parsedAttr, element) {
     }
     // lwc:dynamic will be deprecated in 246, issue a warning when usage is detected.
     ctx.warnOnNode(ParserDiagnostics.DEPRECATED_LWC_DYNAMIC_ATTRIBUTE, element);
+    (_a = ctx.instrumentation) === null || _a === void 0 ? void 0 : _a.incrementCounter(CompilerMetrics.LWCDynamicDirective);
     element.directives.push(dynamicDirective(lwcDynamicAttr, location));
 }
 function applyLwcIsDirective(ctx, parsedAttr, element) {
@@ -3945,7 +3952,7 @@ function parseClassNames(classNames) {
 }
 function isStaticNode(node) {
     let result = true;
-    const { name: nodeName, namespace = '', attributes, directives, properties, listeners } = node;
+    const { name: nodeName, namespace = '', attributes, directives, properties } = node;
     if (namespace !== HTML_NAMESPACE) {
         // TODO [#3313]: re-enable static optimization for SVGs once scope token is always lowercase
         return false;
@@ -3967,7 +3974,6 @@ function isStaticNode(node) {
     })); // all attrs are static
     result && (result = directives.length === 0); // do not have any directive
     result && (result = properties.every((prop) => isLiteral(prop.value))); // all properties are static
-    result && (result = listeners.length === 0); // do not have any event listener
     return result;
 }
 function collectStaticNodes(node, staticNodes, state) {
@@ -3983,7 +3989,10 @@ function collectStaticNodes(node, staticNodes, state) {
         // it is ElseBlock | ForBlock | If | BaseElement
         node.children.forEach((childNode) => {
             collectStaticNodes(childNode, staticNodes, state);
-            childrenAreStatic = childrenAreStatic && staticNodes.has(childNode);
+            childrenAreStatic && (childrenAreStatic = staticNodes.has(childNode));
+            // Bail out if any children have event listeners. Event listeners are only allowed at the top level of a
+            // static fragment, because the engine currently cannot attach listeners to nodes inside a static fragment.
+            childrenAreStatic && (childrenAreStatic = !isBaseElement(childNode) || childNode.listeners.length === 0);
         });
         // for IfBlock and ElseifBlock, traverse down the else branch
         if (isConditionalParentBlock(node) && node.else) {
@@ -4428,6 +4437,14 @@ class CodeGen {
     genBooleanAttributeExpr(bindExpr) {
         return conditionalExpression(bindExpr, literal$1(''), literal$1(null));
     }
+    genEventListeners(listeners) {
+        const listenerObj = Object.fromEntries(listeners.map((listener) => [listener.name, listener]));
+        return objectToAST(listenerObj, (key) => {
+            const componentHandler = this.bindExpression(listenerObj[key].handler);
+            const handler = this.genBind(componentHandler);
+            return memorizeHandler(this, componentHandler, handler);
+        });
+    }
     /**
      * This routine generates an expression that avoids
      * computing the sanitized html of a raw html if it does not change
@@ -4552,10 +4569,12 @@ class CodeGen {
             identifier: identifier$1,
             expr,
         });
-        return this._renderApiCall(RENDER_APIS.staticFragment, [
-            callExpression(identifier$1, []),
-            literal$1(key),
-        ]);
+        const args = [callExpression(identifier$1, []), literal$1(key)];
+        if (element.listeners.length) {
+            const listenerObjectAST = this.genEventListeners(element.listeners);
+            args.push(objectExpression([property$1(identifier('on'), listenerObjectAST)]));
+        }
+        return this._renderApiCall(RENDER_APIS.staticFragment, args);
     }
 }
 
@@ -4742,6 +4761,7 @@ function format(templateFn, codeGen) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 function transform(codeGen) {
+    const instrumentation = codeGen.state.config.instrumentation;
     function transformElement(element, slotParentName) {
         const databag = elementDataBag(element, slotParentName);
         let res;
@@ -5154,8 +5174,10 @@ function transform(codeGen) {
             ]);
             data.push(property$1(identifier('context'), contextObj));
         }
+        // Spread
         if (spread) {
             data.push(property$1(identifier('spread'), codeGen.bindExpression(spread.value)));
+            instrumentation === null || instrumentation === void 0 ? void 0 : instrumentation.incrementCounter(CompilerMetrics.LWCSpreadDirective);
         }
         // Key property on VNode
         if (forKey) {
@@ -5180,12 +5202,7 @@ function transform(codeGen) {
         }
         // Event handler
         if (listeners.length) {
-            const listenerObj = Object.fromEntries(listeners.map((listener) => [listener.name, listener]));
-            const listenerObjAST = objectToAST(listenerObj, (key) => {
-                const componentHandler = codeGen.bindExpression(listenerObj[key].handler);
-                const handler = codeGen.genBind(componentHandler);
-                return memorizeHandler(codeGen, componentHandler, handler);
-            });
+            const listenerObjAST = codeGen.genEventListeners(listeners);
             data.push(property$1(identifier('on'), listenerObjAST));
         }
         // SVG handling
@@ -5283,5 +5300,5 @@ function compile(source, config) {
 }
 
 export { ElementDirectiveName, LWCDirectiveDomMode, LWCDirectiveRenderMode, LwcTagName, RootDirectiveName, TemplateDirectiveName, compile, compile as default, parse };
-/** version: 2.45.4 */
+/** version: 2.46.0 */
 //# sourceMappingURL=index.js.map