[TEST] component: snapshots slot functions

src/component/directive.ts

@@ -422,7 +422,7 @@ QWeb.addDirective({
           const key = slotNode.getAttribute("t-set")!;
           slotNode.removeAttribute("t-set");
           const slotFn = qweb._compile(`slot_${key}_template`, slotNode, ctx);
-          qweb.slots[`${slotId}_${key}`] = slotFn.bind(qweb);
+          qweb.slots[`${slotId}_${key}`] = slotFn;
         }
       }
       if (clone.childNodes.length) {
@@ -431,7 +431,7 @@ QWeb.addDirective({
           t.appendChild(child);
         }
         const slotFn = qweb._compile(`slot_default_template`, t, ctx);
-        qweb.slots[`${slotId}_default`] = slotFn.bind(qweb);
+        qweb.slots[`${slotId}_default`] = slotFn;
       }
     }
 

src/qweb/extensions.ts

@@ -230,7 +230,7 @@ QWeb.addDirective({
     ctx.addLine(`const slot${slotKey} = this.slots[context.__owl__.slotId + '_' + '${value}'];`);
     ctx.addIf(`slot${slotKey}`);
     ctx.addLine(
-      `slot${slotKey}(context.__owl__.parent, Object.assign({}, extra, {parentNode: c${ctx.parentNode}, vars: extra.vars, parent: owner}));`
+      `slot${slotKey}.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: c${ctx.parentNode}, vars: extra.vars, parent: owner}));`
     );
     ctx.closeIf();
     return true;

tests/component/__snapshots__/component.test.ts.snap

@@ -1334,19 +1334,146 @@ exports[`t-slot directive can define and call slots 2`] = `
     c1.push(vn2);
     const slot3 = this.slots[context.__owl__.slotId + '_' + 'header'];
     if (slot3) {
-        slot3(context.__owl__.parent, Object.assign({}, extra, {parentNode: c2, vars: extra.vars, parent: owner}));
+        slot3.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: c2, vars: extra.vars, parent: owner}));
     }
     let c4 = [], p4 = {key:4};
     var vn4 = h('div', p4, c4);
     c1.push(vn4);
     const slot5 = this.slots[context.__owl__.slotId + '_' + 'footer'];
     if (slot5) {
-        slot5(context.__owl__.parent, Object.assign({}, extra, {parentNode: c4, vars: extra.vars, parent: owner}));
+        slot5.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: c4, vars: extra.vars, parent: owner}));
     }
     return vn1;
 }"
 `;
 
+exports[`t-slot directive can define and call slots 3`] = `
+"function anonymous(context,extra
+) {
+    var h = this.h;
+    let c1 = extra.parentNode;
+        Object.assign(context, extra.scope);
+    let c2 = [], p2 = {key:2};
+    var vn2 = h('span', p2, c2);
+    c1.push(vn2);
+    c2.push({text: \`header\`});
+}"
+`;
+
+exports[`t-slot directive can define and call slots 4`] = `
+"function anonymous(context,extra
+) {
+    var h = this.h;
+    let c1 = extra.parentNode;
+        Object.assign(context, extra.scope);
+    let c2 = [], p2 = {key:2};
+    var vn2 = h('span', p2, c2);
+    c1.push(vn2);
+    c2.push({text: \`footer\`});
+}"
+`;
+
+exports[`t-slot directive content is the default slot 1`] = `
+"function anonymous(context,extra
+) {
+    var h = this.h;
+    let c1 = extra.parentNode;
+        Object.assign(context, extra.scope);
+    let c2 = [], p2 = {key:2};
+    var vn2 = h('span', p2, c2);
+    c1.push(vn2);
+    c2.push({text: \`sts rocks\`});
+}"
+`;
+
+exports[`t-slot directive default slot work with text nodes 1`] = `
+"function anonymous(context,extra
+) {
+    var h = this.h;
+    let c1 = extra.parentNode;
+        Object.assign(context, extra.scope);
+    c1.push({text: \`sts rocks\`});
+}"
+`;
+
+exports[`t-slot directive multiple roots are allowed in a default slot 1`] = `
+"function anonymous(context,extra
+) {
+    var h = this.h;
+    let c1 = extra.parentNode;
+        Object.assign(context, extra.scope);
+    let c2 = [], p2 = {key:2};
+    var vn2 = h('span', p2, c2);
+    c1.push(vn2);
+    c2.push({text: \`sts\`});
+    let c3 = [], p3 = {key:3};
+    var vn3 = h('span', p3, c3);
+    c1.push(vn3);
+    c3.push({text: \`rocks\`});
+}"
+`;
+
+exports[`t-slot directive multiple roots are allowed in a named slot 1`] = `
+"function anonymous(context,extra
+) {
+    var h = this.h;
+    let c1 = extra.parentNode;
+        Object.assign(context, extra.scope);
+    let c2 = [], p2 = {key:2};
+    var vn2 = h('span', p2, c2);
+    c1.push(vn2);
+    c2.push({text: \`sts\`});
+    let c3 = [], p3 = {key:3};
+    var vn3 = h('span', p3, c3);
+    c1.push(vn3);
+    c3.push({text: \`rocks\`});
+}"
+`;
+
+exports[`t-slot directive refs are properly bound in slots 1`] = `
+"function anonymous(context,extra
+) {
+    let owner = context;
+    var h = this.h;
+    let c1 = extra.parentNode;
+        Object.assign(context, extra.scope);
+    let c2 = [], p2 = {key:2,on:{}};
+    var vn2 = h('button', p2, c2);
+    c1.push(vn2);
+    if (!context['doSomething']) {
+        throw new Error('Missing handler \\\\'' + 'doSomething' + \`\\\\' when evaluating template 'slot_footer_template'\`)
+    }
+    extra.handlers['click' + 2] = extra.handlers['click' + 2] || context['doSomething'].bind(owner);
+    p2.on['click'] = extra.handlers['click' + 2];
+    const ref3 = \`myButton\`;
+    p2.hook = {
+      create: (_, n) => {
+        context.refs[ref3] = n.elm;
+      },
+    };
+    c2.push({text: \`do something\`});
+}"
+`;
+
+exports[`t-slot directive slots are rendered with proper context 1`] = `
+"function anonymous(context,extra
+) {
+    let owner = context;
+    var h = this.h;
+    let c1 = extra.parentNode;
+        Object.assign(context, extra.scope);
+    let c2 = [], p2 = {key:2,on:{}};
+    var vn2 = h('button', p2, c2);
+    c1.push(vn2);
+    if (!context['doSomething']) {
+        throw new Error('Missing handler \\\\'' + 'doSomething' + \`\\\\' when evaluating template 'slot_footer_template'\`)
+    }
+    extra.handlers['click' + 2] = extra.handlers['click' + 2] || context['doSomething'].bind(owner);
+    p2.on['click'] = extra.handlers['click' + 2];
+    c2.push({text: \`do something\`});
+}"
+`;
+
 exports[`t-slot directive slots are rendered with proper context, part 2 1`] = `
 "function anonymous(context,extra
 ) {
@@ -1357,7 +1484,7 @@ exports[`t-slot directive slots are rendered with proper context, part 2 1`] = `
     var vn2 = h('a', p2, c2);
     const slot3 = this.slots[context.__owl__.slotId + '_' + 'default'];
     if (slot3) {
-        slot3(context.__owl__.parent, Object.assign({}, extra, {parentNode: c2, vars: extra.vars, parent: owner}));
+        slot3.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: c2, vars: extra.vars, parent: owner}));
     }
     return vn2;
 }"
