[IMP] slots: via prop 'slots'

The slot inner working has been reworked. A prop "slots" is now passed
explicitely to the component. It looks like

{ slotName_1: slotInfo_1, ..., slotName_m: slotInfo_m }

with the objects slotInfo_i with mandatory keys "__render", "__ctx",
and optional key "__scope" and possibly others.

Here is how a slotInfo object can be created:
A slotInfo object is normally created by setting in a template something
like

<div>
    <t t-set-slot="foo" t-set-scope="scope" param_1="var" param_2="3">
        content
        <t t-esc="scope.bool"/>
        <t t-esc="scope.num"/>
    </t>
</div>

and it will be used somewhere like

<div>
    <t t-esc="props.slots.foo.param_1"/>
    <t t-slot="foo" bool="other_var" num="5">
</div>

In the above example, the function "__render" produces the block dom
element for the content of the t-set-slot.
The context "__ctx" will have a key "scope" with value { bool: ..., num: 5 }
and "__scope" will be set to "scope".

tests/components/slots.test.ts

@@ -37,6 +37,59 @@ describe("slots", () => {
     expect(fixture.innerHTML).toBe("some text");
   });
 
+  test("simple default slot with params", async () => {
+    let child: any;
+    class Child extends Component {
+      static template = xml`<span><t t-slot="default" bool="state.bool"/></span>`;
+      state = useState({ bool: true });
+      setup() {
+        child = this;
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <Child>
+          <t t-set-slot="default" t-slot-scope="slotScope">
+            <t t-if="slotScope.bool">some text</t>
+            <t t-else="slotScope.bool">other text</t>
+          </t>
+        </Child>`;
+      static components = { Child };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<span>some text</span>");
+
+    child.state.bool = false;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<span>other text</span>");
+  });
+
+  test("simple default slot with params", async () => {
+    class Child extends Component {
+      static template = xml`<span><t t-slot="default" bool="state.bool"/></span>`;
+      state = useState({ bool: true });
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <Child>
+          <t t-if="slotScope.bool">some text</t>
+          <t t-else="slotScope.bool">other text</t>
+        </Child>`;
+      static components = { Child };
+    }
+
+    let error = null;
+    try {
+      await mount(Parent, fixture);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).not.toBeNull();
+  });
+
   test("fun: two calls to the same slot", async () => {
     class Child extends Component {
       static template = xml`<t t-slot="default"/><t t-slot="default"/>`;
@@ -97,6 +150,35 @@ describe("slots", () => {
     );
   });
 
+  test("can define and call slots with params", async () => {
+    class Dialog extends Component {
+      static template = xml`
+        <div>
+          <t t-esc="props.slots['header'].param"/>
+          <div><t t-slot="header"/></div>
+          <t t-esc="props.slots['footer'].param"/>
+          <div><t t-slot="footer"/></div>
+        </div>`;
+    }
+
+    class Parent extends Component {
+      static components = { Dialog };
+      static template = xml`
+        <div>
+          <Dialog>
+            <t t-set-slot="header" param="var"><span>header</span></t>
+            <t t-set-slot="footer" param="'5'"><span>footer</span></t>
+          </Dialog>
+        </div>`;
+      var = 3;
+    }
+    await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe(
+      "<div><div>3<div><span>header</span></div>5<div><span>footer</span></div></div></div>"
+    );
+  });
+
   test("no named slot content => just no children", async () => {
     class Dialog extends Component {
       static template = xml`<span><t t-slot="header"/></span>`;