diff --git a/src/component/directive.ts b/src/component/directive.ts index 27b46cde..dc92990b 100644 --- a/src/component/directive.ts +++ b/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; } } diff --git a/src/qweb/extensions.ts b/src/qweb/extensions.ts index 99ece994..d3c083ef 100644 --- a/src/qweb/extensions.ts +++ b/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; diff --git a/tests/component/__snapshots__/component.test.ts.snap b/tests/component/__snapshots__/component.test.ts.snap index 8a946d8d..e2112346 100644 --- a/tests/component/__snapshots__/component.test.ts.snap +++ b/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 ) { diff --git a/tests/component/component.test.ts b/tests/component/component.test.ts index dac65d42..21407951 100644 --- a/tests/component/component.test.ts +++ b/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( '
1
' ); + 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( '
  • User Aaron
  • User Mathieu
    • ' ); + 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( '
  • User Aaron
  • User Mathieu
    • ' ); + 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('
    User David
    '); + 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( '
    1
    ' ); + 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("
    sts rocks
    "); + 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("
    sts rocks
    "); + 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("
    stsrocks
    "); + 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("
    stsrocks
    "); + expect(env.qweb.slots['1_default'].toString()).toMatchSnapshot(); }); test("missing slots are ignored", async () => { diff --git a/tests/router/__snapshots__/Link.test.ts.snap b/tests/router/__snapshots__/Link.test.ts.snap index 40e8c1f1..daf9e966 100644 --- a/tests/router/__snapshots__/Link.test.ts.snap +++ b/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; }"