[IMP] component: allow top level widgets

closes #166

tests/__snapshots__/component.test.ts.snap

@@ -1443,3 +1443,114 @@ exports[`t-slot directive slots are rendered with proper context, part 4 1`] = `
     return vn1;
 }"
 `;
+
+exports[`top level sub widgets basic use 1`] = `
+"function anonymous(context,extra
+) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
+    let parent = context;
+    let owner = context;
+    let result;
+    var h = this.utils.h;
+    //COMPONENT
+    let def2;
+    let w3 = 3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[3]] : false;
+    let vn4 = {};
+    result = vn4;
+    let props3 = {p:1};
+    if (w3 && w3.__owl__.renderPromise && !w3.__owl__.vnode) {
+        if (utils.shallowEqual(props3, w3.__owl__.renderProps)) {
+            def2 = w3.__owl__.renderPromise;
+        } else {
+            w3.destroy();
+            w3 = false;
+        }
+    }
+    if (!w3) {
+        let componentKey3 = \`Child\`;
+        let W3 = context.components && context.components[componentKey3] || QWeb.components[componentKey3];
+        if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
+        w3 = new W3(parent, props3);
+        parent.__owl__.cmap[3] = w3.__owl__.id;
+        def2 = w3.__prepare();
+        def2 = def2.then(vnode=>{let pvnode=h(vnode.sel, {key: 3, hook: {insert(vn) {let nvn=w3.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});utils.defineProxy(vn4, pvnode);w3.__owl__.pvnode = pvnode;});
+    } else {
+        def2 = def2 || w3.__updateProps(props3, extra.forceUpdate, extra.patchQueue);
+        def2 = def2.then(()=>{if (w3.__owl__.isDestroyed) {return};let pvnode=w3.__owl__.pvnode;utils.defineProxy(vn4, pvnode);});
+    }
+    extra.promises.push(def2);
+    return result;
+}"
+`;
+
+exports[`top level sub widgets can select a sub widget  1`] = `
+"function anonymous(context,extra
+) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
+    let parent = context;
+    let owner = context;
+    let result;
+    var h = this.utils.h;
+    if (context['env'].flag) {
+        //COMPONENT
+        let def2;
+        let w3 = 3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[3]] : false;
+        let vn4 = {};
+        result = vn4;
+        let props3 = {};
+        if (w3 && w3.__owl__.renderPromise && !w3.__owl__.vnode) {
+            if (utils.shallowEqual(props3, w3.__owl__.renderProps)) {
+                def2 = w3.__owl__.renderPromise;
+            } else {
+                w3.destroy();
+                w3 = false;
+            }
+        }
+        if (!w3) {
+            let componentKey3 = \`Child\`;
+            let W3 = context.components && context.components[componentKey3] || QWeb.components[componentKey3];
+            if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
+            w3 = new W3(parent, props3);
+            parent.__owl__.cmap[3] = w3.__owl__.id;
+            def2 = w3.__prepare();
+            def2 = def2.then(vnode=>{let pvnode=h(vnode.sel, {key: 3, hook: {insert(vn) {let nvn=w3.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});utils.defineProxy(vn4, pvnode);w3.__owl__.pvnode = pvnode;});
+        } else {
+            def2 = def2 || w3.__updateProps(props3, extra.forceUpdate, extra.patchQueue);
+            def2 = def2.then(()=>{if (w3.__owl__.isDestroyed) {return};let pvnode=w3.__owl__.pvnode;utils.defineProxy(vn4, pvnode);});
+        }
+        extra.promises.push(def2);
+    }
+    if (!context['env'].flag) {
+        //COMPONENT
+        let def6;
+        let w7 = 7 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[7]] : false;
+        let vn8 = {};
+        result = vn8;
+        let props7 = {};
+        if (w7 && w7.__owl__.renderPromise && !w7.__owl__.vnode) {
+            if (utils.shallowEqual(props7, w7.__owl__.renderProps)) {
+                def6 = w7.__owl__.renderPromise;
+            } else {
+                w7.destroy();
+                w7 = false;
+            }
+        }
+        if (!w7) {
+            let componentKey7 = \`OtherChild\`;
+            let W7 = context.components && context.components[componentKey7] || QWeb.components[componentKey7];
+            if (!W7) {throw new Error('Cannot find the definition of component \\"' + componentKey7 + '\\"')}
+            w7 = new W7(parent, props7);
+            parent.__owl__.cmap[7] = w7.__owl__.id;
+            def6 = w7.__prepare();
+            def6 = def6.then(vnode=>{let pvnode=h(vnode.sel, {key: 7, hook: {insert(vn) {let nvn=w7.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w7.destroy();}}});utils.defineProxy(vn8, pvnode);w7.__owl__.pvnode = pvnode;});
+        } else {
+            def6 = def6 || w7.__updateProps(props7, extra.forceUpdate, extra.patchQueue);
+            def6 = def6.then(()=>{if (w7.__owl__.isDestroyed) {return};let pvnode=w7.__owl__.pvnode;utils.defineProxy(vn8, pvnode);});
+        }
+        extra.promises.push(def6);
+    }
+    return result;
+}"
+`;

