[IMP] components: allow multiple roots in slots

closes #199

src/qweb_core.ts

@@ -268,9 +268,15 @@ export class QWeb extends EventBus {
     return template.fn.call(this, context, extra);
   }
 
-  _compile(name: string, elem: Element): CompiledTemplate {
+  _compile(name: string, elem: Element, parentNode?: number): CompiledTemplate {
     const isDebug = elem.attributes.hasOwnProperty("t-debug");
     const ctx = new Context(name);
+    if (parentNode) {
+      ctx.nextID = parentNode + 1;
+      ctx.parentNode = parentNode;
+      ctx.allowMultipleRoots = true;
+      ctx.addLine(`let c${parentNode} = extra.parentNode;`);
+    }
     this._compileNode(elem, ctx);
 
     if (ctx.shouldProtectContext) {
@@ -288,10 +294,12 @@ export class QWeb extends EventBus {
       ctx.code.unshift("    let utils = this.utils;");
     }
 
-    if (!ctx.rootNode) {
-      throw new Error("A template should have one root node");
+    if (!parentNode) {
+      if (!ctx.rootNode) {
+        throw new Error("A template should have one root node");
+      }
+      ctx.addLine(`return vn${ctx.rootNode};`);
     }
-    ctx.addLine(`return vn${ctx.rootNode};`);
     let template;
     try {
       template = new Function(
@@ -353,7 +361,6 @@ export class QWeb extends EventBus {
       // this is a component, we modify in place the xml document to change
       // <SomeComponent ... /> to <t t-component="SomeComponent" ... />
       node.setAttribute("t-component", node.tagName);
-      node.nodeValue = "t";
     }
     const attributes = (<Element>node).attributes;
 
@@ -648,6 +655,7 @@ export class Context {
   inLoop: boolean = false;
   inPreTag: boolean = false;
   templateName: string;
+  allowMultipleRoots: boolean = false;
 
   constructor(name?: string) {
     this.rootContext = this;
@@ -661,7 +669,11 @@ export class Context {
   }
 
   withParent(node: number): Context {
-    if (this === this.rootContext && (this.parentNode || this.parentTextNode)) {
+    if (
+      !this.allowMultipleRoots &&
+      this === this.rootContext &&
+      (this.parentNode || this.parentTextNode)
+    ) {
       throw new Error("A template should not have more than one root node");
     }
     if (!this.rootContext.rootNode) {

src/qweb_extensions.ts

@@ -421,6 +421,18 @@ QWeb.addDirective({
       : ctx.inLoop
       ? `String(-${componentID} - i)`
       : String(componentID);
+    if (ctx.allowMultipleRoots) {
+      // necessary to prevent collisions
+      if (!key && ctx.inLoop) {
+        let id = ctx.generateID();
+        ctx.addLine(
+          `let template${id} = "_slot_" + String(-${componentID} - i)`
+        );
+        templateID = `template${id}`;
+      } else {
+        templateID = `"_slot_${templateID}"`;
+      }
+    }
 
     let ref = node.getAttribute("t-ref");
     let refExpr = "";
@@ -572,13 +584,24 @@ QWeb.addDirective({
           slotNode.parentElement!.removeChild(slotNode);
           const key = slotNode.getAttribute("t-set")!;
           slotNode.removeAttribute("t-set");
-          const slotFn = qweb._compile(`slot_${key}_template`, slotNode);
+          const slotFn = qweb._compile(
+            `slot_${key}_template`,
+            slotNode,
+            ctx.parentNode!
+          );
           qweb.slots[`${slotId}_${key}`] = slotFn.bind(qweb);
         }
       }
       if (clone.childElementCount) {
-        const content = clone.children[0];
-        const slotFn = qweb._compile(`slot_default_template`, content);
+        const t = clone.ownerDocument!.createElement("t");
+        for (let child of Object.values(clone.children)) {
+          t.appendChild(child);
+        }
+        const slotFn = qweb._compile(
+          `slot_default_template`,
+          t,
+          ctx.parentNode!
+        );
         qweb.slots[`${slotId}_default`] = slotFn.bind(qweb);
       }
     }
@@ -683,7 +706,9 @@ QWeb.addDirective({
       `const slot${slotKey} = this.slots[context.__owl__.slotId + '_' + '${value}'];`
     );
     ctx.addLine(
-      `c${ctx.parentNode}.push(slot${slotKey}(context.__owl__.parent, extra));`
+      `slot${slotKey}(context.__owl__.parent, Object.assign({}, extra, {parentNode: c${
+        ctx.parentNode
+      }}));`
     );
     return true;
   }