[FIX] compiler: call dynamic templates with correct this

src/app/template_set.ts

@@ -46,9 +46,9 @@ export class TemplateSet {
   dev?: boolean;
 
   constructor() {
-    const call = (subTemplate: string, ctx: any, parent: any) => {
+    const call = (owner: any, subTemplate: string, ctx: any, parent: any) => {
       const template = this.getTemplate(subTemplate);
-      return toggler(subTemplate, template(ctx, parent));
+      return toggler(subTemplate, template.call(owner, ctx, parent));
     };
 
     const getTemplate = (name: string) => this.getTemplate(name);

src/compiler/code_generator.ts

@@ -898,7 +898,7 @@ export class CodeGenerator {
       const templateVar = this.generateId("template");
       this.addLine(`const ${templateVar} = ${subTemplate};`);
       block = this.createBlock(block, "multi", ctx);
-      this.insertBlock(`call(${templateVar}, ctx, node, ${key})`, block!, {
+      this.insertBlock(`call(this, ${templateVar}, ctx, node, ${key})`, block!, {
         ...ctx,
         forceNewBlock: !block,
       });

tests/compiler/__snapshots__/t_call.test.ts.snap

@@ -304,7 +304,7 @@ exports[`t-call (template calling) dynamic t-call 3`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const template2 = (ctx['template']);
-    let b2 = call(template2, ctx, node, key + \`__1\`);
+    let b2 = call(this, template2, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"

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

@@ -2388,7 +2388,7 @@ exports[`slots t-slot within dynamic t-call 4`] = `
   
   function slot2(ctx, node, key) {
     const template4 = (ctx['tcallTemplate']);
-    return call(template4, ctx, node, key + \`__3\`);
+    return call(this, template4, ctx, node, key + \`__3\`);
   }
   
   return function template(ctx, node, key = \\"\\") {

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

@@ -12,7 +12,7 @@ exports[`t-call dynamic t-call 1`] = `
     let b1 = text(\` owl \`);
     ctx[zero] = b1;
     const template2 = (ctx['current'].template);
-    return call(template2, ctx, node, key + \`__1\`);
+    return call(this, template2, ctx, node, key + \`__1\`);
   }
 }"
 `;
@@ -43,6 +43,38 @@ exports[`t-call dynamic t-call 3`] = `
 }"
 `;
 
+exports[`t-call handlers are properly bound through a dynamic t-call 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, toNumber, safeOutput } = helpers;
+  
+  let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [()=>this.update(), ctx];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-call handlers are properly bound through a dynamic t-call 2`] = `
+"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, toNumber, safeOutput } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const template2 = ('__template__9');
+    let b2 = call(this, template2, ctx, node, key + \`__1\`);
+    let d1 = ctx['counter'];
+    return block1([d1], [b2]);
+  }
+}"
+`;
+
 exports[`t-call handlers are properly bound through a t-call 1`] = `
 "function anonymous(bdom, helpers
 ) {

tests/components/t_call.test.ts

@@ -82,6 +82,29 @@ describe("t-call", () => {
     expect(fixture.innerHTML).toBe("<div><p>lucas</p>1</div>");
   });
 
+  test("handlers are properly bound through a dynamic t-call", async () => {
+    let parent: any;
+
+    const subTemplate = xml`<p t-on-click="() => this.update()">lucas</p>`;
+    class Parent extends Component {
+      static template = xml`
+        <div><t t-call="{{'${subTemplate}'}}"/><t t-esc="counter"/></div>`;
+      counter = 0;
+
+      update() {
+        expect(this).toBe(parent);
+        this.counter++;
+        this.render();
+      }
+    }
+    parent = await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("<div><p>lucas</p>0</div>");
+    fixture.querySelector("p")!.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><p>lucas</p>1</div>");
+  });
+
   test("parent is set within t-call", async () => {
     const sub = xml`<Child/>`;
     let child: any = null;