[IMP] compiler: add support for t-on- on t-slots and t-set-slots

tests/compiler/parser.test.ts

@@ -1378,6 +1378,25 @@ describe("qweb parser", () => {
     });
   });
 
+  test("a component with a named slot with t-on", async () => {
+    expect(
+      parse(`<MyComponent><t t-set-slot="name" t-on-click="doStuff">foo</t></MyComponent>`)
+    ).toEqual({
+      type: ASTType.TComponent,
+      name: "MyComponent",
+      isDynamic: false,
+      dynamicProps: null,
+      props: {},
+      on: null,
+      slots: {
+        name: {
+          content: { type: ASTType.Text, value: "foo" },
+          on: { click: "doStuff" },
+        },
+      },
+    });
+  });
+
   test("a component with a named slot with div tag", async () => {
     expect(() =>
       parse(`<MyComponent><div t-set-slot="name">foo</div></MyComponent>`)
@@ -1550,6 +1569,7 @@ describe("qweb parser", () => {
       type: ASTType.TSlot,
       name: "default",
       attrs: {},
+      on: null,
       defaultContent: null,
     });
   });
@@ -1559,10 +1579,21 @@ describe("qweb parser", () => {
       type: ASTType.TSlot,
       name: "header",
       attrs: {},
+      on: null,
       defaultContent: { type: ASTType.Text, value: "default content" },
     });
   });
 
+  test("t-slot with t-on-", async () => {
+    expect(parse(`<t t-slot="default" t-on-click.prevent="doSomething"/>`)).toEqual({
+      type: ASTType.TSlot,
+      name: "default",
+      attrs: {},
+      on: { "click.prevent": "doSomething" },
+      defaultContent: null,
+    });
+  });
+
   // ---------------------------------------------------------------------------
   // t-debug
   // ---------------------------------------------------------------------------

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

@@ -210,3 +210,79 @@ exports[`t-on t-on on destroyed components 2`] = `
   }
 }"
 `;
+
+exports[`t-on t-on on t-set-slots 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { capture, createCatcher, markRaw } = helpers;
+  const catcher1 = createCatcher({\\"click\\":0});
+  
+  let block6 = createBlock(\`<p>something</p>\`);
+  let block7 = createBlock(\`<p>paragraph</p>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    const b6 = block6();
+    const b7 = block7();
+    const hdlr1 = [()=>this.state.count++, ctx];
+    return catcher1(multi([b6, b7]), [hdlr1]);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\` [\`);
+    const b3 = text(ctx['state'].count);
+    const b4 = text(\`] \`);
+    const ctx1 = capture(ctx);
+    const b8 = component(\`Child\`, {slots: markRaw({'myslot': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, ctx);
+    return multi([b2, b3, b4, b8]);
+  }
+}"
+`;
+
+exports[`t-on t-on on t-set-slots 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return callSlot(ctx, node, key, 'myslot', false, {});
+  }
+}"
+`;
+
+exports[`t-on t-on on t-slots 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { markRaw } = helpers;
+  
+  let block1 = createBlock(\`<p>something</p>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return block1();
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`t-on t-on on t-slots 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot, createCatcher } = helpers;
+  const catcher1 = createCatcher({\\"click\\":0});
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\` [\`);
+    const b3 = text(ctx['state'].count);
+    const b4 = text(\`] \`);
+    const hdlr1 = [()=>this.state.count++, ctx];
+    const b5 = catcher1(callSlot(ctx, node, key, 'default', false, {}), [hdlr1]);
+    return multi([b2, b3, b4, b5]);
+  }
+}"
+`;

tests/components/t_on.test.ts

@@ -196,4 +196,53 @@ describe("t-on", () => {
     await nextTick();
     expect(fixture.innerHTML).toBe("<div><span></span><button>2</button><p></p></div>");
   });
+
+  test("t-on on t-slots", async () => {
+    class Child extends Component {
+      static template = xml`
+        [<t t-esc="state.count"/>]
+        <t t-slot="default" t-on-click="() => this.state.count++"/>`;
+
+      state = useState({ count: 0 });
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <Child>
+          <p>something</p>
+        </Child>`;
+      static components = { Child };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(" [0] <p>something</p>");
+    fixture.querySelector("p")!.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe(" [1] <p>something</p>");
+  });
+
+  test("t-on on t-set-slots", async () => {
+    class Child extends Component {
+      static template = xml`<t t-slot="myslot"/>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        [<t t-esc="state.count"/>]
+        <Child>
+          <t t-set-slot="myslot" t-on-click="() => this.state.count++">
+            <p>something</p>
+            <p>paragraph</p>
+          </t>
+        </Child>`;
+      static components = { Child };
+      state = useState({ count: 0 });
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(" [0] <p>something</p><p>paragraph</p>");
+    fixture.querySelector("p")!.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe(" [1] <p>something</p><p>paragraph</p>");
+  });
 });