@lwc/template-compiler 2.45.5 → 2.46.0

package/README.md

@@ -56,6 +56,7 @@ const { code, warnings } = compile(`<template><h1>Hello World!</h1></template>`,
 -   `enableStaticContentOptimization` (boolean, optional, `true` by default) - set to `false` to disable static content optimizations.
 -   `enableLwcSpread` (boolean, optional, `false` by default) - set to `true` to enable `lwc:spread` directive in the template.
 -   `customRendererConfig` (CustomRendererConfig, optional) - specifies a configuration to use to match elements. Matched elements will get a custom renderer hook in the generated template.
+-   `instrumentation` (InstrumentationObject, optional) - instrumentation object to gather metrics and non-error logs for internal use. See the `@lwc/errors` package for details on the interface.
 
     -   Example 1: Config to match `<use>` elements under the `svg` namespace and have `href` attribute set.
 

package/dist/codegen/codegen.d.ts

@@ -1,5 +1,5 @@
 import * as t from '../shared/estree';
-import { ChildNode, Element, Expression, ComplexExpression, Literal, LWCDirectiveRenderMode, Root } from '../shared/types';
+import { ChildNode, Element, Expression, ComplexExpression, Literal, LWCDirectiveRenderMode, Root, EventListener } from '../shared/types';
 import State from '../state';
 export default class CodeGen {
     /** The AST root. */
@@ -76,6 +76,7 @@ export default class CodeGen {
     genTabIndex(children: [t.Expression]): import("estree").CallExpression;
     getMemorizationId(): import("estree").Identifier;
     genBooleanAttributeExpr(bindExpr: t.Expression): import("estree").ConditionalExpression;
+    genEventListeners(listeners: EventListener[]): import("estree").ObjectExpression;
     /**
      * This routine generates an expression that avoids
      * computing the sanitized html of a raw html if it does not change

package/dist/config.d.ts

@@ -1,3 +1,4 @@
+import { InstrumentationObject } from '@lwc/errors';
 import { CustomRendererConfig } from './shared/renderer-hooks';
 export interface Config {
     /**
@@ -50,6 +51,10 @@ export interface Config {
      * When true, enables `lwc:spread` directive.
      */
     enableLwcSpread?: boolean;
+    /**
+     * Config to use to collect metrics and logs
+     */
+    instrumentation?: InstrumentationObject;
 }
-export type NormalizedConfig = Required<Omit<Config, 'customRendererConfig'>> & Partial<Pick<Config, 'customRendererConfig'>>;
+export type NormalizedConfig = Required<Omit<Config, 'customRendererConfig' | 'instrumentation'>> & Partial<Pick<Config, 'customRendererConfig' | 'instrumentation'>>;
 export declare function normalizeConfig(config: Config): NormalizedConfig;

package/dist/index.cjs.js

@@ -141,6 +141,7 @@ const AVAILABLE_OPTION_NAMES = new Set([
     'experimentalDynamicDirective',
     'enableDynamicComponents',
     'preserveHtmlComments',
+    'instrumentation',
 ]);
 function normalizeCustomRendererConfig(config) {
     const tagNames = [];
@@ -175,6 +176,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) && shared.hasOwnProperty.call(config, property)) {
             throw errors.generateCompilerError(errors.TemplateErrors.UNKNOWN_OPTION_PROPERTY, {
@@ -182,9 +184,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) {
@@ -1589,6 +1591,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);
@@ -3098,6 +3101,7 @@ function applyRootLwcDirectives(ctx, parsedAttr, root) {
     applyLwcPreserveCommentsDirective(ctx, parsedAttr, root);
 }
 function applyLwcRenderModeDirective(ctx, parsedAttr, root) {
+    var _a;
     const lwcRenderModeAttribute = parsedAttr.pick(exports.RootDirectiveName.RenderMode);
     if (!lwcRenderModeAttribute) {
         return;
@@ -3109,6 +3113,7 @@ function applyLwcRenderModeDirective(ctx, parsedAttr, root) {
         ctx.throwOnNode(errors.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(errors.CompilerMetrics.LWCRenderModeDirective);
 }
 function applyLwcPreserveCommentsDirective(ctx, parsedAttr, root) {
     const lwcPreserveCommentAttribute = parsedAttr.pick(exports.RootDirectiveName.PreserveComments);
@@ -3211,6 +3216,7 @@ function applyLwcExternalDirective(ctx, parsedAttr, element) {
     }
 }
 function applyLwcDynamicDirective(ctx, parsedAttr, element) {
+    var _a;
     const { name: tag } = element;
     const lwcDynamicAttribute = parsedAttr.pick(exports.ElementDirectiveName.Dynamic);
     if (!lwcDynamicAttribute) {
@@ -3230,6 +3236,7 @@ function applyLwcDynamicDirective(ctx, parsedAttr, element) {
     }
     // lwc:dynamic will be deprecated in 246, issue a warning when usage is detected.
     ctx.warnOnNode(errors.ParserDiagnostics.DEPRECATED_LWC_DYNAMIC_ATTRIBUTE, element);
+    (_a = ctx.instrumentation) === null || _a === void 0 ? void 0 : _a.incrementCounter(errors.CompilerMetrics.LWCDynamicDirective);
     element.directives.push(dynamicDirective(lwcDynamicAttr, location));
 }
 function applyLwcIsDirective(ctx, parsedAttr, element) {
@@ -3970,7 +3977,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 !== shared.HTML_NAMESPACE) {
         // TODO [#3313]: re-enable static optimization for SVGs once scope token is always lowercase
         return false;
@@ -3992,7 +3999,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) {
@@ -4008,7 +4014,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) {
@@ -4453,6 +4462,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
@@ -4577,10 +4594,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);
     }
 }
 
@@ -4767,6 +4786,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;
@@ -5179,8 +5199,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(errors.CompilerMetrics.LWCSpreadDirective);
         }
         // Key property on VNode
         if (forKey) {
@@ -5205,12 +5227,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
@@ -5310,5 +5327,5 @@ function compile(source, config) {
 exports.compile = compile;
 exports.default = compile;
 exports.parse = parse;
-/** version: 2.45.5 */
+/** version: 2.46.0 */
 //# sourceMappingURL=index.cjs.js.map