@@ -1435,6 +1562,20 @@ exports[`t-slot directive slots are rendered with proper context, part 2 2`] = `
 }"
 `;
 
+exports[`t-slot directive slots are rendered with proper context, part 2 3`] = `
+"function anonymous(context,extra
+) {
+    var h = this.h;
+    let c6 = extra.parentNode;
+        Object.assign(context, extra.scope);
+    c6.push({text: \`User \`});
+    var _7 = context['user'].name;
+    if (_7 || _7 === 0) {
+        c6.push({text: _7});
+    }
+}"
+`;
+
 exports[`t-slot directive slots are rendered with proper context, part 3 1`] = `
 "function anonymous(context,extra
 ) {
@@ -1445,7 +1586,7 @@ exports[`t-slot directive slots are rendered with proper context, part 3 1`] = `
     var vn2 = h('a', p2, c2);
     const slot3 = this.slots[context.__owl__.slotId + '_' + 'default'];
     if (slot3) {
-        slot3(context.__owl__.parent, Object.assign({}, extra, {parentNode: c2, vars: extra.vars, parent: owner}));
+        slot3.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: c2, vars: extra.vars, parent: owner}));
     }
     return vn2;
 }"
@@ -1524,6 +1665,19 @@ exports[`t-slot directive slots are rendered with proper context, part 3 2`] = `
 }"
 `;
 
