[IMP] blockdom: t-on supports synthetic and native event handler

Synthetic handler is a sort of event delegation that allows placing
only one listener on the document to improve performance. It is an opt-in option.

Native listener places the listener on the node itself.

tests/blockdom/block_event_handling.test.ts

@@ -106,3 +106,92 @@ test("two same block nodes with different handlers", async () => {
   (fixture.firstChild!.nextSibling as HTMLDivElement).click();
   expect(steps).toEqual(["1", "2"]);
 });
+
+test("two same block nodes with different handlers (synthetic)", async () => {
+  const block = createBlock('<div block-handler-0="click.synthetic"></div>');
+  let steps: string[] = [];
+  let handler1 = () => steps.push("1");
+  let handler2 = () => steps.push("2");
+  const tree = multi([block([handler1]), block([handler2])]);
+
+  mount(tree, fixture);
+  expect(fixture.innerHTML).toBe("<div></div><div></div>");
+
+  (fixture.firstChild as HTMLDivElement).click();
+  (fixture.firstChild!.nextSibling as HTMLDivElement).click();
+  expect(steps).toEqual(["1", "2"]);
+});
+
+test("synthetic and native handlers can cohabitate", async () => {
+  const block = createBlock('<div block-handler-0="click.synthetic"><div block-handler-1="click"/></div>');
+  let steps: string[] = [];
+  let handler1 = () => steps.push("1");;
+  let handler2 = () => steps.push("2");
+  const tree = block([handler1, handler2]);
+
+  mount(tree, fixture);
+  expect(fixture.innerHTML).toBe("<div><div></div></div>");
+
+  (fixture.firstChild!.firstChild as HTMLDivElement).click();
+  expect(steps).toEqual(["2", "1"]);
+  (fixture.firstChild as HTMLDivElement).click();
+  expect(steps).toEqual(["2", "1", "1"]);
+});
+
+test("synthetic and native handlers can cohabitate (2)", async () => {
+  const block = createBlock('<div block-handler-0="click"><div block-handler-1="click.synthetic"/></div>');
+  let steps: string[] = [];
+  let handler1 = () => steps.push("1");;
+  let handler2 = () => steps.push("2");
+  const tree = block([handler1, handler2]);
+
+  mount(tree, fixture);
+  expect(fixture.innerHTML).toBe("<div><div></div></div>");
+
+  (fixture.firstChild!.firstChild as HTMLDivElement).click();
+  expect(steps).toEqual(["1", "2"]);
+  (fixture.firstChild as HTMLDivElement).click();
+  expect(steps).toEqual(["1", "2", "1"]);
+});
+
+test("synthetic and native handlers can cohabitate (3)", async () => {
+  const parent = createBlock(`<div block-handler-0="click"><block-child-0/><block-child-1/></div>`)
+  const block = createBlock('<div block-handler-0="click"/>');
+  const blockSynth = createBlock('<div block-handler-0="click.synthetic"/>');
+  let steps: string[] = [];
+  const handler0 = () => steps.push("0");;
+  let handler1 = () => steps.push("1");;
+  let handler2 = () => steps.push("2");
+  const tree = parent([handler0], [block([handler1]), blockSynth([handler2])]);
+
+  mount(tree, fixture);
+  expect(fixture.innerHTML).toBe("<div><div></div><div></div></div>");
+
+  const children = fixture.children[0].children;
+
+  (children[0] as HTMLElement).click();
+  expect(steps).toEqual(["1", "0"]);
+  (children[1] as HTMLElement).click();
+  expect(steps).toEqual(["1", "0", "0", "2"]);
+});
+
+test("synthetic and native handlers can cohabitate (5)", async () => {
+  const parent = createBlock(`<div block-handler-0="click"><block-child-0/><block-child-1/></div>`)
+  const block = createBlock('<div block-handler-0="click"/>');
+  const blockSynth = createBlock('<div block-handler-0="click.synthetic"/>');
+  let steps: string[] = [];
+  const handler0 = (ev: Event) => { steps.push("0"); ev.stopPropagation();};
+  let handler1 = () => steps.push("1");;
+  let handler2 = () => steps.push("2");
+  const tree = parent([handler0], [block([handler1]), blockSynth([handler2])]);
+
+  mount(tree, fixture);
+  expect(fixture.innerHTML).toBe("<div><div></div><div></div></div>");
+
+  const children = fixture.children[0].children;
+
+  (children[0] as HTMLElement).click();
+  expect(steps).toEqual(["1", "0"]);
+  (children[1] as HTMLElement).click();
+  expect(steps).toEqual(["1", "0", "0"]);
+});

