t-widget directive

src/core/qweb_vdom.ts

@@ -96,7 +96,8 @@ export default class QWeb {
       elifDirective,
       ifDirective,
       callDirective,
-      onDirective
+      onDirective,
+      widgetDirective
     ].forEach(d => this.addDirective(d));
   }
 
@@ -641,21 +642,25 @@ const onDirective: Directive = {
   }
 };
 
-// const widgetDirective: Directive = {
-//   name: "widget",
-//   priority: 100,
-//   atNodeEncounter({ ctx, fullName, value, node, qweb}): boolean {
-//     let spanID = ctx.generateID();
-//     ctx.addLine(`let ${spanID} = document.createElement('span')`);
-//     ctx.addNode(spanID)
-//     let props = node.getAttribute('t-props');
-//     let widgetID = ctx.generateID();
-//     ctx.addLine(`let ${widgetID} = new context.widgets['${value}'](context, ${props})`);
-//     ctx.addLine(`${widgetID}.mount(${spanID}).then(()=>${ctx.parentNode}.replaceChild(${widgetID}.el, ${spanID}))`);
-//     let ref = node.getAttribute('t-ref');
-//     if (ref) {
-//       ctx.addLine(`context.refs['${ref}'] = ${widgetID}`);
-//     }
-//     return true;
-//   }
-// };
+const widgetDirective: Directive = {
+  name: "widget",
+  priority: 100,
+  atNodeEncounter({ ctx, fullName, value, node, qweb}): boolean {
+    let dummyID = ctx.generateID();
+    let defID = ctx.generateID();
+    ctx.addLine(`let _${dummyID} = {} // DUMMY`);
+      ctx.addLine(`c${ctx.parentNode}.push(_${dummyID})`);
+    let props = node.getAttribute('t-props');
+    let widgetID = ctx.generateID();
+    ctx.addLine(`let _${widgetID} = new context.widgets['${value}'](context, ${props})`);
+    ctx.addLine(`let def${defID} = _${widgetID}.mount().then(vnode=>Object.assign(_${dummyID}, vnode))`);
+    ctx.addLine(`context._TEMP.push(def${defID})`);
+
+    // split into extra directive?
+    let ref = node.getAttribute('t-ref');
+    if (ref) {
+      ctx.addLine(`context.refs['${ref}'] = _${widgetID}`);
+    }
+    return true;
+  }
+};

src/core/widget.ts

@@ -17,6 +17,7 @@ export default class Widget {
   name: string = "widget";
   template: string = "<div></div>";
   vnode: VNode | null = null;
+  _TEMP: Promise<any>[] | null = null;
 
   parent: Widget | null;
   children: Widget[] = [];
@@ -50,13 +51,16 @@ export default class Widget {
   // Public
   //--------------------------------------------------------------------------
 
-  async mount(target: HTMLElement) {
+  async mount(target?: HTMLElement): Promise<VNode> {
     await this.willStart();
     this.env!.qweb.addTemplate(this.name, this.template);
     delete this.template;
-    await this.render();
+    const vnode = await this.render();
 
-    target.appendChild(this.el!);
+    if (target) {
+      target.appendChild(this.el!);
+    }
+    return vnode;
   }
 
   destroy() {
@@ -84,19 +88,15 @@ export default class Widget {
   // Private
   //--------------------------------------------------------------------------
 
-  async render() {
-    let vnode = await this.env!.qweb.render(this.name, this);
+  async render(): Promise<VNode> {
+    this._TEMP = [];
+    let vnode = this.env!.qweb.render(this.name, this);
+    await Promise.all(this._TEMP);
     if (!this.el) {
       this.el = document.createElement(vnode.sel!);
     }
     patch(this.vnode || this.el, vnode);
     this.vnode = vnode;
+    return vnode;
   }
-
-  // private _setElement(el: ChildNode) {
-  //   if (this.el) {
-  //     this.el.replaceWith(el);
-  //   }
-  //   this.el = el;
-  // }
 }