[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-alpha3.js](https://github.com/odoo/owl/releases/download/v1.0.0-alpha3/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.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.
+  Note that if a component is mounted, unmounted and remounted, it will be
-  In that case, we may want to rerender the component _before_ it is remounted, if
+  automatically re-rendered to ensure that changes in its state (or something
-  we know that its state (or something in the environment, or ...) has changed.
+  in the environment, or in the store, or ...) will be taken into account.
  In that case, it should simply set to `true`.
 - **`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.
+the sub component will also be updated automatically. See the [props section](props.md)
-
+for more information.
 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.
 **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
+The environment is mostly static. Each application is free to add anything to
-can be found in the [learning section](../learning/environment.md).
+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`
+Notes:
-variable between `willPatch` and `patched`.
+
 - 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
+Template directives are specified as XML attributes prefixed with `t-`, for
-with a few interesting points:
+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
+To avoid element rendering, a placeholder element `<t>` is also available, which
-  string. This is necessary for the component system.
+executes its directive but doesn’t generate any output in and of itself.
- it has a few extra directives: `t-component`, `t-on`, ...
+
 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                                                  |
+| Name                           | Description                                                    |
-| ------------------------------ | ------------------------------------------------------------ |
+| ------------------------------ | -------------------------------------------------------------- |
-| `t-esc`                        | [Outputting safely a value](#outputting-data)                |
+| `t-esc`                        | [Outputting safely a value](#outputting-data)                  |
-| `t-raw`                        | [Outputting value, without escaping](#outputting-data)       |
+| `t-raw`                        | [Outputting value, without escaping](#outputting-data)         |
-| `t-set`, `t-value`             | [Setting variables](#setting-variables)                      |
+| `t-set`, `t-value`             | [Setting variables](#setting-variables)                        |
-| `t-if`, `t-elif`, `t-else`,    | [conditionally rendering](#conditionals)                     |
+| `t-if`, `t-elif`, `t-else`,    | [conditionally rendering](#conditionals)                       |
-| `t-foreach`, `t-as`            | [Loops](#loops)                                              |
+| `t-foreach`, `t-as`            | [Loops](#loops)                                                |
-| `t-att`, `t-attf-*`, `t-att-*` | [Dynamic attributes](#dynamic-attributes)                    |
+| `t-att`, `t-attf-*`, `t-att-*` | [Dynamic attributes](#dynamic-attributes)                      |
-| `t-call`                       | [Rendering sub templates](#rendering-sub-templates)          |
+| `t-call`                       | [Rendering sub templates](#rendering-sub-templates)            |
-| `t-debug`, `t-log`             | [Debugging](#debugging)                                      |
+| `t-debug`, `t-log`             | [Debugging](#debugging)                                        |
-| `t-translation`                | [Disabling the translation of a node](#translations)         |
+| `t-translation`                | [Disabling the translation of a node](#translations)           |
-| `t-name`                       | [Defining a template (not really a directive)](#qweb-engine) |
+| `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                                                                         |
+| Name                     | Description                                                                     |
-| ------------------------ | ----------------------------------------------------------------------------------- |
+| ------------------------ | ------------------------------------------------------------------------------- |
-| `t-component`, `t-props` | [Defining a sub component](component.md#composition)                                |
+| `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-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-key`                  | [Defining a key (to help virtual dom reconciliation)](#loops)                   |
-| `t-on-*`                 | [Event handling](component.md#event-handling)                                       |
+| `t-on-*`                 | [Event handling](component.md#event-handling)                                   |
-| `t-transition`           | [Defining an animation](animations.md#css-transitions)                              |
+| `t-transition`           | [Defining an animation](animations.md#css-transitions)                          |
-| `t-slot`                 | [Rendering a slot](component.md#slots)                                              |
+| `t-slot`                 | [Rendering a slot](component.md#slots)                                          |
-| `t-model`                | [Form input bindings](component.md#form-input-bindings)                             |
+| `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).
 ## 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
+Even though Owl tries to be as declarative as possible, the DOM does not fully
-updated, and reuse as much of the previous DOM as possible. Loops offer a specific
+expose its state declaratively in the DOM tree. For example, the scrolling state,
-problem for this usecase: how does the template engine know if two rows have
+the current user selection, the focused element or the state of an input are not
-been swapped, or if the content of these rows was changed? To help Owl with that,
+set as attribute in the DOM tree. This is why we use a virtual dom
-there is an additional directive: [`t-key`](component.md#t-key-directive).
+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">
+<p t-foreach="items" t-as="item"><t t-esc="item.text"/></p>
-    <t t-esc="thing.content"/>
+```
 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
+By default, QWeb specify that templates should be translated. If this behaviour
-so, it needs a translate function, which takes a string and returns a string.
+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:
 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`,
@@ -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:
+See [here](qweb_engine.md#translations) for more information on how to setup a
-
+translate function in Owl QWeb.
 ```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.
 ### 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) {
+    if (!(target instanceof HTMLElement)) {
-      target.appendChild(this.el!);
+      let message = `Component '${this.constructor.name}' cannot be mounted: the target is not a valid DOM node.`;
-      if (document.body.contains(target)) {
+      message += `\nMaybe the DOM is not ready yet? (in that case, you can use owl.utils.whenReady)`;
-        this.__callMounted();
+      throw new Error(message);
      }
      return;
    }
    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) {
+function makeCodeIframe(js, css, xml) {
  // check templates
  var qweb = new owl.QWeb();
  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