work on mounted hook, make sure widgets are uniquely defined...

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

@@ -16,6 +16,7 @@ export class Widget<T extends WEnv> {
   vnode: VNode | null = null;
 
   isStarted: boolean = false;
+  isMounted: boolean = false;
   parent: Widget<T> | null = null;
   children: Widget<T>[] = [];
   env: T;
@@ -48,17 +49,20 @@ export class Widget<T extends WEnv> {
   // Public
   //--------------------------------------------------------------------------
 
-  async mount(target?: HTMLElement): Promise<VNode> {
-    await this.willStart();
-    this.isStarted = true;
+  async mount(target: HTMLElement): Promise<VNode> {
+    await this._start();
     const vnode = await this.render();
+    target.appendChild(this.el!);
 
-    if (target) {
-      target.appendChild(this.el!);
-      if (document.body.contains(target)) {
-        this.visitSubTree(w => w.mounted());
-      }
+    if (document.body.contains(target)) {
+      this.visitSubTree(w => {
+        if (!w.isMounted) {
+          w.isMounted = true;
+          w.mounted();
+        }
+      });
     }
+    // }
     return vnode;
   }
 
@@ -93,6 +97,11 @@ export class Widget<T extends WEnv> {
     return vnode;
   }
 
+  private async _start(): Promise<void> {
+    await this.willStart();
+    this.isStarted = true;
+  }
+
   private async _render(): Promise<VNode> {
     if (this.template) {
       this.env.qweb.addTemplate(this.name, this.template);
@@ -103,6 +112,16 @@ export class Widget<T extends WEnv> {
     return Promise.all(promises).then(() => vnode);
   }
 
+  _mount(el: HTMLElement) {
+    this.el = el;
+    if (this.parent) {
+      if (this.parent.isMounted) {
+        this.isMounted = true;
+        this.mounted();
+      }
+    }
+  }
+
   private visitSubTree(callback: (w: Widget<T>) => void) {
     callback(this);
     for (let child of this.children) {

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}._render().then(vnode=>{Object.assign(_${dummyID}, vnode);_${dummyID}.data.hook = {create(_,vn){_${widgetID}.el=vn.elm}}})`
+      `let def${defID} = _${widgetID}._start().then(() => _${widgetID}._render()).then(vnode=>{Object.assign(_${dummyID}, vnode);_${dummyID}.key="${dummyID}";_${dummyID}.data.hook = {create(_,vn){_${widgetID}._mount(vn.elm)}}})`
     );
     ctx.addLine(`extra.promises.push(def${defID})`);
 

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

@@ -21,9 +21,6 @@ export class Counter extends Widget<Env> {
     this.state.counter = props.initialState || 0;
   }
 
-  mounted() {
-    console.log("counter mounter", this.el);
-  }
   increment(delta: number) {
     this.updateState({ counter: this.state.counter + delta });
   }

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

@@ -18,9 +18,6 @@ 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,12 +15,10 @@ export class Clock extends Widget<Env> {
   }
 
   mounted() {
-    console.log("clock mounter", this.el);
     setInterval(this.updateTime.bind(this), 500);
   }
 
   updateTime() {
-    debugger;
     this.updateState({
       currentTime: new Date().toLocaleTimeString()
     });