@lwc/template-compiler 7.2.4 → 7.2.6

package/dist/codegen/codegen.d.ts

@@ -49,7 +49,7 @@ export default class CodeGen {
     };
     usedLwcApis: Set<string>;
     slotNames: Set<string>;
-    memorizedIds: t.Identifier[];
+    memoizedIds: t.Identifier[];
     referencedComponents: Set<string>;
     apiVersion: APIVersion;
     staticExpressionMap: WeakMap<Attribute | Text, string>;
@@ -89,7 +89,7 @@ export default class CodeGen {
      */
     getScopedSlotFactory(callback: t.FunctionExpression, slotName: t.Expression | t.SimpleLiteral): import("estree").CallExpression;
     genTabIndex(children: [t.Expression]): import("estree").CallExpression;
-    getMemorizationId(): import("estree").Identifier;
+    getMemoizationId(): import("estree").Identifier;
     genBooleanAttributeExpr(bindExpr: t.Expression): import("estree").ConditionalExpression;
     genEventListeners(listeners: EventListener[]): import("estree").Property;
     genRef(ref: RefDirective): import("estree").Property;

package/dist/codegen/helpers.d.ts

@@ -18,7 +18,6 @@ export declare function shouldFlatten(codeGen: CodeGen, children: ChildNode[]):
  * @param node
  */
 export declare function hasIdAttribute(node: Node): boolean;
-export declare function memorizeHandler(codeGen: CodeGen, componentHandler: t.Expression, handler: t.Expression): t.Expression;
 export declare function generateTemplateMetadata(codeGen: CodeGen): t.Statement[];
 export declare function parseStyleText(cssText: string): {
     [name: string]: string;

package/dist/index.cjs.js

@@ -12863,19 +12863,6 @@ function hasIdAttribute(node) {
     }
     return false;
 }
-function memorizeHandler(codeGen, componentHandler, handler) {
-    // #439 - The handler can only be memorized if it is bound to component instance
-    const id = getMemberExpressionRoot(componentHandler);
-    const shouldMemorizeHandler = !codeGen.isLocalIdentifier(id);
-    // Apply memorization if the handler is memorizable.
-    //   $cmp.handlePress -> _m1 || ($ctx._m1 = b($cmp.handlePress))
-    if (shouldMemorizeHandler) {
-        const memorizedId = codeGen.getMemorizationId();
-        const memorization = assignmentExpression('=', memberExpression(identifier(TEMPLATE_PARAMS.CONTEXT), memorizedId), handler);
-        handler = logicalExpression('||', memorizedId, memorization);
-    }
-    return handler;
-}
 function generateTemplateMetadata(codeGen) {
     const metadataExpressions = [];
     if (codeGen.slotNames.size) {
@@ -13535,7 +13522,7 @@ class CodeGen {
         this.usedApis = {};
         this.usedLwcApis = new Set();
         this.slotNames = new Set();
-        this.memorizedIds = [];
+        this.memoizedIds = [];
         this.referencedComponents = new Set();
         this.staticExpressionMap = new WeakMap();
         this.root = root;
@@ -13669,23 +13656,59 @@ class CodeGen {
     genTabIndex(children) {
         return this._renderApiCall(RENDER_APIS.tabindex, children);
     }
-    getMemorizationId() {
+    getMemoizationId() {
         const currentId = this.currentId++;
-        const memorizationId = identifier(`_m${currentId}`);
-        this.memorizedIds.push(memorizationId);
-        return memorizationId;
+        const memoizationId = identifier(`_m${currentId}`);
+        this.memoizedIds.push(memoizationId);
+        return memoizationId;
     }
     genBooleanAttributeExpr(bindExpr) {
         return conditionalExpression(bindExpr, literal$1(''), literal$1(null));
     }
     genEventListeners(listeners) {
-        const listenerObj = Object.fromEntries(listeners.map((listener) => [listener.name, listener]));
-        const listenerObjectAST = objectToAST(listenerObj, (key) => {
-            const componentHandler = this.bindExpression(listenerObj[key].handler);
-            const handler = this.genBind(componentHandler);
-            return memorizeHandler(this, componentHandler, handler);
-        });
-        return property$1(identifier('on'), listenerObjectAST);
+        let hasLocalListeners = false;
+        const listenerObj = {};
+        for (const { name, handler } of listeners) {
+            const componentHandler = this.bindExpression(handler);
+            const id = getMemberExpressionRoot(componentHandler);
+            const isLocal = this.isLocalIdentifier(id);
+            if (isLocal) {
+                hasLocalListeners = true;
+            }
+            listenerObj[name] = { handler: this.genBind(componentHandler), isLocal };
+        }
+        // Individually memoize a non-local event handler
+        // Example input: <template for:each={list} for:item="task">
+        //                  <button [...] ontouchstart={foo}>[X]</button>
+        //                </template>
+        // Output: [...] touchstart: _m2 || ($ctx._m2 = api_bind($cmp.foo))
+        const memoize = (expr) => {
+            const memoizedId = this.getMemoizationId();
+            return logicalExpression('||', memoizedId, assignmentExpression('=', memberExpression(identifier(TEMPLATE_PARAMS.CONTEXT), memoizedId), expr));
+        };
+        if (hasLocalListeners) {
+            // If there are local listeners, we need to memoize individual handlers
+            // Input: <template for:each={list} for:item="task">
+            //          <button onclick={task.delete} ontouchstart={foo}>[X]</button>
+            //        </template>
+            // Output:
+            //   on: {
+            //     click: api_bind(task.delete),
+            //     touchstart: _m2 || ($ctx._m2 = api_bind($cmp.foo))
+            //   }
+            return property$1(identifier('on'), objectToAST(listenerObj, (k) => {
+                const { isLocal, handler } = listenerObj[k];
+                return isLocal ? handler : memoize(handler);
+            }));
+        }
+        else {
+            // If there are no local listeners, we can memoize the entire `on` object
+            // Input: <template>
+            //          <button onclick={create}>New</button>
+            //        </template>
+            // Output: on: _m1 || ($ctx._m1 = { click: api_bind($cmp.create) })
+            return property$1(identifier('on'), memoize(objectToAST(listenerObj, (k) => listenerObj[k].handler)));
+        }
     }
     genRef(ref) {
         this.hasRefs = true;
@@ -14639,9 +14662,9 @@ function generateTemplateFunction(codeGen) {
                 variableDeclarator(objectPattern(usedApis.map((name) => assignmentProperty(identifier(name), codeGen.usedApis[name]))), identifier(TEMPLATE_PARAMS.API)),
             ]),
         ];
-    if (codeGen.memorizedIds.length) {
+    if (codeGen.memoizedIds.length) {
         body.push(variableDeclaration('const', [
-            variableDeclarator(objectPattern(codeGen.memorizedIds.map((id) => assignmentProperty(id, id, { shorthand: true }))), identifier(TEMPLATE_PARAMS.CONTEXT)),
+            variableDeclarator(objectPattern(codeGen.memoizedIds.map((id) => assignmentProperty(id, id, { shorthand: true }))), identifier(TEMPLATE_PARAMS.CONTEXT)),
         ]));
     }
     body.push(returnStatement(returnedValue));
@@ -14722,5 +14745,5 @@ exports.default = compile;
 exports.kebabcaseToCamelcase = kebabcaseToCamelcase;
 exports.parse = parse;
 exports.toPropertyName = toPropertyName;
-/** version: 7.2.4 */
+/** version: 7.2.6 */
 //# sourceMappingURL=index.cjs.js.map