[IMP] component: add support for t-on on compnents

tests/blockdom/event_catcher.test.ts

@@ -0,0 +1,54 @@
+import { config, createBlock, createCatcher, mount } from "../../src/blockdom";
+import { makeTestFixture } from "./helpers";
+import { mainEventHandler } from "../../src/component/handler";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+let fixture: HTMLElement;
+config.mainEventHandler = mainEventHandler;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+test("simple event catcher", async () => {
+  const catcher = createCatcher({ click: 0 });
+  const block = createBlock("<div></div>");
+  let n = 0;
+  let ctx = {};
+  let handler = [() => n++, ctx];
+  const tree = catcher(block(), [handler]);
+
+  mount(tree, fixture);
+  expect(fixture.innerHTML).toBe("<div></div>");
+
+  expect(fixture.firstChild).toBeInstanceOf(HTMLDivElement);
+  expect(n).toBe(0);
+  (fixture.firstChild as HTMLDivElement).click();
+  expect(n).toBe(1);
+});
+
+test("do not catch events outside of itself", async () => {
+  const catcher = createCatcher({ click: 0 });
+  const childBlock = createBlock("<div></div>");
+  const parentBlock = createBlock("<button><block-child-0/></button>");
+  let n = 0;
+  let ctx = {};
+  let handler = [() => n++, ctx];
+  const tree = parentBlock([], [catcher(childBlock(), [handler])]);
+
+  mount(tree, fixture);
+  expect(fixture.innerHTML).toBe("<button><div></div></button>");
+
+  expect(n).toBe(0);
+  fixture.querySelector("div")!.click();
+  expect(n).toBe(1);
+  fixture.querySelector("button")!.click();
+  expect(n).toBe(1);
+});

tests/compiler/parser.test.ts

@@ -1011,6 +1011,7 @@ describe("qweb parser", () => {
         dynamicProps: null,
         props: {},
         slots: {},
+        on: null,
       },
       memo: "",
       hasNoFirst: true,
@@ -1217,6 +1218,7 @@ describe("qweb parser", () => {
       name: "MyComponent",
       dynamicProps: null,
       props: {},
+      on: null,
       slots: {},
       isDynamic: false,
     });
@@ -1229,6 +1231,7 @@ describe("qweb parser", () => {
       dynamicProps: null,
       props: { a: "1", b: "'b'" },
       isDynamic: false,
+      on: null,
       slots: {},
     });
   });
@@ -1240,14 +1243,21 @@ describe("qweb parser", () => {
       dynamicProps: "state",
       props: { a: "1" },
       isDynamic: false,
+      on: null,
       slots: {},
     });
   });
 
   test("component with event handler", async () => {
-    expect(() => parse(`<MyComponent t-on-click="someMethod"/>`)).toThrow(
-      "t-on is no longer supported on components. Consider passing a callback in props."
-    );
+    expect(parse(`<MyComponent t-on-click="someMethod"/>`)).toEqual({
+      type: ASTType.TComponent,
+      name: "MyComponent",
+      dynamicProps: null,
+      props: {},
+      isDynamic: false,
+      on: { click: "someMethod" },
+      slots: {},
+    });
   });
 
   test("component with t-ref", async () => {
@@ -1281,6 +1291,7 @@ describe("qweb parser", () => {
       dynamicProps: null,
       props: {},
       isDynamic: false,
+      on: null,
       slots: { default: { content: { type: ASTType.Text, value: "foo" } } },
     });
   });
