work on composability

demo/src/Counter.ts

@@ -15,9 +15,9 @@ export default class Counter extends Widget {
     counter: 0
   };
 
-  constructor(parent: Widget | null, initialState?: number) {
+  constructor(parent: Widget, props: {initialState?: number}) {
     super(parent);
-    this.state.counter = initialState || 0;
+    this.state.counter = props.initialState || 0;
   }
 
   increment(delta: number) {

demo/src/RootWidget.ts

@@ -0,0 +1,29 @@
+import Widget from "../../src/core/widget";
+import Counter from "./Counter";
+
+const template = `
+    <div t-debug="1">
+        <span>Root Widget</span>
+        <button t-on-click="resetCounter">Reset</button>
+        <button t-on-click="toggle">Toggle  Counter</button>
+        <input/>
+        <t t-if="state.validcounter">
+            <t t-widget="Counter" t-ref="counter" t-props="{initialState:4}"/>
+        </t>
+    </div>
+`;
+
+export default class RootWidget extends Widget {
+  name = "root";
+  template = template;
+  widgets = { Counter };
+  state = { validcounter: true};
+
+  resetCounter(ev: MouseEvent) {
+      this.refs.counter.updateState({counter: 3})
+  }
+
+  toggle() {
+      this.updateState({validcounter: !this.state.validcounter});
+  }
+}

demo/src/main.ts

@@ -1,11 +1,10 @@
 ///<amd-module name="main" />
 
-// import RootWidget from "./RootWidget";
-import Counter from "./Counter";
+import RootWidget from "./RootWidget";
 import env from "./env";
 
 document.addEventListener("DOMContentLoaded", async function() {
-  const rootWidget = new Counter(null);
+  const rootWidget = new RootWidget(null);
   rootWidget.setEnvironment(env);
   const mainDiv = document.getElementById("app")!;
   await rootWidget.mount(mainDiv);