chore(template-compiler): clean up genEventListeners

salesforce · Aug 24, 2024 · 074abba · 074abba
1 parent 3e470dc
commit 074abba
Showing 1 changed file with 33 additions and 47 deletions.
diff --git a/packages/@lwc/template-compiler/src/codegen/codegen.ts b/packages/@lwc/template-compiler/src/codegen/codegen.ts
@@ -392,62 +392,48 @@ export default class CodeGen {
     }
 
     genEventListeners(listeners: EventListener[]) {
-        const entries = listeners.map(({ name, handler }) => {
-            const componentHandler = this.bindExpression(handler);
-            const id = getMemberExpressionRoot(componentHandler as t.MemberExpression);
-            const shouldMemoizeHandler = !this.isLocalIdentifier(id);
-            return { name, componentHandler, shouldMemoizeHandler };
-        });
+        let memoize = true;
 
-        const memoizeWholeObject = !entries.some(
-            ({ shouldMemoizeHandler }) => !shouldMemoizeHandler
-        );
+        const listenerObj: Record<string, { handler: t.Expression; isLocal: boolean }> = {};
 
-        const listenerObj = Object.fromEntries(
-            entries.map(({ name, componentHandler, shouldMemoizeHandler }) => [
-                name,
-                { componentHandler, shouldMemoizeHandler },
-            ])
-        );
+        for (const { name, handler } of listeners) {
+            const componentHandler = this.bindExpression(handler) as t.MemberExpression;
+            const id = getMemberExpressionRoot(componentHandler);
+            const isLocal = this.isLocalIdentifier(id);
 
-        if (!memoizeWholeObject) {
-            const listenerObjectAST = objectToAST(listenerObj, (key) => {
-                const { shouldMemoizeHandler, componentHandler } = listenerObj[key];
-                const handler = this.genBind(componentHandler);
-                if (shouldMemoizeHandler) {
-                    const memorizedId = this.getMemorizationId();
-                    const memorization = t.assignmentExpression(
-                        '=',
-                        t.memberExpression(t.identifier(TEMPLATE_PARAMS.CONTEXT), memorizedId),
-                        handler
-                    );
-                    return t.logicalExpression('||', memorizedId, memorization);
-                } else {
-                    return handler;
-                }
-            });
+            if (isLocal) {
+                memoize = false;
+            }
 
-            return t.property(t.identifier('on'), listenerObjectAST);
+            listenerObj[name] = { handler: this.genBind(componentHandler), isLocal };
         }
 
-        const listenerObjectAST = objectToAST(listenerObj, (key) => {
-            return this.genBind(listenerObj[key].componentHandler);
-        });
-
-        // Generate a unique identifier for the `on` object
-        const onObjectId = this.getMemorizationId();
+        const listenerObjAST = objectToAST(
+            listenerObj,
+            memoize
+                ? (k) => listenerObj[k].handler
+                : (k) => {
+                      const { isLocal, handler } = listenerObj[k];
+                      return isLocal ? handler : this.memoize(handler);
+                  }
+        );
 
-        // Cache the `on` object on the `$ctx` object
         return t.property(
             t.identifier('on'),
-            t.logicalExpression(
-                '||',
-                onObjectId,
-                t.assignmentExpression(
-                    '=',
-                    t.memberExpression(t.identifier(TEMPLATE_PARAMS.CONTEXT), onObjectId),
-                    listenerObjectAST
-                )
+            memoize ? this.memoize(listenerObjAST) : listenerObjAST
+        );
+    }
+
+    private memoize(handler: t.Expression) {
+        const memorizedId = this.getMemorizationId();
+
+        return t.logicalExpression(
+            '||',
+            memorizedId,
+            t.assignmentExpression(
+                '=',
+                t.memberExpression(t.identifier(TEMPLATE_PARAMS.CONTEXT), memorizedId),
+                handler
             )
         );
     }