bump to v0.6.0

when widget was (props)updated, then removed from DOM, it was not
destroyed.

closes #19

.jshintrc

@@ -0,0 +1,3 @@
+{
+  "esversion": 9
+}

README.md

@@ -1,77 +1,124 @@
-**Warning!**
+<h1 align="center">🦉 Odoo Web Lab 🦉</h1>
 
-This is currently a proof of concept, definitely not a production-ready codebase.
-We hope to use it in the Odoo web client soon.
+## Project Overview
 
----
+Odoo Web Lab (OWL) is a project to collect some useful, reusable, (hopefully)
+well designed building blocks for building web applications. However, since this is the basis for the Odoo web client, we will not hesitate
+to design the code here to better match the Odoo architecture/design principles.
 
-# Core Utility for Odoo Web Client
+The most important element of this repository is certainly the component system.
+It is designed to be:
 
-## Overview
+1. **declarative:** the user interface should be described in term of the state
+   of the application, not as a sequence of imperative steps.
 
-This repository contains some useful building block for building web applications.
-We made some efforts to make sure the code is reusable and generic. However, since this is the basis for the Odoo web client, we will not hesitate to design
-the code here to better match the Odoo architecture/design principles.
+2. **composable:** each widget can seamlessly be created in a parent widget by
+   a simple directive in its template.
 
-Currently, this repository contains:
+3. **asynchronous rendering:** the framework will transparently wait for each
+   subwidgets to be ready before applying the rendering. It uses native promises
+   under the hood.
 
-- some utility functions/classes
-- an implementation/extension of the QWeb template engine that outputs a virtual
-  dom (using the snabbdom library)
-- a Component class, which uses the QWeb engine as its underlying rendering
-  mechanism. The component class is designed to be declarative, with
-  asynchronous rendering.
+4. **uses QWeb as a template system:** the templates are described in XML
+   and follow the QWeb specification. This is a requirement for Odoo.
 
-In the future, this repository may includes other features. Here are some possible
-ideas:
-
-- a (frontend) router could be included.
-- a store base class (as in the flux/redux architecture)
+5. **with an imperative escape hatch:** if necessary, sub widgets can easily be
+   manually created/destroyed.
 
 Note: the code is written in typescript. This does not mean that the main web
 client will ever be converted to typescript (even though I would really like it).
 
-## Web client demo
+## Try it online
 
