wip

[IMP] tooling: add debug code
closes #521
2025-10-06 19:59:41 +07:00 · 2019-12-02 13:18:50 +01:00 · 2019-12-02 09:03:48 +01:00 · 2019-12-02 08:55:12 +01:00 · 2019-11-29 16:11:34 +01:00 · 2019-11-29 15:13:37 +01:00
42 changed files with 2151 additions and 1013 deletions
@@ -1,10 +1,10 @@
 <h1 align="center">🦉 <a href="https://odoo.github.io/owl/">Odoo Web Library</a> 🦉</h1>

-_A no nonsense web framework for structured, dynamic and maintainable applications_
+_Class based components with hooks, reactive state and concurrent mode_

 ## Project Overview

-The Odoo Web Library (OWL) is a smallish (~18kb gzipped) UI framework intended to
+The Odoo Web Library (OWL) is a smallish (~<20kb gzipped) UI framework intended to
 be the basis for the [Odoo](https://www.odoo.com/) Web Client. Owl is a modern
 framework, written in Typescript, taking the best ideas from React and Vue in a
 simple and consistent way. Owl's main features are:
@@ -104,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-alpha4.js](https://github.com/odoo/owl/releases/download/v1.0.0-alpha3/owl.js)
- [owl-1.0.0-alpha4.min.js](https://github.com/odoo/owl/releases/download/v1.0.0-alpha3/owl.min.js)
+- [owl-1.0.0-alpha5.js](https://github.com/odoo/owl/releases/download/v1.0.0-alpha5/owl.js)
+- [owl-1.0.0-alpha5.min.js](https://github.com/odoo/owl/releases/download/v1.0.0-alpha5/owl.min.js)

 Some npm scripts are available:

@@ -0,0 +1,132 @@
+# 🦉 Testing Owl components 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Unit Tests](#unit-tests)
+
+## Overview
+
+It is a good practice to test applications and components to ensure that they
+behave as expected. There are many ways to test a user interface: manual
+testing, integration testing, unit testing, ...
+
+In this section, we will discuss how to write unit tests for components, and
+how to debug them if necessary.
+
+## Unit Tests
+
+Writing unit tests for Owl components really depends on the testing framework
+used in a project. But usually, it involves the following steps:
+
+- create a test file: for example `SomeComponent.test.js`,
+- in that file, import the code for `SomeComponent`,
+- add a test case:
+  - create a real DOM element to use as test fixture,
+  - create a test environment
+  - create an instance of `SomeComponent`, mount it to the fixture
+  - interact with the component and assert some properties.
+
+To help with this, it is useful to have a `helper.js` file that contains some
+common utility functions:
+
+```js
+export function makeTestFixture() {
+  let fixture = document.createElement("div");
+  document.body.appendChild(fixture);
+  return fixture;
+}
+
+export function nextTick() {
+  let requestAnimationFrame = owl.Component.scheduler.requestAnimationFrame;
+  return new Promise(function(resolve) {
+    setTimeout(() => requestAnimationFrame(() => resolve()));
+  });
+}
+
+export function makeTestEnv() {
+    // application specific. It needs a way to load actual templates
+    const templates = ...;
+
+    return {
+        qweb: new QWeb(templates),
+        ..., // each service can be mocked here
+    };
+}
+```
+
+With such a file, a typical test suite for Jest will look like this:
+
+```js
+// in SomeComponent.test.js
+import { SomeComponent } from "../../src/ui/SomeComponent";
+import { nextTick, makeTestFixture, makeTestEnv} from '../helpers';
+
+
+//------------------------------------------------------------------------------
+// Setup
+//------------------------------------------------------------------------------
+let fixture: HTMLElement;
+let env: Env;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+  env = makeTestEnv();
+  // we set here the default environment for each component created in the test
+  Component.env = env;
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+describe("SomeComponent", () => {
+  test("component behaves as expected", async () => {
+    const props = {...}; // depends on the component
+    const comp = new SomeComponent(null, props);
+    await comp.mount(fixture);
+
+    // do some assertions
+    expect(...).toBe(...);
+
+    fixture.querySelector('button').click();
+    await nextTick();
+
+    // some other assertions
+    expect(...).toBe(...);
+  });
+});
+```
+
+Note that Owl does wait for the next animation frame to actually update the DOM.
+This is why it is necessary to wait with the `nextTick` (or other methods) to
+make sure that the DOM is up-to-date.
+
+It is sometimes useful to wait until Owl is completely done updating components
+(in particular, if we have a highly concurrent user interface). This next
+helper simply polls every 20ms the internal Owl task queue and returns a promise
+which resolves when it is empty:
+
+```js
+function afterUpdates() {
+  return new Promise((resolve, reject) => {
+    let timer = setTimeout(poll, 20);
+    let counter = 0;
+    function poll() {
+      counter++;
+      if (owl.Component.scheduler.tasks.length) {
+        if (counter > 10) {
+          reject(new Error("timeout"));
+        } else {
+          timer = setTimeout(poll);
+        }
+      } else {
+        resolve();
+      }
+    }
+  });
+}
+```
@@ -297,7 +297,7 @@ A lot of stuff happened here:
 - the `Task` component has a `props` key: this is only useful for validation
  purpose. It says that each `Task` should be given exactly one prop, named
  `task`. If this is not the case, Owl will throw an
-  [error](../reference/component.md#props-validation). This is extremely
+  [error](../reference/props_validation.md). This is extremely
  useful when refactoring components
 - finally, to activate the props validation, we need to set Owl's
  [mode](../reference/config.md#mode) to `dev`. This is done in the `setup`
@@ -4,6 +4,7 @@

 - [Animations](reference/animations.md)
 - [Component](reference/component.md)
+- [Concurrency Model](reference/concurrency_model.md)
 - [Configuration](reference/config.md)
 - [Context](reference/context.md)
 - [Environment](reference/environment.md)
@@ -12,6 +13,7 @@
 - [Miscellaneous Components](reference/misc.md)
 - [Observer](reference/observer.md)
 - [Props](reference/props.md)
+- [Props Validation](reference/props_validation.md)
 - [QWeb Templating Language](reference/qweb_templating_language.md)
 - [QWeb Engine](reference/qweb_engine.md)
 - [Router](reference/router.md)
@@ -23,6 +25,7 @@

 - [Quick Start: create an (almost) empty Owl application](learning/quick_start.md)
 - [Tutorial: create a TodoList application](learning/tutorial_todoapp.md)
+- [Testing Owl components](learning/testing_components.md)

 ## Miscellaneous

@@ -14,12 +14,9 @@
  - [Composition](#composition)
  - [Event Handling](#event-handling)
  - [Form Input Bindings](#form-input-bindings)
-  - [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)
  - [SVG components](#svg-components)
@@ -204,7 +201,7 @@ to be called in the constructor.
 * **`props`** (Object, optional): if given, this is an object that describes the
  type and shape of the (actual) props given to the component. If Owl mode is
  `dev`, this will be used to validate the props each time the component is
-  created/updated. See [Props Validation](#props-validation) for more information.
+  created/updated. See [Props Validation](props_validation.md) for more information.

  ```js
  class Counter extends owl.Component {
@@ -239,7 +236,7 @@ We explain here all the public methods of the `Component` class.

 - **`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
+  HTMLElement (or document fragment). 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.

@@ -247,6 +244,20 @@ We explain here all the public methods of the `Component` class.
  automatically re-rendered to ensure that changes in its state (or something
  in the environment, or in the store, or ...) will be taken into account.

+  If a component is mounted inside an element or a fragment which is not in the
+  DOM, then it will be rendered fully, but not active: the `mounted` hooks will
+  not be called. This is sometimes useful if we want to load an application in
+  memory. In that case, we need to mount the root component again in an element
+  which is in the DOM:
+
+  ```js
+  const app = new App();
+  await app.mount(document.createDocumentFragment());
+  // app is rendered in memory, but not active
+  await app.mount(document.body);
+  // app is now visible
+  ```
+
 - **`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
  useful to the underlying component system.
@@ -731,188 +742,6 @@ update a number whenever the change is done.

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

-### Semantics
-
-We give here an informal description of the way components are created/updated
-in an application. Here, ordered lists describe actions that are executed
-sequentially, bullet lists describe actions that are executed in parallel.
-
-**Scenario 1: initial rendering** Imagine we want to render the following component tree:
-
-```
-        A
-       / \
-      B   C
-         / \
-        D   E
-```
-
-Here is what happen whenever we mount the root
-component (with some code like `app.mount(document.body)`).
-
-1. `willStart` is called on `A`
-
-2. when it is done, template `A` is rendered.
-
-   - component `B` is created
-     1. `willStart` is called on `B`
-     2. template `B` is rendered
-   - component `C` is created
-     1. `willStart` is called on `C`
-     2. template `C` is rendered
-        - component `D` is created
-          1. `willStart` is called on `D`
-          2. template `D` is rendered
-        - component `E` is created
-          1. `willStart` is called on `E`
-          2. template `E` is rendered
-
-3. component `A` is patched into a detached DOM element. This will create the actual
-   component `A` DOM structure. The patching process will cause recursively the
-   patching of the `B`, `C`, `D` and `E` DOM trees. (so the actual full DOM tree is created
-   in one pass)
-
-4. the component `A` root element is actually appended to `document.body`
-
-5. The method `mounted` is called recursively on all components in the following
-   order: `B`, `D`, `E`, `C`, `A`.
-
-**Scenario 2: rerendering a component**. Now, let's assume that the user clicked on some
-button in `C`, and this results in a state update, which is supposed to:
-
- update `D`,
- remove `E`,
- add new component `F`.
-
-So, the component tree should look like this:
-
-```
-        A
-       / \
-      B   C
-         / \
-        D   F
-```
-
-Here is what Owl will do:
-
-1. because of a state change, the method `render` is called on `C`
-2. template `C` is rendered again
-
-   - component `D` is updated:
-     1. hook `willUpdateProps` is called on `D` (async)
-     2. template `D` is rerendered
-   - component `F` is created:
-     1. hook `willStart` is called on `E` (async)
-     2. template `F` is rendered
-
-3. `willPatch` hooks are called recursively on components `C`, `D` (not on `F`,
-   because it is not mounted yet)
-
-4. component `C` is patched, which will cause recursively:
-
-   2. `willUnmount` hook on `E`, then destruction of `E`,
-   3. (initial) patching of `F`, then hook `mounted` is called on `F`
-
-5. patching of `D`
-
-6. `patched` hooks are called on `D`, `C`
-
-### Props Validation
-
-As an application becomes complex, it may be quite unsafe to define props in an informal way. This leads to two issues:
-
- 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 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)
- it is optional: it is ok for a component to not define a `props` key.
- props are validated whenever a component is created/updated
- props are only validated in `dev` mode (see [config page](config.md#mode))
- if a key does not match the description, an error is thrown
- it validates keys defined in (static) `props`. Additional keys given by the
-  parent will cause an error.
-
-For example:
-
-```js
-class ComponentA extends owl.Component {
-    static props = ['id', 'url'];
-
-    ...
-}
-
-class ComponentB extends owl.Component {
-  static props = {
-    count: {type: Number},
-    messages: {
-      type: Array,
-      element: {type: Object, shape: {id: Boolean, text: 'string' }
-    },
-   date: Date,
-   combinedVal: [Number, Boolean]
-  };
-
-  ...
-}
-```
-
- it is an object or a list of strings
- a list of strings is a simplified props definition, which only lists the name
-  of the props. Also, if the name ends with `?`, it is considered optional.
- all props are by default required, unless they are defined with `optional: true`
-  (in that case, validation is only done if there is a value)
- valid types are: `Number, String, Boolean, Object, Array, Date, Function`, and all
-  constructor functions (so, if you have a `Person` class, it can be used as a type)
- arrays are homogeneous (all elements have the same type/shape)
-
-For each key, a `prop` definition is either a boolean, a constructor, a list of constructors, or an object:
-
- a boolean: indicate that the props exists, and is mandatory.
- a constructor: this should describe the type, for example: `id: Number` describe
-  the props `id` as a number
- a list of constructors. In that case, this means that we allow more than one
-  type. For example, `id: [Number, String]` means that `id` can be either a string
-  or a number.
- an object. This makes it possible to have more expressive definition. The following sub keys are then allowed:
-  - `type`: the main type of the prop being validated
-  - `element`: if the type was `Array`, then the `element` key describes the type of each element in the array. It is optional (not set means that we only validate the array, not its elements),
-  - `shape`: if the type was `Object`, then the `shape` key describes the interface of the object. It is optional (not set means that we only validate the object, not its elements)
-
-Examples:
-
-```js
-  // only the existence of those 3 keys is documented
-  static props = ['message', 'id', 'date'];
-```
-
-```js
-  // size is optional
-  static props = ['message', 'size?'];
-```
-
-```js
-  static props = {
-    messageIds: {type: Array, element: Number},  // list of number
-    otherArr: {type: Array},   // just array. no validation is made on sub elements
-    otherArr2: Array,   // same as otherArr
-    someObj: {type: Object},  // just an object, no internal validation
-    someObj2: {
-      type: Object,
-      shape: {
-        id: Number,
-        name: {type: String, optional: true},
-        url: String
-      ]},    // object, with keys id (number), name (string, optional) and url (string)
-    someFlag: Boolean,     // a boolean, mandatory (even if `false`)
-    someVal: [Boolean, Date],   // either a boolean or a date
-    otherValue: true,     // indicates that it is a prop
-  };
-```
-
 ### References

 The `useRef` hook is useful when we need a way to interact with some inside part
@@ -1070,49 +899,6 @@ component class.

 Note that the `t-component` directive can only be used on `<t>` nodes.

-### Asynchronous Rendering
-
-Working with asynchronous code always adds a lot of complexity to a system. Whenever
-different parts of a system are active at the same time, one needs to think
-carefully about all possible interactions. Clearly, this is also true for Owl
-components.
-
-There are two different common problems with Owl asynchronous rendering model:
-
- any component can delay the rendering (initial and subsequent) of the whole
-  application
- for a given component, there are two independant situations that will trigger an
-  asynchronous rerendering: a change in the state, or a change in the props.
-  These changes may be done at different times, and Owl has no way of knowing
-  how to reconcile the resulting renderings.
-
-Here are a few tips on how to work with asynchronous components:
-
-1. Minimize the use of asynchronous components!
-2. Maybe move the asynchronous logic in a store, which then triggers (mostly)
-   synchronous renderings
-3. Lazy loading external libraries is a good use case for async rendering. This
-   is mostly fine, because we can assume that it will only takes a fraction of a
-   second, and only once (see [`owl.utils.loadJS`](utils.md#loadjs))
-4. For all the other cases, the [`AsyncRoot`](misc.md#asyncroot) component is there to help you. When
-   this component is met, a new rendering
-   sub tree is created, such that the rendering of that component (and its
-   children) is not tied to the rendering of the rest of the interface. It can
-   be used on an asynchronous component, to prevent it from delaying the
-   rendering of the whole interface, or on a synchronous one, such that its
-   rendering isn't delayed by other (asynchronous) components. Note that this
-   directive has no effect on the first rendering, but only on subsequent ones
-   (triggered by state or props changes).
-
-   ```xml
-   <div t-name="ParentComponent">
-     <SyncChild />
-     <AsyncRoot>
-        <AsyncChild/>
-     </AsyncRoot>
-   </div>
-   ```
-
 ### Error Handling

 By default, whenever an error occurs in the rendering of an Owl application, we
@@ -0,0 +1,183 @@
+# 🦉 Concurrency Model 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Rendering Components](#rendering-components)
+- [Semantics](#semantics)
+- [Asynchronous Rendering](#asynchronous-rendering)
+
+## Overview
+
+Owl was designed from the very beginning with asynchronous components. This comes
+from the `willStart` and the `willUpdateProps` lifecycle hooks. With these
+methods, it is possible to build complex highly concurrent applications.
+
+Owl concurrent mode has several benefits: it makes it possible to delay the
+rendering until some asynchronous operation is complete, it makes it possible
+to lazy load libraries, while keeping the previous screen completely functional.
+It is also good for performance reasons: Owl uses it to only apply the result of
+many different renderings only once in an animation frame. Owl can cancel
+a rendering that is no longer relevant, restart it, reuse it in some cases.
+
+But even though using concurrency is quite simple (and is the default behaviour),
+asynchrony is difficult, because it introduces an additional dimension that
+vastly increase the complexity of an application. This section will explain
+how Owl manages this complexity, how concuurent rendering works in a general way.
+
+## Rendering Components
+
+The word _rendering_ is a little vague, so, let us explain more precisely the
+process by which Owl components are displayed on a screen.
+
+When a component is mounted or updated, a new rendering is started. It has
+two phases: _virtual rendering_ and _patching_.
+
+### Virtual rendering
+
+This phase represent the process of rendering a template, in memory, which create a virtual representation of the desired component html). The output of this phase is a
+virtual DOM.
+
+It is asynchronous: each subcomponents needs to either be created (so, `willStart`
+will need to be called), or updated (which is done with the `willUpdateProps`
+method). This is completely a recursive process: a component is the root of a
+component tree, and each sub component needs to be (virtually) rendered.
+
+### Patching
+
+Once a rendering is complete, it will be applied on the next animation frame.
+This is done synchronously: the whole component tree is patched to the real
+DOM.
+
+## Semantics
+
+We give here an informal description of the way components are created/updated
+in an application. Here, ordered lists describe actions that are executed
+sequentially, bullet lists describe actions that are executed in parallel.
+
+**Scenario 1: initial rendering** Imagine we want to render the following component tree:
+
+```
+        A
+       / \
+      B   C
+         / \
+        D   E
+```
+
+Here is what happen whenever we mount the root
+component (with some code like `app.mount(document.body)`).
+
+1. `willStart` is called on `A`
+
+2. when it is done, template `A` is rendered.
+
+   - component `B` is created
+     1. `willStart` is called on `B`
+     2. template `B` is rendered
+   - component `C` is created
+     1. `willStart` is called on `C`
+     2. template `C` is rendered
+        - component `D` is created
+          1. `willStart` is called on `D`
+          2. template `D` is rendered
+        - component `E` is created
+          1. `willStart` is called on `E`
+          2. template `E` is rendered
+
+3. each components are patched into a detached DOM element, in the following order:
+   `E`, `D`, `C`, `B`, `A`. (so the actual full DOM tree is created
+   in one pass)
+
+4. the component `A` root element is actually appended to `document.body`
+
+5. The method `mounted` is called recursively on all components in the following
+   order: `E`, `D`, `C`, `B`, `A`.
+
+**Scenario 2: rerendering a component**. Now, let's assume that the user clicked on some
+button in `C`, and this results in a state update, which is supposed to:
+
+- update `D`,
+- remove `E`,
+- add new component `F`.
+
+So, the component tree should look like this:
+
+```
+        A
+       / \
+      B   C
+         / \
+        D   F
+```
+
+Here is what Owl will do:
+
+1. because of a state change, the method `render` is called on `C`
+2. template `C` is rendered again
+
+   - component `D` is updated:
+     1. hook `willUpdateProps` is called on `D` (async)
+     2. template `D` is rerendered
+   - component `F` is created:
+     1. hook `willStart` is called on `E` (async)
+     2. template `F` is rendered
+
+3. `willPatch` hooks are called recursively on components `C`, `D` (not on `F`,
+   because it is not mounted yet)
+
+4. components `F`, `D` are patched in that order
+
+5. component `C` is patched, which will cause recursively:
+
+   1. `willUnmount` hook on `E`
+   2. destruction of `E`,
+
+6. `mounted` hook is called on `F`, `patched` hooks are called on `D`, `C`
+
+Tags are very small helpers to make it easy to write inline templates. There is
+only one currently available tag: `xml`, but we plan to add other tags later,
+such as a `css` tag, which will be used to write [single file components](../tooling.md#single-file-component).
+
+### Asynchronous Rendering
+
+Working with asynchronous code always adds a lot of complexity to a system. Whenever
+different parts of a system are active at the same time, one needs to think
+carefully about all possible interactions. Clearly, this is also true for Owl
+components.
+
+There are two different common problems with Owl asynchronous rendering model:
+
+- any component can delay the rendering (initial and subsequent) of the whole
+  application
+- for a given component, there are two independant situations that will trigger an
+  asynchronous rerendering: a change in the state, or a change in the props.
+  These changes may be done at different times, and Owl has no way of knowing
+  how to reconcile the resulting renderings.
+
+Here are a few tips on how to work with asynchronous components:
+
+1. Minimize the use of asynchronous components!
+2. Maybe move the asynchronous logic in a store, which then triggers (mostly)
+   synchronous renderings
+3. Lazy loading external libraries is a good use case for async rendering. This
+   is mostly fine, because we can assume that it will only takes a fraction of a
+   second, and only once (see [`owl.utils.loadJS`](utils.md#loadjs))
+4. For all the other cases, the [`AsyncRoot`](misc.md#asyncroot) component is there to help you. When
+   this component is met, a new rendering
+   sub tree is created, such that the rendering of that component (and its
+   children) is not tied to the rendering of the rest of the interface. It can
+   be used on an asynchronous component, to prevent it from delaying the
+   rendering of the whole interface, or on a synchronous one, such that its
+   rendering isn't delayed by other (asynchronous) components. Note that this
+   directive has no effect on the first rendering, but only on subsequent ones
+   (triggered by state or props changes).
+
+   ```xml
+   <div t-name="ParentComponent">
+     <SyncChild />
+     <AsyncRoot>
+        <AsyncChild/>
+     </AsyncRoot>
+   </div>
+   ```
@@ -4,6 +4,7 @@

 - [Overview](#overview)
 - [Setting an Environment](#setting-an-environment)
+- [Using a sub environment](#using-a-sub-environment)
 - [Content of an Environment](#content-of-an-environment)

 ## Overview
@@ -65,6 +66,27 @@ by simply doing this:
 Component.env = myEnv; // will be the default env for all components
 ```

+Note that this environment is the global owl environment for an application. The
+next section explains how to extend an environment for a specific sub component
+and its children.
+
+## Using a sub environment
+
+It is sometimes useful to add one (or more) specific keys to the environment,
+from the perspective of a specific component and its children. In that case, the
+solution presented above will not work, since it sets the global environment.
+
+There is a hook for this situation: [`useSubEnv`](hooks.md#usesubenv).
+
+```js
+class FormComponent extends Component {
+  constructor(parent, props) {
+    super(parent, props);
+    useSubEnv({ myKey: someValue });
+  }
+}
+```
+
 ## Content of an Environment

 Some good use cases for additional keys in the environment are:
@@ -152,9 +152,15 @@ class SomeComponent extends Component {
 }
 ```

-In a hook, the `Component.current` static property is the reference to the
-component instance that is currently being created. Hooks need to be called in
-the constructor to ensure that this reference is properly set.
+As you can see, the `useState` hook does not need to be given a reference to
+the component. This is possible because there is a way to get a reference to the
+current component: the `Component.current` static property is the reference to the
+component instance that is currently being created.
+
+Hooks need to be called in the constructor to ensure that this reference is
+properly set. This is also a good thing for performance reasons (Owl can use
+this to optimize its implementation), and for a clean architecture (this makes
+it easier for developers to understand what is really happening in a component).

 ### `useState`

@@ -0,0 +1,103 @@
+# 🦉 Props Validation 🦉
+
+As an application becomes complex, it may be quite unsafe to define props in an informal way. This leads to two issues:
+
+- 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 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)
+- it is optional: it is ok for a component to not define a `props` key.
+- props are validated whenever a component is created/updated
+- props are only validated in `dev` mode (see [config page](config.md#mode))
+- if a key does not match the description, an error is thrown
+- it validates keys defined in (static) `props`. Additional keys given by the
+  parent will cause an error.
+
+For example:
+
+```js
+class ComponentA extends owl.Component {
+    static props = ['id', 'url'];
+
+    ...
+}
+
+class ComponentB extends owl.Component {
+  static props = {
+    count: {type: Number},
+    messages: {
+      type: Array,
+      element: {type: Object, shape: {id: Boolean, text: 'string' }
+    },
+   date: Date,
+   combinedVal: [Number, Boolean]
+  };
+
+  ...
+}
+```
+
+- it is an object or a list of strings
+- a list of strings is a simplified props definition, which only lists the name
+  of the props. Also, if the name ends with `?`, it is considered optional.
+- all props are by default required, unless they are defined with `optional: true`
+  (in that case, validation is only done if there is a value)
+- valid types are: `Number, String, Boolean, Object, Array, Date, Function`, and all
+  constructor functions (so, if you have a `Person` class, it can be used as a type)
+- arrays are homogeneous (all elements have the same type/shape)
+
+For each key, a `prop` definition is either a boolean, a constructor, a list of constructors, or an object:
+
+- a boolean: indicate that the props exists, and is mandatory.
+- a constructor: this should describe the type, for example: `id: Number` describe
+  the props `id` as a number
+- a list of constructors. In that case, this means that we allow more than one
+  type. For example, `id: [Number, String]` means that `id` can be either a string
+  or a number.
+- an object. This makes it possible to have more expressive definition. The following sub keys are then allowed (but not mandatory):
+  - `type`: the main type of the prop being validated
+  - `element`: if the type was `Array`, then the `element` key describes the type of each element in the array. If it is not set, then we only validate the array, not its elements,
+  - `shape`: if the type was `Object`, then the `shape` key describes the interface of the object. If it is not set, then we only validate the object, not its elements,
+  - `validate`: this is a function which should return a boolean to determine if
+    the value is valid or not. Useful for custom validation logic.
+
+Examples:
+
+```js
+  // only the existence of those 3 keys is documented
+  static props = ['message', 'id', 'date'];
+```
+
+```js
+  // size is optional
+  static props = ['message', 'size?'];
+```
+
+```js
+  static props = {
+    messageIds: {type: Array, element: Number},  // list of number
+    otherArr: {type: Array},   // just array. no validation is made on sub elements
+    otherArr2: Array,   // same as otherArr
+    someObj: {type: Object},  // just an object, no internal validation
+    someObj2: {
+      type: Object,
+      shape: {
+        id: Number,
+        name: {type: String, optional: true},
+        url: String
+      ]},    // object, with keys id (number), name (string, optional) and url (string)
+    someFlag: Boolean,     // a boolean, mandatory (even if `false`)
+    someVal: [Boolean, Date],   // either a boolean or a date
+    otherValue: true,     // indicates that it is a prop
+    kindofsmallnumber: {
+      type: Number,
+      validate: n => (0 <= n && n <= 10)
+    },
+    size: {
+      validate:  e => ["small", "medium", "large"].includes(e)
+    },
+  };
+```
@@ -252,19 +252,30 @@ The `useStore` hook is used to select some part of the store state. It accepts
 two arguments:

 - a selector function, which takes the store state as first argument (and the
-  component props as second argument) and returns
-  an object or an array (which will be then observed),
- optionally, an object with a `store` key (if we want to override the default
-  store) and an equality function (if we want to specialize the comparison).
+  component props as second argument) and which must return the part of the
+  store state that will be made available and observed for changes,
+- optionally, an object which can have the following optional keys:
+  - a `store` key containing a store object if we want to use another store than
+    the default store,
+  - an `isEqual` key containing an equality function if we want to specialize
+    the comparison (the function must accept two arguments: the previous result
+    and the new result, and must return whether they are equal),
+  - and an `onUpdate` key containing an update function if we want to execute an
+    arbitrary code every time the selected state changes (the function will
+    receive one argument, the new result, and can execute arbitrary code).

-If the `useStore` callback selects a sub part of the store state, the component
+If the `useStore` selector returns a sub part of the store state, the component
 will only be rerendered whenever this part of the state changes. Otherwise, it
-will perform a strict equality check and will update the component every time this
-check fails.
+will perform a strict equality check (unless the `isEqual` option is defined,
+then it will call it) and will update the component every time this check fails.

-Also, it may not be obvious, but it is crucial to remember that the selector
-function should return an object or an array. The reason is that it needs to be
-observed, otherwise the component would not be able to react to changes.
+Note that if the selector function returns a primitive type, the result of
+`useStore` will be immutable and it will not react to changes. In this case, it
+is important to define the `onUpdate` option to properly update the value
+manually when it changes.
+
+Also, the return value from `useStore` is not supposed to be modified. The store
+state should only be updated with actions.

 ### `useDispatch`

@@ -6,6 +6,7 @@
 - [Playground](#playground)
 - [Benchmarks](#benchmarks)
 - [Single File Component](#single-file-component)
+- [Debugging Script](#debugging-script)

 ## Overview

@@ -78,3 +79,29 @@ Note that the above example has an inline xml comment, just after the `xml` call
 This is useful for some editor plugins, such as the VS Code addon
 `Comment tagged template`, which, if installed, add syntax highlighting to the
 content of the template string.
+
+## Debugging Script
+
+## Debugging
+
+Non trivial applications become quickly more difficult to understand. It is then
+useful to have a solid understanding of what is going on. To help with that,
+logging useful information is extremely valuable. There is a [javascript file](../tools/debug.js) which can be evaluated in an application.
+
+Once it is executed, it will log a lot of information on each component main hooks. The following code is a minified version to make it easier to copy/paste:
+
+```
+let debugSetup = {
+  // componentBlackList: /App/,  // regexp
+  // componentWhiteList: /SomeComponent/, // regexp
+  // methodBlackList: ["mounted"], // list of method names
+  // methodWhiteList: ["willStart"], // list of method names
+  logScheduler: false,  // display/mute scheduler logs
+  logStore: true,     // display/mute store logs
+};
+{let o,t="[OWL_DEBUG]";function toStr(o){let t=JSON.stringify(o||{});return t.length>200&&(t=t.slice(0,200)+"..."),t}function debugComponent(o,e,n){let l=`${e}<id=${n}>`,r=o=>(!debugSetup.methodBlackList||!debugSetup.methodBlackList.includes(o))&&!(debugSetup.methodWhiteList&&!debugSetup.methodWhiteList.includes(o));r("constructor")&&console.log(`${t} ${l} constructor, props=${toStr(o.props)}`),r("willStart")&&owl.hooks.onWillStart(()=>{console.log(`${t} ${l} willStart`)}),r("mounted")&&owl.hooks.onMounted(()=>{console.log(`${t} ${l} mounted`)}),r("willUpdateProps")&&owl.hooks.onWillUpdateProps(o=>{console.log(`${t} ${l} willUpdateProps, nextprops=${toStr(o)}`)}),r("willPatch")&&owl.hooks.onWillPatch(()=>{console.log(`${t} ${l} willPatch`)}),r("patched")&&owl.hooks.onPatched(()=>{console.log(`${t} ${l} patched`)}),r("willUnmount")&&owl.hooks.onWillUnmount(()=>{console.log(`${t} ${l} willUnmount`)});const s=o.__render.bind(o);o.__render=function(...o){console.log(`${t} ${l} rendering template`),s(...o)};const u=o.render.bind(o);o.render=function(...o){return console.log(`${t} ${l} render`),u(...o)};const c=o.mount.bind(o);o.mount=function(...o){return console.log(`${t} ${l} mount`),c(...o)}}if(Object.defineProperty(owl.Component,"current",{get:()=>o,set(t){o=t;const e=t.constructor.name;if(debugSetup.componentBlackList&&debugSetup.componentBlackList.test(e))return;if(debugSetup.componentWhiteList&&!debugSetup.componentWhiteList.test(e))return;let n;Object.defineProperty(o,"__owl__",{get:()=>n,set(o){debugComponent(t,e,(n=o).id)}})}}),debugSetup.logScheduler){let o;Object.defineProperty(owl.Component.scheduler,"isRunning",{get:()=>o,set(e){e?console.log(`${t} scheduler: start running tasks queue`):console.log(`${t} scheduler: stop running tasks queue`),o=e}})}if(debugSetup.logStore){let o=owl.Store.prototype.dispatch;owl.Store.prototype.dispatch=function(e,...n){return console.log(`${t} store: action '${e}' dispatched. Payload: '${toStr(n)}'`),o.call(this,e,...n)}}}
+
+```
+
+Note that it is certainly useful to run this code at some point in an application,
+just to get a feel of what each user action implies, for the framework.
@@ -1,6 +1,6 @@
 {
  "name": "owl-framework",
-  "version": "1.0.0-alpha4",
+  "version": "1.0.0-alpha5",
  "description": "Odoo Web Library (OWL)",
  "main": "src/index.ts",
  "engines": {
@@ -39,6 +39,7 @@
    "jest-environment-jsdom": "^24.7.1",
    "live-server": "^1.2.1",
    "npm-run-all": "^4.1.5",
+    "prettier": "^1.19.1",
    "rollup": "^1.6.0",
    "rollup-plugin-typescript2": "^0.20.1",
    "sass": "^1.16.1",
@@ -1,6 +1,6 @@
 # 🦉 OWL Roadmap 🦉

- Current version: 1.0.0-alpha4
+- Current version: 1.0.0-alpha5
 - Status: mostly stable

 This roadmap is only an attempt at predicting Owl's future.  Everything may
@@ -65,6 +65,12 @@ interface Internal<T extends Env, Props> {
  // its children, those that are not used anymore and thus can be destroyed
  parentLastFiberId: number;

+  // when a rendering is initiated by a parent, it may set variables in 'scope'
+  // and 'vars' (typically when the component is rendered in a slot). We need to
+  // store that information in case the component would be re-rendered later on.
+  scope: any;
+  vars: any;
+
  boundHandlers: { [key: number]: any };
  observer: Observer | null;
  renderFn: CompiledTemplate;
@@ -184,7 +190,9 @@ export class Component<T extends Env, Props extends {}> {
      observer: null,
      renderFn: qweb.render.bind(qweb, template),
      classObj: null,
-      refs: null
+      refs: null,
+      scope: null,
+      vars: null
    };
  }

@@ -281,17 +289,18 @@ export class Component<T extends Env, Props extends {}> {
   *
   * Note that a component can be mounted an unmounted several times
   */
-  async mount(target: HTMLElement): Promise<void> {
+  async mount(target: HTMLElement | DocumentFragment): Promise<void> {
    const __owl__ = this.__owl__;
    if (__owl__.isMounted) {
      return Promise.resolve();
    }
-    if (!(target instanceof HTMLElement)) {
+    if (!(target instanceof HTMLElement || target instanceof DocumentFragment)) {
      let message = `Component '${this.constructor.name}' cannot be mounted: the target is not a valid DOM node.`;
      message += `\nMaybe the DOM is not ready yet? (in that case, you can use owl.utils.whenReady)`;
      throw new Error(message);
    }
-    const fiber = new Fiber(null, this, undefined, undefined, false, target);
+    const fiber = new Fiber(null, this, false, target);
+    fiber.shouldPatch = false;
    if (!__owl__.vnode) {
      this.__prepareAndRender(fiber);
    } else {
@@ -335,7 +344,7 @@ export class Component<T extends Env, Props extends {}> {
    // currentFiber that is already rendered (isRendered is true), so we are
    // about to be mounted
    const isMounted = __owl__.isMounted;
-    const fiber = new Fiber(null, this, undefined, undefined, force, null);
+    const fiber = new Fiber(null, this, force, null);
    Promise.resolve().then(() => {
      if (__owl__.isMounted || !isMounted) {
        // we are mounted (__owl__.isMounted), or if we are currently being
@@ -441,13 +450,7 @@ export class Component<T extends Env, Props extends {}> {

  __callMounted() {
    const __owl__ = this.__owl__;
-    const children = __owl__.children;
-    for (let id in children) {
-      const comp = children[id];
-      if (!comp.__owl__.isMounted && this.el!.contains(comp.el)) {
-        comp.__callMounted();
-      }
-    }
+
    __owl__.isMounted = true;
    __owl__.currentFiber = null;
    this.mounted();
@@ -463,6 +466,10 @@ export class Component<T extends Env, Props extends {}> {
    }
    this.willUnmount();
    __owl__.isMounted = false;
+    if (this.__owl__.currentFiber) {
+      this.__owl__.currentFiber.isCompleted = true;
+      this.__owl__.currentFiber.root.counter = 0;
+    }
    const children = __owl__.children;
    for (let id in children) {
      const comp = children[id];
@@ -476,22 +483,19 @@ export class Component<T extends Env, Props extends {}> {
   * The __updateProps method is called by the t-component directive whenever
   * it updates a component (so, when the parent template is rerendered).
   */
-  async __updateProps(
-    nextProps: Props,
-    parentFiber: Fiber,
-    scope: any,
-    vars: any,
-    previousSibling?: Fiber | null
-  ): Promise<void> {
+  async __updateProps(nextProps: Props, parentFiber: Fiber, scope: any, vars: any): Promise<void> {
+    this.__owl__.scope = scope;
+    this.__owl__.vars = vars;
    const shouldUpdate = parentFiber.force || this.shouldUpdate(nextProps);
    if (shouldUpdate) {
      const __owl__ = this.__owl__;
-      const fiber = new Fiber(parentFiber, this, scope, vars, parentFiber.force, null);
+      const fiber = new Fiber(parentFiber, this, parentFiber.force, null);
      if (!parentFiber.child) {
        parentFiber.child = fiber;
      } else {
-        previousSibling!.sibling = fiber;
+        parentFiber.lastChild!.sibling = fiber;
      }
+      parentFiber.lastChild = fiber;

      const defaultProps = (<any>this.constructor).defaultProps;
      if (defaultProps) {
@@ -517,7 +521,7 @@ export class Component<T extends Env, Props extends {}> {
   * Main patching method. We call the virtual dom patch method here to convert
   * a virtual dom vnode into some actual dom.
   */
-  __patch(vnode) {
+  __patch(vnode: VNode) {
    const __owl__ = this.__owl__;
    const target = __owl__.vnode || document.createElement(vnode.sel!);
    __owl__.vnode = patch(target, vnode);
@@ -528,14 +532,17 @@ export class Component<T extends Env, Props extends {}> {
   * subcomponent is created. It gets its scope and vars, if any, from the
   * parent template.
   */
-  __prepare(parentFiber: Fiber, scope: any, vars: any, previousSibling?: Fiber | null) {
-    const fiber = new Fiber(parentFiber, this, scope, vars, parentFiber.force, null);
+  __prepare(parentFiber: Fiber, scope: any, vars: any) {
+    this.__owl__.scope = scope;
+    this.__owl__.vars = vars;
+    const fiber = new Fiber(parentFiber, this, parentFiber.force, null);
    fiber.shouldPatch = false;
    if (!parentFiber.child) {
      parentFiber.child = fiber;
    } else {
-      previousSibling!.sibling = fiber;
+      parentFiber.lastChild!.sibling = fiber;
    }
+    parentFiber.lastChild = fiber;
    return this.__prepareAndRender(fiber);
  }

@@ -619,26 +626,6 @@ export class Component<T extends Env, Props extends {}> {
    }
  }

-  /**
-   * Only called by qweb t-component directive
-   */
-  __mount(fiber: Fiber, elm: HTMLElement): VNode {
-    if (fiber !== this.__owl__.currentFiber) {
-      fiber = this.__owl__.currentFiber!; // TODO: check if we can remove fiber arg
-    }
-    const vnode = fiber.vnode!;
-    const __owl__ = this.__owl__;
-    if (__owl__.classObj) {
-      (<any>vnode).data.class = Object.assign((<any>vnode).data.class || {}, __owl__.classObj);
-    }
-    __owl__.vnode = patch(elm, vnode);
-    __owl__.currentFiber = null;
-    if (__owl__.parent!.__owl__.isMounted && !__owl__.isMounted) {
-      this.__callMounted();
-    }
-    return __owl__.vnode;
-  }
-
  /**
   * Only called by qweb t-component directive (when t-keepalive is set)
   */
@@ -239,10 +239,6 @@ QWeb.addDirective({
      ctx.addLine(`const ${refKey} = ${ctx.interpolate(ref)};`);
      refExpr = `context.__owl__.refs[${refKey}] = w${componentID};`;
    }
-    let transitionsInsertCode = "";
-    if (transition) {
-      transitionsInsertCode = `utils.transitionInsert(vn, '${transition}');`;
-    }
    let finalizeComponentCode = `w${componentID}.destroy();`;
    if (ref) {
      finalizeComponentCode += `delete context.__owl__.refs[${refKey}];`;
@@ -251,6 +247,7 @@ QWeb.addDirective({
      finalizeComponentCode = `let finalize = () => {
          ${finalizeComponentCode}
        };
+        delete w${componentID}.__owl__.transitionInserted;
        utils.transitionRemove(vn, '${transition}', finalize);`;
    }

@@ -381,7 +378,7 @@ QWeb.addDirective({
    }
    ctx.addLine(
      `w${componentID}.__updateProps(props${componentID}, extra.fiber${scopeVars &&
-        ", " + scopeVars}, sibling)${styleCode};`
+        ", " + scopeVars})${styleCode};`
    );
    ctx.addLine(`let pvnode = w${componentID}.__owl__.pvnode;`);
    if (registerCode) {
@@ -409,6 +406,12 @@ QWeb.addDirective({
      `if (!W${componentID}) {throw new Error('Cannot find the definition of component "' + componentKey${componentID} + '"')}`
    );
    ctx.addLine(`w${componentID} = new W${componentID}(parent, props${componentID});`);
+    if (transition) {
+      ctx.addLine(`const __patch${componentID} = w${componentID}.__patch;`);
+      ctx.addLine(
+        `w${componentID}.__patch = fiber => {__patch${componentID}.call(w${componentID}, fiber); if(!w${componentID}.__owl__.transitionInserted){w${componentID}.__owl__.transitionInserted = true;utils.transitionInsert(w${componentID}.__owl__.vnode, '${transition}');}};`
+      );
+    }
    ctx.addLine(`parent.__owl__.cmap[${templateKey}] = w${componentID}.__owl__.id;`);

    if (hasSlots) {
@@ -436,10 +439,11 @@ QWeb.addDirective({
      }
    }

-    ctx.addLine(`let def${defID} = w${componentID}.__prepare(extra.fiber, ${scopeVars}, sibling);`);
+    ctx.addLine(`let def${defID} = w${componentID}.__prepare(extra.fiber, ${scopeVars});`);
    // hack: specify empty remove hook to prevent the node from being removed from the DOM
+    const insertHook = refExpr ? `insert(vn) {${refExpr}},` : "";
    ctx.addLine(
-      `let pvnode = h('dummy', {key: ${templateKey}, hook: {insert(vn) { let nvn=w${componentID}.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;${refExpr}${transitionsInsertCode}},remove() {},destroy(vn) {${finalizeComponentCode}}}});`
+      `let pvnode = h('dummy', {key: ${templateKey}, hook: {${insertHook}remove() {},destroy(vn) {${finalizeComponentCode}}}});`
    );
    ctx.addLine(`const fiber = w${componentID}.__owl__.currentFiber;`);
    ctx.addLine(
@@ -460,7 +464,6 @@ QWeb.addDirective({
    }

    ctx.addLine(`w${componentID}.__owl__.parentLastFiberId = extra.fiber.id;`);
-    ctx.addLine(`sibling = w${componentID}.__owl__.currentFiber || sibling;`);

    return true;
  }
@@ -57,21 +57,24 @@ export class Fiber {
  root: Fiber;
  child: Fiber | null = null;
  sibling: Fiber | null = null;
+  lastChild: Fiber | null = null;
  parent: Fiber | null = null;

  error?: Error;

-  constructor(parent: Fiber | null, component: Component<any, any>, scope, vars, force, target) {
-    this.force = force;
-    this.scope = scope;
-    this.vars = vars;
+  constructor(parent: Fiber | null, component: Component<any, any>, force, target) {
    this.component = component;
+    this.force = force;
    this.target = target;

+    const __owl__ = component.__owl__;
+    this.scope = __owl__.scope;
+    this.vars = __owl__.vars;
+
    this.root = parent ? parent.root : this;
    this.parent = parent;

-    let oldFiber = component.__owl__.currentFiber;
+    let oldFiber = __owl__.currentFiber;
    if (oldFiber && !oldFiber.isCompleted) {
      if (oldFiber.root === oldFiber && !parent) {
        // both oldFiber and this fiber are root fibers
@@ -84,7 +87,7 @@ export class Fiber {

    this.root.counter++;

-    component.__owl__.currentFiber = this;
+    __owl__.currentFiber = this;
  }

  /**
@@ -103,6 +106,7 @@ export class Fiber {
      // remove relation to children
      oldFiber.child.parent = null;
      oldFiber.child = null;
+      oldFiber.lastChild = null;
    }
    oldFiber.counter = 1; // re-initialize counter
    oldFiber.id = Fiber.nextId++;
@@ -116,6 +120,7 @@ export class Fiber {
   */
  _remapFiber(oldFiber: Fiber) {
    oldFiber.cancel();
+    this.shouldPatch = oldFiber.shouldPatch;
    if (oldFiber === oldFiber.root) {
      oldFiber.counter++;
    }
@@ -124,6 +129,9 @@ export class Fiber {
      this.parent = oldFiber.parent;
      this.root = this.parent.root;
      this.sibling = oldFiber.sibling;
+      if (this.parent.lastChild === oldFiber) {
+        this.parent.lastChild = this;
+      }
      if (this.parent.child === oldFiber) {
        this.parent.child = this;
      } else {
@@ -171,55 +179,74 @@ export class Fiber {
   * are ready, and the scheduler decides to process it.
   */
  complete() {
-    const component = this.component;
-    if (this.target) {
-      component.__patch(this.vnode);
-      this.target.appendChild(component.el!);
-      if (document.body.contains(this.target)) {
-        component.__callMounted();
-      }
-    } else if (component.__owl__.isMounted && this === this.root) {
-      this.patchComponents();
-    }
+    let component = this.component;
+    let fiber: Fiber = this;
    this.isCompleted = true;
-  }
+    if (!this.target && !component.__owl__.isMounted) {
+      return;
+    }

-  /**
-   * Compute and apply the patch queue of the fiber.
-   *   1) Call 'willPatch' on the component of each patch
-   *   2) Call '__patch' on the component of each patch
-   *   3) Call 'patched' on the component of each patch, in reverse order
-   */
-  patchComponents() {
+    // build patchQueue
    const patchQueue: Fiber[] = [];
    const doWork: (Fiber) => Fiber | null = function(f) {
-      if (f.shouldPatch) {
-        patchQueue.push(f);
-        return f.child;
-      }
+      patchQueue.push(f);
+      return f.child;
    };
    this._walk(doWork);
-    let component: Component<any, any> = this.component;
    const patchLen = patchQueue.length;
-    for (let i = 0; i < patchLen; i++) {
-      component = patchQueue[i].component;
-      if (component.__owl__.willPatchCB) {
-        component.__owl__.willPatchCB();
+
+    try {
+      // call willPatch hook on each fiber of patchQueue
+      for (let i = 0; i < patchLen; i++) {
+        fiber = patchQueue[i];
+        if (fiber.shouldPatch) {
+          component = fiber.component;
+          if (component.__owl__.willPatchCB) {
+            component.__owl__.willPatchCB();
+          }
+          component.willPatch();
+        }
      }
-      component.willPatch();
-    }
-    for (let i = 0; i < patchLen; i++) {
-      const fiber = patchQueue[i];
-      component = fiber.component;
-      component.__patch(fiber.vnode);
-      component.__owl__.currentFiber = null;
-    }
-    for (let i = patchLen - 1; i >= 0; i--) {
-      component = patchQueue[i].component;
-      component.patched();
-      if (component.__owl__.patchedCB) {
-        component.__owl__.patchedCB();
+
+      // call __patch on each fiber of (reversed) patchQueue
+      for (let i = patchLen - 1; i >= 0; i--) {
+        fiber = patchQueue[i];
+        component = fiber.component;
+        component.__patch(fiber.vnode!);
+        if (!fiber.shouldPatch && (!fiber.target || i !== 0)) {
+          component.__owl__.pvnode!.elm = component.__owl__.vnode!.elm;
+        }
+        component.__owl__.currentFiber = null;
      }
+
+      // insert into the DOM (mount case)
+      let inDOM = false;
+      if (this.target) {
+        this.target.appendChild(this.component.el!);
+        inDOM = document.body.contains(this.target);
+      }
+
+      // call patched/mounted hook on each fiber of (reversed) patchQueue
+      for (let i = patchLen - 1; i >= 0; i--) {
+        fiber = patchQueue[i];
+        component = fiber.component;
+        if (fiber.shouldPatch && !this.target) {
+          component.patched();
+          if (component.__owl__.patchedCB) {
+            component.__owl__.patchedCB();
+          }
+        } else if (this.target ? inDOM : true) {
+          component.__callMounted();
+        }
+      }
+    } catch (e) {
+      // if there is no current fiber on component, we are in the situation where
+      // components were patched to the DOM, but a mounted/patched hook threw an
+      // error.  In that case, we cannot manage the error at a lower level than
+      // the root fiber, since some components may not have been properly mounted
+      // patched yet.
+      const errorFiber = component.__owl__.currentFiber ? fiber : this;
+      errorFiber.handleError(e);
    }
  }

@@ -258,7 +285,11 @@ export class Fiber {
    qweb.trigger("error", error);

    if (canCatch) {
+      // this.root.isCompleted = false
+      this.root.isCompleted = false;
+      // component.__owl__.currentFiber!.root.isCompleted = false;
      component.catchError!(error);
+
    } else {
      // the 3 next lines aim to mark the root fiber as being in error, and
      // to force it to end, without waiting for its children
@@ -48,7 +48,7 @@ QWeb.utils.validateProps = function(Widget, props: Object) {
        throw e;
      }
      if (!isValid) {
-        throw new Error(`Props '${propName}' of invalid type in component '${Widget.name}'`);
+        throw new Error(`Invalid Prop '${propName}' in component '${Widget.name}'`);
      }
    }
    for (let propName in props) {
@@ -89,7 +89,10 @@ function isValidProp(prop, propDef): boolean {
  if (propDef.optional && prop === undefined) {
    return true;
  }
-  let result = isValidProp(prop, propDef.type);
+  let result = propDef.type ? isValidProp(prop, propDef.type) : true;
+  if (propDef.validate) {
+    result = result && propDef.validate(prop);
+  }
  if (propDef.type === Array && propDef.element) {
    for (let i = 0, iLen = prop.length; i < iLen; i++) {
      result = result && isValidProp(prop[i], propDef.element);
@@ -26,6 +26,9 @@ export class Scheduler {
  }

  addFiber(fiber): Promise<void> {
+    // if the fiber was remapped into a larger rendering fiber, it may not be a
+    // root fiber.  But we only want to register root fibers
+    fiber = fiber.root;
    return new Promise((resolve, reject) => {
      if (fiber.error) {
        return reject(fiber.error);
@@ -59,10 +62,9 @@ export class Scheduler {
      }
      if (task.fiber.counter === 0) {
        if (!task.fiber.error) {
-          try {
-            task.fiber.complete();
-          } catch (e) {
-            task.fiber.handleError(e);
+          task.fiber.complete();
+          if (!task.fiber.isCompleted) {
+            return true;
          }
        }
        task.callback();
@@ -139,10 +139,10 @@ export function useContextWithCB(ctx: Context, component: Component<any, any>, m
    }
  });
  const __destroy = component.__destroy;
-  component.__destroy = (parent) => {
+  component.__destroy = parent => {
    ctx.off("update", component);
    delete mapping[id];
    __destroy.call(component, parent);
-  }
+  };
  return ctx.state;
 }
@@ -28,9 +28,12 @@ QWeb.utils.getFragment = function(str: string): DocumentFragment {
 QWeb.utils.htmlToVDOM = htmlToVDOM;

 function compileValueNode(value: any, node: Element, qweb: QWeb, ctx: CompilationContext) {
-  if (value === "0" && ctx.caller) {
-    qweb._compileNode(ctx.caller, ctx);
-    return;
+  if (value === "0") {
+    const caller = ctx.getCaller();
+    if (caller) {
+      qweb._compileNode(caller, ctx.getInliningContext());
+      return;
+    }
  }

  if (value.xml instanceof NodeList && !value.id) {
@@ -192,11 +195,9 @@ QWeb.addDirective({

    // extract variables from nodecopy
    const tempCtx = new CompilationContext();
-    tempCtx.nextID = ctx.rootContext.nextID;
    tempCtx.allowMultipleRoots = true;
    qweb._compileNode(nodeCopy, tempCtx);
    const vars = Object.assign({}, ctx.variables, tempCtx.variables);
-    ctx.rootContext.nextID = tempCtx.nextID;

    const templateMap = Object.create(ctx.templates);
    // open new scope, if necessary
@@ -6,7 +6,7 @@ export const INTERP_REGEXP = /\{\{.*?\}\}/g;
 //------------------------------------------------------------------------------

 export class CompilationContext {
-  nextID: number = 1;
+  static nextID: number = 1;
  code: string[] = [];
  variables: { [key: string]: QWebVar } = {};
  escaping: boolean = false;
@@ -22,7 +22,6 @@ export class CompilationContext {
  shouldDefineUtils: boolean = false;
  shouldDefineRefs: boolean = false;
  shouldDefineResult: boolean = true;
-  shouldDefineSibling: boolean = true;
  shouldProtectContext: boolean = false;
  shouldTrackScope: boolean = false;
  loopNumber: number = 0;
@@ -32,8 +31,9 @@ export class CompilationContext {
  hasParentWidget: boolean = false;
  scopeVars: any[] = [];
  currentKey: string = "";
-  lastNodeKey: string = ""; // temp variable to communicate to previous caller
  templates: { [key: string]: boolean } = {};
+  callingLevel: number = 0;
+  inliningLevel: number = 0;

  constructor(name?: string) {
    this.rootContext = this;
@@ -43,8 +43,7 @@ export class CompilationContext {
  }

  generateID(): number {
-    const id = this.rootContext.nextID++;
-    return id;
+    return CompilationContext.nextID++;
  }

  /**
@@ -61,8 +60,8 @@ export class CompilationContext {
    for (let i = 0; i < this.loopNumber - 1; i++) {
      locationExpr += `\${i${i + 1}}__`;
    }
-    if (this.lastNodeKey || this.currentKey) {
-      const k = this.lastNodeKey || this.currentKey;
+    if (this.currentKey) {
+      const k = this.currentKey;
      this.addLine(`let k${id} = ${locationExpr}\` + ${k};`);
    } else {
      locationExpr += this.loopNumber ? `\${i${this.loopNumber}}__\`` : "`";
@@ -88,9 +87,6 @@ export class CompilationContext {
    if (this.shouldDefineResult) {
      this.code.unshift("    let result;");
    }
-    if (this.shouldDefineSibling) {
-      this.code.unshift("    let sibling = null;");
-    }
    if (this.shouldDefineRefs) {
      this.code.unshift("    context.__owl__.refs = context.__owl__.refs || {};");
    }
@@ -135,6 +131,10 @@ export class CompilationContext {
  subContext(key: keyof CompilationContext, value: any): CompilationContext {
    const newContext = Object.create(this);
    newContext[key] = value;
+    if (key === "caller") {
+      newContext.callingLevel++;
+      newContext.inliningLevel++;
+    }
    return newContext;
  }

@@ -172,6 +172,27 @@ export class CompilationContext {
    this.dedent();
    this.addLine("}");
  }
+  /**
+   * Recursively (inverse) fetches the `caller` of a context
+   * Useful to determine to which t-call a t-raw="0" refers
+   */
+  getCaller(targetLevel?: number): Element | null {
+    if (targetLevel === undefined) {
+      targetLevel = this.inliningLevel;
+    }
+    if (targetLevel === this.callingLevel) {
+      return this.caller || null;
+    }
+    const proto = (this as any).__proto__;
+    return proto ? proto.getCaller(targetLevel) : null;
+  }
+  /**
+   * Marks the context with the current recursive level
+   * in which we are for inlining archs (t-raw="0")
+   */
+  getInliningContext(): CompilationContext {
+    return this.subContext("inliningLevel", this.inliningLevel - 1);
+  }

  getValue(val: any): QWebVar | string {
    return val in this.variables ? this.getValue(this.variables[val]) : val;
@@ -105,6 +105,8 @@ QWeb.utils.transitionInsert = function(vn: VNode, name: string) {

  elm.classList.add(name + "-enter");
  elm.classList.add(name + "-enter-active");
+  elm.classList.remove(name + "-leave-active");
+  elm.classList.remove(name + "-leave-to");
  const finalize = () => {
    elm.classList.remove(name + "-enter-active");
    elm.classList.remove(name + "-enter-to");
@@ -123,6 +125,9 @@ QWeb.utils.transitionRemove = function(vn: VNode, name: string, rm: () => void)
  elm.classList.add(name + "-leave");
  elm.classList.add(name + "-leave-active");
  const finalize = () => {
+    if (!elm.classList.contains(name + "-leave-active")) {
+      return;
+    }
    elm.classList.remove(name + "-leave-active");
    elm.classList.remove(name + "-leave-to");
    rm();
@@ -201,12 +206,12 @@ QWeb.addDirective({
    if (!ctx.parentNode) {
      ctx.rootContext.shouldDefineResult = true;
      ctx.rootContext.shouldDefineUtils = true;
-      parentNode = `children${ctx.nextID++}`;
+      parentNode = `children${ctx.generateID()}`;
      ctx.addLine(`let ${parentNode}= []`);
      ctx.addLine(`result = {}`);
    }
    ctx.addLine(
-      `slot${slotKey}.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: ${parentNode}, vars: extra.vars, parent: owner}));`
+      `slot${slotKey}.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: ${parentNode}, vars: extra.vars, parent: extra.parent || owner}));`
    );
    if (!ctx.parentNode) {
      ctx.addLine(`utils.defineProxy(result, ${parentNode}[0]);`);
@@ -279,6 +284,6 @@ QWeb.addDirective({
  atNodeEncounter({ ctx, value }) {
    let id = ctx.generateID();
    ctx.addLine(`const nodeKey${id} = ${ctx.formatExpression(value)};`);
-    ctx.lastNodeKey = `nodeKey${id}`;
+    ctx.currentKey = `nodeKey${id}`;
  }
 });
@@ -362,8 +362,7 @@ export class QWeb extends EventBus {
    if (parentContext) {
      ctx.templates = Object.create(parentContext.templates);
      ctx.variables = Object.create(parentContext.variables);
-      ctx.nextID = parentContext.nextID + 1;
-      ctx.parentNode = parentContext.parentNode || ctx.nextID++;
+      ctx.parentNode = parentContext.parentNode || ctx.generateID();
      ctx.allowMultipleRoots = true;
      ctx.hasParentWidget = true;
      ctx.shouldDefineResult = false;
@@ -455,13 +454,19 @@ export class QWeb extends EventBus {
      return;
    }

+    if (ctx !== ctx.rootContext) {
+      ctx = ctx.subContext("currentKey", ctx.currentKey);
+    }
+
    const firstLetter = node.tagName[0];
    if (firstLetter === firstLetter.toUpperCase()) {
      // this is a component, we modify in place the xml document to change
      // <SomeComponent ... /> to <t t-component="SomeComponent" ... />
      node.setAttribute("t-component", node.tagName);
-    } else if (node.tagName !== 't' && node.hasAttribute('t-component')) {
-      throw new Error(`Directive 't-component' can only be used on <t> nodes (used on a <${node.tagName}>)`);
+    } else if (node.tagName !== "t" && node.hasAttribute("t-component")) {
+      throw new Error(
+        `Directive 't-component' can only be used on <t> nodes (used on a <${node.tagName}>)`
+      );
    }
    const attributes = (<Element>node).attributes;

@@ -542,7 +547,6 @@ export class QWeb extends EventBus {
    if (node.nodeName !== "t") {
      let nodeID = this._compileGenericNode(node, ctx, withHandlers);
      ctx = ctx.withParent(nodeID);
-      ctx = ctx.subContext("currentKey", ctx.lastNodeKey);
      let nodeHooks = {};
      let addNodeHook = function(hook, handler) {
        nodeHooks[hook] = nodeHooks[hook] || [];
@@ -726,7 +730,7 @@ export class QWeb extends EventBus {
      }
    }
    let nodeID = ctx.generateID();
-    let nodeKey = ctx.lastNodeKey || nodeID;
+    let nodeKey = ctx.currentKey || nodeID;
    const parts = [`key:${nodeKey}`];
    if (attrs.length + tattrs.length > 0) {
      parts.push(`attrs:{${attrs.join(",")}}`);
@@ -77,41 +77,45 @@ export class Store extends Context {
 interface SelectorOptions {
  store?: Store;
  isEqual?: (a: any, b: any) => boolean;
+  onUpdate?: (result: any) => any;
 }

 const isStrictEqual = (a, b) => a === b;

 export function useStore(selector, options: SelectorOptions = {}): any {
  const component: Component<any, any> = Component.current!;
+  const componentId = component.__owl__.id;
  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;
+  let revNumber = hashFn(result);
  const isEqual = options.isEqual || isStrictEqual;
-  if (!store.updateFunctions[component.__owl__.id]) {
-    store.updateFunctions[component.__owl__.id] = [];
+  if (!store.updateFunctions[componentId]) {
+    store.updateFunctions[componentId] = [];
  }
-  const updateFunctions = store.updateFunctions[component.__owl__.id];
-  updateFunctions.push(function(): boolean {
+  function selectCompareUpdate(state, props): boolean {
    const oldResult = result;
-    result = selector(store!.state, component.props);
+    result = selector(state, props);
    const newRevNumber = hashFn(result);
-    if (
-      (newRevNumber > 0 && revNumber !== newRevNumber) ||
-      (newRevNumber === 0 && !isEqual(oldResult, result))
-    ) {
+    if ((newRevNumber > 0 && revNumber !== newRevNumber) || !isEqual(oldResult, result)) {
      revNumber = newRevNumber;
+      if (options.onUpdate) {
+        options.onUpdate(result);
+      }
      return true;
    }
    return false;
+  }
+  store.updateFunctions[componentId].push(function(): boolean {
+    return selectCompareUpdate(store!.state, component.props);
  });

  useContextWithCB(store, component, function(): Promise<void> | void {
    let shouldRender = false;
-    for (let fn of updateFunctions) {
+    for (let fn of store.updateFunctions[componentId]) {
      shouldRender = fn() || shouldRender;
    }
    if (shouldRender) {
@@ -119,16 +123,24 @@ export function useStore(selector, options: SelectorOptions = {}): any {
    }
  });
  onWillUpdateProps(props => {
-    delete store.updateFunctions[component.__owl__.id];
-    result = selector(store.state, props);
+    selectCompareUpdate(store.state, props);
  });
+
+  const __destroy = component.__destroy;
+  component.__destroy = parent => {
+    delete store.updateFunctions[componentId];
+    __destroy.call(component, parent);
+  };
+
+  if (typeof result !== "object") {
+    return result;
+  }
  return new Proxy(result, {
    get(target, k) {
      return result[k];
    },
    set(target, k, v) {
-      result[k] = v;
-      return true;
+      throw new Error("Store state should only be modified through actions");
    }
  });
 }
@@ -101,7 +101,7 @@ function isVnode(vnode: any): vnode is VNode {

 type KeyToIndexMap = { [key: string]: number };

-type ArraysOf<T> = { [K in keyof T]: (T[K])[] };
+type ArraysOf<T> = { [K in keyof T]: T[K][] };

 type ModuleHooks = ArraysOf<Module>;

@@ -176,10 +176,12 @@ export function init(modules: Array<Partial<Module>>, domApi?: DOMAPI) {
      }
      vnode.elm = api.createComment(vnode.text as string);
    } else if (sel !== undefined) {
-      const elm = (vnode.elm =
-        isDef(data) && isDef((i = (data as VNodeData).ns))
-          ? api.createElementNS(i, sel)
-          : api.createElement(sel));
+      const elm =
+        vnode.elm ||
+        (vnode.elm =
+          isDef(data) && isDef((i = (data as VNodeData).ns))
+            ? api.createElementNS(i, sel)
+            : api.createElement(sel));
      for (i = 0, iLen = cbs.create.length; i < iLen; ++i) cbs.create[i](emptyNode, vnode);
      if (array(children)) {
        for (i = 0, iLen = children.length; i < iLen; ++i) {
@@ -7,7 +7,6 @@ exports[`animations t-transition combined with component 1`] = `
    let QWeb = this.constructor;
    let parent = context;
    let owner = context;
-    let sibling = null;
    var h = this.h;
    let c1 = [], p1 = {key:1};
    var vn1 = h('div', p1, c1);
@@ -20,7 +19,7 @@ exports[`animations t-transition combined with component 1`] = `
        w3 = false;
    }
    if (w3) {
-        w3.__updateProps(props3, extra.fiber, undefined, undefined, sibling);
+        w3.__updateProps(props3, extra.fiber, undefined, undefined);
        let pvnode = w3.__owl__.pvnode;
        c1.push(pvnode);
    } else {
@@ -28,11 +27,14 @@ exports[`animations t-transition combined with component 1`] = `
        let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| context['Child'];
        if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
        w3 = new W3(parent, props3);
+        const __patch3 = w3.__patch;
+        w3.__patch = fiber => {__patch3.call(w3, fiber); if(!w3.__owl__.transitionInserted){w3.__owl__.transitionInserted = true;utils.transitionInsert(w3.__owl__.vnode, 'chimay');}};
        parent.__owl__.cmap[k4] = w3.__owl__.id;
-        let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
-        let pvnode = h('dummy', {key: k4, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;utils.transitionInsert(vn, 'chimay');},remove() {},destroy(vn) {let finalize = () => {
+        let def2 = w3.__prepare(extra.fiber, undefined, undefined);
+        let pvnode = h('dummy', {key: k4, hook: {remove() {},destroy(vn) {let finalize = () => {
          w3.destroy();
        };
+        delete w3.__owl__.transitionInserted;
        utils.transitionRemove(vn, 'chimay', finalize);}}});
        const fiber = w3.__owl__.currentFiber;
        def2.then(function () { if (fiber.isCompleted) { return; } const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
@@ -40,7 +42,6 @@ exports[`animations t-transition combined with component 1`] = `
        w3.__owl__.pvnode = pvnode;
    }
    w3.__owl__.parentLastFiberId = extra.fiber.id;
-    sibling = w3.__owl__.currentFiber || sibling;
    return vn1;
 }"
 `;
@@ -52,7 +53,6 @@ exports[`animations t-transition combined with t-component and t-if 1`] = `
    let QWeb = this.constructor;
    let parent = context;
    let owner = context;
-    let sibling = null;
    var h = this.h;
    let c1 = [], p1 = {key:1};
    var vn1 = h('div', p1, c1);
@@ -66,7 +66,7 @@ exports[`animations t-transition combined with t-component and t-if 1`] = `
            w3 = false;
        }
        if (w3) {
-            w3.__updateProps(props3, extra.fiber, undefined, undefined, sibling);
+            w3.__updateProps(props3, extra.fiber, undefined, undefined);
            let pvnode = w3.__owl__.pvnode;
            c1.push(pvnode);
        } else {
@@ -74,11 +74,62 @@ exports[`animations t-transition combined with t-component and t-if 1`] = `
            let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| context['Child'];
            if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
            w3 = new W3(parent, props3);
+            const __patch3 = w3.__patch;
+            w3.__patch = fiber => {__patch3.call(w3, fiber); if(!w3.__owl__.transitionInserted){w3.__owl__.transitionInserted = true;utils.transitionInsert(w3.__owl__.vnode, 'chimay');}};
            parent.__owl__.cmap[k4] = w3.__owl__.id;
-            let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
-            let pvnode = h('dummy', {key: k4, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;utils.transitionInsert(vn, 'chimay');},remove() {},destroy(vn) {let finalize = () => {
+            let def2 = w3.__prepare(extra.fiber, undefined, undefined);
+            let pvnode = h('dummy', {key: k4, hook: {remove() {},destroy(vn) {let finalize = () => {
          w3.destroy();
        };
+        delete w3.__owl__.transitionInserted;
+        utils.transitionRemove(vn, 'chimay', finalize);}}});
+            const fiber = w3.__owl__.currentFiber;
+            def2.then(function () { if (fiber.isCompleted) { return; } const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            c1.push(pvnode);
+            w3.__owl__.pvnode = pvnode;
+        }
+        w3.__owl__.parentLastFiberId = extra.fiber.id;
+    }
+    return vn1;
+}"
+`;
+
+exports[`animations t-transition combined with t-component, remove and re-add before transitionend 1`] = `
+"function anonymous(context,extra
+) {
+    let utils = this.constructor.utils;
+    let QWeb = this.constructor;
+    let parent = context;
+    let owner = context;
+    var h = this.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    if (context['state'].flag) {
+        //COMPONENT
+        let k4 = \`__5__\`;
+        let w3 = k4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k4]] : false;
+        let props3 = {};
+        if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) {
+            w3.destroy();
+            w3 = false;
+        }
+        if (w3) {
+            w3.__updateProps(props3, extra.fiber, undefined, undefined);
+            let pvnode = w3.__owl__.pvnode;
+            c1.push(pvnode);
+        } else {
+            let componentKey3 = \`Child\`;
+            let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| context['Child'];
+            if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
+            w3 = new W3(parent, props3);
+            const __patch3 = w3.__patch;
+            w3.__patch = fiber => {__patch3.call(w3, fiber); if(!w3.__owl__.transitionInserted){w3.__owl__.transitionInserted = true;utils.transitionInsert(w3.__owl__.vnode, 'chimay');}};
+            parent.__owl__.cmap[k4] = w3.__owl__.id;
+            let def2 = w3.__prepare(extra.fiber, undefined, undefined);
+            let pvnode = h('dummy', {key: k4, hook: {remove() {},destroy(vn) {let finalize = () => {
+          w3.destroy();
+        };
+        delete w3.__owl__.transitionInserted;
        utils.transitionRemove(vn, 'chimay', finalize);}}});
            const fiber = w3.__owl__.currentFiber;
            def2.then(function () { if (fiber.isCompleted) { return; } const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
@@ -86,7 +137,6 @@ exports[`animations t-transition combined with t-component and t-if 1`] = `
            w3.__owl__.pvnode = pvnode;
        }
        w3.__owl__.parentLastFiberId = extra.fiber.id;
-        sibling = w3.__owl__.currentFiber || sibling;
    }
    return vn1;
 }"
@@ -96,7 +146,6 @@ exports[`animations t-transition with no delay/duration 1`] = `
 "function anonymous(context,extra
 ) {
    let utils = this.constructor.utils;
-    let sibling = null;
    var h = this.h;
    let c1 = [], p1 = {key:1};
    var vn1 = h('span', p1, c1);
@@ -117,7 +166,6 @@ exports[`animations t-transition, on a simple node (insert) 1`] = `
 "function anonymous(context,extra
 ) {
    let utils = this.constructor.utils;
-    let sibling = null;
    var h = this.h;
    let c1 = [], p1 = {key:1};
    var vn1 = h('span', p1, c1);
@@ -1,13 +1,15 @@
 import { Component, Env } from "../src/component/component";
 import { QWeb } from "../src/qweb/index";
 import { useState, useRef } from "../src/hooks";
+import { xml } from "../src/tags";
 import {
  makeDeferred,
  makeTestFixture,
  makeTestEnv,
  patchNextFrame,
  renderToDOM,
-  unpatchNextFrame
+  unpatchNextFrame,
+  nextTick
 } from "./helpers";

 //------------------------------------------------------------------------------
@@ -321,30 +323,23 @@ describe("animations", () => {
  });

  test("t-transition combined with t-component, remove and re-add before transitionend", async () => {
-    expect.assertions(11);
+    expect.assertions(12);

-    env.qweb.addTemplates(
-      `<templates>
-        <div t-name="Parent">
-          <button t-on-click="toggle">Toggle</button>
-          <t t-if="state.flag" t-component="Child" t-transition="chimay"/>
-        </div>
-        <span t-name="Child">blue</span>
-      </templates>`
-    );
-    class Child extends Widget {}
+    class Child extends Widget {
+      static template = xml`<span>blue</span>`;
+    }
    class Parent extends Widget {
+      static template = xml`
+        <div t-name="Parent">
+          <t t-if="state.flag" t-component="Child" t-transition="chimay"/>
+        </div>`;
      static components = { Child };
      state = useState({ flag: false });
-
-      toggle() {
-        this.state.flag = !this.state.flag;
-      }
    }

    const widget = new Parent();
    await widget.mount(fixture);
-    let button = widget.el!.querySelector("button");
+    expect(env.qweb.templates[Parent.template].fn.toString()).toMatchSnapshot();

    let def = makeDeferred();
    let phase = "enter";
@@ -357,24 +352,78 @@ describe("animations", () => {
      def.resolve();
    });

-    // click display the span
-    button!.click();
+    // display the span
+    widget.state.flag = true;
    await def; // wait for the mocked repaint to be done
    widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend")); // mock end of css transition
-    expect(fixture.innerHTML).toBe('<div><button>Toggle</button><span class="">blue</span></div>');
+    expect(fixture.innerHTML).toBe('<div><span class="">blue</span></div>');

    // click to remove the span, and click again to re-add it before transitionend
    def = makeDeferred();
    phase = "leave";
-    button!.click();
+
+    widget.state.flag = false;

    await def; // wait for the mocked repaint to be done
    def = makeDeferred();
    phase = "enter";
-    button!.click();
+    widget.state.flag = true;

    await def; // wait for the mocked repaint to be done
    widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend")); // mock end of css transition
-    expect(fixture.innerHTML).toBe('<div><button>Toggle</button><span class="">blue</span></div>');
+    expect(fixture.innerHTML).toBe('<div><span class="" data-owl-key="__5__">blue</span></div>');
+  });
+
+  test("transitionInsert is called the correct amount of times", async () => {
+    const oldTransitionInsert = QWeb.utils.transitionInsert;
+    QWeb.utils.transitionInsert = jest.fn(oldTransitionInsert);
+
+    class Child extends Widget {
+      static template = xml`<span>blue</span>`;
+    }
+    class Parent extends Widget {
+      static template = xml`
+        <div t-name="Parent">
+          <Child t-if="state.flag" t-transition="chimay"/>
+        </div>`;
+      static components = { Child };
+      state = useState({ flag: false });
+    }
+
+    patchNextFrame(cb => cb());
+
+    const widget = new Parent();
+    await widget.mount(fixture);
+
+    widget.state.flag = true;
+
+    await nextTick();
+    widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend"));
+    expect(fixture.innerHTML).toBe('<div><span class="">blue</span></div>');
+    expect(QWeb.utils.transitionInsert).toBeCalledTimes(1);
+
+    widget.state.flag = false;
+    await nextTick();
+    expect(fixture.innerHTML).toBe(
+      '<div><span class="chimay-leave-active chimay-leave-to" data-owl-key="__5__">blue</span></div>'
+    );
+    expect(QWeb.utils.transitionInsert).toBeCalledTimes(1);
+
+    widget.state.flag = true;
+    await nextTick();
+    expect(fixture.innerHTML).toBe(
+      '<div><span class="chimay-enter-active chimay-enter-to" data-owl-key="__5__">blue</span></div>'
+    );
+    expect(QWeb.utils.transitionInsert).toBeCalledTimes(2);
+
+    widget.state.flag = false;
+    await nextTick();
+    widget.state.flag = true;
+    await nextTick();
+
+    expect(QWeb.utils.transitionInsert).toBeCalledTimes(3);
+    widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend"));
+    expect(fixture.innerHTML).toBe('<div><span class="" data-owl-key="__5__">blue</span></div>');
+    QWeb.utils.transitionInsert = oldTransitionInsert;
  });
 });
@@ -7,7 +7,6 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
    let QWeb = this.constructor;
    let parent = context;
    let owner = context;
-    let sibling = null;
    var h = this.h;
    let c1 = [], p1 = {key:1};
    var vn1 = h('div', p1, c1);
@@ -20,7 +19,7 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
        w3 = false;
    }
    if (w3) {
-        w3.__updateProps(props3, extra.fiber, undefined, undefined, sibling);
+        w3.__updateProps(props3, extra.fiber, undefined, undefined);
        let pvnode = w3.__owl__.pvnode;
        c1.push(pvnode);
    } else {
@@ -29,15 +28,14 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
        if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
        w3 = new W3(parent, props3);
        parent.__owl__.cmap[k4] = w3.__owl__.id;
-        let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
-        let pvnode = h('dummy', {key: k4, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
+        let def2 = w3.__prepare(extra.fiber, undefined, undefined);
+        let pvnode = h('dummy', {key: k4, hook: {remove() {},destroy(vn) {w3.destroy();}}});
        const fiber = w3.__owl__.currentFiber;
        def2.then(function () { if (fiber.isCompleted) { return; } const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
        c1.push(pvnode);
        w3.__owl__.pvnode = pvnode;
    }
    w3.__owl__.parentLastFiberId = extra.fiber.id;
-    sibling = w3.__owl__.currentFiber || sibling;
    return vn1;
 }"
 `;
@@ -91,6 +91,17 @@ describe("basic widget properties", () => {
    expect(fixture.innerHTML).toBe("<div>content</div>");
  });

+  test("can be mounted on a documentFragment", async () => {
+    class SomeWidget extends Component<any, any> {
+      static template = xml`<div>content</div>`;
+    }
+    const widget = new SomeWidget();
+    await widget.mount(document.createDocumentFragment());
+    expect(fixture.innerHTML).toBe("");
+    await widget.mount(fixture);
+    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>`;
@@ -325,6 +336,26 @@ describe("basic widget properties", () => {
    await widget.mount(fixture);
    expect(fixture.innerHTML).toBe("<div><div><span>1</span></div><div><span>2</span></div></div>");
  });
+
+  test("t-key on a component with t-if, and a sibling component", async () => {
+    class Child extends Component<any, any> {
+      static template = xml`<span>child</span>`;
+    }
+
+    class Parent extends Component<any, any> {
+      static template = xml`
+        <div>
+          <Child t-if="false" t-key="'str'"/>
+          <Child/>
+        </div>`;
+      static components = { Child };
+    }
+
+    const widget = new Parent();
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><span>child</span></div>");
+    expect(env.qweb.templates[Parent.template].fn.toString()).toMatchSnapshot();
+  });
 });

 describe("lifecycle hooks", () => {
@@ -1351,7 +1382,13 @@ describe("composition", () => {
    class SubWidget extends Widget {}
    class Parent extends Widget {
      static components = { SubWidget };
-      state = useState({ blips: [{ a: "a", id: 1 }, { b: "b", id: 2 }, { c: "c", id: 4 }] });
+      state = useState({
+        blips: [
+          { a: "a", id: 1 },
+          { b: "b", id: 2 },
+          { c: "c", id: 4 }
+        ]
+      });
    }
    const parent = new Parent();
    await parent.mount(fixture);
@@ -1430,7 +1467,9 @@ describe("composition", () => {
      error = e;
    }
    expect(error).toBeDefined();
-    expect(error.message).toBe(`Directive 't-component' can only be used on <t> nodes (used on a <div>)`);
+    expect(error.message).toBe(
+      `Directive 't-component' can only be used on <t> nodes (used on a <div>)`
+    );
  });

  test("sub components, loops, and shouldUpdate", async () => {
@@ -1452,7 +1491,11 @@ describe("composition", () => {
            </t>
          </div>`;
      state = useState({
-        records: [{ id: 1, val: 1 }, { id: 2, val: 2 }, { id: 3, val: 3 }]
+        records: [
+          { id: 1, val: 1 },
+          { id: 2, val: 2 },
+          { id: 3, val: 3 }
+        ]
      });
      static components = { ChildWidget };
    }
@@ -1470,6 +1513,25 @@ describe("composition", () => {
      "<div><span>11</span><span>2</span><span>13</span></div>"
    );
  });
+
+  test("three level of components with collapsing root nodes", async () => {
+    class GrandChild extends Component<any, any> {
+      static template = xml`<div>2</div>`;
+    }
+    class Child extends Component<any, any> {
+      static components = { GrandChild };
+      static template = xml`<GrandChild/>`;
+    }
+    class Parent extends Component<any, any> {
+      static components = { Child };
+      static template = xml`<Child></Child>`;
+    }
+
+    const app = new Parent();
+    await app.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<div>2</div>");
+  });
 });

 describe("props evaluation ", () => {
@@ -1757,7 +1819,6 @@ describe("class and style attributes with t-component", () => {
    expect(error.message).toBe("Cannot read property 'crash' of undefined");
    expect(fixture.innerHTML).toBe("");
  });
-
 });

 describe("other directives with t-component", () => {
@@ -2094,6 +2155,40 @@ describe("other directives with t-component", () => {
    expect(env.qweb.templates[Parent.template].fn.toString()).toMatchSnapshot();
  });

+  test("t-on on nested components with collapsing root nodes", async () => {
+    const steps: string[] = [];
+    let grandChild;
+    class GrandChild extends Component<any, any> {
+      static template = xml`<span t-on-ev="_onEv"/>`;
+      constructor() {
+        super(...arguments);
+        grandChild = this;
+      }
+      _onEv() {
+        steps.push("GrandChild");
+      }
+    }
+    class Child extends Component<any, any> {
+      static template = xml`<GrandChild t-on-ev="_onEv"/>`;
+      static components = { GrandChild };
+      _onEv() {
+        steps.push("Child");
+      }
+    }
+    class Parent extends Component<any, any> {
+      static template = xml`<Child t-on-ev="_onEv"/>`;
+      static components = { Child };
+      _onEv() {
+        steps.push("Parent");
+      }
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    grandChild.trigger("ev");
+    expect(steps).toEqual(["GrandChild", "Child", "Parent"]);
+  });
+
  test("t-if works with t-component", async () => {
    env.qweb.addTemplate("ParentWidget", `<div><t t-component="child" t-if="state.flag"/></div>`);
    class Child extends Widget {}
@@ -2194,6 +2289,36 @@ describe("other directives with t-component", () => {
    await nextTick();
    expect(normalize(fixture.innerHTML)).toBe("<div><span>hey</span></div>");
  });
+
+  test("t-foreach with t-component, and update", async () => {
+    class Child extends Widget {
+      static template = xml`
+        <span>
+          <t t-esc="state.val"/>
+          <t t-esc="props.val"/>
+        </span>`;
+      state = useState({ val: "A" });
+      mounted() {
+        this.state.val = "B";
+      }
+    }
+    class ParentWidget extends Widget {
+      static components = { Child };
+      static template = xml`
+        <div>
+          <t t-foreach="Array(2)" t-as="n" t-key="n_index">
+            <Child val="n_index"/>
+          </t>
+        </div>`;
+    }
+
+    const widget = new ParentWidget();
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><span>A0</span><span>A1</span></div>");
+
+    await nextTick(); // wait for changes triggered in mounted to be applied
+    expect(fixture.innerHTML).toBe("<div><span>B0</span><span>B1</span></div>");
+  });
 });

 describe("random stuff/miscellaneous", () => {
@@ -2294,10 +2419,6 @@ describe("random stuff/miscellaneous", () => {
        steps.push(`${this.name}:__patch`);
        super.__patch(vnode);
      }
-      __mount(vnode, elm) {
-        steps.push(`${this.name}:__patch(from __mount)`);
-        return super.__mount(vnode, elm);
-      }
      mounted() {
        steps.push(`${this.name}:mounted`);
      }
@@ -2394,15 +2515,15 @@ describe("random stuff/miscellaneous", () => {
      "E:willStart",
      "D:render",
      "E:render",
+      "E:__patch",
+      "D:__patch",
+      "C:__patch",
+      "B:__patch",
      "A:__patch",
-      "B:__patch(from __mount)",
-      "C:__patch(from __mount)",
-      "D:__patch(from __mount)",
-      "E:__patch(from __mount)",
-      "B:mounted",
-      "D:mounted",
      "E:mounted",
+      "D:mounted",
      "C:mounted",
+      "B:mounted",
      "A:mounted"
    ]);

@@ -2419,12 +2540,12 @@ describe("random stuff/miscellaneous", () => {
      "F:render",
      "C:willPatch",
      "D:willPatch",
+      "F:__patch",
+      "D:__patch",
      "C:__patch",
      "E:willUnmount",
      "E:destroy",
-      "F:__patch(from __mount)",
      "F:mounted",
-      "D:__patch",
      "D:patched",
      "C:patched"
    ]);
@@ -3527,6 +3648,43 @@ describe("async rendering", () => {
    expect(Parent.prototype.__render).toHaveBeenCalledTimes(3);
  });

+  test("concurrent renderings scenario 13", async () => {
+    let lastChild;
+    class Child extends Component<any, any> {
+      static template = xml`<span><t t-esc="state.val"/></span>`;
+      state = useState({ val: 0 });
+      mounted() {
+        if (lastChild) {
+          lastChild.state.val = 0;
+        }
+        lastChild = this;
+        this.state.val = 1;
+      }
+    }
+
+    class Parent extends Component<any, any> {
+      static template = xml`
+        <div>
+          <Child/>
+          <Child t-if="state.bool"/>
+        </div>`;
+      static components = { Child };
+      state = useState({ bool: false });
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><span>0</span></div>");
+
+    await nextTick(); // wait for changes triggered in mounted to be applied
+    expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
+
+    parent.state.bool = true;
+    await nextTick(); // wait for this change to be applied
+    await nextTick(); // wait for changes triggered in mounted to be applied
+    expect(fixture.innerHTML).toBe("<div><span>0</span><span>1</span></div>");
+  });
+
  test("change state and call manually render: no unnecessary rendering", async () => {
    class Widget extends Component<any, any> {
      static template = xml`<div><t t-esc="state.val"/></div>`;
@@ -3719,7 +3877,12 @@ describe("t-slot directive", () => {
    class Link extends Widget {}

    class App extends Widget {
-      state = useState({ users: [{ id: 1, name: "Aaron" }, { id: 2, name: "David" }] });
+      state = useState({
+        users: [
+          { id: 1, name: "Aaron" },
+          { id: 2, name: "David" }
+        ]
+      });
      static components = { Link };
    }

@@ -3758,7 +3921,12 @@ describe("t-slot directive", () => {
    class Link extends Widget {}

    class App extends Widget {
-      state = useState({ users: [{ id: 1, name: "Aaron" }, { id: 2, name: "David" }] });
+      state = useState({
+        users: [
+          { id: 1, name: "Aaron" },
+          { id: 2, name: "David" }
+        ]
+      });
      static components = { Link };
    }

@@ -4017,6 +4185,37 @@ describe("t-slot directive", () => {
    expect(childrenChildren[0]).toBeInstanceOf(GrandChild);
  });

+  test("nested slots: evaluation context and parented relationship", async () => {
+    let slot;
+    class Slot extends Component<any, any> {
+      static template = xml`<span t-esc="props.val"/>`;
+      constructor(parent, props) {
+        super(parent, props);
+        slot = this;
+      }
+    }
+    class GrandChild extends Component<any, any> {
+      static template = xml`<div><t t-slot="default"/></div>`;
+    }
+    class Child extends Component<any, any> {
+      static components = { GrandChild };
+      static template = xml`
+        <GrandChild>
+          <t t-slot="default"/>
+        </GrandChild>`;
+    }
+    class Parent extends Component<any, any> {
+      static components = { Child, Slot };
+      static template = xml`<Child><Slot val="state.val"/></Child>`;
+      state = useState({ val: 3 });
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<div><span>3</span></div>");
+    expect(slot.__owl__.parent).toBeInstanceOf(GrandChild);
+  });
+
  test("slot are properly rendered if inner props are changed", async () => {
    env.qweb.addTemplates(`
    <templates>
@@ -4101,6 +4300,84 @@ describe("t-slot directive", () => {
    await nextTick();
    expect(fixture.innerHTML).toBe("<div><span>5</span></div>");
  });
+
+  test("multiple slots containing components", async () => {
+    class C extends Component<any, any> {
+      static template = xml`<span><t t-esc="props.val"/></span>`;
+    }
+    class B extends Component<any, any> {
+      static template = xml`<div><t t-slot="s1"/><t t-slot="s2"/></div>`;
+    }
+    class A extends Component<any, any> {
+      static template = xml`
+        <B>
+          <t t-set="s1"><C val="1"/></t>
+          <t t-set="s2"><C val="2"/></t>
+        </B>`;
+      static components = { B, C };
+    }
+
+    const a = new A();
+    await a.mount(fixture);
+
+    expect(fixture.innerHTML).toBe(`<div><span>1</span><span>2</span></div>`);
+  });
+
+  test("slots in t-foreach and re-rendering", async () => {
+    class Child extends Widget {
+      static template = xml`<span><t t-esc="state.val"/><t t-slot="default"/></span>`;
+      state = useState({ val: "A" });
+      mounted() {
+        this.state.val = "B";
+      }
+    }
+    class Parent extends Widget {
+      static components = { Child };
+      static template = xml`
+        <div>
+          <t t-foreach="Array(2)" t-as="n" t-key="n_index">
+            <Child><t t-esc="n_index"/></Child>
+          </t>
+        </div>`;
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><span>A0</span><span>A1</span></div>");
+
+    await nextTick(); // wait for the changes triggered in mounted to be applied
+    expect(fixture.innerHTML).toBe("<div><span>B0</span><span>B1</span></div>");
+  });
+
+  test("slots in t-foreach with t-set and re-rendering", async () => {
+    class Child extends Widget {
+      static template = xml`
+        <span>
+          <t t-esc="state.val"/>
+          <t t-slot="default"/>
+        </span>`;
+      state = useState({ val: "A" });
+      mounted() {
+        this.state.val = "B";
+      }
+    }
+    class ParentWidget extends Widget {
+      static components = { Child };
+      static template = xml`
+        <div>
+          <t t-foreach="Array(2)" t-as="n" t-key="n_index">
+            <t t-set="dummy" t-value="n_index"/>
+            <Child><t t-esc="dummy"/></Child>
+          </t>
+        </div>`;
+    }
+
+    const widget = new ParentWidget();
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><span>A0</span><span>A1</span></div>");
+
+    await nextTick(); // wait for changes triggered in mounted to be applied
+    expect(fixture.innerHTML).toBe("<div><span>B0</span><span>B1</span></div>");
+  });
 });

 describe("t-model directive", () => {
@@ -4394,7 +4671,11 @@ describe("t-model directive", () => {
          </t>
        </div>
      `;
-      state = useState([{ f: false, id: 1 }, { f: false, id: 2 }, { f: false, id: 3 }]);
+      state = useState([
+        { f: false, id: 1 },
+        { f: false, id: 2 },
+        { f: false, id: 3 }
+      ]);
    }
    const comp = new SomeComponent();
    await comp.mount(fixture);
@@ -4557,7 +4838,7 @@ describe("component error handling (catchError)", () => {
    expect(handler).toBeCalledTimes(1);
  });

-  test("can catch an error in the initial call of a component render function", async () => {
+  test("can catch an error in the initial call of a component render function (parent mounted)", async () => {
    const handler = jest.fn();
    env.qweb.on("error", null, handler);
    const consoleError = console.error;
@@ -4593,6 +4874,45 @@ describe("component error handling (catchError)", () => {
    expect(handler).toBeCalledTimes(1);
  });

+  test("can catch an error in the initial call of a component render function (parent updated)", async () => {
+    const handler = jest.fn();
+    env.qweb.on("error", null, handler);
+    const consoleError = console.error;
+    console.error = jest.fn();
+    class ErrorComponent extends Component<any, any> {
+      static template = xml`<div>hey<t t-esc="state.this.will.crash"/></div>`;
+    }
+    class ErrorBoundary extends Component<any, any> {
+      static template = xml`
+        <div>
+          <t t-if="state.error">Error handled</t>
+          <t t-else="1"><t t-slot="default" /></t>
+        </div>`;
+      state = useState({ error: false });
+
+      catchError() {
+        this.state.error = true;
+      }
+    }
+    class App extends Component<any, any> {
+      static template = xml`
+        <div>
+            <ErrorBoundary t-if="state.flag"><ErrorComponent /></ErrorBoundary>
+        </div>`;
+      state = useState({ flag: false });
+      static components = { ErrorBoundary, ErrorComponent };
+    }
+    const app = new App();
+    await app.mount(fixture);
+    app.state.flag = true;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
+
+    expect(console.error).toBeCalledTimes(0);
+    console.error = consoleError;
+    expect(handler).toBeCalledTimes(1);
+  });
+
  test("can catch an error in the constructor call of a component render function", async () => {
    const handler = jest.fn();
    env.qweb.on("error", null, handler);
@@ -4672,41 +4992,35 @@ describe("component error handling (catchError)", () => {
  test.skip("can catch an error in the mounted call", async () => {
    // we do not catch error in mounted anymore
    console.error = jest.fn();
-    env.qweb.addTemplates(`
-      <templates>
-        <div t-name="ErrorBoundary">
-            <t t-if="state.error">Error handled</t>
-            <t t-else="1"><t t-slot="default" /></t>
-        </div>
-        <div t-name="ErrorComponent">Some text</div>
-        <div t-name="App">
-            <ErrorBoundary><ErrorComponent /></ErrorBoundary>
-        </div>
-      </templates>`);
-    class ErrorComponent extends Widget {
+
+    class ErrorComponent extends Component<any,any> {
+      static template = xml`<div>Some text</div>`;
      mounted() {
        throw new Error("NOOOOO");
      }
    }
-    class ErrorBoundary extends Widget {
+    class ErrorBoundary extends Component<any,any> {
+      static template = xml`
+        <div>
+          <t t-if="state.error">Error handled</t>
+          <t t-else="1"><t t-slot="default" /></t>
+        </div>`;
      state = useState({ error: false });

      catchError() {
        this.state.error = true;
      }
    }
-    class App extends Widget {
+    class App extends Component<any,any> {
+      static template = xml`<div><ErrorBoundary><ErrorComponent /></ErrorBoundary></div>`;
      static components = { ErrorBoundary, ErrorComponent };
    }
    const app = new App();
    await app.mount(fixture);
-    await nextTick();
-    await nextTick();
-    await nextTick();
    expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
  });

-  test.skip("can catch an error in the willPatch call", async () => {
+  test("can catch an error in the willPatch call", async () => {
    // we do not catch error in willPatch anymore
    const consoleError = console.error;
    console.error = jest.fn();
@@ -4734,18 +5048,16 @@ describe("component error handling (catchError)", () => {
            <span><t t-esc="state.message"/></span>
          <ErrorBoundary><ErrorComponent message="state.message" /></ErrorBoundary>
        </div>`;
-      state = useState({ message: "abc" });
+      state = { message: "abc" };
      static components = { ErrorBoundary, ErrorComponent };
    }
    const app = new App();
    await app.mount(fixture);
    expect(fixture.innerHTML).toBe("<div><span>abc</span><div><div>abc</div></div></div>");
    app.state.message = "def";
-    await nextTick();
-    await nextTick();
-    await nextTick();
+    await app.render();
    expect(fixture.innerHTML).toBe("<div><span>def</span><div>Error handled</div></div>");
-    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(console.error).toHaveBeenCalledTimes(0);
    console.error = consoleError;
  });

@@ -5263,6 +5575,73 @@ describe("unmounting and remounting", () => {
    expect(TestWidget.prototype.__patch).toHaveBeenCalledTimes(2);
    expect(steps).toEqual([2, 2, 3]);
  });
+
+  test("change state while component is unmounted", async () => {
+    let child;
+    class Child extends Component<any, any> {
+      static template = xml`<span t-esc="state.val"/>`;
+      state = useState({
+        val: "C1"
+      });
+      constructor(parent, props) {
+        super(parent, props);
+        child = this;
+      }
+    }
+
+    class Parent extends Component<any, any> {
+      static components = { Child };
+      static template = xml`<div><t t-esc="state.val"/><Child/></div>`;
+      state = useState({ val: "P1" });
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div>P1<span>C1</span></div>");
+
+    parent.unmount();
+    expect(fixture.innerHTML).toBe("");
+
+    parent.state.val = "P2";
+    child.state.val = "C2";
+
+    await parent.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div>P2<span>C2</span></div>");
+  });
+
+  test("unmount component during a re-rendering", async () => {
+    const def = makeDeferred();
+    class Child extends Widget {
+      static template = xml`<span><t t-esc="props.val"/></span>`;
+      willUpdateProps() {
+        return def;
+      }
+    }
+    Child.prototype.__render = jest.fn(Child.prototype.__render);
+
+    class Parent extends Widget {
+      static template = xml`<div><Child val="state.val"/></div>`;
+      static components = { Child };
+      state = useState({ val: 1 });
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
+    expect(Child.prototype.__render).toBeCalledTimes(1);
+
+    parent.state.val = 2;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
+
+    parent.unmount();
+    expect(fixture.innerHTML).toBe("");
+
+    def.resolve();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("");
+    expect(Child.prototype.__render).toBeCalledTimes(1);
+  });
 });

 describe("dynamic root nodes", () => {
@@ -138,7 +138,7 @@ describe("props validation", () => {
        error = e;
      }
      expect(error).toBeDefined();
-      expect(error.message).toBe(`Props 'p' of invalid type in component '_a'`);
+      expect(error.message).toBe("Invalid Prop 'p' in component '_a'");
    }
  });

@@ -195,7 +195,7 @@ describe("props validation", () => {
        error = e;
      }
      expect(error).toBeDefined();
-      expect(error.message).toBe(`Props 'p' of invalid type in component '_a'`);
+      expect(error.message).toBe("Invalid Prop 'p' in component '_a'");
    }
  });

@@ -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("Invalid Prop 'p' in component 'TestWidget'");
  });

  test("can validate an optional props", async () => {
@@ -284,7 +284,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("Invalid Prop 'p' in component 'TestWidget'");
  });

  test("can validate an array with given primitive type", async () => {
@@ -389,7 +389,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("Invalid Prop 'p' in component 'TestWidget'");
  });

  test("can validate an object with simple shape", async () => {
@@ -436,7 +436,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("Invalid Prop 'p' in component 'TestWidget'");

    error = undefined;
    try {
@@ -447,7 +447,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("Invalid Prop 'p' in component 'TestWidget'");
  });

  test("can validate recursively complicated prop def", async () => {
@@ -499,7 +499,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("Invalid Prop 'p' in component 'TestWidget'");
  });

  test("can validate optional attributes in nested sub props", () => {
@@ -535,6 +535,70 @@ describe("props validation", () => {
    );
  });

+  test("can validate with a custom validator", () => {
+    class TestComponent extends Component<any, any> {
+      static props = {
+        size: {
+          validate: e => ["small", "medium", "large"].includes(e)
+        }
+      };
+    }
+    let error;
+    try {
+      QWeb.utils.validateProps(TestComponent, { size: "small" });
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeUndefined();
+
+    try {
+      QWeb.utils.validateProps(TestComponent, { size: "abcdef" });
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Invalid Prop 'size' in component 'TestComponent'");
+  });
+
+  test("can validate with a custom validator, and a type", () => {
+    const validator = jest.fn(n => 0 <= n && n <= 10);
+    class TestComponent extends Component<any, any> {
+      static props = {
+        n: {
+          type: Number,
+          validate: validator
+        }
+      };
+    }
+    let error;
+    try {
+      QWeb.utils.validateProps(TestComponent, { n: 3 });
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeUndefined();
+    expect(validator).toBeCalledTimes(1);
+
+    try {
+      QWeb.utils.validateProps(TestComponent, { n: "str" });
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Invalid Prop 'n' in component 'TestComponent'");
+    expect(validator).toBeCalledTimes(1);
+
+    error = null;
+    try {
+      QWeb.utils.validateProps(TestComponent, { n: 100 });
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Invalid Prop 'n' in component 'TestComponent'");
+    expect(validator).toBeCalledTimes(2);
+  });
+
  test("props are validated in dev mode (code snapshot)", async () => {
    env.qweb.addTemplates(`
      <templates>
@@ -591,7 +655,7 @@ describe("props validation", () => {
    }).not.toThrow();
    expect(() => {
      QWeb.utils.validateProps(TestWidget, { myprop: 1 });
-    }).toThrow(`Props 'myprop' of invalid type in component 'TestWidget'`);
+    }).toThrow(`Invalid Prop 'myprop' in component 'TestWidget'`);
  });

  test("props with type object, and no shape", async () => {
@@ -604,7 +668,7 @@ describe("props validation", () => {
    }).not.toThrow();
    expect(() => {
      QWeb.utils.validateProps(TestWidget, { myprop: false });
-    }).toThrow(`Props 'myprop' of invalid type in component 'TestWidget'`);
+    }).toThrow(`Invalid Prop 'myprop' in component 'TestWidget'`);
  });

  test("props: extra props cause an error", async () => {
@@ -85,7 +85,7 @@ function getFiles(path: string[] = []): FileData[] {
  return Array.prototype.concat(...files);
 }

-const LOCAL_FILES = ["LICENSE"];
+const LOCAL_FILES = ["LICENSE", "tools/debug.js"];
 export function isLinkValid(link: MarkDownLink, current: FileData, files: FileData[]): boolean {
  if (link.link.startsWith("http")) {
    // no check on external links
@@ -1,6 +1,7 @@
 import { Env } from "../src/component/component";
 import { scheduler } from "../src/component/scheduler";
 import { EvalContext, QWeb } from "../src/qweb/qweb";
+import { CompilationContext } from "../src/qweb/compilation_context";
 import { patch } from "../src/vdom";
 import "../src/qweb/base_directives";
 import "../src/qweb/extensions";
@@ -20,6 +21,7 @@ let TEMPLATES;

 beforeEach(() => {
  nextSlotId = QWeb.nextSlotId;
+  CompilationContext.nextID = 1;
  slots = Object.assign({}, QWeb.slots);
  nextId = QWeb.nextId;
  TEMPLATES = Object.assign({}, QWeb.TEMPLATES);
@@ -673,6 +673,40 @@ describe("t-call (template calling", () => {
    expect(renderToString(qweb, "main")).toBe(expected);
  });

+  test("cascading t-call t-raw='0'", () => {
+    qweb.addTemplates(`
+        <templates>
+            <div t-name="finalTemplate">
+              <span>cascade 2</span>
+              <t t-raw="0"/>
+            </div>
+
+            <div t-name="subSubTemplate">
+              <t t-call="finalTemplate">
+                <span>cascade 1</span>
+                <t t-raw="0"/>
+              </t>
+            </div>
+
+            <div t-name="SubTemplate">
+              <t t-call="subSubTemplate">
+                <span>cascade 0</span>
+                <t t-raw="0"/>
+              </t>
+            </div>
+
+            <div t-name="main">
+              <t t-call="SubTemplate">
+                <span>hey</span> <span>yay</span>
+              </t>
+            </div>
+        </templates>
+    `);
+    const expected =
+      "<div><div><div><div><span>cascade 2</span><span>cascade 1</span><span>cascade 0</span><span>hey</span> <span>yay</span></div></div></div></div>";
+    expect(renderToString(qweb, "main")).toBe(expected);
+  });
+
  test("recursive template, part 1", () => {
    qweb.addTemplates(`
        <templates>
@@ -1225,7 +1259,10 @@ describe("t-on", () => {
    );
    const steps: string[] = [];
    const owner = {
-      projects: [{ id: 1, name: "Project 1" }, { id: 2, name: "Project 2" }],
+      projects: [
+        { id: 1, name: "Project 1" },
+        { id: 2, name: "Project 2" }
+      ],

      onEdit(projectId, ev) {
        expect(ev.defaultPrevented).toBe(true);
@@ -27,7 +27,10 @@ describe("tokenizer", () => {
      { type: "VALUE", value: "2" },
      { type: "RIGHT_BRACE", value: "}" }
    ]);
-    expect(tokenize("a,")).toEqual([{ type: "SYMBOL", value: "a" }, { type: "COMMA", value: "," }]);
+    expect(tokenize("a,")).toEqual([
+      { type: "SYMBOL", value: "a" },
+      { type: "COMMA", value: "," }
+    ]);
    expect(tokenize("][")).toEqual([
      { type: "RIGHT_BRACKET", value: "]" },
      { type: "LEFT_BRACKET", value: "[" }
@@ -5,18 +5,17 @@ exports[`Link component can render simple cases 1`] = `
 ) {
    let utils = this.constructor.utils;
    let owner = context;
-    let sibling = null;
    var h = this.h;
-    let _1 = utils.toObj({'router-link-active':context['isActive']});
-    var _2 = context['href'];
-    let c3 = [], p3 = {key:3,attrs:{href: _2},class:_1,on:{}};
-    var vn3 = h('a', p3, c3);
-    extra.handlers['click' + 3] = extra.handlers['click' + 3] || function (e) {const fn = context['navigate'];if (fn) { fn.call(owner, e); } else { context.navigate; }};
-    p3.on['click'] = extra.handlers['click' + 3];
-    const slot4 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
-    if (slot4) {
-        slot4.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: c3, vars: extra.vars, parent: owner}));
+    let _6 = utils.toObj({'router-link-active':context['isActive']});
+    var _7 = context['href'];
+    let c8 = [], p8 = {key:8,attrs:{href: _7},class:_6,on:{}};
+    var vn8 = h('a', p8, c8);
+    extra.handlers['click' + 8] = extra.handlers['click' + 8] || function (e) {const fn = context['navigate'];if (fn) { fn.call(owner, e); } else { context.navigate; }};
+    p8.on['click'] = extra.handlers['click' + 8];
+    const slot9 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
+    if (slot9) {
+        slot9.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: c8, vars: extra.vars, parent: extra.parent || owner}));
    }
-    return vn3;
+    return vn8;
 }"
 `;
@@ -7,40 +7,38 @@ exports[`RouteComponent can render simple cases 1`] = `
    let QWeb = this.constructor;
    let parent = context;
    let owner = context;
-    let sibling = null;
    let result;
    var h = this.h;
    if (context['routeComponent']) {
-        const nodeKey1 = context['env'].router.currentRouteName;
+        const nodeKey6 = context['env'].router.currentRouteName;
        //COMPONENT
-        let k4 = \`__5__\` + nodeKey1;
-        let w3 = k4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k4]] : false;
-        let vn6 = {};
-        result = vn6;
-        let props3 = Object.assign({}, context['env'].router.currentParams);
-        if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) {
-            w3.destroy();
-            w3 = false;
+        let k9 = \`__10__\` + nodeKey6;
+        let w8 = k9 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k9]] : false;
+        let vn11 = {};
+        result = vn11;
+        let props8 = Object.assign({}, context['env'].router.currentParams);
+        if (w8 && w8.__owl__.currentFiber && !w8.__owl__.vnode) {
+            w8.destroy();
+            w8 = false;
        }
-        if (w3) {
-            w3.__updateProps(props3, extra.fiber, undefined, undefined, sibling);
-            let pvnode = w3.__owl__.pvnode;
-            utils.defineProxy(vn6, pvnode);
+        if (w8) {
+            w8.__updateProps(props8, extra.fiber, undefined, undefined);
+            let pvnode = w8.__owl__.pvnode;
+            utils.defineProxy(vn11, pvnode);
        } else {
-            let componentKey3 = \`routeComponent\`;
-            let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| context['routeComponent'];
-            if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
-            w3 = new W3(parent, props3);
-            parent.__owl__.cmap[k4] = w3.__owl__.id;
-            let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
-            let pvnode = h('dummy', {key: k4, 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 (fiber.isCompleted) { return; } const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
-            utils.defineProxy(vn6, pvnode);
-            w3.__owl__.pvnode = pvnode;
+            let componentKey8 = \`routeComponent\`;
+            let W8 = context.constructor.components[componentKey8] || QWeb.components[componentKey8]|| context['routeComponent'];
+            if (!W8) {throw new Error('Cannot find the definition of component \\"' + componentKey8 + '\\"')}
+            w8 = new W8(parent, props8);
+            parent.__owl__.cmap[k9] = w8.__owl__.id;
+            let def7 = w8.__prepare(extra.fiber, undefined, undefined);
+            let pvnode = h('dummy', {key: k9, hook: {remove() {},destroy(vn) {w8.destroy();}}});
+            const fiber = w8.__owl__.currentFiber;
+            def7.then(function () { if (fiber.isCompleted) { return; } const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            utils.defineProxy(vn11, pvnode);
+            w8.__owl__.pvnode = pvnode;
        }
-        w3.__owl__.parentLastFiberId = extra.fiber.id;
-        sibling = w3.__owl__.currentFiber || sibling;
+        w8.__owl__.parentLastFiberId = extra.fiber.id;
    }
    return result;
 }"
@@ -35,7 +35,10 @@ describe("Link component", () => {
      static components = { Link: Link };
    }

-    const routes = [{ name: "about", path: "/about" }, { name: "users", path: "/users" }];
+    const routes = [
+      { name: "about", path: "/about" },
+      { name: "users", path: "/users" }
+    ];

    router = new TestRouter(env, routes, { mode: "history" });
    router.navigate({ to: "users" });
@@ -66,7 +69,10 @@ describe("Link component", () => {
      static components = { Link: Link };
    }

-    const routes = [{ name: "about", path: "/about" }, { name: "users", path: "/users" }];
+    const routes = [
+      { name: "about", path: "/about" },
+      { name: "users", path: "/users" }
+    ];

    router = new TestRouter(env, routes, { mode: "history" });
    router.navigate({ to: "users" });
@@ -48,6 +48,42 @@ describe("connecting a component to store", () => {
    expect(fixture.innerHTML).toBe("<div><span>hello</span></div>");
  });

+  test("useStore can observe primitive types and call onUpdate", async () => {
+    const state = { isBoolean: false };
+    const actions = {
+      setTrue({ state }) {
+        state.isBoolean = true;
+      }
+    };
+    const store = new Store({ state, actions });
+
+    class App extends Component<any, any> {
+      static template = xml`
+            <div>
+                <span t-if="isBoolean">ok</span>
+            </div>`;
+      isBoolean: boolean;
+      constructor() {
+        super();
+        this.isBoolean = useStore(state => state.isBoolean, {
+          onUpdate: isBoolean => {
+            this.isBoolean = isBoolean;
+          }
+        });
+      }
+    }
+
+    (<any>env).store = store;
+    const app = new App();
+
+    await app.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div></div>");
+
+    store.dispatch("setTrue");
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span>ok</span></div>");
+  });
+
  test("throw error if no store is found", async () => {
    class App extends Component<any, any> {
      static template = xml`<div></div>`;
@@ -64,6 +100,24 @@ describe("connecting a component to store", () => {
    expect(error.message).toBe("No store found when connecting 'App'");
  });

+  test("cannot modify state returned by usestore", async () => {
+    const state = { a: { b: 1 } };
+    const actions = {};
+    const store = new Store({ state, actions });
+
+    class App extends Component<any, any> {
+      static template = xml`<div/>`;
+      storeState = useStore(state => state.a);
+    }
+
+    (<any>env).store = store;
+    const app = new App();
+    expect(app.storeState.b).toBe(1);
+    expect(() => (app.storeState.b = 2)).toThrow(
+      "Store state should only be modified through actions"
+    );
+  });
+
  test("can use useStore twice in a component", async () => {
    const state = { a: 1, b: 2 };
    const actions = {
@@ -257,7 +311,12 @@ describe("connecting a component to store", () => {
  });

  test("useStore can use props", async () => {
-    const state = { todos: [{ id: 1, text: "jupiler" }, { id: 2, text: "chimay" }] };
+    const state = {
+      todos: [
+        { id: 1, text: "jupiler" },
+        { id: 2, text: "chimay" }
+      ]
+    };
    const store = new Store({ state, actions: {} });

    class TodoItem extends Component<any, any> {
@@ -324,7 +383,10 @@ describe("connecting a component to store", () => {
  test("can call useGetters to receive store getters", async () => {
    const state = {
      importantID: 1,
-      todos: [{ id: 1, text: "jupiler" }, { id: 2, text: "bertinchamps" }]
+      todos: [
+        { id: 1, text: "jupiler" },
+        { id: 2, text: "bertinchamps" }
+      ]
    };
    const getters = {
      importantTodoText({ state }) {
@@ -428,6 +490,68 @@ describe("connecting a component to store", () => {
    expect(fixture.innerHTML).toBe("<div><span>jupiler</span><span>kwak</span></div>");
  });

+  test("connected component is updated when mixing store and props changes", async () => {
+    let counter = 0;
+
+    class Beer extends Component<any, any> {
+      static template = xml`<span><t t-esc="beer.name"/></span>`;
+      beer = useStore((state, props) => state.beers[props.id], {
+        onUpdate: result => {
+          ++counter;
+        }
+      });
+    }
+
+    class App extends Component<any, any> {
+      static template = xml`<div><Beer id="state.beerId"/></div>`;
+      static components = { Beer };
+      state = useState({ beerId: 1 });
+    }
+
+    const state = { beers: { 1: { name: "jupiler" }, 2: { name: "kwak" } } };
+    const actions = {
+      renameBeer({ state }, { id, name }) {
+        state.beers[id].name = name;
+      }
+    };
+    const store = new Store({ state, actions });
+    (<any>env).store = store;
+    const app = new App();
+
+    await app.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><span>jupiler</span></div>");
+    expect(counter).toBe(0);
+
+    app.state.beerId = 2;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span>kwak</span></div>");
+    expect(counter).toBe(1);
+
+    store.dispatch("renameBeer", { id: 2, name: "orval" });
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span>orval</span></div>");
+    expect(counter).toBe(2);
+  });
+
+  test("connected component is properly cleaned up on destroy", async () => {
+    class App extends Component<any, any> {
+      static template = xml`<div></div>`;
+      state = useStore((state, props) => state);
+    }
+
+    const store = new Store({ state: {} });
+    (<any>env).store = store;
+    const app = new App();
+
+    await app.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div></div>");
+    expect(store.updateFunctions[app.__owl__.id].length).toBe(1);
+
+    app.destroy();
+
+    expect(store.updateFunctions[app.__owl__.id]).toBe(undefined);
+  });
+
  test("connected component with undefined, null and string props", async () => {
    class Beer extends Component<any, any> {
      static template = xml`
@@ -0,0 +1,137 @@
+/**
+ * Debug Script
+ *
+ * This code is intended to be evaluated in an environment where owl is available,
+ * to log lot of helpful information on how Owl components behave.
+ */
+
+let debugSetup = {
+  // componentBlackList: /App/,  // regexp
+  // componentWhiteList: /SomeComponent/, // regexp
+  // methodBlackList: ["mounted"], // list of method names
+  // methodWhiteList: ["willStart"], // list of method names
+  logScheduler: true, // display/mute scheduler logs
+  logStore: true // display/mute store logs
+};
+{
+  let prefix = "[OWL_DEBUG]";
+  let current;
+  Object.defineProperty(owl.Component, "current", {
+    get() {
+      return current;
+    },
+    set(comp) {
+      current = comp;
+      const name = comp.constructor.name;
+      if (debugSetup.componentBlackList && debugSetup.componentBlackList.test(name)) {
+        return;
+      }
+      if (debugSetup.componentWhiteList && !debugSetup.componentWhiteList.test(name)) {
+        return;
+      }
+      let __owl__;
+      Object.defineProperty(current, "__owl__", {
+        get() {
+          return __owl__;
+        },
+        set(val) {
+          __owl__ = val;
+          debugComponent(comp, name, __owl__.id);
+        }
+      });
+    }
+  });
+
+  function toStr(obj) {
+    let str = JSON.stringify(obj || {});
+    if (str.length > 200) {
+      str = str.slice(0, 200) + "...";
+    }
+    return str;
+  }
+
+  function debugComponent(component, name, id) {
+    let fullName = `${name}<id=${id}>`;
+    let shouldDebug = method => {
+      if (debugSetup.methodBlackList && debugSetup.methodBlackList.includes(method)) {
+        return false;
+      }
+      if (debugSetup.methodWhiteList && !debugSetup.methodWhiteList.includes(method)) {
+        return false;
+      }
+      return true;
+    };
+    if (shouldDebug("constructor")) {
+      console.log(`${prefix} ${fullName} constructor, props=${toStr(component.props)}`);
+    }
+    if (shouldDebug("willStart")) {
+      owl.hooks.onWillStart(() => {
+        console.log(`${prefix} ${fullName} willStart`);
+      });
+    }
+    if (shouldDebug("mounted")) {
+      owl.hooks.onMounted(() => {
+        console.log(`${prefix} ${fullName} mounted`);
+      });
+    }
+    if (shouldDebug("willUpdateProps")) {
+      owl.hooks.onWillUpdateProps(nextProps => {
+        console.log(`${prefix} ${fullName} willUpdateProps, nextprops=${toStr(nextProps)}`);
+      });
+    }
+    if (shouldDebug("willPatch")) {
+      owl.hooks.onWillPatch(() => {
+        console.log(`${prefix} ${fullName} willPatch`);
+      });
+    }
+    if (shouldDebug("patched")) {
+      owl.hooks.onPatched(() => {
+        console.log(`${prefix} ${fullName} patched`);
+      });
+    }
+    if (shouldDebug("willUnmount")) {
+      owl.hooks.onWillUnmount(() => {
+        console.log(`${prefix} ${fullName} willUnmount`);
+      });
+    }
+    const __render = component.__render.bind(component);
+    component.__render = function(...args) {
+      console.log(`${prefix} ${fullName} rendering template`);
+      __render(...args);
+    };
+    const render = component.render.bind(component);
+    component.render = function(...args) {
+      console.log(`${prefix} ${fullName} render`);
+      return render(...args);
+    };
+    const mount = component.mount.bind(component);
+    component.mount = function(...args) {
+      console.log(`${prefix} ${fullName} mount`);
+      return mount(...args);
+    };
+  }
+
+  if (debugSetup.logScheduler) {
+    let isRunning;
+    Object.defineProperty(owl.Component.scheduler, "isRunning", {
+      get() {
+        return isRunning;
+      },
+      set(val) {
+        if (val) {
+          console.log(`${prefix} scheduler: start running tasks queue`);
+        } else {
+          console.log(`${prefix} scheduler: stop running tasks queue`);
+        }
+        isRunning = val;
+      }
+    });
+  }
+  if (debugSetup.logStore) {
+    let dispatch = owl.Store.prototype.dispatch;
+    owl.Store.prototype.dispatch = function(action, ...payload) {
+      console.log(`${prefix} store: action '${action}' dispatched. Payload: '${toStr(payload)}'`);
+      return dispatch.call(this, action, ...payload);
+    };
+  }
+}
@@ -2,7 +2,10 @@ const COMPONENTS = `// In this example, we show how components can be defined an
 const { Component, useState } = owl;

 class Greeter extends Component {
-    state = useState({ word: 'Hello' });
+    constructor() {
+        super(...arguments);
+        this.state = useState({ word: 'Hello' });
+    }

    toggle() {
        this.state.word = this.state.word === 'Hi' ? 'Hello' : 'Hi';
@@ -11,7 +14,10 @@ class Greeter extends Component {

 // Main root component
 class App extends Component {
-    state = useState({ name: 'World'});
+    constructor() {
+        super(...arguments);
+        this.state = useState({ name: 'World'});
+    }
 }
 App.components = { Greeter };

@@ -47,7 +53,10 @@ const ANIMATION = `// The goal of this component is to see how the t-transition
 const { Component, useState } = owl;

 class Counter extends Component {
-    state = useState({ value: 0 });
+    constructor() {
+        super(...arguments);
+        this.state = useState({ value: 0 });
+    }

    increment() {
        this.state.value++;
@@ -55,7 +64,10 @@ class Counter extends Component {
 }

 class App extends Component {
-    state = useState({ flag: false, componentFlag: false, numbers: [] });
+    constructor() {
+        super(...arguments);
+        this.state = useState({ flag: false, componentFlag: false, numbers: [] });
+    }

    toggle(key) {
        this.state[key] = !this.state[key];
@@ -213,7 +225,10 @@ class DemoComponent extends Component {
 }

 class App extends Component {
-    state = useState({ n: 0, flag: true });
+    constructor() {
+        super(...arguments);
+        this.state = useState({ n: 0, flag: true });
+    }

    increment() {
        this.state.n++;
@@ -282,11 +297,14 @@ function useMouse() {

 // Main root component
 class App extends owl.Component {
-    // simple state hook (reactive object)
-    counter = useState({ value: 0 });
+    constructor() {
+        super(...arguments);
+        // simple state hook (reactive object)
+        this.counter = useState({ value: 0 });

-    // this hooks is bound to the 'mouse' property.
-    mouse = useMouse();
+        // this hooks is bound to the 'mouse' property.
+        this.mouse = useMouse();
+    }

    increment() {
        this.counter.value++;
@@ -318,7 +336,10 @@ const { Component, Context } = owl;
 const { useContext } = owl.hooks;

 class ToolbarButton extends Component {
-    theme = useContext(this.env.themeContext);
+    constructor() {
+        super(...arguments);
+        this.theme = useContext(this.env.themeContext);
+    }

    get style () {
        const theme = this.theme;
@@ -451,12 +472,11 @@ const actions = {
 // TodoItem
 //------------------------------------------------------------------------------
 class TodoItem extends Component {
-    state = useState({ isEditing: false });
-    dispatch = useDispatch();
-
-    constructor(...args) {
-        super(...args);
+    constructor() {
+        super(...arguments);
        useAutofocus("input");
+        this.state = useState({ isEditing: false });
+        this.dispatch = useDispatch();
    }

    handleKeyup(ev) {
@@ -483,9 +503,12 @@ class TodoItem extends Component {
 // TodoApp
 //------------------------------------------------------------------------------
 class TodoApp extends Component {
-    state = useState({ filter: "all" });
-    todos = useStore(state => state.todos);
-    dispatch = useDispatch();
+    constructor() {
+        super(...arguments);
+        this.state = useState({ filter: "all" });
+        this.todos = useStore(state => state.todos);
+        this.dispatch = useDispatch();
+    }

    get visibleTodos() {
        switch (this.state.filter) {
@@ -1008,7 +1031,10 @@ class FormView extends owl.Component {}
 FormView.components = { AdvancedComponent };

 class Chatter extends owl.Component {
-    messages = Array.from(Array(100).keys());
+    constructor() {
+        super(...arguments);
+        this.messages = Array.from(Array(100).keys());
+    }
 }

 class App extends owl.Component {}
@@ -1150,7 +1176,10 @@ const SLOTS = `// We show here how slots can be used to create generic component
 const { Component, useState } = owl;

 class Card extends Component {
-    state = useState({ showContent: true });
+    constructor() {
+        super(...arguments);
+        this.state = useState({ showContent: true });
+    }

    toggleDisplay() {
        this.state.showContent = !this.state.showContent;
@@ -1158,7 +1187,10 @@ class Card extends Component {
 }

 class Counter extends Component {
-    state = useState({val: 1});
+    constructor() {
+        super(...arguments);
+        this.state = useState({val: 1});
+    }

    inc() {
        this.state.val++;
@@ -1167,7 +1199,10 @@ class Counter extends Component {

 // Main root component
 class App extends Component {
-    state = useState({a: 1, b: 3});
+    constructor() {
+        super(...arguments);
+        this.state = useState({a: 1, b: 3});
+    }

    inc(key, delta) {
        this.state[key] += delta;
@@ -1277,7 +1312,10 @@ class SlowComponent extends Component {
 class NotificationList extends Component {}

 class App extends Component {
-    state = useState({ value: 0, notifs: [] });
+    constructor() {
+        super(...arguments);
+        this.state = useState({ value: 0, notifs: [] });
+    }

    increment() {
        this.state.value++;
@@ -1350,13 +1388,16 @@ const FORM = `// This example illustrate how the t-model directive can be used t
 const { Component, useState } = owl;

 class Form extends Component {
-    state = useState({
-        text: "",
-        othertext: "",
-        number: 11,
-        color: "",
-        bool: false
-    });
+    constructor() {
+        super(...arguments);
+        this.state = useState({
+            text: "",
+            othertext: "",
+            number: 11,
+            color: "",
+            bool: false
+        });
+    }
 }

 // Application setup
@@ -1419,7 +1460,10 @@ const { useRef } = owl.hooks;
 class HelloWorld extends Component {}

 class Counter extends Component {
-  state = useState({ value: 0 });
+  constructor() {
+    super(...arguments);
+    this.state = useState({ value: 0 });
+  }

  inc() {
    this.state.value++;
@@ -1470,11 +1514,14 @@ class Window extends Component {
 }

 class WindowManager extends Component {
-  windows = [];
-  nextId = 1;
-  currentZindex = 1;
-  nextLeft = 0;
-  nextTop = 0;
+  constructor() {
+    super(...arguments);
+    this.windows = [];
+    this.nextId = 1;
+    this.currentZindex = 1;
+    this.nextLeft = 0;
+    this.nextTop = 0;
+  }

  addWindow(name) {
    const info = this.env.windows.find(w => w.name === name);
@@ -1518,7 +1565,10 @@ class WindowManager extends Component {
 WindowManager.components = { Window };

 class App extends Component {
-  wmRef = useRef("wm");
+  constructor() {
+    super(...arguments);
+    this.wmRef = useRef("wm");
+  }

  addWindow(name) {
    this.wmRef.comp.addWindow(name);
@@ -1552,7 +1602,7 @@ const WMS_XML = `<templates>
  <div t-name="Window" class="window" t-att-style="style" t-on-click="updateZIndex">
    <div class="header">
      <span t-on-mousedown="startDragAndDrop"><t t-esc="props.info.title"/></span>
-      <span class="close" t-on-click="close">×</span>
+      <span class="close" t-on-click.stop="close">×</span>
    </div>
    <t t-slot="default"/>
  </div>
Author	SHA1	Message	Date
Géry Debongnie	7933328d0a	wip	2019-12-02 13:18:50 +01:00
Géry Debongnie	821bd0b4b8	[IMP] tooling: add debug code closes #521	2019-12-02 09:03:48 +01:00
Géry Debongnie	06a6d890d7	[DOC] move some component doc in sub pages closes #354	2019-12-02 08:55:12 +01:00
Géry Debongnie	c1269288f5	[REL] v1.0.0alpha5	2019-11-29 16:11:34 +01:00
Géry Debongnie	8c17bb0411	[FIX] component: reorganize fiber update algorithm Closes #473 Closes #484 Closes #489 Closes #492 Closes #512 Co-authored-by: Aaron Bohy <aab@odoo.com>	2019-11-29 15:13:37 +01:00
Lucas Perais (lpe)	7f6782d009	[FIX] qweb: cascading t-call and t-raw="0" Have a t-call having a t-raw="0" that call is made to a template of the same form i.e. itself as a t-call t-raw="0" structure Before this commit, there was recursion crash This was because the caller to which a t-raw="0" referred to was incorrect. The caller here is the node which makes the t-call. In particular, the caller was always set to last caller of the context After this commit, there is no crash and this imbrication of t-call and t-raw="0" is well rendered. To sum up, we count the recursive calls to t-raw="0" and fetch the caller in the context accordingly closes #510	2019-11-29 13:17:40 +01:00
Aaron Bohy	6e5d6aa226	[FIX] slots: use correct scope and vars at update Part of #473	2019-11-28 14:42:46 +01:00
Aaron Bohy	9400c0adad	[FIX] playground: stop using class fields as Edge doesn't support them. Closes #509	2019-11-28 10:21:45 +01:00
Aaron Bohy	85d4393242	[FIX] t-slot: correct parented relationship with nested slots Closes #506	2019-11-28 10:15:57 +01:00
Aaron Bohy	6c8b401092	[FIX] component: slots: multiple slots with components Closes #508	2019-11-27 15:47:55 +01:00
Aaron Bohy	12be815342	[REF] qweb: use global nextID and reset it to 1 before each test s.t. snapshots are deterministic.	2019-11-27 15:47:55 +01:00
Sébastien Theys	65344dbf1f	[FIX] store: fix useStore update when mixing state and props changes This commit also fixes an issue where updates would not be triggered when the new and old revNumber where the same but concerned a different object.	2019-11-27 15:09:47 +01:00
Sébastien Theys	a6f9b26057	[FIX] store: ensure useStore proper clean up on destroy	2019-11-27 15:09:47 +01:00
Géry Debongnie	6c753bb49f	[FIX] qweb: scope t-key directive to node and subnodes not to siblings closes #503	2019-11-27 13:31:40 +01:00
Géry Debongnie	1f079b883e	[IMP] store: prevent changes to store state in useStore return value closes #500	2019-11-27 08:18:44 +01:00
Géry Debongnie	8fb35ed969	[FIX] owl: add prettier to devDependencies also, run prettier on codebase closes #498	2019-11-27 08:06:17 +01:00
Géry Debongnie	a3f2d07b40	[DOC] add link to useSubEnv in environment doc	2019-11-26 22:32:25 +01:00
Sébastien Theys	c993278c80	[IMP] store: allow useStore to return primitive types Related to #404	2019-11-26 22:17:05 +01:00
Géry Debongnie	3aa586db43	[IMP] component: allow custom validator functions for props closes #375	2019-11-22 15:43:22 +01:00
Géry Debongnie	14db513f3b	[FIX] component: allow fragments in method mount It is now possible to mount components in fragments closes #494	2019-11-22 15:00:37 +01:00
Géry Debongnie	7bb04185c7	[FIX] playground: fix wms sample It was crashing when we close a window, because there are two event handlers for the click event on Window. But when we close a window, we actually do not want to update the z index.	2019-11-22 13:41:44 +01:00
Géry Debongnie	48744cfa87	[DOC] add hooks explanation, and testing/debug page closes #372 closes #419	2019-11-22 13:41:44 +01:00