[DO NOT MERGE] Trigger CI for #4468: perf(template-compiler): static-optimize on event listener object

packages/@lwc/integration-karma/test/events/memoization/index.spec.js

@@ -1,6 +1,7 @@
 import { createElement } from 'lwc';
 import Deep from 'x/deep';
 import List from 'x/list';
+import Mixed from 'x/mixed';
 
 describe('deep listener', () => {
     beforeEach(() => {
@@ -46,4 +47,28 @@ describe('deep listener', () => {
         elm.shadowRoot.querySelector('button').click();
         expect(window.clickBuffer).toEqual([1, 2]);
     });
+
+    // In this case, the click listener is re-bound on every render, because the referenced
+    // listener is scoped inside a <template for:each>. However, `mainLogger.onChange` is
+    // never re-bound because the `mainLogger` is scoped to the component.
+    it('does redefine onClick for a list of deep click listeners but not the onChange for a single deep listener', async () => {
+        const elm = createElement('x-mixed', { is: Mixed });
+        document.body.appendChild(elm);
+
+        elm.loggers = [{ id: 1, onClick: () => window.clickBuffer.push(1) }];
+        elm.mainLogger = {
+            onChange: () => window.clickBuffer.push('foo'),
+        };
+        await Promise.resolve();
+        elm.shadowRoot.querySelector('input').click();
+        expect(window.clickBuffer).toEqual([1, 'foo']);
+
+        elm.loggers = [{ id: 2, onClick: () => window.clickBuffer.push(2) }];
+        elm.mainLogger = {
+            onChange: () => window.clickBuffer.push('bar'),
+        };
+        await Promise.resolve();
+        elm.shadowRoot.querySelector('input').click();
+        expect(window.clickBuffer).toEqual([1, 'foo', 2, 'foo']);
+    });
 });

packages/@lwc/integration-karma/test/events/memoization/x/mixed/mixed.html

@@ -0,0 +1,10 @@
+<template>
+    <template for:each={loggers} for:item="logger">
+        <input
+            key={logger.id}
+            type="checkbox"
+            onclick={logger.onClick}
+            onchange={mainLogger.onChange}
+        ></input>
+    </template>
+</template>

packages/@lwc/integration-karma/test/events/memoization/x/mixed/mixed.js

@@ -0,0 +1,7 @@
+import { LightningElement, api } from 'lwc';
+
+export default class extends LightningElement {
+    @api loggers = [];
+
+    @api mainLogger;
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/attributes/expected.js

@@ -12,9 +12,11 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       classMap: stc0,
       slotAssignment: "slotName",
       key: 0,
-      on: {
-        click: _m0 || ($ctx._m0 = api_bind($cmp.handleClick)),
-      },
+      on:
+        _m0 ||
+        ($ctx._m0 = {
+          click: api_bind($cmp.handleClick),
+        }),
     }),
   ];
   /*LWC compiler vX.X.X*/

packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/nested/expected.js

@@ -23,9 +23,11 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         classMap: stc0,
         props: stc1,
         key: 0,
-        on: {
-          click: _m0 || ($ctx._m0 = api_bind($cmp.handleOuterClick)),
-        },
+        on:
+          _m0 ||
+          ($ctx._m0 = {
+            click: api_bind($cmp.handleOuterClick),
+          }),
       },
       [
         api_static_fragment($fragment1, 2),
@@ -35,9 +37,11 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             classMap: stc0,
             props: stc1,
             key: 3,
-            on: {
-              click: _m1 || ($ctx._m1 = api_bind($cmp.handleOuterClick)),
-            },
+            on:
+              _m1 ||
+              ($ctx._m1 = {
+                click: api_bind($cmp.handleOuterClick),
+              }),
           },
           [api_static_fragment($fragment2, 5)]
         ),

packages/@lwc/template-compiler/src/__tests__/fixtures/events/component/expected.js

@@ -12,9 +12,11 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     api_element("section", stc0, [
       api_custom_element("ns-foo", _nsFoo, {
         key: 1,
-        on: {
-          foo: _m0 || ($ctx._m0 = api_bind($cmp.handleFoo)),
-        },
+        on:
+          _m0 ||
+          ($ctx._m0 = {
+            foo: api_bind($cmp.handleFoo),
+          }),
       }),
     ]),
   ];

packages/@lwc/template-compiler/src/__tests__/fixtures/events/multiple/non-static-optimized/actual.html

@@ -0,0 +1,3 @@
+<template>
+    <button onclick={onClick} ontouchstart={onTouchStart} ontouchend={onTouchEnd}></button>
+</template>

packages/@lwc/template-compiler/src/__tests__/fixtures/events/multiple/non-static-optimized/ast.json

