[REL] v1.0.0-alpha3

closes #440

README.md

@@ -92,7 +92,8 @@ A complete documentation for Owl can be found here:
 
 The most important sections are:
 
-- [Quick Start](doc/learning/quick_start.md)
+- [Tutorial: TodoList application](doc/learning/tutorial_todoapp.md)
+- [QWeb templating language](doc/reference/qweb_templating_language.md)
 - [Component](doc/reference/component.md)
 - [Hooks](doc/reference/hooks.md)
 
@@ -103,8 +104,8 @@ Submit a PR!
 
 If you want to use a simple `<script>` tag, the last release can be downloaded here:
 
-- [owl-1.0.0-alpha.js](https://github.com/odoo/owl/releases/download/v1.0.0-alpha/owl.js)
-- [owl-1.0.0-alpha.min.js](https://github.com/odoo/owl/releases/download/v1.0.0-alpha/owl.min.js)
+- [owl-1.0.0-alpha3.js](https://github.com/odoo/owl/releases/download/v1.0.0-alpha3/owl.js)
+- [owl-1.0.0-alpha3.min.js](https://github.com/odoo/owl/releases/download/v1.0.0-alpha3/owl.min.js)
 
 Some npm scripts are available:
 

doc/comparison.md

@@ -274,7 +274,7 @@ class Counter extends Component {
   dispatch = useDispatch();
 }
 
-owl.config.env.store = store;
+Counter.env.store = store;
 const counter = new Counter();
 ```
 

doc/learning/environment.md

@@ -1,48 +0,0 @@
-# 🦉 Environment 🦉
-
-An environment is an object which contains a [`QWeb` instance](../reference/qweb.md).
-Whenever a root component is created, it is assigned an environment (see the
-reference section on [environment](../reference/environment.md). This environment
-is then automatically given to each sub components (and accessible in the `this.env` property).
-
-The environment is mostly static. Each application is free to add anything to
-the environment, which is very useful, since this can be accessed by each sub
-component.
-
-Some good use cases for the environment is:
-
-- some configuration keys,
-- session information,
-- generic services (such as doing rpcs, or accessing local storage).
-
-Doing it this way means that components are easily testable: we can simply
-create a test environment with mock services.
-
-For example:
-
-
-```js
-async function myEnv() {
-    const templates = await loadTemplates();
-    const qweb = new QWeb({templates});
-    const session = getSession();
-
-    return {
-        _t: myTranslateFunction,
-        session: session,
-        qweb: qweb,
-        services: {
-            localStorage: localStorage,
-            rpc: rpc,
-        },
-        debug: false,
-        inMobileMode: true,
-    };
-}
-
-async function start() {
-    owl.config.env = await myEnv();
-    const app = new App();
-    await app.mount(document.body);
-}
-```

doc/learning/quick_start.md

@@ -97,8 +97,7 @@ class ClickCounter extends owl.Component {
 //------------------------------------------------------------------------------
 async function start() {
   const templates = await owl.utils.loadFile("templates.xml");
-  const qweb = new owl.QWeb({ templates });
-  owl.config.env.qweb = qweb;
+  ClickCounter.env = { qweb: new owl.QWeb({ templates }) };
   const counter = new ClickCounter();
   const target = document.getElementById("main");
   await counter.mount(target);

doc/readme.md

@@ -1,61 +1,5 @@
 # 🦉 OWL Documentation 🦉
 
-## Owl Content
-
-Owl is a javascript library that contains some core classes and function to help
-build applications. Here is a complete representation of its content:
-
-```
-owl
-    Component
-    Context
-    QWeb
-    Store
-    useState
-    config
-        mode
-        env
-    core
-        EventBus
-        Observer
-    hooks
-        onWillStart
-        onMounted
-        onWillUpdateProps
-        onWillPatch
-        onPatched
-        onWillUnmount
-        useContext
-        useState
-        useRef
-        useSubEnv
-        useStore
-        useDispatch
-        useGetters
-    misc
-        AsyncRoot
-    router
-        Link
-        RouteComponent
-        Router
-    tags
-        xml
-    utils
-        debounce
-        escape
-        loadJS
-        loadFile
-        shallowEqual
-        whenReady
-```
-
-Note that for convenience, the `useState` hook is also exported at the root of the `owl` object.
-
-## Learning Resources
-
-- [Quick Start: create an (almost) empty Owl application](learning/quick_start.md)
-- [Environment: what it is and what it should contain](learning/environment.md)
-
 ## Reference
 
 - [Animations](reference/animations.md)
@@ -65,14 +9,21 @@ Note that for convenience, the `useState` hook is also exported at the root of t
 - [Environment](reference/environment.md)
 - [Event Bus](reference/event_bus.md)
 - [Hooks](reference/hooks.md)
-- [Misc](reference/misc.md)
+- [Miscellaneous Components](reference/misc.md)
 - [Observer](reference/observer.md)
-- [QWeb](reference/qweb.md)
+- [Props](reference/props.md)
+- [QWeb Templating Language](reference/qweb_templating_language.md)
+- [QWeb Engine](reference/qweb_engine.md)
 - [Router](reference/router.md)
 - [Store](reference/store.md)
 - [Tags](reference/tags.md)
 - [Utils](reference/utils.md)
 
+## Learning Resources
+
+- [Quick Start: create an (almost) empty Owl application](learning/quick_start.md)
+- [Tutorial: create a TodoList application](learning/tutorial_todoapp.md)
+
 ## Miscellaneous
 
 - [Comparison with React/Vue](comparison.md)
@@ -81,8 +32,43 @@ Note that for convenience, the `useState` hook is also exported at the root of t
 
 ## Architecture
 
-This section explains in more detail the inner workings of Owl. It is more
-useful for people working on Owl code.
+This section explains in more detail the inner workings of Owl. It is targeted
+for developers working on Owl itself.
 
 - [Virtual DOM](architecture/vdom.md)
 - [Rendering](architecture/rendering.md)
+
+## Owl Content
+
+Here is a complete visual representation of everything exported by the `owl`
+global object (so, for example, `Component` is available at `owl.Component`,
+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
+    onWillUnmount
+    useContext
+    useState
+    useRef
+    useSubEnv
+    useStore
+    useDispatch
+    useGetters
+```
+
+Note that for convenience, the `useState` hook is also exported at the root of the `owl` object.

doc/reference/component.md

@@ -14,11 +14,11 @@
   - [Composition](#composition)
   - [Event Handling](#event-handling)
   - [Form Input Bindings](#form-input-bindings)
-  - [`t-key` Directive](#t-key-directive)
   - [Semantics](#semantics)
   - [Props Validation](#props-validation)
   - [References](#references)
   - [Slots](#slots)
+  - [Dynamic sub components](#dynamic-sub-components)
   - [Asynchronous Rendering](#asynchronous-rendering)
   - [Error Handling](#error-handling)
   - [Functional Components](#functional-components)
@@ -42,7 +42,7 @@ OWL components are the building blocks for user interface. They are designed to
    and follow the QWeb specification. This is a requirement for Odoo.
 
 OWL components are defined as a subclass of Component. The rendering is
-exclusively done by a [QWeb](qweb.md) template (which needs to be preloaded in QWeb).
+exclusively done by a [QWeb](qweb_templating_language.md) template (which needs to be preloaded in QWeb).
 Rendering a component generates a virtual dom representation
 of the component, which is then patched to the DOM, in order to apply the changes in an efficient way.
 
@@ -81,7 +81,7 @@ a state object is defined, by using the `useState` hook. It is not mandatory to
 
 An Owl component is a small class which represents a component or some UI element.
 It exists in the context of an [environment](environment.md) (`env`), which is propagated from a
-parent to its children. The environment needs to have a [QWeb](qweb.md) instance, which
+parent to its children. The environment needs to have a [QWeb](qweb_templating_language.md) instance, which
 will be used to render the component template.
 
 Be aware that the name of the component may be significant: if a component does
@@ -166,7 +166,7 @@ to be called in the constructor.
 - **`el`** (HTMLElement | null): reference to the DOM root node of the element. It is `null` when the
   component is not mounted.
 
-- **`env`** (Object): the component environment, which contains a QWeb instance.
+- **`env`** (Object): the component [environment](environment.md), which contains a QWeb instance.
 
 - **`props`** (Object): this is an object containing all the properties given by
   the parent to a child component. For example, in the following situation,
@@ -237,16 +237,15 @@ component.
 
 We explain here all the public methods of the `Component` class.
 
-- **`mount(target, renderBeforeRemount=false)`** (async): this is the main way a
+- **`mount(target)`** (async): this is the main way a
   component is added to the DOM: the root component is mounted to a target
   HTMLElement. Obviously, this is asynchronous, since each children need to be
   created as well. Most applications will need to call `mount` exactly once, on
   the root component.
 
-  The `renderBeforeRemount` argument is useful when a component is unmounted and remounted.
-  In that case, we may want to rerender the component _before_ it is remounted, if
-  we know that its state (or something in the environment, or ...) has changed.
-  In that case, it should simply set to `true`.
+  Note that if a component is mounted, unmounted and remounted, it will be
+  automatically re-rendered to ensure that changes in its state (or something
+  in the environment, or in the store, or ...) will be taken into account.
 
 - **`unmount()`**: in case a component needs to be detached/removed from the DOM, this
   method can be used. Most applications should not call `unmount`, this is more
@@ -443,8 +442,13 @@ const app = new App();
 app.mount(document.body);
 ```
 
-The root component does not have a parent nor props. It will be setup with an
-[environment](environment.md) (located in `owl.config.env`).
+The root component does not have a parent nor `props` (see note below). It will be setup with an
+[environment](environment.md) (either the `env` defined on its class, or a
+default empty environment).
+
+Note: a root component can however be given a `props` object in its constructor,
+like this: `new App(null, {some: 'object'});`. It will not be a true `props`
+object, managed by Owl (so, for example, it will never be updated).
 
 ### Composition
 
@@ -498,66 +502,8 @@ the static `components` key, then fallbacks on the global registry.
 _Props_: In this example, the child component will receive the object `{count: 4}` in its
 constructor. This will be assigned to the `props` variable, which can be accessed
 on the component (and also, in the template). Whenever the state is updated, then
-the sub component will also be updated automatically.
-
-Note that there are restrictions on valid prop names: `class`, `style` and any
-string which starts with `t-` are not allowed.
-
-It is not common, but sometimes we need a dynamic component name and/or dynamic props. In this case,
-the `t-component` directive can also be used to accept dynamic values with string interpolation (like the [`t-attf-`](qweb.md#dynamic-attributes) directive):
-
-```xml
-<div t-name="ParentComponent">
-    <t t-component="ChildComponent{{id}}" />
-</div>
-```
-
-```js
-class ParentComponent {
-  static components = { ChildComponent1, ChildComponent2 };
-  state = { id: 1 };
-}
-```
-
-And the `t-props` directive can be used to specify totally dynamic props:
-
-```xml
-<div t-name="ParentComponent">
-    <Child t-props="some.obj"/>
-</div>
-```
-
-```js
-class ParentComponent {
-  static components = { Child };
-  some = { obj: { a: 1, b: 2 } };
-}
-```
-
-There is an even more dynamic way to use `t-component`: its value can be an
-expression evaluating to an actual component class. In that case, this is the
-class that will be used to create the component:
-
-```js
-class A extends Component<any, any, any> {
-  static template = xml`<span>child a</span>`;
-}
-class B extends Component<any, any, any> {
-  static template = xml`<span>child b</span>`;
-}
-class App extends Component<any, any, any> {
-  static template = xml`<t t-component="myComponent" t-key="state.child"/>`;
-
-  state = { child: "a" };
-
-  get myComponent() {
-    return this.state.child === "a" ? A : B;
-  }
-}
-```
-
-In this example, the component `App` selects dynamically the concrete sub
-component class.
+the sub component will also be updated automatically. See the [props section](props.md)
+for more information.
 
 **CSS and style:** Owl allows the parent to declare
 additional css classes or style for the sub component: css declared in `class`, `style`, `t-att-class` or `t-att-style` will be added to the
@@ -783,70 +729,6 @@ update a number whenever the change is done.
 
 Note: the online playground has an example to show how it works.
 
-### `t-key` Directive
-
-Even though Owl tries to be as declarative as possible, the DOM does not fully
-expose its state declaratively in the DOM tree. For example, the scrolling state,
-the current user selection, the focused element or the state of an input are not
-set as attribute in the DOM tree. This is why we use a virtual dom
-algorithm to keep the actual DOM node as much as possible.
-
-However, in some situations, this is not enough, and we need to help Owl decide
-if an element is actually the same, or is a different element with the same
-properties.
-
-Consider the following situation: we have a list of two items `[{text: "a"}, {text: "b"}]`
-and we render them in this template:
-
-```xml
-<p t-foreach="items" t-as="item"><t t-esc="item.text"/></p>
-```
-
-The result will be two `<p>` tags with text `a` and `b`. Now, if we swap them,
-and rerender the template, Owl needs to know what the intent is:
-
-- should Owl actually swap the DOM nodes,
-- or should it keep the DOM nodes, but with an updated text content?
-
-This might look trivial, but it actually matters. These two possibilities lead
-to different results in some cases. For example, if the user selected the text
-of the first `p`, swapping them will keep the selection while updating the
-text content will not.
-
-There are many other cases where this is important: `input` tags with their
-value, css classes and animations, scroll position...
-
-So, the `t-key` directive is used to give an identity to an element. It allows
-Owl to understand if different elements of a list are actually different or not.
-
-The above example could be modified by adding an ID: `[{id: 1, text: "a"}, {id: 2, text: "b"}]`.
-Then, the template could look like this:
-
-```xml
-<p t-foreach="items" t-as="item" t-key="item.id"><t t-esc="item.text"/></p>
-```
-
-The `t-key` directive is useful for lists (`t-foreach`). A key should be
-a unique number or string (objects will not work: they will be cast to the
-`"[object Object]"` string, which is obviously not unique).
-
-Also, the key can be set on a `t` tag or on its children. The following variations
-are all equivalent:
-
-```xml
-<p t-foreach="items" t-as="item" t-key="item.id">
-  <t t-esc="item.text"/>
-</p>
-
-<t t-foreach="items" t-as="item" t-key="item.id">
-  <p t-esc="item.text"/>
-</t>
-
-<t t-foreach="items" t-as="item">
-  <p t-key="item.id" t-esc="item.text"/>
-</t>
-```
-
 ### Semantics
 
 We give here an informal description of the way components are created/updated
@@ -941,7 +823,7 @@ As an application becomes complex, it may be quite unsafe to define props in an
 - hard to tell how a component should be used, by looking at its code.
 - unsafe, it is easy to send wrong props into a component, either by refactoring a component, or one of its parents.
 
-A props type system would solve both issues, by describing the types and shapes
+A props type system solves both issues, by describing the types and shapes
 of the props. Here is how it works in Owl:
 
 - `props` key is a static key (so, different from `this.props` in a component instance)
@@ -1141,6 +1023,49 @@ be considered the `default` slot. For example:
 </div>
 ```
 
+### Dynamic sub components
+
+It is not common, but sometimes we need a dynamic component name. In this case,
+the `t-component` directive can also be used to accept dynamic values with string interpolation (like the [`t-attf-`](qweb_templating_language.md#dynamic-attributes) directive):
+
+```xml
+<div t-name="ParentComponent">
+    <t t-component="ChildComponent{{id}}" />
+</div>
+```
+
+```js
+class ParentComponent {
+  static components = { ChildComponent1, ChildComponent2 };
+  state = { id: 1 };
+}
+```
+
+There is an even more dynamic way to use `t-component`: its value can be an
+expression evaluating to an actual component class. In that case, this is the
+class that will be used to create the component:
+
+```js
+class A extends Component<any, any, any> {
+  static template = xml`<span>child a</span>`;
+}
+class B extends Component<any, any, any> {
+  static template = xml`<span>child b</span>`;
+}
+class App extends Component<any, any, any> {
+  static template = xml`<t t-component="myComponent" t-key="state.child"/>`;
+
+  state = { child: "a" };
+
+  get myComponent() {
+    return this.state.child === "a" ? A : B;
+  }
+}
+```
+
+In this example, the component `App` selects dynamically the concrete sub
+component class.
+
 ### Asynchronous Rendering
 
 Working with asynchronous code always adds a lot of complexity to a system. Whenever

doc/reference/config.md

@@ -1,11 +1,10 @@
 # 🦉 Config 🦉
 
-The Owl framework is designed to work in many situations.  However, it is
-sometimes necessary to customize some behaviour.  This is done by using the
-global `config` object. It currently has two keys:
+The Owl framework is designed to work in many situations. However, it is
+sometimes necessary to customize some behaviour. This is done by using the
+global `config` object. It currently has one key:
 
-- [`mode`](#mode),
-- [`env`](#env).
+- [`mode`](#mode).
 
 ## Mode
 
@@ -26,31 +25,3 @@ So, changing this setting is best done at startup.
 
 An important job done by the `dev` mode is to validate props for each component
 creation and update. Also, extra props will cause an error.
-
-## Env
-
-An Owl application needs an [environment](environment.md) to be executed. The
-environment has an important key: the [QWeb](qweb.md) instance, which will render
-all templates.
-
-Whenever a root component is mounted, Owl will take the environment from
-`owl.config.env` and use it to setup the component (and its children).
-
-- if no environment was setup, an empty environment will be generated,
-- if an environment exists, but does not have a QWeb key, a new QWeb instance
-  will then be added to the environment.
-
-The correct way to customize an environment is to simply modify `owl.config.env`
-before the first component is created:
-
-```js
-owl.config.env = {
-    _t: myTranslateFunction,
-    user: {...},
-    services: {
-        ...
-    },
-};
-const app = new App();
-app.mount(document.body);
-```

doc/reference/context.md

@@ -28,7 +28,7 @@ context, and add it to the environment:
 
 ```js
 const deviceContext = new Context({ isMobile: true });
-owl.config.env.deviceContext = deviceContext;
+App.env.deviceContext = deviceContext;
 ```
 
 If we want to make it completely responsive, we need to update its value whenever
@@ -53,14 +53,14 @@ fact that we are in a mobile or desktop mode.
 ```js
 class SomeComponent extends Component {
   static template = xml`
-        <div>
-          <t t-if=device.isMobile>
-             some simplified user interface
-          </t>
-          <t t-else="1">
-             some more sopthisticated user interface
-          </t>
-    `;
+    <div>
+      <t t-if=device.isMobile>
+          some simplified user interface
+      </t>
+      <t t-else="1">
+          a more advanced user interface
+      </t>
+    </div>`;
   device = useContext(this.env.deviceContext);
 }
 ```

doc/reference/environment.md

@@ -1,7 +1,18 @@
 # 🦉 Environment 🦉
 
-An environment is an object which contains a [`QWeb` instance](qweb.md). Whenever a root component is created, it is assigned an environment. This environment
-is then automatically given to each sub component (and accessible in the `this.env` property).
+## Content
+
+- [Overview](#overview)
+- [Setting an Environment](#setting-an-environment)
+- [Content of an Environment](#content-of-an-environment)
+
+## Overview
+
+An environment is an object which contains a [`QWeb` instance](qweb_engine.md). Whenever
+a root component is created, it is assigned an environment (see
+[below](#setting-an-environment) for more info on this). This environment is
+then automatically given to each sub component (and accessible in the `this.env`
+property).
 
 ```
     Root
@@ -9,10 +20,86 @@ is then automatically given to each sub component (and accessible in the `this.e
    A    B
 ```
 
-This way, all components share the same `QWeb` instance.
+This way, all components share the same `QWeb` instance. Owl internally requires
+that the environment has a `qweb` key which maps to a
+[`QWeb`](qweb_engine.md) instance. This is the QWeb instance that will be used to
+render each templates in this specific component tree. Note that if no `QWeb`
+instance is provided, Owl will simply generate it on the fly.
 
-Note: some additional information can be found here:
+The environment is mostly static. Each application is free to add anything to
+the environment, which is very useful, since this can be accessed by each sub
+component.
 
-- [What should go into an environment?](../learning/environment.md)
-- [Customizing an environment](config.md#env)
+## Setting an environment
 
+An Owl application needs an [environment](environment.md) to be executed. The
+environment has an important key: the [QWeb](qweb_engine.md) instance, which will render
+all templates.
+
+Whenever a root component `App` is mounted, Owl will setup a valid environment by
+following the next steps:
+
+- take the `env` object defined on `App.env` (if no `env` was explicitely setup,
+  this will be return the empty `env` object defined on `Component`)
+- if `env.qweb` is not set, then Owl will create a `QWeb` instance.
+
+The correct way to customize an environment is to simply set it up on the root
+component class, before the first component is created:
+
+```js
+App.env = {
+    _t: myTranslateFunction,
+    user: {...},
+    services: {
+        ...
+    },
+};
+const app = new App();
+app.mount(document.body);
+```
+
+It is also possible to simply share an environment between all root components,
+by simply doing this:
+
+```js
+Component.env = myEnv; // will be the default env for all components
+```
+
+## Content of an Environment
+
+Some good use cases for additional keys in the environment are:
+
+- some configuration keys,
+- session information,
+- generic services (such as doing rpcs, or accessing local storage).
+
+Doing it this way means that components are easily testable: we can simply
+create a test environment with mock services.
+
+For example:
+
+```js
+async function myEnv() {
+  const templates = await loadTemplates();
+  const qweb = new QWeb({ templates });
+  const session = getSession();
+
+  return {
+    _t: myTranslateFunction,
+    session: session,
+    qweb: qweb,
+    services: {
+      localStorage: localStorage,
+      rpc: rpc
+    },
+    debug: false,
+    inMobileMode: true
+  };
+}
+
+async function start() {
+  App.env = await myEnv();
+  const app = new App();
+  await app.mount(document.body);
+}
+```

doc/reference/hooks.md

@@ -290,6 +290,7 @@ class Parent extends Component {
     // here, if component is mounted, refs are active:
     // - this.divRef.el is the div HTMLElement
     // - this.subRef.comp is the instance of the sub component
+    // - this.subRef.el is the root HTML node of the sub component (i.e. this.subRef.comp.el)
   }
 }
 ```
@@ -297,11 +298,14 @@ class Parent extends Component {
 As shown by the example above, html elements are accessed by using the `el`
 key, and components references are accessed with `comp`.
 
-Note: if used on a component, the reference will be set in the `refs`
-variable between `willPatch` and `patched`.
+Notes:
+
+- if used on a component, the reference will be set in the `refs`
+  variable between `willPatch` and `patched`,
+- on a component, accessing `ref.el` will get the root node of the component.
 
 The `t-ref` directive also accepts dynamic values with string interpolation
-(like the [`t-attf-`](qweb.md#dynamic-attributes) and
+(like the [`t-attf-`](qweb_templating_language.md#dynamic-attributes) and
 `t-component` directives). For example,
 
 ```xml

doc/reference/props.md

@@ -0,0 +1,97 @@
+# 🦉 Props 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Definition](#definition)
+- [Good Practices](#good-practices)
+- [Dynamic Props](#dynamic-props)
+
+## Overview
+
+In Owl, `props` (short for _properties_) is an object which contains every piece
+of data given to a component by its parent.
+
+```js
+class Child extends Component {
+  static template = xml`<div><t t-esc="props.a"/><t t-esc="props.b"/></div>`;
+}
+
+class Parent extends Component {
+  static template = xml`<div><ComponentA a="state.a" b="'string'"/></div>`;
+  static components = { Child };
+  state = useState({ a: "fromparent" });
+}
+```
+
+In this example, the `Child` component receives two props from its parent: `a`
+and `b`. They are collected into a `props` object by Owl, with each value being
+evaluated in the context of the parent. So, `props.a` is equal to `'fromparent'` and
+`props.b` is equal to `'string'`.
+
+Note that `props` is an object that only makes sense from the perspective of the
+child component.
+
+## Definition
+
+The `props` object is made of every attributes defined on the template, with the
+following exceptions:
+
+- every attribute starting with `t-` are not props (they are QWeb directives),
+- `style` and `class` attributes are excluded as well (they are applied by Owl on
+  the root element of the component).
+
+In the following example:
+
+```xml
+<div>
+    <ComponentA a="state.a" b="'string'"/>
+    <ComponentB t-if="state.flag" model="model"/>
+    <ComponentC style="color:red;" class="left-pane" />
+</div>
+```
+
+the `props` object contains the following keys:
+
+- for `ComponentA`: `a` and `b`,
+- for `ComponentB`: `model`,
+- for `ComponentC`: empty object
+
+## Good Practices
+
+A `props` object is a collection of values that come from the parent. As such,
+they are owned by the parent, and should never be modified by the child:
+
+```js
+class MyComponent extends Component {
+  constructor(parent, props) {
+    super(parent, props);
+    props.a.b = 43; // Never do that!!!
+  }
+}
+```
+
+Props should be considered readonly, from the perspective of the child component.
+If there is a need to modify them, then the request to update them should be
+sent to the parent (for example, with an event).
+
+Any value can go in a props. Strings, objects, classes, or even callbacks could
+be given to a child component (but then, in the case of callbacks, communicating
+with events seems more appropriate).
+
+## Dynamic Props
+
+The `t-props` directive can be used to specify totally dynamic props:
+
+```xml
+<div t-name="ParentComponent">
+    <Child t-props="some.obj"/>
+</div>
+```
+
+```js
+class ParentComponent {
+  static components = { Child };
+  some = { obj: { a: 1, b: 2 } };
+}
+```

doc/reference/qweb_engine.md

@@ -0,0 +1,151 @@
+# 🦉 QWeb Engine 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Reference](#reference)
+
+## Overview
+
+[QWeb](https://www.odoo.com/documentation/13.0/reference/qweb.html) is the primary
+templating engine used by Odoo. The QWeb class in the OWL project is an
+implementation of that specification with a few interesting points:
+
+- it compiles templates into functions that output a virtual DOM instead of a
+  string. This is necessary for the component system.
+- it has a few extra directives: `t-component`, `t-on`, ...
+
+We present in this section the engine, not the templating language.
+
+## Reference
+
+This section is about the javascript code that implements the `QWeb` specification.
+Owl exports a `QWeb` class in `owl.QWeb`. To use it, it just needs to be
+instantiated:
+
+```js
+const qweb = new owl.QWeb();
+```
+
+Its API is quite simple:
+
+- **`constructor(config)`**: constructor. Takes an optional configuration object
+  with an optional `templates` string to add initial
+  templates (see `addTemplates` for more information on format of the string)
+  and an optional `translateFn` translate function (see the section on
+  [translations](#translations)).
+
+  ```js
+  const qweb = new owl.QWeb({ templates: TEMPLATES, translateFn: _t });
+  ```
+
+- **`addTemplate(name, xmlStr, allowDuplicate)`**: add a specific template.
+
+  ```js
+  qweb.addTemplate("mytemplate", "<div>hello</div>");
+  ```
+
+  If the optional `allowDuplicate` is set to `true`, then `QWeb` will simply
+  ignore templates added for a second time. Otherwise, `QWeb` will crash.
+
+- **`addTemplates(xmlStr)`**: add a list of templates (identified by `t-name`
+  attribute).
+
+  ```js
+  const TEMPLATES = `
+    <templates>
+      <div t-name="App" class="main">main</div>
+      <div t-name="OtherComponent">other component</div>
+    </templates>`;
+  qweb.addTemplates(TEMPLATES);
+  ```
+
+- **`render(name, context, extra)`**: renders a template. This returns a `vnode`,
+  which is a virtual representation of the DOM (see [vdom doc](../architecture/vdom.md)).
+
+  ```js
+  const vnode = qweb.render("App", component);
+  ```
+
+- **`renderToString(name, context)`**: renders a template, but returns an html
+  string.
+
+  ```js
+  const str = qweb.renderToString("someTemplate", somecontext);
+  ```
+
+- **`registerTemplate(name, template)`**: static function to register a global
+  QWeb template. This is useful for commonly used components accross the
+  application, and for making a template available to an application without
+  having a reference to the actual QWeb instance.
+
+  ```js
+  QWeb.registerTemplate("mytemplate", `<div>some template</div>`);
+  ```
+
+- **`registerComponent(name, Component)`**: static function to register an OWL Component
+  to QWeb's global registry. Globally registered Components can be used in
+  templates (see the `t-component` directive). This is useful for commonly used
+  components accross the application.
+
+  ```js
+  class Dialog extends owl.Component { ... }
+  QWeb.registerComponent("Dialog", Dialog);
+
+  ...
+
+  class ParentComponent extends owl.Component { ... }
+  qweb.addTemplate("ParentComponent", "<div><Dialog/></div>");
+  ```
+
+In some way, a `QWeb` instance is the core of an Owl application. It is the only
+mandatory element of an [environment](environment.md). As such, it
+has an extra responsibility: it can act as an event bus for internal communication
+between Owl classes. This is the reason why `QWeb` actually extends [EventBus](event_bus.md).
+
+### Translations
+
+If properly setup, Owl QWeb engine can translate all rendered templates. To do
+so, it needs a translate function, which takes a string and returns a string.
+
+For example:
+
+```js
+const translations = {
+  hello: "bonjour",
+  yes: "oui",
+  no: "non"
+};
+const translateFn = str => translations[str] || str;
+
+const qweb = new QWeb({ translateFn });
+```
+
+Once setup, all rendered templates will be translated using `translateFn`:
+
+- each text node will be replaced with its translation,
+- each of the following attribute values will be translated as well: `title`,
+  `placeholder`, `label` and `alt`,
+- translating text nodes can be disabled with the special attribute `t-translation`,
+  if its value is `off`.
+
+So, with the above `translateFn`, the following templates:
+
+```xml
+<div>hello</div>
+<div t-translation="off">hello</div>
+<div>Are you sure?</div>
+<input placeholder="hello" other="yes"/>
+```
+
+will be rendered as:
+
+```xml
+<div>bonjour</div>
+<div>hello</div>
+<div>Are you sure?</div>
+<input placeholder="bonjour" other="yes"/>
+```
+
+Note that the translation is done during the compilation of the template, not
+when it is rendered.

doc/reference/qweb_templating_language.md

@@ -1,10 +1,9 @@
-# 🦉 QWeb 🦉
+# 🦉 QWeb Templating Language🦉
 
 ## Content
 
 - [Overview](#overview)
 - [Directives](#directives)
-- [QWeb Engine](#qweb-engine)
 - [Reference](#reference)
   - [White Spaces](#white-spaces)
   - [Root Nodes](#root-nodes)
@@ -21,14 +20,11 @@
 
 ## Overview
 
-[QWeb](https://www.odoo.com/documentation/13.0/reference/qweb.html) is the primary templating engine used by Odoo. It is based on the XML format, and used
+[QWeb](https://www.odoo.com/documentation/13.0/reference/qweb.html) is the primary
+templating engine used by Odoo. It is based on the XML format, and used
 mostly to generate HTML. In OWL, QWeb templates are compiled into functions that
 generate a virtual dom representation of the HTML.
 
-Template directives are specified as XML attributes prefixed with `t-`, for instance `t-if` for conditionals, with elements and other attributes being rendered directly.
-
-To avoid element rendering, a placeholder element `<t>` is also available, which executes its directive but doesn’t generate any output in and of itself.
-
 ```xml
 <div>
     <span t-if="somecondition">Some string</span>
@@ -40,135 +36,48 @@ To avoid element rendering, a placeholder element `<t>` is also available, which
 </div>
 ```
 
-The QWeb class in the OWL project is an implementation of that specification
-with a few interesting points:
+Template directives are specified as XML attributes prefixed with `t-`, for
+instance `t-if` for conditionals, with elements and other attributes being
+rendered directly.
 
-- it compiles templates into functions that output a virtual DOM instead of a
-  string. This is necessary for the component system.
-- it has a few extra directives: `t-component`, `t-on`, ...
+To avoid element rendering, a placeholder element `<t>` is also available, which
+executes its directive but doesn’t generate any output in and of itself.
+
+We present in this section the templating language, including its Owl specific
+extensions.
 
 ## Directives
 
-We present here a list of all standard QWeb directives:
+For reference, here is a list of all standard QWeb directives:
 
-| Name                           | Description                                                  |
-| ------------------------------ | ------------------------------------------------------------ |
-| `t-esc`                        | [Outputting safely a value](#outputting-data)                |
-| `t-raw`                        | [Outputting value, without escaping](#outputting-data)       |
-| `t-set`, `t-value`             | [Setting variables](#setting-variables)                      |
-| `t-if`, `t-elif`, `t-else`,    | [conditionally rendering](#conditionals)                     |
-| `t-foreach`, `t-as`            | [Loops](#loops)                                              |
-| `t-att`, `t-attf-*`, `t-att-*` | [Dynamic attributes](#dynamic-attributes)                    |
-| `t-call`                       | [Rendering sub templates](#rendering-sub-templates)          |
-| `t-debug`, `t-log`             | [Debugging](#debugging)                                      |
-| `t-translation`                | [Disabling the translation of a node](#translations)         |
-| `t-name`                       | [Defining a template (not really a directive)](#qweb-engine) |
+| Name                           | Description                                                    |
+| ------------------------------ | -------------------------------------------------------------- |
+| `t-esc`                        | [Outputting safely a value](#outputting-data)                  |
+| `t-raw`                        | [Outputting value, without escaping](#outputting-data)         |
+| `t-set`, `t-value`             | [Setting variables](#setting-variables)                        |
+| `t-if`, `t-elif`, `t-else`,    | [conditionally rendering](#conditionals)                       |
+| `t-foreach`, `t-as`            | [Loops](#loops)                                                |
+| `t-att`, `t-attf-*`, `t-att-*` | [Dynamic attributes](#dynamic-attributes)                      |
+| `t-call`                       | [Rendering sub templates](#rendering-sub-templates)            |
+| `t-debug`, `t-log`             | [Debugging](#debugging)                                        |
+| `t-translation`                | [Disabling the translation of a node](#translations)           |
+| `t-name`                       | [Defining a template (not really a directive)](qweb_engine.md) |
 
 The component system in Owl requires additional directives, to express various
 needs. Here is a list of all Owl specific directives:
 
-| Name                     | Description                                                                         |
-| ------------------------ | ----------------------------------------------------------------------------------- |
-| `t-component`, `t-props` | [Defining a sub component](component.md#composition)                                |
-| `t-ref`                  | [Setting a reference to a dom node or a sub component](component.md#references)     |
-| `t-key`                  | [Defining a key (to help virtual dom reconciliation)](component.md#t-key-directive) |
-| `t-on-*`                 | [Event handling](component.md#event-handling)                                       |
-| `t-transition`           | [Defining an animation](animations.md#css-transitions)                              |
-| `t-slot`                 | [Rendering a slot](component.md#slots)                                              |
-| `t-model`                | [Form input bindings](component.md#form-input-bindings)                             |
-
-## QWeb Engine
-
-This section is about the javascript code that implements the `QWeb` specification.
-Owl exports a `QWeb` class in `owl.QWeb`. To use it, it just needs to be
-instantiated:
-
-```js
-const qweb = new owl.QWeb();
-```
-
-Its API is quite simple:
-
-- **`constructor(config)`**: constructor. Takes an optional configuration object
-  with an optional `templates` string to add initial
-  templates (see `addTemplates` for more information on format of the string)
-  and an optional `translateFn` translate function (see the section on
-  [translations](#translations)).
-
-  ```js
-  const qweb = new owl.QWeb({ templates: TEMPLATES, translateFn: _t });
-  ```
-
-- **`addTemplate(name, xmlStr, allowDuplicate)`**: add a specific template.
-
-  ```js
-  qweb.addTemplate("mytemplate", "<div>hello</div>");
-  ```
-
-  If the optional `allowDuplicate` is set to `true`, then `QWeb` will simply
-  ignore templates added for a second time. Otherwise, `QWeb` will crash.
-
-- **`addTemplates(xmlStr)`**: add a list of templates (identified by `t-name`
-  attribute).
-
-  ```js
-  const TEMPLATES = `
-    <templates>
-      <div t-name="App" class="main">main</div>
-      <div t-name="OtherComponent">other component</div>
-    </templates>`;
-  qweb.addTemplates(TEMPLATES);
-  ```
-
-- **`render(name, context, extra)`**: renders a template. This returns a `vnode`,
-  which is a virtual representation of the DOM (see [vdom doc](../architecture/vdom.md)).
-
-  ```js
-  const vnode = qweb.render("App", component);
-  ```
-
-- **`renderToString(name, context)`**: renders a template, but returns an html
-  string.
-
-  ```js
-  const str = qweb.renderToString("someTemplate", somecontext);
-  ```
-
-- **`registerTemplate(name, template)`**: static function to register a global
-  QWeb template. This is useful for commonly used components accross the
-  application, and for making a template available to an application without
-  having a reference to the actual QWeb instance.
-
-  ```js
-  QWeb.registerTemplate("mytemplate", `<div>some template</div>`);
-  ```
-
-- **`registerComponent(name, Component)`**: static function to register an OWL Component
-  to QWeb's global registry. Globally registered Components can be used in
-  templates (see the `t-component` directive). This is useful for commonly used
-  components accross the application.
-
-  ```js
-  class Dialog extends owl.Component { ... }
-  QWeb.registerComponent("Dialog", Dialog);
-
-  ...
-
-  class ParentComponent extends owl.Component { ... }
-  qweb.addTemplate("ParentComponent", "<div><Dialog/></div>");
-  ```
-
-In some way, a `QWeb` instance is the core of an Owl application. It is the only
-mandatory element of an [environment](environment.md). As such, it
-has an extra responsibility: it can act as an event bus for internal communication
-between Owl classes. This is the reason why `QWeb` actually extends [EventBus](event_bus.md).
+| Name                     | Description                                                                     |
+| ------------------------ | ------------------------------------------------------------------------------- |
+| `t-component`, `t-props` | [Defining a sub component](component.md#composition)                            |
+| `t-ref`                  | [Setting a reference to a dom node or a sub component](component.md#references) |
+| `t-key`                  | [Defining a key (to help virtual dom reconciliation)](#loops)                   |
+| `t-on-*`                 | [Event handling](component.md#event-handling)                                   |
+| `t-transition`           | [Defining an animation](animations.md#css-transitions)                          |
+| `t-slot`                 | [Rendering a slot](component.md#slots)                                          |
+| `t-model`                | [Form input bindings](component.md#form-input-bindings)                         |
 
 ## Reference
 
-We define in this section the specification of how `QWeb` templates should be
-rendered. Note that we only document here the standard QWeb specification. Owl
-specific extensions are documented in various other parts of the documentation.
-
 ### White Spaces
 
 White spaces in a template are handled in a special way:
@@ -479,16 +388,66 @@ into the global context.
 <!-- new_variable undefined -->
 ```
 
-Owl QWeb is used as the template engine for components. Components are frequently
-updated, and reuse as much of the previous DOM as possible. Loops offer a specific
-problem for this usecase: how does the template engine know if two rows have
-been swapped, or if the content of these rows was changed? To help Owl with that,
-there is an additional directive: [`t-key`](component.md#t-key-directive).
+Even though Owl tries to be as declarative as possible, the DOM does not fully
+expose its state declaratively in the DOM tree. For example, the scrolling state,
+the current user selection, the focused element or the state of an input are not
+set as attribute in the DOM tree. This is why we use a virtual dom
+algorithm to keep the actual DOM node as much as possible.
+
+However, in some situations, this is not enough, and we need to help Owl decide
+if an element is actually the same, or is a different element with the same
+properties.
+
+Consider the following situation: we have a list of two items `[{text: "a"}, {text: "b"}]`
+and we render them in this template:
 
 ```xml
-<p t-foreach="state.things" t-as="thing" t-key="thing.id">
-    <t t-esc="thing.content"/>
+<p t-foreach="items" t-as="item"><t t-esc="item.text"/></p>
+```
+
+The result will be two `<p>` tags with text `a` and `b`. Now, if we swap them,
+and rerender the template, Owl needs to know what the intent is:
+
+- should Owl actually swap the DOM nodes,
+- or should it keep the DOM nodes, but with an updated text content?
+
+This might look trivial, but it actually matters. These two possibilities lead
+to different results in some cases. For example, if the user selected the text
+of the first `p`, swapping them will keep the selection while updating the
+text content will not.
+
+There are many other cases where this is important: `input` tags with their
+value, css classes and animations, scroll position...
+
+So, the `t-key` directive is used to give an identity to an element. It allows
+Owl to understand if different elements of a list are actually different or not.
+
+The above example could be modified by adding an ID: `[{id: 1, text: "a"}, {id: 2, text: "b"}]`.
+Then, the template could look like this:
+
+```xml
+<p t-foreach="items" t-as="item" t-key="item.id"><t t-esc="item.text"/></p>
+```
+
+The `t-key` directive is useful for lists (`t-foreach`). A key should be
+a unique number or string (objects will not work: they will be cast to the
+`"[object Object]"` string, which is obviously not unique).
+
+Also, the key can be set on a `t` tag or on its children. The following variations
+are all equivalent:
+
+```xml
+<p t-foreach="items" t-as="item" t-key="item.id">
+  <t t-esc="item.text"/>
 </p>
+
+<t t-foreach="items" t-as="item" t-key="item.id">
+  <p t-esc="item.text"/>
+</t>
+
+<t t-foreach="items" t-as="item">
+  <p t-key="item.id" t-esc="item.text"/>
+</t>
 ```
 
 If there is no `t-key` directive, Owl will use the index as a default key.
@@ -543,23 +502,9 @@ will result in :
 
 ### Translations
 
-If properly setup, Owl QWeb engine can translate all rendered templates. To do
-so, it needs a translate function, which takes a string and returns a string.
-
-For example:
-
-```js
-const translations = {
-  hello: "bonjour",
-  yes: "oui",
-  no: "non"
-};
-const translateFn = str => translations[str] || str;
-
-const qweb = new QWeb({ translateFn });
-```
-
-Once setup, all rendered templates will be translated using `translateFn`:
+By default, QWeb specify that templates should be translated. If this behaviour
+is not wanted, there is a `t-translation` directive which can turn off
+translations (if it is set to the `off` value), with the following rules:
 
 - each text node will be replaced with its translation,
 - each of the following attribute values will be translated as well: `title`,
@@ -567,26 +512,8 @@ Once setup, all rendered templates will be translated using `translateFn`:
 - translating text nodes can be disabled with the special attribute `t-translation`,
   if its value is `off`.
 
-So, with the above `translateFn`, the following templates:
-
-```xml
-<div>hello</div>
-<div t-translation="off">hello</div>
-<div>Are you sure?</div>
-<input placeholder="hello" other="yes"/>
-```
-
-will be rendered as:
-
-```xml
-<div>bonjour</div>
-<div>hello</div>
-<div>Are you sure?</div>
-<input placeholder="bonjour" other="yes"/>
-```
-
-Note that the translation is done during the compilation of the template, not
-when it is rendered.
+See [here](qweb_engine.md#translations) for more information on how to setup a
+translate function in Owl QWeb.
 
 ### Debugging
 

doc/reference/router.md

@@ -68,7 +68,7 @@ function makeEnvironment() {
     return env;
 }
 
-owl.config.env = makeEnvironment();
+App.env = makeEnvironment();
 // create root component here
 ```
 

doc/tooling.md

@@ -44,7 +44,7 @@ it easier to scale application to larger size.
 
 To do so, Owl currently has a small helper that makes it easy to define a
 template inside a javascript (or typescript) file: the [`xml`](reference/tags.md#xml-tag)
-helper. With this, a template is automatically registered to [QWeb](reference/qweb.md).
+helper. With this, a template is automatically registered to [QWeb](reference/qweb_engine.md).
 
 This means that the template and the javascript code can be defined in the same
 file. It is not currently possible to add css to the same file, but Owl may

package.json

@@ -1,6 +1,6 @@
 {
   "name": "owl-framework",
-  "version": "1.0.0-alpha",
+  "version": "1.0.0-alpha3",
   "description": "Odoo Web Library (OWL)",
   "main": "src/index.ts",
   "engines": {

roadmap.md

@@ -1,6 +1,6 @@
 # 🦉 OWL Roadmap 🦉
 
-- Current version: 1.0.0-alpha
+- Current version: 1.0.0-alpha3
 - Status: mostly stable
 
 This roadmap is only an attempt at predicting Owl's future.  Everything may

src/component/component.ts

@@ -1,11 +1,10 @@
 import { Observer } from "../core/observer";
 import { CompiledTemplate, QWeb } from "../qweb/index";
 import { h, patch, VNode } from "../vdom/index";
-import { config } from "../config";
 import "./directive";
 import { Fiber } from "./fiber";
 import "./props_validation";
-import { scheduler } from "./scheduler";
+import { Scheduler, scheduler } from "./scheduler";
 
 /**
  * Owl Component System
@@ -88,6 +87,9 @@ export class Component<T extends Env, Props extends {}> {
   static components = {};
   static props?: any;
   static defaultProps?: any;
+  static env: any = {};
+  // expose scheduler s.t. it can be mocked for testing purposes
+  static scheduler: Scheduler = scheduler;
 
   /**
    * The `el` is the root element of the component.  Note that it could be null:
@@ -111,28 +113,33 @@ export class Component<T extends Env, Props extends {}> {
    * hand.  Other components should be created automatically by the framework (with
    * the t-component directive in a template)
    */
-  constructor(parent?: Component<T, any>, props?: Props) {
+  constructor(parent?: Component<T, any> | null, props?: Props) {
     Component.current = this;
 
+    let constr = this.constructor as any;
+    const defaultProps = constr.defaultProps;
+    if (defaultProps) {
+      props = props || ({} as Props);
+      this.__applyDefaultProps(props, defaultProps);
+    }
+    this.props = <Props>props;
+    if (QWeb.dev) {
+      QWeb.utils.validateProps(constr, this.props);
+    }
+
     const id: number = nextId++;
     let depth;
     if (parent) {
-      const defaultProps = (<any>this.constructor).defaultProps;
-      if (defaultProps) {
-        props = this.__applyDefaultProps(props, defaultProps);
-      }
-      this.props = <Props>props;
-      if (QWeb.dev) {
-        QWeb.utils.validateProps(this.constructor, this.props);
-      }
       this.env = parent.env;
       const __powl__ = parent.__owl__;
       __powl__.children[id] = this;
       depth = __powl__.depth + 1;
     } else {
       // we are the root component
-      this.env = config.env as T;
-      this.props = undefined as unknown as Props;
+      this.env = (this.constructor as any).env;
+      if (!this.env.qweb) {
+        this.env.qweb = new QWeb();
+      }
       this.env.qweb.on("update", this, () => {
         if (this.__owl__.isMounted) {
           this.render(true);
@@ -150,7 +157,7 @@ export class Component<T extends Env, Props extends {}> {
     }
 
     const qweb = this.env.qweb;
-
+    const template = constr.template || this.__getTemplate(qweb);
     this.__owl__ = {
       id: id,
       depth: depth,
@@ -170,7 +177,7 @@ export class Component<T extends Env, Props extends {}> {
       willStartCB: null,
       willUpdatePropsCB: null,
       observer: null,
-      renderFn: qweb.render.bind(qweb, this.__getTemplate(qweb)),
+      renderFn: qweb.render.bind(qweb, template),
       classObj: null,
       refs: null
     };
@@ -269,17 +276,15 @@ export class Component<T extends Env, Props extends {}> {
    *
    * Note that a component can be mounted an unmounted several times
    */
-  async mount(target: HTMLElement, renderBeforeRemount: boolean = false): Promise<void> {
+  async mount(target: HTMLElement): Promise<void> {
     const __owl__ = this.__owl__;
     if (__owl__.isMounted) {
       return Promise.resolve();
     }
-    if (__owl__.vnode && !renderBeforeRemount) {
-      target.appendChild(this.el!);
-      if (document.body.contains(target)) {
-        this.__callMounted();
-      }
-      return;
+    if (!(target instanceof HTMLElement)) {
+      let message = `Component '${this.constructor.name}' cannot be mounted: the target is not a valid DOM node.`;
+      message += `\nMaybe the DOM is not ready yet? (in that case, you can use owl.utils.whenReady)`;
+      throw new Error(message);
     }
     return new Promise((resolve, reject) => {
       const fiber = new Fiber(null, this, undefined, undefined, false);
@@ -431,6 +436,9 @@ export class Component<T extends Env, Props extends {}> {
     }
     __owl__.isDestroyed = true;
     delete __owl__.vnode;
+    if (__owl__.currentFiber) {
+      __owl__.currentFiber.isCancelled = true;
+    }
   }
 
   __callMounted() {
@@ -492,7 +500,7 @@ export class Component<T extends Env, Props extends {}> {
 
       const defaultProps = (<any>this.constructor).defaultProps;
       if (defaultProps) {
-        nextProps = this.__applyDefaultProps(nextProps, defaultProps);
+        this.__applyDefaultProps(nextProps, defaultProps);
       }
       if (QWeb.dev) {
         QWeb.utils.validateProps(this.constructor, nextProps);
@@ -540,22 +548,18 @@ export class Component<T extends Env, Props extends {}> {
   __getTemplate(qweb: QWeb): string {
     let p = (<any>this).constructor;
     if (!p.hasOwnProperty("_template")) {
-      if (p.template) {
-        p._template = p.template;
-      } else {
-        // here, the component and none of its superclasses defines a static `template`
-        // key. So we fall back on looking for a template matching its name (or
-        // one of its subclass).
+      // here, the component and none of its superclasses defines a static `template`
+      // key. So we fall back on looking for a template matching its name (or
+      // one of its subclass).
 
-        let template: string;
-        while ((template = p.name) && !(template in qweb.templates) && p !== Component) {
-          p = p.__proto__;
-        }
-        if (p === Component) {
-          throw new Error(`Could not find template for component "${this.constructor.name}"`);
-        } else {
-          p._template = template;
-        }
+      let template: string;
+      while ((template = p.name) && !(template in qweb.templates) && p !== Component) {
+        p = p.__proto__;
+      }
+      if (p === Component) {
+        throw new Error(`Could not find template for component "${this.constructor.name}"`);
+      } else {
+        p._template = template;
       }
     }
     return p._template;
@@ -640,16 +644,13 @@ export class Component<T extends Env, Props extends {}> {
   /**
    * Apply default props (only top level).
    *
-   * Note that this method does not modify in place the props, it returns a new
-   * prop object
+   * Note that this method does modify in place the props
    */
-  __applyDefaultProps(props: Object | undefined, defaultProps: Object): Props {
-    props = props ? Object.assign({}, props) : {};
+  __applyDefaultProps(props: Object, defaultProps: Object) {
     for (let propName in defaultProps) {
       if (props![propName] === undefined) {
         props![propName] = defaultProps[propName];
       }
     }
-    return <Props>props;
   }
 }

src/component/directive.ts

@@ -455,7 +455,7 @@ QWeb.addDirective({
     );
     ctx.addLine(`const fiber = w${componentID}.__owl__.currentFiber;`);
     ctx.addLine(
-      `def${defID}.then(function () {if (w${componentID}.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; ${createHook}});`
+      `def${defID}.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; ${createHook}});`
     );
     if (registerCode) {
       ctx.addLine(registerCode);

src/component/props_validation.ts

@@ -40,7 +40,13 @@ QWeb.utils.validateProps = function(Widget, props: Object) {
           break;
         }
       }
-      let isValid = isValidProp(props[propName], propsDef[propName]);
+      let isValid;
+      try {
+        isValid = isValidProp(props[propName], propsDef[propName]);
+      } catch (e) {
+        e.message = `Invalid prop '${propName}' in component ${Widget.name} (${e.message})`;
+        throw e;
+      }
       if (!isValid) {
         throw new Error(`Props '${propName}' of invalid type in component '${Widget.name}'`);
       }
@@ -80,6 +86,9 @@ function isValidProp(prop, propDef): boolean {
     return result;
   }
   // propsDef is an object
+  if (propDef.optional && prop === undefined) {
+    return true;
+  }
   let result = isValidProp(prop, propDef.type);
   if (propDef.type === Array) {
     for (let i = 0, iLen = prop.length; i < iLen; i++) {
@@ -91,6 +100,13 @@ function isValidProp(prop, propDef): boolean {
     for (let key in shape) {
       result = result && isValidProp(prop[key], shape[key]);
     }
+    if (result) {
+      for (let propName in prop) {
+        if (!(propName in shape)) {
+          throw new Error(`unknown prop '${propName}'`);
+        }
+      }
+    }
   }
   return result;
 }

src/config.ts

@@ -1,5 +1,4 @@
 import { QWeb } from "./qweb/index";
-import { Env } from "./component/component";
 
 /**
  * This file creates and exports the OWL 'config' object, with keys:
@@ -8,7 +7,6 @@ import { Env } from "./component/component";
  */
 
 interface Config {
-  env: Env;
   mode: string;
 }
 
@@ -21,28 +19,12 @@ Object.defineProperty(config, "mode", {
   set(mode: string) {
     QWeb.dev = mode === "dev";
     if (QWeb.dev) {
-      const url = `https://github.com/odoo/owl/blob/master/doc/tooling.md#development-mode`;
+      const url = `https://github.com/odoo/owl/blob/master/doc/reference/config.md#mode`;
       console.warn(
         `Owl is running in 'dev' mode.  This is not suitable for production use. See ${url} for more information.`
       );
     } else {
       console.log(`Owl is now running in 'prod' mode.`);
     }
-  },
-});
-
-let env:Env;
-Object.defineProperty(config, "env", {
-  get() {
-    if (!env) {
-      env = {} as Env;
-    }
-    if (!env.qweb) {
-      env.qweb = new QWeb();
-    }
-    return env;
-  },
-  set(newEnv: Env) {
-    env = newEnv;
-  },
+  }
 });

src/hooks.ts

@@ -104,7 +104,12 @@ export function useRef(name: string): Ref {
   return {
     get el(): HTMLElement | null {
       const val = __owl__.refs && __owl__.refs[name];
-      return val instanceof HTMLElement ? val : null;
+      if (val instanceof HTMLElement) {
+        return val;
+      } else if (val instanceof Component) {
+        return val.el;
+      }
+      return null;
     },
     get comp(): Component<any, any> | null {
       const val = __owl__.refs && __owl__.refs[name];

src/store.ts

@@ -84,6 +84,9 @@ const isStrictEqual = (a, b) => a === b;
 export function useStore(selector, options: SelectorOptions = {}): any {
   const component: Component<any, any> = Component.current!;
   const store = options.store || (component.env.store as Store);
+  if (!(store instanceof Store)) {
+    throw new Error(`No store found when connecting '${component.constructor.name}'`);
+  }
   let result = selector(store.state, component.props);
   const hashFn = store.observer.revNumber.bind(store.observer);
   let revNumber = hashFn(result) || result;

tests/__snapshots__/animations.test.ts.snap

@@ -35,7 +35,7 @@ exports[`animations t-transition combined with component 1`] = `
         };
         utils.transitionRemove(vn, 'chimay', finalize);}}});
         const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
     }
@@ -80,7 +80,7 @@ exports[`animations t-transition combined with t-component and t-if 1`] = `
         };
         utils.transitionRemove(vn, 'chimay', finalize);}}});
             const fiber = w3.__owl__.currentFiber;
-            def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
             c1.push(pvnode);
             w3.__owl__.pvnode = pvnode;
         }

tests/animations.test.ts

@@ -1,5 +1,4 @@
 import { Component, Env } from "../src/component/component";
-import { config } from "../src/config";
 import { QWeb } from "../src/qweb/index";
 import { useState, useRef } from "../src/hooks";
 import {
@@ -30,7 +29,7 @@ let cssEl: HTMLElement;
 beforeEach(() => {
   fixture = makeTestFixture();
   env = makeTestEnv();
-  config.env = env;
+  Component.env = env;
   qweb = new QWeb();
 });
 

tests/component/__snapshots__/component.test.ts.snap

@@ -61,7 +61,7 @@ exports[`basic widget properties reconciliation alg works for t-foreach in t-for
                 let def8 = w9.__prepare(extra.fiber, undefined, undefined, sibling);
                 let pvnode = h('dummy', {key: templateId9, hook: {insert(vn) { let nvn=w9.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w9.destroy();}}});
                 const fiber = w9.__owl__.currentFiber;
-                def8.then(function () {if (w9.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+                def8.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
                 c1.push(pvnode);
                 w9.__owl__.pvnode = pvnode;
             }
@@ -105,7 +105,7 @@ exports[`class and style attributes with t-component dynamic t-att-style is prop
         let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
         const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.style = _5;}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.style = _5;}};});
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
     }
@@ -150,7 +150,7 @@ exports[`class and style attributes with t-component t-att-class is properly add
         let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;context.__owl__.refs[ref5] = w3;},remove() {},destroy(vn) {w3.destroy();delete context.__owl__.refs[ref5];}}});
         const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){}};});
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
     }
@@ -210,7 +210,7 @@ exports[`class and style attributes with t-component t-att-class is properly add
         let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;context.__owl__.refs[ref5] = w3;},remove() {},destroy(vn) {w3.destroy();delete context.__owl__.refs[ref5];}}});
         const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){}};});
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
     }
@@ -282,7 +282,7 @@ exports[`composition sub components with some state rendered in a loop 1`] = `
             let def6 = w7.__prepare(extra.fiber, undefined, undefined, sibling);
             let pvnode = h('dummy', {key: templateId7, hook: {insert(vn) { let nvn=w7.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w7.destroy();}}});
             const fiber = w7.__owl__.currentFiber;
-            def6.then(function () {if (w7.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            def6.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
             c1.push(pvnode);
             w7.__owl__.pvnode = pvnode;
         }
@@ -324,7 +324,7 @@ exports[`composition t-component with dynamic value 1`] = `
         let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
         const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
     }
@@ -365,7 +365,7 @@ exports[`composition t-component with dynamic value 2 1`] = `
         let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
         const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
     }
@@ -406,7 +406,7 @@ exports[`dynamic t-props basic use 1`] = `
         let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
         const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
     }
@@ -451,7 +451,7 @@ exports[`other directives with t-component t-on with getter as handler 1`] = `
         let def3 = w4.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId4, hook: {insert(vn) { let nvn=w4.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});
         const fiber = w4.__owl__.currentFiber;
-        def3.then(function () {if (w4.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['handler'];if (fn) { fn.call(owner, e); } else { owner.handler; }});}};});
+        def3.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['handler'];if (fn) { fn.call(owner, e); } else { owner.handler; }});}};});
         c1.push(pvnode);
         w4.__owl__.pvnode = pvnode;
     }
@@ -492,7 +492,7 @@ exports[`other directives with t-component t-on with handler bound to argument 1
         let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
         const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, 3, e); } else { owner.onEv; }});}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, 3, e); } else { owner.onEv; }});}};});
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
     }
@@ -533,7 +533,7 @@ exports[`other directives with t-component t-on with handler bound to empty obje
         let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
         const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, {}, e); } else { owner.onEv; }});}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, {}, e); } else { owner.onEv; }});}};});
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
     }
@@ -574,7 +574,7 @@ exports[`other directives with t-component t-on with handler bound to empty obje
         let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
         const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, {}, e); } else { owner.onEv; }});}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, {}, e); } else { owner.onEv; }});}};});
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
     }
@@ -615,7 +615,7 @@ exports[`other directives with t-component t-on with handler bound to object 1`]
         let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
         const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, {val:3}, e); } else { owner.onEv; }});}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, {val:3}, e); } else { owner.onEv; }});}};});
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
     }
@@ -660,7 +660,7 @@ exports[`other directives with t-component t-on with inline statement 1`] = `
         let def3 = w4.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId4, hook: {insert(vn) { let nvn=w4.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});
         const fiber = w4.__owl__.currentFiber;
-        def3.then(function () {if (w4.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['state.counter++'];if (fn) { fn.call(owner, e); } else { owner.state.counter++; }});}};});
+        def3.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['state.counter++'];if (fn) { fn.call(owner, e); } else { owner.state.counter++; }});}};});
         c1.push(pvnode);
         w4.__owl__.pvnode = pvnode;
     }
@@ -701,7 +701,7 @@ exports[`other directives with t-component t-on with no handler (only modifiers)
         let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
         const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, e); } else { owner.onEv; }});}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, e); } else { owner.onEv; }});}};});
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
     }
@@ -742,7 +742,7 @@ exports[`other directives with t-component t-on with prevent and self modifiers
         let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
         const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {e.preventDefault();if (e.target !== vn.elm) {return}const fn = owner['onEv'];if (fn) { fn.call(owner, e); } else { owner.onEv; }});}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {e.preventDefault();if (e.target !== vn.elm) {return}const fn = owner['onEv'];if (fn) { fn.call(owner, e); } else { owner.onEv; }});}};});
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
     }
@@ -783,7 +783,7 @@ exports[`other directives with t-component t-on with self and prevent modifiers
         let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
         const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (e.target !== vn.elm) {return}e.preventDefault();const fn = owner['onEv'];if (fn) { fn.call(owner, e); } else { owner.onEv; }});}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (e.target !== vn.elm) {return}e.preventDefault();const fn = owner['onEv'];if (fn) { fn.call(owner, e); } else { owner.onEv; }});}};});
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
     }
@@ -824,7 +824,7 @@ exports[`other directives with t-component t-on with self modifier 1`] = `
         let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
         const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {const fn = owner['onEv1'];if (fn) { fn.call(owner, e); } else { owner.onEv1; }});vn.elm.addEventListener('ev-2', function (e) {if (e.target !== vn.elm) {return}const fn = owner['onEv2'];if (fn) { fn.call(owner, e); } else { owner.onEv2; }});}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {const fn = owner['onEv1'];if (fn) { fn.call(owner, e); } else { owner.onEv1; }});vn.elm.addEventListener('ev-2', function (e) {if (e.target !== vn.elm) {return}const fn = owner['onEv2'];if (fn) { fn.call(owner, e); } else { owner.onEv2; }});}};});
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
     }
@@ -865,7 +865,7 @@ exports[`other directives with t-component t-on with stop and/or prevent modifie
         let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
         const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {e.stopPropagation();const fn = owner['onEv1'];if (fn) { fn.call(owner, e); } else { owner.onEv1; }});vn.elm.addEventListener('ev-2', function (e) {e.preventDefault();const fn = owner['onEv2'];if (fn) { fn.call(owner, e); } else { owner.onEv2; }});vn.elm.addEventListener('ev-3', function (e) {e.stopPropagation();e.preventDefault();const fn = owner['onEv3'];if (fn) { fn.call(owner, e); } else { owner.onEv3; }});}};});
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {e.stopPropagation();const fn = owner['onEv1'];if (fn) { fn.call(owner, e); } else { owner.onEv1; }});vn.elm.addEventListener('ev-2', function (e) {e.preventDefault();const fn = owner['onEv2'];if (fn) { fn.call(owner, e); } else { owner.onEv2; }});vn.elm.addEventListener('ev-3', function (e) {e.stopPropagation();e.preventDefault();const fn = owner['onEv3'];if (fn) { fn.call(owner, e); } else { owner.onEv3; }});}};});
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
     }
@@ -925,7 +925,7 @@ exports[`random stuff/miscellaneous snapshotting compiled code 1`] = `
         let def3 = w4.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId4, hook: {insert(vn) { let nvn=w4.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});
         const fiber = w4.__owl__.currentFiber;
-        def3.then(function () {if (w4.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        def3.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
         c1.push(pvnode);
         w4.__owl__.pvnode = pvnode;
     }
@@ -983,7 +983,7 @@ exports[`random stuff/miscellaneous t-on with handler bound to dynamic argument
             let def6 = w7.__prepare(extra.fiber, undefined, undefined, sibling);
             let pvnode = h('dummy', {key: templateId7, hook: {insert(vn) { let nvn=w7.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w7.destroy();}}});
             const fiber = w7.__owl__.currentFiber;
-            def6.then(function () {if (w7.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, arg9, e); } else { owner.onEv; }});}};});
+            def6.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {const fn = owner['onEv'];if (fn) { fn.call(owner, arg9, e); } else { owner.onEv; }});}};});
             c1.push(pvnode);
             w7.__owl__.pvnode = pvnode;
         }