+exports[`t-slot directive slots are rendered with proper context, part 3 3`] = `
+"function anonymous(context,extra
+) {
+    var h = this.h;
+    let c6 = extra.parentNode;
+    let _7 = extra.vars._7
+        Object.assign(context, extra.scope);
+    if (_7 || _7 === 0) {
+        c6.push({text: _7});
+    }
+}"
+`;
+
 exports[`t-slot directive slots are rendered with proper context, part 4 1`] = `
 "function anonymous(context,extra
 ) {
@@ -1567,6 +1721,19 @@ exports[`t-slot directive slots are rendered with proper context, part 4 1`] = `
 }"
 `;
 
+exports[`t-slot directive slots are rendered with proper context, part 4 2`] = `
+"function anonymous(context,extra
+) {
+    var h = this.h;
+    let c1 = extra.parentNode;
+    let _2 = extra.vars._2
+        Object.assign(context, extra.scope);
+    if (_2 || _2 === 0) {
+        c1.push({text: _2});
+    }
+}"
+`;
+
 exports[`top level sub widgets basic use 1`] = `
 "function anonymous(context,extra
 ) {

tests/component/component.test.ts

@@ -3051,6 +3051,8 @@ describe("t-slot directive", () => {
     );
     expect(env.qweb.templates.Parent.fn.toString()).toMatchSnapshot();
     expect(env.qweb.templates.Dialog.fn.toString()).toMatchSnapshot();
+    expect(env.qweb.slots['1_header'].toString()).toMatchSnapshot();
+    expect(env.qweb.slots['1_footer'].toString()).toMatchSnapshot();
   });
 
   test("slots are rendered with proper context", async () => {
@@ -3086,6 +3088,7 @@ describe("t-slot directive", () => {
     expect(fixture.innerHTML).toBe(
       '<div><span class="counter">1</span><span><button>do something</button></span></div>'
     );
+    expect(env.qweb.slots['1_footer'].toString()).toMatchSnapshot();
   });
 
   test("slots are rendered with proper context, part 2", async () => {
@@ -3123,6 +3126,7 @@ describe("t-slot directive", () => {
     expect(fixture.innerHTML).toBe(
       '<div><u><li><a href="/user/1">User Aaron</a></li><li><a href="/user/2">User Mathieu</a></li></u></div>'
     );
+    expect(env.qweb.slots['1_default'].toString()).toMatchSnapshot();
   });
 
   test("slots are rendered with proper context, part 3", async () => {
@@ -3161,6 +3165,7 @@ describe("t-slot directive", () => {
     expect(fixture.innerHTML).toBe(
       '<div><u><li><a href="/user/1">User Aaron</a></li><li><a href="/user/2">User Mathieu</a></li></u></div>'
     );
+    expect(env.qweb.slots['1_default'].toString()).toMatchSnapshot();
   });
 
   test("slots are rendered with proper context, part 4", async () => {
@@ -3193,6 +3198,7 @@ describe("t-slot directive", () => {
     app.state.user.name = "David";
     await nextTick();
     expect(fixture.innerHTML).toBe('<div><a href="/user/1">User David</a></div>');
+    expect(env.qweb.slots['1_default'].toString()).toMatchSnapshot();
   });
 
   test("refs are properly bound in slots", async () => {
@@ -3228,6 +3234,7 @@ describe("t-slot directive", () => {
     expect(fixture.innerHTML).toBe(
       '<div><span class="counter">1</span><span><button>do something</button></span></div>'
     );
+    expect(env.qweb.slots['1_footer'].toString()).toMatchSnapshot();
   });
 
   test("content is the default slot", async () => {
@@ -3249,6 +3256,7 @@ describe("t-slot directive", () => {
     await parent.mount(fixture);
 
     expect(fixture.innerHTML).toBe("<div><div><span>sts rocks</span></div></div>");
+    expect(env.qweb.slots['1_default'].toString()).toMatchSnapshot();
   });
 
   test("default slot work with text nodes", async () => {
@@ -3268,6 +3276,7 @@ describe("t-slot directive", () => {
     await parent.mount(fixture);
 
     expect(fixture.innerHTML).toBe("<div><div>sts rocks</div></div>");
+    expect(env.qweb.slots['1_default'].toString()).toMatchSnapshot();
   });
 
   test("multiple roots are allowed in a named slot", async () => {
@@ -3292,6 +3301,7 @@ describe("t-slot directive", () => {
     await parent.mount(fixture);
 
     expect(fixture.innerHTML).toBe("<div><div><span>sts</span><span>rocks</span></div></div>");
+    expect(env.qweb.slots['1_content'].toString()).toMatchSnapshot();
   });
 
   test("multiple roots are allowed in a default slot", async () => {
@@ -3314,6 +3324,7 @@ describe("t-slot directive", () => {
     await parent.mount(fixture);
 
     expect(fixture.innerHTML).toBe("<div><div><span>sts</span><span>rocks</span></div></div>");
+    expect(env.qweb.slots['1_default'].toString()).toMatchSnapshot();
   });
 
   test("missing slots are ignored", async () => {

tests/router/__snapshots__/Link.test.ts.snap

@@ -17,7 +17,7 @@ exports[`Link component can render simple cases 1`] = `
     p3.on['click'] = extra.handlers['click' + 3];
     const slot4 = this.slots[context.__owl__.slotId + '_' + 'default'];
     if (slot4) {
-        slot4(context.__owl__.parent, Object.assign({}, extra, {parentNode: c3, vars: extra.vars, parent: owner}));
+        slot4.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: c3, vars: extra.vars, parent: owner}));
     }
     return vn3;
 }"