[REL] bump to v0.13.0

Fix package.json and tsconfig.json to build correctly on windows:
the extention scr/* doesn't expand on windows, so I removed it.

Added a precompilation step on npm run extras:watch

.gitignore

@@ -1,5 +1,6 @@
 /node_modules
 /dist
+
 npm-debug.log
 
 # misc
@@ -14,7 +15,11 @@ yarn-debug.log*
 yarn-error.log*
 
 package-lock.json
+
+#ide's
 .vscode
+.idea
+
 node_modules
 
 # Extras temp file

README.md

@@ -59,8 +59,8 @@ More interesting examples can be found on the [playground](https://odoo.github.i
 
 If you want to use a simple `<script>` tag, the last release can be downloaded here:
 
-- [owl-0.11.0.js](https://github.com/odoo/owl/releases/download/v0.11.0/owl.js)
-- [owl-0.11.0.min.js](https://github.com/odoo/owl/releases/download/v0.11.0/owl.min.js)
+- [owl-0.13.0.js](https://github.com/odoo/owl/releases/download/v0.13.0/owl.js)
+- [owl-0.13.0.min.js](https://github.com/odoo/owl/releases/download/v0.13.0/owl.min.js)
 
 Some npm scripts are available:
 
@@ -82,6 +82,9 @@ The complete documentation can be found [here](doc/readme.md). The most importan
 - [Component](doc/component.md)
 - [QWeb](doc/qweb.md)
 
+Found an issue in the documentation? A broken link? Some outdated information?
+Submit a PR!
+
 ## License
 
 OWL is [GPL licensed](./LICENSE).

doc/animations.md

@@ -1,23 +1,25 @@
 # 🦉 Animations 🦉
 
-
 Animation is a complex topic. There are many different use cases, and many
-solutions and technologies.
+solutions and technologies. Owl only supports some basic use cases.
 
 ## Simple CSS effects
 
-Sometimes, using pure CSS is enough.  For these use cases, Owl is not really
+Sometimes, using pure CSS is enough. For these use cases, Owl is not really
 necessary: it just needs to render a DOM element with a specific class. For
 example:
 
-
 ```xml
-<button class="flash" t-on-click="doSomething">Click</button>
+<a class="btn flash" t-on-click="doSomething">Click</a>
 ```
 
 with the following CSS:
 
 ```css
+btn {
+  background-color: gray;
+}
+
 .flash {
   transition: background 0.5s;
 }
@@ -31,9 +33,63 @@ with the following CSS:
 will produce a nice flash effect whenever the user click (or activate with the
 keyboard) the button.
 
-## CSS Transitions (single element)
+## CSS Transitions
 
 A more complex situation occurs when we want to transition an element in or out
-of the page.  For example, we may want a fade-in and fade-out effect.
+of the page. For example, we may want a fade-in and fade-out effect.
 
-The `t-transition` directive is here to help us (see [QWeb documentation](doc/qweb.md#t-transition-directive)).
+The `t-transition` directive is here to help us (see [QWeb documentation](qweb.md#t-transition-directive)).
+
+To perform useful transition effects, whenever an element appears or disappears,
+it is necessary to add/remove some css style or class at some precise moment in
+the lifetime of a node. Since this is not easy to do by hand, Owl `t-transition`
+directive is there to help.
+
+Whenever a node has a `t-transition` directive, with a `name` value, the following
+will happen:
+
+At node insertion:
+
+- the css classes `name-enter` and `name-enter-active` will be added directly
+  when the node is inserted into the DOM,
+- on the next animation frame: the css class `name-enter` will be removed and the
+  class `name-enter-to` will be added (so they can be used to trigger css
+  transition effects),
+- the css class `name-enter-active` will be removed whenever a css transition
+  ends.
+
+At node destruction:
+
+- the css classes `name-leave` and `name-leave-active` will be added before the
+  node is removed to the DOM,
+- the css class `name-leave` will be removed on the next animation frame (so it
+  can be used to trigger css transition effects),
+- the css class `name-leave-active` will be removed whenever a css transition
+  ends. Only then will the element be removed from the DOM.
+
+For example, a simple fade in/out effect can be done with this:
+
+```xml
+<div>
+    <div t-if="state.flag" class="square" t-transition="fade">Hello</div>
+</div>
+```
+
+```css
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+```
+
+The `t-transition` directive can be combined with `t-widget`.
+
+Notes:
+
+- more information on animations are available [here](animations.md).
+- Owl does not support more than one transition on a single node, so the
+  `t-transition` expression must be a single value (i.e. no space allowed)

doc/component.md

@@ -4,13 +4,18 @@
 
 - [Overview](#overview)
 - [Example](#example)
-- [Composition](#composition)
 - [Reference](#reference)
   - [Properties](#properties)
+  - [Static Properties](#static-properties)
   - [Methods](#methods)
   - [Lifecycle](#lifecycle)
-  - [Semantics](#semantics)
-- [Asynchronous rendering](#asynchronous-rendering)
+  - [Composition](#composition)
+  - [Event Handling](#event-handling)
+  - [`t-key` directive](#t-key-directive)
+  - [`t-mounted` directive](#t-mounted-directive)
+  - [Props Validation](#props-validation)
+  - [Keeping References](#keeping-references])
+  - [Asynchronous rendering](#asynchronous-rendering)
 
 ## Overview
 
@@ -67,55 +72,6 @@ a state object is defined. It is not mandatory to use the state object, but it
 is certainly encouraged. The state object is [observed](observer.md), and any
 change to it will cause a rerendering.
 
-## Composition
-
-The example above shows a QWeb template with a `t-on-click` directive. Widget
-templates are standard [QWeb](qweb.md) templates, but with an extra directive:
-`t-widget`. With the `t-widget` directive, widget templates can declare sub
-widgets:
-
-```xml
-<div t-name="ParentWidget">
-  <span>some text</span>
-  <t t-widget="MyWidget" t-props="{info: 13}"/>
-</div>
-```
-
-```js
-class ParentWidget extends owl.Component {
-    widgets = { MyWidget: MyWidget};
-    ...
-}
-```
-
-In this example, the `ParentWidget`'s template creates a widget `MyWidget` just
-after the span. See the [QWeb](qweb.md) documentation for more information on the
-`t-widget` directive.
-
-Note that the rendering context for the template is the widget itself. This means
-that the template can access `state`, `props`, `env`, or any methods defined in the widget.
-
-**CSS and style:** there is some specific support to allow the parent to declare
-additional css classes or style for the sub widget: css declared in `class`, `style`, `t-att-class` or `t-att-style` will be added to the
-root widget element.
-
-```xml
-<div t-name="ParentWidget">
-  <t t-widget="MyWidget" class="someClass" style="font-weight:bold;" t-props="{info: 13}"/>
-</div>
-```
-
-Warning: there is a small caveat with dynamic class attributes: since Owl needs
-to be able to add/remove proper classes whenever necessary, it needs to be aware
-of the possible classes. Otherwise, it will not be able to make the difference
-between a valid css class added by the component, or some custom code, and a
-class that need to be removed. This is why we only support the explicit syntax
-with a class object:
-
-```xml
-<t t-widget="MyWidget" t-att-class="{a: state.flagA, b: state.flagB}" />
-```
-
 ## Reference
 
 An Owl component is a small class which represent a widget or some UI element.
@@ -144,11 +100,22 @@ find a template with the component name (or one of its ancestor).
 - **`props`** (Object): this is an object given (in the constructor) by the parent
   to configure the component. It can be dynamically changed later by the parent,
   in some case. Note that `props` are owned by the parent, not by the component.
-  As such, it should not ever be modified by the component.
+  As such, it should not ever be modified by the component!!
 
 - **`refs`** (Object): the `refs` object contains all references to sub DOM nodes
   or sub widgets defined by a `t-ref` directive in the component's template.
 
+### Static Properties
+
+- **`props`** (Object, optional): if given, this is an object that describes the
+  type and shape of the (actual) props given to the component. If Owl mode is
+  `dev`, this will be used to validate the props each time the component is
+  created/updated. See [Props Validation](#props-validation) for more information.
+- **`defaultProps`** (Object, optional): if given, this object define default
+  values for (top-level) props. Whenever `props` are given to the object, they
+  will be altered to add default value (if missing). Note that it does not
+  change the initial object, a new object will be created instead.
+
 ### Methods
 
 - **`mount(target)`** (async): this is the main way a component's hierarchy is added to the
@@ -345,6 +312,241 @@ the DOM. This is a good place to remove some listeners, for example.
 
 This is the opposite method of `mounted`.
 
+## Composition
+
+The example above shows a QWeb template with a `t-on-click` directive. Widget
+templates are standard [QWeb](qweb.md) templates, but with an extra directive:
+`t-widget`. With the `t-widget` directive, widget templates can declare sub
+widgets:
+
+```xml
+<div t-name="ParentWidget">
+  <span>some text</span>
+  <t t-widget="MyWidget" info="13"/>
+</div>
+```
+
+```js
+class ParentWidget extends owl.Component {
+    widgets = { MyWidget: MyWidget};
+    ...
+}
+```
+
+In this example, the `ParentWidget`'s template creates a widget `MyWidget` just
+after the span. The `info` key will be added to the subwidget's props. Each
+props is a string which represents a javascript (QWeb) expression, so it is
+dynamic. If it is necessary to give a string, this can be done by quoting it:
+`someString="'somevalue'"`. See the
+[QWeb](qweb.md) documentation for more information on the `t-widget` directive.
+
+Note that the rendering context for the template is the widget itself. This means
+that the template can access `state`, `props`, `env`, or any methods defined in the widget.
+
+The `t-widget` directive is the key to a declarative component
+system. It allows a template to define where and how a sub widget is created
+and/or updated. For example:
+
+```xml
+<div t-name="ParentWidget">
+    <t t-widget="ChildWidget" count="state.val"/>
+</div>
+```
+
+```js
+class ParentWidget {
+  widgets = { ChildWidget };
+  state = { val: 4 };
+}
+```
+
+Whenever the template is rendered, it will automatically create the subwidget
+`ChildWidget` at the correct place. It needs to find the reference to the
+actual component class in the special `widgets` key, or the class registered in
+QWeb's global registry (see `register` function of QWeb). It first looks inside
+the local `widgets` key, then fallbacks on the global registry.
+
+_Props_: In this example, the child widget will receive the object `{count: 4}` in its
+constructor. This will be assigned to the `props` variable, which can be accessed
+on the widget (and also, in the template). Whenever the state is updated, then
+the subwidget will also be updated automatically.
+
+Note that there are some restrictions on prop names: `class`, `style` and any
+string which starts with `t-` are not allowed.
+
+The `t-widget` directive also accepts dynamic values with string interpolation
+(like the [`t-attf-`](#dynamic-attributes-t-att-and-t-attf-directives) directive):
+
+```xml
+<div t-name="ParentWidget">
+    <t t-widget="ChildWidget#{id}"/>
+</div>
+```
+
+```js
+class ParentWidget {
+  widgets = { ChildWidget1, ChildWidget2 };
+  state = { id: 1 };
+}
+```
+
+Similarly to `t-attf-`, there is an alternate form of string interpolation:
+
+```xml
+<div t-name="ParentWidget">
+    <t t-widget="ChildWidget{{id}}"/>
+</div>
+```
+
+**CSS and style:** there is some specific support to allow the parent to declare
+additional css classes or style for the sub widget: css declared in `class`, `style`, `t-att-class` or `t-att-style` will be added to the
+root widget element.
+
+```xml
+<div t-name="ParentWidget">
+  <t t-widget="MyWidget" class="someClass" style="font-weight:bold;" info="13"/>
+</div>
+```
+
+Warning: there is a small caveat with dynamic class attributes: since Owl needs
+to be able to add/remove proper classes whenever necessary, it needs to be aware
+of the possible classes. Otherwise, it will not be able to make the difference
+between a valid css class added by the component, or some custom code, and a
+class that need to be removed. This is why we only support the explicit syntax
+with a class object:
+
+```xml
+<t t-widget="MyWidget" t-att-class="{a: state.flagA, b: state.flagB}" />
+```
+
+### Event handling
+
+In a component's template, it is useful to be able to register handlers on some
+elements to some specific events. This is what makes a template _alive_. There
+are four different use cases.
+
+1. Register an event handler on a DOM node (_pure_ DOM event)
+2. Register an event handler on a component (_pure_ DOM event)
+3. Register an event handler on a DOM node (_business_ DOM event)
+4. Register an event handler on a component (_business_ DOM event)
+
+A _pure_ DOM event is directly triggered by a user interaction (e.g. a `click`).
+
+```xml
+<button t-on-click="someMethod">Do something</button>
+```
+
+This will be roughly translated in javascript like this:
+
+```js
+button.addEventListener("click", widget.someMethod.bind(widget));
+```
+
+The suffix (`click` in this example) is simply the name of the actual DOM
+event.
+
+A _business_ DOM event is triggered by a call to `trigger` on a component.
+
+```xml
+<t t-widget="MyWidget" t-on-menu-loaded="someMethod"/>
+```
+
+```js
+ class MyWidget {
+     someWhere() {
+         const payload = ...;
+         this.trigger('menu-loaded', payload);
+     }
+ }
+```
+
+The call to `trigger` generates a [_CustomEvent_](https://developer.mozilla.org/docs/Web/Guide/Events/Creating_and_triggering_events)
+of type `menu-loaded` and dispatches it on the component's DOM element
+(`this.el`). The event bubbles and is cancelable. The parent widget listening
+to event `menu-loaded` will receive the payload in its `someMethod` handler
+(in the `detail` property of the event), whenever the event is triggered.
+
+```js
+ class ParentWidget {
+     someMethod(ev) {
+         const payload = ev.detail;
+         ...
+     }
+ }
+```
+
+By convention, we use KebabCase for the name of _business_ events.
+
+In order to remove the DOM event details from the event handlers (like calls to
+`event.preventDefault`) and let them focus on data logic, _modifiers_ can be
+specified as additional suffixes of the `t-on` directive.
+
+| Modifier   | Description                                                       |
+| ---------- | ----------------------------------------------------------------- |
+| `.stop`    | calls `event.stopPropagation()` before calling the method         |
+| `.prevent` | calls `event.preventDefault()` before calling the method          |
+| `.self`    | calls the method only if the `event.target` is the element itself |
+
+```xml
+<button t-on-click.stop="someMethod">Do something</button>
+```
+
+Note that modifiers can be combined (ex: `t-on-click.stop.prevent`), and that
+the order may matter. For instance `t-on-click.prevent.self` will prevent all
+clicks while `t-on-click.self.prevent` will only prevent clicks on the element
+itself.
+
+The `t-on` directive also allows to prebind some arguments. For example,
+
+```xml
+<button t-on-click="someMethod(expr)">Do something</button>
+```
+
+Here, `expr` is a valid Owl expression, so it could be `true` or some variable
+from the rendering context.
+
+### `t-key` directive
+
+Even though Owl tries to be as declarative as possible, some DOM state is still
+locked inside the DOM: for example, the scrolling state, the current user selection,
+the focused element or the state of an input. This is why we use a virtual dom
+algorithm to keep the actual DOM node as much as possible. However, this is
+sometimes not enough, and we need to help Owl decide if an element is actually
+the same, or is different. The `t-key` directive is used to give an identity to an element.
+
+There are three main use cases:
+
+- _elements in a list_:
+
+  ```xml
+    <span t-foreach="todos" t-as="todo" t-key="todo.id">
+        <t t-esc="todo.text"/>
+    </span>
+  ```
+
+- _`t-if`/`t-else`_
+
+- _animations_: give a different identity to a component. Ex: thread id with
+  animations on add/remove message.
+
+### `t-mounted` directive
+
+The `t-mounted` directive allows to register a callback to execute whenever the node
+is inserted into the DOM.
+
+```xml
+<div><input t-ref="someInput" t-mounted="focusMe"/></div>
+```
+
+```js
+class MyWidget extends owl.Component {
+    ...
+    focusMe() {
+        this.refs.someInput.focus();
+    }
+}
+```
+
 ### Semantics
 
 We give here an informal description of the way components are created/updated
@@ -432,7 +634,141 @@ Here is what Owl will do:
 
 6. `patched` hooks are called on `D`, `C`
 
-## Asynchronous rendering
+### Props Validation
+
+As an application becomes complex, it may be quite unsafe to define props in an informal way. This leads to two issues:
+
+- hard to tell how a component should be used, by looking at its code.
+- unsafe, it is easy to send wrong props into a component, either by refactoring a component, or one of its parent.
+
+A props type system would solve both issues, by describing the types and shapes
+of the props. Here is how it works in Owl:
+
+- `props` key is a static key (so, different from `this.props` in a component instance)
+- it is optional: it is ok for a component to not define a `props` key.
+- props are validated whenever a component is created/updated
+- props are only validated in `dev` mode (see [tooling page](tooling.md#development-mode))
+- if a key does not match the description, an error is thrown
+- it only validates keys defined in (static) `props`. Additional keys in (component) `props` are not validated.
+
+For example:
+
+```js
+class ComponentA extends owl.Component {
+    static props = ['id', 'url'];
+
+    ...
+}
+
+class ComponentB extends owl.Component {
+  static props = {
+    count: {type: Number},
+    messages: {
+      type: Array,
+      element: {type: Object, shape: {id: Boolean, text: 'string' }
+    },
+   date: Date,
+   combinedVal: [Number, Boolean]
+  };
+
+  ...
+}
+```
+
+- it is an object or a list of strings
+- a list of strings is a simplified props definition, which only lists the name
+  of the props.
+- all props are by default required, unless they are defined with `optional: true`
+  (in that case, validation is only done if there is a value)
+- valid types are: `Number, String, Boolean, Object, Array, Date, Function`, and all
+  constructor functions (so, if you have a `Person` class, it can be used as a type)
+- arrays are homogeneous (all elements have the same type/shape)
+
+For each key, a `prop` definition is either a constructor, a list of constructors, or an object:
+
+- a constructor: this should describe the type, for example: `id: Number` describe
+  the props `id` as a number
+- a list of constructors. In that case, this means that we allow more than one
+  type. For example, `id: [Number, String]` means that `id` can be either a string
+  or a number.
+- an object. This makes it possible to have more expressive definition. The following sub keys are then allowed:
+  - `type`: the main type of the prop being validated
+  - `element`: if the type was `Array`, then the `element` key describes the type of each element in the array. It is optional (not set means that we only validate the array, not its elements),
+  - `shape`: if the type was `Object`, then the `shape` key describes the interface of the object. It is optional (not set means that we only validate the object, not its elements)
+
+Examples:
+
+```js
+  // only the existence of those 3 keys is documented
+  static props = ['message', 'id', 'date'];
+```
+
+```js
+  static props = {
+    messageIds: {type: Array, element: Number},  // list of number
+    otherArr: {type: Array},   // just array. no validation is made on sub elements
+    otherArr2: Array,   // same as otherArr
+    someObj: {type: Object},  // just an object, no internal validation
+    someObj2: {
+      type: Object,
+      shape: {
+        id: Number,
+        name: {type: String, optional: true},
+        url: String
+      ]},    // object, with keys id (number), name (string, optional) and url (string)
+    someFlag: Boolean,     // a boolean, mandatory (even if `false`)
+    someVal: [Boolean, Date]   // either a boolean or a date
+  };
+```
+
+### Keeping references
+
+The `t-ref` directive helps a component keep reference to some inside part of it.
+Like the `t-on` directive, it can work either on a DOM node, or on a component:
+
+```xml
+<div>
+    <div t-ref="someDiv"/>
+    <t t-widget="SubWidget" t-ref="someWidget"/>
+</div>
+```
+
+In this example, the widget will be able to access the `div` and the component
+inside the special `refs` variable:
+
+```js
+this.refs.someDiv;
+this.refs.someWidget;
+```
+
+This is useful for various usecases: for example, integrating with an external
+library that needs to render itself inside an actual DOM node. Or for calling
+some method on a sub widget.
+
+Note: if used on a component, the reference will be set in the `refs`
+variable between `willPatch` and `patched`.
+
+The `t-ref` directive also accepts dynamic values with string interpolation
+(like the [`t-attf-`](#dynamic-attributes-t-att-and-t-attf-directives) and
+[`t-widget-`](#component-t-widget) directives). For example, if we have
+`id` set to 44 in the rendering context,
+
+```xml
+<div t-ref="widget_#{id}"/>
+```
+
+```js
+this.refs.widget_44;
+```
+
+Similarly to `t-attf-` and `t-widget`, there is an alternate form of string
+interpolation:
+
+```xml
+<div t-ref="widget_{{id}}"/>
+```
+
+### Asynchronous rendering
 
 Working with asynchronous code always adds a lot of complexity to a system. Whenever
 different parts of a system are active at the same time, one needs to think

doc/qweb.md

@@ -3,45 +3,76 @@
 ## Content
 
 - [Overview](#overview)
+- [Directives](#directives)
 - [QWeb Engine](#qweb-engine)
-- [QWeb Specification](#qweb-specification)
-
-  - [Static html nodes](#static-html-nodes)
-  - [`t-esc` directive](#t-esc-directive)
-  - [`t-raw` directive](#t-raw-directive)
-  - [`t-set` directive](#t-set-directive)
-  - [`t-if` directive](#t-if-directive)
-  - [Expression evaluation](#expression-evaluation)
-  - [Dynamic attributes (`t-att` and `t-attf` directives)](#dynamic-attributes-t-att-and-t-attf-directives)
-  - [`t-attf` directive (dynamic attributes)](#t-att-directive-dynamic-attributes)
-  - [`t-call` directive (sub templates)](#t-call-directive-sub-templates)
-
-- [JS/OWL Specific Extensions](#jsowl-specific-extensions)
-
-  - [`t-on` directive](#t-on-directive)
-  - [Component: `t-widget`, `t-props`](#component-t-widget-t-props)
-  - [`t-ref` directive](#t-ref-directive)
-  - [`t-key` directive](#t-key-directive)
-  - [`t-transition` directive](#t-transition-directive)
-  - [`t-mounted` directive](#t-mounted-directive)
-  - [Debugging (`t-debug` and `t-log`)](#debugging-t-debug-and-t-log)
+- [Reference](#qweb-specification)
   - [White spaces](#white-spaces)
   - [Root nodes](#root-nodes)
+  - [Expression evaluation](#expression-evaluation)
+  - [Static html nodes](#static-html-nodes)
+  - [Outputting data](#outputting-data)
+  - [Setting Variables](#setting-variables)
+  - [Conditionals](#conditionals)
+  - [Dynamic attributes](#dynamic-attributes)
+  - [Loops](#loops)
+  - [Rendering Sub Templates](#rendering-sub-templates)
+  - [Debugging](#debugging)
 
 ## Overview
 
 [QWeb](https://www.odoo.com/documentation/12.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.
+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.
 
-The QWeb implementation in the OWL project is slightly different. It compiles
-templates into functions that output a virtual DOM instead of a string. This is
-necessary for the component system. In addition, it has a few extra directives
-(see [OWL Specific Extensions](#owlspecificextensions))
+```xml
+<div>
+    <span t-if="somecondition">Some string</span>
+    <ul t-else="1">
+        <li t-foreach="messages" t-as="message">
+            <t t-esc="message">
+        </li>
+    </ul>
+</div>
+```
+
+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-widget`, `t-on`, ...
+
+## Directives
+
+We present here 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-name`                       | [Defining a template (not really a directive)](#qweb-engine) |
+
+The component system in Owl requires additional directives, to express various
+needs. Here is a list of all Owl specific directives:
+
+| Name                      | Description                                                                             |
+| ------------------------- | --------------------------------------------------------------------------------------- |
+| `t-widget`, `t-keepalive` | [Defining a sub component](component.md#composition)                                    |
+| `t-ref`                   | [Setting a reference to a dom node or a sub component](component.md#keeping-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-mounted`               | [Callback when a node or component is mounted](#component.md#t-mounted-directive)       |
 
 ## QWeb Engine
 
@@ -87,12 +118,107 @@ It's API is quite simple:
   const vnode = qweb.render("App", widget);
   ```
 
-## QWeb Specification
+- **`register(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-widget` directive). This is useful for commonly used
+  components accross the application.
+
+  ```js
+  class Dialog extends owl.Component { ... }
+  QWeb.register("Dialog", Dialog);
+
+  ...
+
+  class ParentWidget extends owl.Component { ... }
+  qweb.addTemplate("ParentWidget", "<div><t t-widget='Dialog'/></div>");
+  ```
+
+## Reference
 
 We define in this section the specification of how `QWeb` templates should be
-rendered.
+rendered. Note that we only document here the standard QWeb specification. Owl
+specific extensions are documented in various other parts of the documentation.
 
-### Static html nodes
+### White spaces
+
+White spaces in a templates are handled in a special way:
+
+- consecutive whitespaces are always condensed to a single whitespace
+- if a whitespace-only text node contains a linebreak, it is ignored
+- the previous rules do not apply if we are in a `<pre>` tag
+
+### Root nodes
+
+For many reasons, Owl QWeb templates should have a single root node. More
+precisely, the result of a template rendering should have a single root node:
+
+```xml
+<!–– not ok: two root nodes ––>
+<t>
+    <div>foo</div>
+    <div>bar</div>
+</t>
+
+<!–– ok: result has one single root node ––>
+<t>
+    <div t-if="someCondition">foo</div>
+    <span t-else="1">bar</span>
+</t>
+```
+
+Extra root nodes will actually be ignored (even though they will be rendered
+in memory).
+
+Note: this does not apply to subtemplates (see the `t-call` directive). In that
+case, they will be inlined in the main template, and can actually have many
+root nodes.
+
+### Expression evaluation
+
+It is useful to explain the various rules that applies on QWeb expressions. These
+expressions are strings that will be converted to a javascript expression at
+compile time.
+
+1. it should be a simple expression which returns a value. It cannot be a statement.
+
+   ```xml
+   <div><p t-if="1 + 2 === 3">ok</p></div>
+   ```
+
+   is valid, but the following is not valid:
+
+   ```xml
+   <div><p t-if="console.log(1)">NOT valid</p></div>
+   ```
+
+2. it can use anything in the rendering context:
+
+   ```xml
+   <p t-if="user.birthday == today()">Happy bithday!</p>
+   ```
+
+   is valid, and will read the `user` object from the context, and call the
+   `today` function.
+
+3. it can use a few special operators to avoid using symbols such as `<`, `>`,
+   `&` or `|`. This is useful to make sure that we still write valid XML.
+
+   | Word  | will be replaced by |
+   | ----- | ------------------- |
+   | `and` | `&&`                |
+   | `or`  | `\|\|`              |
+   | `gt`  | `>`                 |
+   | `gte` | `>=`                |
+   | `lt`  | `<`                 |
+   | `lte` | `<=`                |
+
+   So, one can write this:
+
+   ```xml
+   <div><p t-if="10 + 2 gt 5">ok</p></div>
+   ```
+
+### Static Html Nodes
 
 Normal, regular html nodes are rendered into themselves:
 
@@ -100,7 +226,7 @@ Normal, regular html nodes are rendered into themselves:
   <div>hello</div> <!–– rendered as itself ––>
 ```
 
-### `t-esc` directive
+### Outputting Data
 
 The `t-esc` directive is necessary whenever you want to add a dynamic text
 expression in a template. The text is escaped to avoid security issues.
@@ -115,14 +241,12 @@ rendered with the value `value` set to `42` in the rendering context yields:
 <p>42</p>
 ```
 
-### `t-raw` directive
-
 The `t-raw` directive is almost the same as `t-esc`, but without the escaping.
 This is mostly useful to inject a raw html string somewhere. Obviously, this
 is unsafe to do in general, and should only be used for strings known to be safe.
 
 ```xml
-<p><t t-esc="value"/></p>
+<p><t t-raw="value"/></p>
 ```
 
 rendered with the value `value` set to `<span>foo</span>` in the rendering context yields:
@@ -131,7 +255,7 @@ rendered with the value `value` set to `<span>foo</span>` in the rendering conte
 <p><span>foo</span></p>
 ```
 
-### `t-set` directive
+### Setting Variables
 
 QWeb allows creating variables from within the template, to memoize a computation (to use it multiple times), give a piece of data a clearer name, ...
 
@@ -163,7 +287,7 @@ This is done via the `t-set` directive, which takes the name of the variable to
 The `t-set` directive acts like a regular variable in most programming language.
 It is lexically scoped (inner nodes are sub scopes), can be shadowed, ...
 
-### `t-if` directive
+### Conditionals
 
 The `t-if` directive is useful to conditionally render something. It evaluates
 the expression given as attribute value, and then acts accordingly.
@@ -213,52 +337,7 @@ Extra conditional branching directives `t-elif` and `t-else` are also available:
 </div>
 ```
 
-### Expression evaluation
-
-It is useful to explain the various rules that applies on QWeb expressions. These
-expressions are strings that will be converted to a javascript expression at
-compile time.
-
-1. it should be a simple expression which returns a value. It cannot be a statement.
-
-   ```xml
-   <div><p t-if="1 + 2 === 3">ok</p></div>
-   ```
-
-   is valid, but the following is not valid:
-
-   ```xml
-   <div><p t-if="console.log(1)">NOT valid</p></div>
-   ```
-
-2. it can use anything in the rendering context:
-
-   ```xml
-   <p t-if="user.birthday == today()">Happy bithday!</p>
-   ```
-
-   is valid, and will read the `user` object from the context, and call the
-   `today` function.
-
-3. it can use a few special operators to avoid using symbols such as `<`, `>`,
-   `&` or `|`. This is useful to make sure that we still write valid XML.
-
-   | Word  | will be replaced by |
-   | ----- | ------------------- |
-   | `and` | `&&`                |
-   | `or`  | `\|\|`              |
-   | `gt`  | `>`                 |
-   | `gte` | `>=`                |
-   | `lt`  | `<`                 |
-   | `lte` | `<=`                |
-
-   So, one can write this:
-
-   ```xml
-   <div><p t-if="10 + 2 gt 5">ok</p></div>
-   ```
-
-### Dynamic attributes (`t-att` and `t-attf` directives)
+### Dynamic attributes
 
 One can use the `t-att-` directive to add dynamic attributes. Its main use is to
 evaluate an expression (at rendering time) and bind an attribute to its result:
@@ -279,18 +358,86 @@ There is another way to format a string attribute: the `t-attf-` directive. With
 it, you get string interpolation:
 
 ```xml
-<div t-attf-foo="a {{value1}} is {{value2}} of {{value3}} ]"/>
+<div t-attf-foo="a #{value1} is #{value2} of #{value3} ]"/>
 <!-- result if values are set to 1,2 and 3: <div foo="a 0 is 1 of 2 ]"></div> -->
 ```
 
 For historical reason, there is an alternate form of string interpolation:
 
 ```xml
-<div t-attf-foo="a #{value1} is #{value2} of #{value3} ]"/>
+<div t-attf-foo="a {{value1}} is {{value2}} of {{value3}} ]"/>
 <!-- result if values are set to 1,2 and 3: <div foo="a 0 is 1 of 2 ]"></div> -->
 ```
 
-### `t-call` directive (sub templates)
+### Loops
+
+QWeb has an iteration directive `t-foreach` which take an expression returning the
+collection to iterate on, and a second parameter `t-as` providing the name to use
+for the current item of the iteration:
+
+```xml
+<t t-foreach="[1, 2, 3]" t-as="i">
+    <p><t t-esc="i"/></p>
+</t>
+```
+
+will be rendered as:
+
+```xml
+<p>1</p>
+<p>2</p>
+<p>3</p>
+```
+
+Like conditions, `t-foreach` applies to the element bearing the directive’s attribute, and
+
+```xml
+<p t-foreach="[1, 2, 3]" t-as="i">
+    <t t-esc="i"/>
+</p>
+```
+
+is equivalent to the previous example.
+
+`t-foreach` can iterate on an array (the current item will be the current value),
+an object (the current item will be the current key) or an integer (equivalent
+to iterating on an array between 0 inclusive and the provided integer exclusive).
+
+In addition to the name passed via t-as, `t-foreach` provides a few other
+variables for various data points (note: `$as` will be replaced by the name
+passed to `t-as`):
+
+- `$as_value`: the current iteration value, identical to `$as` for lists and
+  integers, but for objects, it provides the value (where `$as` provides the key)
+- `$as_index`: the current iteration index (the first item of the iteration has index 0)
+- `$as_first`: whether the current item is the first of the iteration
+  (equivalent to `$as_index == 0`)
+- `$as_last`: whether the current item is the last of the iteration
+  (equivalent to `$as_index + 1 == $as_size`), requires the iteratee’s size be
+  available
+- `$as_parity` (deprecated): either "even" or "odd", the parity of the current
+  iteration round
+
+These extra variables provided and all new variables created into the `t-foreach`
+are only available in the scope of the `t-foreach`. If the variable exists outside
+the context of the `t-foreach`, the value is copied at the end of the foreach
+into the global context.
+
+```xml
+<t t-set="existing_variable" t-value="False"/>
+<!-- existing_variable now False -->
+
+<p t-foreach="[1, 2, 3]" t-as="i">
+    <t t-set="existing_variable" t-value="True"/>
+    <t t-set="new_variable" t-value="True"/>
+    <!-- existing_variable and new_variable now True -->
+</p>
+
+<!-- existing_variable always True -->
+<!-- new_variable undefined -->
+```
+
+### Rendering Sub Templates
 
 QWeb templates can be used for top level rendering, but they can also be used
 from within another template (to avoid duplication or give names to parts of
@@ -338,205 +485,7 @@ will result in :
 </div>
 ```
 
-## JS/OWL Specific Extensions
-
-### `t-on` directive
-
-In a component's template, it is useful to be able to register handlers on some
-elements to some specific events. This
-is what makes a template _alive_. There are two different use cases.
-
-1. Register an event handler on a DOM node
-
-   ```xml
-   <button t-on-click="someMethod">Do something</button>
-   ```
-
-   This will be roughly translated in javascript like this:
-
-   ```js
-   button.addEventListener("click", widget.someMethod.bind(widget));
-   ```
-
-   The suffix (`click` in this example) is simply the name of the actual DOM
-   event.
-
-2. Register an event handler on a component. This will not capture a DOM event,
-   but rather a _business_ event:
-
-   ```xml
-   <t t-widget="MyWidget" t-on-menuLoaded="someMethod"/>
-   ```
-
-   ```js
-   class MyWidget {
-       someWhere() {
-           const payload = ...;
-           this.trigger('menuLoaded', payload);
-       }
-   }
-   ```
-
-   Here, the parent widget will receive the payload in its `someMethod` handler,
-   whenever the event is triggered.
-
-The `t-on` directive also allows to prebind some arguments. For example,
-
-```xml
-<button t-on-click="someMethod(expr)">Do something</button>
-```
-
-Here, `expr` is a valid Owl expression, so it could be `true` or some variable
-from the rendering context.
-
-### Component: `t-widget`, `t-props`
-
-The `t-widget` and the `t-props` directives are the key to a declarative component
-system. They allow a template to define where and how a sub widget is created
-and/or updated. For example:
-
-```xml
-<div t-name="ParentWidget">
-    <t t-widget="ChildWidget" t-props="{count: state.val}"/>
-</div>
-```
-
-```js
-class ParentWidget {
-  widgets = { ChildWidget };
-  state = { val: 4 };
-}
-```
-
-Whenever the template is rendered, it will automatically create the subwidget
-`ChildWidget` at the correct place. It needs to find the reference to the
-actual component class in the special `widgets` key.
-
-In this example, the child widget will receive the object `{count: 4}` in its
-constructor. This will be assigned to the `props` variable, which can be accessed
-on the widget (and also, in the template). Whenever the state is updated, then
-the subwidget will also be updated automatically.
-
-### `t-ref` directive
-
-The `t-ref` directive helps a component keep reference to some inside part of it.
-Like the `t-on` directive, it can work either on a DOM node, or on a component:
-
-```xml
-<div>
-    <div t-ref="someDiv"/>
-    <t t-widget="SubWidget" t-ref="someWidget"/>
-</div>
-```
-
-In this example, the widget will be able to access the `div` and the component
-inside the special `refs` variable:
-
-```js
-this.refs.someDiv;
-this.refs.someWidget;
-```
-
-This is useful for various usecases: for example, integrating with an external
-library that needs to render itself inside an actual DOM node. Or for calling
-some method on a sub widget.
-
-Note: if used on a component, the reference will be set in the `refs`
-variable between `willPatch` and `patched`.
-
-### `t-key` directive
-
-Even though Owl tries to be as declarative as possible, some DOM state is still
-locked inside the DOM: for example, the scrolling state, the current user selection,
-the focused element or the state of an input. This is why we use a virtual dom
-algorithm to keep the actual DOM node as much as possible. However, this is
-sometimes not enough, and we need to help Owl decide if an element is actually
-the same, or is different. The `t-key` directive is used to give an identity to an element.
-
-There are three main use cases:
-
-- _elements in a list_:
-
-  ```xml
-    <span t-foreach="todos" t-as="todo" t-key="todo.id">
-        <t t-esc="todo.text"/>
-    </span>
-  ```
-
-- _`t-if`/`t-else`_
-
-- _animations_: give a different identity to a component. Ex: thread id with
-  animations on add/remove message.
-
-### `t-transition` directive
-
-To perform useful transition effects, whenever an element appears or disappears,
-it is necessary to add/remove some css style or class at some precise moment in
-the lifetime of a node. Since this is not easy to do by hand, Owl `t-transition`
-directive is there to help.
-
-Whenever a node has a `t-transition` directive, with a `name` value, the following
-will happen:
-
-At node creation:
-
-- the css classes `name-enter` and `name-enter-active` will be added before the
-  node is added to the DOM,
-- on the next animation frame: the css class `name-enter` will be removed and the
-  class `name-enter-to` will be added (so they can be used to trigger css
-  transition effects),
-- the css class `name-enter-active` will be removed whenever a css transition
-  ends.
-
-At node destruction:
-
-- the css classes `name-leave` and `name-leave-active` will be added before the
-  node is removed to the DOM,
-- the css class `name-leave` will be removed on the next animation frame (so it
-  can be used to trigger css transition effects),
-- the css class `name-leave-active` will be removed whenever a css transition
-  ends. Only then will the element be removed from the DOM.
-
-For example, a simple fade in/out effect can be done with this:
-
-```xml
-<div>
-    <div t-if="state.flag" class="square" t-transition="fade">Hello</div>
-</div>
-```
-
-```css
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s;
-}
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-```
-
-Note: more information on animations are available [here](doc/animations.md).
-
-### `t-mounted` directive
-
-The `t-mounted` directive allows to register a callback to execute whenever the node
-is inserted into the DOM.
-
-```xml
-<div><input t-ref="someInput" t-mounted="focusMe"/></div>
-```
-
-```js
-class MyWidget extends owl.Component {
-    ...
-    focusMe() {
-        this.refs.someInput.focus();
-    }
-}
-```
-
-### Debugging (`t-debug` and `t-log`)
+### Debugging
 
 The javascript QWeb implementation provides two useful debugging directives:
 
@@ -558,37 +507,3 @@ will stop execution if the browser dev tools are open.
 ```
 
 will print 42 to the console
-
-### White spaces
-
-White spaces in a templates are handled in a special way:
-
-- consecutive whitespaces are always condensed to a single whitespace
-- if a whitespace-only text node contains a linebreak, it is ignored
-- the previous rules do not apply if we are in a `<pre>` tag
-
-### Root nodes
-
-For many reasons, Owl QWeb templates should have a single root node. More
-precisely, the result of a template rendering should have a single root node:
-
-```xml
-<!–– not ok: two root nodes ––>
-<t>
-    <div>foo</div>
-    <div>bar</div>
-</t>
-
-<!–– ok: result has one single root node ––>
-<t>
-    <div t-if="someCondition">foo</div>
-    <span t-else="1">bar</span>
-</t>
-```
-
-Extra root nodes will actually be ignored (even though they will be rendered
-in memory).
-
-Note: this does not apply to subtemplates (see the `t-call` directive). In that
-case, they will be inlined in the main template, and can actually have many
-root nodes.

doc/readme.md

@@ -13,4 +13,5 @@
 ## Miscellaneous
 - [Quick Start](quick_start.md)
 - [Animations](animations.md)
+- [Tooling](tooling.md)
 - [Comparison with React/Vue](comparison.md)

doc/tooling.md

@@ -0,0 +1,18 @@
+# 🦉 Tooling 🦉
+
+## Development mode
+
+By default, Owl is in *production* mode, this means that it will try to do its
+job fast, and skip some expensive operations.  However, in some cases, it is
+convenient to have better information on what is going on, this is the purpose
+of the dev mode.
+
+Owl has a mode flag, in `owl.__info__.mode`.  Its default value is `prod`, but
+it can be set to `dev`:
+
+```js
+owl.__info__.mode = 'dev';
+```
+
+Note that templates compiled with the `prod` settings will not be recompiled.
+So, changing this setting is best done at startup.

doc/utils.md

@@ -10,7 +10,6 @@ functions are all available in the `owl.utils` namespace.
 - [`loadTemplates`](#loadtemplates)
 - [`escape`](#escape)
 - [`debounce`](#debounce)
-- [`patch` and `unpatch`](#patchandunpatch)
 
 ## `whenReady`
 
@@ -33,7 +32,6 @@ owl.utils.whenReady(function () {
 
 ## `debounce`
 
-## `patch` and `unpatch`
 
 
 

extras/benchmarks/owl-0.11.0/app.js

@@ -0,0 +1,84 @@
+import { buildData, startMeasure, stopMeasure } from "../shared/utils.js";
+
+//------------------------------------------------------------------------------
+// Likes Counter Widget
+//------------------------------------------------------------------------------
+class Counter extends owl.Component {
+  template = "counter";
+  state = { counter: 0 };
+
+  increment() {
+    this.state.counter++;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Message Widget
+//------------------------------------------------------------------------------
+class Message extends owl.Component {
+  template = "message";
+  widgets = { Counter };
+
+  shouldUpdate(nextProps) {
+    return nextProps !== this.props;
+  }
+  removeMessage() {
+    this.trigger("remove_message", {
+      id: this.props.id
+    });
+  }
+}
+
+//------------------------------------------------------------------------------
+// Root Widget
+//------------------------------------------------------------------------------
+class App extends owl.Component {
+  template = "root";
+  widgets = { Message };
+  state = { messages: [] };
+
+  addMessages(n) {
+    startMeasure("add " + n);
+    const newMessages = buildData(n);
+    this.state.messages.push.apply(this.state.messages, newMessages);
+    stopMeasure();
+  }
+
+  clear() {
+    startMeasure("clear");
+    this.state.messages = [];
+    stopMeasure();
+  }
+
+  updateSomeMessages() {
+    startMeasure("update every 10th");
+    const messages = this.state.messages;
+    for (let i = 0; i < this.state.messages.length; i += 10) {
+      const msg = Object.assign({}, messages[i]);
+      msg.author += '!!!';
+      this.set(messages, i, msg);
+    }
+    stopMeasure();
+  }
+
+  removeMessage(data) {
+    startMeasure("remove message");
+    const index = this.state.messages.findIndex(m => m.id === data.id);
+    this.state.messages.splice(index, 1);
+    stopMeasure();
+  }
+}
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+async function start() {
+  const templates = await owl.utils.loadTemplates("templates.xml");
+  const env = {
+    qweb: new owl.QWeb(templates)
+  };
+  const app = new App(env);
+  app.mount(document.body);
+}
+
+start();

extras/benchmarks/owl-0.11.0/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>OWL 0.11.0 Benchmark</title>
+  <link href="../shared/main.css" rel="stylesheet"/>
+  <script src='owl.js'></script>
+</head>
+<body>
+  <div id='main'></div>
+  <script src='app.js' type="module"></script>
+</body>
+</html>

extras/benchmarks/owl-0.11.0/templates.xml

@@ -0,0 +1,32 @@
+<templates>
+  <div t-name="root" class="main">
+      <div class="left-thing">
+          <div>Number of msg: <t t-esc="state.messages.length"/></div>
+          <button t-on-click="addMessages(100)">Add 100 messages</button>
+          <button t-on-click="addMessages(1000)">Add 1000 messages</button>
+          <button t-on-click="addMessages(10000)">Add 10000 messages</button>
+          <button t-on-click="addMessages(50000)">Add 50000 messages</button>
+          <button t-on-click="updateSomeMessages">Update every 10th message</button>
+          <button t-on-click="clear">Clear</button>
+      </div>
+      <div class="right-thing">
+          <div class="content">
+              <t t-foreach="state.messages" t-as="message">
+                  <t t-widget="Message" t-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
+              </t>
+          </div>
+      </div>
+  </div>
+
+  <div t-name="message" class="message">
+    <span class="author"><t t-esc="props.author"/></span>
+    <span class="msg"><t t-esc="props.msg"/></span>
+    <button class="remove" t-on-click="removeMessage">Remove</button>
+    <t t-widget="Counter"/>
+  </div>
+
+  <div t-name="counter">
+    <button t-on-click="increment">Value: <t t-esc="state.counter"/></button>
+  </div>
+
+</templates>

extras/benchmarks/owl-0.12.0/app.js

@@ -0,0 +1,84 @@
+import { buildData, startMeasure, stopMeasure } from "../shared/utils.js";
+
+//------------------------------------------------------------------------------
+// Likes Counter Widget
+//------------------------------------------------------------------------------
+class Counter extends owl.Component {
+  template = "counter";
+  state = { counter: 0 };
+
+  increment() {
+    this.state.counter++;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Message Widget
+//------------------------------------------------------------------------------
+class Message extends owl.Component {
+  template = "message";
+  widgets = { Counter };
+
+  shouldUpdate(nextProps) {
+    return nextProps !== this.props;
+  }
+  removeMessage() {
+    this.trigger("remove_message", {
+      id: this.props.id
+    });
+  }
+}
+
+//------------------------------------------------------------------------------
+// Root Widget
+//------------------------------------------------------------------------------
+class App extends owl.Component {
+  template = "root";
+  widgets = { Message };
+  state = { messages: [] };
+
+  addMessages(n) {
+    startMeasure("add " + n);
+    const newMessages = buildData(n);
+    this.state.messages.push.apply(this.state.messages, newMessages);
+    stopMeasure();
+  }
+
+  clear() {
+    startMeasure("clear");
+    this.state.messages = [];
+    stopMeasure();
+  }
+
+  updateSomeMessages() {
+    startMeasure("update every 10th");
+    const messages = this.state.messages;
+    for (let i = 0; i < this.state.messages.length; i += 10) {
+      const msg = Object.assign({}, messages[i]);
+      msg.author += '!!!';
+      this.set(messages, i, msg);
+    }
+    stopMeasure();
+  }
+
+  removeMessage(data) {
+    startMeasure("remove message");
+    const index = this.state.messages.findIndex(m => m.id === data.id);
+    this.state.messages.splice(index, 1);
+    stopMeasure();
+  }
+}
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+async function start() {
+  const templates = await owl.utils.loadTemplates("templates.xml");
+  const env = {
+    qweb: new owl.QWeb(templates)
+  };
+  const app = new App(env);
+  app.mount(document.body);
+}
+
+start();

extras/benchmarks/owl-0.12.0/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>OWL 0.12.0 Benchmark</title>
+  <link href="../shared/main.css" rel="stylesheet"/>
+  <script src='owl.js'></script>
+</head>
+<body>
+  <div id='main'></div>
+  <script src='app.js' type="module"></script>
+</body>
+</html>

extras/benchmarks/owl-0.12.0/templates.xml

@@ -0,0 +1,32 @@
+<templates>
+  <div t-name="root" class="main">
+      <div class="left-thing">
+          <div>Number of msg: <t t-esc="state.messages.length"/></div>
+          <button t-on-click="addMessages(100)">Add 100 messages</button>
+          <button t-on-click="addMessages(1000)">Add 1000 messages</button>
+          <button t-on-click="addMessages(10000)">Add 10000 messages</button>
+          <button t-on-click="addMessages(50000)">Add 50000 messages</button>
+          <button t-on-click="updateSomeMessages">Update every 10th message</button>
+          <button t-on-click="clear">Clear</button>
+      </div>
+      <div class="right-thing">
+          <div class="content">
+              <t t-foreach="state.messages" t-as="message">
+                  <t t-widget="Message" t-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
+              </t>
+          </div>
+      </div>
+  </div>
+
+  <div t-name="message" class="message">
+    <span class="author"><t t-esc="props.author"/></span>
+    <span class="msg"><t t-esc="props.msg"/></span>
+    <button class="remove" t-on-click="removeMessage">Remove</button>
+    <t t-widget="Counter"/>
+  </div>
+
+  <div t-name="counter">
+    <button t-on-click="increment">Value: <t t-esc="state.counter"/></button>
+  </div>
+
+</templates>

extras/benchmarks/owl-master/templates.xml

@@ -12,7 +12,7 @@
       <div class="right-thing">
           <div class="content">
               <t t-foreach="state.messages" t-as="message">
-                  <t t-widget="Message" t-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
+                  <t t-widget="Message" t-key="message.id" message="message" t-on-remove_message="removeMessage"/>
               </t>
           </div>
       </div>

extras/index.html

@@ -3,27 +3,46 @@
 <head>
   <meta charset="UTF-8">
   <title>OWL Extras</title>
+    <link rel="stylesheet" href="main.css">
 </head>
 <body>
-  <h1>🦉 OWL Extra Stuff 🦉</h1>
 
+    <div class="title">
+        <h1>🦉 OWL Extra Stuff 🦉</h1>
+        <div>Mysterious OWL: A web framework for structured, dynamic and maintainable applications</div>
+    </div>
 
-  <h2>Benchmarks</h2>
-  <p>The goal is to compare some operations on large lists</p>
+    <div class="section misc">
+        <h2>Misc</h2>
+        <div class="links">
+            <a href="playground">Playground (local)</a>
+            <a href="https://github.com/odoo/owl">Github</a>
+            <a href="https://odoo.github.io/owl/">Owl main page</a>
+            <a href="https://github.com/odoo/owl/blob/master/doc/readme.md">Owl Documentation</a>
+        </div>
+    </div>
 
-  <ul>
-    <li><a href="benchmarks/odoo-widgets-12.0">Odoo Widgets (12.0)</a></li>
-    <li><a href="benchmarks/odoo-widgets-12.3">Odoo Widgets (12.3)</a></li>
-    <li><a href="benchmarks/owl-0.7.0">OWL 0.7.0</a></li>
-    <li><a href="benchmarks/owl-0.8.0">OWL 0.8.0</a></li>
-    <li><a href="benchmarks/owl-0.9.0">OWL 0.9.0</a></li>
-    <li><a href="benchmarks/owl-0.10.0">OWL 0.10.0</a></li>
-    <li><a href="benchmarks/owl-master">OWL Master</a></li>
-    <li><a href="benchmarks/vue">Vue</a></li>
-    <li><a href="benchmarks/react">React</a></li>
-  </ul>
+    <div class="section">
+        <h2>Benchmarks</h2>
+
+        <div class="benchmarks">
+            <ul>
+                <li><a href="benchmarks/owl-0.7.0">OWL 0.7.0</a></li>
+                <li><a href="benchmarks/owl-0.8.0">OWL 0.8.0</a></li>
+                <li><a href="benchmarks/owl-0.9.0">OWL 0.9.0</a></li>
+                <li><a href="benchmarks/owl-0.10.0">OWL 0.10.0</a></li>
+                <li><a href="benchmarks/owl-0.11.0">OWL 0.11.0</a></li>
+                <li><a href="benchmarks/owl-0.12.0">OWL 0.12.0</a></li>
+                <li><a href="benchmarks/owl-master">OWL Master</a></li>
+            </ul>
+            <ul>
+                <li><a href="benchmarks/odoo-widgets-12.0">Odoo Widgets (12.0)</a></li>
+                <li><a href="benchmarks/odoo-widgets-12.3">Odoo Widgets (12.3)</a></li>
+                <li><a href="benchmarks/vue">Vue</a></li>
+                <li><a href="benchmarks/react">React</a></li>
+            </ul>
+        </div>
+    </div>
 
-  <h2>Playground</h2>
-  <a href="playground">Playground</a>
 </body>
 </html>

extras/main.css

@@ -0,0 +1,30 @@
+body {
+  font-family: sans-serif;
+}
+
+.title,
+.section {
+  width: 768px;
+  margin: auto;
+}
+
+.title div {
+  color: #333333;
+  font-style: italic;
+}
+
+.section {
+  background-color: #d5d5d5;
+  padding: 16px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.links a {
+  margin: 10px 5px;
+}
+
+.benchmarks {
+  display: grid;
+  grid-template-columns: auto auto;
+}

extras/playground/app.js

@@ -39,26 +39,32 @@ const DEFAULT_HTML = `<!DOCTYPE html>
 </html>
 `;
 
-const APP_PY = `import sys
-import thread
-import webbrowser
+const APP_PY = `#!/usr/bin/env python3
+
+import threading
 import time
 
-import BaseHTTPServer, SimpleHTTPServer
+from http.server import SimpleHTTPRequestHandler, HTTPServer
 
 def start_server():
-    httpd = BaseHTTPServer.HTTPServer(('127.0.0.1', 3600), SimpleHTTPServer.SimpleHTTPRequestHandler)
+    SimpleHTTPRequestHandler.extensions_map['.js'] = 'application/javascript'
+    httpd = HTTPServer(('0.0.0.0', 3600), SimpleHTTPRequestHandler)
     httpd.serve_forever()
 
-thread.start_new_thread(start_server,())
 url = 'http://127.0.0.1:3600'
-webbrowser.open_new(url)
 
-while True:
-    try:
-        time.sleep(1)
-    except KeyboardInterrupt:
-        sys.exit(0)
+if __name__ == "__main__":
+    print("Owl Application")
+    print("---------------")
+    print("Server running on: {}".format(url))
+    threading.Thread(target=start_server, daemon=True).start()
+
+    while True:
+        try:
+            time.sleep(1)
+        except KeyboardInterrupt:
+            httpd.server_close()
+            quit(0)
 `;
 
 /**
@@ -84,7 +90,7 @@ function makeCodeIframe(js, css, xml, errorHandler) {
     owlScript.addEventListener("load", () => {
       const script = doc.createElement("script");
       script.type = "text/javascript";
-      const content = `window.TEMPLATES = \`${sanitizedXML}\`\n${js}`;
+      const content = `owl.__info__.mode = 'dev';\nwindow.TEMPLATES = \`${sanitizedXML}\`\n${js}`;
       script.innerHTML = content;
       iframe.contentWindow.addEventListener("error", errorHandler);
       iframe.contentWindow.addEventListener("unhandledrejection", errorHandler);
@@ -153,7 +159,7 @@ owl.utils.whenReady(startApp);`;
 class App extends owl.Component {
   constructor(...args) {
     super(...args);
-    this.version = owl._version;
+    this.version = owl.__info__.version;
     this.SAMPLES = SAMPLES;
     this.widgets = { TabbedEditor };
 
@@ -242,20 +248,20 @@ class App extends owl.Component {
     });
   }
   updateCode(ev) {
-    this.state[ev.type] = ev.value;
+    this.state[ev.detail.type] = ev.detail.value;
   }
   toggleLayout() {
     this.state.splitLayout = !this.state.splitLayout;
   }
   updatePanelHeight(ev) {
-    if (!ev.delta) {
+    if (!ev.detail.delta) {
       return;
     }
     let height = this.state.topPanelHeight;
     if (!height) {
       height = document.getElementsByClassName("tabbed-editor")[0].clientHeight;
     }
-    this.state.topPanelHeight = height + ev.delta;
+    this.state.topPanelHeight = height + ev.detail.delta;
   }
 
   async downloadCode() {
@@ -287,10 +293,11 @@ class TabbedEditor extends owl.Component {
         this.sessions[tab].setUndoManager(new ace.UndoManager());
       }
     }
+    this.editor = null;
   }
 
   mounted() {
-    this.editor = ace.edit(this.refs.editor);
+    this.editor = this.editor || ace.edit(this.refs.editor);
 
     this.editor.setValue(this.props[this.state.currentTab], -1);
     this.editor.setFontSize("12px");
@@ -314,20 +321,16 @@ class TabbedEditor extends owl.Component {
     const session = this.sessions[this.state.currentTab];
     session.setValue(this.props[this.state.currentTab], -1);
     this.editor.setSession(session);
-  }
-
-  willUnmount() {
-    this.editor.destroy();
-    delete this.editor;
+    this.editor.resize();
   }
 
   setTab(tab) {
-      if (this.state.currentTab !== tab) {
-        this.state.currentTab = tab;
-        const session = this.sessions[this.state.currentTab];
-        session.doc.setValue(this.props[tab], -1);
-        this.editor.setSession(session);
-      }
+    if (this.state.currentTab !== tab) {
+      this.state.currentTab = tab;
+      const session = this.sessions[this.state.currentTab];
+      session.doc.setValue(this.props[tab], -1);
+      this.editor.setSession(session);
+    }
   }
 
   onMouseDown(ev) {
@@ -349,7 +352,7 @@ class TabbedEditor extends owl.Component {
 //------------------------------------------------------------------------------
 // Application initialization
 //------------------------------------------------------------------------------
-document.title = `${document.title} (v${owl._version})`;
+document.title = `${document.title} (v${owl.__info__.version})`;
 document.addEventListener("DOMContentLoaded", async function() {
   const templates = await owl.utils.loadTemplates("templates.xml");
   const qweb = new owl.QWeb(templates);

extras/playground/playground.css

@@ -185,4 +185,6 @@ body {
   font-size: 30px;
   color: darkred;
   text-align: center;
+  padding-left: 30px;
+  padding-right: 30px;
 }

extras/playground/samples.js

@@ -40,31 +40,34 @@ const counter = new ClickCounter({ qweb });
 counter.mount(document.body);
 `;
 
-const WIDGET_COMPOSITION = `class ClickCounter extends owl.Component {
-    constructor(parent, props) {
-        super(parent, props);
-        this.state = { value: props.initialState || 0 };
-    }
+const WIDGET_COMPOSITION = `// This example will not work if your browser does not support ESNext class fields
+
+class ClickCounter extends owl.Component {
+    state = { value: 0 };
 
     increment() {
         this.state.value++;
     }
 }
 
-let nextId = 1;
-
-class App extends owl.Component {
-    constructor() {
-        super(...arguments);
-        this.state = { counters: [] }
-        this.widgets = { ClickCounter };
-    }
-
-    addCounter() {
-        this.state.counters.push(nextId++);
+class InputWidget extends owl.Component {
+    state = {text: ""};
+    
+    updateVal(event) {
+        let value = event.target.value;
+        if (this.props.reverse) {
+            value = value.split("").reverse().join("");
+        }
+        this.state.text = value
     }
 }
 
+// Main root widget
+class App extends owl.Component {
+    widgets = {ClickCounter, InputWidget};
+}
+
+// Application setup
 const qweb = new owl.QWeb(TEMPLATES);
 const app = new App({ qweb });
 app.mount(document.body);
@@ -75,29 +78,49 @@ const WIDGET_COMPOSITION_XML = `<templates>
       Click Me! [<t t-esc="state.value"/>]
     </button>
 
+   <div t-name="InputWidget">
+     <input t-on-input="updateVal" placeholder="type here some text..."/>
+     <span><t t-esc="state.text"/></span>
+    </div>
+
   <div t-name="App">
-      <div><button t-on-click="addCounter">Add a counter</button></div>
-      <div>
-        <t t-foreach="state.counters" t-as="counter">
-          <t t-widget="ClickCounter" t-key="counter" t-props="{initialState: counter}"/>
-        </t>
-      </div>
+      <t t-widget="ClickCounter"/>
+      <t t-widget="InputWidget" reverse="true"/>
   </div>
 </templates>`;
 
-const WIDGET_COMPOSITION_CSS = `button {
-    color: darkred;
-    font-size: 30px;
+const WIDGET_COMPOSITION_CSS = `button, input {
+    font-size: 20px;
     width: 220px;
+    margin: 5px;
 }`;
 
 const ANIMATION = `// This example will not work if your browser does not support ESNext class fields
+class ClickCounter extends owl.Component {
+    state = { value: 0 };
+
+    increment() {
+        this.state.value++;
+    }
+}
+
 class App extends owl.Component {
-    state = {flag: 0};
+    state = {flag: false, widgetFlag: false, numbers: []};
+    widgets = {ClickCounter};
 
     toggle() {
         this.state.flag = !this.state.flag;
     }
+
+    toggleWidget() {
+        this.state.widgetFlag = !this.state.widgetFlag;
+    }
+
+    addNumber() {
+        const n = this.state.numbers.length + 1;
+        this.state.numbers.push(n);
+    }
+
 }
 
 const qweb = new owl.QWeb(TEMPLATES);
@@ -106,33 +129,82 @@ app.mount(document.body);
 `;
 
 const ANIMATION_XML = `<templates>
-  <div t-name="App">
-    <button t-on-click="toggle">
-      Click Me!
+   <button t-name="ClickCounter" t-on-click="increment" class="clickcounter">
+      Click Me! [<t t-esc="state.value"/>]
     </button>
-    <div>
-      <div t-if="state.flag" class="square" t-transition="fade">Hello</div>
+
+    <div t-name="App">
+
+    <h2>Transition on DOM element</h2>
+
+    <div class="demo">
+      <button t-on-click="toggle">Toggle square</button>
+      <div>
+        <div t-if="state.flag" class="square" t-transition="fade">Hello</div>
+      </div>
     </div>
+
+    <h2>Transition on sub widgets</h2>
+
+    <div class="demo">
+      <button t-on-click="toggleWidget">
+       Toggle widget
+      </button>
+      <div>
+        <t t-widget="ClickCounter" t-if="state.widgetFlag" t-transition="fade"/>
+      </div>
+    </div>
+
+    <h2>Transition on lists</h2>
+    <p>Transitions can also be applied on lists</p>
+    <div class="demo">
+      <button t-on-click="addNumber">Add a number</button>
+      <div>
+        <t t-foreach="state.numbers" t-as="n">
+          <span t-transition="fade" class="numberspan"><t t-esc="n"/></span>
+        </t>
+      </div>
+    </div>
+
+    <h2>Simple CSS animation</h2>
+    <p>Remember, normal CSS still apply: for example, a simple flash animation with pure css </p>
+    <div><a class="btn flash">Click</a></div>
   </div>
 </templates>
 `;
 
 const ANIMATION_CSS = `button {
-    width: 100px;
-    height: 30px;
-    font-size: 20px;
+    font-size: 18px;
+    height: 35px;
 }
+.btn {
+    cursor: pointer;
+    padding: 5px;
+    margin: 5px;
+    background-color: #dddddd;
+}
+
+
+.flash {
+    background-position: center;
+    transition: background 0.5s;
+}
+
+.flash:active {
+  background-color: gray;
+  transition: background 0s;
+}
+
 
 .square {
     background-color: red;
     width: 100px;
-    height: 100px;
+    height: 70px;
     color: white;
-    margin: 20px;
+    margin: 0 20px;
     font-size: 24px;
-    line-height: 100px;
+    line-height: 70px;
     text-align: center;
-    line-height: 100px;
 }
 
 .fade-enter-active, .fade-leave-active {
@@ -141,6 +213,24 @@ const ANIMATION_CSS = `button {
 .fade-enter, .fade-leave-to {
     opacity: 0;
 }
+
+.demo {
+    display: flex;
+    height: 80px;
+}
+
+.clickcounter {
+    margin-left: 20px;
+    height: 50px;
+    background-color: blue;
+    color: white;
+}
+
+.numberspan {
+    border: 1px solid green;
+    margin: 5px;
+    padding: 5px;
+}
 `;
 
 
@@ -197,188 +287,12 @@ const LIFECYCLE_DEMO_XML = `<templates>
         <button t-on-click="increment">Increment</button>
         <button t-on-click="toggleSubWidget">ToggleSubWidget</button>
         <div t-if="state.flag">
-            <t t-widget="HookWidget" t-props="{n:state.n}"/>
+            <t t-widget="HookWidget" n="state.n"/>
         </div>
     </div>
     <div t-name="HookWidget" t-on-click="increment">Demo Sub Widget. Props: <t t-esc="props.n"/>. State: <t t-esc="state.n"/>. (click on me to update me)</div>
 </templates>`;
 
-const BENCHMARK_APP = `//------------------------------------------------------------------------------
-// Generating demo data
-//------------------------------------------------------------------------------
-const messages = [];
-const authors = ["Aaron", "David", "Vincent"];
-const content = [
-    "Lorem ipsum dolor sit amet",
-    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
-    "Excepteur sint occaecat cupidatat non proident"
-];
-
-function chooseRandomly(array) {
-    const index = Math.floor(Math.random() * array.length);
-    return array[index];
-}
-
-for (let i = 1; i < 16000; i++) {
-    messages.push({
-        id: i,
-        author: chooseRandomly(authors),
-        msg: \`\${i}: \${chooseRandomly(content)}\`,
-        likes: 0
-    });
-}
-
-//------------------------------------------------------------------------------
-// Counter Widget
-//------------------------------------------------------------------------------
-class Counter extends owl.Component {
-    constructor(parent, props) {
-        super(parent, props);
-        this.state = { counter: props.initialState || 0 };
-    }
-
-    increment(delta) {
-        this.state.counter += delta;
-    }
-}
-
-//------------------------------------------------------------------------------
-// Message Widget
-//------------------------------------------------------------------------------
-class Message extends owl.Component {
-    constructor() {
-        super(...arguments);
-        this.widgets = { Counter };
-    }
-
-    removeMessage() {
-        this.trigger("remove_message", {
-            id: this.props.id
-        });
-    }
-}
-
-//------------------------------------------------------------------------------
-// Root Widget
-//------------------------------------------------------------------------------
-class App extends owl.Component {
-    constructor() {
-        super(...arguments);
-        this.widgets = { Message };
-        this.state = { messages: messages.slice(0, 10) };
-    }
-
-    setMessageCount(n) {
-        this.state.messages = messages.slice(0, n);
-    }
-
-    removeMessage(data) {
-        const index = messages.findIndex(m => m.id === data.id);
-        this.state.messages.splice(index, 1);
-    }
-
-    increment(delta) {
-        const n = this.state.messages.length + delta;
-        this.setMessageCount(n);
-    }
-}
-
-//------------------------------------------------------------------------------
-// Application initialization
-//------------------------------------------------------------------------------
-const env = {
-    qweb: new owl.QWeb(TEMPLATES)
-};
-
-const app = new App(env);
-app.mount(document.body);
-`;
-
-const BENCHMARK_APP_CSS = `.main {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-
-  display: grid;
-  grid-template-columns: 220px 1fr;
-}
-
-.left-thing {
-  background-color: gray;
-  padding: 20px;
-}
-
-.left-thing button {
-  width: 100%;
-}
-
-.left-thing .counter span {
-  color: white;
-}
-
-.left-thing .counter button {
-  width: 40px;
-}
-
-.right-thing {
-  padding: 20px;
-  overflow: auto;
-}
-
-/* Message widget */
-.message .author {
-  font-weight: bold;
-}
-
-.message {
-  width: 400px;
-  background-color: lightblue;
-  margin: 10px 5px;
-  border-radius: 5px;
-  padding: 5px;
-}`;
-
-const BENCHMARK_APP_XML = `<templates>
-  <div t-name="App" class="main">
-      <div class="left-thing">
-          <div class="counter">
-              <button t-on-click="increment(-1)">-</button>
-              <span style="font-weight:bold">Value: <t t-esc="state.messages.length"/></span>
-              <button t-on-click="increment(1)">+</button>
-          </div>
-          <button t-on-click="setMessageCount(10)">10 messages</button>
-          <button t-on-click="setMessageCount(20)">20 messages</button>
-          <button t-on-click="setMessageCount(500)">500 messages</button>
-          <button t-on-click="setMessageCount(1000)">1000 messages</button>
-          <button t-on-click="setMessageCount(5000)">5000 messages</button>
-          <button t-on-click="setMessageCount(15000)">15000 messages</button>
-      </div>
-      <div class="right-thing">
-          <div class="content">
-              <t t-foreach="state.messages" t-as="message">
-                  <t t-widget="Message" t-att-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
-              </t>
-          </div>
-      </div>
-  </div>
-
-  <div t-name="Message" class="message">
-    <span class="author"><t t-esc="props.author"/></span>
-    <span class="msg"><t t-esc="props.msg"/></span>
-    <button class="remove" t-on-click="removeMessage">Remove</button>
-    <t t-widget="Counter" t-props="{initialState: props.id}"/>
-  </div>
-
-  <div t-name="Counter">
-    <button t-on-click="increment(-1)">-</button>
-    <span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
-    <button t-on-click="increment(1)">+</button>
-  </div>
-
-</templates>`;
-
 const TODO_APP_STORE = `const ENTER_KEY = 13;
 const ESC_KEY = 27;
 const LOCALSTORAGE_KEY = "todos-odoo";