-To test and play with the component class, there is a demo application located
-in the _demo/_ folder. It is a rethink of what the web client could look like
-if it is ever rebuilt from scratch. It is currently an experiment. But
-obviously, we hope someday to be able to use this work and actually rewrite
-completely the odoo web client.
+You can experiment with the OWL project online: [https://odoo.github.io/owl/](https://odoo.github.io/owl/)
 
-## Main scripts
+## Installing/Building
 
-To install every dependency needed to play with this code:
+Some npm scripts are available:
 
-```
-npm install
-```
-
-To build a bundle of this as a library:
-
-```
-npm run build
-```
-
-To run tests:
-
-```
-npm run test
-npm run test:watch
-```
-
-To play with the demo application:
-
-```
-npm run demo:build # make a build in dist/app/
-npm run demo:dev   # make a build in dist/app/, and make a live server to access it
-```
-
-The _demo:dev_ task will build the app (without minification), then start a live-server with hot-reloading, and watch the file system to make sure
-that assets are properly rebuilt if necessary, and then reloaded.
+| Command            | Description                                               |
+| ------------------ | --------------------------------------------------------- |
+| npm install        | install every dependency required for this project        |
+| npm run build      | build a bundle of _owl_ in the _/dist/_ folder            |
+| npm run build:es5  | build a bundle of _owl_ in the _/dist/_ folder (ES5 code) |
+| npm run minify     | minify the prebuilt owl.js file                           |
+| npm run test       | run all tests                                             |
+| npm run test:watch | run all tests, and keep a watcher                         |
 
 ## Documentation
 
+The complete documentation can be found [here](doc/readme.md). The most important sections are:
+
 - [Quick Start](doc/quick_start.md)
+- [Tutorial](doc/tutorial.md)
 - [Component](doc/component.md)
 - [QWeb](doc/qweb.md)
+
+# Examples
+
+Here is a minimal Hello World example:
+
+```javascript
+class HelloWorld extends owl.core.Component {
+  inlineTemplate = `<div>Hello <t t-esc="props.name"/></div>`;
+}
+
+const env = {
+  qweb: new owl.core.QWeb()
+};
+
+const hello = new HelloWorld(env, { name: "World" });
+hello.mount(document.body);
+```
+
+The next example show how interactive widgets can be created and how widget
+composition works:
+
+```javascript
+class Counter extends owl.core.Component {
+  inlineTemplate = `
+    <div>
+      <button t-on-click="increment(-1)">-</button>
+      <span style="font-weight:bold">Value: <t t-esc="state.value"/></span>
+      <button t-on-click="increment(1)">+</button>
+    </div>`;
+
+  constructor(parent, props) {
+    super(parent, props);
+    this.state = {
+      value: props.initialState || 0
+    };
+  }
+
+  increment(delta) {
+    this.updateState({ value: this.state.value + delta });
+  }
+}
+
+class App extends owl.core.Component {
+  inlineTemplate = `
+    <div>
+        <t t-widget="Counter" t-props="{initialState: 1}"/>
+        <t t-widget="Counter" t-props="{initialState: 42}"/>
+    </div>`;
+
+  widgets = { Counter };
+}
+
+const env = {
+  qweb: new owl.core.QWeb()
+};
+
+const app = new App(env);
+app.mount(document.body);
+```
+
+More interesting examples on how to work with this web framework can be found in the _examples/_ folder:
+
+- [Todo Application](examples/readme.md#todo-app)
+- [Web Client](examples/readme.md#web-client-example)
+- [Benchmarks](examples/readme.md#benchmarks)
+
+## License
+
+OWL is [GPL licensed](./LICENSE).

demo/static/src/ts/widget.ts

@@ -1,38 +0,0 @@
-import { Component } from "../../../../src/component";
-import { Env } from "./env";
-
-//------------------------------------------------------------------------------
-// Widget classes
-//------------------------------------------------------------------------------
-
-export class Widget<P, S> extends Component<Env, P, S> {
-  constructor(parent, props) {
-    super(parent, props);
-    (<any>this.__widget__).isMobile = this.env.isMobile;
-  }
-  async updateProps(nextProps: P): Promise<void> {
-    if ((<any>this.__widget__).isMobile !== this.env.isMobile) {
-      (<any>this.__widget__).isMobile = this.env.isMobile;
-      return this._updateProps(nextProps);
-    }
-    return super.updateProps(nextProps);
-  }
-}
-
-export class PureWidget<P, S> extends Widget<P, S> {
-  shouldUpdate(nextProps: P): boolean {
-    for (let k in nextProps) {
-      if (nextProps[k] !== this.props[k]) {
-        return true;
-      }
-    }
-    return false;
-  }
-  async updateState(nextState: Partial<S>) {
-    for (let k in nextState) {
-      if (nextState[k] !== this.state[k]) {
-        return super.updateState(nextState);
-      }
-    }
-  }
-}

demo/static/tests/ui/__snapshots__/home_menu.test.ts.snap

@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`can be rendered 1`] = `
-"<div class=\\"o_home_menu\\">
-    <div class=\\"o_apps\\">
-      <a href=\\"#menu_id=96&amp;action_id=131\\" class=\\"o_app\\" data-menu=\\"96\\">
-        <i class=\\"fa fa-comment o_app_icon fa-3x fa-fw\\"></i>
-        <div class=\\"o_caption\\">
-          Discuss
-        </div>
-      </a><a href=\\"#menu_id=205&amp;action_id=250\\" class=\\"o_app\\" data-menu=\\"205\\">
-        <i class=\\"fa fa-pen o_app_icon fa-3x fa-fw\\"></i>
-        <div class=\\"o_caption\\">
-          Notes
-        </div>
-      </a><a href=\\"#menu_id=409&amp;action_id=597\\" class=\\"o_app\\" data-menu=\\"409\\">
-        <i class=\\"fa fa-handshake o_app_icon fa-3x fa-fw\\"></i>
-        <div class=\\"o_caption\\">
-          CRM
-        </div>
-      </a>
-    </div>
-  </div>"
-`;

demo/static/tests/ui/__snapshots__/navbar.test.ts.snap

@@ -1,45 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`can be rendered (in home menu, no app) 1`] = `
-"<div class=\\"o_navbar o_in_home\\">
-    
-    
-  </div>"
-`;
-
-exports[`can be rendered (in home menu, one active app) 1`] = `
-"<div class=\\"o_navbar o_in_home\\">
-    <a aria-label=\\"Applications\\" class=\\"o_title fa fa-chevron-left\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
-    
-  </div>"
-`;
-
-exports[`can render one menu item 1`] = `
-"<div class=\\"o_navbar\\">
-    <a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
-    
-      <a class=\\"o_menu_brand\\" href=\\"\\" role=\\"button\\">
-        Discuss
-      </a>
-      <ul class=\\"o_menu_sections\\">
-        
-        
-      </ul>
-    
-  </div>"
-`;
-
-exports[`mobile mode: navbar is different 1`] = `
-"<div class=\\"o_navbar\\">
-    <a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
-    
-      <a class=\\"o_menu_brand\\" href=\\"\\" role=\\"button\\">
-        Notes
-      </a>
-      <ul class=\\"o_menu_sections\\">
-        
-        <li>MOBILEMODE</li>
-      </ul>
-    
-  </div>"
-`;

demo/static/tests/ui/__snapshots__/notification.test.ts.snap

@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`can be rendered (type = warning) 1`] = `
-"<div class=\\"o_notification o_error\\">
-    
-    <div class=\\"o_notification_title\\">
-      <span class=\\"o_icon fa fa-3x fa-exclamation\\" role=\\"img\\" aria-label=\\"Notification title\\" title=\\"Notification title\\"></span>
-      title
-    </div>
-    <div class=\\"o_notification_content\\">
-      message
-    </div>
-  </div>"
-`;
-
-exports[`can be rendered 1`] = `
-"<div class=\\"o_notification\\">
-    
-    <div class=\\"o_notification_title\\">
-      <span class=\\"o_icon fa fa-3x fa-lightbulb\\" role=\\"img\\" aria-label=\\"Notification title\\" title=\\"Notification title\\"></span>
-      title
-    </div>
-    <div class=\\"o_notification_content\\">
-      message
-    </div>
-  </div>"
-`;

demo/static/tests/ui/__snapshots__/root.test.ts.snap

@@ -1,257 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`can be rendered (in home menu) 1`] = `
-"<div class=\\"o_web_client\\">
-    <div class=\\"o_navbar o_in_home\\">
-    
-    
-  </div>
-    <div class=\\"o_home_menu\\">
-    <div class=\\"o_apps\\">
-      <a href=\\"#menu_id=96&amp;action_id=131\\" class=\\"o_app\\" data-menu=\\"96\\">
-        <i class=\\"fa fa-comment o_app_icon fa-3x fa-fw\\"></i>
-        <div class=\\"o_caption\\">
-          Discuss
-        </div>
-      </a><a href=\\"#menu_id=205&amp;action_id=250\\" class=\\"o_app\\" data-menu=\\"205\\">
-        <i class=\\"fa fa-pen o_app_icon fa-3x fa-fw\\"></i>
-        <div class=\\"o_caption\\">
-          Notes
-        </div>
-      </a><a href=\\"#menu_id=409&amp;action_id=597\\" class=\\"o_app\\" data-menu=\\"409\\">
-        <i class=\\"fa fa-handshake o_app_icon fa-3x fa-fw\\"></i>
-        <div class=\\"o_caption\\">
-          CRM
-        </div>
-      </a>
-    </div>
-  </div>
-    <div class=\\"o_content o_hidden\\"></div>
-    <div class=\\"o_notification_container\\">
-      
-    </div>
-    <div class=\\"o_loading d-none\\">Loading</div>
-  </div>"
-`;
-
-exports[`clicks on client action with invalid key => empty widget is rendered + warning 1`] = `
-"<div class=\\"o_web_client\\">
-    <div class=\\"o_navbar\\">
-    <a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
-    
-      <a class=\\"o_menu_brand\\" href=\\"\\" role=\\"button\\">
-        Discuss
-      </a>
-      <ul class=\\"o_menu_sections\\">
-        
-        
-      </ul>
-    
-  </div>
-    
-    <div class=\\"o_content\\"><div class=\\"o_action_controller\\"></div></div>
-    <div class=\\"o_notification_container\\">
-      
-        <div class=\\"o_notification o_error\\">
-    
-    <div class=\\"o_notification_title\\">
-      <span class=\\"o_icon fa fa-3x fa-exclamation\\" role=\\"img\\" aria-label=\\"Notification Invalid Client Action\\" title=\\"Notification Invalid Client Action\\"></span>
-      Invalid Client Action
-    </div>
-    <div class=\\"o_notification_content\\">
-      Cannot find widget 'mail.discuss' in the action registry
-    </div>
-  </div>
-      
-    </div>
-    <div class=\\"o_loading d-none\\">Loading</div>
-  </div>"
-`;
-
-exports[`if url has action_id, will render action and navigate to proper menu_id 1`] = `
-"<div class=\\"o_web_client\\">
-    <div class=\\"o_navbar\\">
-    <a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
-    
-      <a class=\\"o_menu_brand\\" href=\\"\\" role=\\"button\\">
-        Discuss
-      </a>
-      <ul class=\\"o_menu_sections\\">
-        
-        
-      </ul>
-    
-  </div>
-    
-    <div class=\\"o_content\\"><div class=\\"o_discuss o_action_controller\\">
-    <div class=\\"o_control_panel\\">
-    <ol class=\\"breadcrumb\\" role=\\"navigation\\">
-      <li class=\\"breadcrumb-item active\\">
-        Discuss
-      </li>
-    </ol>
-    <div class=\\"o_cp_searchview\\" role=\\"search\\">
-      <div class=\\"o_searchview\\" role=\\"search\\" aria-autocomplete=\\"list\\">
-    <span class=\\"o_searchview_more fa\\" title=\\"Advanced Search...\\" role=\\"img\\" aria-label=\\"Advanced Search...\\"></span>
-  </div>
-    </div>
-    <div class=\\"o_cp_left\\">
-      <div class=\\"o_cp_buttons\\" role=\\"toolbar\\" aria-label=\\"Control panel toolbar\\"></div>
-      <aside class=\\"o_cp_sidebar\\"></aside>
-    </div>
-    <div class=\\"o_cp_right\\">
-      <div class=\\"btn-group o_search_options\\" role=\\"search\\"></div>
-      <nav class=\\"o_cp_pager\\" role=\\"search\\" aria-label=\\"Pager\\"></nav>
-      <nav class=\\"btn-group o_cp_switch_buttons\\" role=\\"toolbar\\" aria-label=\\"View switcher\\"></nav>
-    </div>
-  </div>
-    <div class=\\"o_content\\">
-      <div class=\\"o_discuss_sidebar\\">
-        <span>DISCUSS!!</span>
-      </div>
-      <div class=\\"o_discuss_content\\">
-        <button>Reset first counter</button>
-        <button>Reset counter 2 in 3s</button>
-        <button>Toggle  Clock/counters</button>
-        <button>Toggle Color</button>
-        <button>Rerender this widget</button>
-        <input>
-        
-          <div>
-      <button>-</button>
-      <span style=\\"font-weight:bold\\">Value: 4</span>
-      <button>+</button>
-    </div>
-          <div>
-      <button>-</button>
-      <span style=\\"font-weight:bold\\">Value: 400</span>
-      <button>+</button>
-    </div>
-        
-        <div>
-      <span>Current Color: </span>
-      red
-    </div>
-        <button>Add notif</button>
-        <button>Add sticky notif</button>
-        <button>Add warning</button>
-      </div>
-    </div>
-  </div></div>
-    <div class=\\"o_notification_container\\">
-      
-    </div>
-    <div class=\\"o_loading d-none\\">Loading</div>
-  </div>"
-`;
-
-exports[`open act window action with invalid viewtype => empty widget is rendered + warning 1`] = `
-"<div class=\\"o_web_client\\">
-    <div class=\\"o_navbar\\">
-    <a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
-    
-      <a class=\\"o_menu_brand\\" href=\\"\\" role=\\"button\\">
-        Notes
-      </a>
-      <ul class=\\"o_menu_sections\\">
-        
-        
-      </ul>
-    
-  </div>
-    
-    <div class=\\"o_content\\"><div class=\\"o_action_controller\\"></div></div>
-    <div class=\\"o_notification_container\\">
-      
-        <div class=\\"o_notification o_error\\">
-    
-    <div class=\\"o_notification_title\\">
-      <span class=\\"o_icon fa fa-3x fa-exclamation\\" role=\\"img\\" aria-label=\\"Notification Invalid View type\\" title=\\"Notification Invalid View type\\"></span>
-      Invalid View type
-    </div>
-    <div class=\\"o_notification_content\\">
-      Cannot find view of type 'kanban' in the view registry
-    </div>
-  </div>
-      
-    </div>
-    <div class=\\"o_loading d-none\\">Loading</div>
-  </div>"
-`;
-
-exports[`start with no action => clicks on client action => discuss is rendered 1`] = `
-"<div class=\\"o_web_client\\">
-    <div class=\\"o_navbar\\">
-    <a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
-    
-      <a class=\\"o_menu_brand\\" href=\\"\\" role=\\"button\\">
-        Discuss
-      </a>
-      <ul class=\\"o_menu_sections\\">
-        
-        
-      </ul>
-    
-  </div>
-    
-    <div class=\\"o_content\\"><div class=\\"o_discuss o_action_controller\\">
-    <div class=\\"o_control_panel\\">
-    <ol class=\\"breadcrumb\\" role=\\"navigation\\">
-      <li class=\\"breadcrumb-item active\\">
-        Discuss
-      </li>
-    </ol>
-    <div class=\\"o_cp_searchview\\" role=\\"search\\">
-      <div class=\\"o_searchview\\" role=\\"search\\" aria-autocomplete=\\"list\\">
-    <span class=\\"o_searchview_more fa\\" title=\\"Advanced Search...\\" role=\\"img\\" aria-label=\\"Advanced Search...\\"></span>
-  </div>
-    </div>
-    <div class=\\"o_cp_left\\">
-      <div class=\\"o_cp_buttons\\" role=\\"toolbar\\" aria-label=\\"Control panel toolbar\\"></div>
-      <aside class=\\"o_cp_sidebar\\"></aside>
-    </div>
-    <div class=\\"o_cp_right\\">
-      <div class=\\"btn-group o_search_options\\" role=\\"search\\"></div>
-      <nav class=\\"o_cp_pager\\" role=\\"search\\" aria-label=\\"Pager\\"></nav>
-      <nav class=\\"btn-group o_cp_switch_buttons\\" role=\\"toolbar\\" aria-label=\\"View switcher\\"></nav>
-    </div>
-  </div>
-    <div class=\\"o_content\\">
-      <div class=\\"o_discuss_sidebar\\">
-        <span>DISCUSS!!</span>
-      </div>
-      <div class=\\"o_discuss_content\\">
-        <button>Reset first counter</button>
-        <button>Reset counter 2 in 3s</button>
-        <button>Toggle  Clock/counters</button>
-        <button>Toggle Color</button>
-        <button>Rerender this widget</button>
-        <input>
-        
-          <div>
-      <button>-</button>
-      <span style=\\"font-weight:bold\\">Value: 4</span>
-      <button>+</button>
-    </div>
-          <div>
-      <button>-</button>
-      <span style=\\"font-weight:bold\\">Value: 400</span>
-      <button>+</button>
-    </div>
-        
-        <div>
-      <span>Current Color: </span>
-      red
-    </div>
-        <button>Add notif</button>
-        <button>Add sticky notif</button>
-        <button>Add warning</button>
-      </div>
-    </div>
-  </div></div>
-    <div class=\\"o_notification_container\\">
-      
-    </div>
-    <div class=\\"o_loading d-none\\">Loading</div>
-  </div>"
-`;

