[REL] v1.0.0alpha5

[FIX] component: reorganize fiber update algorithm
Closes #473 Closes #484 Closes #489 Closes #492 Closes #512 Co-authored-by: Aaron Bohy <aab@odoo.com>
2025-10-06 19:59:41 +07:00 · 2019-11-29 16:11:34 +01:00 · 2019-11-29 15:13:37 +01:00 · 2019-11-29 13:17:40 +01:00 · 2019-11-28 14:42:46 +01:00 · 2019-11-28 10:21:45 +01:00
36 changed files with 1757 additions and 762 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,211 @@
+# 🦉 Testing and Debugging Owl components 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Unit Tests](#unit-tests)
+- [Debugging](#debugging)
+
+## 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();
+      }
+    }
+  });
+}
+```
+
+## 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,
+the following code can simply be copy/pasted in an application. Once it is
+executed, it will log a lot of information on each component main hooks.
+
+```js
+let current;
+Object.defineProperty(owl.Component, "current", {
+  get() {
+    return current;
+  },
+  set(comp) {
+    current = comp;
+    const name = comp.constructor.name;
+    let __owl__;
+    Object.defineProperty(current, "__owl__", {
+      get() {
+        return __owl__;
+      },
+      set(val) {
+        __owl__ = val;
+        debugComponent(comp, name, __owl__.id);
+      }
+    });
+  }
+});
+
+function toStr(props) {
+  let str = JSON.stringify(props || {});
+  if (str.length > 200) {
+    str = str.slice(0, 200) + "...";
+  }
+  return str;
+}
+
+function debugComponent(component, name, id) {
+  console.log(`[DEBUG] constructor ${name}<id=${id}>, props=${toStr(component.props)}`);
+  owl.hooks.onWillStart(() => {
+    console.log(`[DEBUG] willStart: '${name}<id=${id}>'`);
+  });
+  owl.hooks.onMounted(() => {
+    console.log(`[DEBUG] mounted: '${name}<id=${id}>'`);
+  });
+  owl.hooks.onWillUpdateProps(nextProps => {
+    console.log(`[DEBUG] willUpdateProps: '${name}<id=${id}> nextprops=${toStr(nextProps)}`);
+  });
+  owl.hooks.onWillPatch(() => {
+    console.log(`[DEBUG] willPatch: '${name}<id=${id}>'`);
+  });
+  owl.hooks.onPatched(() => {
+    console.log(`[DEBUG] patched: '${name}<id=${id}>'`);
+  });
+  owl.hooks.onWillUnmount(() => {
+    console.log(`[DEBUG] willUnmount: '${name}<id=${id}>'`);
+  });
+  const __render = component.__render.bind(component);
+  component.__render = function(...args) {
+    console.log(`[DEBUG] rendering template: '${name}<id=${id}>'`);
+    __render(...args);
+  };
+  const render = component.render.bind(component);
+  component.render = function(...args) {
+    console.log(`[DEBUG] render: '${name}<id=${id}>'`);
+    return render(...args);
+  };
+  const mount = component.mount.bind(component);
+  component.mount = function(...args) {
+    console.log(`[DEBUG] mount: '${name}<id=${id}>'`);
+    return mount(...args);
+  };
+}
+```
+
+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.
@@ -23,6 +23,7 @@

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

 ## Miscellaneous

@@ -239,7 +239,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 +247,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.
@@ -767,15 +781,14 @@ component (with some code like `app.mount(document.body)`).
          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
+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: `B`, `D`, `E`, `C`, `A`.
+   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:
@@ -809,14 +822,14 @@ Here is what Owl will do:
 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:
+4. components `F`, `D` are patched in that order

-   2. `willUnmount` hook on `E`, then destruction of `E`,
-   3. (initial) patching of `F`, then hook `mounted` is called on `F`
+5. component `C` is patched, which will cause recursively:

-5. patching of `D`
+   1. `willUnmount` hook on `E`
+   2. destruction of `E`,

-6. `patched` hooks are called on `D`, `C`
+6. `mounted` hook is called on `F`, `patched` hooks are called on `D`, `C`

 ### Props Validation

@@ -877,10 +890,12 @@ For each key, a `prop` definition is either a boolean, a constructor, a list of
 - 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:
+- 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. 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)
+  - `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:

@@ -910,6 +925,13 @@ Examples:
    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)
+    },
  };
 ```

@@ -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`

@@ -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`

@@ -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,54 +179,62 @@ 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;
    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();
-      }
-      component.willPatch();
-    }
+
+    // call willPatch hook on each fiber of patchQueue
    for (let i = 0; i < patchLen; i++) {
+      const fiber = patchQueue[i];
+      if (fiber.shouldPatch) {
+        component = fiber.component;
+        if (component.__owl__.willPatchCB) {
+          component.__owl__.willPatchCB();
+        }
+        component.willPatch();
+      }
+    }
+
+    // call __patch on each fiber of (reversed) patchQueue
+    for (let i = patchLen - 1; i >= 0; i--) {
      const fiber = patchQueue[i];
      component = fiber.component;
-      component.__patch(fiber.vnode);
+      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--) {
-      component = patchQueue[i].component;
-      component.patched();
-      if (component.__owl__.patchedCB) {
-        component.__owl__.patchedCB();
+      const 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();
      }
    }
  }
@@ -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);
@@ -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);
@@ -5263,6 +5583,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 () => {
@@ -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`
@@ -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	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