@lwc/template-compiler 7.2.4 → 7.2.6

package/dist/index.js

@@ -12839,19 +12839,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) {
@@ -13511,7 +13498,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;
@@ -13645,23 +13632,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;
@@ -14615,9 +14638,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));
@@ -14694,5 +14717,5 @@ function compile(source, filename, config) {
 }
 
 export { ElementDirectiveName, LWCDirectiveDomMode, LWCDirectiveRenderMode, LwcTagName, RootDirectiveName, TemplateDirectiveName, compile, compile as default, kebabcaseToCamelcase, parse, toPropertyName };
-/** version: 7.2.4 */
+/** version: 7.2.6 */
 //# sourceMappingURL=index.js.map