@@ -0,0 +1,145 @@
+{
+    "root": {
+        "type": "Root",
+        "location": {
+            "startLine": 1,
+            "startColumn": 1,
+            "endLine": 3,
+            "endColumn": 12,
+            "start": 0,
+            "end": 114,
+            "startTag": {
+                "startLine": 1,
+                "startColumn": 1,
+                "endLine": 1,
+                "endColumn": 11,
+                "start": 0,
+                "end": 10
+            },
+            "endTag": {
+                "startLine": 3,
+                "startColumn": 1,
+                "endLine": 3,
+                "endColumn": 12,
+                "start": 103,
+                "end": 114
+            }
+        },
+        "directives": [],
+        "children": [
+            {
+                "type": "Element",
+                "name": "button",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "location": {
+                    "startLine": 2,
+                    "startColumn": 5,
+                    "endLine": 2,
+                    "endColumn": 92,
+                    "start": 15,
+                    "end": 102,
+                    "startTag": {
+                        "startLine": 2,
+                        "startColumn": 5,
+                        "endLine": 2,
+                        "endColumn": 83,
+                        "start": 15,
+                        "end": 93
+                    },
+                    "endTag": {
+                        "startLine": 2,
+                        "startColumn": 83,
+                        "endLine": 2,
+                        "endColumn": 92,
+                        "start": 93,
+                        "end": 102
+                    }
+                },
+                "attributes": [],
+                "properties": [],
+                "directives": [],
+                "listeners": [
+                    {
+                        "type": "EventListener",
+                        "name": "click",
+                        "handler": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 8,
+                            "name": "onClick",
+                            "location": {
+                                "startLine": 2,
+                                "startColumn": 13,
+                                "endLine": 2,
+                                "endColumn": 30,
+                                "start": 23,
+                                "end": 40
+                            }
+                        },
+                        "location": {
+                            "startLine": 2,
+                            "startColumn": 13,
+                            "endLine": 2,
+                            "endColumn": 30,
+                            "start": 23,
+                            "end": 40
+                        }
+                    },
+                    {
+                        "type": "EventListener",
+                        "name": "touchstart",
+                        "handler": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 13,
+                            "name": "onTouchStart",
+                            "location": {
+                                "startLine": 2,
+                                "startColumn": 31,
+                                "endLine": 2,
+                                "endColumn": 58,
+                                "start": 41,
+                                "end": 68
+                            }
+                        },
+                        "location": {
+                            "startLine": 2,
+                            "startColumn": 31,
+                            "endLine": 2,
+                            "endColumn": 58,
+                            "start": 41,
+                            "end": 68
+                        }
+                    },
+                    {
+                        "type": "EventListener",
+                        "name": "touchend",
+                        "handler": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 11,
+                            "name": "onTouchEnd",
+                            "location": {
+                                "startLine": 2,
+                                "startColumn": 59,
+                                "endLine": 2,
+                                "endColumn": 82,
+                                "start": 69,
+                                "end": 92
+                            }
+                        },
+                        "location": {
+                            "startLine": 2,
+                            "startColumn": 59,
+                            "endLine": 2,
+                            "endColumn": 82,
+                            "start": 69,
+                            "end": 92
+                        }
+                    }
+                ],
+                "children": []
+            }
+        ]
+    }
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/events/multiple/non-static-optimized/config.json

@@ -0,0 +1,3 @@
+{
+  "enableStaticContentOptimization": false
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/events/multiple/non-static-optimized/expected.js

@@ -0,0 +1,31 @@
+import _implicitStylesheets from "./non-static-optimized.css";
+import _implicitScopedStylesheets from "./non-static-optimized.scoped.css?scoped=true";
+import { freezeTemplate, registerTemplate } from "lwc";
+function tmpl($api, $cmp, $slotset, $ctx) {
+  const { b: api_bind, h: api_element } = $api;
+  const { _m0 } = $ctx;
+  return [
+    api_element("button", {
+      key: 0,
+      on:
+        _m0 ||
+        ($ctx._m0 = {
+          click: api_bind($cmp.onClick),
+          touchstart: api_bind($cmp.onTouchStart),
+          touchend: api_bind($cmp.onTouchEnd),
+        }),
+    }),
+  ];
+  /*LWC compiler vX.X.X*/
+}
+export default registerTemplate(tmpl);
+tmpl.stylesheets = [];
+tmpl.stylesheetToken = "lwc-d9girnpd2k";
+tmpl.legacyStylesheetToken = "x-non-static-optimized_non-static-optimized";
+if (_implicitStylesheets) {
+  tmpl.stylesheets.push.apply(tmpl.stylesheets, _implicitStylesheets);
+}
+if (_implicitScopedStylesheets) {
+  tmpl.stylesheets.push.apply(tmpl.stylesheets, _implicitScopedStylesheets);
+}
+freezeTemplate(tmpl);

packages/@lwc/template-compiler/src/__tests__/fixtures/events/multiple/non-static-optimized/metadata.json

@@ -0,0 +1,3 @@
+{
+    "warnings": []
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/events/multiple/static-optimized/actual.html

@@ -0,0 +1,3 @@
+<template>
+    <button onclick={onClick} ontouchstart={onTouchStart} ontouchend={onTouchEnd}></button>
+</template>