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);
   }