@@ -1294,6 +1305,7 @@ describe("qweb parser", () => {
       dynamicProps: null,
       props: {},
       isDynamic: false,
+      on: null,
       slots: {
         default: { content: { type: ASTType.Text, value: "foo" }, attrs: { param: "param" } },
       },
@@ -1307,6 +1319,7 @@ describe("qweb parser", () => {
       isDynamic: false,
       dynamicProps: null,
       props: {},
+      on: null,
       slots: {
         default: {
           content: {
@@ -1348,6 +1361,7 @@ describe("qweb parser", () => {
       isDynamic: false,
       dynamicProps: null,
       props: {},
+      on: null,
       slots: { name: { content: { type: ASTType.Text, value: "foo" } } },
     });
   });
@@ -1359,6 +1373,7 @@ describe("qweb parser", () => {
       isDynamic: false,
       dynamicProps: null,
       props: {},
+      on: null,
       slots: { name: { content: { type: ASTType.Text, value: "foo" }, attrs: { param: "param" } } },
     });
   });
@@ -1376,6 +1391,7 @@ describe("qweb parser", () => {
       dynamicProps: null,
       props: {},
       isDynamic: false,
+      on: null,
       slots: {
         default: { content: { type: ASTType.Text, value: " " } },
         name: { content: { type: ASTType.Text, value: "foo" } },
@@ -1395,6 +1411,7 @@ describe("qweb parser", () => {
       dynamicProps: null,
       props: {},
       isDynamic: false,
+      on: null,
       slots: {
         a: { content: { type: ASTType.Text, value: "foo" } },
         b: { content: { type: ASTType.Text, value: "bar" } },
@@ -1409,6 +1426,7 @@ describe("qweb parser", () => {
       dynamicProps: null,
       props: {},
       isDynamic: true,
+      on: null,
       slots: {},
     });
   });
@@ -1420,6 +1438,7 @@ describe("qweb parser", () => {
       dynamicProps: null,
       props: { a: "1", b: "'b'" },
       isDynamic: true,
+      on: null,
       slots: {},
     });
   });
@@ -1431,6 +1450,7 @@ describe("qweb parser", () => {
       dynamicProps: "state",
       props: { a: "1" },
       isDynamic: true,
+      on: null,
       slots: {},
     });
   });
@@ -1454,6 +1474,7 @@ describe("qweb parser", () => {
       dynamicProps: null,
       props: {},
       isDynamic: false,
+      on: null,
       slots: { default: { content: { body: null, name: "subTemplate", type: ASTType.TCall } } },
     });
   });
@@ -1472,6 +1493,7 @@ describe("qweb parser", () => {
       dynamicProps: null,
       props: {},
       isDynamic: false,
+      on: null,
       slots: {
         default: {
           content: {
@@ -1480,6 +1502,7 @@ describe("qweb parser", () => {
             name: "Child",
             dynamicProps: null,
             props: {},
+            on: null,
             slots: { brol: { content: { type: ASTType.Text, value: "coucou" } } },
           },
         },
@@ -1501,6 +1524,7 @@ describe("qweb parser", () => {
       dynamicProps: null,
       props: {},
       isDynamic: false,
+      on: null,
       slots: {
         default: {
           content: {
@@ -1509,6 +1533,7 @@ describe("qweb parser", () => {
             name: "Child",
             dynamicProps: null,
             props: {},
+            on: null,
             slots: { brol: { content: { type: ASTType.Text, value: "coucou" } } },
           },
         },

tests/components/__snapshots__/t_on.test.ts.snap

@@ -121,6 +121,65 @@ exports[`t-on t-on method call in t-foreach 1`] = `
 }"
 `;
 
+exports[`t-on t-on on components 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { createCatcher } = helpers;
+  const catcher1 = createCatcher({\\"click\\":0});
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['increment'], ctx];
+    return catcher1(component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx), [hdlr1]);
+  }
+}"
+`;
+
+exports[`t-on t-on on components 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button><block-text-0/></button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['props'].value;
+    return block1([txt1]);
+  }
+}"
+`;
+
+exports[`t-on t-on on components, variation 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { createCatcher } = helpers;
+  const catcher1 = createCatcher({\\"click\\":0});
+  
+  let block1 = createBlock(\`<div><span/><block-child-0/><p/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['increment'], ctx];
+    let b2 = catcher1(component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx), [hdlr1]);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-on t-on on components, variation 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button><block-text-0/></button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['props'].value;
+    return block1([txt1]);
+  }
+}"
+`;
+
 exports[`t-on t-on on destroyed components 1`] = `
 "function anonymous(bdom, helpers
 ) {

tests/components/t_on.test.ts

@@ -142,4 +142,58 @@ describe("t-on", () => {
     buttons[1].click();
     expect(comp.otherState.vals).toStrictEqual(["0_0", "1_1"]);
   });
+
+  test("t-on on components", async () => {
+    class Child extends Component {
+      static template = xml`<button t-esc="props.value"/>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child t-on-click="increment" value="state.value"/>`;
+      static components = { Child };
+      state = useState({ value: 1 });
+      increment() {
+        this.state.value++;
+      }
+    }
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<button>1</button>");
+    fixture.querySelector("button")!.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<button>2</button>");
+  });
+
+  test("t-on on components, variation", async () => {
+    class Child extends Component {
+      static template = xml`<button t-esc="props.value"/>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <div>
+          <span/>
+          <Child t-on-click="increment" value="state.value"/>
+          <p/>
+        </div>`;
+      static components = { Child };
+      state = useState({ value: 1 });
+      increment() {
+        this.state.value++;
+      }
+    }
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div><span></span><button>1</button><p></p></div>");
+
+    fixture.querySelector("span")!.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span></span><button>1</button><p></p></div>");
+
+    fixture.querySelector("button")!.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span></span><button>2</button><p></p></div>");
+
+    fixture.querySelector("p")!.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span></span><button>2</button><p></p></div>");
+  });
 });