[FIX] component: support component reduced to a slot

src/qweb/extensions.ts

@@ -207,9 +207,20 @@ QWeb.addDirective({
       `const slot${slotKey} = this.constructor.slots[context.__owl__.slotId + '_' + '${value}'];`
     );
     ctx.addIf(`slot${slotKey}`);
+    let parentNode = `c${ctx.parentNode}`;
+    if (!ctx.parentNode) {
+        ctx.rootContext.shouldDefineResult = true;
+        ctx.rootContext.shouldDefineUtils = true;
+        parentNode = `children${ctx.nextID++}`;
+        ctx.addLine(`let ${parentNode}= []`);
+        ctx.addLine(`result = {}`);
+    }
     ctx.addLine(
-      `slot${slotKey}.call(this, 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: ${parentNode}, vars: extra.vars, parent: owner}));`
     );
+    if (!ctx.parentNode) {
+        ctx.addLine(`Promise.all(extra.promises).then(() => utils.defineProxy(result, ${parentNode}[0]))`);
+    }
     ctx.closeIf();
     return true;
   }

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

@@ -1823,6 +1823,24 @@ exports[`t-slot directive slots are rendered with proper context, part 4 2`] = `
 }"
 `;
 
+exports[`t-slot directive template can just return a slot 1`] = `
+"function anonymous(context,extra
+) {
+    let utils = this.constructor.utils;
+    let owner = context;
+    let result;
+    var h = this.h;
+    const slot1 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
+    if (slot1) {
+        let children2= []
+        result = {}
+        slot1.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: children2, vars: extra.vars, parent: owner}));
+        Promise.all(extra.promises).then(() => utils.defineProxy(result, children2[0]))
+    }
+    return result;
+}"
+`;
+
 exports[`top level sub widgets basic use 1`] = `
 "function anonymous(context,extra
 ) {

tests/component/component.test.ts

@@ -3322,6 +3322,34 @@ describe("t-slot directive", () => {
 
     expect(fixture.innerHTML).toBe(`<a href="abc">hey</a>`);
   });
+
+  test("template can just return a slot", async () => {
+    class Child extends Widget {
+      static template = xml`<span><t t-esc="props.value"/></span>`;
+    }
+    class SlotComponent extends Widget {
+      static template = xml`<t t-slot="default"/>`;
+    }
+
+    class Parent extends Widget {
+      static template = xml`
+        <div>
+            <SlotComponent><Child value="state.value"/></SlotComponent>
+        </div>`;
+      static components = { SlotComponent, Child };
+      state = useState({ value: 3 });
+    }
+    const parent = new Parent(env);
+    await parent.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<div><span>3</span></div>");
+
+    expect(QWeb.TEMPLATES[SlotComponent.template].fn.toString()).toMatchSnapshot();
+
+    parent.state.value = 5;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span>5</span></div>");
+  });
 });
 
 describe("t-model directive", () => {