doc/component.md

@@ -7,16 +7,8 @@ For example:
 
 ```javascript
 export class Counter extends Component {
-  inlineTemplate = `
-    <div t-name="counter">
-      <button t-on-click="increment(-1)">-</button>
-      <span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
-      <button t-on-click="increment(1)">+</button>
-    </div>`;
-
-  state = {
-    counter: 0
-  };
+  template = "counter";
+  state = { counter: 0 };
 
   constructor(parent, props) {
     super(parent, props);
@@ -28,3 +20,95 @@ export class Counter extends Component {
   }
 }
 ```
+
+```xml
+    <div t-name="counter">
+      <button t-on-click="increment(-1)">-</button>
+      <span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
+      <button t-on-click="increment(1)">+</button>
+    </div>`;
+```
+
+## Lifecycle
+
+A solid and robust component system needs useful hooks/methods to help
+developers write components. Here is a description of the lifecycle of a owl
+component:
+
+- **[constructor](#constructor)**
+- **[willStart](#willStart)**
+- **[mounted](#mounted)**
+- **[willPatch](#willPatch)**
+- **[updated](#updated)**
+- **[willUnmount](#willUnmount)**
+
+Note: no hook method should ever be called manually. They are supposed to be
+called by the owl framework whenever it is required.
+
+### constructor
+
+The constructor is not exactly a hook, it is the constructor of the component.
+
+### willStart
+
+willStart is an asynchronous hook that can be implemented to perform some
+action before the initial rendering of a component.
+
+It will be called exactly once before the initial rendering. It is useful
+in some cases, for example, to load external assets (such as a JS library)
+before the widget is rendered. Another use case is to load data from a server.
+
+Note that a slow willStart method will slow down the rendering of the user
+interface. Therefore, some effort should be made to make this method as
+fast as possible.
+
+### mounted
+
+mounted is a hook that is called each time a component is attached to the
+DOM. This is a good place to add some listeners, or to interact with the
+DOM, if the component needs to perform some measure for example.
+
+It is the opposite of _willUnmount_. If a component has been mounted, it will
+be unmounted at some point.
+
+### willUpdateProps
+
+The willUpdateProps is an asynchronous hook, called just before new props
+are set. This is useful if the component needs some asynchronous task
+performed, depending on the props (for example, assuming that the props are
+some record Id, fetching the record data).
+
+This hook is not called during the first render (but willStart is called
+and performs a similar job).
+
+### willPatch
+
+The willPatch hook is called just before the DOM patching process starts.
+It is not called on the initial render. This is useful to get some
+information which are in the DOM. For example, the current position of the
+scrollbar
+
+Note that at this point, it is not safe to rerender the widget. In
+particular, updateState calls should be avoided.
+
+### patched
+
+This hook is called whenever a component did actually update its props,
+state or env.
+
+This method is not called on the initial render. It is useful to interact
+with the DOM (for example, through an external library) whenever the
+component was patched.
+
+Updating the widget state in this hook is possible, but not encouraged.
+One need to be careful, because updates here will cause rerender, which in
+turn will cause other calls to patched. So, we need to be particularly
+careful at avoiding endless cycles.
+
+### willUnmount
+
+willUnmount is a hook that is called each time just before a component is unmounted from
+the DOM. This is a good place to remove some listeners, for example.
+
+This is the opposite method of _mounted_. The _willUnmount_ method will be
+called in reverse order: first the children, then the parents.

doc/qweb.md

@@ -25,3 +25,11 @@ result = qweb.render("sometemplate", { name: "world" });
 - t-on directive
 - t-widget, t-props, t-key
 - t-ref
+
+## Note on white spaces
+
+White spaces in a templates are handled in a special way:
+
+- consecutive whitespaces are always condensed to a single whitespace
+- if a whitespace-only text node contains a linebreak, it is ignored
+- the previous rules do not apply if we are in a `<pre>` tag

doc/readme.md

@@ -0,0 +1,22 @@
+# Odoo Web Lab Documentation
+
+Currently, this repository contains:
+
+1. **core**
+
+   - an implementation/extension of the QWeb template engine that outputs a virtual
+     dom (using the snabbdom library)
+   - a Component class, which uses the QWeb engine as its underlying rendering
+     mechanism. The component class is designed to be declarative, with
+     asynchronous rendering. Also, it uses snabbdom as the virtual dom library.
+   - some utility functions/classes
+
+2. **extras**
+   - a Store class and a connect function, to help manage the state of an application (like react-redux)
+   - a Registry: this is a simple key/store mapping
+
+- [Quick Start](quick_start.md)
+- [Tutorial](tutorial.md)
+- [Component](component.md)
+- [QWeb](qweb.md)
+- [State Management](state_management.md)

doc/state_management.md

@@ -0,0 +1,8 @@
+# OWL: State Management
+
+Managing the state in an application is not an easy task. Many different
+architectures/designs/systems/... have been created. We propose here to use
+the idea of a central store.
+
+- Store
+- connect

doc/tutorial.md

@@ -0,0 +1,3 @@
+# Tutorial
+
+todo...

examples/benchmarks/app.css

@@ -0,0 +1,45 @@
+.main {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+
+  display: grid;
+  grid-template-columns: 200px 1fr;
+}
+
+.left-thing {
+  background-color: gray;
+  padding: 20px;
+}
+
+.left-thing button {
+  width: 100%;
+}
+
+.left-thing .counter span {
+  color: white;
+}
+
+.left-thing .counter button {
+  width: 40px;
+}
+
+.right-thing {
+  padding: 20px;
+  overflow: auto;
+}
+
+/* Message widget */
+.message .author {
+  font-weight: bold;
+}
+
+.message {
+  width: 400px;
+  background-color: lightblue;
+  margin: 10px 5px;
+  border-radius: 5px;
+  padding: 5px;
+}

examples/benchmarks/app.js

@@ -0,0 +1,55 @@
+import { Message } from "./message.js";
+import { messages } from "./data.js";
+
+const template = `
+    <div class="main">
+        <div class="left-thing">
+            <div class="counter">
+                <button t-on-click="increment(-1)">-</button>
+                <span style="font-weight:bold">Value: <t t-esc="state.messages.length"/></span>
+                <button t-on-click="increment(1)">+</button>
+            </div>
+            <button t-on-click="setMessageCount(10)">10 messages</button>
+            <button t-on-click="setMessageCount(20)">20 messages</button>
+            <button t-on-click="setMessageCount(500)">500 messages</button>
+            <button t-on-click="setMessageCount(1000)">1000 messages</button>
+            <button t-on-click="setMessageCount(5000)">5000 messages</button>
+            <button t-on-click="setMessageCount(15000)">15000 messages</button>
+        </div>
+        <div class="right-thing">
+            <div class="content">
+                <t t-foreach="state.messages" t-as="message">
+                    <t t-widget="Message" t-att-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
+                </t>
+            </div>
+        </div>
+    </div>`;
+
+export class App extends owl.core.Component {
+  constructor(parent, props) {
+    super(parent, props);
+    this.inlineTemplate = template;
+    this.widgets = { Message };
+    this.state = {
+      messages: messages.slice(0, 10)
+    };
+  }
+
+  setMessageCount(n) {
+    this.updateState({
+      messages: messages.slice(0, n)
+    });
+  }
+
+  removeMessage(data) {
+    const index = messages.findIndex(m => m.id === data.id);
+    const n = this.state.messages.length;
+    messages.splice(index, 1);
+    this.updateState({ messages: messages.slice(0, n - 1) });
+  }
+
+  increment(delta) {
+    const n = this.state.messages.length + delta;
+    this.setMessageCount(n);
+  }
+}

examples/benchmarks/counter.js

@@ -0,0 +1,18 @@
+export class Counter extends owl.core.Component {
+  inlineTemplate = `
+    <div>
+      <button t-on-click="increment(-1)">-</button>
+      <span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
+      <button t-on-click="increment(1)">+</button>
+    </div>`;
+  constructor(parent, props) {
+    super(parent, props);
+    this.state = {
+      counter: props.initialState || 0
+    };
+  }
+
+  increment(delta) {
+    this.updateState({ counter: this.state.counter + delta });
+  }
+}

examples/benchmarks/data.js

@@ -0,0 +1,22 @@
+export const messages = [];
+
+const authors = ["Aaron", "David", "Vincent"];
+const content = [
+  "Lorem ipsum dolor sit amet",
+  "Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
+  "Excepteur sint occaecat cupidatat non proident"
+];
+
+function chooseRandomly(array) {
+  const index = Math.floor(Math.random() * array.length);
+  return array[index];
+}
+
+for (let i = 1; i < 16000; i++) {
+  messages.push({
+    id: i,
+    author: chooseRandomly(authors),
+    msg: `${i}: ${chooseRandomly(content)}`,
+    likes: 0
+  });
+}

examples/benchmarks/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Odoo WebCore Benchmarks App</title>
+    <link rel="icon" href="data:,">
+
+    <!-- Application JS/CSS -->
+    <script src="/owl.js"></script>
+    <link rel="stylesheet" href="/app.css">
+    <script type="module" src="/main.js"></script>
+
+  </head>
+  <body>
+  </body>
+</html>

examples/benchmarks/main.js

@@ -0,0 +1,13 @@
+import { App } from "./app.js";
+
+function createApp(el) {
+  const env = {
+    qweb: new owl.core.QWeb()
+  };
+  const app = new App(env, { initialState: 13 });
+  app.mount(el);
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  createApp(document.body);
+});

examples/benchmarks/message.js

@@ -0,0 +1,22 @@
+import { Counter } from "./counter.js";
+
+export class Message extends owl.core.Component {
+  inlineTemplate = `
+    <div class="message">
+        <span class="author"><t t-esc="props.author"/></span>
+        <span class="msg"><t t-esc="props.msg"/></span>
+        <button class="remove" t-on-click="removeMessage">Remove</button>
+        <t t-widget="Counter" t-props="{initialState: props.id}"/>
+    </div>`;
+
+  constructor(parent, props) {
+    super(parent, props);
+    this.widgets = { Counter };
+  }
+
+  removeMessage() {
+    this.trigger("remove_message", {
+      id: this.props.id
+    });
+  }
+}

examples/readme.md

@@ -0,0 +1,46 @@
+# Examples
+
+This project features three example to illustrate how to work with the web-core framework:
+
+- _benchmarks_ is a small application to test large number of widgets,
+- _todoapp_ is the classical todo application (from the todomvc project),
+- _web_ is a rethinking of how the odoo web client could be implemented.
+
+## Benchmarks
+
+This example is just a playground to experiment/showcase some features of the framework, with large number of widgets.
+
+```
+npm run example:benchmarks:build # make a build in dist/examples/
+npm run example:benchmarks:dev   # make a build in dist/examples/, and make a live server to access it
+```
+
+The benchmarks application generates a large number of demo messages, and display them in a list, with a few buttons that can
+be used to alter the number of visible widgets.
+
+Note that each message is itself a widget, with a sub widget. This
+example could be made faster (by not using subwidgets), but the point is to observe/measure the overhead of the Component class.
+
+## Todo App
+
+The Todo App is the classical todo application from _http://todomvc.com/_. It is a good mini application with non trivial data structures and interface updates.
+
+```
+npm run example:todoapp:build # make a build in dist/examples/
+npm run example:todoapp:dev   # make a build in dist/examples/, and make a live server to access it
+```
+
+It is implemented with the Store class (as in redux/vuex).
+
+## Web Client Example
+
+The _web_ example,located in the _examples/web/_ folder is a rethink of what the
+web client could look like if it is ever rebuilt from scratch. It is currently an experiment. But obviously, we hope someday to be able to use this work and
+actually rewrite completely the odoo web client.
+
+```
+npm run example:web:build # make a build in dist/examples/
+npm run example:web:dev   # make a build in dist/examples/, and make a live server to access it
+```
+
+Note that it is currently written in typescript.

examples/todoapp/app.css

@@ -0,0 +1,376 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 100%;
+  vertical-align: baseline;
+  font-family: inherit;
+  font-weight: inherit;
+  color: inherit;
+  -webkit-appearance: none;
+  appearance: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
+  line-height: 1.4em;
+  background: #f5f5f5;
+  color: #4d4d4d;
+  min-width: 230px;
+  max-width: 550px;
+  margin: 0 auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 300;
+}
+
+:focus {
+  outline: 0;
+}
+
+.hidden {
+  display: none;
+}
+
+.todoapp {
+  background: #fff;
+  margin: 130px 0 40px 0;
+  position: relative;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.todoapp input::-webkit-input-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: #e6e6e6;
+}
+
+.todoapp input::-moz-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: #e6e6e6;
+}
+
+.todoapp input::input-placeholder {
+  font-style: italic;
+  font-weight: 300;
+  color: #e6e6e6;
+}
+
+.todoapp h1 {
+  position: absolute;
+  top: -155px;
+  width: 100%;
+  font-size: 100px;
+  font-weight: 100;
+  text-align: center;
+  color: rgba(175, 47, 47, 0.15);
+  -webkit-text-rendering: optimizeLegibility;
+  -moz-text-rendering: optimizeLegibility;
+  text-rendering: optimizeLegibility;
+}
+
+.new-todo,
+.edit {
+  position: relative;
+  margin: 0;
+  width: 100%;
+  font-size: 24px;
+  font-family: inherit;
+  font-weight: inherit;
+  line-height: 1.4em;
+  border: 0;
+  color: inherit;
+  padding: 6px;
+  border: 1px solid #999;
+  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.new-todo {
+  padding: 16px 16px 16px 60px;
+  border: none;
+  background: rgba(0, 0, 0, 0.003);
+  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
+}
+
+.main {
+  position: relative;
+  z-index: 2;
+  border-top: 1px solid #e6e6e6;
+}
+
+.toggle-all {
+  width: 1px;
+  height: 1px;
+  border: none; /* Mobile Safari */
+  opacity: 0;
+  position: absolute;
+  right: 100%;
+  bottom: 100%;
+}
+
+.toggle-all + label {
+  width: 60px;
+  height: 34px;
+  font-size: 0;
+  position: absolute;
+  top: -52px;
+  left: -13px;
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+.toggle-all + label:before {
+  content: "❯";
+  font-size: 22px;
+  color: #e6e6e6;
+  padding: 10px 27px 10px 27px;
+}
+
+.toggle-all:checked + label:before {
+  color: #737373;
+}
+
+.todo-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.todo-list li {
+  position: relative;
+  font-size: 24px;
+  border-bottom: 1px solid #ededed;
+}
+
+.todo-list li:last-child {
+  border-bottom: none;
+}
+
+.todo-list li.editing {
+  border-bottom: none;
+  padding: 0;
+}
+
+.todo-list li.editing .edit {
+  display: block;
+  width: calc(100% - 43px);
+  padding: 12px 16px;
+  margin: 0 0 0 43px;
+}
+
+.todo-list li.editing .view {
+  display: none;
+}
+
+.todo-list li .toggle {
+  text-align: center;
+  width: 40px;
+  /* auto, since non-WebKit browsers doesn't support input styling */
+  height: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  border: none; /* Mobile Safari */
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.todo-list li .toggle {
+  opacity: 0;
+}
+
+.todo-list li .toggle + label {
+  /*
+		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
+		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
+	*/
+  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center left;
+}
+
+.todo-list li .toggle:checked + label {
+  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
+}
+
+.todo-list li label {
+  word-break: break-all;
+  padding: 15px 15px 15px 60px;
+  display: block;
+  line-height: 1.2;
+  transition: color 0.4s;
+}
+
+.todo-list li.completed label {
+  color: #d9d9d9;
+  text-decoration: line-through;
+}
+
+.todo-list li .destroy {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 10px;
+  bottom: 0;
+  width: 40px;
+  height: 40px;
+  margin: auto 0;
+  font-size: 30px;
+  color: #cc9a9a;
+  margin-bottom: 11px;
+  transition: color 0.2s ease-out;
+}
+
+.todo-list li .destroy:hover {
+  color: #af5b5e;
+}
+
+.todo-list li .destroy:after {
+  content: "×";
+}
+
+.todo-list li:hover .destroy {
+  display: block;
+}
+
+.todo-list li .edit {
+  display: none;
+}
+
+.todo-list li.editing:last-child {
+  margin-bottom: -1px;
+}
+
+.footer {
+  color: #777;
+  padding: 10px 15px;
+  height: 20px;
+  text-align: center;
+  border-top: 1px solid #e6e6e6;
+}
+
+.footer:before {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 50px;
+  overflow: hidden;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
+    0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
+    0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-count {
+  float: left;
+  text-align: left;
+}
+
+.todo-count strong {
+  font-weight: 300;
+}
+
+.filters {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: absolute;
+  right: 0;
+  left: 0;
+}
+
+.filters li {
+  display: inline;
+}
+
+.filters li a {
+  color: inherit;
+  margin: 3px;
+  padding: 3px 7px;
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: 3px;
+}
+
+.filters li a:hover {
+  border-color: rgba(175, 47, 47, 0.1);
+}
+
+.filters li a.selected {
+  border-color: rgba(175, 47, 47, 0.2);
+}
+
+.clear-completed,
+html .clear-completed:active {
+  float: right;
+  position: relative;
+  line-height: 20px;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.clear-completed:hover {
+  text-decoration: underline;
+}
+
+.info {
+  margin: 65px auto 0;
+  color: #bfbfbf;
+  font-size: 10px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  text-align: center;
+}
+
+.info p {
+  line-height: 1;
+}
+
+.info a {
+  color: inherit;
+  text-decoration: none;
+  font-weight: 400;
+}
+
+.info a:hover {
+  text-decoration: underline;
+}
+
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  .toggle-all,
+  .todo-list li .toggle {
+    background: none;
+  }
+
+  .todo-list li .toggle {
+    height: 40px;
+  }
+}
+
+@media (max-width: 430px) {
+  .footer {
+    height: 50px;
+  }
+
+  .filters {
+    bottom: 10px;
+  }
+}

examples/todoapp/components/TodoApp.js

@@ -0,0 +1,60 @@
+import { TodoItem } from "./TodoItem.js";
+
+const { Component } = owl.core;
+const { connect } = owl.extras;
+
+const ENTER_KEY = 13;
+
+function mapStateToProps(state) {
+  return { todos: state.todos };
+}
+
+class TodoApp extends Component {
+  template = "todoapp";
+  widgets = { TodoItem };
+  state = { filter: "all" };
+
+  get visibleTodos() {
+    let todos = this.props.todos;
+    if (this.state.filter === "active") {
+      todos = todos.filter(t => !t.completed);
+    }
+    if (this.state.filter === "completed") {
+      todos = todos.filter(t => t.completed);
+    }
+    return todos;
+  }
+
+  get allChecked() {
+    return this.props.todos.every(todo => todo.completed);
+  }
+
+  get remaining() {
+    return this.props.todos.filter(todo => !todo.completed).length;
+  }
+
+  get remainingText() {
+    const items = this.remaining < 2 ? "item" : "items";
+    return ` ${items} left`;
+  }
+
+  addTodo(ev) {
+    if (ev.keyCode === ENTER_KEY) {
+      const title = ev.target.value;
+      if (title.trim()) {
+        this.env.store.dispatch("addTodo", title);
+      }
+      ev.target.value = "";
+    }
+  }
+
+  clearCompleted() {
+    this.env.store.dispatch("clearCompleted");
+  }
+
+  toggleAll() {
+    this.env.store.dispatch("toggleAll", !this.allChecked);
+  }
+}
+
+export default connect(mapStateToProps)(TodoApp);

examples/todoapp/components/TodoItem.js

@@ -0,0 +1,49 @@
+const ENTER_KEY = 13;
+const ESC_KEY = 27;
+
+export class TodoItem extends owl.core.Component {
+  template = "todoitem";
+
+  state = { isEditing: false };
+
+  removeTodo() {
+    this.env.store.dispatch("removeTodo", this.props.id);
+  }
+
+  toggleTodo() {
+    this.env.store.dispatch("toggleTodo", this.props.id);
+  }
+
+  async editTodo() {
+    await this.updateState({ isEditing: true });
+    this.refs.input.value = "";
+    this.refs.input.focus();
+    this.refs.input.value = this.props.title;
+  }
+
+  handleKeyup(ev) {
+    if (ev.keyCode === ENTER_KEY) {
+      this.updateTitle(ev.target.value);
+    }
+    if (ev.keyCode === ESC_KEY) {
+      ev.target.value = this.props.title;
+      this.updateState({ isEditing: false });
+    }
+  }
+
+  handleBlur(ev) {
+    this.updateTitle(ev.target.value);
+  }
+  updateTitle(title) {
+    const value = title.trim();
+    if (!value) {
+      this.removeTodo(this.props.id);
+    } else {
+      this.env.store.dispatch("editTodo", {
+        id: this.props.id,
+        title: value
+      });
+      this.updateState({ isEditing: false });
+    }
+  }
+}

examples/todoapp/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Odoo Demo App</title>
+    <link rel="icon" href="data:,">
+
+    <!-- Application JS/CSS -->
+    <script src="/owl.js"></script>
+    <link rel="stylesheet" href="/app.css">
+    <script type="module" src="/main.js"></script>
+
+  </head>
+  <body>
+  </body>
+</html>

examples/todoapp/main.js

@@ -0,0 +1,26 @@
+import TodoApp from "./components/TodoApp.js";
+import { makeStore } from "./store.js";
+
+async function makeEnv() {
+  const result = await fetch("templates.xml");
+  if (!result.ok) {
+    throw new Error("Error while fetching xml templates");
+  }
+  let templates = await result.text();
+  templates = templates.replace(/<!--[\s\S]*?-->/g, "");
+  const qweb = new owl.core.QWeb();
+  qweb.loadTemplates(templates);
+  return {
+    qweb,
+    store: makeStore()
+  };
+}
+
+document.addEventListener("DOMContentLoaded", async function() {
+  const env = await makeEnv();
+  const app = new TodoApp(env);
+
+  // for debugging purpose
+  window.app = app;
+  await app.mount(document.body);
+});

examples/todoapp/store.js

@@ -0,0 +1,75 @@
+//------------------------------------------------------------------------------
+// ACTIONS
+//------------------------------------------------------------------------------
+
+const actions = {
+  addTodo({ commit }, title) {
+    commit("addTodo", title);
+  },
+  removeTodo({ commit }, id) {
+    commit("removeTodo", id);
+  },
+  toggleTodo({ state, commit }, id) {
+    const todo = state.todos.find(t => t.id === id);
+    commit("editTodo", { id, completed: !todo.completed });
+  },
+  clearCompleted({ state, commit }) {
+    state.todos
+      .filter(todo => todo.completed)
+      .forEach(todo => {
+        commit("removeTodo", todo.id);
+      });
+  },
+  toggleAll({ state, commit }, completed) {
+    state.todos.forEach(todo => {
+      commit("editTodo", { id: todo.id, completed });
+    });
+  },
+  editTodo({ commit }, { id, title }) {
+    commit("editTodo", { id, title });
+  }
+};
+
+//------------------------------------------------------------------------------
+// MUTATIONS
+//------------------------------------------------------------------------------
+
+const mutations = {
+  addTodo(state, title) {
+    const id = state.nextId++;
+    const todo = { id, title, completed: false };
+    state.todos.push(todo);
+  },
+  removeTodo(state, id) {
+    const index = state.todos.findIndex(t => t.id === id);
+    state.todos.splice(index, 1);
+  },
+  editTodo(state, { id, title, completed }) {
+    const todo = state.todos.find(t => t.id === id);
+    if (title !== undefined) {
+      todo.title = title;
+    }
+    if (completed !== undefined) {
+      todo.completed = completed;
+    }
+  }
+};
+
+//------------------------------------------------------------------------------
+// STORE
+//------------------------------------------------------------------------------
+const LOCALSTORAGE_KEY = "todos-odoo";
+
+export function makeStore() {
+  const todos = JSON.parse(
+    window.localStorage.getItem(LOCALSTORAGE_KEY) || "[]"
+  );
+  const nextId = Math.max(0, ...todos.map(t => t.id || 0)) + 1;
+  const state = { todos, nextId };
+  const store = new owl.extras.Store({ state, actions, mutations });
+  store.on("update", null, () => {
+    const state = JSON.stringify(store.state.todos);
+    window.localStorage.setItem(LOCALSTORAGE_KEY, state);
+  });
+  return store;
+}

examples/todoapp/templates.xml

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <section t-name="todoapp" class="todoapp">
+        <!-- header -->
+        <header class="header">
+            <h1>todos</h1>
+            <input class="new-todo" autofocus="true" autocomplete="off" placeholder="What needs to be done?" t-on-keyup="addTodo"/>
+        </header>
+        <!-- main section -->
+        <section class="main" t-if="props.todos.length">
+            <input class="toggle-all" id="toggle-all" type="checkbox" t-att-checked="allChecked" t-on-click="toggleAll"/>
+            <label for="toggle-all"></label>
+            <ul class="todo-list">
+                <t t-foreach="visibleTodos" t-as="todo">
+                    <t t-widget="TodoItem" t-props="todo"/>
+                </t>
+            </ul>
+        </section>
+        <!-- footer -->
+        <footer class="footer" t-if="props.todos.length">
+            <span class="todo-count">
+                <strong>
+                    <t t-esc="remaining"/>
+                </strong>
+                <t t-esc="remainingText"/>
+            </span>
+            <ul class="filters">
+                <li>
+                    <a href="#/all" t-on-click="updateState({filter:'all'})" t-att-class="{selected: state.filter === 'all'}">All</a>
+                </li>
+                <li>
+                    <a href="#/active" t-on-click="updateState({filter:'active'})" t-att-class="{selected: state.filter === 'active'}">Active</a>
+                </li>
+                <li>
+                    <a href="#/completed" t-on-click="updateState({filter:'completed'})" t-att-class="{selected: state.filter === 'completed'}">Completed</a>
+                </li>
+            </ul>
+            <button class="clear-completed" t-if="props.todos.length gt remaining" t-on-click="clearCompleted">
+        Clear completed
+            </button>
+        </footer>
+    </section>
+
+    <li t-name="todoitem" class="todo" t-att-class="{completed: props.completed, editing: state.isEditing}">
+        <div class="view">
+            <input class="toggle" type="checkbox" t-on-change="toggleTodo" t-att-checked="props.completed"/>
+            <label t-on-dblclick="editTodo">
+                <t t-esc="props.title"/>
+            </label>
+            <button class="destroy" t-on-click="removeTodo"></button>
+        </div>
+        <input class="edit" t-ref="input" t-if="state.isEditing" t-att-value="props.title" t-on-keyup="handleKeyup" t-on-blur="handleBlur"/>
+    </li>
+
+</templates>