@@ -601,7 +515,7 @@ const TODO_APP_STORE_XML = `<templates>
       <label for="toggle-all"></label>
       <ul class="todo-list">
         <t t-foreach="visibleTodos" t-as="todo">
-          <t t-widget="TodoItem" t-key="todo.id" t-props="todo"/>
+          <t t-widget="TodoItem" t-key="todo.id" id="todo.id" completed="todo.completed" title="todo.title"/>
         </t>
       </ul>
     </section>
@@ -637,7 +551,7 @@ const TODO_APP_STORE_XML = `<templates>
       </label>
       <button class="destroy" t-on-click="removeTodo"></button>
     </div>
-    <input class="edit" t-ref="'input'" t-if="state.isEditing" t-att-value="props.title" t-on-keyup="handleKeyup" t-mounted="focusInput" t-on-blur="handleBlur"/>
+    <input class="edit" t-ref="input" t-if="state.isEditing" t-att-value="props.title" t-on-keyup="handleKeyup" t-mounted="focusInput" t-on-blur="handleBlur"/>
   </li>
 </templates>`;
 
@@ -1205,12 +1119,6 @@ export const SAMPLES = [
     code: LIFECYCLE_DEMO,
     xml: LIFECYCLE_DEMO_XML
   },
-  {
-    description: "Benchmark application",
-    code: BENCHMARK_APP,
-    css: BENCHMARK_APP_CSS,
-    xml: BENCHMARK_APP_XML
-  },
   {
     description: "Todo List App (with store)",
     code: TODO_APP_STORE,

extras/playground/templates.xml

@@ -2,16 +2,18 @@
   <div t-name="TabbedEditor" class="tabbed-editor">
     <div class="tabBar" t-att-class="{resizeable: props.resizeable}" t-on-mousedown="onMouseDown">
         <t t-foreach="['js', 'xml', 'css']" t-as="tab">
-            <a t-ref="tab" t-if="props[tab]" class="tab flash" t-att-class="{active: state.currentTab===tab}" t-on-click="setTab(tab)">
+            <a t-ref="{{tab}}" t-if="props[tab]" t-key="tab" class="tab flash" t-att-class="{active: state.currentTab===tab}" t-on-click="setTab(tab)">
                 <t t-esc="tab"/>
             </a>
         </t>
     </div>
-    <div class="code-editor" t-ref="'editor'"></div>
+    <div class="code-editor" t-ref="editor"></div>
   </div>
 
   <div t-name="App" class="playground">
-      <div class="left-bar" t-att-style="leftPaneStyle" t-att-class="{split: state.splitLayout}">
+      <div class="left-bar" t-att-class="{split: state.splitLayout}"
+           t-att-style="leftPaneStyle"
+           t-on-updateCode="updateCode">
         <div class="menubar">
           <a class="btn run-code flash" t-on-click="runCode" title="Execute this Code">▶ Run</a>
           <select t-on-change="setSample">
@@ -22,20 +24,20 @@
           <a class="btn flash" t-on-click="downloadCode" title="Download a Zip with this Code"><i class="fas fa-download"></i></a>
           <a class="layout-selector flash" t-on-click="toggleLayout" title="Toggle Layout"><i class="fas"  t-att-class="state.splitLayout ?  'fa-toggle-on' : 'fa-toggle-off'"></i></a>
         </div>
+        <t t-widget="TabbedEditor"
+            js="state.js"
+            css="!state.splitLayout and state.css"
+            xml="!state.splitLayout and state.js"
+            t-att-style="topEditorStyle"/>
         <t t-if="state.splitLayout">
-          <t t-widget="TabbedEditor"
-             t-props="{js:state.js, css:false, xml: false}"
-             t-on-updateCode="updateCode"
-             t-att-style="topEditorStyle"/>
           <div class="separator horizontal"/>
           <t t-widget="TabbedEditor" t-keepalive="1"
-             t-props="{js:false, css:state.css, xml: state.xml, resizeable: true}"
-             t-on-updateCode="updateCode"
+             js="false"
+             css="state.css"
+             xml="state.xml"
+             resizeable="true"
              t-on-updatePanelHeight="updatePanelHeight"/>
         </t>
-        <t t-else="1">
-          <t t-widget="TabbedEditor" t-props="{js:state.js, css:state.css, xml: state.xml, display: 'js|xml|css'}" t-on-updateCode="updateCode"/>
-        </t>
       </div>
       <div class="separator vertical" t-on-mousedown="onMouseDown"/>
       <div class="right-pane"  t-att-style="rightPaneStyle">
@@ -48,7 +50,7 @@
         <div t-if="state.error" class="error">
           <t t-esc="state.error"/>
         </div>
-        <div class="content" t-ref="'content'"/>
+        <div class="content" t-ref="content"/>
       </div>
   </div>
 </templates>

extras/server.py

@@ -1,10 +1,8 @@
-import sys
-import thread
-import webbrowser
-import time
+#!/usr/bin/env python3
 
-import BaseHTTPServer
-import SimpleHTTPServer
+import threading
+import time
+from http.server import SimpleHTTPRequestHandler, HTTPServer
 
 HOST = '127.0.0.1'
 PORT = 8000
@@ -15,24 +13,34 @@ URL = 'http://{0}:{1}/extras'.format(HOST, PORT)
 # in dist/.  This is useful for the benchmarks and playground applications.
 # With this, we can simply copy the playground folder as is in the gh-page when
 # we want to update the playground.
-class OWLHandler(SimpleHTTPServer.SimpleHTTPRequestHandler):
+class OWLHandler(SimpleHTTPRequestHandler):
     def do_GET(self):
         if self.path == '/extras/owl.js':
             self.path = '/dist/owl.js'
-        return SimpleHTTPServer.SimpleHTTPRequestHandler.do_GET(self)
+        return SimpleHTTPRequestHandler.do_GET(self)
+
+    def end_headers(self):
+        self.disable_cache_headers()
+        SimpleHTTPRequestHandler.end_headers(self)
+
+    def disable_cache_headers(self):
+        self.send_header("Cache-Control", "no-cache, no-store, must-revalidate")
+        self.send_header("Pragma", "no-cache")
+        self.send_header("Expires", "0")
 
 
-def start_server():
-    httpd = BaseHTTPServer.HTTPServer((HOST, PORT), OWLHandler)
-    httpd.serve_forever()
-
+OWLHandler.extensions_map['.js'] = 'application/javascript'
 
 if __name__ == "__main__":
-    thread.start_new_thread(start_server, ())
-    webbrowser.open_new(URL)
+    print("Owl Extras")
+    print("----------")
+    print("Server running on: {}".format(URL))
+    httpd = HTTPServer((HOST, PORT), OWLHandler)
+    threading.Thread(target=httpd.serve_forever, daemon=True).start()
 
     while True:
         try:
             time.sleep(1)
         except KeyboardInterrupt:
-            sys.exit(0)
+            httpd.server_close()
+            quit(0)

package.json

@@ -1,17 +1,18 @@
 {
   "name": "owl",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "Odoo Web Library (OWL)",
   "main": "src/index.ts",
   "scripts": {
-    "build:js": "tsc --target esnext --module es6 --outDir dist/owl src/*",
+    "build:js": "tsc --target esnext --module es6 --outDir dist/owl",
     "build:bundle": "rollup -c",
     "build": "npm run build:js && npm run build:bundle",
     "minify": "uglifyjs dist/owl.js -o dist/owl.min.js --compress --mangle",
     "test": "jest",
     "test:watch": "jest --watch",
-    "extras:serve": "python extras/server.py",
+    "extras:serve": "python3 extras/server.py || python extras/server.py",
     "extras": "npm run build && npm run extras:serve",
+    "preextras:watch": "npm run build",
     "extras:watch": "npm-run-all  --parallel extras:serve \"build:* -- --watch\""
   },
   "repository": {
@@ -34,16 +35,13 @@
     "rollup": "^1.6.0",
     "rollup-plugin-typescript2": "^0.20.1",
     "sass": "^1.16.1",
-    "snabbdom-to-html": "^5.1.1",
     "source-map-support": "^0.5.10",
     "ts-jest": "^23.10.5",
     "typescript": "^3.2.2",
-    "uglify-es": "^3.3.9"
-  },
-  "dependencies": {
-    "jest-environment-jsdom": "^24.7.1",
-    "snabbdom": "^0.7.3"
+    "uglify-es": "^3.3.9",
+    "jest-environment-jsdom": "^24.7.1"
   },
+  "dependencies": {},
   "jest": {
     "roots": [
       "<rootDir>/src",

rollup.config.js

@@ -9,6 +9,6 @@ export default {
     format: "iife",
     name: "owl",
     extend: true,
-    outro: `exports._version = '${version}';\nexports._date = '${new Date().toISOString()}';\nexports._hash = '${git.short()}';\nexports._url = 'https://github.com/odoo/owl';`
+    outro: `exports.__info__.version = '${version}';\nexports.__info__.date = '${new Date().toISOString()}';\nexports.__info__.hash = '${git.short()}';\nexports.__info__.url = 'https://github.com/odoo/owl';`
   }
 };

src/component.ts

@@ -1,4 +1,3 @@
-import { EventBus } from "./event_bus";
 import { Observer } from "./observer";
 import { QWeb, CompiledTemplate } from "./qweb_core";
 import { h, patch, VNode } from "./vdom";
@@ -18,10 +17,24 @@ import { h, patch, VNode } from "./vdom";
 // Types/helpers
 //------------------------------------------------------------------------------
 
+/**
+ * An Env (environment) is an object that will be (mostly) shared between all
+ * components of an Owl application.  It is the location which should contain
+ * the qweb instance necessary to render all components.
+ *
+ * Note that it is totally fine to extend the environment with application
+ * specific keys/objects/whatever.  For example, a key `isMobile` (to declare
+ * if we are in "mobile" mode), or a shared bus could be useful.
+ */
 export interface Env {
   qweb: QWeb;
 }
 
+/**
+ * This is mostly an internal detail of implementation. The Meta interface is
+ * useful to typecheck and describe the internal keys used by Owl to manage the
+ * component tree.
+ */
 export interface Meta<T extends Env, Props> {
   readonly id: number;
   vnode: VNode | null;
@@ -53,14 +66,14 @@ const TEMPLATE_MAP: { [key: number]: { [name: string]: string } } = {};
 //------------------------------------------------------------------------------
 let nextId = 1;
 
-export class Component<
-  T extends Env,
-  Props extends {},
-  State extends {}
-> extends EventBus {
+export class Component<T extends Env, Props extends {}, State extends {}> {
   readonly __owl__: Meta<Env, Props>;
   template?: string;
 
+  /**
+   * The `el` is the root element of the widget.  Note that it could be null:
+   * this is the case if the widget is not mounted yet, or is destroyed.
+   */
   get el(): HTMLElement | null {
     return this.__owl__.vnode ? (<any>this).__owl__.vnode.elm : null;
   }
@@ -68,6 +81,11 @@ export class Component<
   env: T;
   state?: State;
   props: Props;
+
+  // type of props is not easily representable in typescript...
+  static props?: any;
+  static defaultProps?: any;
+
   refs: {
     [key: string]: Component<T, any, any> | HTMLElement | undefined;
   } = {};
@@ -96,8 +114,13 @@ export class Component<
    * the t-widget directive in a template)
    */
   constructor(parent: Component<T, any, any> | T, props?: Props) {
-    super();
-
+    const defaultProps = (<any>this.constructor).defaultProps;
+    if (defaultProps) {
+      props = this._applyDefaultProps(props, defaultProps);
+    }
+    if (QWeb.dev) {
+      this._validateProps(props || {});
+    }
     // is this a good idea?
     //   Pro: if props is empty, we can create easily a widget
     //   Con: this is not really safe
@@ -208,10 +231,16 @@ export class Component<
   // Public
   //--------------------------------------------------------------------------
 
+  /**
+   * Mount the component to a target element.
+   *
+   * This should only be done if the component was created manually. Components
+   * created declaratively in templates are managed by the Owl system.
+   */
   async mount(target: HTMLElement): Promise<void> {
     const vnode = await this._prepare();
     if (this.__owl__.isDestroyed) {
-      // widget was destroyed before we get here...
+      // component was destroyed before we get here...
       return;
     }
     this._patch(vnode);
@@ -222,33 +251,6 @@ export class Component<
     }
   }
 
-  _callMounted() {
-    const children = this.__owl__.children;
-    for (let id in children) {
-      const comp = children[id];
-      if (!comp.__owl__.isMounted && this.el!.contains(comp.el)) {
-        comp._callMounted();
-      }
-    }
-    this.__owl__.isMounted = true;
-    for (let key in this.__owl__.mountedHandlers) {
-      this.__owl__.mountedHandlers[key]();
-    }
-    this.mounted();
-  }
-
-  _callWillUnmount() {
-    this.willUnmount();
-    this.__owl__.isMounted = false;
-    const children = this.__owl__.children;
-    for (let id in children) {
-      const comp = children[id];
-      if (comp.__owl__.isMounted) {
-        comp._callWillUnmount();
-      }
-    }
-  }
-
   unmount() {
     if (this.__owl__.isMounted) {
       this._callWillUnmount();
@@ -257,7 +259,8 @@ export class Component<
   }
 
   async render(force: boolean = false, patchQueue?: any[]): Promise<void> {
-    if (!this.__owl__.isMounted) {
+    const __owl__ = this.__owl__;
+    if (!__owl__.isMounted) {
       return;
     }
     const shouldPatch: boolean = !patchQueue;
@@ -265,62 +268,54 @@ export class Component<
       patchQueue = [];
     }
     const renderVDom = this._render(force, patchQueue);
-    const renderId = this.__owl__.renderId;
+    const renderId = __owl__.renderId;
     await renderVDom;
 
-    if (
-      shouldPatch &&
-      this.__owl__.isMounted &&
-      renderId === this.__owl__.renderId
-    ) {
+    if (shouldPatch && __owl__.isMounted && renderId === __owl__.renderId) {
       // we only update the vnode and the actual DOM if no other rendering
       // occurred between now and when the render method was initially called.
-      for (let i = 0; i < patchQueue!.length; i++) {
+      const patchLen = patchQueue!.length;
+      for (let i = 0; i < patchLen; i++) {
         const patch = patchQueue![i];
         patch.push(patch[0].willPatch());
       }
-      for (let i = 0; i < patchQueue!.length; i++) {
+      for (let i = 0; i < patchLen; i++) {
         const patch = patchQueue![i];
         patch[0]._patch(patch[1]);
       }
 
-      for (let i = patchQueue!.length - 1; i >= 0; i--) {
+      for (let i = patchLen - 1; i >= 0; i--) {
         const patch = patchQueue![i];
         patch[0].patched(patch[2]);
       }
     }
   }
 
+  /**
+   * Destroy the component.  This operation is quite complex:
+   *  - it recursively destroy all children
+   *  - call the willUnmount hooks if necessary
+   *  - remove the dom node from the dom
+   *
+   * This should only be called manually if you created the widget.  Most widgets
+   * will be automatically destroyed.
+   */
   destroy() {
-    if (!this.__owl__.isDestroyed) {
+    const __owl__ = this.__owl__;
+    if (!__owl__.isDestroyed) {
       const el = this.el;
-      this._destroy(this.__owl__.parent);
+      this._destroy(__owl__.parent);
       if (el) {
         el.remove();
       }
     }
   }
 
-  _destroy(parent) {
-    const isMounted = this.__owl__.isMounted;
-    if (isMounted) {
-      this.willUnmount();
-      this.__owl__.isMounted = false;
-    }
-    const children = Object.values(this.__owl__.children);
-    for (let child of children) {
-      child._destroy(this);
-    }
-    if (parent) {
-      let id = this.__owl__.id;
-      delete parent.__owl__.children[id];
-      this.__owl__.parent = null;
-    }
-    this.clear();
-    this.__owl__.isDestroyed = true;
-    delete this.__owl__.vnode;
-  }
-
+  /**
+   * This method is called by the component system whenever its props are
+   * updated. If it returns true, then the component will be rendered.
+   * Otherwise, it will skip the rendering (also, its props will not be updated)
+   */
   shouldUpdate(nextProps: Props): boolean {
     return true;
   }
@@ -335,23 +330,95 @@ export class Component<
    * mode or not.
    */
   async updateEnv(nextEnv: Partial<T>): Promise<void> {
-    if (this.__owl__.parent && this.__owl__.parent.env === this.env) {
+    const __owl__ = this.__owl__;
+    if (__owl__.parent && __owl__.parent.env === this.env) {
       this.env = Object.create(this.env);
     }
     Object.assign(this.env, nextEnv);
-    if (this.__owl__.isMounted) {
+    if (__owl__.isMounted) {
       await this.render(true);
     }
   }
 
+  /**
+   * Sets a key (from the state) to a specific value.  This is mostly useful to
+   * work around the limitation in observed value with new keys.
+   */
   set(target: any, key: string | number, value: any) {
     this.__owl__.observer!.set(target, key, value);
   }
 
+  /**
+   * Emit a custom event of type 'eventType' with the given 'payload' on the
+   * component's el, if it exists. However, note that the event will only bubble
+   * up to the parent DOM nodes. Thus, it must be called between mounted() and
+   * willUnmount().
+   */
+  trigger(eventType: string, payload?: any) {
+    if (this.el) {
+      const ev = new CustomEvent(eventType, {
+        bubbles: true,
+        cancelable: true,
+        detail: payload
+      });
+      this.el.dispatchEvent(ev);
+    }
+  }
+
   //--------------------------------------------------------------------------
   // Private
   //--------------------------------------------------------------------------
 
+  _destroy(parent: Component<any, any, any> | null) {
+    const __owl__ = this.__owl__;
+    const isMounted = __owl__.isMounted;
+    if (isMounted) {
+      this.willUnmount();
+      __owl__.isMounted = false;
+    }
+    const children = __owl__.children;
+    for (let key in children) {
+      children[key]._destroy(this);
+    }
+    if (parent) {
+      let id = __owl__.id;
+      delete parent.__owl__.children[id];
+      __owl__.parent = null;
+    }
+    __owl__.isDestroyed = true;
+    delete __owl__.vnode;
+  }
+
+  _callMounted() {
+    const __owl__ = this.__owl__;
+    const children = __owl__.children;
+    for (let id in children) {
+      const comp = children[id];
+      if (!comp.__owl__.isMounted && this.el!.contains(comp.el)) {
+        comp._callMounted();
+      }
+    }
+    __owl__.isMounted = true;
+    const handlers = __owl__.mountedHandlers;
+    for (let key in handlers) {
+      handlers[key]();
+    }
+    this.mounted();
+  }
+
+  _callWillUnmount() {
+    this.willUnmount();
+    const __owl__ = this.__owl__;
+    __owl__.isMounted = false;
+    const children = __owl__.children;
+    for (let id in children) {
+      const comp = children[id];
+      if (comp.__owl__.isMounted) {
+        comp._callWillUnmount();
+      }
+    }
+  }
+
   async _updateProps(
     nextProps: Props,
     forceUpdate: boolean = false,
@@ -359,6 +426,13 @@ export class Component<
   ): Promise<void> {
     const shouldUpdate = forceUpdate || this.shouldUpdate(nextProps);
     if (shouldUpdate) {
+      const defaultProps = (<any>this.constructor).defaultProps;
+      if (defaultProps) {
+        nextProps = this._applyDefaultProps(nextProps, defaultProps);
+      }
+      if (QWeb.dev) {
+        this._validateProps(nextProps);
+      }
       await this.willUpdateProps(nextProps);
       this.props = nextProps;
       await this.render(forceUpdate, patchQueue);
@@ -366,19 +440,22 @@ export class Component<
   }
 
   _patch(vnode) {
-    this.__owl__.renderPromise = null;
-    const target = this.__owl__.vnode || document.createElement(vnode.sel!);
-    this.__owl__.vnode = patch(target, vnode);
+    const __owl__ = this.__owl__;
+    __owl__.renderPromise = null;
+    const target = __owl__.vnode || document.createElement(vnode.sel!);
+    __owl__.vnode = patch(target, vnode);
   }
   _prepare(): Promise<VNode> {
-    this.__owl__.renderProps = this.props;
-    this.__owl__.renderPromise = this._prepareAndRender();
-    return this.__owl__.renderPromise;
+    const __owl__ = this.__owl__;
+    __owl__.renderProps = this.props;
+    __owl__.renderPromise = this._prepareAndRender();
+    return __owl__.renderPromise;
   }
 
   async _prepareAndRender(): Promise<VNode> {
     await this.willStart();
-    if (this.__owl__.isDestroyed) {
+    const __owl__ = this.__owl__;
+    if (__owl__.isDestroyed) {
       return Promise.resolve(h("div"));
     }
     const qweb = this.env.qweb;
@@ -409,33 +486,35 @@ export class Component<
         }
       }
     }
-    this.__owl__.render = qweb.render.bind(qweb, this.template);
+    __owl__.render = qweb.render.bind(qweb, this.template);
     this._observeState();
     return this._render();
   }
+
   async _render(
     force: boolean = false,
     patchQueue: any[] = []
   ): Promise<VNode> {
-    this.__owl__.renderId++;
+    const __owl__ = this.__owl__;
+    __owl__.renderId++;
     const promises: Promise<void>[] = [];
     const patch: any[] = [this];
-    if (this.__owl__.isMounted) {
+    if (__owl__.isMounted) {
       patchQueue.push(patch);
     }
-    if (this.__owl__.observer) {
-      this.__owl__.observer.allowMutations = false;
+    if (__owl__.observer) {
+      __owl__.observer.allowMutations = false;
     }
-    let vnode = this.__owl__.render!(this, {
+    let vnode = __owl__.render!(this, {
       promises,
-      handlers: this.__owl__.boundHandlers,
-      mountedHandlers: this.__owl__.mountedHandlers,
+      handlers: __owl__.boundHandlers,
+      mountedHandlers: __owl__.mountedHandlers,
       forceUpdate: force,
       patchQueue
     });
     patch.push(vnode);
-    if (this.__owl__.observer) {
-      this.__owl__.observer.allowMutations = true;
+    if (__owl__.observer) {
+      __owl__.observer.allowMutations = true;
     }
 
     // this part is critical for the patching process to be done correctly. The
@@ -443,38 +522,141 @@ export class Component<
     // will update its own vnode representation without the knowledge of the
     // parent widget.  With this, we make sure that the parent widget will be
     // able to patch itself properly after
-    vnode.key = this.__owl__.id;
-    this.__owl__.renderProps = this.props;
-    this.__owl__.renderPromise = Promise.all(promises).then(() => vnode);
-    return this.__owl__.renderPromise;
+    vnode.key = __owl__.id;
+    __owl__.renderProps = this.props;
+    __owl__.renderPromise = Promise.all(promises).then(() => vnode);
+    return __owl__.renderPromise;
   }
 
   /**
    * Only called by qweb t-widget directive
    */
   _mount(vnode: VNode, elm: HTMLElement): VNode {
-    this.__owl__.vnode = patch(elm, vnode);
-    if (
-      this.__owl__.parent!.__owl__.isMounted &&
-      !this.__owl__.isMounted
-    ) {
+    const __owl__ = this.__owl__;
+    __owl__.vnode = patch(elm, vnode);
+    if (__owl__.parent!.__owl__.isMounted && !__owl__.isMounted) {
       this._callMounted();
     }
-    return this.__owl__.vnode;
+    return __owl__.vnode;
   }
 
-  __mount() {
-    if (!this.__owl__.isMounted) {
-      this.__owl__.isMounted = true;
+  /**
+   * Only called by qweb t-widget directive (when t-keepalive is set)
+   */
+  _remount() {
+    const __owl__ = this.__owl__;
+    if (!__owl__.isMounted) {
+      __owl__.isMounted = true;
       this.mounted();
     }
   }
 
   _observeState() {
     if (this.state) {
-      this.__owl__.observer = new Observer();
-      this.__owl__.observer.observe(this.state);
-      this.__owl__.observer.notifyCB = this.render.bind(this);
+      const __owl__ = this.__owl__;
+      __owl__.observer = new Observer();
+      __owl__.observer.observe(this.state);
+      __owl__.observer.notifyCB = this.render.bind(this);
+    }
+  }
+
+  /**
+   * Apply default props (only top level).
+   *
+   * Note that this method does not modify in place the props, it returns a new
+   * prop object
+   */
+  _applyDefaultProps(props: Object | undefined, defaultProps: Object): Props {
+    props = props ? Object.create(props) : {};
+    for (let propName in defaultProps) {
+      if (props![propName] === undefined) {
+        props![propName] = defaultProps[propName];
+      }
+    }
+    return <Props>props;
+  }
+
+  /**
+   * Validate the component props (or next props) against the (static) props
+   * description.  This is potentially an expensive operation: it may needs to
+   * visit recursively the props and all the children to check if they are valid.
+   * This is why it is only done in 'dev' mode.
+   */
+  _validateProps(props: Object) {
+    const propsDef = (<any>this.constructor).props;
+    if (propsDef instanceof Array) {
+      // list of strings (prop names)
+      for (let i = 0, l = propsDef.length; i < l; i++) {
+        if (!(propsDef[i] in props)) {
+          throw new Error(
+            `Missing props '${propsDef[i]}' (widget '${this.constructor.name}')`
+          );
+        }
+      }
+    } else if (propsDef) {
+      // propsDef is an object now
+      for (let propName in propsDef) {
+        if (!(propName in props)) {
+          if (propsDef[propName] && !propsDef[propName].optional) {
+            throw new Error(
+              `Missing props '${propName}' (widget '${this.constructor.name}')`
+            );
+          } else {
+            break;
+          }
+        }
+        let isValid = isValidProp(props[propName], propsDef[propName]);
+        if (!isValid) {
+          throw new Error(
+            `Props '${propName}' of invalid type in widget '${
+              this.constructor.name
+            }'`
+          );
+        }
+      }
     }
   }
 }