@@ -1231,7 +1231,7 @@ exports[`t-slot directive can define and call slots 1`] = `
         let def2 = w3.__prepare(extra.fiber, {}, undefined, sibling);
         let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
         const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
     }
@@ -1477,7 +1477,7 @@ exports[`t-slot directive slots are rendered with proper context, part 2 2`] = `
             let def8 = w9.__prepare(extra.fiber, Object.assign({}, scope), undefined, sibling);
             let pvnode = h('dummy', {key: templateId9, hook: {insert(vn) { let nvn=w9.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w9.destroy();}}});
             const fiber = w9.__owl__.currentFiber;
-            def8.then(function () {if (w9.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            def8.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
             c7.push(pvnode);
             w9.__owl__.pvnode = pvnode;
         }
@@ -1581,7 +1581,7 @@ exports[`t-slot directive slots are rendered with proper context, part 3 2`] = `
             let def9 = w10.__prepare(extra.fiber, Object.assign({}, scope), {_8}, sibling);
             let pvnode = h('dummy', {key: templateId10, hook: {insert(vn) { let nvn=w10.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w10.destroy();}}});
             const fiber = w10.__owl__.currentFiber;
-            def9.then(function () {if (w10.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            def9.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
             c7.push(pvnode);
             w10.__owl__.pvnode = pvnode;
         }
@@ -1639,7 +1639,7 @@ exports[`t-slot directive slots are rendered with proper context, part 4 1`] = `
         let def3 = w4.__prepare(extra.fiber, {}, {_2}, sibling);
         let pvnode = h('dummy', {key: templateId4, hook: {insert(vn) { let nvn=w4.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});
         const fiber = w4.__owl__.currentFiber;
-        def3.then(function () {if (w4.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        def3.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
         c1.push(pvnode);
         w4.__owl__.pvnode = pvnode;
     }
@@ -1714,7 +1714,7 @@ exports[`top level sub widgets basic use 1`] = `
         let def1 = w2.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId2, hook: {insert(vn) { let nvn=w2.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w2.destroy();}}});
         const fiber = w2.__owl__.currentFiber;
-        def1.then(function () {if (w2.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        def1.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
         utils.defineProxy(vn4, pvnode);
         w2.__owl__.pvnode = pvnode;
     }
@@ -1757,7 +1757,7 @@ exports[`top level sub widgets can select a sub widget  1`] = `
             let def1 = w2.__prepare(extra.fiber, undefined, undefined, sibling);
             let pvnode = h('dummy', {key: templateId2, hook: {insert(vn) { let nvn=w2.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w2.destroy();}}});
             const fiber = w2.__owl__.currentFiber;
-            def1.then(function () {if (w2.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            def1.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
             utils.defineProxy(vn4, pvnode);
             w2.__owl__.pvnode = pvnode;
         }
@@ -1787,7 +1787,7 @@ exports[`top level sub widgets can select a sub widget  1`] = `
             let def5 = w6.__prepare(extra.fiber, undefined, undefined, sibling);
             let pvnode = h('dummy', {key: templateId6, hook: {insert(vn) { let nvn=w6.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w6.destroy();}}});
             const fiber = w6.__owl__.currentFiber;
-            def5.then(function () {if (w6.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            def5.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
             utils.defineProxy(vn8, pvnode);
             w6.__owl__.pvnode = pvnode;
         }

tests/component/__snapshots__/props_validation.test.ts.snap

@@ -32,7 +32,7 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
         let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
         const fiber = w3.__owl__.currentFiber;
-        def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
     }

tests/component/component.test.ts

@@ -3,7 +3,6 @@ import { QWeb } from "../../src/qweb/qweb";
 import { xml } from "../../src/tags";
 import { useState, useRef } from "../../src/hooks";
 import { EventBus } from "../../src/core/event_bus";
-import { config } from "../../src/config";
 import {
   makeDeferred,
   makeTestFixture,
@@ -36,7 +35,7 @@ beforeEach(() => {
   );
   env.qweb.addTemplate("WidgetA", `<div>Hello<t t-component="b"/></div>`);
   env.qweb.addTemplate("WidgetB", `<div>world</div>`);
-  config.env = env;
+  Component.env = env;
 });
 
 afterEach(() => {
@@ -72,9 +71,9 @@ class WidgetA extends Widget {
 //------------------------------------------------------------------------------
 
 describe("basic widget properties", () => {
-  test("props is not defined on root components", async () => {
-    const widget = new Widget();
-    expect(widget.props).toBe(undefined);
+  test("props is set on root components", async () => {
+    const widget = new Widget(null, {});
+    expect(widget.props).toEqual({});
   });
 
   test("has no el after creation", async () => {
@@ -92,6 +91,23 @@ describe("basic widget properties", () => {
     expect(fixture.innerHTML).toBe("<div>content</div>");
   });
 
+  test("display a nice message if mounted on a non existing node", async () => {
+    class SomeWidget extends Component<any, any> {
+      static template = xml`<div>content</div>`;
+    }
+    const widget = new SomeWidget();
+    let error;
+    try {
+      await widget.mount(null as any);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe(
+      "Component 'SomeWidget' cannot be mounted: the target is not a valid DOM node.\nMaybe the DOM is not ready yet? (in that case, you can use owl.utils.whenReady)"
+    );
+  });
+
   test("crashes if it cannot find a template", async () => {
     expect.assertions(1);
     class SomeWidget extends Component<any, any> {}
@@ -1062,94 +1078,6 @@ describe("composition", () => {
     console.error = consoleError;
   });
 
-  test("t-refs on widget are components", async () => {
-    class WidgetC extends Widget {
-      static template = xml`<div>Hello<WidgetB t-ref="mywidgetb" /></div>`;
-      static components = { WidgetB };
-      widget = useRef("mywidgetb");
-    }
-
-    const widget = new WidgetC();
-    await widget.mount(fixture);
-    expect(widget.widget.comp).toBeInstanceOf(WidgetB);
-  });
-
-  test("t-refs are bound at proper timing", async () => {
-    expect.assertions(2);
-    class ParentWidget extends Widget {
-      static template = xml`
-        <div>
-          <t t-foreach="state.list" t-as="elem" t-ref="child" t-key="elem" t-component="Widget"/>
-        </div>
-      `;
-      static components = { Widget };
-      state = useState({ list: <any>[] });
-      child = useRef("child");
-      willPatch() {
-        expect(this.child.comp).toBeNull();
-      }
-      patched() {
-        expect(this.child.comp).not.toBeNull();
-      }
-    }
-
-    const parent = new ParentWidget();
-    await parent.mount(fixture);
-    parent.state.list.push(1);
-    await nextTick();
-  });
-
-  test("t-refs are bound at proper timing (2)", async () => {
-    expect.assertions(10);
-    env.qweb.addTemplate(
-      "ParentWidget",
-      `
-        <div>
-          <t t-if="state.child1" t-ref="child1" t-component="Widget"/>
-          <t t-if="state.child2" t-ref="child2" t-component="Widget"/>
-        </div>`
-    );
-    class ParentWidget extends Widget {
-      static components = { Widget };
-      state = useState({ child1: true, child2: false });
-      child1 = useRef("child1");
-      child2 = useRef("child2");
-      count = 0;
-      mounted() {
-        expect(this.child1.comp).toBeDefined();
-        expect(this.child2.comp).toBeNull();
-      }
-      willPatch() {
-        if (this.count === 0) {
-          expect(this.child1.comp).toBeDefined();
-          expect(this.child2.comp).toBeNull();
-        }
-        if (this.count === 1) {
-          expect(this.child1.comp).toBeDefined();
-          expect(this.child2.comp).toBeDefined();
-        }
-      }
-      patched() {
-        if (this.count === 0) {
-          expect(this.child1.comp).toBeDefined();
-          expect(this.child2.comp).toBeDefined();
-        }
-        if (this.count === 1) {
-          expect(this.child1.comp).toBeNull();
-          expect(this.child2.comp).toBeDefined();
-        }
-        this.count++;
-      }
-    }
-
-    const parent = new ParentWidget();
-    await parent.mount(fixture);
-    parent.state.child2 = true;
-    await nextTick();
-    parent.state.child1 = false;
-    await nextTick();
-  });
-
   test("modifying a sub widget", async () => {
     env.qweb.addTemplate("ParentWidget", `<div><t t-component="Counter"/></div>`);
     class ParentWidget extends Widget {
@@ -2683,12 +2611,19 @@ describe("async rendering", () => {
     await nextMicroTick();
     expect(steps).toEqual(["render"]);
     await nextMicroTick();
+    // For an unknown reason, this test fails on windows without the next microtick. It works
+    // in linux and osx, but fails on at least this machine.
+    // I do not see anything harmful in waiting an extra tick. But it is annoying to not
+    // know what is different.
+    await nextMicroTick();
     expect(steps).toEqual(["render", "render"]);
     expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
     parent.state.valA = 3;
     await nextMicroTick();
     expect(steps).toEqual(["render", "render"]);
     await nextMicroTick();
+    // same as above
+    await nextMicroTick();
     expect(steps).toEqual(["render", "render", "render"]);
     expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
     await nextTick();
@@ -3366,6 +3301,68 @@ describe("async rendering", () => {
     await nextTick();
     expect(fixture.innerHTML).toBe("<div>a2<b>a2</b><p><span>a2b2</span></p></div>");
   });
+
+  test("concurrent renderings scenario 10", async () => {
+    // Here is the global idea of this scenario:
+    //       A
+    //       |
+    //       B    <- async willUpdateProps
+    //     -----  <- conditional (initialy false)
+    //       |
+    //       C    <- async willStart
+    // Render A and B normally
+    // Change the condition on B to trigger a re-rendering with C (async willStart)
+    // Change the state on A to trigger a global re-rendering, which is blocked
+    // in B (async willUpdateProps)
+    // Resolve the willStart of C: the first re-rendering has been cancelled by
+    // the global re-rendering, but handlers waiting for the rendering promise to
+    // resolve might execute and we don't want them to crash/do anything
+    const defB = makeDeferred();
+    const defC = makeDeferred();
+    let stateB;
+    class ComponentC extends Component<any, any> {
+      static template = xml`<span><t t-esc="props.value"/></span>`;
+      willStart() {
+        return defC;
+      }
+    }
+    ComponentC.prototype.__render = jest.fn(ComponentC.prototype.__render);
+    class ComponentB extends Component<any, any> {
+      static template = xml`<p><ComponentC t-if="state.hasChild" value="props.value"/></p>`;
+      state = useState({ hasChild: false });
+      static components = { ComponentC };
+      constructor(parent, props) {
+        super(parent, props);
+        stateB = this.state;
+      }
+      willUpdateProps() {
+        return defB;
+      }
+    }
+    class ComponentA extends Component<any, any> {
+      static template = xml`<div><ComponentB value="state.value"/></div>`;
+      static components = { ComponentB };
+      state = useState({ value: 1 });
+    }
+
+    const componentA = new ComponentA();
+    await componentA.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><p></p></div>");
+
+    stateB.hasChild = true;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><p></p></div>");
+
+    componentA.state.value = 2;
+    defC.resolve();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><p></p></div>");
+
+    defB.resolve();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><p><span>2</span></p></div>");
+    expect(ComponentC.prototype.__render).toHaveBeenCalledTimes(1);
+  });
 });
 
 describe("widget and observable state", () => {
@@ -3450,7 +3447,7 @@ describe("can deduce template from name", () => {
     await abc.mount(fixture);
     expect(fixture.innerHTML).toBe("<span>Rochefort 8</span>");
     abc.destroy();
-    config.env = env2;
+    Component.env = env2;
     const abc2 = new ABC();
     await abc2.mount(fixture);
     expect(fixture.innerHTML).toBe("<span>Rochefort 10</span>");
@@ -4240,6 +4237,31 @@ describe("environment and plugins", () => {
     await nextTick();
     expect(fixture.innerHTML).toBe("<div>Blue</div>");
   });
+
+  test("can define specific env for root components", async () => {
+    class App1 extends Component<any, any> {
+      static template = xml`<span></span>`;
+    }
+    App1.env = { test: 1 };
+    class App2 extends Component<any, any> {
+      static template = xml`<span></span>`;
+    }
+    App2.env = { test: 2 };
+    class App1B extends App1 {}
+    class App2B extends App2 {}
+    App2B.env = { test: 3 };
+
+    const app1 = new App1();
+    const app2 = new App2();
+    const app1B = new App1B();
+    const app2B = new App2B();
+
+    expect(app1.env.qweb).toBeDefined();
+    expect(app1.env.test).toBe(1);
+    expect(app2.env.test).toBe(2);
+    expect(app1B.env.test).toBe(1);
+    expect(app2B.env.test).toBe(3);
+  });
 });
 
 describe("component error handling (catchError)", () => {
@@ -4863,10 +4885,8 @@ describe("unmounting and remounting", () => {
     expect(fixture.innerHTML).toBe("<div>1</div>");
     widget.unmount();
     expect(fixture.innerHTML).toBe("");
+    await nextTick(); // wait for changes to be detected before remounting
     await widget.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div>1</div>");
-    widget.unmount();
-    await widget.mount(fixture, true);
     expect(fixture.innerHTML).toBe("<div>3</div>");
   });
 });

tests/component/props_validation.test.ts

@@ -1,7 +1,6 @@
 import { Component, Env } from "../../src/component/component";
 import { makeTestFixture, makeTestEnv, nextTick } from "../helpers";
 import { useState } from "../../src/hooks";
-import { config } from "../../src/config";
 import { QWeb } from "../../src/qweb";
 import { xml } from "../../src/tags";
 
@@ -16,7 +15,7 @@ let dev: boolean = false;
 beforeEach(() => {
   fixture = makeTestFixture();
   env = makeTestEnv();
-  config.env = env;
+  Component.env = env;
   dev = QWeb.dev;
   QWeb.dev = true;
 });
@@ -122,7 +121,7 @@ describe("props validation", () => {
       expect(error.message).toBe(`Missing props 'p' (component '_a')`);
 
       error = undefined;
-      props = {p: test.ok};
+      props = { p: test.ok };
       try {
         const p = new Parent();
         await p.mount(fixture);
@@ -131,7 +130,7 @@ describe("props validation", () => {
       }
       expect(error).toBeUndefined();
 
-      props = {p: test.ko};
+      props = { p: test.ko };
       try {
         const p = new Parent();
         await p.mount(fixture);
@@ -179,7 +178,7 @@ describe("props validation", () => {
       expect(error.message).toBe(`Missing props 'p' (component '_a')`);
 
       error = undefined;
-      props = {p: test.ok};
+      props = { p: test.ok };
       try {
         const p = new Parent();
         await p.mount(fixture);
@@ -188,7 +187,7 @@ describe("props validation", () => {
       }
       expect(error).toBeUndefined();
 
-      props = {p: test.ko};
+      props = { p: test.ko };
       try {
         const p = new Parent();
         await p.mount(fixture);
@@ -204,14 +203,14 @@ describe("props validation", () => {
     class TestWidget extends Component<any, any> {
       static template = xml`<div>hey</div>`;
       static props = { p: [String, Boolean] };
-    };
+    }
     class Parent extends Component<any, any> {
       static template = xml`<div><TestWidget p="p"/></div>`;
       static components = { TestWidget };
       get p() {
         return props.p;
       }
-    };
+    }
 
     let error;
     let props;
@@ -241,21 +240,21 @@ describe("props validation", () => {
       error = e;
     }
     expect(error).toBeDefined();
-    expect(error.message).toBe(`Props 'p' of invalid type in component 'TestWidget'`);
+    expect(error.message).toBe("Props 'p' of invalid type in component 'TestWidget'");
   });
 
   test("can validate an optional props", async () => {
     class TestWidget extends Component<any, any> {
       static template = xml`<div>hey</div>`;
       static props = { p: { type: String, optional: true } };
-    };
+    }
     class Parent extends Component<any, any> {
       static template = xml`<div><TestWidget p="p"/></div>`;
       static components = { TestWidget };
       get p() {
         return props.p;
       }
-    };
+    }
 
     let error;
     let props;
@@ -292,14 +291,14 @@ describe("props validation", () => {
     class TestWidget extends Component<any, any> {
       static template = xml`<div>hey</div>`;
       static props = { p: { type: Array, element: String } };
-    };
+    }
     class Parent extends Component<any, any> {
       static template = xml`<div><TestWidget p="p"/></div>`;
       static components = { TestWidget };
       get p() {
         return props.p;
       }
-    };
+    }
 
     let error;
     let props;
@@ -344,7 +343,7 @@ describe("props validation", () => {
     class TestWidget extends Component<any, any> {
       static template = xml`<div>hey</div>`;
       static props = { p: { type: Array, element: [String, Boolean] } };
-    };
+    }
     class Parent extends Component<any, any> {
       static template = xml`<div><TestWidget p="p"/></div>`;
       static components = { TestWidget };
@@ -399,7 +398,7 @@ describe("props validation", () => {
       static props = {
         p: { type: Object, shape: { id: Number, url: String } }
       };
-    };
+    }
     class Parent extends Component<any, any> {
       static template = xml`<div><TestWidget p="p"/></div>`;
       static components = { TestWidget };
@@ -426,7 +425,8 @@ describe("props validation", () => {
     } catch (e) {
       error = e;
     }
-    expect(error).toBeUndefined();
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Invalid prop 'p' in component TestWidget (unknown prop 'extra')");
 
     try {
       props = { p: { id: "1", url: "url" } };
@@ -462,7 +462,7 @@ describe("props validation", () => {
           }
         }
       };
-    };
+    }
     class Parent extends Component<any, any> {
       static template = xml`<div><TestWidget p="p"/></div>`;
       static components = { TestWidget };
@@ -502,6 +502,39 @@ describe("props validation", () => {
     expect(error.message).toBe(`Props 'p' of invalid type in component 'TestWidget'`);
   });
 
+  test("can validate optional attributes in nested sub props", () => {
+    class TestComponent extends Component<any, any> {
+      static props = {
+        myprop: {
+          type: Array,
+          element: {
+            type: Object,
+            shape: {
+              num: { type: Number, optional: true }
+            }
+          }
+        }
+      };
+    }
+    let error;
+    try {
+      QWeb.utils.validateProps(TestComponent, { myprop: [{}] });
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeUndefined();
+
+    try {
+      QWeb.utils.validateProps(TestComponent, { myprop: [{ a: 1 }] });
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe(
+      "Invalid prop 'myprop' in component TestComponent (unknown prop 'a')"
+    );
+  });
+
   test("props are validated in dev mode (code snapshot)", async () => {
     env.qweb.addTemplates(`
       <templates>
@@ -678,7 +711,7 @@ describe("default props", () => {
 
     const w = new Parent();
     await w.mount(fixture);
-    expect(fixture.innerHTML).toBe('<div><div>4</div></div>');
+    expect(fixture.innerHTML).toBe("<div><div>4</div></div>");
   });
 
   test("default values are also set whenever component is updated", async () => {

tests/context.test.ts

@@ -1,7 +1,6 @@
 import { makeDeferred, makeTestEnv, makeTestFixture, nextTick } from "./helpers";
 import { Component } from "../src/component/component";
 import { Context, useContext } from "../src/context";
-import { config } from "../src/config";
 import { xml } from "../src/tags";
 import { useState } from "../src/hooks";
 
@@ -18,7 +17,7 @@ let fixture: HTMLElement;
 
 beforeEach(() => {
   fixture = makeTestFixture();
-  config.env = makeTestEnv();
+  Component.env = makeTestEnv();
 });
 
 afterEach(() => {

tests/hooks.test.ts

@@ -1,6 +1,5 @@
 import { makeTestEnv, makeTestFixture, nextTick } from "./helpers";
 import { Component, Env } from "../src/component/component";
-import { config } from "../src/config";
 import {
   useState,
   onMounted,
@@ -29,7 +28,7 @@ let env: Env;
 beforeEach(() => {
   fixture = makeTestFixture();
   env = makeTestEnv();
-  config.env = env;
+  Component.env = env;
 });
 
 afterEach(() => {
@@ -229,8 +228,11 @@ describe("hooks", () => {
       }
     }
     const counter = new Counter();
+    expect(counter.button.el).toBe(null);
     await counter.mount(fixture);
     expect(fixture.innerHTML).toBe("<div><button>0</button></div>");
+    expect(counter.button.el).not.toBe(null);
+    expect(counter.button.el).toBe(fixture.querySelector("button"));
     counter.increment();
     await nextTick();
     expect(fixture.innerHTML).toBe("<div><button>1</button></div>");
@@ -257,6 +259,104 @@ describe("hooks", () => {
     expect(fixture.innerHTML).toBe("<div></div>");
   });
 
+  test("t-refs on widget are components", async () => {
+    class WidgetB extends Component<any, any> {
+      static template = xml`<div>b</div>`;
+    }
+    class WidgetC extends Component<any, any> {
+      static template = xml`<div class="outer-div">Hello<WidgetB t-ref="mywidgetb" /></div>`;
+      static components = { WidgetB };
+      ref = useRef("mywidgetb");
+    }
+
+    const widget = new WidgetC();
+    expect(widget.ref.comp).toBe(null);
+    expect(widget.ref.el).toBe(null);
+    await widget.mount(fixture);
+    expect(widget.ref.comp).toBeInstanceOf(WidgetB);
+    expect(widget.ref.el).toEqual(fixture.querySelector(".outer-div > div"));
+  });
+
+  test("t-refs are bound at proper timing", async () => {
+    expect.assertions(2);
+    class Widget extends Component<any, any> {
+      static template = xml`<div>widget</div>`;
+    }
+
+    class ParentWidget extends Component<any, any> {
+      static template = xml`
+        <div>
+          <t t-foreach="state.list" t-as="elem" t-ref="child" t-key="elem" t-component="Widget"/>
+        </div>
+      `;
+      static components = { Widget };
+      state = useState({ list: <any>[] });
+      child = useRef("child");
+      willPatch() {
+        expect(this.child.comp).toBeNull();
+      }
+      patched() {
+        expect(this.child.comp).not.toBeNull();
+      }
+    }
+
+    const parent = new ParentWidget();
+    await parent.mount(fixture);
+    parent.state.list.push(1);
+    await nextTick();
+  });
+
+  test("t-refs are bound at proper timing (2)", async () => {
+    expect.assertions(10);
+    class Widget extends Component<any, any> {
+      static template = xml`<div>widget</div>`;
+    }
+    class ParentWidget extends Component<any, any> {
+      static template = xml`
+        <div>
+          <t t-if="state.child1" t-ref="child1" t-component="Widget"/>
+          <t t-if="state.child2" t-ref="child2" t-component="Widget"/>
+        </div>`;
+      static components = { Widget };
+      state = useState({ child1: true, child2: false });
+      child1 = useRef("child1");
+      child2 = useRef("child2");
+      count = 0;
+      mounted() {
+        expect(this.child1.comp).toBeDefined();
+        expect(this.child2.comp).toBeNull();
+      }
+      willPatch() {
+        if (this.count === 0) {
+          expect(this.child1.comp).toBeDefined();
+          expect(this.child2.comp).toBeNull();
+        }
+        if (this.count === 1) {
+          expect(this.child1.comp).toBeDefined();
+          expect(this.child2.comp).toBeDefined();
+        }
+      }
+      patched() {
+        if (this.count === 0) {
+          expect(this.child1.comp).toBeDefined();
+          expect(this.child2.comp).toBeDefined();
+        }
+        if (this.count === 1) {
+          expect(this.child1.comp).toBeNull();
+          expect(this.child2.comp).toBeDefined();
+        }
+        this.count++;
+      }
+    }
+
+    const parent = new ParentWidget();
+    await parent.mount(fixture);
+    parent.state.child2 = true;
+    await nextTick();
+    parent.state.child1 = false;
+    await nextTick();
+  });
+
   test("can use onPatched, onWillPatch", async () => {
     const steps: string[] = [];
     function useMyHook() {

tests/misc/async_root.test.ts

@@ -1,5 +1,4 @@
 import { AsyncRoot } from "../../src/misc/async_root";
-import { config } from "../../src/config";
 import { useState } from "../../src/hooks";
 import { xml } from "../../src/tags";
 import { makeDeferred, makeTestFixture, makeTestEnv, nextTick } from "../helpers";
@@ -18,7 +17,7 @@ let fixture: HTMLElement;
 
 beforeEach(() => {
   fixture = makeTestFixture();
-  config.env = makeTestEnv();
+  Component.env = makeTestEnv();
 });
 
 afterEach(() => {

tests/router/__snapshots__/route_component.test.ts.snap

@@ -35,7 +35,7 @@ exports[`RouteComponent can render simple cases 1`] = `
             let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
             let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
             const fiber = w3.__owl__.currentFiber;
-            def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            def2.then(function () {if (fiber.isCancelled) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
             utils.defineProxy(vn5, pvnode);
             w3.__owl__.pvnode = pvnode;
         }

tests/router/link.test.ts

@@ -1,5 +1,4 @@
 import { Component } from "../../src/component/component";
-import { config } from "../../src/config";
 import { Link } from "../../src/router/link";
 import { RouterEnv } from "../../src/router/router";
 import { makeTestEnv, makeTestFixture, nextTick } from "../helpers";
@@ -13,7 +12,7 @@ describe("Link component", () => {
   beforeEach(() => {
     fixture = makeTestFixture();
     env = <RouterEnv>makeTestEnv();
-    config.env = env;
+    Component.env = env;
   });
 
   afterEach(() => {

tests/router/route_component.test.ts

@@ -1,5 +1,4 @@
 import { Component } from "../../src/component/component";
-import { config } from "../../src/config";
 import { RouterEnv } from "../../src/router/router";
 import { RouteComponent } from "../../src/router/route_component";
 import { makeTestEnv, makeTestFixture, nextTick } from "../helpers";
@@ -13,7 +12,7 @@ describe("RouteComponent", () => {
   beforeEach(() => {
     fixture = makeTestFixture();
     env = <RouterEnv>makeTestEnv();
-    config.env = env;
+    Component.env = env;
   });
 
   afterEach(() => {

tests/store_hooks.test.ts

@@ -1,5 +1,4 @@
 import { Component, Env } from "../src/component/component";
-import { config } from "../src/config";
 import { Store, useStore, useDispatch, useGetters } from "../src/store";
 import { useState } from "../src/hooks";
 import { xml } from "../src/tags";
@@ -13,7 +12,7 @@ describe("connecting a component to store", () => {
   beforeEach(() => {
     fixture = makeTestFixture();
     env = makeTestEnv();
-    config.env = env;
+    Component.env = env;
   });
 
   afterEach(() => {
@@ -49,6 +48,22 @@ describe("connecting a component to store", () => {
     expect(fixture.innerHTML).toBe("<div><span>hello</span></div>");
   });
 
+  test("throw error if no store is found", async () => {
+    class App extends Component<any, any> {
+      static template = xml`<div></div>`;
+      todos = useStore(state => state.todos);
+    }
+
+    let error;
+    try {
+      new App();
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe("No store found when connecting 'App'");
+  });
+
   test("can use useStore twice in a component", async () => {
     const state = { a: 1, b: 2 };
     const actions = {
@@ -922,7 +937,7 @@ describe("various scenarios", () => {
   beforeEach(() => {
     fixture = makeTestFixture();
     env = makeTestEnv();
-    config.env = env;
+    Component.env = env;
   });
 
   afterEach(() => {

tools/benchmarks/owl-0.21.0/app.js

@@ -15,8 +15,6 @@ class Counter extends owl.Component {
 // Message Widget
 //------------------------------------------------------------------------------
 class Message extends owl.Component {
-  static components = { Counter };
-
   shouldUpdate(nextProps) {
     return nextProps.message !== this.props.message;
   }
@@ -26,12 +24,11 @@ class Message extends owl.Component {
     });
   }
 }
-
+Message.components = { Counter };
 //------------------------------------------------------------------------------
 // Root Widget
 //------------------------------------------------------------------------------
 class App extends owl.Component {
-  static components = { Message };
   state = { messages: [], multipleFlag: false, clearAfterFlag: false };
 
   mounted() {
@@ -137,6 +134,7 @@ class App extends owl.Component {
     this.refs.log.innerHTML = "";
   }
 }
+App.components = { Message };
 
 //------------------------------------------------------------------------------
 // Application initialization

tools/benchmarks/owl-master/app.js

@@ -16,8 +16,6 @@ class Counter extends owl.Component {
 // Message Widget
 //------------------------------------------------------------------------------
 class Message extends owl.Component {
-  static components = { Counter };
-
   shouldUpdate(nextProps) {
     return nextProps.message !== this.props.message;
   }
@@ -27,12 +25,12 @@ class Message extends owl.Component {
     });
   }
 }
+Message.components = { Counter };
 
 //------------------------------------------------------------------------------
 // Root Widget
 //------------------------------------------------------------------------------
 class App extends owl.Component {
-  static components = { Message };
   state = useState({ messages: [], multipleFlag: false, clearAfterFlag: false });
   logRef = useRef("log");
 
@@ -139,13 +137,14 @@ class App extends owl.Component {
     this.logRef.el.innerHTML = "";
   }
 }
+App.components = { Message };
 
 //------------------------------------------------------------------------------
 // Application initialization
 //------------------------------------------------------------------------------
 async function start() {
   const templates = await owl.utils.loadFile("templates.xml");
-  owl.config.env = {
+  App.env = {
     qweb: new owl.QWeb({ templates })
   };
   const app = new App();

tools/playground/app.js

@@ -70,13 +70,9 @@ if __name__ == "__main__":
 /**
  * Make an iframe, with all the js, css and xml properly injected.
  */
-function makeCodeIframe(js, css, xml, errorHandler) {
-  // check templates
-  var qweb = new owl.QWeb();
+function makeCodeIframe(js, css, xml) {
   const sanitizedXML = xml.replace(/<!--[\s\S]*?-->/g, "");
 
-  // will throw error if there is something wrong with xml
-  qweb.addTemplates(sanitizedXML);
 
   // create iframe
   const iframe = document.createElement("iframe");
@@ -92,21 +88,13 @@ function makeCodeIframe(js, css, xml, errorHandler) {
       script.type = "text/javascript";
       const content = `
         {
-          owl.__info__.mode = 'dev';
+          owl.config.mode = 'dev';
           let templates = \`${sanitizedXML}\`;
           const qweb = new owl.QWeb({ templates });
-          owl.config.env = { qweb };
+          owl.Component.env = { qweb };
         }
         ${js}`;
       script.innerHTML = content;
-      iframe.contentWindow.addEventListener("error", errorHandler);
-      iframe.contentWindow.addEventListener("unhandledrejection", errorHandler);
-      setTimeout(function() {
-        if (iframe.contentWindow) {
-          iframe.contentWindow.removeEventListener("error", errorHandler);
-          iframe.contentWindow.removeEventListener("unhandledrejection", errorHandler);
-        }
-      }, 200);
       doc.body.appendChild(script);
     });
     doc.head.appendChild(owlScript);
@@ -317,7 +305,6 @@ class App extends owl.Component {
       js: this.SAMPLES[0].code,
       css: this.SAMPLES[0].css || "",
       xml: this.SAMPLES[0].xml || DEFAULT_XML,
-      error: false,
       displayWelcome: true,
       splitLayout: true,
       leftPaneWidth: Math.ceil(window.innerWidth / 2),
@@ -330,37 +317,12 @@ class App extends owl.Component {
     this.content = useRef("content");
   }
 
-  displayError(error) {
-    this.state.error = error;
-    if (error) {
-      setTimeout(() => {
-        this.content.el.innerHTML = "";
-      });
-      return;
-    }
-  }
-
   runCode() {
-    this.state.displayWelcome = false;
-    let subiframe;
-    let error = false;
-    const errorHandler = e => this.displayError(e.message || e.reason.message);
-    try {
-      const { js, css, xml } = this.state;
-      subiframe = makeCodeIframe(js, css, xml, errorHandler);
-    } catch (e) {
-      //probably problem with the templates
-      error = e;
-      // we still log the error, always useful to have it available
-      console.error(e);
-    }
-    if (error) {
-      this.displayError(error.message);
-      return;
-    } else {
-      this.state.error = false;
-    }
     this.content.el.innerHTML = "";
+    this.state.displayWelcome = false;
+
+    const { js, css, xml } = this.state;
+    const subiframe = makeCodeIframe(js, css, xml);
     this.content.el.appendChild(subiframe);
   }
 
@@ -443,7 +405,7 @@ async function start() {
     owl.utils.whenReady()
   ]);
   const qweb = new owl.QWeb({ templates });
-  owl.config.env = { qweb };
+  owl.Component.env = { qweb };
   const app = new App();
   app.mount(document.body);
 }

tools/playground/playground.css

@@ -179,16 +179,3 @@ body {
   padding: 5%;
 }
 
-.right-pane .error {
-  height: 100%;
-  width: 90%;
-  padding-top: 30%;
-  font-size: 18px;
-  color: darkred;
-  margin-left: 5%;
-}
-
-.right-pane .error pre {
-    overflow: auto;
-    width: 100%;
-}

tools/playground/samples.js

@@ -345,7 +345,7 @@ const themeContext = new Context({
    foreground: '#fff',
 });
 // Add the themeContext the environment to make it available to all components
-owl.config.env.themeContext = themeContext;
+App.env.themeContext = themeContext;
 const app = new App();
 app.mount(document.body);
 `;
@@ -544,7 +544,7 @@ function makeStore() {
     return store;
 }
 
-owl.config.env.store = makeStore();
+TodoApp.env.store = makeStore();
 const app = new TodoApp();
 app.mount(document.body);
 `;
@@ -1032,7 +1032,7 @@ function setupResponsivePlugin(env) {
 //------------------------------------------------------------------------------
 // Application Startup
 //------------------------------------------------------------------------------
-setupResponsivePlugin(owl.config.env);
+setupResponsivePlugin(App.env);
 
 const app = new App();
 app.mount(document.body);
@@ -1543,7 +1543,7 @@ const windows = [
   }
 ];
 
-owl.config.env.windows = windows;
+App.env.windows = windows;
 const app = new App();
 app.mount(document.body);
 `;

tools/playground/templates.xml

@@ -51,10 +51,6 @@
             </p>
           </div>
         </div>
-        <div t-if="state.error" class="error">
-          <h3>Error</h3>
-          <pre t-esc="state.error"/>
-        </div>
         <div class="content" t-ref="content"/>
       </div>
   </div>