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> {
+  async mount(target: HTMLElement): Promise<VNode> {
-    await this.willStart();
+    await this._start();
-    this.isStarted = true;
     const vnode = await this.render();
+    target.appendChild(this.el!);
 
-    if (target) {
+    if (document.body.contains(target)) {
-      target.appendChild(this.el!);
+      this.visitSubTree(w => {
-      if (document.body.contains(target)) {
+        if (!w.isMounted) {
-        this.visitSubTree(w => w.mounted());
+          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()
     });

web/static/tests/widget.test.ts

@@ -130,6 +130,27 @@ describe("lifecycle hooks", () => {
     target.remove();
   });
 
+  test("willStart hook is called on subwidget", async () => {
+    expect.assertions(1);
+    let ok = false;
+    class ParentWidget extends Widget<TestEnv> {
+      name = "a";
+      template = `<div><t t-widget="child"/></div>`;
+      widgets = { child: ChildWidget };
+    }
+    class ChildWidget extends Widget<TestEnv> {
+      async willStart() {
+        ok = true;
+      }
+    }
+    const widget = makeWidget(ParentWidget);
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    await widget.mount(target);
+    expect(ok).toBe(true);
+    target.remove();
+  });
+
   test("mounted hook is called on subwidgets, in proper order", async () => {
     expect.assertions(4);
     let parentMounted = false;
@@ -157,6 +178,44 @@ describe("lifecycle hooks", () => {
     expect(childMounted).toBe(true);
     target.remove();
   });
+
+  test("willStart, mounted on subwidget rendered after main is mounted in some other position", async () => {
+    expect.assertions(3);
+    let hookCounter = 0;
+    class ParentWidget extends Widget<TestEnv> {
+      name = "a";
+      state = { ok: false };
+      template = `
+        <div>
+          <t t-if="state.ok">
+            <t t-widget="child"/>
+          </t>
+          <t t-else="1">
+            <div/>
+          </t>
+        </div>`; // the t-else part in this template is important. This is
+      // necessary to have a situation that could confuse the vdom
+      // patching algorithm
+      widgets = { child: ChildWidget };
+    }
+    class ChildWidget extends Widget<TestEnv> {
+      async willStart() {
+        hookCounter++;
+      }
+      mounted() {
+        expect(hookCounter).toBe(1);
+        hookCounter++;
+      }
+    }
+    const widget = makeWidget(ParentWidget);
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    await widget.mount(target);
+    expect(hookCounter).toBe(0); // sub widget not created yet
+    await widget.updateState({ ok: true });
+    expect(hookCounter).toBe(2);
+    target.remove();
+  });
 });
 
 describe("destroy method", () => {