+
+//------------------------------------------------------------------------------
+// Prop validation helper
+//------------------------------------------------------------------------------
+
+/**
+ * Check if an invidual prop value matches its (static) prop definition
+ */
+function isValidProp(prop, propDef): boolean {
+  if (typeof propDef === "function") {
+    // Check if a value is constructed by some Constructor.  Note that there is a
+    // slight abuse of language: we want to consider primitive values as well.
+    //
+    // So, even though 1 is not an instance of Number, we want to consider that
+    // it is valid.
+    if (typeof prop === "object") {
+      return prop instanceof propDef;
+    }
+    return typeof prop === propDef.name.toLowerCase();
+  } else if (propDef instanceof Array) {
+    // If this code is executed, this means that we want to check if a prop
+    // matches at least one of its descriptor.
+    let result = false;
+    for (let i = 0, iLen = propDef.length; i < iLen; i++) {
+      result = result || isValidProp(prop, propDef[i]);
+    }
+    return result;
+  }
+  // propsDef is an object
+  let result = isValidProp(prop, propDef.type);
+  if (propDef.type === Array) {
+    for (let i = 0, iLen = prop.length; i < iLen; i++) {
+      result = result && isValidProp(prop[i], propDef.element);
+    }
+  }
+  if (propDef.type === Object) {
+    const shape = propDef.shape;
+    for (let key in shape) {
+      result = result && isValidProp(prop[key], shape[key]);
+    }
+  }
+  return result;
+}