tests/component.test.ts

@@ -3819,3 +3819,104 @@ describe("component error handling (catchError)", () => {
     expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
   });
 });
+
+describe("top level sub widgets", () => {
+  test("basic use", async () => {
+    env.qweb.addTemplates(`
+        <templates>
+          <t t-name="Parent">
+            <Child p="1"/>
+          </t>
+          <span t-name="Child">child<t t-esc="props.p"/></span>
+        </templates>`);
+    class Child extends Widget {}
+    class Parent extends Widget {
+      components = { Child };
+    }
+    const parent = new Parent(env);
+    await parent.mount(fixture);
+    expect(fixture.innerHTML).toBe("<span>child1</span>");
+    expect(env.qweb.templates.Parent.fn.toString()).toMatchSnapshot();
+  });
+
+
+  test("sub widget is interactive", async () => {
+    env.qweb.addTemplates(`
+        <templates>
+          <t t-name="Parent">
+            <Child p="1"/>
+          </t>
+          <span t-name="Child"><button t-on-click="inc">click</button>child<t t-esc="state.val"/></span>
+        </templates>`);
+    class Child extends Widget {
+        state = {val: 1};
+        inc() {
+            this.state.val++;
+        }
+    }
+    class Parent extends Widget {
+      components = { Child };
+    }
+    const parent = new Parent(env);
+    await parent.mount(fixture);
+    expect(fixture.innerHTML).toBe("<span><button>click</button>child1</span>");
+    const button = fixture.querySelector('button')!;
+    button.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<span><button>click</button>child2</span>");
+  });
+
+  test("can select a sub widget ", async () => {
+    env.qweb.addTemplates(`
+        <templates>
+          <t t-name="Parent">
+            <t t-if="env.flag"><Child /></t>
+            <t t-if="!env.flag"><OtherChild /></t>
+          </t>
+          <span t-name="Child">CHILD 1</span>
+          <div t-name="OtherChild">CHILD 2</div>
+        </templates>`);
+    class Child extends Widget {}
+    class OtherChild extends Widget {}
+    class Parent extends Widget {
+      components = { Child, OtherChild };
+    }
+    (<any>env).flag = true;
+    let parent = new Parent(env);
+    await parent.mount(fixture);
+    expect(fixture.innerHTML).toBe("<span>CHILD 1</span>");
+    parent.destroy();
+    (<any>env).flag = false;
+    parent = new Parent(env);
+    await parent.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div>CHILD 2</div>");
+
+    expect(env.qweb.templates.Parent.fn.toString()).toMatchSnapshot();
+  });
+
+  test("can select a sub widget, part 2", async () => {
+    env.qweb.addTemplates(`
+        <templates>
+          <t t-name="Parent">
+            <t t-if="state.flag"><Child /></t>
+            <t t-if="!state.flag"><OtherChild /></t>
+          </t>
+          <span t-name="Child">CHILD 1</span>
+          <div t-name="OtherChild">CHILD 2</div>
+        </templates>`);
+    class Child extends Widget {}
+    class OtherChild extends Widget {}
+    class Parent extends Widget {
+        state = {flag: true}
+      components = { Child, OtherChild };
+    }
+    let parent = new Parent(env);
+    await parent.mount(fixture);
+    expect(fixture.innerHTML).toBe("<span>CHILD 1</span>");
+    parent.state.flag = false;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div>CHILD 2</div>");
+
+  });
+
+});