make widget class generic on props

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

@@ -23,8 +23,8 @@ interface Meta<T extends WEnv> {
   isStarted: boolean;
   isMounted: boolean;
   isDestroyed: boolean;
-  parent: Widget<T> | null;
-  children: { [key: number]: Widget<T> };
+  parent: Widget<T, {}> | null;
+  children: { [key: number]: Widget<T, {}> };
   // children mapping: from templateID to widgetID
   // should it be a map number => Widget?
   cmap: { [key: number]: number };
@@ -35,7 +35,7 @@ const patch = init([sdListeners, sdAttrs]);
 //------------------------------------------------------------------------------
 // Widget
 //------------------------------------------------------------------------------
-export class Widget<T extends WEnv> {
+export class Widget<T extends WEnv, Props> {
   __widget__: Meta<WEnv>;
   name: string = "widget";
   template: string = "<div></div>";
@@ -46,18 +46,18 @@ export class Widget<T extends WEnv> {
 
   env: T;
   state: Object = {};
-  props: any;
-  refs: { [key: string]: Widget<T> | HTMLElement | undefined } = {};
+  props: Props | undefined;
+  refs: { [key: string]: Widget<T, {}> | HTMLElement | undefined } = {};
 
   //--------------------------------------------------------------------------
   // Lifecycle
   //--------------------------------------------------------------------------
 
-  constructor(parent: Widget<T> | T, props?: any) {
+  constructor(parent: Widget<T, {}> | T, props?: Props) {
     wl.push(this);
     this.props = props;
     let id: number;
-    let p: Widget<T> | null = null;
+    let p: Widget<T, any> | null = null;
     if (parent instanceof Widget) {
       p = parent;
       this.env = parent.env;
@@ -83,7 +83,7 @@ export class Widget<T extends WEnv> {
 
   mounted() {}
 
-  shouldUpdate(nextProps: any): boolean {
+  shouldUpdate(nextProps: Props): boolean {
     return true;
   }
 
@@ -147,7 +147,7 @@ export class Widget<T extends WEnv> {
     }
   }
 
-  updateProps(nextProps?: any): Promise<void> {
+  updateProps(nextProps: Props): Promise<void> {
     const shouldUpdate = this.shouldUpdate(nextProps);
     this.props = nextProps;
     return shouldUpdate ? this.render() : Promise.resolve();
@@ -205,7 +205,7 @@ export class Widget<T extends WEnv> {
     }
   }
 
-  private visitSubTree(callback: (w: Widget<T>) => void) {
+  private visitSubTree(callback: (w: Widget<T, any>) => void) {
     callback(this);
     const children = this.__widget__.children;
     for (let id in children) {

web/static/src/ts/registry.ts

@@ -6,7 +6,7 @@ import { Type } from "./types";
 // Types
 //------------------------------------------------------------------------------
 
-type ActionWidget = Type<Widget<Env>>;
+type ActionWidget = Type<Widget<Env, {}>>;
 
 //------------------------------------------------------------------------------
 // Registry code

web/static/src/ts/services/action_manager.ts

@@ -33,7 +33,7 @@ export type Action = ClientAction | ActWindowAction;
 
 export interface ActionWidget {
   id: number;
-  Widget: Type<Widget<Env>>;
+  Widget: Type<Widget<Env, {}>>;
   props: any;
 }
 

web/static/src/ts/widgets/CRM.ts

@@ -7,7 +7,7 @@ const template = `
     </div>
 `;
 
-export class CRM extends Widget<Env> {
+export class CRM extends Widget<Env, {}> {
   name = "crm";
   template = template;
 }

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

@@ -9,15 +9,19 @@ const template = `
     </div>
 `;
 
-export class Counter extends Widget<Env> {
+interface Props {
+  initialState?: number;
+}
+
+export class Counter extends Widget<Env, Props> {
   name = "counter";
   template = template;
   state = {
     counter: 0
   };
 
-  constructor(parent: Widget<Env>, props: { initialState?: number }) {
-    super(parent);
+  constructor(parent: Widget<Env, {}>, props: Props) {
+    super(parent, props);
     this.state.counter = props.initialState || 0;
   }
 

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

@@ -23,7 +23,7 @@ const template = `
     </div>
 `;
 
-export class Discuss extends Widget<Env> {
+export class Discuss extends Widget<Env, {}> {
   name = "discuss";
   template = template;
   widgets = { Clock, Counter, ColorWidget };
@@ -54,7 +54,7 @@ export class Discuss extends Widget<Env> {
   }
 }
 
-class ColorWidget extends Widget<Env> {
+class ColorWidget extends Widget<Env, { color: "red" | "blue" }> {
   name = "colorwidget";
   template = `<div>Current Color: <t t-esc="props.color"/></div>`;
 }

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

@@ -14,7 +14,7 @@ const template = `
     </div>
 `;
 
-export class Navbar extends Widget<Env> {
+export class Navbar extends Widget<Env, {}> {
   name = "navbar";
   template = template;
 

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

@@ -3,7 +3,7 @@ import { Env } from "../env";
 
 const template = `<div class="o_clock"><t t-esc="state.currentTime"/></div>`;
 
-export class Clock extends Widget<Env> {
+export class Clock extends Widget<Env, {}> {
   name = "clock";
   template = template;
   interval: any | undefined;

web/static/src/ts/widgets/root_widget.ts

@@ -11,11 +11,11 @@ const template = `
     </div>
 `;
 
-export class RootWidget extends Widget<Env> {
+export class RootWidget extends Widget<Env, {}> {
   name = "root";
   template = template;
   widgets = { Navbar };
-  content: Widget<Env> | null = null;
+  content: Widget<Env, {}> | null = null;
 
   mounted() {
     this.env.actionManager.on("action_ready", this, this.setContentWidget);