[REL] v1.0.0-beta1

[IMP] tools: update debug script, add tests
closes #525 closes #526
2025-10-06 19:59:41 +07:00 · 2019-12-03 08:52:04 +01:00 · 2019-12-03 08:28:46 +01:00 · 2019-12-03 08:23:10 +01:00 · 2019-12-02 21:04:07 +01:00 · 2019-12-02 09:03:48 +01:00
30 changed files with 2672 additions and 1244 deletions
@@ -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-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)
+- [owl-1.0.0-beta1.js](https://github.com/odoo/owl/releases/download/v1.0.0-beta1/owl.js)
+- [owl-1.0.0-beta1.min.js](https://github.com/odoo/owl/releases/download/v1.0.0-beta1/owl.min.js)

 Some npm scripts are available:

@@ -1,10 +1,9 @@
-# 🦉 Testing and Debugging Owl components 🦉
+# 🦉 Testing Owl components 🦉

 ## Content

 - [Overview](#overview)
 - [Unit Tests](#unit-tests)
- [Debugging](#debugging)

 ## Overview

@@ -131,81 +130,3 @@ function afterUpdates() {
  });
 }
 ```
-
-## 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.
@@ -297,7 +297,7 @@ A lot of stuff happened here:
 - the `Task` component has a `props` key: this is only useful for validation
  purpose. It says that each `Task` should be given exactly one prop, named
  `task`. If this is not the case, Owl will throw an
-  [error](../reference/component.md#props-validation). This is extremely
+  [error](../reference/props_validation.md). This is extremely
  useful when refactoring components
 - finally, to activate the props validation, we need to set Owl's
  [mode](../reference/config.md#mode) to `dev`. This is done in the `setup`
@@ -4,6 +4,7 @@

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

 ## Miscellaneous

@@ -48,20 +50,20 @@ and `EventBus` is exported as `owl.core.EventBus`):
 ```
 Component                               misc
 Context                                     AsyncRoot
-QWeb                                    router
-Store                                       Link
-useState                                    RouteComponent
-config                                      Router
-    mode                                tags
-core                                        xml
-    EventBus                            utils
-    Observer                                debounce
-hooks                                       escape
-    onWillStart                             loadJS
-    onMounted                               loadFile
-    onWillUpdateProps                       shallowEqual
-    onWillPatch                             whenReady
-    onPatched
+QWeb                                        Portal
+Store                                   router
+useState                                    Link
+config                                      RouteComponent
+    mode                                    Router
+core                                    tags
+    EventBus                                xml
+    Observer                            utils
+hooks                                       debounce
+    onWillStart                             escape
+    onMounted                               loadJS
+    onWillUpdateProps                       loadFile
+    onWillPatch                             shallowEqual
+    onPatched                               whenReady
    onWillUnmount
    useContext
    useState
@@ -14,12 +14,9 @@
  - [Composition](#composition)
  - [Event Handling](#event-handling)
  - [Form Input Bindings](#form-input-bindings)
-  - [Semantics](#semantics)
-  - [Props Validation](#props-validation)
  - [References](#references)
  - [Slots](#slots)
  - [Dynamic sub components](#dynamic-sub-components)
-  - [Asynchronous Rendering](#asynchronous-rendering)
  - [Error Handling](#error-handling)
  - [Functional Components](#functional-components)
  - [SVG components](#svg-components)
@@ -204,7 +201,7 @@ to be called in the constructor.
 * **`props`** (Object, optional): if given, this is an object that describes the
  type and shape of the (actual) props given to the component. If Owl mode is
  `dev`, this will be used to validate the props each time the component is
-  created/updated. See [Props Validation](#props-validation) for more information.
+  created/updated. See [Props Validation](props_validation.md) for more information.

  ```js
  class Counter extends owl.Component {
@@ -745,196 +742,6 @@ update a number whenever the change is done.

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

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

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

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

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

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

+## Content
+
+- [Portal](#portal)
+- [AsyncRoot](#asyncroot)
+
+## `Portal`
+
+### Overview
+
+The component `Portal` is meant to be used as a transparent way to 'teleport' a piece
+of DOM to the node represented by its sole `target` props.
+
+This component aims at helping the implementation of the needed infrastructure
+for modals (as in `bootstrap-modal`).
+
+### Usage
+
+The content it will teleport is defined within the `<Portal>` node and
+internally uses the `default` [Slot](component.md#slots).
+
+This slot must contain only **one** node, which in turn can have as many children as necessary.
+
+The element under which the content will be teleported is represented as a selector
+by the `target` props which only accepts a string as value.
+
+The `target` props only supports static selector, and is not meant to be passed to `Portal`
+as a variable. Namely, `<Portal target="'body'" />` is the intended use.
+By contrast, `<Portal target="state.target" />` is not supported.
+
+The component `Portal` has no particular state, rather it is meant to be a slave to its parent,
+and ultimately just a way for the parent to teleport a piece of its own DOM elsewhere.
+
+The `Portal`'s root node is always `<portal/>` and is placed where the teleported content
+_would have_ been. It is this element that the [teleported events](#expected-behaviors) are re-directed on.
+
+### Example
+
+The canonic use-case is to implement a Dialog, where a Component may choose to break the natural
+workflow to help the user put in some data, which it could use later on.
+
+JavaScript:
+
+```js
+const { Component } = owl;
+const { Portal } = owl.misc;
+
+class TeleportedComponent extends Component {}
+class App extends Component {
+  static components = { Portal, TeleportedComponent };
+}
+
+const app = new App();
+app.mount(document.body);
+```
+
+XML:
+
+```xml
+<templates>
+    <div t-name="TeleportedComponent">
+        <span>I will move soon enough</span>
+    </div>
+
+    <div t-name="App">
+        <span>I am like the rest of us</span>
+        <Portal target="'body'">
+            <TeleportedComponent />
+        </Portal>
+    </div>
+</templates>
+```
+
+In this example, the `Portal` component will teleport the `TeleportedComponent`'s `div` as a child of the `body`.
+`TeleportedComponent` is acting as a Dialog here.
+
+The resulting DOM will look like:
+
+```xml
+<body>
+    <div>
+        <span>I am like the rest of us</span>
+        <portal></portal>
+    </div>
+    <div>
+        <span>I will move soon enough</span>
+    </div>
+</body>
+```
+
+### Expected Behaviors
+
+The teleported piece is updated as any other `Component`'s DOM and in the same sequence.
+Namely the teleported piece will be updated in function of its parents components, and patched as
+a normal child.
+
+The [_business_ events](component.md#event-handling) triggered by a child component will be stopped
+to not bubble outside of the `target`. They will, on the other hand, be re-directed onto the
+`Portal`'s root node and bubble up the DOM as if it were triggered by a regular child component.
+
+Beware that those re-directed events are copies of the original event.
+They have:
+
+- The same payload.
+- The same `originalComponent` than their original counterpart,
+  that is the actual Component that triggered it.
+- A **different** `target` property than their original counterpart.
+  The `target` of a re-directed event is necessarily the `Portal`'s root node.
+
+Pure DOM events do not follow this pattern and are free to bubble their natural, unaltered way
+up to the `body`.
+
 ## `AsyncRoot`

 When this component is used, a new rendering sub tree is created, such that the
@@ -0,0 +1,103 @@
+# 🦉 Props Validation 🦉
+
+As an application becomes complex, it may be quite unsafe to define props in an informal way. This leads to two issues:
+
+- hard to tell how a component should be used, by looking at its code.
+- unsafe, it is easy to send wrong props into a component, either by refactoring a component, or one of its parents.
+
+A props type system solves both issues, by describing the types and shapes
+of the props. Here is how it works in Owl:
+
+- `props` key is a static key (so, different from `this.props` in a component instance)
+- it is optional: it is ok for a component to not define a `props` key.
+- props are validated whenever a component is created/updated
+- props are only validated in `dev` mode (see [config page](config.md#mode))
+- if a key does not match the description, an error is thrown
+- it validates keys defined in (static) `props`. Additional keys given by the
+  parent will cause an error.
+
+For example:
+
+```js
+class ComponentA extends owl.Component {
+    static props = ['id', 'url'];
+
+    ...
+}
+
+class ComponentB extends owl.Component {
+  static props = {
+    count: {type: Number},
+    messages: {
+      type: Array,
+      element: {type: Object, shape: {id: Boolean, text: 'string' }
+    },
+   date: Date,
+   combinedVal: [Number, Boolean]
+  };
+
+  ...
+}
+```
+
+- it is an object or a list of strings
+- a list of strings is a simplified props definition, which only lists the name
+  of the props. Also, if the name ends with `?`, it is considered optional.
+- all props are by default required, unless they are defined with `optional: true`
+  (in that case, validation is only done if there is a value)
+- valid types are: `Number, String, Boolean, Object, Array, Date, Function`, and all
+  constructor functions (so, if you have a `Person` class, it can be used as a type)
+- arrays are homogeneous (all elements have the same type/shape)
+
+For each key, a `prop` definition is either a boolean, a constructor, a list of constructors, or an object:
+
+- a boolean: indicate that the props exists, and is mandatory.
+- a constructor: this should describe the type, for example: `id: Number` describe
+  the props `id` as a number
+- a list of constructors. In that case, this means that we allow more than one
+  type. For example, `id: [Number, String]` means that `id` can be either a string
+  or a number.
+- an object. This makes it possible to have more expressive definition. The following sub keys are then allowed (but not mandatory):
+  - `type`: the main type of the prop being validated
+  - `element`: if the type was `Array`, then the `element` key describes the type of each element in the array. If it is not set, then we only validate the array, not its elements,
+  - `shape`: if the type was `Object`, then the `shape` key describes the interface of the object. If it is not set, then we only validate the object, not its elements,
+  - `validate`: this is a function which should return a boolean to determine if
+    the value is valid or not. Useful for custom validation logic.
+
+Examples:
+
+```js
+  // only the existence of those 3 keys is documented
+  static props = ['message', 'id', 'date'];
+```
+
+```js
+  // size is optional
+  static props = ['message', 'size?'];
+```
+
+```js
+  static props = {
+    messageIds: {type: Array, element: Number},  // list of number
+    otherArr: {type: Array},   // just array. no validation is made on sub elements
+    otherArr2: Array,   // same as otherArr
+    someObj: {type: Object},  // just an object, no internal validation
+    someObj2: {
+      type: Object,
+      shape: {
+        id: Number,
+        name: {type: String, optional: true},
+        url: String
+      ]},    // object, with keys id (number), name (string, optional) and url (string)
+    someFlag: Boolean,     // a boolean, mandatory (even if `false`)
+    someVal: [Boolean, Date],   // either a boolean or a date
+    otherValue: true,     // indicates that it is a prop
+    kindofsmallnumber: {
+      type: Number,
+      validate: n => (0 <= n && n <= 10)
+    },
+    size: {
+      validate:  e => ["small", "medium", "large"].includes(e)
+    },
+  };
+```
@@ -6,6 +6,7 @@
 - [Playground](#playground)
 - [Benchmarks](#benchmarks)
 - [Single File Component](#single-file-component)
+- [Debugging Script](#debugging-script)

 ## Overview

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

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

 This roadmap is only an attempt at predicting Owl's future.  Everything may
 change!


-### November 2019
-
-Owl will be used in various Odoo projects. We plan to:
-
- fix any issues encountered
- maybe cleanup slightly the router API
- improve the documentation
- improve error handling, add more helpful error messages

 ### December 2019

-If all goes well, Owl will be upgraded to beta status. From then, no API change,
-even small, is expected.
+If all goes well, Owl is upgraded to beta status. From now on, no API change,
+even small, is expected (but it still could happen).

 ### End of 2019

@@ -41,7 +33,8 @@ Release v1.0

 Maybe:

- reimplement vdom to use *block* system, like Vue 3,
+- reimplement vdom to use *block* system, like Vue 3, which should make Owl
+  much faster
 - refactor `QWeb` to use an intermediate representation (some kind of AST) to
  allow additional optimisations.

@@ -84,6 +84,8 @@ interface Internal<T extends Env, Props> {
  refs: { [key: string]: Component<T, any> | HTMLElement | undefined } | null;
 }

+export const portalSymbol = Symbol("portal"); // FIXME
+
 //------------------------------------------------------------------------------
 // Component
 //------------------------------------------------------------------------------
@@ -302,7 +304,7 @@ export class Component<T extends Env, Props extends {}> {
    const fiber = new Fiber(null, this, false, target);
    fiber.shouldPatch = false;
    if (!__owl__.vnode) {
-      this.__prepareAndRender(fiber);
+      this.__prepareAndRender(fiber, () => {});
    } else {
      this.__render(fiber);
    }
@@ -397,14 +399,7 @@ export class Component<T extends Env, Props extends {}> {
   * willUnmount().
   */
  trigger(eventType: string, payload?: any) {
-    if (this.el) {
-      const ev = new OwlEvent(this, eventType, {
-        bubbles: true,
-        cancelable: true,
-        detail: payload
-      });
-      this.el.dispatchEvent(ev);
-    }
+    this.__trigger(this, eventType, payload);
  }

  //--------------------------------------------------------------------------
@@ -478,7 +473,24 @@ export class Component<T extends Env, Props extends {}> {
      }
    }
  }
-
+  /**
+   * Private trigger method, allows to choose the component which triggered
+   * the event in the first place
+   */
+  __trigger(component: Component<any, any>, eventType: string, payload?: any) {
+    if (this.el) {
+      const ev = new OwlEvent(component, eventType, {
+        bubbles: true,
+        cancelable: true,
+        detail: payload
+      });
+      const triggerHook = this.env[portalSymbol as any];
+      if (triggerHook) {
+        triggerHook(ev);
+      }
+      this.el.dispatchEvent(ev);
+    }
+  }
  /**
   * The __updateProps method is called by the t-component directive whenever
   * it updates a component (so, when the parent template is rerendered).
@@ -532,7 +544,7 @@ 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) {
+  __prepare(parentFiber: Fiber, scope: any, vars: any, cb: CallableFunction): Fiber {
    this.__owl__.scope = scope;
    this.__owl__.vars = vars;
    const fiber = new Fiber(parentFiber, this, parentFiber.force, null);
@@ -543,7 +555,8 @@ export class Component<T extends Env, Props extends {}> {
      parentFiber.lastChild!.sibling = fiber;
    }
    parentFiber.lastChild = fiber;
-    return this.__prepareAndRender(fiber);
+    this.__prepareAndRender(fiber, cb);
+    return fiber;
  }

  __getTemplate(qweb: QWeb): string {
@@ -565,7 +578,7 @@ export class Component<T extends Env, Props extends {}> {
    }
    return p._template;
  }
-  async __prepareAndRender(fiber: Fiber) {
+  async __prepareAndRender(fiber: Fiber, cb: CallableFunction) {
    try {
      await Promise.all([this.willStart(), this.__owl__.willStartCB && this.__owl__.willStartCB()]);
    } catch (e) {
@@ -577,6 +590,7 @@ export class Component<T extends Env, Props extends {}> {
    }
    if (!fiber.isCompleted) {
      this.__render(fiber);
+      cb();
    }
  }

@@ -226,7 +226,6 @@ QWeb.addDirective({
    let propStr = Object.keys(props)
      .map(k => k + ":" + props[k])
      .join(",");
-    let defID = ctx.generateID();
    let componentID = ctx.generateID();

    const templateKey = ctx.generateTemplateKey();
@@ -439,16 +438,14 @@ QWeb.addDirective({
      }
    }

-    ctx.addLine(`let def${defID} = w${componentID}.__prepare(extra.fiber, ${scopeVars});`);
+    ctx.addLine(
+      `let fiber = w${componentID}.__prepare(extra.fiber, ${scopeVars}, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; ${createHook}});`
+    );
    // 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: {${insertHook}remove() {},destroy(vn) {${finalizeComponentCode}}}});`
    );
-    ctx.addLine(`const fiber = w${componentID}.__owl__.currentFiber;`);
-    ctx.addLine(
-      `def${defID}.then(function () { if (fiber.isCompleted) { return; } const vnode = fiber.vnode; pvnode.sel = vnode.sel; ${createHook}});`
-    );
    if (registerCode) {
      ctx.addLine(registerCode);
    }
@@ -222,6 +222,7 @@ export class Fiber {
    if (this.target) {
      this.target.appendChild(this.component.el!);
      inDOM = document.body.contains(this.target);
+      this.component.env.qweb.trigger("dom-appended");
    }

    // call patched/mounted hook on each fiber of (reversed) patchQueue
@@ -25,6 +25,15 @@ export class Scheduler {
    this.requestAnimationFrame = requestAnimationFrame;
  }

+  start() {
+    this.isRunning = true;
+    this.scheduleTasks();
+  }
+
+  stop() {
+    this.isRunning = false;
+  }
+
  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
@@ -43,7 +52,7 @@ export class Scheduler {
        }
      });
      if (!this.isRunning) {
-        this.scheduleTasks();
+        this.start();
      }
    });
  }
@@ -74,16 +83,16 @@ export class Scheduler {
      return true;
    });
    this.tasks = tasks.concat(this.tasks);
+    if (this.tasks.length === 0) {
+      this.stop();
+    }
  }

  scheduleTasks() {
-    this.isRunning = true;
    this.requestAnimationFrame(() => {
      this.flush();
-      if (this.tasks.length > 0) {
+      if (this.isRunning) {
        this.scheduleTasks();
-      } else {
-        this.isRunning = false;
      }
    });
  }
@@ -12,6 +12,7 @@ import * as _store from "./store";
 import * as _utils from "./utils";
 import * as _tags from "./tags";
 import { AsyncRoot } from "./misc/async_root";
+import { Portal } from "./misc/portal";
 import * as _hooks from "./hooks";
 import * as _context from "./context";
 import { Link } from "./router/link";
@@ -29,7 +30,7 @@ export const router = { Router, RouteComponent, Link };
 export const Store = _store.Store;
 export const utils = _utils;
 export const tags = _tags;
-export const misc = { AsyncRoot };
+export const misc = { AsyncRoot, Portal };
 export const hooks = Object.assign({}, _hooks, {
  useContext: _context.useContext,
  useDispatch: _store.useDispatch,
@@ -0,0 +1,156 @@
+import { Component, portalSymbol } from "../component/component";
+import { VNode, patch } from "../vdom/index";
+import { xml } from "../tags";
+import { OwlEvent } from "../core/owl_event";
+import { useSubEnv } from "../hooks";
+
+/**
+ * Portal
+ *
+ * The Portal component allows to render a part of a component outside it's DOM.
+ * It is for example useful for dialogs: for css reasons, dialogs are in general
+ * placed in a specific spot of the DOM (e.g. directly in the body). With the
+ * Portal, a component can conditionally specify in its tempate that it contains
+ * a dialog, and where this dialog should be inserted in the DOM.
+ *
+ * The Portal component ensures that the communication between the content of
+ * the Portal and its parent properly works: business events reaching the Portal
+ * are re-triggered on an empty <portal> node located in the parent's DOM.
+ */
+
+export class Portal extends Component<any, any> {
+  static template = xml`<portal><t t-slot="default"/></portal>`;
+  static props = {
+    target: {
+      type: String
+    }
+  };
+
+  // boolean to indicate whether or not we must listen to 'dom-appended' event
+  // to hook on the moment when the target is inserted into the DOM (because it
+  // is not when the portal is rendered)
+  doTargetLookUp: boolean = true;
+  // set of encountered events that need to be redirected
+  _handledEvents: Set<string> = new Set();
+  // function that will be the event's tunnel (needs to be an arrow function to
+  // avoid having to rebind `this`)
+  _handlerTunnel: (f: OwlEvent<any>) => void = (ev: OwlEvent<any>) => {
+    ev.stopPropagation();
+    this.__trigger(ev.originalComponent, ev.type, ev.detail);
+  };
+  // Storing the parent's env
+  parentEnv: any = null;
+  // represents the element that is moved somewhere else
+  portal: VNode | null = null;
+  // the target where we will move `portal`
+  target: HTMLElement | null = null;
+
+  constructor(parent, props) {
+    super(parent, props);
+    this.parentEnv = parent ? parent.env : {};
+    // put a callback in the env that is propagated to children s.t. portal can
+    // register an handler to those events just before children will trigger them
+    useSubEnv({
+      [portalSymbol]: ev => {
+        if (!this._handledEvents.has(ev.type)) {
+          this.portal!.elm!.addEventListener(ev.type, this._handlerTunnel);
+          this._handledEvents.add(ev.type);
+        }
+      }
+    });
+  }
+  /**
+   * At each DOM change, we must ensure that the portal contains exactly one
+   * child
+   */
+  __checkVNodeStructure(vnode: VNode) {
+    const children = vnode.children!;
+    let countRealNodes = 0;
+    for (let child of children) {
+      if ((child as VNode).sel) {
+        countRealNodes++;
+      }
+    }
+    if (countRealNodes !== 1) {
+      throw new Error(`Portal must have exactly one non-text child (has ${countRealNodes})`);
+    }
+  }
+  /**
+   * Ensure the target is still there at whichever time we render
+   */
+  __checkTargetPresence() {
+    if (!this.target || !document.contains(this.target)) {
+      throw new Error(`Could not find any match for "${this.props.target}"`);
+    }
+  }
+  /**
+   * Move the portal's element to the target
+   */
+  __deployPortal() {
+    this.__checkTargetPresence();
+    this.target!.appendChild(this.portal!.elm!);
+  }
+  /**
+   * Override to remove from the DOM the element we have teleported
+   *
+   * @override
+   */
+  __destroy(parent) {
+    if (this.portal && this.portal.elm) {
+      const displacedElm = this.portal.elm!;
+      const parent = displacedElm.parentNode;
+      if (parent) {
+        parent.removeChild(displacedElm);
+      }
+    }
+    super.__destroy(parent);
+  }
+  /**
+   * Override to patch the element that has been teleported
+   *
+   * @override
+   */
+  __patch(vnode) {
+    if (this.doTargetLookUp) {
+      const target = document.querySelector(this.props.target);
+      if (!target) {
+        this.env.qweb.on("dom-appended", this, () => {
+          this.doTargetLookUp = false;
+          this.env.qweb.off("dom-appended", this);
+          this.target = document.querySelector(this.props.target);
+          this.__deployPortal();
+        });
+      } else {
+        this.doTargetLookUp = false;
+        this.target = target;
+      }
+    }
+    this.__checkVNodeStructure(vnode);
+    const shouldDeploy = !this.portal && !this.doTargetLookUp;
+
+    if (!this.doTargetLookUp && !shouldDeploy) {
+      // Only on pure patching, provided the
+      // this.target's parent has not been unmounted
+      this.__checkTargetPresence();
+    }
+
+    const portalPatch = this.portal ? this.portal : document.createElement(vnode.children[0].sel);
+    this.portal = patch(portalPatch, vnode.children![0] as VNode);
+    vnode.children = [];
+
+    super.__patch(vnode);
+
+    if (shouldDeploy) {
+      this.__deployPortal();
+    }
+  }
+  /**
+   * Override to set the env
+   */
+  __trigger(component: Component<any, any>, eventType: string, payload?: any) {
+    const env = this.env;
+    this.env = this.parentEnv;
+    super.__trigger(component, eventType, payload);
+    this.env = env;
+  }
+}
@@ -11,37 +11,35 @@ exports[`animations t-transition combined with component 1`] = `
    let c1 = [], p1 = {key:1};
    var vn1 = h('div', p1, c1);
    //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;
+    let k3 = \`__4__\`;
+    let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false;
+    let props2 = {};
+    if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
+        w2.destroy();
+        w2 = false;
    }
-    if (w3) {
-        w3.__updateProps(props3, extra.fiber, undefined, undefined);
-        let pvnode = w3.__owl__.pvnode;
+    if (w2) {
+        w2.__updateProps(props2, extra.fiber, undefined, undefined);
+        let pvnode = w2.__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();
+        let componentKey2 = \`Child\`;
+        let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| context['Child'];
+        if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
+        w2 = new W2(parent, props2);
+        const __patch2 = w2.__patch;
+        w2.__patch = fiber => {__patch2.call(w2, fiber); if(!w2.__owl__.transitionInserted){w2.__owl__.transitionInserted = true;utils.transitionInsert(w2.__owl__.vnode, 'chimay');}};
+        parent.__owl__.cmap[k3] = w2.__owl__.id;
+        let fiber = w2.__prepare(extra.fiber, undefined, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {let finalize = () => {
+          w2.destroy();
        };
-        delete w3.__owl__.transitionInserted;
+        delete w2.__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;
+        w2.__owl__.pvnode = pvnode;
    }
-    w3.__owl__.parentLastFiberId = extra.fiber.id;
+    w2.__owl__.parentLastFiberId = extra.fiber.id;
    return vn1;
 }"
 `;
@@ -58,37 +56,35 @@ exports[`animations t-transition combined with t-component and t-if 1`] = `
    var vn1 = h('div', p1, c1);
    if (context['state'].display) {
        //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;
+        let k3 = \`__4__\`;
+        let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false;
+        let props2 = {};
+        if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
+            w2.destroy();
+            w2 = false;
        }
-        if (w3) {
-            w3.__updateProps(props3, extra.fiber, undefined, undefined);
-            let pvnode = w3.__owl__.pvnode;
+        if (w2) {
+            w2.__updateProps(props2, extra.fiber, undefined, undefined);
+            let pvnode = w2.__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();
+            let componentKey2 = \`Child\`;
+            let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| context['Child'];
+            if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
+            w2 = new W2(parent, props2);
+            const __patch2 = w2.__patch;
+            w2.__patch = fiber => {__patch2.call(w2, fiber); if(!w2.__owl__.transitionInserted){w2.__owl__.transitionInserted = true;utils.transitionInsert(w2.__owl__.vnode, 'chimay');}};
+            parent.__owl__.cmap[k3] = w2.__owl__.id;
+            let fiber = w2.__prepare(extra.fiber, undefined, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {let finalize = () => {
+          w2.destroy();
        };
-        delete w3.__owl__.transitionInserted;
+        delete w2.__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;
+            w2.__owl__.pvnode = pvnode;
        }
-        w3.__owl__.parentLastFiberId = extra.fiber.id;
+        w2.__owl__.parentLastFiberId = extra.fiber.id;
    }
    return vn1;
 }"
@@ -106,37 +102,35 @@ exports[`animations t-transition combined with t-component, remove and re-add be
    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;
+        let k3 = \`__4__\`;
+        let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false;
+        let props2 = {};
+        if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
+            w2.destroy();
+            w2 = false;
        }
-        if (w3) {
-            w3.__updateProps(props3, extra.fiber, undefined, undefined);
-            let pvnode = w3.__owl__.pvnode;
+        if (w2) {
+            w2.__updateProps(props2, extra.fiber, undefined, undefined);
+            let pvnode = w2.__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();
+            let componentKey2 = \`Child\`;
+            let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| context['Child'];
+            if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
+            w2 = new W2(parent, props2);
+            const __patch2 = w2.__patch;
+            w2.__patch = fiber => {__patch2.call(w2, fiber); if(!w2.__owl__.transitionInserted){w2.__owl__.transitionInserted = true;utils.transitionInsert(w2.__owl__.vnode, 'chimay');}};
+            parent.__owl__.cmap[k3] = w2.__owl__.id;
+            let fiber = w2.__prepare(extra.fiber, undefined, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {let finalize = () => {
+          w2.destroy();
        };
-        delete w3.__owl__.transitionInserted;
+        delete w2.__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;
+            w2.__owl__.pvnode = pvnode;
        }
-        w3.__owl__.parentLastFiberId = extra.fiber.id;
+        w2.__owl__.parentLastFiberId = extra.fiber.id;
    }
    return vn1;
 }"
@@ -254,11 +254,11 @@ describe("animations", () => {
    widget.state.display = false;
    patchNextFrame(cb => {
      expect(fixture.innerHTML).toBe(
-        '<div><span class="chimay-leave chimay-leave-active" data-owl-key="__5__">blue</span></div>'
+        '<div><span class="chimay-leave chimay-leave-active" data-owl-key="__4__">blue</span></div>'
      );
      cb();
      expect(fixture.innerHTML).toBe(
-        '<div><span class="chimay-leave-active chimay-leave-to" data-owl-key="__5__">blue</span></div>'
+        '<div><span class="chimay-leave-active chimay-leave-to" data-owl-key="__4__">blue</span></div>'
      );
      def.resolve();
    });
@@ -371,7 +371,7 @@ describe("animations", () => {

    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><span class="" data-owl-key="__5__">blue</span></div>');
+    expect(fixture.innerHTML).toBe('<div><span class="" data-owl-key="__4__">blue</span></div>');
  });

  test("transitionInsert is called the correct amount of times", async () => {
@@ -405,14 +405,14 @@ describe("animations", () => {
    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>'
+      '<div><span class="chimay-leave-active chimay-leave-to" data-owl-key="__4__">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>'
+      '<div><span class="chimay-enter-active chimay-enter-to" data-owl-key="__4__">blue</span></div>'
    );
    expect(QWeb.utils.transitionInsert).toBeCalledTimes(2);

@@ -423,7 +423,7 @@ describe("animations", () => {

    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>');
+    expect(fixture.innerHTML).toBe('<div><span class="" data-owl-key="__4__">blue</span></div>');
    QWeb.utils.transitionInsert = oldTransitionInsert;
  });
 });
@@ -11,31 +11,29 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
    let c1 = [], p1 = {key:1};
    var vn1 = h('div', p1, c1);
    //COMPONENT
-    let k4 = \`__5__\`;
-    let w3 = k4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k4]] : false;
-    let props3 = {message:1};
-    if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) {
-        w3.destroy();
-        w3 = false;
+    let k3 = \`__4__\`;
+    let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false;
+    let props2 = {message:1};
+    if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
+        w2.destroy();
+        w2 = false;
    }
-    if (w3) {
-        w3.__updateProps(props3, extra.fiber, undefined, undefined);
-        let pvnode = w3.__owl__.pvnode;
+    if (w2) {
+        w2.__updateProps(props2, extra.fiber, undefined, undefined);
+        let pvnode = w2.__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);
-        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) {w3.destroy();}}});
-        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () { if (fiber.isCompleted) { return; } const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        let componentKey2 = \`Child\`;
+        let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| context['Child'];
+        if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
+        w2 = new W2(parent, props2);
+        parent.__owl__.cmap[k3] = w2.__owl__.id;
+        let fiber = w2.__prepare(extra.fiber, undefined, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {w2.destroy();}}});
        c1.push(pvnode);
-        w3.__owl__.pvnode = pvnode;
+        w2.__owl__.pvnode = pvnode;
    }
-    w3.__owl__.parentLastFiberId = extra.fiber.id;
+    w2.__owl__.parentLastFiberId = extra.fiber.id;
    return vn1;
 }"
 `;
@@ -1849,6 +1849,38 @@ describe("other directives with t-component", () => {
    expect(widget.n).toBe(1);
  });

+  test("t-on works, even if flush is called many times", async () => {
+    let flag = false;
+    let mounted = false;
+    class Child extends Component<any, any> {
+      static template = xml`<span>child</span>`;
+      mounted() {
+        mounted = true;
+      }
+    }
+
+    class Parent extends Component<any, any> {
+      static template = xml`<div><Child t-on-click="doSomething"/></div>`;
+      static components = { Child };
+
+      doSomething() {
+        flag = true;
+      }
+    }
+
+    const parent = new Parent();
+    parent.mount(fixture);
+    while (!mounted) {
+      await nextMicroTick();
+      Component.scheduler.flush();
+    }
+
+    expect(fixture.innerHTML).toBe("<div><span>child</span></div>");
+    expect(flag).toBe(false);
+    fixture.querySelector("span")!.click();
+    expect(flag).toBe(true);
+  });
+
  test("t-on with handler bound to argument", async () => {
    expect.assertions(3);
    env.qweb.addTemplates(`
@@ -2165,28 +2197,28 @@ describe("other directives with t-component", () => {
        grandChild = this;
      }
      _onEv() {
-        steps.push('GrandChild');
+        steps.push("GrandChild");
      }
    }
    class Child extends Component<any, any> {
      static template = xml`<GrandChild t-on-ev="_onEv"/>`;
      static components = { GrandChild };
      _onEv() {
-        steps.push('Child');
+        steps.push("Child");
      }
    }
    class Parent extends Component<any, any> {
      static template = xml`<Child t-on-ev="_onEv"/>`;
      static components = { Child };
      _onEv() {
-        steps.push('Parent');
+        steps.push("Parent");
      }
    }
    const parent = new Parent();
    await parent.mount(fixture);

    grandChild.trigger("ev");
-    expect(steps).toEqual(['GrandChild', 'Child', 'Parent']);
+    expect(steps).toEqual(["GrandChild", "Child", "Parent"]);
  });

  test("t-if works with t-component", async () => {
@@ -0,0 +1,828 @@
+import { Portal } from "../../src/misc/portal";
+import { xml } from "../../src/tags";
+import { makeTestFixture, makeTestEnv, nextTick } from "../helpers";
+import { Component } from "../../src/component/component";
+import { useState } from "../../src/hooks";
+import { QWeb } from "../../src/qweb";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+// We create before each test:
+// - fixture: a div, appended to the DOM, intended to be the target of dom
+//   manipulations.  Note that it is removed after each test.
+// - outside: a div with id #outside appended into fixture, meant to be used as
+//   target by Portal component
+// - a test env, necessary to create components, that is set on Component
+
+let fixture: HTMLElement;
+let outside: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+  outside = document.createElement("div");
+  outside.setAttribute("id", "outside");
+  fixture.appendChild(outside);
+
+  Component.env = makeTestEnv();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+describe("Portal: Props validation", () => {
+  test("target is mandatory", async () => {
+    const dev = QWeb.dev;
+    QWeb.dev = true;
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <Portal>
+            <div>2</div>
+          </Portal>
+        </div>`;
+    }
+    let error;
+    try {
+      const parent = new Parent();
+      await parent.mount(fixture);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe(`Missing props 'target' (component 'Portal')`);
+
+    QWeb.dev = dev;
+  });
+
+  test("target is not list", async () => {
+    const dev = QWeb.dev;
+    QWeb.dev = true;
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <Portal target="['body']">
+            <div>2</div>
+          </Portal>
+        </div>`;
+    }
+    let error;
+    try {
+      const parent = new Parent();
+      await parent.mount(fixture);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe(`Invalid Prop 'target' in component 'Portal'`);
+
+    QWeb.dev = dev;
+  });
+});
+
+describe("Portal: Basic use and DOM placement", () => {
+  test("basic use of portal", async () => {
+    const dev = QWeb.dev;
+    QWeb.dev = true;
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <span>1</span>
+          <Portal target="'#outside'">
+            <div>2</div>
+          </Portal>
+        </div>`;
+    }
+    let error;
+    let parent;
+    try {
+      parent = new Parent();
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeUndefined();
+    await parent.mount(fixture);
+    expect(outside.innerHTML).toBe("<div>2</div>");
+    expect(parent.el!.outerHTML).toBe("<div><span>1</span><portal></portal></div>");
+    QWeb.dev = dev;
+  });
+
+  test("conditional use of Portal", async () => {
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <span>1</span>
+          <Portal target="'#outside'" t-if="state.hasPortal">
+            <div>2</div>
+          </Portal>
+        </div>`;
+
+      state = useState({ hasPortal: false });
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+    expect(outside.innerHTML).toBe("");
+    expect(parent.el!.outerHTML).toBe("<div><span>1</span></div>");
+
+    parent.state.hasPortal = true;
+    await nextTick();
+    expect(outside.innerHTML).toBe("<div>2</div>");
+    expect(parent.el!.outerHTML).toBe("<div><span>1</span><portal></portal></div>");
+
+    parent.state.hasPortal = false;
+    await nextTick();
+    expect(outside.innerHTML).toBe("");
+    expect(parent.el!.outerHTML).toBe("<div><span>1</span></div>");
+
+    parent.state.hasPortal = true;
+    await nextTick();
+    expect(outside.innerHTML).toBe("<div>2</div>");
+    expect(parent.el!.outerHTML).toBe("<div><span>1</span><portal></portal></div>");
+  });
+
+  test("conditional use of Portal (with sub Component)", async () => {
+    class Child extends Component<any, any> {
+      static template = xml`<div><t t-esc="props.val"/></div>`;
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div>
+          <span>1</span>
+          <Portal t-if="state.hasPortal" target="'#outside'">
+            <Child val="state.val"/>
+          </Portal>
+        </div>`;
+      state = useState({ hasPortal: false, val: 1 });
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+    expect(outside.innerHTML).toBe("");
+    expect(parent.el!.outerHTML).toBe("<div><span>1</span></div>");
+
+    parent.state.hasPortal = true;
+    await nextTick();
+    expect(outside.innerHTML).toBe("<div>1</div>");
+    expect(parent.el!.outerHTML).toBe("<div><span>1</span><portal></portal></div>");
+
+    parent.state.hasPortal = false;
+    await nextTick();
+    expect(outside.innerHTML).toBe("");
+    expect(parent.el!.outerHTML).toBe("<div><span>1</span></div>");
+
+    parent.state.val = 2;
+    await nextTick();
+    expect(outside.innerHTML).toBe("");
+    expect(parent.el!.outerHTML).toBe("<div><span>1</span></div>");
+
+    parent.state.hasPortal = true;
+    await nextTick();
+    expect(outside.innerHTML).toBe("<div>2</div>");
+    expect(parent.el!.outerHTML).toBe("<div><span>1</span><portal></portal></div>");
+  });
+
+  test("with target in template (before portal)", async () => {
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <div id="local-target"></div>
+          <span>1</span>
+          <Portal target="'#local-target'">
+            <p>2</p>
+          </Portal>
+        </div>`;
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+    expect(parent.el!.innerHTML).toBe(
+      '<div id="local-target"><p>2</p></div><span>1</span><portal></portal>'
+    );
+  });
+
+  test("with target in template (after portal)", async () => {
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <span>1</span>
+          <Portal target="'#local-target'">
+            <p>2</p>
+          </Portal>
+          <div id="local-target"></div>
+        </div>`;
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+    expect(parent.el!.innerHTML).toBe(
+      '<span>1</span><portal></portal><div id="local-target"><p>2</p></div>'
+    );
+  });
+
+  test("portal with target not in dom", async () => {
+    const consoleError = console.error;
+    console.error = jest.fn(() => {});
+
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <Portal target="'#does-not-exist'">
+            <div>2</div>
+          </Portal>
+        </div>`;
+    }
+
+    const parent = new Parent();
+    let error;
+    try {
+      await parent.mount(fixture);
+    } catch (e) {
+      error = e;
+    }
+
+    expect(error).toBeDefined();
+    expect(error.message).toBe('Could not find any match for "#does-not-exist"');
+    expect(console.error).toBeCalledTimes(0);
+    expect(fixture.innerHTML).toBe(`<div id="outside"></div>`);
+    console.error = consoleError;
+  });
+
+  test("portal with child and props", async () => {
+    const steps: string[] = [];
+    class Child extends Component<any, any> {
+      static template = xml`<span><t t-esc="props.val"/></span>`;
+      mounted() {
+        steps.push("mounted");
+        expect(outside.innerHTML).toBe("<span>1</span>");
+      }
+      patched() {
+        steps.push("patched");
+        expect(outside.innerHTML).toBe("<span>2</span>");
+      }
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'">
+            <Child val="state.val"/>
+          </Portal>
+        </div>`;
+      state = useState({ val: 1 });
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+    expect(outside.innerHTML).toBe("<span>1</span>");
+    expect(parent.el!.innerHTML).toBe("<portal></portal>");
+
+    parent.state.val = 2;
+    await nextTick();
+    expect(outside.innerHTML).toBe("<span>2</span>");
+    expect(parent.el!.innerHTML).toBe("<portal></portal>");
+    expect(steps).toEqual(["mounted", "patched"]);
+  });
+
+  test("portal with only text as content", async () => {
+    const consoleError = console.error;
+    console.error = jest.fn(() => {});
+
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'">
+            <t t-esc="'only text'"/>
+          </Portal>
+        </div>`;
+    }
+
+    const parent = new Parent();
+    let error;
+    try {
+      await parent.mount(fixture);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Portal must have exactly one non-text child (has 0)");
+    expect(console.error).toBeCalledTimes(0);
+    expect(fixture.innerHTML).toBe(`<div id="outside"></div>`);
+    console.error = consoleError;
+  });
+
+  test("portal with no content", async () => {
+    const consoleError = console.error;
+    console.error = jest.fn(() => {});
+
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'">
+            <t t-if="false" t-esc="'ABC'"/>
+          </Portal>
+        </div>`;
+    }
+
+    const parent = new Parent();
+    let error;
+    try {
+      await parent.mount(fixture);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Portal must have exactly one non-text child (has 0)");
+    expect(console.error).toBeCalledTimes(0);
+    expect(fixture.innerHTML).toBe(`<div id="outside"></div>`);
+    console.error = consoleError;
+  });
+
+  test("portal with many children", async () => {
+    const consoleError = console.error;
+    console.error = jest.fn(() => {});
+
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'">
+            <div>1</div>
+            <p>2</p>
+          </Portal>
+        </div>`;
+    }
+    const parent = new Parent();
+    let error;
+    try {
+      await parent.mount(fixture);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Portal must have exactly one non-text child (has 2)");
+    expect(console.error).toBeCalledTimes(0);
+    expect(fixture.innerHTML).toBe(`<div id="outside"></div>`);
+    console.error = consoleError;
+  });
+
+  test("portal with dynamic body", async () => {
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'">
+            <span t-if="state.val" t-esc="state.val"/>
+            <div t-else=""/>
+          </Portal>
+        </div>`;
+      state = useState({ val: "ab" });
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(outside.innerHTML).toBe(`<span>ab</span>`);
+
+    parent.state.val = "";
+    await nextTick();
+    expect(outside.innerHTML).toBe(`<div></div>`);
+  });
+
+  test("portal could have dynamically no content", async () => {
+    const consoleError = console.error;
+    console.error = jest.fn(() => {});
+
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'">
+            <span t-if="state.val" t-esc="state.val"/>
+          </Portal>
+        </div>`;
+      state = { val: "ab" };
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(outside.innerHTML).toBe(`<span>ab</span>`);
+
+    let error;
+    try {
+      parent.state.val = "";
+      await parent.render();
+    } catch (e) {
+      error = e;
+    }
+    expect(outside.innerHTML).toBe(``);
+
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Portal must have exactly one non-text child (has 0)");
+
+    expect(console.error).toBeCalledTimes(0);
+    console.error = consoleError;
+  });
+
+  test("lifecycle hooks of portal sub component are properly called", async () => {
+    const steps: any[] = [];
+
+    class Child extends Component<any, any> {
+      static template = xml`<span t-esc="props.val"/>`;
+      mounted() {
+        steps.push("child:mounted");
+      }
+      willPatch() {
+        steps.push("child:willPatch");
+      }
+      patched() {
+        steps.push("child:patched");
+      }
+      willUnmount() {
+        steps.push("child:willUnmount");
+      }
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div>
+          <Portal t-if="state.hasChild" target="'#outside'">
+            <Child val="state.val"/>
+          </Portal>
+        </div>`;
+      state = useState({ hasChild: false, val: 1 });
+      mounted() {
+        steps.push("parent:mounted");
+      }
+      willPatch() {
+        steps.push("parent:willPatch");
+      }
+      patched() {
+        steps.push("parent:patched");
+      }
+      willUnmount() {
+        steps.push("parent:willUnmount");
+      }
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+    expect(steps).toEqual(["parent:mounted"]);
+
+    parent.state.hasChild = true;
+    await nextTick();
+    expect(steps).toEqual([
+      "parent:mounted",
+      "parent:willPatch",
+      "child:mounted",
+      "parent:patched"
+    ]);
+
+    parent.state.val = 2;
+    await nextTick();
+    expect(steps).toEqual([
+      "parent:mounted",
+      "parent:willPatch",
+      "child:mounted",
+      "parent:patched",
+      "parent:willPatch",
+      "child:willPatch",
+      "child:patched",
+      "parent:patched"
+    ]);
+
+    parent.state.hasChild = false;
+    await nextTick();
+    expect(steps).toEqual([
+      "parent:mounted",
+      "parent:willPatch",
+      "child:mounted",
+      "parent:patched",
+      "parent:willPatch",
+      "child:willPatch",
+      "child:patched",
+      "parent:patched",
+      "parent:willPatch",
+      "child:willUnmount",
+      "parent:patched"
+    ]);
+  });
+
+  test("portal destroys on crash", async () => {
+    class Child extends Component<any, any> {
+      static template = xml`<span t-esc="props.error and this.will.crash" />`;
+      state = {};
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'" >
+            <Child error="state.error"/>
+          </Portal>
+        </div>`;
+      state = { error: false };
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+    parent.state.error = true;
+
+    let error;
+    try {
+      await parent.render();
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Cannot read property 'crash' of undefined");
+  });
+});
+
+describe("Portal: Events handling", () => {
+  test("events triggered on movable pure node are handled", async () => {
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'">
+            <span id="trigger-me" t-on-custom="_onCustom" t-esc="state.val"/>
+          </Portal>
+        </div>`;
+      state = useState({ val: "ab" });
+
+      _onCustom() {
+        this.state.val = "triggered";
+      }
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(outside.innerHTML).toBe(`<span id="trigger-me">ab</span>`);
+    outside.querySelector("#trigger-me")!.dispatchEvent(new Event("custom"));
+    await nextTick();
+    expect(outside.innerHTML).toBe(`<span id="trigger-me">triggered</span>`);
+  });
+
+  test("events triggered on movable owl components are redirected", async () => {
+    let childInst: Component<any, any> | null = null;
+    class Child extends Component<any, any> {
+      static template = xml`
+         <span t-on-custom="_onCustom" t-esc="props.val"/>`;
+
+      constructor(parent, props) {
+        super(parent, props);
+        childInst = this;
+      }
+
+      _onCustom() {
+        this.trigger("custom-portal");
+      }
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div t-on-custom-portal="_onCustomPortal">
+          <Portal target="'#outside'">
+            <Child val="state.val"/>
+          </Portal>
+        </div>`;
+      state = useState({ val: "ab" });
+
+      _onCustomPortal() {
+        this.state.val = "triggered";
+      }
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(outside.innerHTML).toBe(`<span>ab</span>`);
+    childInst!.trigger("custom");
+    await nextTick();
+    expect(outside.innerHTML).toBe(`<span>triggered</span>`);
+  });
+
+  test("events triggered on contained movable owl components are redirected", async () => {
+    const steps: string[] = [];
+    let childInst: Component<any, any> | null = null;
+    class Child extends Component<any, any> {
+      static template = xml`
+         <span t-on-custom="_onCustom"/>`;
+
+      constructor(parent, props) {
+        super(parent, props);
+        childInst = this;
+      }
+
+      _onCustom() {
+        this.trigger("custom-portal");
+      }
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div t-on-custom="_handled" t-on-custom-portal="_handled">
+          <Portal target="'#outside'">
+            <div>
+              <Child/>
+            </div>
+          </Portal>
+        </div>`;
+
+      _handled(ev) {
+        steps.push(ev.type);
+      }
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    childInst!.trigger("custom");
+    await nextTick();
+
+    // This is expected because trigger is synchronous
+    expect(steps).toMatchObject(["custom-portal", "custom"]);
+  });
+
+  test("Dom events are not mapped", async () => {
+    let childInst: Component<any, any> | null = null;
+    const steps: string[] = [];
+    class Child extends Component<any, any> {
+      static template = xml`
+        <button>child</button>`;
+
+      constructor(parent, props) {
+        super(parent, props);
+        childInst = this;
+      }
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div t-on-click="_handled">
+          <Portal target="'#outside'">
+            <Child />
+          </Portal>
+        </div>`;
+
+      _handled(ev) {
+        steps.push(ev.type as string);
+      }
+    }
+    const bodyListener = ev => {
+      steps.push(`body: ${ev.type}`);
+    };
+    document.body.addEventListener("click", bodyListener);
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+    childInst!.el!.click();
+
+    expect(steps).toEqual(["body: click"]);
+    document.body.removeEventListener("click", bodyListener);
+  });
+
+  test("Nested portals event propagation", async () => {
+    const outside2 = document.createElement("div");
+    outside2.setAttribute("id", "outside2");
+    fixture.appendChild(outside2);
+
+    const steps: Array<string> = [];
+    let childInst: Component<any, any> | null = null;
+    class Child2 extends Component<any, any> {
+      static template = xml`<div>child2</div>`;
+      constructor(parent, props) {
+        super(parent, props);
+        childInst = this;
+      }
+    }
+    class Child extends Component<any, any> {
+      static components = { Portal, Child2 };
+      static template = xml`
+        <Portal target="'#outside2'">
+          <Child2 />
+        </Portal>`;
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div t-on-custom='_handled'>
+          <Portal target="'#outside'">
+            <Child/>
+          </Portal>
+        </div>`;
+
+      _handled(ev) {
+        steps.push(`${ev.type} from ${ev.originalComponent.constructor.name}`);
+      }
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    childInst!.trigger("custom");
+    expect(steps).toEqual(["custom from Child2"]);
+  });
+
+  test("portal's parent's env is not polluted", async () => {
+    class Child extends Component<any, any> {
+      static template = xml`
+        <button>child</button>`;
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'">
+            <Child />
+          </Portal>
+        </div>`;
+    }
+    const parent = new Parent();
+    const parentEnv = Object.assign({}, parent.env);
+    await parent.mount(fixture);
+    expect(parentEnv).toStrictEqual(parent.env);
+  });
+
+  test("Portal composed with t-slot", async () => {
+    const steps: Array<string> = [];
+    let childInst: Component<any, any> | null = null;
+    class Child2 extends Component<any, any> {
+      static template = xml`<div>child2</div>`;
+      constructor(parent, props) {
+        super(parent, props);
+        childInst = this;
+      }
+    }
+    class Child extends Component<any, any> {
+      static components = { Portal, Child2 };
+      static template = xml`
+        <Portal target="'#outside'">
+          <t t-slot="default"/>
+        </Portal>`;
+    }
+    class Parent extends Component<any, any> {
+      static components = { Child, Child2 };
+      static template = xml`
+        <div t-on-custom='_handled'>
+          <Child>
+            <Child2/>
+          </Child>
+        </div>`;
+
+      _handled(ev) {
+        steps.push(ev.type as string);
+      }
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    childInst!.trigger("custom");
+    expect(steps).toEqual(["custom"]);
+  });
+});
+
+describe("Portal: UI/UX", () => {
+  test("focus is kept across re-renders", async () => {
+    class Child extends Component<any, any> {
+      static template = xml`
+        <input id="target-me" t-att-placeholder="props.val"/>`;
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'">
+            <Child val="state.val"/>
+          </Portal>
+        </div>`;
+      state = useState({ val: "ab" });
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+    const input = document.querySelector("#target-me");
+    expect(input!.nodeName).toBe("INPUT");
+    expect((input as HTMLInputElement).placeholder).toBe("ab");
+
+    (input as HTMLInputElement).focus();
+    expect(document.activeElement === input).toBeTruthy();
+
+    parent.state.val = "bc";
+    await nextTick();
+    const inputReRendered = document.querySelector("#target-me");
+    expect(inputReRendered!.nodeName).toBe("INPUT");
+    expect((inputReRendered as HTMLInputElement).placeholder).toBe("bc");
+    expect(document.activeElement === inputReRendered).toBeTruthy();
+  });
+});
@@ -6,16 +6,16 @@ exports[`Link component can render simple cases 1`] = `
    let utils = this.constructor.utils;
    let owner = context;
    var h = this.h;
-    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}));
+    let _5 = utils.toObj({'router-link-active':context['isActive']});
+    var _6 = context['href'];
+    let c7 = [], p7 = {key:7,attrs:{href: _6},class:_5,on:{}};
+    var vn7 = h('a', p7, c7);
+    extra.handlers['click' + 7] = extra.handlers['click' + 7] || function (e) {const fn = context['navigate'];if (fn) { fn.call(owner, e); } else { context.navigate; }};
+    p7.on['click'] = extra.handlers['click' + 7];
+    const slot8 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
+    if (slot8) {
+        slot8.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: c7, vars: extra.vars, parent: extra.parent || owner}));
    }
-    return vn8;
+    return vn7;
 }"
 `;
@@ -10,35 +10,33 @@ exports[`RouteComponent can render simple cases 1`] = `
    let result;
    var h = this.h;
    if (context['routeComponent']) {
-        const nodeKey6 = context['env'].router.currentRouteName;
+        const nodeKey5 = context['env'].router.currentRouteName;
        //COMPONENT
-        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;
+        let k7 = \`__8__\` + nodeKey5;
+        let w6 = k7 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k7]] : false;
+        let vn9 = {};
+        result = vn9;
+        let props6 = Object.assign({}, context['env'].router.currentParams);
+        if (w6 && w6.__owl__.currentFiber && !w6.__owl__.vnode) {
+            w6.destroy();
+            w6 = false;
        }
-        if (w8) {
-            w8.__updateProps(props8, extra.fiber, undefined, undefined);
-            let pvnode = w8.__owl__.pvnode;
-            utils.defineProxy(vn11, pvnode);
+        if (w6) {
+            w6.__updateProps(props6, extra.fiber, undefined, undefined);
+            let pvnode = w6.__owl__.pvnode;
+            utils.defineProxy(vn9, pvnode);
        } else {
-            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;
+            let componentKey6 = \`routeComponent\`;
+            let W6 = context.constructor.components[componentKey6] || QWeb.components[componentKey6]|| context['routeComponent'];
+            if (!W6) {throw new Error('Cannot find the definition of component \\"' + componentKey6 + '\\"')}
+            w6 = new W6(parent, props6);
+            parent.__owl__.cmap[k7] = w6.__owl__.id;
+            let fiber = w6.__prepare(extra.fiber, undefined, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            let pvnode = h('dummy', {key: k7, hook: {remove() {},destroy(vn) {w6.destroy();}}});
+            utils.defineProxy(vn9, pvnode);
+            w6.__owl__.pvnode = pvnode;
        }
-        w8.__owl__.parentLastFiberId = extra.fiber.id;
+        w6.__owl__.parentLastFiberId = extra.fiber.id;
    }
    return result;
 }"
@@ -0,0 +1,57 @@
+/**
+ * We can only make one test per file, since the debug tool modify in place
+ * the owl object in a way that is difficult to undo.
+ */
+
+import { debugOwl } from "../../tools/debug";
+import * as owl from "../../src/index";
+
+import { Component, Env } from "../../src/component/component";
+import { xml } from "../../src/tags";
+import { useState } from "../../src/hooks";
+import { makeTestFixture, makeTestEnv, nextTick } from "../helpers";
+
+let fixture: HTMLElement = makeTestFixture();
+let env: Env = makeTestEnv();
+Component.env = env;
+
+debugOwl(owl, {});
+
+test("can log full lifecycle", async () => {
+  const steps: string[] = [];
+  const log = console.log;
+  console.log = arg => steps.push(arg);
+
+  class Child extends Component<any, any> {
+    static template = xml`<div>child</div>`;
+  }
+
+  class Parent extends Component<any, any> {
+    static template = xml`<div><Child t-if="state.flag"/></div>`;
+    static components = { Child };
+    state = useState({ flag: false });
+  }
+
+  const parent = new Parent(null, {});
+  await parent.mount(fixture);
+
+  parent.state.flag = true;
+  await nextTick();
+
+  expect(steps).toEqual([
+    "[OWL_DEBUG] Parent<id=1> constructor, props={}",
+    "[OWL_DEBUG] Parent<id=1> mount",
+    "[OWL_DEBUG] Parent<id=1> willStart",
+    "[OWL_DEBUG] Parent<id=1> rendering template",
+    "[OWL_DEBUG] Parent<id=1> mounted",
+    "[OWL_DEBUG] Parent<id=1> render",
+    "[OWL_DEBUG] Parent<id=1> rendering template",
+    "[OWL_DEBUG] Child<id=2> constructor, props={}",
+    "[OWL_DEBUG] Child<id=2> willStart",
+    "[OWL_DEBUG] Child<id=2> rendering template",
+    "[OWL_DEBUG] Parent<id=1> willPatch",
+    "[OWL_DEBUG] Child<id=2> mounted",
+    "[OWL_DEBUG] Parent<id=1> patched"
+  ]);
+  console.log = log;
+});
@@ -0,0 +1,50 @@
+/**
+ * We can only make one test per file, since the debug tool modify in place
+ * the owl object in a way that is difficult to undo.
+ */
+
+import { debugOwl } from "../../tools/debug";
+import * as owl from "../../src/index";
+
+import { Component, Env } from "../../src/component/component";
+import { xml } from "../../src/tags";
+import { makeTestFixture, makeTestEnv } from "../helpers";
+
+let fixture: HTMLElement = makeTestFixture();
+let env: Env = makeTestEnv();
+Component.env = env;
+
+debugOwl(owl, { logScheduler: true });
+
+test("can log scheduler start and stop", async () => {
+  const steps: string[] = [];
+  const log = console.log;
+  console.log = arg => steps.push(arg);
+
+  class Child extends Component<any, any> {
+    static template = xml`<div>child</div>`;
+  }
+
+  class Parent extends Component<any, any> {
+    static template = xml`<div><Child /></div>`;
+    static components = { Child };
+  }
+
+  const parent = new Parent(null, {});
+  await parent.mount(fixture);
+
+  expect(steps).toEqual([
+    "[OWL_DEBUG] Parent<id=1> constructor, props={}",
+    "[OWL_DEBUG] Parent<id=1> mount",
+    "[OWL_DEBUG] Parent<id=1> willStart",
+    "[OWL_DEBUG] scheduler: start running tasks queue",
+    "[OWL_DEBUG] Parent<id=1> rendering template",
+    "[OWL_DEBUG] Child<id=2> constructor, props={}",
+    "[OWL_DEBUG] Child<id=2> willStart",
+    "[OWL_DEBUG] Child<id=2> rendering template",
+    "[OWL_DEBUG] Child<id=2> mounted",
+    "[OWL_DEBUG] Parent<id=1> mounted",
+    "[OWL_DEBUG] scheduler: stop running tasks queue"
+  ]);
+  console.log = log;
+});
@@ -85,7 +85,7 @@ function getFiles(path: string[] = []): FileData[] {
  return Array.prototype.concat(...files);
 }

-const LOCAL_FILES = ["LICENSE"];
+const LOCAL_FILES = ["LICENSE", "tools/debug.js"];
 export function isLinkValid(link: MarkDownLink, current: FileData, files: FileData[]): boolean {
  if (link.link.startsWith("http")) {
    // no check on external links
@@ -0,0 +1,139 @@
+/**
+ * Debug Script
+ *
+ * This code is intended to be evaluated in an environment where owl is available,
+ * to log lot of helpful information on how Owl components behave.
+ */
+
+ function debugOwl(owl, options) {
+  let prefix = "[OWL_DEBUG]";
+  let current;
+  Object.defineProperty(owl.Component, "current", {
+    get() {
+      return current;
+    },
+    set(comp) {
+      current = comp;
+      const name = comp.constructor.name;
+      if (options.componentBlackList && options.componentBlackList.test(name)) {
+        return;
+      }
+      if (options.componentWhiteList && !options.componentWhiteList.test(name)) {
+        return;
+      }
+      let __owl__;
+      Object.defineProperty(current, "__owl__", {
+        get() {
+          return __owl__;
+        },
+        set(val) {
+          __owl__ = val;
+          debugComponent(comp, name, __owl__.id);
+        }
+      });
+    }
+  });
+
+  function toStr(obj) {
+    let str = JSON.stringify(obj || {});
+    if (str.length > 200) {
+      str = str.slice(0, 200) + "...";
+    }
+    return str;
+  }
+
+  function debugComponent(component, name, id) {
+    let fullName = `${name}<id=${id}>`;
+    let shouldDebug = method => {
+      if (options.methodBlackList && options.methodBlackList.includes(method)) {
+        return false;
+      }
+      if (options.methodWhiteList && !options.methodWhiteList.includes(method)) {
+        return false;
+      }
+      return true;
+    };
+    if (shouldDebug("constructor")) {
+      console.log(`${prefix} ${fullName} constructor, props=${toStr(component.props)}`);
+    }
+    if (shouldDebug("willStart")) {
+      owl.hooks.onWillStart(() => {
+        console.log(`${prefix} ${fullName} willStart`);
+      });
+    }
+    if (shouldDebug("mounted")) {
+      owl.hooks.onMounted(() => {
+        console.log(`${prefix} ${fullName} mounted`);
+      });
+    }
+    if (shouldDebug("willUpdateProps")) {
+      owl.hooks.onWillUpdateProps(nextProps => {
+        console.log(`${prefix} ${fullName} willUpdateProps, nextprops=${toStr(nextProps)}`);
+      });
+    }
+    if (shouldDebug("willPatch")) {
+      owl.hooks.onWillPatch(() => {
+        console.log(`${prefix} ${fullName} willPatch`);
+      });
+    }
+    if (shouldDebug("patched")) {
+      owl.hooks.onPatched(() => {
+        console.log(`${prefix} ${fullName} patched`);
+      });
+    }
+    if (shouldDebug("willUnmount")) {
+      owl.hooks.onWillUnmount(() => {
+        console.log(`${prefix} ${fullName} willUnmount`);
+      });
+    }
+    const __render = component.__render.bind(component);
+    component.__render = function(...args) {
+      console.log(`${prefix} ${fullName} rendering template`);
+      __render(...args);
+    };
+    const render = component.render.bind(component);
+    component.render = function(...args) {
+      console.log(`${prefix} ${fullName} render`);
+      return render(...args);
+    };
+    const mount = component.mount.bind(component);
+    component.mount = function(...args) {
+      console.log(`${prefix} ${fullName} mount`);
+      return mount(...args);
+    };
+  }
+
+  if (options.logScheduler) {
+    let start = owl.Component.scheduler.start;
+    let stop = owl.Component.scheduler.stop;
+    owl.Component.scheduler.start = function () {
+      console.log(`${prefix} scheduler: start running tasks queue`);
+      start.call(this);
+    };
+    owl.Component.scheduler.stop = function () {
+      console.log(`${prefix} scheduler: stop running tasks queue`);
+      stop.call(this);
+    };
+  }
+  if (options.logStore) {
+    let dispatch = owl.Store.prototype.dispatch;
+    owl.Store.prototype.dispatch = function(action, ...payload) {
+      console.log(`${prefix} store: action '${action}' dispatched. Payload: '${toStr(payload)}'`);
+      return dispatch.call(this, action, ...payload);
+    };
+  }
+}
+
+
+// This debug function can then be used like this:
+//
+// debugOwl(owl, {
+//   componentBlackList: /App/,  // regexp
+//   componentWhiteList: /SomeComponent/, // regexp
+//   methodBlackList: ["mounted"], // list of method names
+//   methodWhiteList: ["willStart"], // list of method names
+//   logScheduler: true, // display/mute scheduler logs
+//   logStore: true // display/mute store logs
+// });
+
+module.exports.debugOwl = debugOwl;
@@ -1444,6 +1444,111 @@ const FORM_XML = `<templates>
 </templates>
 `;

+const PORTAL_COMPONENTS = `
+// This shows the expected use case of Portal
+// which is to implement something similar
+// to bootstrap modal
+const { Component, useState } = owl;
+const { Portal } = owl.misc;
+
+class Modal extends Component {}
+Modal.components = { Portal };
+
+class Dialog extends Component {}
+Dialog.components = { Modal };
+
+class Interstellar extends Component {}
+
+// Main root component
+class App extends Component {
+    state = useState({
+        name: 'Portal used for Dialog (Modal)',
+        dialog: false,
+        text: 'Hello !',
+    });
+}
+App.components = { Dialog , Interstellar };
+
+// Application setup
+const app = new App();
+app.mount(document.body);
+`;
+
+const PORTAL_XML = `
+<templates>
+  <t t-name="Modal">
+    <Portal target="'body'">
+        <div class="owl-modal-supercontainer">
+          <div class="owl-modal-backdrop"></div>
+          <div class="owl-modal-container">
+            <t t-slot="default" />
+          </div>
+        </div>
+    </Portal>
+  </t>
+
+  <t t-name="Dialog">
+    <Modal>
+      <div class="owl-dialog-body">
+        <t t-slot="default" />
+      </div>
+    </Modal>
+  </t>
+
+  <div t-name="Interstellar" class="owl-interstellar">
+    <h4>This is a subComponent</h4>
+    <p>The events it triggers will go through the Portal and be teleported
+    on the other side of the wormhole it has created</p>
+    <button t-on-click="trigger('collapse-all')">Close the wormhole</button>
+  </div>
+
+  <div t-name="App" t-on-collapse-all="state.dialog=false">
+    <div t-esc="state.name"/>
+    <button t-on-click="state.dialog = true">Open Dialog</button>
+    <Dialog t-if="state.dialog">
+      <div t-esc="state.text"/>
+      <Interstellar />
+    </Dialog>
+  </div>
+</templates>
+`;
+
+const PORTAL_CSS = `
+.owl-modal-supercontainer {
+  position: static;
+}
+.owl-modal-backdrop {
+    position: fixed;
+    top: 0;
+    left:0;
+    background-color: #000000;
+    opacity: 0.5;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1000;
+}
+.owl-modal-container {
+    opacity:1;
+    z-index: 1050;
+    position: fixed;
+    top: 0;
+    left:0;
+    width: 100%;
+    height: 100%;
+}
+.owl-dialog-body {
+    max-width: 500px;
+    margin: 0 auto;
+    position: relative;
+    text-align: center;
+    padding: 2rem;
+    background-color: #FFFFFF;
+    max-height: 100%;
+}
+.owl-interstellar {
+    border: groove;
+}`
+
 const WMS = `// This example is slightly more complex than usual. We demonstrate
 // here a way to manage sub windows in Owl, declaratively. This is still just a
 // demonstration. Managing windows can be as complex as we want.  For example,
@@ -1770,5 +1875,11 @@ export const SAMPLES = [
    code: ASYNC_COMPONENTS,
    xml: ASYNC_COMPONENTS_XML,
    css: ASYNC_COMPONENTS_CSS
-  }
+  },
+  {
+    description: "Portal (Dialog)",
+    code: PORTAL_COMPONENTS,
+    xml: PORTAL_XML,
+    css: PORTAL_CSS,
+  },
 ];
Author	SHA1	Message	Date
Géry Debongnie	42aa9d3ae1	[REL] v1.0.0-beta1	2019-12-03 08:52:04 +01:00
Géry Debongnie	85f26a0286	[IMP] tools: update debug script, add tests closes #525 closes #526	2019-12-03 08:28:46 +01:00
Géry Debongnie	ed4ab51c17	[FIX] component: tricky concurrency issue This is a really interesting problem: there was a situation where a component would not have an event handler properly bound. The reason was that we were in a situation where the scheduler task queue was flushed at an unfortunate timing: - parent component template is rendered - subcomponent is prepared: - sub component is willStarted - it is rendered (so, fiber counter is set to 0) - scheduler task queue is flushed => we patch the DOM - the code registered in the __prepare.then(handler) is executed, which add the createHook to the vnode (but after the dom is patched) Usually, the last two steps happen in a different order, but in an environment with connected components, we sometimes flush the task queue at various moments, so some code could be executed between the end of __prepare and the registered handler. The fix is interesting: we give a callback to the __prepare function instead of registering a .then handler to the deferred. This callback is then guaranteed to be called at exactly the proper timing. Thanks seb for the hard work of finding the root cause of this issue closes #520	2019-12-03 08:23:10 +01:00
Lucas Perais (lpe)	556a4644f0	[ADD] misc: component Portal The component Portal is used to teleport the content in its slot as a child of an element somewhere else in the DOM, usually 'body' It is designed to be transparent and is just here to do the teleportation task OwlEvents (with method `Component.trigger`) are redirected from any Component instanciated within the Portal (and therefore teleported somewhere else) to the place it would have been without teleportation i.e. they are re-triggered onto the Portal root node Co-authored-by: Aaron Bohy <aab@odoo.com> closes #184 closes #466	2019-12-02 21:04:07 +01:00
Géry Debongnie	821bd0b4b8	[IMP] tooling: add debug code closes #521	2019-12-02 09:03:48 +01:00
Géry Debongnie	06a6d890d7	[DOC] move some component doc in sub pages closes #354	2019-12-02 08:55:12 +01:00