[IMP] qweb: add t-slot directive

Closes #67

tests/__snapshots__/component.test.ts.snap

@@ -583,3 +583,64 @@ exports[`random stuff/miscellaneous snapshotting compiled code 1`] = `
     return vn1;
 }"
 `;
+
+exports[`t-slot directive can define and call slots 1`] = `
+"function anonymous(context,extra
+) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    //WIDGET
+    let _2_index = c1.length;
+    c1.push(null);
+    let def3;
+    let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
+    let props4 = {};
+    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+            def3 = w4.__owl__.renderPromise;
+        } else {
+            w4.destroy();
+            w4 = false;
+        }
+    }
+    if (!w4) {
+        let widgetKey4 = \`Dialog\`;
+        let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
+        if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
+        w4 = new W4(owner, props4);
+        context.__owl__.cmap[4] = w4.__owl__.id;
+        w4.__owl__.slotsId = 1;
+        def3 = w4._prepare();
+        def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+    } else {
+        def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
+    }
+    extra.promises.push(def3);
+    return vn1;
+}"
+`;
+
+exports[`t-slot directive can define and call slots 2`] = `
+"function anonymous(context,extra
+) {
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    let c2 = [], p2 = {key:2};
+    var vn2 = h('div', p2, c2);
+    c1.push(vn2);
+    const slot3 = this.slots[context.__owl__.slotsId + '_' + 'header'];
+    c2.push(slot3(context.__owl__.parent, extra));
+    let c4 = [], p4 = {key:4};
+    var vn4 = h('div', p4, c4);
+    c1.push(vn4);
+    const slot5 = this.slots[context.__owl__.slotsId + '_' + 'footer'];
+    c4.push(slot5(context.__owl__.parent, extra));
+    return vn1;
+}"
+`;

tests/component.test.ts

@@ -2613,3 +2613,104 @@ describe("can deduce template from name", () => {
     expect(fixture.innerHTML).toBe("<span>Rochefort 10</span>");
   });
 });
+
+describe("t-slot directive", () => {
+  test("can define and call slots", async () => {
+    env.qweb.addTemplates(`
+        <templates>
+          <div t-name="Parent">
+             <t t-widget="Dialog">
+                <t t-set="header"><span>header</span></t>
+                <t t-set="footer"><span>footer</span></t>
+             </t>
+          </div>
+          <div t-name="Dialog">
+            <div><t t-slot="header"/></div>
+            <div><t t-slot="footer"/></div>
+          </div>
+        </templates>
+    `);
+    class Dialog extends Widget {}
+    class Parent extends Widget {
+      widgets = { Dialog };
+    }
+    const parent = new Parent(env);
+    await parent.mount(fixture);
+
+    expect(fixture.innerHTML).toBe(
+      "<div><div><div><span>header</span></div><div><span>footer</span></div></div></div>"
+    );
+    expect(env.qweb.templates.Parent.fn.toString()).toMatchSnapshot();
+    expect(env.qweb.templates.Dialog.fn.toString()).toMatchSnapshot();
+  });
+
+  test("slots are rendered with proper context", async () => {
+    env.qweb.addTemplates(`
+        <templates>
+          <div t-name="Parent">
+            <span class="counter"><t t-esc="state.val"/></span>
+            <t t-widget="Dialog">
+              <t t-set="footer"><button t-on-click="doSomething">do something</button></t>
+            </t>
+          </div>
+          <span t-name="Dialog"><t t-slot="footer"/></span>
+        </templates>
+    `);
+    class Dialog extends Widget {}
+    class Parent extends Widget {
+      widgets = { Dialog };
+      state = { val: 0 };
+      doSomething() {
+        this.state.val++;
+      }
+    }
+    const parent = new Parent(env);
+    await parent.mount(fixture);
+
+    expect(fixture.innerHTML).toBe(
+      '<div><span class="counter">0</span><span><button>do something</button></span></div>'
+    );
+
+    fixture.querySelector("button")!.click();
+    await nextTick();
+
+    expect(fixture.innerHTML).toBe(
+      '<div><span class="counter">1</span><span><button>do something</button></span></div>'
+    );
+  });
+
+  test("refs are properly bound in slots", async () => {
+    env.qweb.addTemplates(`
+        <templates>
+          <div t-name="Parent">
+            <span class="counter"><t t-esc="state.val"/></span>
+            <t t-widget="Dialog">
+              <t t-set="footer"><button t-ref="myButton" t-on-click="doSomething">do something</button></t>
+            </t>
+          </div>
+          <span t-name="Dialog"><t t-slot="footer"/></span>
+        </templates>
+    `);
+    class Dialog extends Widget {}
+    class Parent extends Widget {
+      widgets = { Dialog };
+      state = { val: 0 };
+      doSomething() {
+        this.state.val++;
+      }
+    }
+    const parent = new Parent(env);
+    await parent.mount(fixture);
+
+    expect(fixture.innerHTML).toBe(
+      '<div><span class="counter">0</span><span><button>do something</button></span></div>'
+    );
+
+    (<any>parent.refs.myButton).click();
+    await nextTick();
+
+    expect(fixture.innerHTML).toBe(
+      '<div><span class="counter">1</span><span><button>do something</button></span></div>'
+    );
+  });
+});