[REL] v1.0.0-alpha3

[FIX] component: properly validate optional types in objects
closes #440
2025-10-06 19:59:41 +07:00 · 2019-11-13 15:43:47 +01:00 · 2019-11-13 15:36:46 +01:00 · 2019-11-13 08:49:25 +01:00 · 2019-11-13 08:49:25 +01:00 · 2019-11-13 08:49:25 +01:00
29 changed files with 1807 additions and 565 deletions
@@ -92,7 +92,8 @@ A complete documentation for Owl can be found here:

 The most important sections are:

- [Quick Start](doc/learning/quick_start.md)
+- [Tutorial: TodoList application](doc/learning/tutorial_todoapp.md)
+- [QWeb templating language](doc/reference/qweb_templating_language.md)
 - [Component](doc/reference/component.md)
 - [Hooks](doc/reference/hooks.md)

@@ -103,8 +104,8 @@ Submit a PR!

 If you want to use a simple `<script>` tag, the last release can be downloaded here:

- [owl-1.0.0-alpha2.js](https://github.com/odoo/owl/releases/download/v1.0.0-alpha2/owl.js)
- [owl-1.0.0-alpha2.min.js](https://github.com/odoo/owl/releases/download/v1.0.0-alpha2/owl.min.js)
+- [owl-1.0.0-alpha3.js](https://github.com/odoo/owl/releases/download/v1.0.0-alpha3/owl.js)
+- [owl-1.0.0-alpha3.min.js](https://github.com/odoo/owl/releases/download/v1.0.0-alpha3/owl.min.js)

 Some npm scripts are available:

@@ -1,47 +0,0 @@
-# 🦉 Environment 🦉
-
-An environment is an object which contains a [`QWeb` instance](../reference/qweb.md).
-Whenever a root component is created, it is assigned an environment (see the
-reference section on [environment](../reference/environment.md). This environment
-is then automatically given to each sub components (and accessible in the `this.env` property).
-
-The environment is mostly static. Each application is free to add anything to
-the environment, which is very useful, since this can be accessed by each sub
-component.
-
-Some good use cases for the environment is:
-
- some configuration keys,
- session information,
- generic services (such as doing rpcs, or accessing local storage).
-
-Doing it this way means that components are easily testable: we can simply
-create a test environment with mock services.
-
-For example:
-
-```js
-async function myEnv() {
-  const templates = await loadTemplates();
-  const qweb = new QWeb({ templates });
-  const session = getSession();
-
-  return {
-    _t: myTranslateFunction,
-    session: session,
-    qweb: qweb,
-    services: {
-      localStorage: localStorage,
-      rpc: rpc
-    },
-    debug: false,
-    inMobileMode: true
-  };
-}
-
-async function start() {
-  App.env = await myEnv();
-  const app = new App();
-  await app.mount(document.body);
-}
-```
@@ -9,9 +9,11 @@
 - [Environment](reference/environment.md)
 - [Event Bus](reference/event_bus.md)
 - [Hooks](reference/hooks.md)
- [Misc](reference/misc.md)
+- [Miscellaneous Components](reference/misc.md)
 - [Observer](reference/observer.md)
- [QWeb](reference/qweb.md)
+- [Props](reference/props.md)
+- [QWeb Templating Language](reference/qweb_templating_language.md)
+- [QWeb Engine](reference/qweb_engine.md)
 - [Router](reference/router.md)
 - [Store](reference/store.md)
 - [Tags](reference/tags.md)
@@ -20,7 +22,7 @@
 ## Learning Resources

 - [Quick Start: create an (almost) empty Owl application](learning/quick_start.md)
- [Environment: what it is and what it should contain](learning/environment.md)
+- [Tutorial: create a TodoList application](learning/tutorial_todoapp.md)

 ## Miscellaneous

@@ -14,11 +14,11 @@
  - [Composition](#composition)
  - [Event Handling](#event-handling)
  - [Form Input Bindings](#form-input-bindings)
-  - [`t-key` Directive](#t-key-directive)
  - [Semantics](#semantics)
  - [Props Validation](#props-validation)
  - [References](#references)
  - [Slots](#slots)
+  - [Dynamic sub components](#dynamic-sub-components)
  - [Asynchronous Rendering](#asynchronous-rendering)
  - [Error Handling](#error-handling)
  - [Functional Components](#functional-components)
@@ -42,7 +42,7 @@ OWL components are the building blocks for user interface. They are designed to
   and follow the QWeb specification. This is a requirement for Odoo.

 OWL components are defined as a subclass of Component. The rendering is
-exclusively done by a [QWeb](qweb.md) template (which needs to be preloaded in QWeb).
+exclusively done by a [QWeb](qweb_templating_language.md) template (which needs to be preloaded in QWeb).
 Rendering a component generates a virtual dom representation
 of the component, which is then patched to the DOM, in order to apply the changes in an efficient way.

@@ -81,7 +81,7 @@ a state object is defined, by using the `useState` hook. It is not mandatory to

 An Owl component is a small class which represents a component or some UI element.
 It exists in the context of an [environment](environment.md) (`env`), which is propagated from a
-parent to its children. The environment needs to have a [QWeb](qweb.md) instance, which
+parent to its children. The environment needs to have a [QWeb](qweb_templating_language.md) instance, which
 will be used to render the component template.

 Be aware that the name of the component may be significant: if a component does
@@ -166,7 +166,7 @@ to be called in the constructor.
 - **`el`** (HTMLElement | null): reference to the DOM root node of the element. It is `null` when the
  component is not mounted.

- **`env`** (Object): the component environment, which contains a QWeb instance.
+- **`env`** (Object): the component [environment](environment.md), which contains a QWeb instance.

 - **`props`** (Object): this is an object containing all the properties given by
  the parent to a child component. For example, in the following situation,
@@ -237,16 +237,15 @@ component.

 We explain here all the public methods of the `Component` class.

- **`mount(target, renderBeforeRemount=false)`** (async): this is the main way a
+- **`mount(target)`** (async): this is the main way a
  component is added to the DOM: the root component is mounted to a target
  HTMLElement. Obviously, this is asynchronous, since each children need to be
  created as well. Most applications will need to call `mount` exactly once, on
  the root component.

-  The `renderBeforeRemount` argument is useful when a component is unmounted and remounted.
-  In that case, we may want to rerender the component _before_ it is remounted, if
-  we know that its state (or something in the environment, or ...) has changed.
-  In that case, it should simply set to `true`.
+  Note that if a component is mounted, unmounted and remounted, it will be
+  automatically re-rendered to ensure that changes in its state (or something
+  in the environment, or in the store, or ...) will be taken into account.

 - **`unmount()`**: in case a component needs to be detached/removed from the DOM, this
  method can be used. Most applications should not call `unmount`, this is more
@@ -448,7 +447,7 @@ The root component does not have a parent nor `props` (see note below). It will
 default empty environment).

 Note: a root component can however be given a `props` object in its constructor,
-like this: `new App(null, {some: 'object'});`.  It will not be a true `props`
+like this: `new App(null, {some: 'object'});`. It will not be a true `props`
 object, managed by Owl (so, for example, it will never be updated).

 ### Composition
@@ -503,66 +502,8 @@ the static `components` key, then fallbacks on the global registry.
 _Props_: In this example, the child component will receive the object `{count: 4}` in its
 constructor. This will be assigned to the `props` variable, which can be accessed
 on the component (and also, in the template). Whenever the state is updated, then
-the sub component will also be updated automatically.
-
-Note that there are restrictions on valid prop names: `class`, `style` and any
-string which starts with `t-` are not allowed.
-
-It is not common, but sometimes we need a dynamic component name and/or dynamic props. In this case,
-the `t-component` directive can also be used to accept dynamic values with string interpolation (like the [`t-attf-`](qweb.md#dynamic-attributes) directive):
-
-```xml
-<div t-name="ParentComponent">
-    <t t-component="ChildComponent{{id}}" />
-</div>
-```
-
-```js
-class ParentComponent {
-  static components = { ChildComponent1, ChildComponent2 };
-  state = { id: 1 };
-}
-```
-
-And the `t-props` directive can be used to specify totally dynamic props:
-
-```xml
-<div t-name="ParentComponent">
-    <Child t-props="some.obj"/>
-</div>
-```
-
-```js
-class ParentComponent {
-  static components = { Child };
-  some = { obj: { a: 1, b: 2 } };
-}
-```
-
-There is an even more dynamic way to use `t-component`: its value can be an
-expression evaluating to an actual component class. In that case, this is the
-class that will be used to create the component:
-
-```js
-class A extends Component<any, any, any> {
-  static template = xml`<span>child a</span>`;
-}
-class B extends Component<any, any, any> {
-  static template = xml`<span>child b</span>`;
-}
-class App extends Component<any, any, any> {
-  static template = xml`<t t-component="myComponent" t-key="state.child"/>`;
-
-  state = { child: "a" };
-
-  get myComponent() {
-    return this.state.child === "a" ? A : B;
-  }
-}
-```
-
-In this example, the component `App` selects dynamically the concrete sub
-component class.
+the sub component will also be updated automatically. See the [props section](props.md)
+for more information.

 **CSS and style:** Owl allows the parent to declare
 additional css classes or style for the sub component: css declared in `class`, `style`, `t-att-class` or `t-att-style` will be added to the
@@ -788,70 +729,6 @@ update a number whenever the change is done.

 Note: the online playground has an example to show how it works.

-### `t-key` Directive
-
-Even though Owl tries to be as declarative as possible, the DOM does not fully
-expose its state declaratively in the DOM tree. For example, the scrolling state,
-the current user selection, the focused element or the state of an input are not
-set as attribute in the DOM tree. This is why we use a virtual dom
-algorithm to keep the actual DOM node as much as possible.
-
-However, in some situations, this is not enough, and we need to help Owl decide
-if an element is actually the same, or is a different element with the same
-properties.
-
-Consider the following situation: we have a list of two items `[{text: "a"}, {text: "b"}]`
-and we render them in this template:
-
-```xml
-<p t-foreach="items" t-as="item"><t t-esc="item.text"/></p>
-```
-
-The result will be two `<p>` tags with text `a` and `b`. Now, if we swap them,
-and rerender the template, Owl needs to know what the intent is:
-
- should Owl actually swap the DOM nodes,
- or should it keep the DOM nodes, but with an updated text content?
-
-This might look trivial, but it actually matters. These two possibilities lead
-to different results in some cases. For example, if the user selected the text
-of the first `p`, swapping them will keep the selection while updating the
-text content will not.
-
-There are many other cases where this is important: `input` tags with their
-value, css classes and animations, scroll position...
-
-So, the `t-key` directive is used to give an identity to an element. It allows
-Owl to understand if different elements of a list are actually different or not.
-
-The above example could be modified by adding an ID: `[{id: 1, text: "a"}, {id: 2, text: "b"}]`.
-Then, the template could look like this:
-
-```xml
-<p t-foreach="items" t-as="item" t-key="item.id"><t t-esc="item.text"/></p>
-```
-
-The `t-key` directive is useful for lists (`t-foreach`). A key should be
-a unique number or string (objects will not work: they will be cast to the
-`"[object Object]"` string, which is obviously not unique).
-
-Also, the key can be set on a `t` tag or on its children. The following variations
-are all equivalent:
-
-```xml
-<p t-foreach="items" t-as="item" t-key="item.id">
-  <t t-esc="item.text"/>
-</p>
-
-<t t-foreach="items" t-as="item" t-key="item.id">
-  <p t-esc="item.text"/>
-</t>
-
-<t t-foreach="items" t-as="item">
-  <p t-key="item.id" t-esc="item.text"/>
-</t>
-```
-
 ### Semantics

 We give here an informal description of the way components are created/updated
@@ -946,7 +823,7 @@ As an application becomes complex, it may be quite unsafe to define props in an
 - hard to tell how a component should be used, by looking at its code.
 - unsafe, it is easy to send wrong props into a component, either by refactoring a component, or one of its parents.

-A props type system would solve both issues, by describing the types and shapes
+A props type system solves both issues, by describing the types and shapes
 of the props. Here is how it works in Owl:

 - `props` key is a static key (so, different from `this.props` in a component instance)
@@ -1146,6 +1023,49 @@ be considered the `default` slot. For example:
 </div>
 ```

+### Dynamic sub components
+
+It is not common, but sometimes we need a dynamic component name. In this case,
+the `t-component` directive can also be used to accept dynamic values with string interpolation (like the [`t-attf-`](qweb_templating_language.md#dynamic-attributes) directive):
+
+```xml
+<div t-name="ParentComponent">
+    <t t-component="ChildComponent{{id}}" />
+</div>
+```
+
+```js
+class ParentComponent {
+  static components = { ChildComponent1, ChildComponent2 };
+  state = { id: 1 };
+}
+```
+
+There is an even more dynamic way to use `t-component`: its value can be an
+expression evaluating to an actual component class. In that case, this is the
+class that will be used to create the component:
+
+```js
+class A extends Component<any, any, any> {
+  static template = xml`<span>child a</span>`;
+}
+class B extends Component<any, any, any> {
+  static template = xml`<span>child b</span>`;
+}
+class App extends Component<any, any, any> {
+  static template = xml`<t t-component="myComponent" t-key="state.child"/>`;
+
+  state = { child: "a" };
+
+  get myComponent() {
+    return this.state.child === "a" ? A : B;
+  }
+}
+```
+
+In this example, the component `App` selects dynamically the concrete sub
+component class.
+
 ### Asynchronous Rendering

 Working with asynchronous code always adds a lot of complexity to a system. Whenever
@@ -1,6 +1,14 @@
 # 🦉 Environment 🦉

-An environment is an object which contains a [`QWeb` instance](qweb.md). Whenever
+## Content
+
+- [Overview](#overview)
+- [Setting an Environment](#setting-an-environment)
+- [Content of an Environment](#content-of-an-environment)
+
+## Overview
+
+An environment is an object which contains a [`QWeb` instance](qweb_engine.md). Whenever
 a root component is created, it is assigned an environment (see
 [below](#setting-an-environment) for more info on this). This environment is
 then automatically given to each sub component (and accessible in the `this.env`
@@ -12,15 +20,20 @@ property).
   A    B
 ```

-This way, all components share the same `QWeb` instance.
+This way, all components share the same `QWeb` instance. Owl internally requires
+that the environment has a `qweb` key which maps to a
+[`QWeb`](qweb_engine.md) instance. This is the QWeb instance that will be used to
+render each templates in this specific component tree. Note that if no `QWeb`
+instance is provided, Owl will simply generate it on the fly.

-Note: some additional information about what should go into an environment
-can be found in the [learning section](../learning/environment.md).
+The environment is mostly static. Each application is free to add anything to
+the environment, which is very useful, since this can be accessed by each sub
+component.

 ## Setting an environment

 An Owl application needs an [environment](environment.md) to be executed. The
-environment has an important key: the [QWeb](qweb.md) instance, which will render
+environment has an important key: the [QWeb](qweb_engine.md) instance, which will render
 all templates.

 Whenever a root component `App` is mounted, Owl will setup a valid environment by
@@ -51,3 +64,42 @@ by simply doing this:
 ```js
 Component.env = myEnv; // will be the default env for all components
 ```
+
+## Content of an Environment
+
+Some good use cases for additional keys in the environment are:
+
+- some configuration keys,
+- session information,
+- generic services (such as doing rpcs, or accessing local storage).
+
+Doing it this way means that components are easily testable: we can simply
+create a test environment with mock services.
+
+For example:
+
+```js
+async function myEnv() {
+  const templates = await loadTemplates();
+  const qweb = new QWeb({ templates });
+  const session = getSession();
+
+  return {
+    _t: myTranslateFunction,
+    session: session,
+    qweb: qweb,
+    services: {
+      localStorage: localStorage,
+      rpc: rpc
+    },
+    debug: false,
+    inMobileMode: true
+  };
+}
+
+async function start() {
+  App.env = await myEnv();
+  const app = new App();
+  await app.mount(document.body);
+}
+```
@@ -290,6 +290,7 @@ class Parent extends Component {
    // here, if component is mounted, refs are active:
    // - this.divRef.el is the div HTMLElement
    // - this.subRef.comp is the instance of the sub component
+    // - this.subRef.el is the root HTML node of the sub component (i.e. this.subRef.comp.el)
  }
 }
 ```
@@ -297,11 +298,14 @@ class Parent extends Component {
 As shown by the example above, html elements are accessed by using the `el`
 key, and components references are accessed with `comp`.

-Note: if used on a component, the reference will be set in the `refs`
-variable between `willPatch` and `patched`.
+Notes:
+
+- if used on a component, the reference will be set in the `refs`
+  variable between `willPatch` and `patched`,
+- on a component, accessing `ref.el` will get the root node of the component.

 The `t-ref` directive also accepts dynamic values with string interpolation
-(like the [`t-attf-`](qweb.md#dynamic-attributes) and
+(like the [`t-attf-`](qweb_templating_language.md#dynamic-attributes) and
 `t-component` directives). For example,

 ```xml
@@ -0,0 +1,97 @@
+# 🦉 Props 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Definition](#definition)
+- [Good Practices](#good-practices)
+- [Dynamic Props](#dynamic-props)
+
+## Overview
+
+In Owl, `props` (short for _properties_) is an object which contains every piece
+of data given to a component by its parent.
+
+```js
+class Child extends Component {
+  static template = xml`<div><t t-esc="props.a"/><t t-esc="props.b"/></div>`;
+}
+
+class Parent extends Component {
+  static template = xml`<div><ComponentA a="state.a" b="'string'"/></div>`;
+  static components = { Child };
+  state = useState({ a: "fromparent" });
+}
+```
+
+In this example, the `Child` component receives two props from its parent: `a`
+and `b`. They are collected into a `props` object by Owl, with each value being
+evaluated in the context of the parent. So, `props.a` is equal to `'fromparent'` and
+`props.b` is equal to `'string'`.
+
+Note that `props` is an object that only makes sense from the perspective of the
+child component.
+
+## Definition
+
+The `props` object is made of every attributes defined on the template, with the
+following exceptions:
+
+- every attribute starting with `t-` are not props (they are QWeb directives),
+- `style` and `class` attributes are excluded as well (they are applied by Owl on
+  the root element of the component).
+
+In the following example:
+
+```xml
+<div>
+    <ComponentA a="state.a" b="'string'"/>
+    <ComponentB t-if="state.flag" model="model"/>
+    <ComponentC style="color:red;" class="left-pane" />
+</div>
+```
+
+the `props` object contains the following keys:
+
+- for `ComponentA`: `a` and `b`,
+- for `ComponentB`: `model`,
+- for `ComponentC`: empty object
+
+## Good Practices
+
+A `props` object is a collection of values that come from the parent. As such,
+they are owned by the parent, and should never be modified by the child:
+
+```js
+class MyComponent extends Component {
+  constructor(parent, props) {
+    super(parent, props);
+    props.a.b = 43; // Never do that!!!
+  }
+}
+```
+
+Props should be considered readonly, from the perspective of the child component.
+If there is a need to modify them, then the request to update them should be
+sent to the parent (for example, with an event).
+
+Any value can go in a props. Strings, objects, classes, or even callbacks could
+be given to a child component (but then, in the case of callbacks, communicating
+with events seems more appropriate).
+
+## Dynamic Props
+
+The `t-props` directive can be used to specify totally dynamic props:
+
+```xml
+<div t-name="ParentComponent">
+    <Child t-props="some.obj"/>
+</div>
+```
+
+```js
+class ParentComponent {
+  static components = { Child };
+  some = { obj: { a: 1, b: 2 } };
+}
+```
@@ -0,0 +1,151 @@
+# 🦉 QWeb Engine 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Reference](#reference)
+
+## Overview
+
+[QWeb](https://www.odoo.com/documentation/13.0/reference/qweb.html) is the primary
+templating engine used by Odoo. The QWeb class in the OWL project is an
+implementation of that specification with a few interesting points:
+
+- it compiles templates into functions that output a virtual DOM instead of a
+  string. This is necessary for the component system.
+- it has a few extra directives: `t-component`, `t-on`, ...
+
+We present in this section the engine, not the templating language.
+
+## Reference
+
+This section is about the javascript code that implements the `QWeb` specification.
+Owl exports a `QWeb` class in `owl.QWeb`. To use it, it just needs to be
+instantiated:
+
+```js
+const qweb = new owl.QWeb();
+```
+
+Its API is quite simple:
+
+- **`constructor(config)`**: constructor. Takes an optional configuration object
+  with an optional `templates` string to add initial
+  templates (see `addTemplates` for more information on format of the string)
+  and an optional `translateFn` translate function (see the section on
+  [translations](#translations)).
+
+  ```js
+  const qweb = new owl.QWeb({ templates: TEMPLATES, translateFn: _t });
+  ```
+
+- **`addTemplate(name, xmlStr, allowDuplicate)`**: add a specific template.
+
+  ```js
+  qweb.addTemplate("mytemplate", "<div>hello</div>");
+  ```
+
+  If the optional `allowDuplicate` is set to `true`, then `QWeb` will simply
+  ignore templates added for a second time. Otherwise, `QWeb` will crash.
+
+- **`addTemplates(xmlStr)`**: add a list of templates (identified by `t-name`
+  attribute).
+
+  ```js
+  const TEMPLATES = `
+    <templates>
+      <div t-name="App" class="main">main</div>
+      <div t-name="OtherComponent">other component</div>
+    </templates>`;
+  qweb.addTemplates(TEMPLATES);
+  ```
+
+- **`render(name, context, extra)`**: renders a template. This returns a `vnode`,
+  which is a virtual representation of the DOM (see [vdom doc](../architecture/vdom.md)).
+
+  ```js
+  const vnode = qweb.render("App", component);
+  ```
+
+- **`renderToString(name, context)`**: renders a template, but returns an html
+  string.
+
+  ```js
+  const str = qweb.renderToString("someTemplate", somecontext);
+  ```
+
+- **`registerTemplate(name, template)`**: static function to register a global
+  QWeb template. This is useful for commonly used components accross the
+  application, and for making a template available to an application without
+  having a reference to the actual QWeb instance.
+
+  ```js
+  QWeb.registerTemplate("mytemplate", `<div>some template</div>`);
+  ```
+
+- **`registerComponent(name, Component)`**: static function to register an OWL Component
+  to QWeb's global registry. Globally registered Components can be used in
+  templates (see the `t-component` directive). This is useful for commonly used
+  components accross the application.
+
+  ```js
+  class Dialog extends owl.Component { ... }
+  QWeb.registerComponent("Dialog", Dialog);
+
+  ...
+
+  class ParentComponent extends owl.Component { ... }
+  qweb.addTemplate("ParentComponent", "<div><Dialog/></div>");
+  ```
+
+In some way, a `QWeb` instance is the core of an Owl application. It is the only
+mandatory element of an [environment](environment.md). As such, it
+has an extra responsibility: it can act as an event bus for internal communication
+between Owl classes. This is the reason why `QWeb` actually extends [EventBus](event_bus.md).
+
+### Translations
+
+If properly setup, Owl QWeb engine can translate all rendered templates. To do
+so, it needs a translate function, which takes a string and returns a string.
+
+For example:
+
+```js
+const translations = {
+  hello: "bonjour",
+  yes: "oui",
+  no: "non"
+};
+const translateFn = str => translations[str] || str;
+
+const qweb = new QWeb({ translateFn });
+```
+
+Once setup, all rendered templates will be translated using `translateFn`:
+
+- each text node will be replaced with its translation,
+- each of the following attribute values will be translated as well: `title`,
+  `placeholder`, `label` and `alt`,
+- translating text nodes can be disabled with the special attribute `t-translation`,
+  if its value is `off`.
+
+So, with the above `translateFn`, the following templates:
+
+```xml
+<div>hello</div>
+<div t-translation="off">hello</div>
+<div>Are you sure?</div>
+<input placeholder="hello" other="yes"/>
+```
+
+will be rendered as:
+
+```xml
+<div>bonjour</div>
+<div>hello</div>
+<div>Are you sure?</div>
+<input placeholder="bonjour" other="yes"/>
+```
+
+Note that the translation is done during the compilation of the template, not
+when it is rendered.
@@ -1,10 +1,9 @@
-# 🦉 QWeb 🦉
+# 🦉 QWeb Templating Language🦉

 ## Content

 - [Overview](#overview)
 - [Directives](#directives)
- [QWeb Engine](#qweb-engine)
 - [Reference](#reference)
  - [White Spaces](#white-spaces)
  - [Root Nodes](#root-nodes)
@@ -21,14 +20,11 @@

 ## Overview

-[QWeb](https://www.odoo.com/documentation/13.0/reference/qweb.html) is the primary templating engine used by Odoo. It is based on the XML format, and used
+[QWeb](https://www.odoo.com/documentation/13.0/reference/qweb.html) is the primary
+templating engine used by Odoo. It is based on the XML format, and used
 mostly to generate HTML. In OWL, QWeb templates are compiled into functions that
 generate a virtual dom representation of the HTML.

-Template directives are specified as XML attributes prefixed with `t-`, for instance `t-if` for conditionals, with elements and other attributes being rendered directly.
-
-To avoid element rendering, a placeholder element `<t>` is also available, which executes its directive but doesn’t generate any output in and of itself.
-
 ```xml
 <div>
    <span t-if="somecondition">Some string</span>
@@ -40,135 +36,48 @@ To avoid element rendering, a placeholder element `<t>` is also available, which
 </div>
 ```

-The QWeb class in the OWL project is an implementation of that specification
-with a few interesting points:
+Template directives are specified as XML attributes prefixed with `t-`, for
+instance `t-if` for conditionals, with elements and other attributes being
+rendered directly.

- it compiles templates into functions that output a virtual DOM instead of a
-  string. This is necessary for the component system.
- it has a few extra directives: `t-component`, `t-on`, ...
+To avoid element rendering, a placeholder element `<t>` is also available, which
+executes its directive but doesn’t generate any output in and of itself.
+
+We present in this section the templating language, including its Owl specific
+extensions.

 ## Directives

-We present here a list of all standard QWeb directives:
+For reference, here is a list of all standard QWeb directives:

-| Name                           | Description                                                  |
-| ------------------------------ | ------------------------------------------------------------ |
-| `t-esc`                        | [Outputting safely a value](#outputting-data)                |
-| `t-raw`                        | [Outputting value, without escaping](#outputting-data)       |
-| `t-set`, `t-value`             | [Setting variables](#setting-variables)                      |
-| `t-if`, `t-elif`, `t-else`,    | [conditionally rendering](#conditionals)                     |
-| `t-foreach`, `t-as`            | [Loops](#loops)                                              |
-| `t-att`, `t-attf-*`, `t-att-*` | [Dynamic attributes](#dynamic-attributes)                    |
-| `t-call`                       | [Rendering sub templates](#rendering-sub-templates)          |
-| `t-debug`, `t-log`             | [Debugging](#debugging)                                      |
-| `t-translation`                | [Disabling the translation of a node](#translations)         |
-| `t-name`                       | [Defining a template (not really a directive)](#qweb-engine) |
+| Name                           | Description                                                    |
+| ------------------------------ | -------------------------------------------------------------- |
+| `t-esc`                        | [Outputting safely a value](#outputting-data)                  |
+| `t-raw`                        | [Outputting value, without escaping](#outputting-data)         |
+| `t-set`, `t-value`             | [Setting variables](#setting-variables)                        |
+| `t-if`, `t-elif`, `t-else`,    | [conditionally rendering](#conditionals)                       |
+| `t-foreach`, `t-as`            | [Loops](#loops)                                                |
+| `t-att`, `t-attf-*`, `t-att-*` | [Dynamic attributes](#dynamic-attributes)                      |
+| `t-call`                       | [Rendering sub templates](#rendering-sub-templates)            |
+| `t-debug`, `t-log`             | [Debugging](#debugging)                                        |
+| `t-translation`                | [Disabling the translation of a node](#translations)           |
+| `t-name`                       | [Defining a template (not really a directive)](qweb_engine.md) |

 The component system in Owl requires additional directives, to express various
 needs. Here is a list of all Owl specific directives:

-| Name                     | Description                                                                         |
-| ------------------------ | ----------------------------------------------------------------------------------- |
-| `t-component`, `t-props` | [Defining a sub component](component.md#composition)                                |
-| `t-ref`                  | [Setting a reference to a dom node or a sub component](component.md#references)     |
-| `t-key`                  | [Defining a key (to help virtual dom reconciliation)](component.md#t-key-directive) |
-| `t-on-*`                 | [Event handling](component.md#event-handling)                                       |
-| `t-transition`           | [Defining an animation](animations.md#css-transitions)                              |
-| `t-slot`                 | [Rendering a slot](component.md#slots)                                              |
-| `t-model`                | [Form input bindings](component.md#form-input-bindings)                             |
-
-## QWeb Engine
-
-This section is about the javascript code that implements the `QWeb` specification.
-Owl exports a `QWeb` class in `owl.QWeb`. To use it, it just needs to be
-instantiated:
-
-```js
-const qweb = new owl.QWeb();
-```
-
-Its API is quite simple:
-
- **`constructor(config)`**: constructor. Takes an optional configuration object
-  with an optional `templates` string to add initial
-  templates (see `addTemplates` for more information on format of the string)
-  and an optional `translateFn` translate function (see the section on
-  [translations](#translations)).
-
-  ```js
-  const qweb = new owl.QWeb({ templates: TEMPLATES, translateFn: _t });
-  ```
-
- **`addTemplate(name, xmlStr, allowDuplicate)`**: add a specific template.
-
-  ```js
-  qweb.addTemplate("mytemplate", "<div>hello</div>");
-  ```
-
-  If the optional `allowDuplicate` is set to `true`, then `QWeb` will simply
-  ignore templates added for a second time. Otherwise, `QWeb` will crash.
-
- **`addTemplates(xmlStr)`**: add a list of templates (identified by `t-name`
-  attribute).
-
-  ```js
-  const TEMPLATES = `
-    <templates>
-      <div t-name="App" class="main">main</div>
-      <div t-name="OtherComponent">other component</div>
-    </templates>`;
-  qweb.addTemplates(TEMPLATES);
-  ```
-
- **`render(name, context, extra)`**: renders a template. This returns a `vnode`,
-  which is a virtual representation of the DOM (see [vdom doc](../architecture/vdom.md)).
-
-  ```js
-  const vnode = qweb.render("App", component);
-  ```
-
- **`renderToString(name, context)`**: renders a template, but returns an html
-  string.
-
-  ```js
-  const str = qweb.renderToString("someTemplate", somecontext);
-  ```
-
- **`registerTemplate(name, template)`**: static function to register a global
-  QWeb template. This is useful for commonly used components accross the
-  application, and for making a template available to an application without
-  having a reference to the actual QWeb instance.
-
-  ```js
-  QWeb.registerTemplate("mytemplate", `<div>some template</div>`);
-  ```
-
- **`registerComponent(name, Component)`**: static function to register an OWL Component
-  to QWeb's global registry. Globally registered Components can be used in
-  templates (see the `t-component` directive). This is useful for commonly used
-  components accross the application.
-
-  ```js
-  class Dialog extends owl.Component { ... }
-  QWeb.registerComponent("Dialog", Dialog);
-
-  ...
-
-  class ParentComponent extends owl.Component { ... }
-  qweb.addTemplate("ParentComponent", "<div><Dialog/></div>");
-  ```
-
-In some way, a `QWeb` instance is the core of an Owl application. It is the only
-mandatory element of an [environment](environment.md). As such, it
-has an extra responsibility: it can act as an event bus for internal communication
-between Owl classes. This is the reason why `QWeb` actually extends [EventBus](event_bus.md).
+| Name                     | Description                                                                     |
+| ------------------------ | ------------------------------------------------------------------------------- |
+| `t-component`, `t-props` | [Defining a sub component](component.md#composition)                            |
+| `t-ref`                  | [Setting a reference to a dom node or a sub component](component.md#references) |
+| `t-key`                  | [Defining a key (to help virtual dom reconciliation)](#loops)                   |
+| `t-on-*`                 | [Event handling](component.md#event-handling)                                   |
+| `t-transition`           | [Defining an animation](animations.md#css-transitions)                          |
+| `t-slot`                 | [Rendering a slot](component.md#slots)                                          |
+| `t-model`                | [Form input bindings](component.md#form-input-bindings)                         |

 ## Reference

-We define in this section the specification of how `QWeb` templates should be
-rendered. Note that we only document here the standard QWeb specification. Owl
-specific extensions are documented in various other parts of the documentation.
-
 ### White Spaces

 White spaces in a template are handled in a special way:
@@ -479,16 +388,66 @@ into the global context.
 <!-- new_variable undefined -->
 ```

-Owl QWeb is used as the template engine for components. Components are frequently
-updated, and reuse as much of the previous DOM as possible. Loops offer a specific
-problem for this usecase: how does the template engine know if two rows have
-been swapped, or if the content of these rows was changed? To help Owl with that,
-there is an additional directive: [`t-key`](component.md#t-key-directive).
+Even though Owl tries to be as declarative as possible, the DOM does not fully
+expose its state declaratively in the DOM tree. For example, the scrolling state,
+the current user selection, the focused element or the state of an input are not
+set as attribute in the DOM tree. This is why we use a virtual dom
+algorithm to keep the actual DOM node as much as possible.
+
+However, in some situations, this is not enough, and we need to help Owl decide
+if an element is actually the same, or is a different element with the same
+properties.
+
+Consider the following situation: we have a list of two items `[{text: "a"}, {text: "b"}]`
+and we render them in this template:

 ```xml
-<p t-foreach="state.things" t-as="thing" t-key="thing.id">
-    <t t-esc="thing.content"/>
+<p t-foreach="items" t-as="item"><t t-esc="item.text"/></p>
+```
+
+The result will be two `<p>` tags with text `a` and `b`. Now, if we swap them,
+and rerender the template, Owl needs to know what the intent is:
+
+- should Owl actually swap the DOM nodes,
+- or should it keep the DOM nodes, but with an updated text content?
+
+This might look trivial, but it actually matters. These two possibilities lead
+to different results in some cases. For example, if the user selected the text
+of the first `p`, swapping them will keep the selection while updating the
+text content will not.
+
+There are many other cases where this is important: `input` tags with their
+value, css classes and animations, scroll position...
+
+So, the `t-key` directive is used to give an identity to an element. It allows
+Owl to understand if different elements of a list are actually different or not.
+
+The above example could be modified by adding an ID: `[{id: 1, text: "a"}, {id: 2, text: "b"}]`.
+Then, the template could look like this:
+
+```xml
+<p t-foreach="items" t-as="item" t-key="item.id"><t t-esc="item.text"/></p>
+```
+
+The `t-key` directive is useful for lists (`t-foreach`). A key should be
+a unique number or string (objects will not work: they will be cast to the
+`"[object Object]"` string, which is obviously not unique).
+
+Also, the key can be set on a `t` tag or on its children. The following variations
+are all equivalent:
+
+```xml
+<p t-foreach="items" t-as="item" t-key="item.id">
+  <t t-esc="item.text"/>
 </p>
+
+<t t-foreach="items" t-as="item" t-key="item.id">
+  <p t-esc="item.text"/>
+</t>
+
+<t t-foreach="items" t-as="item">
+  <p t-key="item.id" t-esc="item.text"/>
+</t>
 ```

 If there is no `t-key` directive, Owl will use the index as a default key.
@@ -543,23 +502,9 @@ will result in :

 ### Translations

-If properly setup, Owl QWeb engine can translate all rendered templates. To do
-so, it needs a translate function, which takes a string and returns a string.
-
-For example:
-
-```js
-const translations = {
-  hello: "bonjour",
-  yes: "oui",
-  no: "non"
-};
-const translateFn = str => translations[str] || str;
-
-const qweb = new QWeb({ translateFn });
-```
-
-Once setup, all rendered templates will be translated using `translateFn`:
+By default, QWeb specify that templates should be translated. If this behaviour
+is not wanted, there is a `t-translation` directive which can turn off
+translations (if it is set to the `off` value), with the following rules:

 - each text node will be replaced with its translation,
 - each of the following attribute values will be translated as well: `title`,
@@ -567,26 +512,8 @@ Once setup, all rendered templates will be translated using `translateFn`:
 - translating text nodes can be disabled with the special attribute `t-translation`,
  if its value is `off`.

-So, with the above `translateFn`, the following templates:
-
-```xml
-<div>hello</div>
-<div t-translation="off">hello</div>
-<div>Are you sure?</div>
-<input placeholder="hello" other="yes"/>
-```
-
-will be rendered as:
-
-```xml
-<div>bonjour</div>
-<div>hello</div>
-<div>Are you sure?</div>
-<input placeholder="bonjour" other="yes"/>
-```
-
-Note that the translation is done during the compilation of the template, not
-when it is rendered.
+See [here](qweb_engine.md#translations) for more information on how to setup a
+translate function in Owl QWeb.

 ### Debugging

@@ -44,7 +44,7 @@ it easier to scale application to larger size.

 To do so, Owl currently has a small helper that makes it easy to define a
 template inside a javascript (or typescript) file: the [`xml`](reference/tags.md#xml-tag)
-helper. With this, a template is automatically registered to [QWeb](reference/qweb.md).
+helper. With this, a template is automatically registered to [QWeb](reference/qweb_engine.md).

 This means that the template and the javascript code can be defined in the same
 file. It is not currently possible to add css to the same file, but Owl may
@@ -1,6 +1,6 @@
 {
  "name": "owl-framework",
-  "version": "1.0.0-alpha2",
+  "version": "1.0.0-alpha3",
  "description": "Odoo Web Library (OWL)",
  "main": "src/index.ts",
  "engines": {
@@ -1,6 +1,6 @@
 # 🦉 OWL Roadmap 🦉

- Current version: 1.0.0-alpha2
+- Current version: 1.0.0-alpha3
 - Status: mostly stable

 This roadmap is only an attempt at predicting Owl's future.  Everything may
@@ -4,7 +4,7 @@ import { h, patch, VNode } from "../vdom/index";
 import "./directive";
 import { Fiber } from "./fiber";
 import "./props_validation";
-import { scheduler } from "./scheduler";
+import { Scheduler, scheduler } from "./scheduler";

 /**
 * Owl Component System
@@ -88,6 +88,8 @@ export class Component<T extends Env, Props extends {}> {
  static props?: any;
  static defaultProps?: any;
  static env: any = {};
+  // expose scheduler s.t. it can be mocked for testing purposes
+  static scheduler: Scheduler = scheduler;

  /**
   * The `el` is the root element of the component.  Note that it could be null:
@@ -117,7 +119,7 @@ export class Component<T extends Env, Props extends {}> {
    let constr = this.constructor as any;
    const defaultProps = constr.defaultProps;
    if (defaultProps) {
-      props = props || {} as Props;
+      props = props || ({} as Props);
      this.__applyDefaultProps(props, defaultProps);
    }
    this.props = <Props>props;
@@ -274,17 +276,15 @@ export class Component<T extends Env, Props extends {}> {
   *
   * Note that a component can be mounted an unmounted several times
   */
-  async mount(target: HTMLElement, renderBeforeRemount: boolean = false): Promise<void> {
+  async mount(target: HTMLElement): Promise<void> {
    const __owl__ = this.__owl__;
    if (__owl__.isMounted) {
      return Promise.resolve();
    }
-    if (__owl__.vnode && !renderBeforeRemount) {
-      target.appendChild(this.el!);
-      if (document.body.contains(target)) {
-        this.__callMounted();
-      }
-      return;
+    if (!(target instanceof HTMLElement)) {
+      let message = `Component '${this.constructor.name}' cannot be mounted: the target is not a valid DOM node.`;
+      message += `\nMaybe the DOM is not ready yet? (in that case, you can use owl.utils.whenReady)`;
+      throw new Error(message);
    }
    return new Promise((resolve, reject) => {
      const fiber = new Fiber(null, this, undefined, undefined, false);
@@ -436,6 +436,9 @@ export class Component<T extends Env, Props extends {}> {
    }
    __owl__.isDestroyed = true;
    delete __owl__.vnode;
+    if (__owl__.currentFiber) {
+      __owl__.currentFiber.isCancelled = true;
+    }
  }

  __callMounted() {
@@ -455,7 +455,7 @@ QWeb.addDirective({
    );
    ctx.addLine(`const fiber = w${componentID}.__owl__.currentFiber;`);
    ctx.addLine(
-      `def${defID}.then(function () {if (w${componentID}.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; ${createHook}});`
+      `def${defID}.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; ${createHook}});`
    );
    if (registerCode) {
      ctx.addLine(registerCode);
@@ -40,7 +40,13 @@ QWeb.utils.validateProps = function(Widget, props: Object) {
          break;
        }
      }
-      let isValid = isValidProp(props[propName], propsDef[propName]);
+      let isValid;
+      try {
+        isValid = isValidProp(props[propName], propsDef[propName]);
+      } catch (e) {
+        e.message = `Invalid prop '${propName}' in component ${Widget.name} (${e.message})`;
+        throw e;
+      }
      if (!isValid) {
        throw new Error(`Props '${propName}' of invalid type in component '${Widget.name}'`);
      }
@@ -80,6 +86,9 @@ function isValidProp(prop, propDef): boolean {
    return result;
  }
  // propsDef is an object
+  if (propDef.optional && prop === undefined) {
+    return true;
+  }
  let result = isValidProp(prop, propDef.type);
  if (propDef.type === Array) {
    for (let i = 0, iLen = prop.length; i < iLen; i++) {
@@ -91,6 +100,13 @@ function isValidProp(prop, propDef): boolean {
    for (let key in shape) {
      result = result && isValidProp(prop[key], shape[key]);
    }
+    if (result) {
+      for (let propName in prop) {
+        if (!(propName in shape)) {
+          throw new Error(`unknown prop '${propName}'`);
+        }
+      }
+    }
  }
  return result;
 }
@@ -104,7 +104,12 @@ export function useRef(name: string): Ref {
  return {
    get el(): HTMLElement | null {
      const val = __owl__.refs && __owl__.refs[name];
-      return val instanceof HTMLElement ? val : null;
+      if (val instanceof HTMLElement) {
+        return val;
+      } else if (val instanceof Component) {
+        return val.el;
+      }
+      return null;
    },
    get comp(): Component<any, any> | null {
      const val = __owl__.refs && __owl__.refs[name];
@@ -84,6 +84,9 @@ const isStrictEqual = (a, b) => a === b;
 export function useStore(selector, options: SelectorOptions = {}): any {
  const component: Component<any, any> = Component.current!;
  const store = options.store || (component.env.store as Store);
+  if (!(store instanceof Store)) {
+    throw new Error(`No store found when connecting '${component.constructor.name}'`);
+  }
  let result = selector(store.state, component.props);
  const hashFn = store.observer.revNumber.bind(store.observer);
  let revNumber = hashFn(result) || result;
@@ -35,7 +35,7 @@ exports[`animations t-transition combined with component 1`] = `
        };
        utils.transitionRemove(vn, 'chimay', finalize);}}});
        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
        c1.push(pvnode);
        w3.__owl__.pvnode = pvnode;
    }
@@ -80,7 +80,7 @@ exports[`animations t-transition combined with t-component and t-if 1`] = `
        };
        utils.transitionRemove(vn, 'chimay', finalize);}}});
            const fiber = w3.__owl__.currentFiber;
-            def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
            c1.push(pvnode);
            w3.__owl__.pvnode = pvnode;
        }
@@ -61,7 +61,7 @@ exports[`basic widget properties reconciliation alg works for t-foreach in t-for
                let def8 = w9.__prepare(extra.fiber, undefined, undefined, sibling);
                let pvnode = h('dummy', {key: templateId9, hook: {insert(vn) { let nvn=w9.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w9.destroy();}}});
                const fiber = w9.__owl__.currentFiber;
-                def8.then(function () {if (w9.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+                def8.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
                c1.push(pvnode);
                w9.__owl__.pvnode = pvnode;
            }
@@ -105,7 +105,7 @@ exports[`class and style attributes with t-component dynamic t-att-style is prop
        let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
        let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.style = _5;}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.style = _5;}};});
        c1.push(pvnode);
        w3.__owl__.pvnode = pvnode;
    }
@@ -150,7 +150,7 @@ exports[`class and style attributes with t-component t-att-class is properly add
        let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
        let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;context.__owl__.refs[ref5] = w3;},remove() {},destroy(vn) {w3.destroy();delete context.__owl__.refs[ref5];}}});
        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){}};});
        c1.push(pvnode);
        w3.__owl__.pvnode = pvnode;
    }
@@ -210,7 +210,7 @@ exports[`class and style attributes with t-component t-att-class is properly add
        let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
        let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;context.__owl__.refs[ref5] = w3;},remove() {},destroy(vn) {w3.destroy();delete context.__owl__.refs[ref5];}}});
        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){}};});
        c1.push(pvnode);
        w3.__owl__.pvnode = pvnode;
    }
@@ -282,7 +282,7 @@ exports[`composition sub components with some state rendered in a loop 1`] = `
            let def6 = w7.__prepare(extra.fiber, undefined, undefined, sibling);
            let pvnode = h('dummy', {key: templateId7, hook: {insert(vn) { let nvn=w7.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w7.destroy();}}});
            const fiber = w7.__owl__.currentFiber;
-            def6.then(function () {if (w7.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            def6.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
            c1.push(pvnode);
            w7.__owl__.pvnode = pvnode;
        }
@@ -324,7 +324,7 @@ exports[`composition t-component with dynamic value 1`] = `
        let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
        let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
        c1.push(pvnode);
        w3.__owl__.pvnode = pvnode;
    }
@@ -365,7 +365,7 @@ exports[`composition t-component with dynamic value 2 1`] = `
        let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
        let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
        c1.push(pvnode);
        w3.__owl__.pvnode = pvnode;
    }
@@ -406,7 +406,7 @@ exports[`dynamic t-props basic use 1`] = `
        let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
        let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
        c1.push(pvnode);
        w3.__owl__.pvnode = pvnode;
    }
@@ -451,7 +451,7 @@ exports[`other directives with t-component t-on with getter as handler 1`] = `
        let def3 = w4.__prepare(extra.fiber, undefined, undefined, sibling);
        let pvnode = h('dummy', {key: templateId4, hook: {insert(vn) { let nvn=w4.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});
        const fiber = w4.__owl__.currentFiber;
-        def3.then(function () {if (w4.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['handler'];if (fn) { fn.call(owner, e); } else { owner.handler; }});}};});
+        def3.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['handler'];if (fn) { fn.call(owner, e); } else { owner.handler; }});}};});
        c1.push(pvnode);
        w4.__owl__.pvnode = pvnode;
    }
@@ -492,7 +492,7 @@ exports[`other directives with t-component t-on with handler bound to argument 1
        let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
        let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, 3, e); } else { owner.onEv; }});}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, 3, e); } else { owner.onEv; }});}};});
        c1.push(pvnode);
        w3.__owl__.pvnode = pvnode;
    }
@@ -533,7 +533,7 @@ exports[`other directives with t-component t-on with handler bound to empty obje
        let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
        let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, {}, e); } else { owner.onEv; }});}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, {}, e); } else { owner.onEv; }});}};});
        c1.push(pvnode);
        w3.__owl__.pvnode = pvnode;
    }
@@ -574,7 +574,7 @@ exports[`other directives with t-component t-on with handler bound to empty obje
        let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
        let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, {}, e); } else { owner.onEv; }});}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, {}, e); } else { owner.onEv; }});}};});
        c1.push(pvnode);
        w3.__owl__.pvnode = pvnode;
    }
@@ -615,7 +615,7 @@ exports[`other directives with t-component t-on with handler bound to object 1`]
        let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
        let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, {val:3}, e); } else { owner.onEv; }});}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, {val:3}, e); } else { owner.onEv; }});}};});
        c1.push(pvnode);
        w3.__owl__.pvnode = pvnode;
    }
@@ -660,7 +660,7 @@ exports[`other directives with t-component t-on with inline statement 1`] = `
        let def3 = w4.__prepare(extra.fiber, undefined, undefined, sibling);
        let pvnode = h('dummy', {key: templateId4, hook: {insert(vn) { let nvn=w4.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});
        const fiber = w4.__owl__.currentFiber;
-        def3.then(function () {if (w4.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['state.counter++'];if (fn) { fn.call(owner, e); } else { owner.state.counter++; }});}};});
+        def3.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['state.counter++'];if (fn) { fn.call(owner, e); } else { owner.state.counter++; }});}};});
        c1.push(pvnode);
        w4.__owl__.pvnode = pvnode;
    }
@@ -701,7 +701,7 @@ exports[`other directives with t-component t-on with no handler (only modifiers)
        let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
        let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, e); } else { owner.onEv; }});}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, e); } else { owner.onEv; }});}};});
        c1.push(pvnode);
        w3.__owl__.pvnode = pvnode;
    }
@@ -742,7 +742,7 @@ exports[`other directives with t-component t-on with prevent and self modifiers
        let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
        let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {e.preventDefault();if (e.target !== vn.elm) {return}const fn = owner['onEv'];if (fn) { fn.call(owner, e); } else { owner.onEv; }});}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {e.preventDefault();if (e.target !== vn.elm) {return}const fn = owner['onEv'];if (fn) { fn.call(owner, e); } else { owner.onEv; }});}};});
        c1.push(pvnode);
        w3.__owl__.pvnode = pvnode;
    }
@@ -783,7 +783,7 @@ exports[`other directives with t-component t-on with self and prevent modifiers
        let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
        let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (e.target !== vn.elm) {return}e.preventDefault();const fn = owner['onEv'];if (fn) { fn.call(owner, e); } else { owner.onEv; }});}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (e.target !== vn.elm) {return}e.preventDefault();const fn = owner['onEv'];if (fn) { fn.call(owner, e); } else { owner.onEv; }});}};});
        c1.push(pvnode);
        w3.__owl__.pvnode = pvnode;
    }
@@ -824,7 +824,7 @@ exports[`other directives with t-component t-on with self modifier 1`] = `
        let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
        let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {const fn = owner['onEv1'];if (fn) { fn.call(owner, e); } else { owner.onEv1; }});vn.elm.addEventListener('ev-2', function (e) {if (e.target !== vn.elm) {return}const fn = owner['onEv2'];if (fn) { fn.call(owner, e); } else { owner.onEv2; }});}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {const fn = owner['onEv1'];if (fn) { fn.call(owner, e); } else { owner.onEv1; }});vn.elm.addEventListener('ev-2', function (e) {if (e.target !== vn.elm) {return}const fn = owner['onEv2'];if (fn) { fn.call(owner, e); } else { owner.onEv2; }});}};});
        c1.push(pvnode);
        w3.__owl__.pvnode = pvnode;
    }
@@ -865,7 +865,7 @@ exports[`other directives with t-component t-on with stop and/or prevent modifie
        let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
        let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {e.stopPropagation();const fn = owner['onEv1'];if (fn) { fn.call(owner, e); } else { owner.onEv1; }});vn.elm.addEventListener('ev-2', function (e) {e.preventDefault();const fn = owner['onEv2'];if (fn) { fn.call(owner, e); } else { owner.onEv2; }});vn.elm.addEventListener('ev-3', function (e) {e.stopPropagation();e.preventDefault();const fn = owner['onEv3'];if (fn) { fn.call(owner, e); } else { owner.onEv3; }});}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {e.stopPropagation();const fn = owner['onEv1'];if (fn) { fn.call(owner, e); } else { owner.onEv1; }});vn.elm.addEventListener('ev-2', function (e) {e.preventDefault();const fn = owner['onEv2'];if (fn) { fn.call(owner, e); } else { owner.onEv2; }});vn.elm.addEventListener('ev-3', function (e) {e.stopPropagation();e.preventDefault();const fn = owner['onEv3'];if (fn) { fn.call(owner, e); } else { owner.onEv3; }});}};});
        c1.push(pvnode);
        w3.__owl__.pvnode = pvnode;
    }
@@ -925,7 +925,7 @@ exports[`random stuff/miscellaneous snapshotting compiled code 1`] = `
        let def3 = w4.__prepare(extra.fiber, undefined, undefined, sibling);
        let pvnode = h('dummy', {key: templateId4, hook: {insert(vn) { let nvn=w4.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});
        const fiber = w4.__owl__.currentFiber;
-        def3.then(function () {if (w4.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        def3.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
        c1.push(pvnode);
        w4.__owl__.pvnode = pvnode;
    }
@@ -983,7 +983,7 @@ exports[`random stuff/miscellaneous t-on with handler bound to dynamic argument
            let def6 = w7.__prepare(extra.fiber, undefined, undefined, sibling);
            let pvnode = h('dummy', {key: templateId7, hook: {insert(vn) { let nvn=w7.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w7.destroy();}}});
            const fiber = w7.__owl__.currentFiber;
-            def6.then(function () {if (w7.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, arg9, e); } else { owner.onEv; }});}};});
+            def6.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, arg9, e); } else { owner.onEv; }});}};});
            c1.push(pvnode);
            w7.__owl__.pvnode = pvnode;
        }
@@ -1231,7 +1231,7 @@ exports[`t-slot directive can define and call slots 1`] = `
        let def2 = w3.__prepare(extra.fiber, {}, undefined, sibling);
        let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
        c1.push(pvnode);
        w3.__owl__.pvnode = pvnode;
    }
@@ -1477,7 +1477,7 @@ exports[`t-slot directive slots are rendered with proper context, part 2 2`] = `
            let def8 = w9.__prepare(extra.fiber, Object.assign({}, scope), undefined, sibling);
            let pvnode = h('dummy', {key: templateId9, hook: {insert(vn) { let nvn=w9.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w9.destroy();}}});
            const fiber = w9.__owl__.currentFiber;
-            def8.then(function () {if (w9.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            def8.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
            c7.push(pvnode);
            w9.__owl__.pvnode = pvnode;
        }
@@ -1581,7 +1581,7 @@ exports[`t-slot directive slots are rendered with proper context, part 3 2`] = `
            let def9 = w10.__prepare(extra.fiber, Object.assign({}, scope), {_8}, sibling);
            let pvnode = h('dummy', {key: templateId10, hook: {insert(vn) { let nvn=w10.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w10.destroy();}}});
            const fiber = w10.__owl__.currentFiber;
-            def9.then(function () {if (w10.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            def9.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
            c7.push(pvnode);
            w10.__owl__.pvnode = pvnode;
        }
@@ -1639,7 +1639,7 @@ exports[`t-slot directive slots are rendered with proper context, part 4 1`] = `
        let def3 = w4.__prepare(extra.fiber, {}, {_2}, sibling);
        let pvnode = h('dummy', {key: templateId4, hook: {insert(vn) { let nvn=w4.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});
        const fiber = w4.__owl__.currentFiber;
-        def3.then(function () {if (w4.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        def3.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
        c1.push(pvnode);
        w4.__owl__.pvnode = pvnode;
    }
@@ -1714,7 +1714,7 @@ exports[`top level sub widgets basic use 1`] = `
        let def1 = w2.__prepare(extra.fiber, undefined, undefined, sibling);
        let pvnode = h('dummy', {key: templateId2, hook: {insert(vn) { let nvn=w2.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w2.destroy();}}});
        const fiber = w2.__owl__.currentFiber;
-        def1.then(function () {if (w2.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        def1.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
        utils.defineProxy(vn4, pvnode);
        w2.__owl__.pvnode = pvnode;
    }
@@ -1757,7 +1757,7 @@ exports[`top level sub widgets can select a sub widget  1`] = `
            let def1 = w2.__prepare(extra.fiber, undefined, undefined, sibling);
            let pvnode = h('dummy', {key: templateId2, hook: {insert(vn) { let nvn=w2.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w2.destroy();}}});
            const fiber = w2.__owl__.currentFiber;
-            def1.then(function () {if (w2.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            def1.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
            utils.defineProxy(vn4, pvnode);
            w2.__owl__.pvnode = pvnode;
        }
@@ -1787,7 +1787,7 @@ exports[`top level sub widgets can select a sub widget  1`] = `
            let def5 = w6.__prepare(extra.fiber, undefined, undefined, sibling);
            let pvnode = h('dummy', {key: templateId6, hook: {insert(vn) { let nvn=w6.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w6.destroy();}}});
            const fiber = w6.__owl__.currentFiber;
-            def5.then(function () {if (w6.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            def5.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
            utils.defineProxy(vn8, pvnode);
            w6.__owl__.pvnode = pvnode;
        }
@@ -32,7 +32,7 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
        let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
        let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
        c1.push(pvnode);
        w3.__owl__.pvnode = pvnode;
    }
@@ -91,6 +91,23 @@ describe("basic widget properties", () => {
    expect(fixture.innerHTML).toBe("<div>content</div>");
  });

+  test("display a nice message if mounted on a non existing node", async () => {
+    class SomeWidget extends Component<any, any> {
+      static template = xml`<div>content</div>`;
+    }
+    const widget = new SomeWidget();
+    let error;
+    try {
+      await widget.mount(null as any);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe(
+      "Component 'SomeWidget' cannot be mounted: the target is not a valid DOM node.\nMaybe the DOM is not ready yet? (in that case, you can use owl.utils.whenReady)"
+    );
+  });
+
  test("crashes if it cannot find a template", async () => {
    expect.assertions(1);
    class SomeWidget extends Component<any, any> {}
@@ -1061,94 +1078,6 @@ describe("composition", () => {
    console.error = consoleError;
  });

-  test("t-refs on widget are components", async () => {
-    class WidgetC extends Widget {
-      static template = xml`<div>Hello<WidgetB t-ref="mywidgetb" /></div>`;
-      static components = { WidgetB };
-      widget = useRef("mywidgetb");
-    }
-
-    const widget = new WidgetC();
-    await widget.mount(fixture);
-    expect(widget.widget.comp).toBeInstanceOf(WidgetB);
-  });
-
-  test("t-refs are bound at proper timing", async () => {
-    expect.assertions(2);
-    class ParentWidget extends Widget {
-      static template = xml`
-        <div>
-          <t t-foreach="state.list" t-as="elem" t-ref="child" t-key="elem" t-component="Widget"/>
-        </div>
-      `;
-      static components = { Widget };
-      state = useState({ list: <any>[] });
-      child = useRef("child");
-      willPatch() {
-        expect(this.child.comp).toBeNull();
-      }
-      patched() {
-        expect(this.child.comp).not.toBeNull();
-      }
-    }
-
-    const parent = new ParentWidget();
-    await parent.mount(fixture);
-    parent.state.list.push(1);
-    await nextTick();
-  });
-
-  test("t-refs are bound at proper timing (2)", async () => {
-    expect.assertions(10);
-    env.qweb.addTemplate(
-      "ParentWidget",
-      `
-        <div>
-          <t t-if="state.child1" t-ref="child1" t-component="Widget"/>
-          <t t-if="state.child2" t-ref="child2" t-component="Widget"/>
-        </div>`
-    );
-    class ParentWidget extends Widget {
-      static components = { Widget };
-      state = useState({ child1: true, child2: false });
-      child1 = useRef("child1");
-      child2 = useRef("child2");
-      count = 0;
-      mounted() {
-        expect(this.child1.comp).toBeDefined();
-        expect(this.child2.comp).toBeNull();
-      }
-      willPatch() {
-        if (this.count === 0) {
-          expect(this.child1.comp).toBeDefined();
-          expect(this.child2.comp).toBeNull();
-        }
-        if (this.count === 1) {
-          expect(this.child1.comp).toBeDefined();
-          expect(this.child2.comp).toBeDefined();
-        }
-      }
-      patched() {
-        if (this.count === 0) {
-          expect(this.child1.comp).toBeDefined();
-          expect(this.child2.comp).toBeDefined();
-        }
-        if (this.count === 1) {
-          expect(this.child1.comp).toBeNull();
-          expect(this.child2.comp).toBeDefined();
-        }
-        this.count++;
-      }
-    }
-
-    const parent = new ParentWidget();
-    await parent.mount(fixture);
-    parent.state.child2 = true;
-    await nextTick();
-    parent.state.child1 = false;
-    await nextTick();
-  });
-
  test("modifying a sub widget", async () => {
    env.qweb.addTemplate("ParentWidget", `<div><t t-component="Counter"/></div>`);
    class ParentWidget extends Widget {
@@ -3372,6 +3301,68 @@ describe("async rendering", () => {
    await nextTick();
    expect(fixture.innerHTML).toBe("<div>a2<b>a2</b><p><span>a2b2</span></p></div>");
  });
+
+  test("concurrent renderings scenario 10", async () => {
+    // Here is the global idea of this scenario:
+    //       A
+    //       |
+    //       B    <- async willUpdateProps
+    //     -----  <- conditional (initialy false)
+    //       |
+    //       C    <- async willStart
+    // Render A and B normally
+    // Change the condition on B to trigger a re-rendering with C (async willStart)
+    // Change the state on A to trigger a global re-rendering, which is blocked
+    // in B (async willUpdateProps)
+    // Resolve the willStart of C: the first re-rendering has been cancelled by
+    // the global re-rendering, but handlers waiting for the rendering promise to
+    // resolve might execute and we don't want them to crash/do anything
+    const defB = makeDeferred();
+    const defC = makeDeferred();
+    let stateB;
+    class ComponentC extends Component<any, any> {
+      static template = xml`<span><t t-esc="props.value"/></span>`;
+      willStart() {
+        return defC;
+      }
+    }
+    ComponentC.prototype.__render = jest.fn(ComponentC.prototype.__render);
+    class ComponentB extends Component<any, any> {
+      static template = xml`<p><ComponentC t-if="state.hasChild" value="props.value"/></p>`;
+      state = useState({ hasChild: false });
+      static components = { ComponentC };
+      constructor(parent, props) {
+        super(parent, props);
+        stateB = this.state;
+      }
+      willUpdateProps() {
+        return defB;
+      }
+    }
+    class ComponentA extends Component<any, any> {
+      static template = xml`<div><ComponentB value="state.value"/></div>`;
+      static components = { ComponentB };
+      state = useState({ value: 1 });
+    }
+
+    const componentA = new ComponentA();
+    await componentA.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><p></p></div>");
+
+    stateB.hasChild = true;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><p></p></div>");
+
+    componentA.state.value = 2;
+    defC.resolve();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><p></p></div>");
+
+    defB.resolve();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><p><span>2</span></p></div>");
+    expect(ComponentC.prototype.__render).toHaveBeenCalledTimes(1);
+  });
 });

 describe("widget and observable state", () => {
@@ -4894,10 +4885,8 @@ describe("unmounting and remounting", () => {
    expect(fixture.innerHTML).toBe("<div>1</div>");
    widget.unmount();
    expect(fixture.innerHTML).toBe("");
+    await nextTick(); // wait for changes to be detected before remounting
    await widget.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div>1</div>");
-    widget.unmount();
-    await widget.mount(fixture, true);
    expect(fixture.innerHTML).toBe("<div>3</div>");
  });
 });
@@ -240,7 +240,7 @@ describe("props validation", () => {
      error = e;
    }
    expect(error).toBeDefined();
-    expect(error.message).toBe(`Props 'p' of invalid type in component 'TestWidget'`);
+    expect(error.message).toBe("Props 'p' of invalid type in component 'TestWidget'");
  });

  test("can validate an optional props", async () => {
@@ -425,7 +425,8 @@ describe("props validation", () => {
    } catch (e) {
      error = e;
    }
-    expect(error).toBeUndefined();
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Invalid prop 'p' in component TestWidget (unknown prop 'extra')");

    try {
      props = { p: { id: "1", url: "url" } };
@@ -501,6 +502,39 @@ describe("props validation", () => {
    expect(error.message).toBe(`Props 'p' of invalid type in component 'TestWidget'`);
  });

+  test("can validate optional attributes in nested sub props", () => {
+    class TestComponent extends Component<any, any> {
+      static props = {
+        myprop: {
+          type: Array,
+          element: {
+            type: Object,
+            shape: {
+              num: { type: Number, optional: true }
+            }
+          }
+        }
+      };
+    }
+    let error;
+    try {
+      QWeb.utils.validateProps(TestComponent, { myprop: [{}] });
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeUndefined();
+
+    try {
+      QWeb.utils.validateProps(TestComponent, { myprop: [{ a: 1 }] });
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe(
+      "Invalid prop 'myprop' in component TestComponent (unknown prop 'a')"
+    );
+  });
+
  test("props are validated in dev mode (code snapshot)", async () => {
    env.qweb.addTemplates(`
      <templates>
@@ -228,8 +228,11 @@ describe("hooks", () => {
      }
    }
    const counter = new Counter();
+    expect(counter.button.el).toBe(null);
    await counter.mount(fixture);
    expect(fixture.innerHTML).toBe("<div><button>0</button></div>");
+    expect(counter.button.el).not.toBe(null);
+    expect(counter.button.el).toBe(fixture.querySelector("button"));
    counter.increment();
    await nextTick();
    expect(fixture.innerHTML).toBe("<div><button>1</button></div>");
@@ -256,6 +259,104 @@ describe("hooks", () => {
    expect(fixture.innerHTML).toBe("<div></div>");
  });

+  test("t-refs on widget are components", async () => {
+    class WidgetB extends Component<any, any> {
+      static template = xml`<div>b</div>`;
+    }
+    class WidgetC extends Component<any, any> {
+      static template = xml`<div class="outer-div">Hello<WidgetB t-ref="mywidgetb" /></div>`;
+      static components = { WidgetB };
+      ref = useRef("mywidgetb");
+    }
+
+    const widget = new WidgetC();
+    expect(widget.ref.comp).toBe(null);
+    expect(widget.ref.el).toBe(null);
+    await widget.mount(fixture);
+    expect(widget.ref.comp).toBeInstanceOf(WidgetB);
+    expect(widget.ref.el).toEqual(fixture.querySelector(".outer-div > div"));
+  });
+
+  test("t-refs are bound at proper timing", async () => {
+    expect.assertions(2);
+    class Widget extends Component<any, any> {
+      static template = xml`<div>widget</div>`;
+    }
+
+    class ParentWidget extends Component<any, any> {
+      static template = xml`
+        <div>
+          <t t-foreach="state.list" t-as="elem" t-ref="child" t-key="elem" t-component="Widget"/>
+        </div>
+      `;
+      static components = { Widget };
+      state = useState({ list: <any>[] });
+      child = useRef("child");
+      willPatch() {
+        expect(this.child.comp).toBeNull();
+      }
+      patched() {
+        expect(this.child.comp).not.toBeNull();
+      }
+    }
+
+    const parent = new ParentWidget();
+    await parent.mount(fixture);
+    parent.state.list.push(1);
+    await nextTick();
+  });
+
+  test("t-refs are bound at proper timing (2)", async () => {
+    expect.assertions(10);
+    class Widget extends Component<any, any> {
+      static template = xml`<div>widget</div>`;
+    }
+    class ParentWidget extends Component<any, any> {
+      static template = xml`
+        <div>
+          <t t-if="state.child1" t-ref="child1" t-component="Widget"/>
+          <t t-if="state.child2" t-ref="child2" t-component="Widget"/>
+        </div>`;
+      static components = { Widget };
+      state = useState({ child1: true, child2: false });
+      child1 = useRef("child1");
+      child2 = useRef("child2");
+      count = 0;
+      mounted() {
+        expect(this.child1.comp).toBeDefined();
+        expect(this.child2.comp).toBeNull();
+      }
+      willPatch() {
+        if (this.count === 0) {
+          expect(this.child1.comp).toBeDefined();
+          expect(this.child2.comp).toBeNull();
+        }
+        if (this.count === 1) {
+          expect(this.child1.comp).toBeDefined();
+          expect(this.child2.comp).toBeDefined();
+        }
+      }
+      patched() {
+        if (this.count === 0) {
+          expect(this.child1.comp).toBeDefined();
+          expect(this.child2.comp).toBeDefined();
+        }
+        if (this.count === 1) {
+          expect(this.child1.comp).toBeNull();
+          expect(this.child2.comp).toBeDefined();
+        }
+        this.count++;
+      }
+    }
+
+    const parent = new ParentWidget();
+    await parent.mount(fixture);
+    parent.state.child2 = true;
+    await nextTick();
+    parent.state.child1 = false;
+    await nextTick();
+  });
+
  test("can use onPatched, onWillPatch", async () => {
    const steps: string[] = [];
    function useMyHook() {
@@ -35,7 +35,7 @@ exports[`RouteComponent can render simple cases 1`] = `
            let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
            let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
            const fiber = w3.__owl__.currentFiber;
-            def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
            utils.defineProxy(vn5, pvnode);
            w3.__owl__.pvnode = pvnode;
        }
@@ -48,6 +48,22 @@ describe("connecting a component to store", () => {
    expect(fixture.innerHTML).toBe("<div><span>hello</span></div>");
  });

+  test("throw error if no store is found", async () => {
+    class App extends Component<any, any> {
+      static template = xml`<div></div>`;
+      todos = useStore(state => state.todos);
+    }
+
+    let error;
+    try {
+      new App();
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe("No store found when connecting 'App'");
+  });
+
  test("can use useStore twice in a component", async () => {
    const state = { a: 1, b: 2 };
    const actions = {
@@ -70,13 +70,9 @@ if __name__ == "__main__":
 /**
 * Make an iframe, with all the js, css and xml properly injected.
 */
-function makeCodeIframe(js, css, xml, errorHandler) {
-  // check templates
-  var qweb = new owl.QWeb();
+function makeCodeIframe(js, css, xml) {
  const sanitizedXML = xml.replace(/<!--[\s\S]*?-->/g, "");

-  // will throw error if there is something wrong with xml
-  qweb.addTemplates(sanitizedXML);

  // create iframe
  const iframe = document.createElement("iframe");
@@ -92,21 +88,13 @@ function makeCodeIframe(js, css, xml, errorHandler) {
      script.type = "text/javascript";
      const content = `
        {
-          owl.__info__.mode = 'dev';
+          owl.config.mode = 'dev';
          let templates = \`${sanitizedXML}\`;
          const qweb = new owl.QWeb({ templates });
          owl.Component.env = { qweb };
        }
        ${js}`;
      script.innerHTML = content;
-      iframe.contentWindow.addEventListener("error", errorHandler);
-      iframe.contentWindow.addEventListener("unhandledrejection", errorHandler);
-      setTimeout(function() {
-        if (iframe.contentWindow) {
-          iframe.contentWindow.removeEventListener("error", errorHandler);
-          iframe.contentWindow.removeEventListener("unhandledrejection", errorHandler);
-        }
-      }, 200);
      doc.body.appendChild(script);
    });
    doc.head.appendChild(owlScript);
@@ -317,7 +305,6 @@ class App extends owl.Component {
      js: this.SAMPLES[0].code,
      css: this.SAMPLES[0].css || "",
      xml: this.SAMPLES[0].xml || DEFAULT_XML,
-      error: false,
      displayWelcome: true,
      splitLayout: true,
      leftPaneWidth: Math.ceil(window.innerWidth / 2),
@@ -330,37 +317,12 @@ class App extends owl.Component {
    this.content = useRef("content");
  }

-  displayError(error) {
-    this.state.error = error;
-    if (error) {
-      setTimeout(() => {
-        this.content.el.innerHTML = "";
-      });
-      return;
-    }
-  }
-
  runCode() {
-    this.state.displayWelcome = false;
-    let subiframe;
-    let error = false;
-    const errorHandler = e => this.displayError(e.message || e.reason.message);
-    try {
-      const { js, css, xml } = this.state;
-      subiframe = makeCodeIframe(js, css, xml, errorHandler);
-    } catch (e) {
-      //probably problem with the templates
-      error = e;
-      // we still log the error, always useful to have it available
-      console.error(e);
-    }
-    if (error) {
-      this.displayError(error.message);
-      return;
-    } else {
-      this.state.error = false;
-    }
    this.content.el.innerHTML = "";
+    this.state.displayWelcome = false;
+
+    const { js, css, xml } = this.state;
+    const subiframe = makeCodeIframe(js, css, xml);
    this.content.el.appendChild(subiframe);
  }

@@ -179,16 +179,3 @@ body {
  padding: 5%;
 }

-.right-pane .error {
-  height: 100%;
-  width: 90%;
-  padding-top: 30%;
-  font-size: 18px;
-  color: darkred;
-  margin-left: 5%;
-}
-
-.right-pane .error pre {
-    overflow: auto;
-    width: 100%;
-}
@@ -51,10 +51,6 @@
            </p>
          </div>
        </div>
-        <div t-if="state.error" class="error">
-          <h3>Error</h3>
-          <pre t-esc="state.error"/>
-        </div>
        <div class="content" t-ref="content"/>
      </div>
  </div>
Author	SHA1	Message	Date
Géry Debongnie	d249f50d09	[REL] v1.0.0-alpha3	2019-11-13 15:43:47 +01:00
Géry Debongnie	749f0063ea	[FIX] component: properly validate optional types in objects closes #440	2019-11-13 15:36:46 +01:00
Géry Debongnie	263f31fea9	[DOC] miscellaneous improvements including: - add a link to the tutorial in the main readme page - remove learning page on 'env', move content on reference page - add dynamic sub components section in component page - add reference page on props - split qweb page into engine/language pages - move t-key information into qweb language page	2019-11-13 08:49:25 +01:00
Géry Debongnie	b891ae7de4	[REM] tools: remove error handling in playground There was some code to attempt to display the error in the right pane, whenever it occured in the app early phase. However, it made it much harder to properly handle all cases. It could silently swallow some errors (if more than one was done), And it was not behaving the same way in Firefox and in Chrome.	2019-11-13 08:49:25 +01:00
Géry Debongnie	c5a80497ac	[FIX] tooling: properly set playground in dev mode It was not in dev mode since changes to config system	2019-11-13 08:49:25 +01:00
Aaron Bohy	e47f604449	[FIX] component: concurrent rendering issue Resolved rendering with cancelled fiber for (not yet) destroyed component -> Cannot read property 'sel' of null Closes #421	2019-11-12 10:01:12 +01:00
Aaron Bohy	7e721a96b5	[IMP] hooks: useRef on component: set el anyway Closes #437	2019-11-06 17:06:37 +01:00
Aaron Bohy	af4f372506	[REF] component: mount: remove renderBeforeRemount option Re-render the component all the time before remounting it, which seems safer anyway. In the test, we had to add a nextTick to wait for the changes to be notified (before, we waited thanks to the additional call to mount). If we don't do the nextTick, mount is called, and render is called right after (before the promise returned by mount is resolved). This scenario doesn't work right now (see #441). Closes #381	2019-11-06 16:26:12 +01:00
Aaron Bohy	5731358607	[IMP] component: expose scheduler instance Closes #433	2019-11-05 15:11:13 +01:00
Géry Debongnie	1226f015d7	[DOC] add a tutorial (TodoApp)	2019-11-04 16:50:16 +01:00
Géry Debongnie	b211e75140	[IMP] store: display error if no store found	2019-11-04 08:41:29 +01:00
Géry Debongnie	8d1dd06340	[IMP] component: error when mounted on invalid target	2019-11-04 08:41:29 +01:00