tests/components/event_handling.test.ts

@@ -33,7 +33,7 @@ describe("event handling", () => {
     expect(fixture.innerHTML).toBe("<span><div>simple vnode</div>2</span>");
   });
 
-  test.skip("support for callable expression in event handler", async () => {
+  test("support for callable expression in event handler", async () => {
     class Counter extends Component {
       static template = xml`
       <div><t t-esc="state.value"/><input type="text" t-on-input="obj.onInput"/></div>`;

tests/misc/portal.test.ts

@@ -432,7 +432,7 @@ describe("Portal", () => {
     expect(parent.env).toStrictEqual({});
   });
 
-  test.skip("Portal composed with t-slot", async () => {
+  test("Portal composed with t-slot", async () => {
     const steps: Array<string> = [];
     let childInst: Component | null = null;
     class Child2 extends Component {

tests/qweb/__snapshots__/event_handling.test.ts.snap

@@ -240,6 +240,38 @@ exports[`t-on receive event in first argument 1`] = `
 }"
 `;
 
+exports[`t-on t-on modifiers (native listener) basic support for native listener 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue } = helpers;
+  
+  let block1 = createBlock(\`<div class=\\"myClass\\" block-handler-0=\\"click\\"><button block-handler-1=\\"click\\">Button</button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [ctx, 'divClicked'];
+    let d2 = [ctx, 'btnClicked'];
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (synthetic listener) basic support for synthetic 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue } = helpers;
+  
+  let block1 = createBlock(\`<div block-handler-0=\\"click.synthetic\\"><button block-handler-1=\\"click.synthetic\\">Button</button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [ctx, 'divClicked'];
+    let d2 = [ctx, 'btnClicked'];
+    return block1([d1, d2]);
+  }
+}"
+`;
+
 exports[`t-on t-on with inline statement (function call) 1`] = `
 "function anonymous(bdom, helpers
 ) {

tests/qweb/event_handling.test.ts

@@ -301,4 +301,55 @@ describe("t-on", () => {
       "Missing event name with t-on directive"
     );
   });
+
+  describe("t-on modifiers (native listener)", () => {
+    test("basic support for native listener", () => {
+      const template = `<div class="myClass" t-on-click="divClicked">
+        <button t-on-click="btnClicked">Button</button>
+      </div>`;
+
+      const steps: string[] = [];
+
+      const owner = {
+        divClicked(ev: Event) {
+          expect(ev.currentTarget).toBe(div);
+          steps.push("divClicked");
+        },
+        btnClicked(ev: Event) {
+          expect(ev.currentTarget).toBe(button);
+          steps.push("btnClicked");
+        },
+      };
+      const node = mountToFixture(template, owner);
+      const div = node.querySelector(".myClass");
+      const button = (<HTMLElement>node).getElementsByTagName("button")[0];
+      button.click();
+      expect(steps).toEqual(["btnClicked", "divClicked"]);
+    });
+  });
+
+  describe("t-on modifiers (synthetic listener)", () => {
+    test("basic support for synthetic", () => {
+      const template = `<div t-on-click.synthetic="divClicked">
+        <button t-on-click.synthetic="btnClicked">Button</button>
+      </div>`;
+
+      const steps: string[] = [];
+
+      const owner = {
+        divClicked(ev: Event) {
+          expect(ev.currentTarget).toBe(document);
+          steps.push("divClicked");
+        },
+        btnClicked(ev: Event) {
+          expect(ev.currentTarget).toBe(document);
+          steps.push("btnClicked");
+        },
+      };
+      const node = mountToFixture(template, owner);
+      const button = (<HTMLElement>node).getElementsByTagName("button")[0];
+      button.click();
+      expect(steps).toEqual(["btnClicked", "divClicked"]);
+    });
+  });
 });