small widget refactoring

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

@@ -21,7 +21,7 @@ export class Widget<T extends WEnv> {
   env: T;
   el: HTMLElement | null = null;
   state: Object = {};
-  refs: { [key: string]: any } = {}; // either HTMLElement or Widget
+  refs: { [key: string]: Widget<T> | HTMLElement | undefined } = {}; // either HTMLElement or Widget
 
   //--------------------------------------------------------------------------
   // Lifecycle
@@ -86,9 +86,7 @@ export class Widget<T extends WEnv> {
   //--------------------------------------------------------------------------
 
   async render(): Promise<VNode> {
-    const promises: Promise<void>[] = [];
+    const vnode = await this._render();
-    let vnode = this.env.qweb.render(this.name, this, { promises });
-    await Promise.all(promises);
     if (!this.el) {
       this.el = document.createElement(vnode.sel!);
     }
@@ -97,6 +95,12 @@ export class Widget<T extends WEnv> {
     return vnode;
   }
 
+  private async _render(): Promise<VNode> {
+    const promises: Promise<void>[] = [];
+    let vnode = this.env.qweb.render(this.name, this, { promises });
+    return Promise.all(promises).then(() => vnode);
+  }
+
   private visitSubTree(callback: (w: Widget<T>) => void) {
     callback(this);
     for (let child of this.children) {

web/static/src/ts/widgets/Discuss.ts

@@ -4,7 +4,7 @@ import { Clock } from "./clock";
 import { Counter } from "./counter";
 
 const template = `
-    <div class="o_discuss" t-debug="1">
+    <div class="o_discuss">
         <span>DISCUSS!!</span>
         <button t-on-click="resetCounter">Reset</button>
         <button t-on-click="resetCounterAsync">Reset in 3s</button>
@@ -26,20 +26,24 @@ export class Discuss extends Widget<Env> {
   widgets = { Clock, Counter };
   state = { validcounter: true };
 
-  mounted() {
+  mounted() {}
-    debugger;
-  }
   resetCounter(ev: MouseEvent) {
-    this.refs.counter.updateState({ counter: 3 });
+    if (this.refs.counter instanceof Counter) {
+      this.refs.counter.updateState({ counter: 3 });
+    }
   }
 
   resetCounterAsync(ev: MouseEvent) {
     setTimeout(() => {
-      this.refs.counter.updateState({ counter: 3 });
+      if (this.refs.counter instanceof Counter) {
+        this.refs.counter.updateState({ counter: 3 });
+      }
     }, 3000);
   }
 
   toggle() {
-    this.updateState({ validcounter: !this.state.validcounter });
+    if (this.refs.counter instanceof Counter) {
+      this.updateState({ validcounter: !this.state.validcounter });
+    }
   }
 }