call mounted hooks at proper timing

web/static/src/ts/core/Widget.ts

@@ -51,8 +51,6 @@ export class Widget<T extends WEnv> {
   async mount(target?: HTMLElement): Promise<VNode> {
     await this.willStart();
     this.isStarted = true;
-    this.env.qweb.addTemplate(this.name, this.template);
-    delete this.template;
     const vnode = await this.render();
 
     if (target) {
@@ -96,6 +94,10 @@ export class Widget<T extends WEnv> {
   }
 
   private async _render(): Promise<VNode> {
+    if (this.template) {
+      this.env.qweb.addTemplate(this.name, this.template);
+      delete this.template;
+    }
     const promises: Promise<void>[] = [];
     let vnode = this.env.qweb.render(this.name, this, { promises });
     return Promise.all(promises).then(() => vnode);

web/static/src/ts/core/qweb_vdom.ts

@@ -684,7 +684,7 @@ const widgetDirective: Directive = {
       `let _${widgetID} = new context.widgets['${value}'](context, ${props})`
     );
     ctx.addLine(
-      `let def${defID} = _${widgetID}.mount().then(vnode=>Object.assign(_${dummyID}, vnode))`
+      `let def${defID} = _${widgetID}._render().then(vnode=>{Object.assign(_${dummyID}, vnode);_${dummyID}.data.hook = {create(_,vn){_${widgetID}.el=vn.elm}}})`
     );
     ctx.addLine(`extra.promises.push(def${defID})`);
 

web/static/src/ts/widgets/Counter.ts

@@ -22,7 +22,7 @@ export class Counter extends Widget<Env> {
   }
 
   mounted() {
-    debugger;
+    console.log("counter mounter", this.el);
   }
   increment(delta: number) {
     this.updateState({ counter: this.state.counter + delta });

web/static/src/ts/widgets/Navbar.ts

@@ -18,6 +18,9 @@ export class Navbar extends Widget<Env> {
   name = "navbar";
   template = template;
 
+  mounted() {
+    console.log("navbar mounted", this.el);
+  }
   getUrl(menu: Menu) {
     const action_id = String(menu.actionID);
     return this.env.router.formatURL("", { action_id });

web/static/src/ts/widgets/clock.ts

@@ -15,6 +15,7 @@ export class Clock extends Widget<Env> {
   }
 
   mounted() {
+    console.log("clock mounter", this.el);
     setInterval(this.updateTime.bind(this), 500);
   }
 

web/static/tests/widget.test.ts

@@ -131,20 +131,21 @@ describe("lifecycle hooks", () => {
   });
 
   test("mounted hook is called on subwidgets, in proper order", async () => {
-    expect.assertions(2);
+    expect.assertions(4);
     let parentMounted = false;
     let childMounted = false;
     class ParentWidget extends Widget<TestEnv> {
       name = "a";
       template = `<div>Hello<t t-widget="child"/></div>`;
       widgets = { child: ChildWidget };
-      async mounted() {
+      mounted() {
         expect(childMounted).toBe(false);
         parentMounted = true;
       }
     }
     class ChildWidget extends Widget<TestEnv> {
-      async mounted() {
+      mounted() {
+        expect(document.body.contains(this.el)).toBe(true);
         expect(parentMounted).toBe(true);
         childMounted = true;
       }
@@ -153,6 +154,7 @@ describe("lifecycle hooks", () => {
     const target = document.createElement("div");
     document.body.appendChild(target);
     await widget.mount(target);
+    expect(childMounted).toBe(true);
     target.remove();
   });
 });