work on demo app, add demo:dev command

demo/src/Navbar.ts

@@ -0,0 +1,20 @@
+import Widget from "../../src/core/widget";
+
+const template = `
+    <div class="o_navbar">
+        <span class="title">Odoo</span>
+        <ul>
+            <li t-foreach="state.items" t-as="item">
+                <a href="someaction"><t t-esc="item.title"/></a>
+            </li>
+        </ul>
+    </div>
+`;
+
+export default class Navbar extends Widget {
+  name = "navbar";
+  template = template;
+  state = {
+    items: [{title: 'Discuss'}, {title: 'CRM'}]
+  };
+}

demo/src/RootWidget.ts

@@ -1,27 +1,31 @@
 import Widget from "../../src/core/widget";
 import Counter from "./Counter";
+import Navbar from "./Navbar";
 
 const template = `
-    <div>
-        <span>Root Widget</span>
-        <button t-on-click="resetCounter">Reset</button>
-        <button t-on-click="resetCounterAsync">Reset in 3s</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>
-        <t t-else="1">
-            <t t-widget="Counter" t-ref="counter" t-props="{initialState:7}"/>
-        </t>
-        <div ref="target"/>
+    <div class="o_web_client">
+        <t t-widget="Navbar"/>
+        <div class="o_content">
+            <span>Root Widget</span>
+            <button t-on-click="resetCounter">Reset</button>
+            <button t-on-click="resetCounterAsync">Reset in 3s</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>
+            <t t-else="1">
+                <t t-widget="Counter" t-ref="counter" t-props="{initialState:7}"/>
+            </t>
+            <div ref="target"/>
+        </div>
     </div>
 `;
 
 export default class RootWidget extends Widget {
   name = "root";
   template = template;
-  widgets = { Counter };
+  widgets = { Counter, Navbar };
   state = { validcounter: true};
 
   resetCounter(ev: MouseEvent) {

demo/src/main.ts

@@ -1,23 +1,10 @@
 ///<amd-module name="main" />
 
-// import QWeb from "../../src/core/qweb_vdom";
-// import {init} from "../../src/libs/snabbdom/src/snabbdom"
-// import h from "../../src/libs/snabbdom/src/h"
-// import sdProps from "../../src/libs/snabbdom/src/modules/props"
-// import sdListeners from "../../src/libs/snabbdom/src/modules/eventlisteners"
-
-// const patch = init([sdProps, sdListeners]);
-
-// (<any>window).h = h;
-// (<any>window).patch = patch;
-// (<any>window).QWeb = QWeb;
-// import Counter from "./Counter";
 import RootWidget from "./RootWidget";
 import env from "./env";
 
 document.addEventListener("DOMContentLoaded", async function() {
   const rootWidget = new RootWidget(null);
   rootWidget.setEnvironment(env);
-  const mainDiv = document.getElementById("app")!;
-  await rootWidget.mount(mainDiv);
+  await rootWidget.mount(document.body);
 });