src/event_bus.ts

@@ -64,7 +64,8 @@ export class EventBus {
    */
   trigger(eventType: string, ...args: any[]) {
     const subs = this.subscriptions[eventType] || [];
-    for (let sub of subs) {
+    for (let i = 0, iLen = subs.length; i < iLen; i++) {
+      const sub = subs[i];
       sub.callback.call(sub.owner, ...args);
     }
   }

src/index.ts

@@ -12,10 +12,28 @@ export { Observer } from "./observer";
 // themselves in QWeb, otherwise these files will not even be loaded.
 import "./qweb_directives";
 import "./qweb_extensions";
-export { QWeb } from "./qweb_core";
+import { QWeb } from "./qweb_core";
+export { QWeb };
 
 export { connect, Store } from "./store";
 import * as _utils from "./utils";
 
+export const __info__ = {};
 
+Object.defineProperty(__info__, "mode", {
+  get() {
+    return QWeb.dev ? "dev" : "prod";
+  },
+  set(mode: string) {
+    QWeb.dev = mode === "dev";
+    if (QWeb.dev) {
+      const url = `https://github.com/odoo/owl/blob/master/doc/tooling.md#development-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.`)
+    }
+  }
+});
 export const utils = _utils;

src/observer.ts

@@ -30,10 +30,13 @@ const methodsToPatch = [
   "sort",
   "reverse"
 ];
+const methodLen = methodsToPatch.length;
+
 const ArrayProto = Array.prototype;
 const ModifiedArrayProto = Object.create(ArrayProto);
 
-for (let method of methodsToPatch) {
+for (let i = 0; i < methodLen; i++) {
+  const method = methodsToPatch[i];
   const initialMethod = ArrayProto[method];
   ModifiedArrayProto[method] = function(...args) {
     if (!this.__observer__.allowMutations) {
@@ -57,8 +60,8 @@ for (let method of methodsToPatch) {
         break;
     }
     if (inserted) {
-      for (let elem of inserted) {
-        this.__observer__.observe(elem, this);
+      for (let i = 0, iLen = inserted.length; i < iLen; i++) {
+        this.__observer__.observe(inserted[i], this);
       }
     }
     return initialMethod.call(this, ...args);
@@ -105,17 +108,22 @@ export class Observer {
   }
 
   set(target: any, key: number | string, value: any) {
-    this.rev++;
-    this._addProp(target, key, value);
-    target.__owl__.rev++;
+    let alreadyDefined =
+      key in target &&
+      Object.getOwnPropertyDescriptor(target, key)!.configurable === false;
+    if (alreadyDefined) {
+      target[key] = value;
+    } else {
+      this._addProp(target, key, value);
+      this._updateRevNumber(target);
+    }
     this.notifyChange();
   }
 
   _observeObj<T extends { __owl__?: any }>(obj: T, parent?: any) {
-    const keys = Object.keys(obj);
     obj.__owl__ = { rev: this.rev, deepRev: this.rev, parent };
     Object.defineProperty(obj, "__owl__", { enumerable: false });
-    for (let key of keys) {
+    for (let key in obj) {
       this._addProp(obj, key, obj[key]);
     }
   }
@@ -125,7 +133,7 @@ export class Observer {
     Object.defineProperty(arr, "__owl__", { enumerable: false });
     (<any>arr).__proto__ = Object.create(ModifiedArrayProto);
     (<any>arr).__proto__.__observer__ = this;
-    for (let i = 0; i < arr.length; i++) {
+    for (let i = 0, iLen = arr.length; i < iLen; i++) {
       this.observe(arr[i], arr);
     }
   }
@@ -143,23 +151,26 @@ export class Observer {
       },
       set(newVal) {
         if (newVal !== value) {
-          self.rev++;
           if (!self.allowMutations) {
             throw new Error(
               `Observed state cannot be changed here! (key: "${key}", val: "${newVal}")`
             );
           }
+          self._updateRevNumber(obj);
           value = newVal;
           self.observe(newVal, obj);
-          obj.__owl__.rev!++;
-          let parent = obj;
-          do {
-            parent.__owl__.deepRev++;
-          } while ((parent = parent.__owl__.parent) && parent !== obj);
           self.notifyChange();
         }
       }
     });
     this.observe(value, obj);
   }
+  _updateRevNumber(target: any) {
+    this.rev++;
+    target.__owl__.rev!++;
+    let parent = target;
+    do {
+      parent.__owl__.deepRev++;
+    } while ((parent = parent.__owl__.parent) && parent !== target);
+  }
 }

src/qweb_core.ts

@@ -96,7 +96,14 @@ const NODE_HOOKS_PARAMS = {
   remove: "(vn, rm)"
 };
 
-export const UTILS = {
+interface Utils {
+  h: typeof h;
+  objectToAttrString(obj: Object): string;
+  shallowEqual(p1: Object, p2: Object): boolean;
+  [key: string]: any;
+}
+
+export const UTILS: Utils = {
   h: h,
   objectToAttrString(obj: Object): string {
     let classes: string[] = [];
@@ -106,6 +113,14 @@ export const UTILS = {
       }
     }
     return classes.join(" ");
+  },
+  shallowEqual(p1, p2) {
+    for (let k in p1) {
+      if (p1[k] !== p2[k]) {
+        return false;
+      }
+    }
+    return true;
   }
 };
 
@@ -126,6 +141,10 @@ let nextID = 1;
 export class QWeb {
   templates: { [name: string]: Template } = {};
   utils = UTILS;
+  static widgets = Object.create(null);
+
+  // dev mode enables better error messages or more costly validations
+  static dev: boolean = false;
 
   // the id field is useful to be able to hash qweb instances.  The current
   // use case is that component's templates are qweb dependant, and need to be
@@ -148,6 +167,13 @@ export class QWeb {
     }
   }
 
+  static register(name: string, Component: any) {
+    if (QWeb.widgets[name]) {
+      throw new Error(`Component '${name}' has already been registered`);
+    }
+    QWeb.widgets[name] = Component;
+  }
+
   /**
    * Add a template to the internal template map.  Note that it is not
    * immediately compiled.
@@ -260,6 +286,12 @@ export class QWeb {
       // pollute the rendering context by adding some keys in it.
       ctx.code.unshift("    let owner = context;");
     }
+    if (ctx.shouldDefineQWeb) {
+      ctx.code.unshift("    let QWeb = this.constructor;");
+    }
+    if (ctx.shouldDefineUtils) {
+      ctx.code.unshift("    let utils = this.utils;");
+    }
 
     if (!ctx.rootNode) {
       throw new Error("A template should have one root node");
@@ -273,11 +305,14 @@ export class QWeb {
         ctx.code.join("\n")
       ) as CompiledTemplate;
     } catch (e) {
+      const templateName = ctx.templateName.replace(/`/g, "'");
+      console.groupCollapsed(`Invalid Code generated by ${templateName}`);
+      console.warn(ctx.code.join("\n"));
+      console.groupEnd();
       throw new Error(
-        `Invalid generated code while compiling template '${ctx.templateName.replace(
-          /`/g,
-          "'"
-        )}': ${e.message}`
+        `Invalid generated code while compiling template '${templateName}': ${
+          e.message
+        }`
       );
     }
     if (isDebug) {
@@ -338,17 +373,20 @@ export class QWeb {
       }
     }
 
-    for (let directive of DIRECTIVES) {
+    const DIR_N = DIRECTIVES.length;
+    const ATTR_N = attributes.length;
+    for (let i = 0; i < DIR_N; i++) {
+      let directive = DIRECTIVES[i];
       let fullName;
       let value;
-      for (let i = 0; i < attributes.length; i++) {
-        const name = attributes[i].name;
+      for (let j = 0; j < ATTR_N; j++) {
+        const name = attributes[j].name;
         if (
           name === "t-" + directive.name ||
           name.startsWith("t-" + directive.name + "-")
         ) {
           fullName = name;
-          value = attributes[i].textContent;
+          value = attributes[j].textContent;
           validDirectives.push({ directive, value, fullName });
           if (directive.name === "on") {
             withHandlers = true;
@@ -457,9 +495,6 @@ export class QWeb {
         props.push(`${key}: _${val}`);
       }
     }
-    function formatter(expr) {
-      return "${" + ctx.formatExpression(expr) + "}";
-    }
 
     for (let i = 0; i < attributes.length; i++) {
       let name = attributes[i].name;
@@ -518,17 +553,13 @@ export class QWeb {
           // attribute contains 'non letters' => we want to quote it
           attName = '"' + attName + '"';
         }
-        const formattedExpr = value!
-          .replace(/\{\{.*?\}\}/g, s => formatter(s.slice(2, -2)))
-          .replace(/\#\{.*?\}/g, s => formatter(s.slice(2, -1)));
+        const formattedExpr = ctx.interpolate(value);
         const attID = ctx.generateID();
         let staticVal = (<Element>node).getAttribute(attName);
         if (staticVal) {
-          ctx.addLine(
-            `var _${attID} = '${staticVal} ' + \`${formattedExpr}\`;`
-          );
+          ctx.addLine(`var _${attID} = '${staticVal} ' + ${formattedExpr};`);
         } else {
-          ctx.addLine(`var _${attID} = \`${formattedExpr}\`;`);
+          ctx.addLine(`var _${attID} = ${formattedExpr};`);
         }
         attrs.push(`${attName}: _${attID}`);
       }
@@ -604,6 +635,8 @@ export class Context {
   rootContext: Context;
   caller: Element | undefined;
   shouldDefineOwner: boolean = false;
+  shouldDefineQWeb: boolean = false;
+  shouldDefineUtils: boolean = false;
   shouldProtectContext: boolean = false;
   inLoop: boolean = false;
   inPreTag: boolean = false;
@@ -696,8 +729,8 @@ export class Context {
     let invarPos = 0;
     let r = "";
     chars.push(" ");
-    for (var i = 0, ilen = chars.length; i < ilen; i++) {
-      var c = chars[i];
+    for (let i = 0, ilen = chars.length; i < ilen; i++) {
+      let c = chars[i];
       if (instring.length) {
         if (c === instring && chars[i - 1] !== "\\") {
           instring = "";
@@ -730,4 +763,29 @@ export class Context {
     const result = r.slice(0, -1);
     return result;
   }
+
+  /**
+   * Perform string interpolation on the given string. Note that if the whole
+   * string is an expression, it simply returns it (formatted and enclosed in
+   * parentheses).
+   * For instance:
+   *   'Hello {{x}}!' -> `Hello ${x}`
+   *   '{{x ? 'a': 'b'}}' -> (x ? 'a' : 'b')
+   */
+  interpolate(s: string): string {
+    let matches = s.match(/\{\{.*?\}\}/g);
+    if (matches && matches[0].length === s.length) {
+      return `(${this.formatExpression(s.slice(2, -2))})`;
+    }
+    matches = s.match(/\#\{.*?\}/g);
+    if (matches && matches[0].length === s.length) {
+      return `(${this.formatExpression(s.slice(2, -1))})`;
+    }
+
+    let formatter = expr => "${" + this.formatExpression(expr) + "}";
+    let r = s
+      .replace(/\{\{.*?\}\}/g, s => formatter(s.slice(2, -2)))
+      .replace(/\#\{.*?\}/g, s => formatter(s.slice(2, -1)));
+    return "`" + r + "`";
+  }
 }

src/qweb_directives.ts

@@ -250,14 +250,15 @@ QWeb.addDirective({
     ctx.addLine(
       `var _${keysID} = _${arrayID} instanceof Array ? _${arrayID} : Object.keys(_${arrayID});`
     );
+    ctx.addLine(`var _length${keysID} = _${keysID}.length;`);
     let valuesID = ctx.generateID();
     ctx.addLine(
       `var _${valuesID} = _${arrayID} instanceof Array ? _${arrayID} : Object.values(_${arrayID});`
     );
-    ctx.addLine(`for (let i = 0; i < _${keysID}.length; i++) {`);
+    ctx.addLine(`for (let i = 0; i < _length${keysID}; i++) {`);
     ctx.indent();
     ctx.addLine(`context.${name}_first = i === 0;`);
-    ctx.addLine(`context.${name}_last = i === _${keysID}.length - 1;`);
+    ctx.addLine(`context.${name}_last = i === _length${keysID} - 1;`);
     ctx.addLine(`context.${name}_parity = i % 2 === 0 ? 'even' : 'odd';`);
     ctx.addLine(`context.${name}_index = i;`);
     ctx.addLine(`context.${name} = _${keysID}[i];`);

src/qweb_extensions.ts

@@ -9,40 +9,63 @@ import { QWeb, UTILS } from "./qweb_core";
  * - t-on
  * - t-ref
  * - t-transition
- * - t-widget/t-props/t-keepalive
+ * - t-widget/t-keepalive
  * - t-mounted
  */
 
 //------------------------------------------------------------------------------
 // t-on
 //------------------------------------------------------------------------------
+// these are pieces of code that will be injected into the event handler if
+// modifiers are specified
+const MODS_CODE = {
+  prevent: "e.preventDefault();",
+  self: "if (e.target !== this.elm) {return}",
+  stop: "e.stopPropagation();"
+};
+
 QWeb.addDirective({
   name: "on",
   priority: 90,
   atNodeCreation({ ctx, fullName, value, nodeID }) {
     ctx.rootContext.shouldDefineOwner = true;
-    const eventName = fullName.slice(5);
+    const [eventName, ...mods] = fullName.slice(5).split(".");
     if (!eventName) {
       throw new Error("Missing event name with t-on directive");
     }
     let extraArgs;
-    let handler = value.replace(/\(.*\)/, function(args) {
+    let handlerName = value.replace(/\(.*\)/, function(args) {
       extraArgs = args.slice(1, -1);
       return "";
     });
-    let error = `(function () {throw new Error('Missing handler \\'' + '${handler}' + \`\\' when evaluating template '${ctx.templateName.replace(
-      /`/g,
-      "'"
-    )}'\`)})()`;
+    ctx.addIf(`!context['${handlerName}']`);
+    ctx.addLine(
+      `throw new Error('Missing handler \\'' + '${handlerName}' + \`\\' when evaluating template '${ctx.templateName.replace(
+        /`/g,
+        "'"
+      )}'\`)`
+    );
+    ctx.closeIf();
+    let params = extraArgs
+      ? `owner, ${ctx.formatExpression(extraArgs)}`
+      : "owner";
+    let handler;
+    if (mods.length > 0) {
+      handler = `function (e) {`;
+      handler += mods
+        .map(function(mod) {
+          return MODS_CODE[mod];
+        })
+        .join("");
+      handler += `context['${handlerName}'].call(${params}, e);}`;
+    } else {
+      handler = `context['${handlerName}'].bind(${params})`;
+    }
     if (extraArgs) {
-      ctx.addLine(
-        `p${nodeID}.on['${eventName}'] = (context['${handler}'] || ${error}).bind(owner, ${ctx.formatExpression(
-          extraArgs
-        )});`
-      );
+      ctx.addLine(`p${nodeID}.on['${eventName}'] = ${handler};`);
     } else {
       ctx.addLine(
-        `extra.handlers['${eventName}' + ${nodeID}] = extra.handlers['${eventName}' + ${nodeID}] || (context['${handler}'] || ${error}).bind(owner);`
+        `extra.handlers['${eventName}' + ${nodeID}] = extra.handlers['${eventName}' + ${nodeID}] || ${handler};`
       );
       ctx.addLine(
         `p${nodeID}.on['${eventName}'] = extra.handlers['${eventName}' + ${nodeID}];`
@@ -57,9 +80,9 @@ QWeb.addDirective({
 QWeb.addDirective({
   name: "ref",
   priority: 95,
-  atNodeCreation({ ctx, nodeID, value, addNodeHook }) {
+  atNodeCreation({ ctx, value, addNodeHook }) {
     const refKey = `ref${ctx.generateID()}`;
-    ctx.addLine(`const ${refKey} = ${ctx.formatExpression(value)}`);
+    ctx.addLine(`const ${refKey} = ${ctx.interpolate(value)};`);
     addNodeHook("create", `context.refs[${refKey}] = n.elm;`);
   }
 });
@@ -67,16 +90,13 @@ QWeb.addDirective({
 //------------------------------------------------------------------------------
 // t-transition
 //------------------------------------------------------------------------------
-(<any>UTILS).nextFrame = function(cb: () => void) {
+UTILS.nextFrame = function(cb: () => void) {
   requestAnimationFrame(() => requestAnimationFrame(cb));
 };
 
-(<any>UTILS).transitionCreate = function(elm: HTMLElement, name: string) {
+UTILS.transitionInsert = function(elm: HTMLElement, name: string) {
   elm.classList.add(name + "-enter");
   elm.classList.add(name + "-enter-active");
-};
-
-(<any>UTILS).transitionInsert = function(elm: HTMLElement, name: string) {
   const finalize = () => {
     elm.classList.remove(name + "-enter-active");
     elm.classList.remove(name + "-enter-to");
@@ -88,7 +108,7 @@ QWeb.addDirective({
   });
 };
 
-(<any>UTILS).transitionRemove = function(
+UTILS.transitionRemove = function(
   elm: HTMLElement,
   name: string,
   rm: () => void
@@ -97,7 +117,7 @@ QWeb.addDirective({
   elm.classList.add(name + "-leave-active");
   const finalize = () => {
     elm.classList.remove(name + "-leave-active");
-    elm.classList.remove(name + "-enter-to");
+    elm.classList.remove(name + "-leave-to");
     rm();
   };
   this.nextFrame(() => {
@@ -146,10 +166,9 @@ function whenTransitionEnd(elm: HTMLElement, cb) {
 QWeb.addDirective({
   name: "transition",
   priority: 96,
-  atNodeCreation({ ctx, value, addNodeHook }) {
+  atNodeCreation({ value, addNodeHook }) {
     let name = value;
     const hooks = {
-      create: `this.utils.transitionCreate(n.elm, '${name}');`,
       insert: `this.utils.transitionInsert(vn.elm, '${name}');`,
       remove: `this.utils.transitionRemove(vn.elm, '${name}', rm);`
     };
@@ -163,6 +182,10 @@ QWeb.addDirective({
 // t-widget
 //------------------------------------------------------------------------------
 
+const T_WIDGET_MODS_CODE = Object.assign({}, MODS_CODE, {
+  self: "if (e.target !== vn.elm) {return}"
+});
+
 /**
  * The t-widget directive is certainly a complicated and hard to maintain piece
  * of code.  To help you, fellow developer, if you have to maintain it, I offer
@@ -173,10 +196,17 @@ QWeb.addDirective({
  * explanation of the code generated by the t-widget directive for the following
  * situation:
  * ```xml
- *   <t t-widget="child" t-key="'somestring'" t-props="{flag:state.flag}"/>
+ *   <t t-widget="child"
+ *      t-key="'somestring'"
+ *      flag="state.flag"
+ *      t-transition="fade"/>
  * ```
  *
  * ```js
+ * // we assign utils on top of the function because it will be useful for
+ * // each widgets
+ * let utils = this.utils;
+ *
  * // this is the virtual node representing the parent div
  * let c1 = [], p1 = { key: 1 };
  * var vn1 = h("div", p1, c1);
@@ -191,7 +221,7 @@ QWeb.addDirective({
  * let _2_index = c1.length;
  * c1.push(null);
  *
- * // def3 is the deferred that will contain later either the new widget
+ * // def3 is the promise that will contain later either the new widget
  * // creation, or the props update...
  * let def3;
  *
@@ -210,24 +240,27 @@ QWeb.addDirective({
  * // computation, so it is certainly better to do it only once
  * let props4 = { flag: context["state"].flag };
  *
- * // If we have a widget, currently rendering, but not ready yet, and which was
- * // rendered with different props, we do not want to wait for it to be ready,
- * // then update it. We simply destroy it, and start anew.
- * if (
- *   w4 &&
- *   w4.__owl__.renderPromise &&
- *   !w4.__owl__.isStarted &&
- *   props4 !== w4.__owl__.renderProps
- * ) {
- *   w4.destroy();
- *   w4 = false;
+ * // If we have a widget, currently rendering, but not ready yet, we do not want
+ * // to wait for it to be ready if we can avoid it
+ * if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+ *   // we check if the props are the same.  In that case, we can simply reuse
+ *   // the previous rendering and skip all useless work
+ *   if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+ *     def3 = w4.__owl__.renderPromise;
+ *   } else {
+ *     // if the props are not the same, we destroy the widget and starts anew.
+ *     // this will be faster than waiting for its rendering, then updating it
+ *     w4.destroy();
+ *     w4 = false;
+ *   }
  * }
  *
  * if (!w4) {
  *   // in this situation, we need to create a new widget.  First step is
  *   // to get a reference to the class, then create an instance with
  *   // current context as parent, and the props.
- *   let W4 = context.widgets["child"];
+ *   let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
+
  *   if (!W4) {
  *     throw new Error("Cannot find the definition of widget 'child'");
  *   }
@@ -262,15 +295,21 @@ QWeb.addDirective({
  *         // to synchronise the pvnode elm with the resulting elm
  *         let nvn = w4._mount(vnode, vn.elm);
  *         pvnode.elm = nvn.elm;
+ *         // what follows is only present if there are animations on the widget
+ *         utils.transitionInsert(vn.elm, "fade");
  *       },
  *       remove() {
- *         // apparently, in some cases, it is necessary to call the destroy
- *         // method here
- *         w4.destroy();
+ *         // override with empty function to prevent from removing the node
+ *         // directly. It will be removed when destroy is called anyway, which
+ *         // delays the removal if there are animations.
  *       },
  *       destroy() {
- *         // and here...
- *         w4.destroy();
+ *         // if there are animations, we delay the call to destroy on the
+ *         // widget, if not, we call it directly.
+ *         let finalize = () => {
+ *           w4.destroy();
+ *         };
+ *         utils.transitionRemove(vn.elm, "fade", finalize);
  *       }
  *     };
  *     // the pvnode is inserted at the correct position in the div's children
@@ -283,7 +322,9 @@ QWeb.addDirective({
  * } else {
  *   // this is the 'update' path of the directive.
  *   // the call to _updateProps is the actual widget update
- *   def3 = w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+ *   // Note that we only update the props if we cannot reuse the previous
+ *   // rendering work (in the case it was rendered with the same props)
+ *   def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
  *   def3 = def3.then(() => {
  *     // if widget was destroyed in the meantime, we do nothing (so, this
  *     // means that the parent's element children list will have a null in
@@ -313,16 +354,33 @@ QWeb.addDirective({
   atNodeEncounter({ ctx, value, node }): boolean {
     ctx.addLine("//WIDGET");
     ctx.rootContext.shouldDefineOwner = true;
-    let props = node.getAttribute("t-props");
+    ctx.rootContext.shouldDefineQWeb = true;
+    ctx.rootContext.shouldDefineUtils = true;
     let keepAlive = node.getAttribute("t-keepalive") ? true : false;
 
-    // t-on- events...
-    const events: [string, string][] = [];
+    // t-on- events and t-transition
+    const events: [string, string[], string, string][] = [];
+    let transition: string = "";
     const attributes = (<Element>node).attributes;
+    const props: { [key: string]: string } = {};
     for (let i = 0; i < attributes.length; i++) {
       const name = attributes[i].name;
+      const value = attributes[i].textContent!;
       if (name.startsWith("t-on-")) {
-        events.push([name.slice(5), attributes[i].textContent!]);
+        const [eventName, ...mods] = name.slice(5).split(".");
+        let extraArgs;
+        let handlerName = value.replace(/\(.*\)/, function(args) {
+          extraArgs = args.slice(1, -1);
+          return "";
+        });
+        events.push([eventName, mods, handlerName, extraArgs]);
+      } else if (name === "t-transition") {
+        transition = value;
+      } else if (!name.startsWith("t-")) {
+        if (name !== "class" && name !== "style") {
+          // this is a prop!
+          props[name] = ctx.formatExpression(value);
+        }
       }
     }
 
@@ -330,9 +388,11 @@ QWeb.addDirective({
     if (key) {
       key = ctx.formatExpression(key);
     }
-    if (props) {
-      props = ctx.formatExpression(props);
-    }
+
+    // computing the props string representing the props object
+    let propStr = Object.keys(props)
+      .map(k => k + ":" + props[k])
+      .join(",");
     let dummyID = ctx.generateID();
     let defID = ctx.generateID();
     let widgetID = ctx.generateID();
@@ -356,16 +416,26 @@ QWeb.addDirective({
     let refKey: string = "";
     if (ref) {
       refKey = `ref${ctx.generateID()}`;
-      ctx.addLine(`const ${refKey} = ${ctx.formatExpression(ref)}`);
+      ctx.addLine(`const ${refKey} = ${ctx.interpolate(ref)};`);
       refExpr = `context.refs[${refKey}] = w${widgetID};`;
     }
-
+    let transitionsInsertCode = "";
+    if (transition) {
+      transitionsInsertCode = `utils.transitionInsert(vn.elm, '${transition}');`;
+    }
     let finalizeWidgetCode = `w${widgetID}.${
       keepAlive ? "unmount" : "destroy"
-    }()`;
+    }();`;
     if (ref) {
-      finalizeWidgetCode += `;delete context.refs[${refKey}]`;
+      finalizeWidgetCode += `delete context.refs[${refKey}];`; // FIXME: shouldn't we keep ref if keepAlive is true?
     }
+    if (transition) {
+      finalizeWidgetCode = `let finalize = () => {
+          ${finalizeWidgetCode}
+        };
+        utils.transitionRemove(vn.elm, '${transition}', finalize);`;
+    }
+
     let createHook = "";
     let classAttr = node.getAttribute("class");
     let tattClass = node.getAttribute("t-att-class");
@@ -377,7 +447,7 @@ QWeb.addDirective({
       tattStyle = attVar;
     }
     let updateClassCode = "";
-    if (classAttr || tattClass || styleAttr || tattStyle) {
+    if (classAttr || tattClass || styleAttr || tattStyle || events.length) {
       let classCode = "";
       if (classAttr) {
         classCode =
@@ -396,40 +466,68 @@ QWeb.addDirective({
           }`;
         updateClassCode = `let cl=w${widgetID}.el.classList;for (let k in ${attVar}) {if (${attVar}[k]) {cl.add(k)} else {cl.remove(k)}}`;
       }
+      let eventsCode = events
+        .map(function([eventName, mods, handlerName, extraArgs]) {
+          let params = extraArgs
+            ? `owner, ${ctx.formatExpression(extraArgs)}`
+            : "owner";
+          let handler;
+          if (mods.length > 0) {
+            handler = `function (e) {`;
+            handler += mods
+              .map(function(mod) {
+                return T_WIDGET_MODS_CODE[mod];
+              })
+              .join("");
+            handler += `owner['${handlerName}'].call(${params}, e);}`;
+          } else {
+            handler = `owner['${handlerName}'].bind(${params})`;
+          }
+          return `vn.elm.addEventListener('${eventName}', ${handler});`;
+        })
+        .join("");
       const styleExpr = tattStyle || (styleAttr ? `'${styleAttr}'` : false);
-      const styleCode = styleExpr ? `vn.elm.style = ${styleExpr}` : "";
-      createHook = `vnode.data.hook = {create(_, vn){${classCode}${styleCode}}};`;
+      const styleCode = styleExpr ? `vn.elm.style = ${styleExpr};` : "";
+      createHook = `vnode.data.hook = {create(_, vn){${classCode}${styleCode}${eventsCode}}};`;
     }
 
     ctx.addLine(
       `let w${widgetID} = ${templateID} in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[${templateID}]] : false;`
     );
-    ctx.addLine(`let props${widgetID} = ${props || "{}"};`);
+    ctx.addLine(`let props${widgetID} = {${propStr}};`);
     ctx.addIf(
-      `w${widgetID} && w${widgetID}.__owl__.renderPromise && !w${widgetID}.__owl__.vnode && props${widgetID} !== w${widgetID}.__owl__.renderProps`
+      `w${widgetID} && w${widgetID}.__owl__.renderPromise && !w${widgetID}.__owl__.vnode`
     );
+    ctx.addIf(
+      `utils.shallowEqual(props${widgetID}, w${widgetID}.__owl__.renderProps)`
+    );
+    ctx.addLine(`def${defID} = w${widgetID}.__owl__.renderPromise;`);
+    ctx.addElse();
     ctx.addLine(`w${widgetID}.destroy();`);
-    ctx.addLine(`w${widgetID} = false`);
+    ctx.addLine(`w${widgetID} = false;`);
+    ctx.closeIf();
     ctx.closeIf();
 
     ctx.addIf(`!w${widgetID}`);
     // new widget
-    ctx.addLine(`let W${widgetID} = context.widgets['${value}'];`);
+    ctx.addLine(`let widgetKey${widgetID} = ${ctx.interpolate(value)};`);
+    ctx.addLine(
+      `let W${widgetID} = context.widgets && context.widgets[widgetKey${widgetID}] || QWeb.widgets[widgetKey${widgetID}];`
+    );
 
     // maybe only do this in dev mode...
     ctx.addLine(
-      `if (!W${widgetID}) {throw new Error(\`Cannot find the definition of widget "${value}"\`)}`
+      `if (!W${widgetID}) {throw new Error('Cannot find the definition of widget "' + widgetKey${widgetID} + '"')}`
     );
     ctx.addLine(`w${widgetID} = new W${widgetID}(owner, props${widgetID});`);
     ctx.addLine(
       `context.__owl__.cmap[${templateID}] = w${widgetID}.__owl__.id;`
     );
-    for (let [event, method] of events) {
-      ctx.addLine(`w${widgetID}.on('${event}', owner, owner['${method}'])`);
-    }
     ctx.addLine(`def${defID} = w${widgetID}._prepare();`);
+    // hack: specify empty remove hook to prevent the node from being removed from the DOM
+    // FIXME: click to re-add widget during remove transition -> leak
     ctx.addLine(
-      `def${defID} = def${defID}.then(vnode=>{${createHook}let pvnode=h(vnode.sel, {key: ${templateID}, hook: {insert(vn){let nvn=w${widgetID}._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;${refExpr}},remove(){${finalizeWidgetCode}},destroy(){${finalizeWidgetCode}}}});c${
+      `def${defID} = def${defID}.then(vnode=>{${createHook}let pvnode=h(vnode.sel, {key: ${templateID}, hook: {insert(vn) {let nvn=w${widgetID}._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;${refExpr}${transitionsInsertCode}},remove() {},destroy(vn) {${finalizeWidgetCode}}}});c${
         ctx.parentNode
       }[_${dummyID}_index]=pvnode;w${widgetID}.__owl__.pvnode = pvnode;});`
     );
@@ -437,11 +535,11 @@ QWeb.addDirective({
     ctx.addElse();
     // need to update widget
     ctx.addLine(
-      `def${defID} = w${widgetID}._updateProps(props${widgetID}, extra.forceUpdate, extra.patchQueue);`
+      `def${defID} = def${defID} || w${widgetID}._updateProps(props${widgetID}, extra.forceUpdate, extra.patchQueue);`
     );
     let keepAliveCode = "";
     if (keepAlive) {
-      keepAliveCode = `pvnode.data.hook.insert = vn => {vn.elm.parentNode.replaceChild(w${widgetID}.el,vn.elm);vn.elm=w${widgetID}.el;w${widgetID}.__mount();};`;
+      keepAliveCode = `pvnode.data.hook.insert = vn => {vn.elm.parentNode.replaceChild(w${widgetID}.el,vn.elm);vn.elm=w${widgetID}.el;w${widgetID}._remount();};`;
     }
     ctx.addLine(
       `def${defID} = def${defID}.then(()=>{if (w${widgetID}.__owl__.isDestroyed) {return};${

src/vdom.ts

@@ -15,12 +15,15 @@
  * - patch function (to apply a vnode to an actual DOM node)
  */
 
-
 // because those in TypeScript are too restrictive: https://github.com/Microsoft/TSJS-lib-generator/pull/237
 declare global {
   interface Element {
     setAttribute(name: string, value: string | number | boolean): void;
-    setAttributeNS(namespaceURI: string, qualifiedName: string, value: string | number | boolean): void;
+    setAttributeNS(
+      namespaceURI: string,
+      qualifiedName: string,
+      value: string | number | boolean
+    ): void;
   }
 }
 
@@ -162,6 +165,7 @@ export function init(modules: Array<Partial<Module>>, domApi?: DOMAPI) {
 
   function createElm(vnode: VNode, insertedVnodeQueue: VNodeQueue): Node {
     let i: any,
+      iLen: number,
       data = vnode.data;
     if (data !== undefined) {
       if (isDef((i = data.hook)) && isDef((i = i.init))) {
@@ -193,9 +197,10 @@ export function init(modules: Array<Partial<Module>>, domApi?: DOMAPI) {
       if (hash < dot) elm.setAttribute("id", sel.slice(hash + 1, dot));
       if (dotIdx > 0)
         elm.setAttribute("class", sel.slice(dot + 1).replace(/\./g, " "));
-      for (i = 0; i < cbs.create.length; ++i) cbs.create[i](emptyNode, vnode);
+      for (i = 0, iLen = cbs.create.length; i < iLen; ++i)
+        cbs.create[i](emptyNode, vnode);
       if (array(children)) {
-        for (i = 0; i < children.length; ++i) {
+        for (i = 0, iLen = children.length; i < iLen; ++i) {
           const ch = children[i];
           if (ch != null) {
             api.appendChild(elm, createElm(ch as VNode, insertedVnodeQueue));
@@ -233,13 +238,16 @@ export function init(modules: Array<Partial<Module>>, domApi?: DOMAPI) {
 
   function invokeDestroyHook(vnode: VNode) {
     let i: any,
+      iLen: number,
       j: number,
+      jLen: number,
       data = vnode.data;
     if (data !== undefined) {
       if (isDef((i = data.hook)) && isDef((i = i.destroy))) i(vnode);
-      for (i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode);
+      for (i = 0, iLen = cbs.destroy.length; i < iLen; ++i)
+        cbs.destroy[i](vnode);
       if (vnode.children !== undefined) {
-        for (j = 0; j < vnode.children.length; ++j) {
+        for (j = 0, jLen = vnode.children.length; j < jLen; ++j) {
           i = vnode.children[j];
           if (i != null && typeof i !== "string") {
             invokeDestroyHook(i);
@@ -257,6 +265,7 @@ export function init(modules: Array<Partial<Module>>, domApi?: DOMAPI) {
   ): void {
     for (; startIdx <= endIdx; ++startIdx) {
       let i: any,
+        iLen: number,
         listeners: number,
         rm: () => void,
         ch = vnodes[startIdx];
@@ -265,7 +274,8 @@ export function init(modules: Array<Partial<Module>>, domApi?: DOMAPI) {
           invokeDestroyHook(ch);
           listeners = cbs.remove.length + 1;
           rm = createRmCb(ch.elm as Node, listeners);
-          for (i = 0; i < cbs.remove.length; ++i) cbs.remove[i](ch, rm);
+          for (i = 0, iLen = cbs.remove.length; i < iLen; ++i)
+            cbs.remove[i](ch, rm);
           if (
             isDef((i = ch.data)) &&
             isDef((i = i.hook)) &&
@@ -395,7 +405,7 @@ export function init(modules: Array<Partial<Module>>, domApi?: DOMAPI) {
     vnode: VNode,
     insertedVnodeQueue: VNodeQueue
   ) {
-    let i: any, hook: any;
+    let i: any, iLen: number, hook: any;
     if (
       isDef((i = vnode.data)) &&
       isDef((hook = i.hook)) &&
@@ -408,7 +418,8 @@ export function init(modules: Array<Partial<Module>>, domApi?: DOMAPI) {
     let ch = vnode.children;
     if (oldVnode === vnode) return;
     if (vnode.data !== undefined) {
-      for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode);
+      for (i = 0, iLen = cbs.update.length; i < iLen; ++i)
+        cbs.update[i](oldVnode, vnode);
       i = vnode.data.hook;
       if (isDef(i) && isDef((i = i.update))) i(oldVnode, vnode);
     }
@@ -458,9 +469,9 @@ export function init(modules: Array<Partial<Module>>, domApi?: DOMAPI) {
   }
 
   return function patch(oldVnode: VNode | Element, vnode: VNode): VNode {
-    let i: number, elm: Node, parent: Node;
+    let i: number, iLen: number, elm: Node, parent: Node;
     const insertedVnodeQueue: VNodeQueue = [];
-    for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]();
+    for (i = 0, iLen = cbs.pre.length; i < iLen; ++i) cbs.pre[i]();
 
     if (!isVnode(oldVnode)) {
       oldVnode = emptyNodeAt(oldVnode);
@@ -480,12 +491,12 @@ export function init(modules: Array<Partial<Module>>, domApi?: DOMAPI) {
       }
     }
 
-    for (i = 0; i < insertedVnodeQueue.length; ++i) {
+    for (i = 0, iLen = insertedVnodeQueue.length; i < iLen; ++i) {
       (((insertedVnodeQueue[i].data as VNodeData).hook as Hooks).insert as any)(
         insertedVnodeQueue[i]
       );
     }
-    for (i = 0; i < cbs.post.length; ++i) cbs.post[i]();
+    for (i = 0, iLen = cbs.post.length; i < iLen; ++i) cbs.post[i]();
     return vnode;
   };
 }
@@ -647,7 +658,7 @@ function addNS(
 ): void {
   data.ns = "http://www.w3.org/2000/svg";
   if (sel !== "foreignObject" && children !== undefined) {
-    for (let i = 0; i < children.length; ++i) {
+    for (let i = 0, iLen = children.length; i < iLen; ++i) {
       let childData = children[i].data;
       if (childData !== undefined) {
         addNS(
@@ -668,7 +679,8 @@ export function h(sel: any, b?: any, c?: any): VNode {
   var data: VNodeData = {},
     children: any,
     text: any,
-    i: number;
+    i: number,
+    iLen: number;
   if (c !== undefined) {
     data = b;
     if (array(c)) {
@@ -690,7 +702,7 @@ export function h(sel: any, b?: any, c?: any): VNode {
     }
   }
   if (children !== undefined) {
-    for (i = 0; i < children.length; ++i) {
+    for (i = 0, iLen = children.length; i < iLen; ++i) {
       if (primitive(children[i]))
         children[i] = vnode(
           undefined,
@@ -788,7 +800,7 @@ function invokeHandler(handler: any, vnode?: VNode, event?: Event): void {
       }
     } else {
       // call multiple handlers
-      for (var i = 0; i < handler.length; i++) {
+      for (let i = 0, iLen = handler.length; i < iLen; i++) {
         invokeHandler(handler[i], vnode, event);
       }
     }

tests/__snapshots__/animations.test.ts.snap

@@ -0,0 +1,127 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`animations t-transition combined with t-widget 1`] = `
+"function anonymous(context,extra
+) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    //WIDGET
+    let _2_index = c1.length;
+    c1.push(null);
+    let def3;
+    let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
+    let props4 = {};
+    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+            def3 = w4.__owl__.renderPromise;
+        } else {
+            w4.destroy();
+            w4 = false;
+        }
+    }
+    if (!w4) {
+        let widgetKey4 = \`Child\`;
+        let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
+        if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
+        w4 = new W4(owner, props4);
+        context.__owl__.cmap[4] = w4.__owl__.id;
+        def3 = w4._prepare();
+        def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;utils.transitionInsert(vn.elm, 'chimay');},remove() {},destroy(vn) {let finalize = () => {
+          w4.destroy();
+        };
+        utils.transitionRemove(vn.elm, 'chimay', finalize);}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+    } else {
+        def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
+    }
+    extra.promises.push(def3);
+    return vn1;
+}"
+`;
+
+exports[`animations t-transition combined with t-widget and t-if 1`] = `
+"function anonymous(context,extra
+) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    if (context['state'].display) {
+        //WIDGET
+        let _2_index = c1.length;
+        c1.push(null);
+        let def3;
+        let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
+        let props4 = {};
+        if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+            if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+                def3 = w4.__owl__.renderPromise;
+            } else {
+                w4.destroy();
+                w4 = false;
+            }
+        }
+        if (!w4) {
+            let widgetKey4 = \`Child\`;
+            let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
+            if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
+            w4 = new W4(owner, props4);
+            context.__owl__.cmap[4] = w4.__owl__.id;
+            def3 = w4._prepare();
+            def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;utils.transitionInsert(vn.elm, 'chimay');},remove() {},destroy(vn) {let finalize = () => {
+          w4.destroy();
+        };
+        utils.transitionRemove(vn.elm, 'chimay', finalize);}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+        } else {
+            def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+            def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
+        }
+        extra.promises.push(def3);
+    }
+    return vn1;
+}"
+`;
+
+exports[`animations t-transition with no delay/duration 1`] = `
+"function anonymous(context,extra
+) {
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('span', p1, c1);
+    p1.hook = {
+      insert: vn => {
+        this.utils.transitionInsert(vn.elm, 'jupiler');
+      },
+      remove: (vn, rm) => {
+        this.utils.transitionRemove(vn.elm, 'jupiler', rm);
+      },
+    };
+    c1.push({text: \`blue\`});
+    return vn1;
+}"
+`;
+
+exports[`animations t-transition, on a simple node (insert) 1`] = `
+"function anonymous(context,extra
+) {
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('span', p1, c1);
+    p1.hook = {
+      insert: vn => {
+        this.utils.transitionInsert(vn.elm, 'chimay');
+      },
+      remove: (vn, rm) => {
+        this.utils.transitionRemove(vn.elm, 'chimay', rm);
+      },
+    };
+    c1.push({text: \`blue\`});
+    return vn1;
+}"
+`;

tests/__snapshots__/component.test.ts.snap

@@ -3,6 +3,8 @@
 exports[`class and style attributes with t-widget dynamic t-att-style is properly added and updated on widget root el 1`] = `
 "function anonymous(context,extra
 ) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
     let owner = context;
     var h = this.utils.h;
     let c1 = [], p1 = {key:1};
@@ -14,19 +16,24 @@ exports[`class and style attributes with t-widget dynamic t-att-style is properl
     const _5 = context['state'].style;
     let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
     let props4 = {};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode && props4 !== w4.__owl__.renderProps) {
-        w4.destroy();
-        w4 = false
+    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+            def3 = w4.__owl__.renderPromise;
+        } else {
+            w4.destroy();
+            w4 = false;
+        }
     }
     if (!w4) {
-        let W4 = context.widgets['child'];
-        if (!W4) {throw new Error(\`Cannot find the definition of widget \\"child\\"\`)}
+        let widgetKey4 = \`child\`;
+        let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
+        if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
         w4 = new W4(owner, props4);
         context.__owl__.cmap[4] = w4.__owl__.id;
         def3 = w4._prepare();
-        def3 = def3.then(vnode=>{vnode.data.hook = {create(_, vn){vn.elm.style = _5}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn){let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove(){w4.destroy()},destroy(){w4.destroy()}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+        def3 = def3.then(vnode=>{vnode.data.hook = {create(_, vn){vn.elm.style = _5;}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
     } else {
-        def3 = w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
         def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};w4.el.style=_5;let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
     }
     extra.promises.push(def3);
@@ -37,6 +44,8 @@ exports[`class and style attributes with t-widget dynamic t-att-style is properl
 exports[`class and style attributes with t-widget t-att-class is properly added/removed on widget root el 1`] = `
 "function anonymous(context,extra
 ) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
     let owner = context;
     var h = this.utils.h;
     let c1 = [], p1 = {key:1};
@@ -48,13 +57,18 @@ exports[`class and style attributes with t-widget t-att-class is properly added/
     const _5 = {a: context['state'].a,b: context['state'].b};
     let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
     let props4 = {};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode && props4 !== w4.__owl__.renderProps) {
-        w4.destroy();
-        w4 = false
+    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+            def3 = w4.__owl__.renderPromise;
+        } else {
+            w4.destroy();
+            w4 = false;
+        }
     }
     if (!w4) {
-        let W4 = context.widgets['child'];
-        if (!W4) {throw new Error(\`Cannot find the definition of widget \\"child\\"\`)}
+        let widgetKey4 = \`child\`;
+        let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
+        if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
         w4 = new W4(owner, props4);
         context.__owl__.cmap[4] = w4.__owl__.id;
         def3 = w4._prepare();
@@ -62,9 +76,9 @@ exports[`class and style attributes with t-widget t-att-class is properly added/
               if (_5[k]) {
                   vn.elm.classList.add(k);
               }
-          }}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn){let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove(){w4.destroy()},destroy(){w4.destroy()}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+          }}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
     } else {
-        def3 = w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
         def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let cl=w4.el.classList;for (let k in _5) {if (_5[k]) {cl.add(k)} else {cl.remove(k)}}let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
     }
     extra.promises.push(def3);
@@ -75,6 +89,8 @@ exports[`class and style attributes with t-widget t-att-class is properly added/
 exports[`composition sub widgets with some state rendered in a loop 1`] = `
 "function anonymous(context,extra
 ) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
     let owner = context;
     context = Object.create(context);
     var h = this.utils.h;
@@ -84,10 +100,11 @@ exports[`composition sub widgets with some state rendered in a loop 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     if (typeof _2 === 'number') { _2 = Array.from(Array(_2).keys())}
     var _3 = _2 instanceof Array ? _2 : Object.keys(_2);
+    var _length3 = _3.length;
     var _4 = _2 instanceof Array ? _2 : Object.values(_2);
-    for (let i = 0; i < _3.length; i++) {
+    for (let i = 0; i < _length3; i++) {
         context.number_first = i === 0;
-        context.number_last = i === _3.length - 1;
+        context.number_last = i === _length3 - 1;
         context.number_parity = i % 2 === 0 ? 'even' : 'odd';
         context.number_index = i;
         context.number = _3[i];
@@ -99,19 +116,24 @@ exports[`composition sub widgets with some state rendered in a loop 1`] = `
         let def6;
         let w7 = key8 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[key8]] : false;
         let props7 = {};
-        if (w7 && w7.__owl__.renderPromise && !w7.__owl__.vnode && props7 !== w7.__owl__.renderProps) {
-            w7.destroy();
-            w7 = false
+        if (w7 && w7.__owl__.renderPromise && !w7.__owl__.vnode) {
+            if (utils.shallowEqual(props7, w7.__owl__.renderProps)) {
+                def6 = w7.__owl__.renderPromise;
+            } else {
+                w7.destroy();
+                w7 = false;
+            }
         }
         if (!w7) {
-            let W7 = context.widgets['ChildWidget'];
-            if (!W7) {throw new Error(\`Cannot find the definition of widget \\"ChildWidget\\"\`)}
+            let widgetKey7 = \`ChildWidget\`;
+            let W7 = context.widgets && context.widgets[widgetKey7] || QWeb.widgets[widgetKey7];
+            if (!W7) {throw new Error('Cannot find the definition of widget \\"' + widgetKey7 + '\\"')}
             w7 = new W7(owner, props7);
             context.__owl__.cmap[key8] = w7.__owl__.id;
             def6 = w7._prepare();
-            def6 = def6.then(vnode=>{let pvnode=h(vnode.sel, {key: key8, hook: {insert(vn){let nvn=w7._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove(){w7.destroy()},destroy(){w7.destroy()}}});c1[_5_index]=pvnode;w7.__owl__.pvnode = pvnode;});
+            def6 = def6.then(vnode=>{let pvnode=h(vnode.sel, {key: key8, hook: {insert(vn) {let nvn=w7._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w7.destroy();}}});c1[_5_index]=pvnode;w7.__owl__.pvnode = pvnode;});
         } else {
-            def6 = w7._updateProps(props7, extra.forceUpdate, extra.patchQueue);
+            def6 = def6 || w7._updateProps(props7, extra.forceUpdate, extra.patchQueue);
             def6 = def6.then(()=>{if (w7.__owl__.isDestroyed) {return};let pvnode=w7.__owl__.pvnode;c1[_5_index]=pvnode;});
         }
         extra.promises.push(def6);
@@ -120,43 +142,11 @@ exports[`composition sub widgets with some state rendered in a loop 1`] = `
 }"
 `;
 
-exports[`random stuff/miscellaneous snapshotting compiled code 1`] = `
-"function anonymous(context,extra
-) {
-    let owner = context;
-    var h = this.utils.h;
-    let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
-    //WIDGET
-    let key5 = 'somestring';
-    let _2_index = c1.length;
-    c1.push(null);
-    let def3;
-    let w4 = key5 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[key5]] : false;
-    let props4 = {flag: context['state'].flag};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode && props4 !== w4.__owl__.renderProps) {
-        w4.destroy();
-        w4 = false
-    }
-    if (!w4) {
-        let W4 = context.widgets['child'];
-        if (!W4) {throw new Error(\`Cannot find the definition of widget \\"child\\"\`)}
-        w4 = new W4(owner, props4);
-        context.__owl__.cmap[key5] = w4.__owl__.id;
-        def3 = w4._prepare();
-        def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: key5, hook: {insert(vn){let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove(){w4.destroy()},destroy(){w4.destroy()}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
-    } else {
-        def3 = w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
-        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
-    }
-    extra.promises.push(def3);
-    return vn1;
-}"
-`;
-
-exports[`random stuff/miscellaneous t-props should not be undefined (snapshotting) 1`] = `
+exports[`composition t-widget with dynamic value 1`] = `
 "function anonymous(context,extra
 ) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
     let owner = context;
     var h = this.utils.h;
     let c1 = [], p1 = {key:1};
@@ -167,19 +157,425 @@ exports[`random stuff/miscellaneous t-props should not be undefined (snapshottin
     let def3;
     let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
     let props4 = {};
-    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode && props4 !== w4.__owl__.renderProps) {
-        w4.destroy();
-        w4 = false
+    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+            def3 = w4.__owl__.renderPromise;
+        } else {
+            w4.destroy();
+            w4 = false;
+        }
     }
     if (!w4) {
-        let W4 = context.widgets['child'];
-        if (!W4) {throw new Error(\`Cannot find the definition of widget \\"child\\"\`)}
+        let widgetKey4 = (context['state'].widget);
+        let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
+        if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
         w4 = new W4(owner, props4);
         context.__owl__.cmap[4] = w4.__owl__.id;
         def3 = w4._prepare();
-        def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn){let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove(){w4.destroy()},destroy(){w4.destroy()}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+        def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
     } else {
-        def3 = w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
+    }
+    extra.promises.push(def3);
+    return vn1;
+}"
+`;
+
+exports[`composition t-widget with dynamic value 2 1`] = `
+"function anonymous(context,extra
+) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    //WIDGET
+    let _2_index = c1.length;
+    c1.push(null);
+    let def3;
+    let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
+    let props4 = {};
+    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+            def3 = w4.__owl__.renderPromise;
+        } else {
+            w4.destroy();
+            w4 = false;
+        }
+    }
+    if (!w4) {
+        let widgetKey4 = \`Widget\${context['state'].widget}\`;
+        let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
+        if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
+        w4 = new W4(owner, props4);
+        context.__owl__.cmap[4] = w4.__owl__.id;
+        def3 = w4._prepare();
+        def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+    } else {
+        def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
+    }
+    extra.promises.push(def3);
+    return vn1;
+}"
+`;
+
+exports[`other directives with t-widget t-on with handler bound to argument 1`] = `
+"function anonymous(context,extra
+) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    //WIDGET
+    let _2_index = c1.length;
+    c1.push(null);
+    let def3;
+    let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
+    let props4 = {};
+    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+            def3 = w4.__owl__.renderPromise;
+        } else {
+            w4.destroy();
+            w4 = false;
+        }
+    }
+    if (!w4) {
+        let widgetKey4 = \`child\`;
+        let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
+        if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
+        w4 = new W4(owner, props4);
+        context.__owl__.cmap[4] = w4.__owl__.id;
+        def3 = w4._prepare();
+        def3 = def3.then(vnode=>{vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', owner['onEv'].bind(owner, 3));}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+    } else {
+        def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
+    }
+    extra.promises.push(def3);
+    return vn1;
+}"
+`;
+
+exports[`other directives with t-widget t-on with handler bound to empty object (with non empty inner string) 1`] = `
+"function anonymous(context,extra
+) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    //WIDGET
+    let _2_index = c1.length;
+    c1.push(null);
+    let def3;
+    let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
+    let props4 = {};
+    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+            def3 = w4.__owl__.renderPromise;
+        } else {
+            w4.destroy();
+            w4 = false;
+        }
+    }
+    if (!w4) {
+        let widgetKey4 = \`child\`;
+        let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
+        if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
+        w4 = new W4(owner, props4);
+        context.__owl__.cmap[4] = w4.__owl__.id;
+        def3 = w4._prepare();
+        def3 = def3.then(vnode=>{vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', owner['onEv'].bind(owner, {}));}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+    } else {
+        def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
+    }
+    extra.promises.push(def3);
+    return vn1;
+}"
+`;
+
+exports[`other directives with t-widget t-on with handler bound to empty object 1`] = `
+"function anonymous(context,extra
+) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    //WIDGET
+    let _2_index = c1.length;
+    c1.push(null);
+    let def3;
+    let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
+    let props4 = {};
+    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+            def3 = w4.__owl__.renderPromise;
+        } else {
+            w4.destroy();
+            w4 = false;
+        }
+    }
+    if (!w4) {
+        let widgetKey4 = \`child\`;
+        let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
+        if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
+        w4 = new W4(owner, props4);
+        context.__owl__.cmap[4] = w4.__owl__.id;
+        def3 = w4._prepare();
+        def3 = def3.then(vnode=>{vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', owner['onEv'].bind(owner, {}));}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+    } else {
+        def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
+    }
+    extra.promises.push(def3);
+    return vn1;
+}"
+`;
+
+exports[`other directives with t-widget t-on with handler bound to object 1`] = `
+"function anonymous(context,extra
+) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    //WIDGET
+    let _2_index = c1.length;
+    c1.push(null);
+    let def3;
+    let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
+    let props4 = {};
+    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+            def3 = w4.__owl__.renderPromise;
+        } else {
+            w4.destroy();
+            w4 = false;
+        }
+    }
+    if (!w4) {
+        let widgetKey4 = \`child\`;
+        let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
+        if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
+        w4 = new W4(owner, props4);
+        context.__owl__.cmap[4] = w4.__owl__.id;
+        def3 = w4._prepare();
+        def3 = def3.then(vnode=>{vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', owner['onEv'].bind(owner, {val: 3}));}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+    } else {
+        def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
+    }
+    extra.promises.push(def3);
+    return vn1;
+}"
+`;
+
+exports[`other directives with t-widget t-on with prevent and self modifiers (order matters) 1`] = `
+"function anonymous(context,extra
+) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    //WIDGET
+    let _2_index = c1.length;
+    c1.push(null);
+    let def3;
+    let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
+    let props4 = {};
+    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+            def3 = w4.__owl__.renderPromise;
+        } else {
+            w4.destroy();
+            w4 = false;
+        }
+    }
+    if (!w4) {
+        let widgetKey4 = \`child\`;
+        let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
+        if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
+        w4 = new W4(owner, props4);
+        context.__owl__.cmap[4] = w4.__owl__.id;
+        def3 = w4._prepare();
+        def3 = def3.then(vnode=>{vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {e.preventDefault();if (e.target !== vn.elm) {return}owner['onEv'].call(owner, e);});}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+    } else {
+        def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
+    }
+    extra.promises.push(def3);
+    return vn1;
+}"
+`;
+
+exports[`other directives with t-widget t-on with self and prevent modifiers (order matters) 1`] = `
+"function anonymous(context,extra
+) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    //WIDGET
+    let _2_index = c1.length;
+    c1.push(null);
+    let def3;
+    let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
+    let props4 = {};
+    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+            def3 = w4.__owl__.renderPromise;
+        } else {
+            w4.destroy();
+            w4 = false;
+        }
+    }
+    if (!w4) {
+        let widgetKey4 = \`child\`;
+        let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
+        if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
+        w4 = new W4(owner, props4);
+        context.__owl__.cmap[4] = w4.__owl__.id;
+        def3 = w4._prepare();
+        def3 = def3.then(vnode=>{vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (e.target !== vn.elm) {return}e.preventDefault();owner['onEv'].call(owner, e);});}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+    } else {
+        def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
+    }
+    extra.promises.push(def3);
+    return vn1;
+}"
+`;
+
+exports[`other directives with t-widget t-on with self modifier 1`] = `
+"function anonymous(context,extra
+) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    //WIDGET
+    let _2_index = c1.length;
+    c1.push(null);
+    let def3;
+    let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
+    let props4 = {};
+    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+            def3 = w4.__owl__.renderPromise;
+        } else {
+            w4.destroy();
+            w4 = false;
+        }
+    }
+    if (!w4) {
+        let widgetKey4 = \`child\`;
+        let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
+        if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
+        w4 = new W4(owner, props4);
+        context.__owl__.cmap[4] = w4.__owl__.id;
+        def3 = w4._prepare();
+        def3 = def3.then(vnode=>{vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', owner['onEv1'].bind(owner));vn.elm.addEventListener('ev-2', function (e) {if (e.target !== vn.elm) {return}owner['onEv2'].call(owner, e);});}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+    } else {
+        def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
+    }
+    extra.promises.push(def3);
+    return vn1;
+}"
+`;
+
+exports[`other directives with t-widget t-on with stop and/or prevent modifiers 1`] = `
+"function anonymous(context,extra
+) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    //WIDGET
+    let _2_index = c1.length;
+    c1.push(null);
+    let def3;
+    let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
+    let props4 = {};
+    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+            def3 = w4.__owl__.renderPromise;
+        } else {
+            w4.destroy();
+            w4 = false;
+        }
+    }
+    if (!w4) {
+        let widgetKey4 = \`child\`;
+        let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
+        if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
+        w4 = new W4(owner, props4);
+        context.__owl__.cmap[4] = w4.__owl__.id;
+        def3 = w4._prepare();
+        def3 = def3.then(vnode=>{vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {e.stopPropagation();owner['onEv1'].call(owner, e);});vn.elm.addEventListener('ev-2', function (e) {e.preventDefault();owner['onEv2'].call(owner, e);});vn.elm.addEventListener('ev-3', function (e) {e.stopPropagation();e.preventDefault();owner['onEv3'].call(owner, e);});}};let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+    } else {
+        def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
+    }
+    extra.promises.push(def3);
+    return vn1;
+}"
+`;
+
+exports[`random stuff/miscellaneous snapshotting compiled code 1`] = `
+"function anonymous(context,extra
+) {
+    let utils = this.utils;
+    let QWeb = this.constructor;
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    //WIDGET
+    let key5 = 'somestring';
+    let _2_index = c1.length;
+    c1.push(null);
+    let def3;
+    let w4 = key5 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[key5]] : false;
+    let props4 = {flag:context['state'].flag};
+    if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
+        if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
+            def3 = w4.__owl__.renderPromise;
+        } else {
+            w4.destroy();
+            w4 = false;
+        }
+    }
+    if (!w4) {
+        let widgetKey4 = \`child\`;
+        let W4 = context.widgets && context.widgets[widgetKey4] || QWeb.widgets[widgetKey4];
+        if (!W4) {throw new Error('Cannot find the definition of widget \\"' + widgetKey4 + '\\"')}
+        w4 = new W4(owner, props4);
+        context.__owl__.cmap[key5] = w4.__owl__.id;
+        def3 = w4._prepare();
+        def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: key5, hook: {insert(vn) {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+    } else {
+        def3 = def3 || w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
         def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
     }
     extra.promises.push(def3);

tests/__snapshots__/qweb.test.ts.snap

@@ -1,32 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`animations t-transition, on a simple node 1`] = `
+exports[`attributes class and t-attf-class with ternary operation 1`] = `
 "function anonymous(context,extra
 ) {
     var h = this.utils.h;
-    let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
-    let c2 = [], p2 = {key:2};
-    var vn2 = h('span', p2, c2);
-    c1.push(vn2);
-    p2.hook = {
-      create: (_, n) => {
-        this.utils.transitionCreate(n.elm, 'chimay');
-      },
-      insert: vn => {
-        this.utils.transitionInsert(vn.elm, 'chimay');
-      },
-      remove: (vn, rm) => {
-        this.utils.transitionRemove(vn.elm, 'chimay', rm);
-      },
-    };
-    c2.push({text: \`blue\`});
-    return vn1;
+    var _1 = 'hello ' + (context['value'] ? 'world' : '');
+    let c2 = [], p2 = {key:2,attrs:{class: _1}};
+    var vn2 = h('div', p2, c2);
+    return vn2;
 }"
 `;
 
-exports[`animations t-transition, on a simple node 2`] = `"<span class=\\"chimay-enter chimay-enter-active\\">blue</span>"`;
-
 exports[`attributes dynamic attribute falsy variable  1`] = `
 "function anonymous(context,extra
 ) {
@@ -86,7 +70,7 @@ exports[`attributes format expression 1`] = `
 "function anonymous(context,extra
 ) {
     var h = this.utils.h;
-    var _1 = \`\${context['value'] + 37}\`;
+    var _1 = (context['value'] + 37);
     let c2 = [], p2 = {key:2,attrs:{foo: _1}};
     var vn2 = h('div', p2, c2);
     return vn2;
@@ -97,7 +81,7 @@ exports[`attributes format expression, other format 1`] = `
 "function anonymous(context,extra
 ) {
     var h = this.utils.h;
-    var _1 = \`\${context['value'] + 37}\`;
+    var _1 = (context['value'] + 37);
     let c2 = [], p2 = {key:2,attrs:{foo: _1}};
     var vn2 = h('div', p2, c2);
     return vn2;
@@ -335,10 +319,11 @@ exports[`foreach does not pollute the rendering context 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     if (typeof _2 === 'number') { _2 = Array.from(Array(_2).keys())}
     var _3 = _2 instanceof Array ? _2 : Object.keys(_2);
+    var _length3 = _3.length;
     var _4 = _2 instanceof Array ? _2 : Object.values(_2);
-    for (let i = 0; i < _3.length; i++) {
+    for (let i = 0; i < _length3; i++) {
         context.item_first = i === 0;
-        context.item_last = i === _3.length - 1;
+        context.item_last = i === _length3 - 1;
         context.item_parity = i % 2 === 0 ? 'even' : 'odd';
         context.item_index = i;
         context.item = _3[i];
@@ -363,10 +348,11 @@ exports[`foreach iterate on items (on a element node) 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     if (typeof _2 === 'number') { _2 = Array.from(Array(_2).keys())}
     var _3 = _2 instanceof Array ? _2 : Object.keys(_2);
+    var _length3 = _3.length;
     var _4 = _2 instanceof Array ? _2 : Object.values(_2);
-    for (let i = 0; i < _3.length; i++) {
+    for (let i = 0; i < _length3; i++) {
         context.item_first = i === 0;
-        context.item_last = i === _3.length - 1;
+        context.item_last = i === _length3 - 1;
         context.item_parity = i % 2 === 0 ? 'even' : 'odd';
         context.item_index = i;
         context.item = _3[i];
@@ -394,10 +380,11 @@ exports[`foreach iterate on items 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     if (typeof _2 === 'number') { _2 = Array.from(Array(_2).keys())}
     var _3 = _2 instanceof Array ? _2 : Object.keys(_2);
+    var _length3 = _3.length;
     var _4 = _2 instanceof Array ? _2 : Object.values(_2);
-    for (let i = 0; i < _3.length; i++) {
+    for (let i = 0; i < _length3; i++) {
         context.item_first = i === 0;
-        context.item_last = i === _3.length - 1;
+        context.item_last = i === _length3 - 1;
         context.item_parity = i % 2 === 0 ? 'even' : 'odd';
         context.item_index = i;
         context.item = _3[i];
@@ -434,10 +421,11 @@ exports[`foreach iterate, dict param 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     if (typeof _2 === 'number') { _2 = Array.from(Array(_2).keys())}
     var _3 = _2 instanceof Array ? _2 : Object.keys(_2);
+    var _length3 = _3.length;
     var _4 = _2 instanceof Array ? _2 : Object.values(_2);
-    for (let i = 0; i < _3.length; i++) {
+    for (let i = 0; i < _length3; i++) {
         context.item_first = i === 0;
-        context.item_last = i === _3.length - 1;
+        context.item_last = i === _length3 - 1;
         context.item_parity = i % 2 === 0 ? 'even' : 'odd';
         context.item_index = i;
         context.item = _3[i];
@@ -479,10 +467,11 @@ exports[`foreach iterate, integer param 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     if (typeof _2 === 'number') { _2 = Array.from(Array(_2).keys())}
     var _3 = _2 instanceof Array ? _2 : Object.keys(_2);
+    var _length3 = _3.length;
     var _4 = _2 instanceof Array ? _2 : Object.values(_2);
-    for (let i = 0; i < _3.length; i++) {
+    for (let i = 0; i < _length3; i++) {
         context.item_first = i === 0;
-        context.item_last = i === _3.length - 1;
+        context.item_last = i === _length3 - 1;
         context.item_parity = i % 2 === 0 ? 'even' : 'odd';
         context.item_index = i;
         context.item = _3[i];
@@ -519,10 +508,11 @@ exports[`foreach iterate, position 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     if (typeof _2 === 'number') { _2 = Array.from(Array(_2).keys())}
     var _3 = _2 instanceof Array ? _2 : Object.keys(_2);
+    var _length3 = _3.length;
     var _4 = _2 instanceof Array ? _2 : Object.values(_2);
-    for (let i = 0; i < _3.length; i++) {
+    for (let i = 0; i < _length3; i++) {
         context.elem_first = i === 0;
-        context.elem_last = i === _3.length - 1;
+        context.elem_last = i === _length3 - 1;
         context.elem_parity = i % 2 === 0 ? 'even' : 'odd';
         context.elem_index = i;
         context.elem = _3[i];
@@ -556,10 +546,11 @@ exports[`foreach warn if no key in some case 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     if (typeof _2 === 'number') { _2 = Array.from(Array(_2).keys())}
     var _3 = _2 instanceof Array ? _2 : Object.keys(_2);
+    var _length3 = _3.length;
     var _4 = _2 instanceof Array ? _2 : Object.values(_2);
-    for (let i = 0; i < _3.length; i++) {
+    for (let i = 0; i < _length3; i++) {
         context.item_first = i === 0;
-        context.item_last = i === _3.length - 1;
+        context.item_last = i === _length3 - 1;
         context.item_parity = i % 2 === 0 ? 'even' : 'odd';
         context.item_index = i;
         context.item = _3[i];
@@ -616,10 +607,11 @@ exports[`misc global 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     if (typeof _2 === 'number') { _2 = Array.from(Array(_2).keys())}
     var _3 = _2 instanceof Array ? _2 : Object.keys(_2);
+    var _length3 = _3.length;
     var _4 = _2 instanceof Array ? _2 : Object.values(_2);
-    for (let i = 0; i < _3.length; i++) {
+    for (let i = 0; i < _length3; i++) {
         context.value_first = i === 0;
-        context.value_last = i === _3.length - 1;
+        context.value_last = i === _length3 - 1;
         context.value_parity = i % 2 === 0 ? 'even' : 'odd';
         context.value_index = i;
         context.value = _3[i];
@@ -1125,10 +1117,11 @@ exports[`t-key t-key directive in a list 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     if (typeof _2 === 'number') { _2 = Array.from(Array(_2).keys())}
     var _3 = _2 instanceof Array ? _2 : Object.keys(_2);
+    var _length3 = _3.length;
     var _4 = _2 instanceof Array ? _2 : Object.values(_2);
-    for (let i = 0; i < _3.length; i++) {
+    for (let i = 0; i < _length3; i++) {
         context.beer_first = i === 0;
-        context.beer_last = i === _3.length - 1;
+        context.beer_last = i === _length3 - 1;
         context.beer_parity = i % 2 === 0 ? 'even' : 'odd';
         context.beer_index = i;
         context.beer = _3[i];
@@ -1154,7 +1147,10 @@ exports[`t-on can bind event handler 1`] = `
     var h = this.utils.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    extra.handlers['click' + 1] = extra.handlers['click' + 1] || (context['add'] || (function () {throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner);
+    if (!context['add']) {
+        throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['click' + 1] = extra.handlers['click' + 1] || context['add'].bind(owner);
     p1.on['click'] = extra.handlers['click' + 1];
     c1.push({text: \`Click\`});
     return vn1;
@@ -1168,20 +1164,26 @@ exports[`t-on can bind handlers with arguments 1`] = `
     var h = this.utils.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    p1.on['click'] = (context['add'] || (function () {throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner, 5);
+    if (!context['add']) {
+        throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)
+    }
+    p1.on['click'] = context['add'].bind(owner, 5);
     c1.push({text: \`Click\`});
     return vn1;
 }"
 `;
 
-exports[`t-on can bind handlers with empty object (with non empty inner string 1`] = `
+exports[`t-on can bind handlers with empty object (with non empty inner string) 1`] = `
 "function anonymous(context,extra
 ) {
     let owner = context;
     var h = this.utils.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    p1.on['click'] = (context['doSomething'] || (function () {throw new Error('Missing handler \\\\'' + 'doSomething' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner, {});
+    if (!context['doSomething']) {
+        throw new Error('Missing handler \\\\'' + 'doSomething' + \`\\\\' when evaluating template 'test'\`)
+    }
+    p1.on['click'] = context['doSomething'].bind(owner, {});
     c1.push({text: \`Click\`});
     return vn1;
 }"
@@ -1194,7 +1196,10 @@ exports[`t-on can bind handlers with empty object 1`] = `
     var h = this.utils.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    p1.on['click'] = (context['doSomething'] || (function () {throw new Error('Missing handler \\\\'' + 'doSomething' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner, {});
+    if (!context['doSomething']) {
+        throw new Error('Missing handler \\\\'' + 'doSomething' + \`\\\\' when evaluating template 'test'\`)
+    }
+    p1.on['click'] = context['doSomething'].bind(owner, {});
     c1.push({text: \`Click\`});
     return vn1;
 }"
@@ -1212,10 +1217,11 @@ exports[`t-on can bind handlers with loop variable as argument 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     if (typeof _2 === 'number') { _2 = Array.from(Array(_2).keys())}
     var _3 = _2 instanceof Array ? _2 : Object.keys(_2);
+    var _length3 = _3.length;
     var _4 = _2 instanceof Array ? _2 : Object.values(_2);
-    for (let i = 0; i < _3.length; i++) {
+    for (let i = 0; i < _length3; i++) {
         context.action_first = i === 0;
-        context.action_last = i === _3.length - 1;
+        context.action_last = i === _length3 - 1;
         context.action_parity = i % 2 === 0 ? 'even' : 'odd';
         context.action_index = i;
         context.action = _3[i];
@@ -1226,7 +1232,10 @@ exports[`t-on can bind handlers with loop variable as argument 1`] = `
         let c6 = [], p6 = {key:6,on:{}};
         var vn6 = h('a', p6, c6);
         c5.push(vn6);
-        p6.on['click'] = (context['activate'] || (function () {throw new Error('Missing handler \\\\'' + 'activate' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner, context['action']);
+        if (!context['activate']) {
+            throw new Error('Missing handler \\\\'' + 'activate' + \`\\\\' when evaluating template 'test'\`)
+        }
+        p6.on['click'] = context['activate'].bind(owner, context['action']);
         c6.push({text: \`link\`});
     }
     return vn1;
@@ -1240,7 +1249,10 @@ exports[`t-on can bind handlers with object arguments 1`] = `
     var h = this.utils.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    p1.on['click'] = (context['add'] || (function () {throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner, {val: 5});
+    if (!context['add']) {
+        throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)
+    }
+    p1.on['click'] = context['add'].bind(owner, {val: 5});
     c1.push({text: \`Click\`});
     return vn1;
 }"
@@ -1253,9 +1265,15 @@ exports[`t-on can bind two event handlers 1`] = `
     var h = this.utils.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    extra.handlers['click' + 1] = extra.handlers['click' + 1] || (context['handleClick'] || (function () {throw new Error('Missing handler \\\\'' + 'handleClick' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner);
+    if (!context['handleClick']) {
+        throw new Error('Missing handler \\\\'' + 'handleClick' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['click' + 1] = extra.handlers['click' + 1] || context['handleClick'].bind(owner);
     p1.on['click'] = extra.handlers['click' + 1];
-    extra.handlers['dblclick' + 1] = extra.handlers['dblclick' + 1] || (context['handleDblClick'] || (function () {throw new Error('Missing handler \\\\'' + 'handleDblClick' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner);
+    if (!context['handleDblClick']) {
+        throw new Error('Missing handler \\\\'' + 'handleDblClick' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['dblclick' + 1] = extra.handlers['dblclick' + 1] || context['handleDblClick'].bind(owner);
     p1.on['dblclick'] = extra.handlers['dblclick' + 1];
     c1.push({text: \`Click\`});
     return vn1;
@@ -1269,13 +1287,135 @@ exports[`t-on handler is bound to proper owner 1`] = `
     var h = this.utils.h;
     let c1 = [], p1 = {key:1,on:{}};
     var vn1 = h('button', p1, c1);
-    extra.handlers['click' + 1] = extra.handlers['click' + 1] || (context['add'] || (function () {throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)})()).bind(owner);
+    if (!context['add']) {
+        throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['click' + 1] = extra.handlers['click' + 1] || context['add'].bind(owner);
     p1.on['click'] = extra.handlers['click' + 1];
     c1.push({text: \`Click\`});
     return vn1;
 }"
 `;
 
+exports[`t-on t-on with prevent and self modifiers (order matters) 1`] = `
+"function anonymous(context,extra
+) {
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    let c2 = [], p2 = {key:2,on:{}};
+    var vn2 = h('button', p2, c2);
+    c1.push(vn2);
+    if (!context['onClick']) {
+        throw new Error('Missing handler \\\\'' + 'onClick' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {e.preventDefault();if (e.target !== this.elm) {return}context['onClick'].call(owner, e);};
+    p2.on['click'] = extra.handlers['click' + 2];
+    let c3 = [], p3 = {key:3};
+    var vn3 = h('span', p3, c3);
+    c2.push(vn3);
+    c3.push({text: \`Button\`});
+    return vn1;
+}"
+`;
+
+exports[`t-on t-on with prevent and/or stop modifiers 1`] = `
+"function anonymous(context,extra
+) {
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    let c2 = [], p2 = {key:2,on:{}};
+    var vn2 = h('button', p2, c2);
+    c1.push(vn2);
+    if (!context['onClickPrevented']) {
+        throw new Error('Missing handler \\\\'' + 'onClickPrevented' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {e.preventDefault();context['onClickPrevented'].call(owner, e);};
+    p2.on['click'] = extra.handlers['click' + 2];
+    c2.push({text: \`Button 1\`});
+    let c3 = [], p3 = {key:3,on:{}};
+    var vn3 = h('button', p3, c3);
+    c1.push(vn3);
+    if (!context['onClickStopped']) {
+        throw new Error('Missing handler \\\\'' + 'onClickStopped' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['click' + 3] = extra.handlers['click' + 3] || function (e) {e.stopPropagation();context['onClickStopped'].call(owner, e);};
+    p3.on['click'] = extra.handlers['click' + 3];
+    c3.push({text: \`Button 2\`});
+    let c4 = [], p4 = {key:4,on:{}};
+    var vn4 = h('button', p4, c4);
+    c1.push(vn4);
+    if (!context['onClickPreventedAndStopped']) {
+        throw new Error('Missing handler \\\\'' + 'onClickPreventedAndStopped' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['click' + 4] = extra.handlers['click' + 4] || function (e) {e.preventDefault();e.stopPropagation();context['onClickPreventedAndStopped'].call(owner, e);};
+    p4.on['click'] = extra.handlers['click' + 4];
+    c4.push({text: \`Button 3\`});
+    return vn1;
+}"
+`;
+
+exports[`t-on t-on with self and prevent modifiers (order matters) 1`] = `
+"function anonymous(context,extra
+) {
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    let c2 = [], p2 = {key:2,on:{}};
+    var vn2 = h('button', p2, c2);
+    c1.push(vn2);
+    if (!context['onClick']) {
+        throw new Error('Missing handler \\\\'' + 'onClick' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {if (e.target !== this.elm) {return}e.preventDefault();context['onClick'].call(owner, e);};
+    p2.on['click'] = extra.handlers['click' + 2];
+    let c3 = [], p3 = {key:3};
+    var vn3 = h('span', p3, c3);
+    c2.push(vn3);
+    c3.push({text: \`Button\`});
+    return vn1;
+}"
+`;
+
+exports[`t-on t-on with self modifier 1`] = `
+"function anonymous(context,extra
+) {
+    let owner = context;
+    var h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    let c2 = [], p2 = {key:2,on:{}};
+    var vn2 = h('button', p2, c2);
+    c1.push(vn2);
+    if (!context['onClick']) {
+        throw new Error('Missing handler \\\\'' + 'onClick' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['click' + 2] = extra.handlers['click' + 2] || context['onClick'].bind(owner);
+    p2.on['click'] = extra.handlers['click' + 2];
+    let c3 = [], p3 = {key:3};
+    var vn3 = h('span', p3, c3);
+    c2.push(vn3);
+    c3.push({text: \`Button\`});
+    let c4 = [], p4 = {key:4,on:{}};
+    var vn4 = h('button', p4, c4);
+    c1.push(vn4);
+    if (!context['onClickSelf']) {
+        throw new Error('Missing handler \\\\'' + 'onClickSelf' + \`\\\\' when evaluating template 'test'\`)
+    }
+    extra.handlers['click' + 4] = extra.handlers['click' + 4] || function (e) {if (e.target !== this.elm) {return}context['onClickSelf'].call(owner, e);};
+    p4.on['click'] = extra.handlers['click' + 4];
+    let c5 = [], p5 = {key:5};
+    var vn5 = h('span', p5, c5);
+    c4.push(vn5);
+    c5.push({text: \`Button\`});
+    return vn1;
+}"
+`;
+
 exports[`t-raw literal 1`] = `
 "function anonymous(context,extra
 ) {
@@ -1365,7 +1505,7 @@ exports[`t-ref can get a dynamic ref on a node 1`] = `
     let c2 = [], p2 = {key:2};
     var vn2 = h('span', p2, c2);
     c1.push(vn2);
-    const ref3 = 'myspan' + 3
+    const ref3 = \`myspan\${context['id']}\`;
     p2.hook = {
       create: (_, n) => {
         context.refs[ref3] = n.elm;
@@ -1384,7 +1524,7 @@ exports[`t-ref can get a ref on a node 1`] = `
     let c2 = [], p2 = {key:2};
     var vn2 = h('span', p2, c2);
     c1.push(vn2);
-    const ref3 = 'myspan'
+    const ref3 = \`myspan\`;
     p2.hook = {
       create: (_, n) => {
         context.refs[ref3] = n.elm;
@@ -1405,10 +1545,11 @@ exports[`t-ref refs in a loop 1`] = `
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
     if (typeof _2 === 'number') { _2 = Array.from(Array(_2).keys())}
     var _3 = _2 instanceof Array ? _2 : Object.keys(_2);
+    var _length3 = _3.length;
     var _4 = _2 instanceof Array ? _2 : Object.values(_2);
-    for (let i = 0; i < _3.length; i++) {
+    for (let i = 0; i < _length3; i++) {
         context.item_first = i === 0;
-        context.item_last = i === _3.length - 1;
+        context.item_last = i === _length3 - 1;
         context.item_parity = i % 2 === 0 ? 'even' : 'odd';
         context.item_index = i;
         context.item = _3[i];
@@ -1416,7 +1557,7 @@ exports[`t-ref refs in a loop 1`] = `
         let c5 = [], p5 = {key:context['item']};
         var vn5 = h('div', p5, c5);
         c1.push(vn5);
-        const ref6 = context['item']
+        const ref6 = (context['item']);
         p5.hook = {
           create: (_, n) => {
             context.refs[ref6] = n.elm;
@@ -1563,10 +1704,11 @@ exports[`t-set t-set should reuse variable if possible 1`] = `
     if (!_3) { throw new Error('QWeb error: Invalid loop expression')}
     if (typeof _3 === 'number') { _3 = Array.from(Array(_3).keys())}
     var _4 = _3 instanceof Array ? _3 : Object.keys(_3);
+    var _length4 = _4.length;
     var _5 = _3 instanceof Array ? _3 : Object.values(_3);
-    for (let i = 0; i < _4.length; i++) {
+    for (let i = 0; i < _length4; i++) {
         context.elem_first = i === 0;
-        context.elem_last = i === _4.length - 1;
+        context.elem_last = i === _length4 - 1;
         context.elem_parity = i % 2 === 0 ? 'even' : 'odd';
         context.elem_index = i;
         context.elem = _4[i];

tests/__snapshots__/untitled.js

@@ -0,0 +1,33 @@
+function anonymous(context, extra) {
+ var h = this.utils.h;
+          let c1 = [], p1 = {key:1};
+          var vn1 = h('div', p1, c1);
+          if (context['state'].display) {
+              //WIDGET
+              let _2_index = c1.length;
+              c1.push(null);
+              let def3;
+              let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
+              let props4 = {};
+              if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode && props4 !== w4.__owl__.renderProps) {
+                  w4.destroy();
+                  w4 = false
+              }
+              if (!w4) {
+                  let W4 = context.widgets['Child'];
+                  if (!W4) {throw new Error(`Cannot find the definition of widget "Child"`)}
+                  w4 = new W4(owner, props4);
+                  context.__owl__.cmap[4] = w4.__owl__.id;
+                  def3 = w4._prepare();
+                  def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: 4, hook: {insert: (vn) => {let nvn=w4._mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;this.utils.transitionInsert(vn.elm, 'chimay');},remove: () => {},destroy: (vn) => {let finalize = () => {
+                w4.destroy();
+              };
+              this.utils.transitionRemove(vn.elm, 'chimay', finalize);}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+              } else {
+                  def3 = w4._updateProps(props4, extra.forceUpdate, extra.patchQueue);
+                  def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let pvnode=w4.__owl__.pvnode;c1[_2_index]=pvnode;});
+              }
+              extra.promises.push(def3);
+          }
+
+}

tests/animations.test.ts

@@ -0,0 +1,290 @@
+import { Component, Env } from "../src/component";
+import { QWeb } from "../src/qweb_core";
+import {
+  makeDeferred,
+  makeTestFixture,
+  makeTestEnv,
+  nextTick,
+  patchNextFrame,
+  renderToDOM,
+  unpatchNextFrame
+} from "./helpers";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+// We create before each test:
+// - fixture: a div, appended to the DOM, intended to be the target of dom
+//   manipulations.  Note that it is removed after each test.
+// - qweb: a new QWeb instance
+// - env: a WEnv, necessary to create new widgets
+// - cssEl: a stylesheet injected into the dom
+
+let fixture: HTMLElement;
+let qweb: QWeb;
+let env: Env;
+let cssEl: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+  env = makeTestEnv();
+  qweb = new QWeb();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+class Widget extends Component<any, any, any> {}
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+describe("animations", () => {
+  beforeEach(() => {
+    cssEl = document.createElement("style");
+    let css = `
+      .chimay-enter-active, .chimay-leave-active {
+        transition-property: opacity;
+        transition-duration: 0.1s;
+      }
+      .chimay-enter, .chimay-leave-to {
+        opacity: 0;
+      }
+    `;
+    cssEl.textContent = css.trim();
+    document.head.appendChild(cssEl);
+  });
+
+  afterEach(() => {
+    document.head.removeChild(cssEl);
+    unpatchNextFrame();
+  });
+
+  test("t-transition, on a simple node (insert)", async () => {
+    expect.assertions(5);
+    qweb.addTemplate("test", `<span t-transition="chimay">blue</span>`);
+
+    let def = makeDeferred();
+    patchNextFrame(cb => {
+      expect(node.className).toBe("chimay-enter chimay-enter-active");
+      cb();
+      expect(node.className).toBe("chimay-enter-active chimay-enter-to");
+      def.resolve();
+    });
+    let node: HTMLElement = <HTMLElement>renderToDOM(qweb, "test");
+
+    expect(node.className).toBe("chimay-enter chimay-enter-active");
+    await def; // wait for the mocked repaint to be done
+    node.dispatchEvent(new Event("transitionend")); // mock end of css transition
+    expect(node.className).toBe("");
+  });
+
+  test("t-transition with no delay/duration", async () => {
+    expect.assertions(4);
+    qweb.addTemplate("test", `<span t-transition="jupiler">blue</span>`);
+
+    let def = makeDeferred();
+    patchNextFrame(cb => {
+      expect(node.className).toBe("jupiler-enter jupiler-enter-active");
+      cb();
+      expect(node.className).toBe("");
+      def.resolve();
+    });
+    let node: HTMLElement = <HTMLElement>renderToDOM(qweb, "test");
+    expect(node.className).toBe("jupiler-enter jupiler-enter-active");
+    await def;
+  });
+
+  test("t-transition on a conditional node", async () => {
+    expect.assertions(7);
+
+    env.qweb.addTemplate(
+      "TestWidget",
+      `<div><span t-if="!state.hide" t-transition="chimay">blue</span></div>`
+    );
+    class TestWidget extends Widget {
+      state = { hide: false };
+    }
+    const widget = new TestWidget(env);
+
+    // insert widget into the DOM
+    let def = makeDeferred();
+    var spanNode;
+    patchNextFrame(cb => {
+      expect(spanNode.className).toBe("chimay-enter chimay-enter-active");
+      cb();
+      expect(spanNode.className).toBe("chimay-enter-active chimay-enter-to");
+      def.resolve();
+    });
+    await widget.mount(fixture);
+    spanNode = widget.el!.children[0];
+    expect(spanNode.className).toBe("chimay-enter chimay-enter-active");
+    await def; // wait for the mocked repaint to be done
+    spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
+    expect(spanNode.className).toBe("");
+
+    // remove span from the DOM
+    def = makeDeferred();
+    widget.state.hide = true;
+    patchNextFrame(cb => {
+      expect(spanNode.className).toBe("chimay-leave chimay-leave-active");
+      cb();
+      expect(spanNode.className).toBe("chimay-leave-active chimay-leave-to");
+      def.resolve();
+    });
+    await def; // wait for the mocked repaint to be done
+    spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
+    expect(spanNode.className).toBe("");
+  });
+
+  test("t-transition combined with t-ref", async () => {
+    expect.assertions(5);
+
+    env.qweb.addTemplate(
+      "TestWidget",
+      `<div><span t-ref="span" t-transition="chimay">blue</span></div>`
+    );
+    class TestWidget extends Widget {
+      state = { hide: false };
+    }
+    const widget = new TestWidget(env);
+
+    // insert widget into the DOM
+    let def = makeDeferred();
+    var spanNode;
+    patchNextFrame(cb => {
+      expect(spanNode.className).toBe("chimay-enter chimay-enter-active");
+      cb();
+      expect(spanNode.className).toBe("chimay-enter-active chimay-enter-to");
+      def.resolve();
+    });
+    await widget.mount(fixture);
+    spanNode = widget.el!.children[0];
+    expect(widget.refs.span).toBe(spanNode);
+    expect(spanNode.className).toBe("chimay-enter chimay-enter-active");
+    await def; // wait for the mocked repaint to be done
+    spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
+    expect(spanNode.className).toBe("");
+  });
+
+  test("t-transition combined with t-widget", async () => {
+    expect.assertions(5);
+
+    env.qweb.addTemplate(
+      "Parent",
+      `<div><t t-widget="Child" t-transition="chimay"/></div>`
+    );
+    env.qweb.addTemplate("Child", `<span>blue</span>`);
+    class Parent extends Widget {
+      widgets = { Child: Child };
+    }
+    class Child extends Widget {}
+    const widget = new Parent(env);
+
+    let def = makeDeferred();
+    var spanNode;
+    patchNextFrame(cb => {
+      expect(fixture.innerHTML).toBe(
+        '<div><span class="chimay-enter chimay-enter-active">blue</span></div>'
+      );
+      cb();
+      expect(fixture.innerHTML).toBe(
+        '<div><span class="chimay-enter-active chimay-enter-to">blue</span></div>'
+      );
+      def.resolve();
+    });
+    await widget.mount(fixture);
+    spanNode = widget.el!.children[0];
+
+    expect(env.qweb.templates.Parent.fn.toString()).toMatchSnapshot();
+    expect(fixture.innerHTML).toBe(
+      '<div><span class="chimay-enter chimay-enter-active">blue</span></div>'
+    );
+
+    await def; // wait for the mocked repaint to be done
+    spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
+    expect(fixture.innerHTML).toBe('<div><span class="">blue</span></div>');
+  });
+
+  test("t-transition combined with t-widget and t-if", async () => {
+    expect.assertions(8);
+
+    env.qweb.addTemplate(
+      "Parent",
+      `<div><t t-if="state.display" t-widget="Child" t-transition="chimay"/></div>`
+    );
+    env.qweb.addTemplate("Child", `<span>blue</span>`);
+    class Parent extends Widget {
+      widgets = { Child: Child };
+      state = { display: true };
+    }
+    class Child extends Widget {}
+    const widget = new Parent(env);
+
+    let def = makeDeferred();
+    var spanNode;
+    patchNextFrame(cb => {
+      expect(fixture.innerHTML).toBe(
+        '<div><span class="chimay-enter chimay-enter-active">blue</span></div>'
+      );
+      cb();
+      expect(fixture.innerHTML).toBe(
+        '<div><span class="chimay-enter-active chimay-enter-to">blue</span></div>'
+      );
+      def.resolve();
+    });
+    await widget.mount(fixture);
+    spanNode = widget.el!.children[0];
+
+    expect(env.qweb.templates.Parent.fn.toString()).toMatchSnapshot();
+    expect(fixture.innerHTML).toBe(
+      '<div><span class="chimay-enter chimay-enter-active">blue</span></div>'
+    );
+
+    await def; // wait for the mocked repaint to be done
+    spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
+    expect(fixture.innerHTML).toBe('<div><span class="">blue</span></div>');
+
+    // remove span from the DOM
+    def = makeDeferred();
+    widget.state.display = false;
+    patchNextFrame(cb => {
+      expect(fixture.innerHTML).toBe(
+        '<div><span class="chimay-leave chimay-leave-active">blue</span></div>'
+      );
+      cb();
+      expect(fixture.innerHTML).toBe(
+        '<div><span class="chimay-leave-active chimay-leave-to">blue</span></div>'
+      );
+      def.resolve();
+    });
+    await def; // wait for the mocked repaint to be done
+    spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
+    expect(fixture.innerHTML).toBe("<div></div>");
+  });
+
+  test("t-transition combined with t-mounted", async () => {
+    env.qweb.addTemplate(
+      "TestWidget",
+      `<div><span t-if="state.flag" t-mounted="f" t-transition="chimay">blue</span></div>`
+    );
+    class TestWidget extends Widget {
+      state = { flag: false };
+      f() {}
+    }
+    const widget = new TestWidget(env);
+    widget.f = jest.fn();
+    await widget.mount(fixture);
+
+    patchNextFrame(cb => cb());
+    expect(widget.f).toHaveBeenCalledTimes(0);
+
+    widget.state.flag = true;
+    await nextTick();
+    expect(widget.f).toHaveBeenCalledTimes(1);
+    unpatchNextFrame();
+  });
+});

tests/component.test.ts

@@ -1,4 +1,5 @@
 import { Component, Env } from "../src/component";
+import { QWeb } from "../src/qweb_core";
 import {
   makeDeferred,
   makeTestFixture,
@@ -285,7 +286,7 @@ describe("lifecycle hooks", () => {
 
     env.qweb.addTemplate(
       "ParentWidget",
-      `<div>><t t-widget="child" t-props="{n:state.n}"/></div>`
+      `<div><t t-widget="child" n="state.n"/></div>`
     );
     class ParentWidget extends Widget {
       widgets = { child: ChildWidget };
@@ -299,7 +300,7 @@ describe("lifecycle hooks", () => {
     }
     env.qweb.addTemplate(
       "ChildWidget",
-      `<div><t t-widget="childchild" t-props="{n:props.n}"/></div>`
+      `<div><t t-widget="childchild" n="props.n"/></div>`
     );
     class ChildWidget extends Widget {
       widgets = { childchild: ChildChildWidget };
@@ -452,7 +453,7 @@ describe("lifecycle hooks", () => {
       `
           <div>
             <div t-if="state.flag">
-              <t t-widget="ChildWidget" t-props="{n: state.n}"/>
+              <t t-widget="ChildWidget" n="state.n"/>
             </div>
           </div>`
     );
@@ -533,7 +534,7 @@ describe("lifecycle hooks", () => {
     let def = makeDeferred();
     env.qweb.addTemplate(
       "Parent",
-      '<span><t t-widget="Child" t-props="{n: state.n}"/></span>'
+      '<span><t t-widget="Child" n="state.n"/></span>'
     );
     class Parent extends Widget {
       state = { n: 1 };
@@ -585,7 +586,7 @@ describe("lifecycle hooks", () => {
 
     env.qweb.addTemplate(
       "Parent",
-      '<div><t t-widget="Child" t-props="{a:state.a}"/></div>'
+      '<div><t t-widget="Child" a="state.a"/></div>'
     );
     class Parent extends Widget {
       state = { a: 1 };
@@ -628,7 +629,7 @@ describe("lifecycle hooks", () => {
     let shouldUpdate = false;
     env.qweb.addTemplate(
       "Parent",
-      `<div><t t-widget="Child" t-props="{val:state.val}"/></div>`
+      `<div><t t-widget="Child" val="state.val"/></div>`
     );
     class Parent extends Widget {
       state = { val: 42 };
@@ -695,7 +696,7 @@ describe("lifecycle hooks", () => {
       "ParentWidget",
       `
         <div>
-            <t t-widget="child" t-props="{v: state.n}"/>
+            <t t-widget="child" v="state.n"/>
         </div>`
     );
     class ParentWidget extends Widget {
@@ -742,7 +743,7 @@ describe("lifecycle hooks", () => {
       "ParentWidget",
       `
         <div>
-            <t t-if="state.flag" t-widget="child" t-props="{v: state.n}" t-keepalive="1"/>
+            <t t-if="state.flag" t-widget="child" v="state.n" t-keepalive="1"/>
         </div>`
     );
     class ParentWidget extends Widget {
@@ -849,6 +850,30 @@ describe("composition", () => {
     expect(children(widget)[0].__owl__.parent).toBe(widget);
   });
 
+  test("can use widgets from the global registry", async () => {
+    QWeb.register("WidgetB", WidgetB);
+    env.qweb.addTemplate("ParentWidget", `<div><t t-widget="WidgetB"/></div>`);
+    class ParentWidget extends Widget {}
+    const widget = new ParentWidget(env);
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><div>world</div></div>");
+    delete QWeb.widgets["WidgetB"];
+  });
+
+  test("don't fallback to global registry if widget defined locally", async () => {
+    QWeb.register("WidgetB", WidgetB); // should not use this widget
+    env.qweb.addTemplate("ParentWidget", `<div><t t-widget="WidgetB"/></div>`);
+    env.qweb.addTemplate("AnotherWidgetB", `<span>Belgium</span>`);
+    class AnotherWidgetB extends Widget {}
+    class ParentWidget extends Widget {
+      widgets = { WidgetB: AnotherWidgetB };
+    }
+    const widget = new ParentWidget(env);
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><span>Belgium</span></div>");
+    delete QWeb.widgets["WidgetB"];
+  });
+
   test("throw a nice error if it cannot find widget", async () => {
     expect.assertions(1);
     env.qweb.addTemplate(
@@ -871,7 +896,7 @@ describe("composition", () => {
   test("t-refs on widget are widgets", async () => {
     env.qweb.addTemplate(
       "WidgetC",
-      `<div>Hello<t t-ref="'mywidgetb'" t-widget="b"/></div>`
+      `<div>Hello<t t-ref="mywidgetb" t-widget="b"/></div>`
     );
     class WidgetC extends Widget {
       widgets = { b: WidgetB };
@@ -887,7 +912,7 @@ describe("composition", () => {
       "ParentWidget",
       `
         <div>
-          <t t-foreach="state.list" t-as="elem" t-ref="'child'" t-key="elem" t-widget="Widget"/>
+          <t t-foreach="state.list" t-as="elem" t-ref="child" t-key="elem" t-widget="Widget"/>
         </div>`
     );
     class ParentWidget extends Widget {
@@ -913,8 +938,8 @@ describe("composition", () => {
       "ParentWidget",
       `
         <div>
-          <t t-if="state.child1" t-ref="'child1'" t-widget="Widget"/>
-          <t t-if="state.child2" t-ref="'child2'" t-widget="Widget"/>
+          <t t-if="state.child1" t-ref="child1" t-widget="Widget"/>
+          <t t-if="state.child2" t-ref="child2" t-widget="Widget"/>
         </div>`
     );
     class ParentWidget extends Widget {
@@ -979,7 +1004,7 @@ describe("composition", () => {
       "ParentWidget",
       `<div>
         <t t-foreach="state.items" t-as="item">
-          <t t-widget="Child" t-ref="item" t-key="item"/>
+          <t t-widget="Child" t-ref="{{item}}" t-key="item"/>
         </t>
       </div>`
     );
@@ -1128,7 +1153,7 @@ describe("composition", () => {
       `
         <div>
           <t t-foreach="state.numbers" t-as="number">
-            <t t-widget="ChildWidget" t-key="number" t-props="{n: number}"/>
+            <t t-widget="ChildWidget" t-key="number" n="number"/>
           </t>
         </div>`
     );
@@ -1229,13 +1254,43 @@ describe("composition", () => {
     `)
     );
   });
+
+  test("t-widget with dynamic value", async () => {
+    env.qweb.addTemplate(
+      "ParentWidget",
+      `<div><t t-widget="{{state.widget}}"/></div>`
+    );
+    class ParentWidget extends Widget {
+      widgets = { WidgetB };
+      state = { widget: "WidgetB" };
+    }
+    const widget = new ParentWidget(env);
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><div>world</div></div>");
+    expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
+  });
+
+  test("t-widget with dynamic value 2", async () => {
+    env.qweb.addTemplate(
+      "ParentWidget",
+      `<div><t t-widget="Widget{{state.widget}}"/></div>`
+    );
+    class ParentWidget extends Widget {
+      widgets = { WidgetB };
+      state = { widget: "B" };
+    }
+    const widget = new ParentWidget(env);
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><div>world</div></div>");
+    expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
+  });
 });
 
-describe("props evaluation (with t-props directive)", () => {
+describe("props evaluation ", () => {
   test("explicit object prop", async () => {
     env.qweb.addTemplate(
       "Parent",
-      `<div><t t-widget="child" t-props="{value: state.val}"/></div>`
+      `<div><t t-widget="child" value="state.val"/></div>`
     );
     class Parent extends Widget {
       widgets = { child: Child };
@@ -1256,37 +1311,13 @@ describe("props evaluation (with t-props directive)", () => {
     expect(fixture.innerHTML).toBe("<div><span>42</span></div>");
   });
 
-  test("object prop value", async () => {
-    env.qweb.addTemplate(
-      "Parent",
-      `<div><t t-widget="child" t-props="state"/></div>`
-    );
-    class Parent extends Widget {
-      widgets = { child: Child };
-      state = { val: 42 };
-    }
-
-    env.qweb.addTemplate("Child", `<span><t t-esc="state.someval"/></span>`);
-    class Child extends Widget {
-      state: { someval: number };
-      constructor(parent: Parent, props: { val: number }) {
-        super(parent);
-        this.state = { someval: props.val };
-      }
-    }
-
-    const widget = new Parent(env);
-    await widget.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><span>42</span></div>");
-  });
-
   test("accept ES6-like syntax for props (with getters)", async () => {
     env.qweb.addTemplate("Child", `<span><t t-esc="props.greetings"/></span>`);
     class Child extends Widget {}
 
     env.qweb.addTemplate(
       "Parent",
-      `<div><t t-widget="child" t-props="{greetings}"/></div>`
+      `<div><t t-widget="child" greetings="greetings"/></div>`
     );
     class Parent extends Widget {
       widgets = { child: Child };
@@ -1299,13 +1330,13 @@ describe("props evaluation (with t-props directive)", () => {
     expect(fixture.innerHTML).toBe("<div><span>hello aaron</span></div>");
   });
 
-  test("t-set works with t-props", async () => {
+  test("t-set works ", async () => {
     env.qweb.addTemplate(
       "Parent",
       `
         <div>
           <t t-set="val" t-value="42"/>
-          <t t-widget="child" t-props="{val:val}"/>
+          <t t-widget="child" val="val"/>
         </div>`
     );
     class Parent extends Widget {
@@ -1419,28 +1450,257 @@ describe("class and style attributes with t-widget", () => {
 
 describe("other directives with t-widget", () => {
   test("t-on works as expected", async () => {
-    let n = 0;
-    env.qweb.addTemplate(
-      "ParentWidget",
-      `<div><t t-widget="child" t-on-customevent="someMethod"/></div>`
-    );
+    expect.assertions(4);
+    env.qweb.addTemplates(`
+      <templates>
+        <div t-name="ParentWidget"><t t-widget="child" t-on-custom-event="someMethod"/></div>
+      </templates>
+    `);
     class ParentWidget extends Widget {
       widgets = { child: Child };
-      someMethod(arg) {
-        expect(arg).toBe(43);
-        n++;
+      n = 0;
+      someMethod(ev) {
+        expect(ev.detail).toBe(43);
+        this.n++;
       }
     }
     class Child extends Widget {}
     const widget = new ParentWidget(env);
     await widget.mount(fixture);
     let child = children(widget)[0];
-    expect(n).toBe(0);
-    child.trigger("customevent", 43);
-    expect(n).toBe(1);
+    expect(widget.n).toBe(0);
+    child.trigger("custom-event", 43);
+    expect(widget.n).toBe(1);
     child.destroy();
-    child.trigger("customevent", 43);
-    expect(n).toBe(1);
+    child.trigger("custom-event", 43);
+    expect(widget.n).toBe(1);
+  });
+
+  test("t-on with handler bound to argument", async () => {
+    expect.assertions(3);
+    env.qweb.addTemplates(`
+      <templates>
+        <div t-name="ParentWidget"><t t-widget="child" t-on-ev="onEv(3)"/></div>
+      </templates>
+    `);
+    class ParentWidget extends Widget {
+      widgets = { child: Child };
+      onEv(n, ev) {
+        expect(n).toBe(3);
+        expect(ev.detail).toBe(43);
+      }
+    }
+    class Child extends Widget {}
+    const widget = new ParentWidget(env);
+    await widget.mount(fixture);
+    let child = children(widget)[0];
+    child.trigger("ev", 43);
+    expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
+  });
+
+  test("t-on with handler bound to object", async () => {
+    expect.assertions(3);
+    env.qweb.addTemplates(`
+      <templates>
+        <div t-name="ParentWidget"><t t-widget="child" t-on-ev="onEv({val: 3})"/></div>
+      </templates>
+    `);
+    class ParentWidget extends Widget {
+      widgets = { child: Child };
+      onEv(o, ev) {
+        expect(o).toEqual({ val: 3 });
+        expect(ev.detail).toBe(43);
+      }
+    }
+    class Child extends Widget {}
+    const widget = new ParentWidget(env);
+    await widget.mount(fixture);
+    let child = children(widget)[0];
+    child.trigger("ev", 43);
+    expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
+  });
+
+  test("t-on with handler bound to empty object", async () => {
+    expect.assertions(3);
+    env.qweb.addTemplates(`
+      <templates>
+        <div t-name="ParentWidget"><t t-widget="child" t-on-ev="onEv({})"/></div>
+      </templates>
+    `);
+    class ParentWidget extends Widget {
+      widgets = { child: Child };
+      onEv(o, ev) {
+        expect(o).toEqual({});
+        expect(ev.detail).toBe(43);
+      }
+    }
+    class Child extends Widget {}
+    const widget = new ParentWidget(env);
+    await widget.mount(fixture);
+    let child = children(widget)[0];
+    child.trigger("ev", 43);
+    expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
+  });
+
+  test("t-on with handler bound to empty object (with non empty inner string)", async () => {
+    expect.assertions(3);
+    env.qweb.addTemplates(`
+      <templates>
+        <div t-name="ParentWidget"><t t-widget="child" t-on-ev="onEv({  })"/></div>
+      </templates>
+    `);
+    class ParentWidget extends Widget {
+      widgets = { child: Child };
+      onEv(o, ev) {
+        expect(o).toEqual({});
+        expect(ev.detail).toBe(43);
+      }
+    }
+    class Child extends Widget {}
+    const widget = new ParentWidget(env);
+    await widget.mount(fixture);
+    let child = children(widget)[0];
+    child.trigger("ev", 43);
+    expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
+  });
+
+  test("t-on with stop and/or prevent modifiers", async () => {
+    expect.assertions(7);
+    env.qweb.addTemplates(`
+      <templates>
+        <div t-name="ParentWidget">
+          <t t-widget="child"
+           t-on-ev-1.stop="onEv1"
+           t-on-ev-2.prevent="onEv2"
+           t-on-ev-3.stop.prevent="onEv3"/>
+        </div>
+      </templates>
+    `);
+    class ParentWidget extends Widget {
+      widgets = { child: Child };
+      onEv1(ev) {
+        expect(ev.defaultPrevented).toBe(false);
+        expect(ev.cancelBubble).toBe(true);
+      }
+      onEv2(ev) {
+        expect(ev.defaultPrevented).toBe(true);
+        expect(ev.cancelBubble).toBe(false);
+      }
+      onEv3(ev) {
+        expect(ev.defaultPrevented).toBe(true);
+        expect(ev.cancelBubble).toBe(true);
+      }
+    }
+    class Child extends Widget {}
+    const widget = new ParentWidget(env);
+    await widget.mount(fixture);
+
+    const child = children(widget)[0];
+    child.trigger("ev-1");
+    child.trigger("ev-2");
+    child.trigger("ev-3");
+    expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
+  });
+
+  test("t-on with self modifier", async () => {
+    env.qweb.addTemplates(`
+      <templates>
+        <div t-name="ParentWidget">
+          <t t-widget="child" t-on-ev-1="onEv1" t-on-ev-2.self="onEv2"/>
+        </div>
+        <div t-name="Child"><t t-widget="child"/></div>
+      </templates>
+    `);
+    const steps: string[] = [];
+    class ParentWidget extends Widget {
+      widgets = { child: Child };
+      onEv1(ev) {
+        steps.push("onEv1");
+      }
+      onEv2(ev) {
+        steps.push("onEv2");
+      }
+    }
+    class Child extends Widget {
+      widgets = { child: GrandChild };
+    }
+    class GrandChild extends Widget {}
+    const widget = new ParentWidget(env);
+    await widget.mount(fixture);
+
+    const child = children(widget)[0];
+    const grandChild = children(child)[0];
+    child.trigger("ev-1");
+    child.trigger("ev-2");
+    expect(steps).toEqual(["onEv1", "onEv2"]);
+    grandChild.trigger("ev-1");
+    grandChild.trigger("ev-2");
+    expect(steps).toEqual(["onEv1", "onEv2", "onEv1"]);
+    expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
+  });
+
+  test("t-on with self and prevent modifiers (order matters)", async () => {
+    env.qweb.addTemplates(`
+      <templates>
+        <div t-name="ParentWidget">
+          <t t-widget="child" t-on-ev.self.prevent="onEv"/>
+        </div>
+        <div t-name="Child"><t t-widget="child"/></div>
+      </templates>
+    `);
+    const steps: boolean[] = [];
+    class ParentWidget extends Widget {
+      widgets = { child: Child };
+      onEv() {}
+    }
+    class Child extends Widget {
+      widgets = { child: GrandChild };
+    }
+    class GrandChild extends Widget {}
+    const widget = new ParentWidget(env);
+    await widget.mount(fixture);
+    (<HTMLElement>fixture).addEventListener("ev", function(e) {
+      steps.push(e.defaultPrevented);
+    });
+
+    const child = children(widget)[0];
+    const grandChild = children(child)[0];
+    child.trigger("ev");
+    grandChild.trigger("ev");
+    expect(steps).toEqual([true, false]);
+    expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
+  });
+
+  test("t-on with prevent and self modifiers (order matters)", async () => {
+    env.qweb.addTemplates(`
+      <templates>
+        <div t-name="ParentWidget">
+          <t t-widget="child" t-on-ev.prevent.self="onEv"/>
+        </div>
+        <div t-name="Child"><t t-widget="child"/></div>
+      </templates>
+    `);
+    const steps: boolean[] = [];
+    class ParentWidget extends Widget {
+      widgets = { child: Child };
+      onEv() {}
+    }
+    class Child extends Widget {
+      widgets = { child: GrandChild };
+    }
+    class GrandChild extends Widget {}
+    const widget = new ParentWidget(env);
+    await widget.mount(fixture);
+    (<HTMLElement>fixture).addEventListener("ev", function(e) {
+      steps.push(e.defaultPrevented);
+    });
+
+    const child = children(widget)[0];
+    const grandChild = children(child)[0];
+    child.trigger("ev");
+    grandChild.trigger("ev");
+    expect(steps).toEqual([true, true]);
+    expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
   });
 
   test("t-if works with t-widget", async () => {
@@ -1571,7 +1831,7 @@ describe("random stuff/miscellaneous", () => {
     // twice.
     env.qweb.addTemplate(
       "Parent",
-      `<div><t t-widget="child" t-props="{flag:state.flag}"/></div>`
+      `<div><t t-widget="child" flag="state.flag"/></div>`
     );
     class Parent extends Widget {
       widgets = { child: Child };
@@ -1595,7 +1855,7 @@ describe("random stuff/miscellaneous", () => {
   test("snapshotting compiled code", async () => {
     env.qweb.addTemplate(
       "Parent",
-      `<div><t t-widget="child" t-key="'somestring'" t-props="{flag:state.flag}"/></div>`
+      `<div><t t-widget="child" t-key="'somestring'" flag="state.flag"/></div>`
     );
     class Parent extends Widget {
       widgets = { child: Child };
@@ -1613,20 +1873,6 @@ describe("random stuff/miscellaneous", () => {
     expect(env.qweb.templates.Parent.fn.toString()).toMatchSnapshot();
   });
 
-  test("t-props should not be undefined (snapshotting)", async () => {
-    env.qweb.addTemplate("Parent", `<div><t t-widget="child"/></div>`);
-    class Parent extends Widget {
-      widgets = { child: Child };
-    }
-
-    env.qweb.addTemplate("Child", `<span>abc</span>`);
-    class Child extends Widget {}
-
-    const widget = new Parent(env);
-    await widget.mount(fixture);
-    expect(env.qweb.templates.Parent.fn.toString()).toMatchSnapshot();
-  });
-
   test("component semantics", async () => {
     let steps: string[] = [];
     let c: C;
@@ -1775,7 +2021,6 @@ describe("random stuff/miscellaneous", () => {
       "C:_patch",
       "E:willUnmount",
       "E:destroy",
-      "E:destroy", // maybe should look into this
       "F:_patch(from _mount)",
       "F:mounted",
       "D:_patch",
@@ -1809,7 +2054,7 @@ describe("async rendering", () => {
     let n = 0;
     env.qweb.addTemplate(
       "W",
-      `<div><t t-if="state.val > 1"><t t-widget="Child" t-props="{val: state.val}"/></t></div>`
+      `<div><t t-if="state.val > 1"><t t-widget="Child" val="state.val"/></t></div>`
     );
     class W extends Widget {
       widgets = { Child };
@@ -1910,8 +2155,8 @@ describe("async rendering", () => {
       "Parent",
       `
         <div>
-          <t t-widget="ChildA" t-props="{val:state.valA}"/>
-          <t t-if="state.flagB"><t t-widget="ChildB" t-props="{val:state.valB}"/></t>
+          <t t-widget="ChildA" val="state.valA"/>
+          <t t-if="state.flagB"><t t-widget="ChildB" val="state.valB"/></t>
         </div>`
     );
     class Parent extends Widget {
@@ -1961,7 +2206,7 @@ describe("async rendering", () => {
                 <ul>
                     <t t-foreach="items" t-as="item">
                         <li t-key="'li_'+item">
-                            <t t-widget="Child" t-props="{ item }"/>
+                            <t t-widget="Child" item="item"/>
                         </li>
                     </t>
                 </ul>
@@ -2005,7 +2250,7 @@ describe("async rendering", () => {
     env.qweb.addTemplate(
       "Parent",
       `
-        <div><t t-if="state.flag"><t t-widget="Child" t-props="{val: state.val}"/></t></div>`
+        <div><t t-if="state.flag"><t t-widget="Child" val="state.val"/></t></div>`
     );
     class Parent extends Widget {
       widgets = { Child };
@@ -2030,6 +2275,50 @@ describe("async rendering", () => {
     await nextTick();
     expect(fixture.innerHTML).toBe("<div></div>");
   });
+
+  test("reuse widget if possible, in some async situation", async () => {
+    env.qweb.addTemplates(`
+        <templates>
+            <span t-name="ChildA">a<t t-esc="props.val"/></span>
+            <span t-name="ChildB">b<t t-esc="props.val"/></span>
+            <span t-name="Parent">
+                <t t-if="state.flag">
+                    <t t-widget="ChildA" val="state.valA"/>
+                    <t t-widget="ChildB" val="state.valB"/>
+                </t>
+            </span>
+        </templates>
+    `);
+
+    let destroyCount = 0;
+    class ChildA extends Widget {
+      destroy() {
+        destroyCount++;
+        super.destroy();
+      }
+    }
+    class ChildB extends Widget {
+      willStart(): any {
+        return new Promise(function() {});
+      }
+    }
+    class Parent extends Widget {
+      widgets = { ChildA, ChildB };
+      state = { valA: 1, valB: 2, flag: false };
+    }
+    const parent = new Parent(env);
+    await parent.mount(fixture);
+
+    expect(destroyCount).toBe(0);
+
+    parent.state.flag = true;
+    await nextTick();
+    expect(destroyCount).toBe(0);
+
+    parent.state.valB = 3;
+    await nextTick();
+    expect(destroyCount).toBe(0);
+  });
 });
 
 describe("updating environment", () => {
@@ -2155,7 +2444,7 @@ describe("widget and observable state", () => {
     expect.assertions(1);
     env.qweb.addTemplate(
       "Parent",
-      `<div><t t-widget="Child" t-props="state.obj"/></div>`
+      `<div><t t-widget="Child" obj="state.obj"/></div>`
     );
     class Parent extends Widget {
       state = { obj: { coffee: 1 } };
@@ -2164,7 +2453,7 @@ describe("widget and observable state", () => {
     class Child extends Widget {
       constructor(parent, props) {
         super(parent, props);
-        props.coffee = 2;
+        props.obj.coffee = 2;
       }
     }
     const parent = new Parent(env);
@@ -2253,7 +2542,7 @@ describe("t-mounted directive", () => {
   test("combined with a t-ref", async () => {
     env.qweb.addTemplate(
       "TestWidget",
-      `<div><input t-ref="'input'" t-mounted="f"/></div>`
+      `<div><input t-ref="input" t-mounted="f"/></div>`
     );
     class TestWidget extends Widget {
       f() {}
@@ -2264,25 +2553,6 @@ describe("t-mounted directive", () => {
     expect(widget.refs.input).toBeDefined();
     expect(widget.f).toHaveBeenCalledTimes(1);
   });
-
-  test("combined with a t-transition", async () => {
-    env.qweb.addTemplate(
-      "TestWidget",
-      `<div><span t-if="state.flag" t-mounted="f" t-transition="chimay">blue</span></div>`
-    );
-    class TestWidget extends Widget {
-      state = { flag: false };
-      f() {}
-    }
-    const widget = new TestWidget(env);
-    widget.f = jest.fn();
-    await widget.mount(fixture);
-    expect(widget.f).toHaveBeenCalledTimes(0);
-
-    widget.state.flag = true;
-    await nextTick();
-    expect(widget.f).toHaveBeenCalledTimes(1);
-  });
 });
 
 describe("can deduce template from name", () => {

tests/helpers.ts

@@ -1,5 +1,6 @@
 import { Env } from "../src/component";
-import { QWeb } from "../src/qweb_core";
+import { EvalContext, QWeb, UTILS } from "../src/qweb_core";
+import { patch } from "../src/vdom";
 import "../src/qweb_directives";
 import "../src/qweb_extensions";
 
@@ -42,3 +43,51 @@ export function makeTestEnv(): Env {
     qweb: new QWeb()
   };
 }
+
+export function trim(str: string): string {
+  return str.replace(/\s/g, "");
+}
+
+export function renderToDOM(
+  qweb: QWeb,
+  template: string,
+  context: EvalContext = {},
+  extra?: any
+): HTMLElement | Text {
+  const vnode = qweb.render(template, context, extra);
+
+  // we snapshot here the compiled code. This is useful to prevent unwanted code
+  // change.
+  expect(qweb.templates[template].fn.toString()).toMatchSnapshot();
+
+  if (vnode.sel === undefined) {
+    return document.createTextNode(vnode.text!);
+  }
+  const node = document.createElement(vnode.sel!);
+  const result = patch(node, vnode);
+  return result.elm as HTMLElement;
+}
+
+export function renderToString(
+  qweb: QWeb,
+  t: string,
+  context: EvalContext = {}
+): string {
+  const node = renderToDOM(qweb, t, context);
+  return node instanceof Text ? node.textContent! : node.outerHTML;
+}
+
+// hereafter, we define two helpers to patch/unpatch the nextFrame utils. This
+// is useful for animations tests, as we hook before repaints to trigger
+// animations (thanks to requestAnimationFrame). Patching nextFrame allows to
+// simulate calls to this hook. One must not forget to unpatch afterwards.
+let nextFrame = UTILS.nextFrame;
+export function patchNextFrame(f: Function) {
+  UTILS.nextFrame = (cb: () => void) => {
+    setTimeout(() => f(cb));
+  };
+}
+
+export function unpatchNextFrame() {
+  UTILS.nextFrame = nextFrame;
+}

tests/observer.test.ts

@@ -230,6 +230,26 @@ describe("observer", () => {
     expect(obj2.__owl__.rev).toBe(3);
   });
 
+  test("can set a property more than once", () => {
+    const observer = new Observer();
+    const obj: any = {};
+
+    observer.observe(obj);
+    expect(obj.__owl__.rev).toBe(1);
+    expect(observer.rev).toBe(1);
+    expect(obj.__owl__.deepRev).toBe(1);
+
+    observer.set(obj, "aku", "always finds annoying problems");
+    expect(observer.rev).toBe(2);
+    expect(obj.__owl__.rev).toBe(2);
+    expect(obj.__owl__.deepRev).toBe(2);
+
+    observer.set(obj, "aku", "always finds good problems");
+    expect(observer.rev).toBe(3);
+    expect(obj.__owl__.rev).toBe(3);
+    expect(obj.__owl__.deepRev).toBe(3);
+  });
+
   test("properly handle swapping elements", () => {
     const observer = new Observer();
     const obj: any = { a: { arr: [] }, b: 1 };

tests/props_validation.test.ts

@@ -0,0 +1,263 @@
+import { Component, Env } from "../src/component";
+import { makeTestFixture, makeTestEnv } from "./helpers";
+import { QWeb } from "../src";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+let fixture: HTMLElement;
+let env: Env;
+let dev: boolean = false;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+  env = makeTestEnv();
+  dev = QWeb.dev;
+  QWeb.dev = true;
+});
+
+afterEach(() => {
+  fixture.remove();
+  QWeb.dev = dev;
+});
+
+class Widget extends Component<any, any, any> {}
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+describe("props validation", () => {
+  test("validation is only done in dev mode", async () => {
+    class TestWidget extends Widget {
+      static props = ["message"];
+    }
+
+    QWeb.dev = true;
+    expect(() => {
+      new TestWidget(env);
+    }).toThrow();
+
+    QWeb.dev = false;
+
+    expect(() => {
+      new TestWidget(env);
+    }).not.toThrow();
+  });
+
+  test("props validation is also done on update props", async () => {
+    expect.assertions(1);
+    class TestWidget extends Widget {
+      static props = ["message"];
+    }
+    const w = new TestWidget(env, { message: "bottle" });
+    try {
+      await w._updateProps({});
+    } catch (e) {
+      expect(e.message).toBe("Missing props 'message' (widget 'TestWidget')");
+    }
+  });
+
+  test("props: list of strings", async () => {
+    class TestWidget extends Widget {
+      static props = ["message"];
+    }
+
+    expect(() => {
+      new TestWidget(env);
+    }).toThrow("Missing props 'message' (widget 'TestWidget')");
+  });
+
+  test("validate simple types", async () => {
+    const Tests = [
+      { type: Number, ok: 1, ko: "1" },
+      { type: Boolean, ok: true, ko: "1" },
+      { type: String, ok: "1", ko: 1 },
+      { type: Object, ok: {}, ko: "1" },
+      { type: Date, ok: new Date(), ko: "1" },
+      { type: Function, ok: () => {}, ko: "1" }
+    ];
+
+    for (let test of Tests) {
+      let TestWidget = class extends Widget {
+        static props = { p: test.type };
+      };
+
+      expect(() => {
+        new TestWidget(env);
+      }).toThrow("Missing props 'p'");
+
+      expect(() => {
+        new TestWidget(env, { p: test.ok });
+      }).not.toThrow();
+
+      expect(() => {
+        new TestWidget(env, { p: test.ko });
+      }).toThrow("Props 'p' of invalid type in widget");
+    }
+  });
+
+  test("validate simple types, alternate form", async () => {
+    const Tests = [
+      { type: Number, ok: 1, ko: "1" },
+      { type: Boolean, ok: true, ko: "1" },
+      { type: String, ok: "1", ko: 1 },
+      { type: Object, ok: {}, ko: "1" },
+      { type: Date, ok: new Date(), ko: "1" },
+      { type: Function, ok: () => {}, ko: "1" }
+    ];
+
+    for (let test of Tests) {
+      let TestWidget = class extends Widget {
+        static props = { p: { type: test.type } };
+      };
+
+      expect(() => {
+        new TestWidget(env);
+      }).toThrow("Missing props 'p'");
+
+      expect(() => {
+        new TestWidget(env, { p: test.ok });
+      }).not.toThrow();
+
+      expect(() => {
+        new TestWidget(env, { p: test.ko });
+      }).toThrow("Props 'p' of invalid type in widget");
+    }
+  });
+
+
+  test("can validate a prop with multiple types", async () => {
+    let TestWidget = class extends Widget {
+      static props = { p: [String, Boolean] };
+    };
+
+    expect(() => {
+      new TestWidget(env, { p: "string" });
+      new TestWidget(env, { p: true });
+    }).not.toThrow();
+
+    expect(() => {
+      new TestWidget(env, { p: 1 });
+    }).toThrow("Props 'p' of invalid type in widget");
+  });
+
+  test("can validate an optional props", async () => {
+    let TestWidget = class extends Widget {
+      static props = { p: { type: String, optional: true } };
+    };
+
+    expect(() => {
+      new TestWidget(env, { p: "hey" });
+      new TestWidget(env, { });
+    }).not.toThrow();
+
+    expect(() => {
+      new TestWidget(env, { p: 1 });
+    }).toThrow();
+
+  });
+
+
+  test("can validate an array with given primitive type", async () => {
+    let TestWidget = class extends Widget {
+      static props = { p: { type: Array, element: String } };
+    };
+
+    expect(() => {
+      new TestWidget(env, { p: [] });
+      new TestWidget(env, { p: ["string"] });
+    }).not.toThrow();
+
+    expect(() => {
+      new TestWidget(env, { p: [1] });
+    }).toThrow();
+
+    expect(() => {
+      new TestWidget(env, { p: ["string", 1] });
+    }).toThrow();
+  });
+
+  test("can validate an array with multiple sub element types", async () => {
+    let TestWidget = class extends Widget {
+      static props = { p: { type: Array, element: [String, Boolean] } };
+    };
+
+    expect(() => {
+      new TestWidget(env, { p: [] });
+      new TestWidget(env, { p: ["string"] });
+      new TestWidget(env, { p: [false, true, "string"] });
+    }).not.toThrow();
+
+    expect(() => {
+      new TestWidget(env, { p: [true, 1] });
+    }).toThrow();
+  });
+
+  test("can validate an object with simple shape", async () => {
+    let TestWidget = class extends Widget {
+      static props = {
+        p: { type: Object, shape: { id: Number, url: String } }
+      };
+    };
+
+    expect(() => {
+      new TestWidget(env, { p: { id: 1, url: "url" } });
+      new TestWidget(env, { p: { id: 1, url: "url", extra: true } });
+    }).not.toThrow();
+
+    expect(() => {
+      new TestWidget(env, { p: { id: "1", url: "url" } });
+    }).toThrow();
+
+    expect(() => {
+      new TestWidget(env, { p: { id: 1 } });
+    }).toThrow();
+  });
+
+  test("can validate recursively complicated prop def", async () => {
+    let TestWidget = class extends Widget {
+      static props = {
+        p: {
+          type: Object,
+          shape: {
+            id: Number,
+            url: [Boolean, {type: Array, element: Number}],
+          }
+        }
+      };
+    };
+
+    expect(() => {
+      new TestWidget(env, { p: { id: 1, url: true } });
+      new TestWidget(env, { p: { id: 1, url: [12]} });
+    }).not.toThrow();
+
+    expect(() => {
+      new TestWidget(env, { p: { id: 1, url: [12, true]} });
+    }).toThrow();
+
+  });
+});
+
+
+describe("default props", () => {
+  test("can set default values", async () => {
+    class TestWidget extends Widget {
+      static defaultProps = {p: 4}
+    }
+
+    const w = new TestWidget(env, {});
+    expect(w.props.p).toBe(4);
+  });
+
+  test("default values are also set whenever component is updated", async () => {
+    class TestWidget extends Widget {
+      static defaultProps = {p: 4}
+    }
+
+    const w = new TestWidget(env, {p: 1});
+    await w._updateProps({});
+    expect(w.props.p).toBe(4);
+  });
+});

tests/qweb.test.ts

@@ -1,6 +1,5 @@
-import { EvalContext, QWeb } from "../src/qweb_core";
-import { patch } from "../src/vdom";
-import { normalize } from "./helpers";
+import { QWeb } from "../src/qweb_core";
+import { normalize, renderToDOM, renderToString, trim } from "./helpers";
 
 //------------------------------------------------------------------------------
 // Setup and helpers
@@ -15,39 +14,6 @@ beforeEach(() => {
   qweb = new QWeb();
 });
 
-function trim(str: string): string {
-  return str.replace(/\s/g, "");
-}
-
-function renderToDOM(
-  qweb: QWeb,
-  template: string,
-  context: EvalContext = {},
-  extra?: any
-): HTMLElement | Text {
-  const vnode = qweb.render(template, context, extra);
-
-  // we snapshot here the compiled code. This is useful to prevent unwanted code
-  // change.
-  expect(qweb.templates[template].fn.toString()).toMatchSnapshot();
-
-  if (vnode.sel === undefined) {
-    return document.createTextNode(vnode.text!);
-  }
-  const node = document.createElement(vnode.sel!);
-  const result = patch(node, vnode);
-  return result.elm as HTMLElement;
-}
-
-function renderToString(
-  qweb: QWeb,
-  t: string,
-  context: EvalContext = {}
-): string {
-  const node = renderToDOM(qweb, t, context);
-  return node instanceof Text ? node.textContent! : node.outerHTML;
-}
-
 //------------------------------------------------------------------------------
 // Tests
 //------------------------------------------------------------------------------
@@ -119,6 +85,10 @@ describe("error handling", () => {
   });
 
   test("error when compiled code is invalid", () => {
+    const consoleWarn = console.warn;
+    const consoleGroupCollapsed = console.groupCollapsed;
+    console.warn = jest.fn();
+    console.groupCollapsed = jest.fn();
     qweb.addTemplate(
       "templatename",
       `<div t-att-hey="}/^function invalid{{>'"></div>`
@@ -126,6 +96,9 @@ describe("error handling", () => {
     expect(() => qweb.render("templatename")).toThrow(
       "Invalid generated code while compiling template 'templatename': Unexpected token }"
     );
+    expect(console.warn).toBeCalledTimes(1);
+    console.warn = consoleWarn;
+    console.groupCollapsed = consoleGroupCollapsed;
   });
 
   test("error when unknown directive", () => {
@@ -556,6 +529,12 @@ describe("attributes", () => {
     expect(result).toBe(`<div class="hello world"></div>`);
   });
 
+  test("class and t-attf-class with ternary operation", () => {
+    qweb.addTemplate("test", `<div class="hello" t-attf-class="#{value ? 'world' : ''}"/>`);
+    const result = renderToString(qweb, "test", { value: true });
+    expect(result).toBe(`<div class="hello world"></div>`);
+  });
+
   test("t-att-class with object", () => {
     qweb.addTemplate(
       "test",
@@ -917,7 +896,7 @@ describe("t-on", () => {
     (<HTMLElement>node).click();
   });
 
-  test("can bind handlers with empty object (with non empty inner string", () => {
+  test("can bind handlers with empty object (with non empty inner string)", () => {
     expect.assertions(2);
     qweb.addTemplate(
       "test",
@@ -969,20 +948,132 @@ describe("t-on", () => {
     const node = renderToDOM(qweb, "test", owner, { handlers: [] });
     (<HTMLElement>node).click();
   });
+
+  test("t-on with prevent and/or stop modifiers", async () => {
+    expect.assertions(7);
+    qweb.addTemplate(
+      "test",
+      `<div>
+        <button t-on-click.prevent="onClickPrevented">Button 1</button>
+        <button t-on-click.stop="onClickStopped">Button 2</button>
+        <button t-on-click.prevent.stop="onClickPreventedAndStopped">Button 3</button>
+      </div>`
+    );
+    let owner = {
+      onClickPrevented(e) {
+        expect(e.defaultPrevented).toBe(true);
+        expect(e.cancelBubble).toBe(false);
+      },
+      onClickStopped(e) {
+        expect(e.defaultPrevented).toBe(false);
+        expect(e.cancelBubble).toBe(true);
+      },
+      onClickPreventedAndStopped(e) {
+        expect(e.defaultPrevented).toBe(true);
+        expect(e.cancelBubble).toBe(true);
+      }
+    };
+    const node = renderToDOM(qweb, "test", owner, { handlers: [] });
+
+    const buttons = (<HTMLElement>node).getElementsByTagName("button");
+    buttons[0].click();
+    buttons[1].click();
+    buttons[2].click();
+  });
+
+  test("t-on with self modifier", async () => {
+    expect.assertions(2);
+    qweb.addTemplate(
+      "test",
+      `<div>
+        <button t-on-click="onClick"><span>Button</span></button>
+        <button t-on-click.self="onClickSelf"><span>Button</span></button>
+      </div>`
+    );
+    let steps: string[] = [];
+    let owner = {
+      onClick(e) {
+        steps.push("onClick");
+      },
+      onClickSelf(e) {
+        steps.push("onClickSelf");
+      }
+    };
+    const node = renderToDOM(qweb, "test", owner, { handlers: [] });
+
+    const buttons = (<HTMLElement>node).getElementsByTagName("button");
+    const spans = (<HTMLElement>node).getElementsByTagName("span");
+    spans[0].click();
+    spans[1].click();
+    buttons[0].click();
+    buttons[1].click();
+
+    expect(steps).toEqual(["onClick", "onClick", "onClickSelf"]);
+  });
+
+  test("t-on with self and prevent modifiers (order matters)", async () => {
+    expect.assertions(2);
+    qweb.addTemplate(
+      "test",
+      `<div>
+        <button t-on-click.self.prevent="onClick"><span>Button</span></button>
+      </div>`
+    );
+    let steps: boolean[] = [];
+    let owner = {
+      onClick() {}
+    };
+    const node = renderToDOM(qweb, "test", owner, { handlers: [] });
+    (<HTMLElement>node).addEventListener("click", function(e) {
+      steps.push(e.defaultPrevented);
+    });
+
+    const button = (<HTMLElement>node).getElementsByTagName("button")[0];
+    const span = (<HTMLElement>node).getElementsByTagName("span")[0];
+    span.click();
+    button.click();
+
+    expect(steps).toEqual([false, true]);
+  });
+
+  test("t-on with prevent and self modifiers (order matters)", async () => {
+    expect.assertions(2);
+    qweb.addTemplate(
+      "test",
+      `<div>
+        <button t-on-click.prevent.self="onClick"><span>Button</span></button>
+      </div>`
+    );
+    let steps: boolean[] = [];
+    let owner = {
+      onClick() {}
+    };
+    const node = renderToDOM(qweb, "test", owner, { handlers: [] });
+    (<HTMLElement>node).addEventListener("click", function(e) {
+      steps.push(e.defaultPrevented);
+    });
+
+    const button = (<HTMLElement>node).getElementsByTagName("button")[0];
+    const span = (<HTMLElement>node).getElementsByTagName("span")[0];
+    span.click();
+    button.click();
+
+    expect(steps).toEqual([true, true]);
+  });
 });
 
 describe("t-ref", () => {
   test("can get a ref on a node", () => {
-    qweb.addTemplate("test", `<div><span t-ref="'myspan'"/></div>`);
+    qweb.addTemplate("test", `<div><span t-ref="myspan"/></div>`);
     let refs: any = {};
     renderToDOM(qweb, "test", { refs });
     expect(refs.myspan.tagName).toBe("SPAN");
   });
 
   test("can get a dynamic ref on a node", () => {
-    qweb.addTemplate("test", `<div><span t-ref="'myspan' + 3"/></div>`);
+    qweb.addTemplate("test", `<div><span t-ref="myspan{{id}}"/></div>`);
     let refs: any = {};
-    renderToDOM(qweb, "test", { refs });
+    renderToDOM(qweb, "test", { refs, id: 3 });
     expect(refs.myspan3.tagName).toBe("SPAN");
   });
 
@@ -992,7 +1083,7 @@ describe("t-ref", () => {
       `
       <div>
         <t t-foreach="items" t-as="item">
-          <div t-ref="item" t-key="item"><t t-esc="item"/></div>
+          <div t-ref="{{item}}" t-key="item"><t t-esc="item"/></div>
         </t>
       </div>`
     );
@@ -1167,16 +1258,3 @@ describe("debugging", () => {
     console.log = consoleLog;
   });
 });
-
-describe("animations", () => {
-  test("t-transition, on a simple node", async () => {
-    // this test does not test much, because it is not easy to test timing
-    // transitions... we should do a little more effort for these tests.
-    qweb.addTemplate(
-      "test",
-      `<div><span t-transition="chimay">blue</span></div>`
-    );
-    let dom: HTMLElement = <HTMLElement>renderToDOM(qweb, "test");
-    expect(dom.innerHTML).toMatchSnapshot();
-  });
-});

tests/store.test.ts

@@ -414,7 +414,7 @@ describe("connecting a component to store", () => {
       `
             <div>
                 <t t-foreach="props.todos" t-as="todo" t-key="todo">
-                    <t t-widget="Todo" t-props="todo"/>
+                    <t t-widget="Todo" msg="todo.msg"/>
                 </t>
             </div>`
     );
@@ -557,7 +557,7 @@ describe("connecting a component to store", () => {
       "TodoList",
       `<div>
             <t t-foreach="props.todos" t-as="todo">
-              <t t-widget="ConnectedTodo" t-props="todo"/>
+              <t t-widget="ConnectedTodo" id="todo.id"/>
             </t>
           </div>`
     );
@@ -618,7 +618,7 @@ describe("connecting a component to store", () => {
       "TodoList",
       `<div>
             <t t-foreach="props.todos" t-as="todo">
-              <t t-widget="ConnectedTodo" t-props="todo"/>
+              <t t-widget="ConnectedTodo" id="todo.id"/>
             </t>
           </div>`
     );
@@ -650,7 +650,7 @@ describe("connecting a component to store", () => {
     env.qweb.addTemplate(
       "App",
       `<div>
-            <t t-widget="ConnectedBeer" t-props="{id: state.beerId}"/>
+            <t t-widget="ConnectedBeer" id="state.beerId"/>
         </div>`
     );
     class App extends Component<any, any, any> {
@@ -728,7 +728,7 @@ describe("connecting a component to store", () => {
     env.qweb.addTemplate(
       "App",
       `<div>
-              <t t-widget="ConnectedBeer" t-props="{id: state.beerId}"/>
+              <t t-widget="ConnectedBeer" id="state.beerId"/>
           </div>`
     );
     class App extends Component<any, any, any> {
@@ -797,7 +797,7 @@ describe("connecting a component to store", () => {
     env.qweb.addTemplate(
       "App",
       `<div>
-              <t t-widget="ConnectedBeer" t-props="{id: state.beerId}"/>
+              <t t-widget="ConnectedBeer" id="state.beerId"/>
           </div>`
     );
     class App extends Component<any, any, any> {
@@ -876,7 +876,7 @@ describe("connecting a component to store", () => {
       "Parent",
       `
         <div>
-            <t t-widget="Child" t-ref="'child'" t-props="{key: props.current}"/>
+            <t t-widget="Child" key="props.current"/>
         </div>
       `
     );

tsconfig.json

@@ -16,5 +16,5 @@
     "strictPropertyInitialization": true,
     "strictNullChecks": true
   },
-  "include": ["demo/static/**/*.ts", "src/*.ts", "tests/*.ts"]
+  "include": ["src/*.ts"]
 }