[REL] v1.0.0-beta2

closes #554

README.md

@@ -104,8 +104,8 @@ Submit a PR!
 
 If you want to use a simple `<script>` tag, the last release can be downloaded here:
 
-- [owl-1.0.0-alpha5.js](https://github.com/odoo/owl/releases/download/v1.0.0-alpha5/owl.js)
-- [owl-1.0.0-alpha5.min.js](https://github.com/odoo/owl/releases/download/v1.0.0-alpha5/owl.min.js)
+- [owl-1.0.0-beta2.js](https://github.com/odoo/owl/releases/download/v1.0.0-beta2/owl.js)
+- [owl-1.0.0-beta2.min.js](https://github.com/odoo/owl/releases/download/v1.0.0-beta2/owl.min.js)
 
 Some npm scripts are available:
 

doc/readme.md

@@ -50,20 +50,20 @@ and `EventBus` is exported as `owl.core.EventBus`):
 ```
 Component                               misc
 Context                                     AsyncRoot
-QWeb                                    router
-Store                                       Link
-useState                                    RouteComponent
-config                                      Router
-    mode                                tags
-core                                        xml
-    EventBus                            utils
-    Observer                                debounce
-hooks                                       escape
-    onWillStart                             loadJS
-    onMounted                               loadFile
-    onWillUpdateProps                       shallowEqual
-    onWillPatch                             whenReady
-    onPatched
+QWeb                                        Portal
+Store                                   router
+useState                                    Link
+config                                      RouteComponent
+    mode                                    Router
+core                                    tags
+    EventBus                                xml
+    Observer                            utils
+hooks                                       debounce
+    onWillStart                             escape
+    onMounted                               loadJS
+    onWillUpdateProps                       loadFile
+    onWillPatch                             shallowEqual
+    onPatched                               whenReady
     onWillUnmount
     useContext
     useState

doc/reference/component.md

@@ -234,12 +234,23 @@ component.
 
 We explain here all the public methods of the `Component` class.
 
-- **`mount(target)`** (async): this is the main way a
+- **`mount(target, options)`** (async): this is the main way a
   component is added to the DOM: the root component is mounted to a target
   HTMLElement (or document fragment). Obviously, this is asynchronous, since each children need to be
   created as well. Most applications will need to call `mount` exactly once, on
   the root component.
 
+  The `options` argument is an optional object with a `position` key. The
+  `position` key can have three possible values: `first-child`, `last-child`, `self`.
+
+  - `first-child`: with this option, the component will be prepended inside the target,
+  - `last-child` (default value): with this option, the component will be
+    appended in the target element,
+  - `self`: the target will be used as the root element for the component. This
+    means that the target has to be an HTMLElement (and not a document fragment).
+    In this situation, it is possible that the component cannot be unmounted. For
+    example, if its target is `document.body`.
+
   Note that if a component is mounted, unmounted and remounted, it will be
   automatically re-rendered to ensure that changes in its state (or something
   in the environment, or in the store, or ...) will be taken into account.
@@ -258,25 +269,25 @@ We explain here all the public methods of the `Component` class.
   // app is now visible
   ```
 
-- **`unmount()`**: in case a component needs to be detached/removed from the DOM, this
+* **`unmount()`**: in case a component needs to be detached/removed from the DOM, this
   method can be used. Most applications should not call `unmount`, this is more
   useful to the underlying component system.
 
-- **`render()`** (async): calling this method directly will cause a rerender. Note
+* **`render()`** (async): calling this method directly will cause a rerender. Note
   that this should be very rare to have to do it manually, the Owl framework is
   most of the time responsible for doing that at an appropriate moment.
 
   Note that the render method is asynchronous, so one cannot observe the updated
   DOM in the same stack frame.
 
-- **`shouldUpdate(nextProps)`**: this method is called each time a component's props
+* **`shouldUpdate(nextProps)`**: this method is called each time a component's props
   are updated. It returns a boolean, which indicates if the component should
   ignore a props update. If it returns false, then `willUpdateProps` will not
   be called, and no rendering will occur. Its default implementation is to
   always return true. This is an optimization, similar to React's `shouldComponentUpdate`. Most of the time, this should not be used, but it
   can be useful if we are handling large number of components.
 
-- **`destroy()`**. As its name suggests, this method will remove the component,
+* **`destroy()`**. As its name suggests, this method will remove the component,
   and perform all necessary cleanup, such as unmounting the component, its children,
   removing the parent/children relationship. This method should almost never be
   called directly (except maybe on the root component), but should be done by the
@@ -854,6 +865,19 @@ be considered the `default` slot. For example:
 </div>
 ```
 
+Slots can define a default content, in case the parent did not define them:
+
+```xml
+<div t-name="Parent">
+  <Child/>
+</div>
+
+<span t-name="Child">
+  <t t-slot="default">default content</t>
+</span>
+<!-- will be rendered as: <div><span>default content</span></div> -->
+```
+
 ### Dynamic sub components
 
 It is not common, but sometimes we need a dynamic component name. In this case,

doc/reference/misc.md

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

doc/reference/qweb_templating_language.md

@@ -500,6 +500,15 @@ will result in :
 </div>
 ```
 
+This can be used to define variables scoped to a sub template:
+
+```xml
+<t t-call="other-template">
+    <t t-set="var" t-value="1"/>
+</t>
+<!-- "var" does not exist here -->
+```
+
 ### Translations
 
 By default, QWeb specify that templates should be translated. If this behaviour

doc/reference/store.md

@@ -25,8 +25,8 @@ component should own which part of the state.
 
 Owl's solution to this issue is a centralized store. It is a class that owns
 some (or all) state, and lets the developer update it in a structured way, with
-`actions`. Owl components can then connect to the store, and will be updated if
-necessary.
+`actions`. Owl components can then connect to the store to read their relevant
+state, and they will be rerendered if the state is updated.
 
 Note: Owl store is inspired by React Redux and VueX.
 

doc/tooling.md

@@ -91,16 +91,15 @@ logging useful information is extremely valuable. There is a [javascript file](.
 Once it is executed, it will log a lot of information on each component main hooks. The following code is a minified version to make it easier to copy/paste:
 
 ```
-let debugSetup = {
+function debugOwl(t,n){let e,o="[OWL_DEBUG]";function s(t){let n=JSON.stringify(t||{});return n.length>200&&(n=n.slice(0,200)+"..."),n}if(Object.defineProperty(t.Component,"current",{get:()=>e,set(i){e=i;const r=i.constructor.name;if(n.componentBlackList&&n.componentBlackList.test(r))return;if(n.componentWhiteList&&!n.componentWhiteList.test(r))return;let l;Object.defineProperty(e,"__owl__",{get:()=>l,set(e){!function(e,i,r){let l=`${i}<id=${r}>`,c=t=>console.log(`${o} ${l} ${t}`),u=t=>(!n.methodBlackList||!n.methodBlackList.includes(t))&&!(n.methodWhiteList&&!n.methodWhiteList.includes(t));u("constructor")&&c(`constructor, props=${s(e.props)}`);u("willStart")&&t.hooks.onWillStart(()=>{c("willStart")});u("mounted")&&t.hooks.onMounted(()=>{c("mounted")});u("willUpdateProps")&&t.hooks.onWillUpdateProps(t=>{c(`willUpdateProps, nextprops=${s(t)}`)});u("willPatch")&&t.hooks.onWillPatch(()=>{c("willPatch")});u("patched")&&t.hooks.onPatched(()=>{c("patched")});u("willUnmount")&&t.hooks.onWillUnmount(()=>{c("willUnmount")});const d=e.__render.bind(e);e.__render=function(...t){c("rendering template"),d(...t)};const h=e.render.bind(e);e.render=function(...t){const n=e.__owl__;let o="render";return n.isMounted||n.currentFiber||(o+=" (warning: component is not mounted, this render has no effect)"),c(o),h(...t)};const p=e.mount.bind(e);e.mount=function(...t){return c("mount"),p(...t)}}(i,r,(l=e).id)}})}}),n.logScheduler){let n=t.Component.scheduler.start,e=t.Component.scheduler.stop;t.Component.scheduler.start=function(){this.isRunning||console.log(`${o} scheduler: start running tasks queue`),n.call(this)},t.Component.scheduler.stop=function(){this.isRunning&&console.log(`${o} scheduler: stop running tasks queue`),e.call(this)}}if(n.logStore){let n=t.Store.prototype.dispatch;t.Store.prototype.dispatch=function(t,...e){return console.log(`${o} store: action '${t}' dispatched. Payload: '${s(e)}'`),n.call(this,t,...e)}}}
+debugOwl(owl, {
   // componentBlackList: /App/,  // regexp
   // componentWhiteList: /SomeComponent/, // regexp
   // methodBlackList: ["mounted"], // list of method names
   // methodWhiteList: ["willStart"], // list of method names
   logScheduler: false,  // display/mute scheduler logs
   logStore: true,     // display/mute store logs
-};
-{let o,t="[OWL_DEBUG]";function toStr(o){let t=JSON.stringify(o||{});return t.length>200&&(t=t.slice(0,200)+"..."),t}function debugComponent(o,e,n){let l=`${e}<id=${n}>`,r=o=>(!debugSetup.methodBlackList||!debugSetup.methodBlackList.includes(o))&&!(debugSetup.methodWhiteList&&!debugSetup.methodWhiteList.includes(o));r("constructor")&&console.log(`${t} ${l} constructor, props=${toStr(o.props)}`),r("willStart")&&owl.hooks.onWillStart(()=>{console.log(`${t} ${l} willStart`)}),r("mounted")&&owl.hooks.onMounted(()=>{console.log(`${t} ${l} mounted`)}),r("willUpdateProps")&&owl.hooks.onWillUpdateProps(o=>{console.log(`${t} ${l} willUpdateProps, nextprops=${toStr(o)}`)}),r("willPatch")&&owl.hooks.onWillPatch(()=>{console.log(`${t} ${l} willPatch`)}),r("patched")&&owl.hooks.onPatched(()=>{console.log(`${t} ${l} patched`)}),r("willUnmount")&&owl.hooks.onWillUnmount(()=>{console.log(`${t} ${l} willUnmount`)});const s=o.__render.bind(o);o.__render=function(...o){console.log(`${t} ${l} rendering template`),s(...o)};const u=o.render.bind(o);o.render=function(...o){return console.log(`${t} ${l} render`),u(...o)};const c=o.mount.bind(o);o.mount=function(...o){return console.log(`${t} ${l} mount`),c(...o)}}if(Object.defineProperty(owl.Component,"current",{get:()=>o,set(t){o=t;const e=t.constructor.name;if(debugSetup.componentBlackList&&debugSetup.componentBlackList.test(e))return;if(debugSetup.componentWhiteList&&!debugSetup.componentWhiteList.test(e))return;let n;Object.defineProperty(o,"__owl__",{get:()=>n,set(o){debugComponent(t,e,(n=o).id)}})}}),debugSetup.logScheduler){let o;Object.defineProperty(owl.Component.scheduler,"isRunning",{get:()=>o,set(e){e?console.log(`${t} scheduler: start running tasks queue`):console.log(`${t} scheduler: stop running tasks queue`),o=e}})}if(debugSetup.logStore){let o=owl.Store.prototype.dispatch;owl.Store.prototype.dispatch=function(e,...n){return console.log(`${t} store: action '${e}' dispatched. Payload: '${toStr(n)}'`),o.call(this,e,...n)}}}
-
+});
 ```
 
 Note that it is certainly useful to run this code at some point in an application,

package.json

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

roadmap.md

@@ -1,25 +1,17 @@
 # 🦉 OWL Roadmap 🦉
 
-- Current version: 1.0.0-alpha5
+- Current version: 1.0.0-beta2
 - Status: mostly stable
 
 This roadmap is only an attempt at predicting Owl's future.  Everything may
 change!
 
 
-### November 2019
-
-Owl will be used in various Odoo projects. We plan to:
-
-- fix any issues encountered
-- maybe cleanup slightly the router API
-- improve the documentation
-- improve error handling, add more helpful error messages
 
 ### December 2019
 
-If all goes well, Owl will be upgraded to beta status. From then, no API change,
-even small, is expected.
+If all goes well, Owl is upgraded to beta status. From now on, no API change,
+even small, is expected (but it still could happen).
 
 ### End of 2019
 
@@ -41,7 +33,8 @@ Release v1.0
 
 Maybe:
 
-- reimplement vdom to use *block* system, like Vue 3,
+- reimplement vdom to use *block* system, like Vue 3, which should make Owl
+  much faster
 - refactor `QWeb` to use an intermediate representation (some kind of AST) to
   allow additional optimisations.
 

src/component/component.ts

@@ -36,6 +36,10 @@ export interface Env {
   [key: string]: any;
 }
 
+interface MountOptions {
+  position?: "first-child" | "last-child" | "self";
+}
+
 /**
  * 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
@@ -66,10 +70,9 @@ interface Internal<T extends Env, Props> {
   parentLastFiberId: number;
 
   // when a rendering is initiated by a parent, it may set variables in 'scope'
-  // and 'vars' (typically when the component is rendered in a slot). We need to
+  // (typically when the component is rendered in a slot). We need to
   // store that information in case the component would be re-rendered later on.
   scope: any;
-  vars: any;
 
   boundHandlers: { [key: number]: any };
   observer: Observer | null;
@@ -84,6 +87,8 @@ interface Internal<T extends Env, Props> {
   refs: { [key: string]: Component<T, any> | HTMLElement | undefined } | null;
 }
 
+export const portalSymbol = Symbol("portal"); // FIXME
+
 //------------------------------------------------------------------------------
 // Component
 //------------------------------------------------------------------------------
@@ -100,6 +105,7 @@ export class Component<T extends Env, Props extends {}> {
   static env: any = {};
   // expose scheduler s.t. it can be mocked for testing purposes
   static scheduler: Scheduler = scheduler;
+  __target: HTMLElement | undefined;
 
   /**
    * The `el` is the root element of the component.  Note that it could be null:
@@ -191,8 +197,7 @@ export class Component<T extends Env, Props extends {}> {
       renderFn: qweb.render.bind(qweb, template),
       classObj: null,
       refs: null,
-      scope: null,
-      vars: null
+      scope: null
     };
   }
 
@@ -289,7 +294,8 @@ export class Component<T extends Env, Props extends {}> {
    *
    * Note that a component can be mounted an unmounted several times
    */
-  async mount(target: HTMLElement | DocumentFragment): Promise<void> {
+  async mount(target: HTMLElement | DocumentFragment, options: MountOptions = {}): Promise<void> {
+    const position = options.position || "last-child";
     const __owl__ = this.__owl__;
     if (__owl__.isMounted) {
       return Promise.resolve();
@@ -299,10 +305,19 @@ export class Component<T extends Env, Props extends {}> {
       message += `\nMaybe the DOM is not ready yet? (in that case, you can use owl.utils.whenReady)`;
       throw new Error(message);
     }
-    const fiber = new Fiber(null, this, false, target);
+    let inserter =
+      position === "last-child"
+        ? el => target.appendChild(el)
+        : position === "first-child"
+        ? el => target.prepend(el)
+        : el => {};
+    if (position === "self") {
+      this.__target = target as HTMLElement;
+    }
+    const fiber = new Fiber(null, this, false, inserter);
     fiber.shouldPatch = false;
     if (!__owl__.vnode) {
-      this.__prepareAndRender(fiber);
+      this.__prepareAndRender(fiber, () => {});
     } else {
       this.__render(fiber);
     }
@@ -397,14 +412,7 @@ export class Component<T extends Env, Props extends {}> {
    * willUnmount().
    */
   trigger(eventType: string, payload?: any) {
-    if (this.el) {
-      const ev = new OwlEvent(this, eventType, {
-        bubbles: true,
-        cancelable: true,
-        detail: payload
-      });
-      this.el.dispatchEvent(ev);
-    }
+    this.__trigger(this, eventType, payload);
   }
 
   //--------------------------------------------------------------------------
@@ -478,14 +486,30 @@ export class Component<T extends Env, Props extends {}> {
       }
     }
   }
-
+  /**
+   * Private trigger method, allows to choose the component which triggered
+   * the event in the first place
+   */
+  __trigger(component: Component<any, any>, eventType: string, payload?: any) {
+    if (this.el) {
+      const ev = new OwlEvent(component, eventType, {
+        bubbles: true,
+        cancelable: true,
+        detail: payload
+      });
+      const triggerHook = this.env[portalSymbol as any];
+      if (triggerHook) {
+        triggerHook(ev);
+      }
+      this.el.dispatchEvent(ev);
+    }
+  }
   /**
    * The __updateProps method is called by the t-component directive whenever
    * it updates a component (so, when the parent template is rerendered).
    */
-  async __updateProps(nextProps: Props, parentFiber: Fiber, scope: any, vars: any): Promise<void> {
+  async __updateProps(nextProps: Props, parentFiber: Fiber, scope: any): Promise<void> {
     this.__owl__.scope = scope;
-    this.__owl__.vars = vars;
     const shouldUpdate = parentFiber.force || this.shouldUpdate(nextProps);
     if (shouldUpdate) {
       const __owl__ = this.__owl__;
@@ -523,18 +547,27 @@ export class Component<T extends Env, Props extends {}> {
    */
   __patch(vnode: VNode) {
     const __owl__ = this.__owl__;
-    const target = __owl__.vnode || document.createElement(vnode.sel!);
-    __owl__.vnode = patch(target, vnode);
+    if (this.__target) {
+      if (this.__target.tagName.toLowerCase() !== vnode.sel) {
+        throw new Error(
+          `Cannot attach '${this.constructor.name}' to target node (not same tag name)`
+        );
+      }
+      __owl__.vnode = patch(this.__target, vnode);
+      delete this.__target;
+    } else {
+      const target = __owl__.vnode || document.createElement(vnode.sel!);
+      __owl__.vnode = patch(target, vnode);
+    }
   }
 
   /**
    * The __prepare method is only called by the t-component directive, when a
-   * subcomponent is created. It gets its scope and vars, if any, from the
+   * subcomponent is created. It gets its scope, if any, from the
    * parent template.
    */
-  __prepare(parentFiber: Fiber, scope: any, vars: any) {
+  __prepare(parentFiber: Fiber, scope: any, cb: CallableFunction): Fiber {
     this.__owl__.scope = scope;
-    this.__owl__.vars = vars;
     const fiber = new Fiber(parentFiber, this, parentFiber.force, null);
     fiber.shouldPatch = false;
     if (!parentFiber.child) {
@@ -543,7 +576,8 @@ export class Component<T extends Env, Props extends {}> {
       parentFiber.lastChild!.sibling = fiber;
     }
     parentFiber.lastChild = fiber;
-    return this.__prepareAndRender(fiber);
+    this.__prepareAndRender(fiber, cb);
+    return fiber;
   }
 
   __getTemplate(qweb: QWeb): string {
@@ -565,7 +599,7 @@ export class Component<T extends Env, Props extends {}> {
     }
     return p._template;
   }
-  async __prepareAndRender(fiber: Fiber) {
+  async __prepareAndRender(fiber: Fiber, cb: CallableFunction) {
     try {
       await Promise.all([this.willStart(), this.__owl__.willStartCB && this.__owl__.willStartCB()]);
     } catch (e) {
@@ -577,6 +611,7 @@ export class Component<T extends Env, Props extends {}> {
     }
     if (!fiber.isCompleted) {
       this.__render(fiber);
+      cb();
     }
   }
 

src/component/directive.ts

@@ -190,10 +190,10 @@ QWeb.addDirective({
   priority: 100,
   atNodeEncounter({ ctx, value, node, qweb }): boolean {
     ctx.addLine("//COMPONENT");
-    ctx.rootContext.shouldDefineOwner = true;
     ctx.rootContext.shouldDefineQWeb = true;
     ctx.rootContext.shouldDefineParent = true;
     ctx.rootContext.shouldDefineUtils = true;
+    ctx.rootContext.shouldDefineScope = true;
     let hasDynamicProps = node.getAttribute("t-props") ? true : false;
 
     // t-on- events and t-transition
@@ -226,7 +226,6 @@ QWeb.addDirective({
     let propStr = Object.keys(props)
       .map(k => k + ":" + props[k])
       .join(",");
-    let defID = ctx.generateID();
     let componentID = ctx.generateID();
 
     const templateKey = ctx.generateTemplateKey();
@@ -286,7 +285,7 @@ QWeb.addDirective({
       }
       let eventsCode = events
         .map(function([eventName, mods, handlerValue, extraArgs]) {
-          let params = "owner";
+          let params = "context";
           if (extraArgs) {
             if (ctx.loopNumber) {
               let argId = ctx.generateID();
@@ -294,20 +293,20 @@ QWeb.addDirective({
               // be set asynchronously later when the widget is ready, and the
               // context might be different.
               ctx.addLine(`let arg${argId} = ${ctx.formatExpression(extraArgs)};`);
-              params = `owner, arg${argId}`;
+              params = `context, arg${argId}`;
             } else {
-              params = `owner, ${ctx.formatExpression(extraArgs)}`;
+              params = `context, ${ctx.formatExpression(extraArgs)}`;
             }
           }
-          let handler = `function (e) {`;
+          let handler = `function (e) {if(!context.__owl__.isMounted){return}`;
           handler += mods
             .map(function(mod) {
               return T_COMPONENT_MODS_CODE[mod];
             })
             .join("");
           if (handlerValue) {
-            handler += `const fn = owner['${handlerValue}'];`;
-            handler += `if (fn) { fn.call(${params}, e); } else { owner.${handlerValue}; }`;
+            handler += `const fn = context['${handlerValue}'];`;
+            handler += `if (fn) { fn.call(${params}, e); } else { context.${handlerValue}; }`;
           }
           handler += `}`;
           return `vn.elm.addEventListener('${eventName}', ${handler});`;
@@ -349,25 +348,9 @@ QWeb.addDirective({
     }
 
     // SLOTS
-    const varDefs: string[] = [];
     const hasSlots = node.childNodes.length;
-    if (hasSlots) {
-      ctx.rootContext.shouldTrackScope = true;
-      for (let v of Object.values(ctx.variables)) {
-        if (v["id"]) {
-          varDefs.push(v["id"]);
-        }
-      }
-    }
 
-    let scopeVars;
-    if (hasSlots) {
-      let scope = ctx.scopeVars.length ? `Object.assign({}, scope)` : `{}`;
-      let vars = varDefs.length ? `{${varDefs.join(",")}}` : "undefined";
-      scopeVars = `${scope}, ${vars}`;
-    } else {
-      scopeVars = "undefined, undefined";
-    }
+    let scope = hasSlots ? `Object.assign(Object.create(context), scope)` : "undefined";
 
     ctx.addIf(`w${componentID}`);
 
@@ -377,8 +360,7 @@ QWeb.addDirective({
       styleCode = `.then(()=>{if (w${componentID}.__owl__.isDestroyed) {return};w${componentID}.el.style=${tattStyle};});`;
     }
     ctx.addLine(
-      `w${componentID}.__updateProps(props${componentID}, extra.fiber${scopeVars &&
-        ", " + scopeVars})${styleCode};`
+      `w${componentID}.__updateProps(props${componentID}, extra.fiber, ${scope})${styleCode};`
     );
     ctx.addLine(`let pvnode = w${componentID}.__owl__.pvnode;`);
     if (registerCode) {
@@ -439,16 +421,14 @@ QWeb.addDirective({
       }
     }
 
-    ctx.addLine(`let def${defID} = w${componentID}.__prepare(extra.fiber, ${scopeVars});`);
+    ctx.addLine(
+      `let fiber = w${componentID}.__prepare(extra.fiber, ${scope}, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; ${createHook}});`
+    );
     // hack: specify empty remove hook to prevent the node from being removed from the DOM
     const insertHook = refExpr ? `insert(vn) {${refExpr}},` : "";
     ctx.addLine(
       `let pvnode = h('dummy', {key: ${templateKey}, hook: {${insertHook}remove() {},destroy(vn) {${finalizeComponentCode}}}});`
     );
-    ctx.addLine(`const fiber = w${componentID}.__owl__.currentFiber;`);
-    ctx.addLine(
-      `def${defID}.then(function () { if (fiber.isCompleted) { return; } const vnode = fiber.vnode; pvnode.sel = vnode.sel; ${createHook}});`
-    );
     if (registerCode) {
       ctx.addLine(registerCode);
     }

src/component/fiber.ts

@@ -46,10 +46,9 @@ export class Fiber {
   // scheduler.
   counter: number = 0;
 
-  target: HTMLElement | null;
+  inserter: (el: HTMLElement) => void | null;
 
   scope: any;
-  vars: any;
 
   component: Component<any, any>;
   vnode: VNode | null = null;
@@ -62,14 +61,13 @@ export class Fiber {
 
   error?: Error;
 
-  constructor(parent: Fiber | null, component: Component<any, any>, force, target) {
+  constructor(parent: Fiber | null, component: Component<any, any>, force, inserter) {
     this.component = component;
     this.force = force;
-    this.target = target;
+    this.inserter = inserter;
 
     const __owl__ = component.__owl__;
     this.scope = __owl__.scope;
-    this.vars = __owl__.vars;
 
     this.root = parent ? parent.root : this;
     this.parent = parent;
@@ -181,7 +179,7 @@ export class Fiber {
   complete() {
     let component = this.component;
     this.isCompleted = true;
-    if (!this.target && !component.__owl__.isMounted) {
+    if (!this.inserter && !component.__owl__.isMounted) {
       return;
     }
 
@@ -211,7 +209,7 @@ export class Fiber {
       const fiber = patchQueue[i];
       component = fiber.component;
       component.__patch(fiber.vnode!);
-      if (!fiber.shouldPatch && (!fiber.target || i !== 0)) {
+      if (!fiber.shouldPatch && (!fiber.inserter || i !== 0)) {
         component.__owl__.pvnode!.elm = component.__owl__.vnode!.elm;
       }
       component.__owl__.currentFiber = null;
@@ -219,21 +217,22 @@ export class Fiber {
 
     // insert into the DOM (mount case)
     let inDOM = false;
-    if (this.target) {
-      this.target.appendChild(this.component.el!);
-      inDOM = document.body.contains(this.target);
+    if (this.inserter) {
+      this.inserter(this.component.el!);
+      inDOM = document.body.contains(this.component.el);
+      this.component.env.qweb.trigger("dom-appended");
     }
 
     // call patched/mounted hook on each fiber of (reversed) patchQueue
     for (let i = patchLen - 1; i >= 0; i--) {
       const fiber = patchQueue[i];
       component = fiber.component;
-      if (fiber.shouldPatch && !this.target) {
+      if (fiber.shouldPatch && !this.inserter) {
         component.patched();
         if (component.__owl__.patchedCB) {
           component.__owl__.patchedCB();
         }
-      } else if (this.target ? inDOM : true) {
+      } else if (this.inserter ? inDOM : true) {
         component.__callMounted();
       }
     }

src/component/scheduler.ts

@@ -25,6 +25,15 @@ export class Scheduler {
     this.requestAnimationFrame = requestAnimationFrame;
   }
 
+  start() {
+    this.isRunning = true;
+    this.scheduleTasks();
+  }
+
+  stop() {
+    this.isRunning = false;
+  }
+
   addFiber(fiber): Promise<void> {
     // if the fiber was remapped into a larger rendering fiber, it may not be a
     // root fiber.  But we only want to register root fibers
@@ -43,7 +52,7 @@ export class Scheduler {
         }
       });
       if (!this.isRunning) {
-        this.scheduleTasks();
+        this.start();
       }
     });
   }
@@ -74,16 +83,16 @@ export class Scheduler {
       return true;
     });
     this.tasks = tasks.concat(this.tasks);
+    if (this.tasks.length === 0) {
+      this.stop();
+    }
   }
 
   scheduleTasks() {
-    this.isRunning = true;
     this.requestAnimationFrame(() => {
       this.flush();
-      if (this.tasks.length > 0) {
+      if (this.isRunning) {
         this.scheduleTasks();
-      } else {
-        this.isRunning = false;
       }
     });
   }

src/core/observer.ts

@@ -20,7 +20,6 @@
 export class Observer {
   rev: number = 1;
   allowMutations: boolean = true;
-  dirty: boolean = false;
   weakMap: WeakMap<any, any> = new WeakMap();
 
   notifyCB() {}

src/index.ts

@@ -12,6 +12,7 @@ import * as _store from "./store";
 import * as _utils from "./utils";
 import * as _tags from "./tags";
 import { AsyncRoot } from "./misc/async_root";
+import { Portal } from "./misc/portal";
 import * as _hooks from "./hooks";
 import * as _context from "./context";
 import { Link } from "./router/link";
@@ -29,7 +30,7 @@ export const router = { Router, RouteComponent, Link };
 export const Store = _store.Store;
 export const utils = _utils;
 export const tags = _tags;
-export const misc = { AsyncRoot };
+export const misc = { AsyncRoot, Portal };
 export const hooks = Object.assign({}, _hooks, {
   useContext: _context.useContext,
   useDispatch: _store.useDispatch,

src/misc/portal.ts

@@ -0,0 +1,167 @@
+import { Component, portalSymbol } from "../component/component";
+import { VNode, patch } from "../vdom/index";
+import { xml } from "../tags";
+import { OwlEvent } from "../core/owl_event";
+import { useSubEnv } from "../hooks";
+
+/**
+ * Portal
+ *
+ * The Portal component allows to render a part of a component outside it's DOM.
+ * It is for example useful for dialogs: for css reasons, dialogs are in general
+ * placed in a specific spot of the DOM (e.g. directly in the body). With the
+ * Portal, a component can conditionally specify in its tempate that it contains
+ * a dialog, and where this dialog should be inserted in the DOM.
+ *
+ * The Portal component ensures that the communication between the content of
+ * the Portal and its parent properly works: business events reaching the Portal
+ * are re-triggered on an empty <portal> node located in the parent's DOM.
+ */
+
+export class Portal extends Component<any, any> {
+  static template = xml`<portal><t t-slot="default"/></portal>`;
+  static props = {
+    target: {
+      type: String
+    }
+  };
+
+  // boolean to indicate whether or not we must listen to 'dom-appended' event
+  // to hook on the moment when the target is inserted into the DOM (because it
+  // is not when the portal is rendered)
+  doTargetLookUp: boolean = true;
+  // set of encountered events that need to be redirected
+  _handledEvents: Set<string> = new Set();
+  // function that will be the event's tunnel (needs to be an arrow function to
+  // avoid having to rebind `this`)
+  _handlerTunnel: (f: OwlEvent<any>) => void = (ev: OwlEvent<any>) => {
+    ev.stopPropagation();
+    this.__trigger(ev.originalComponent, ev.type, ev.detail);
+  };
+  // Storing the parent's env
+  parentEnv: any = null;
+  // represents the element that is moved somewhere else
+  portal: VNode | null = null;
+  // the target where we will move `portal`
+  target: HTMLElement | null = null;
+
+  constructor(parent, props) {
+    super(parent, props);
+    this.parentEnv = parent ? parent.env : {};
+    // put a callback in the env that is propagated to children s.t. portal can
+    // register an handler to those events just before children will trigger them
+    useSubEnv({
+      [portalSymbol]: ev => {
+        if (!this._handledEvents.has(ev.type)) {
+          this.portal!.elm!.addEventListener(ev.type, this._handlerTunnel);
+          this._handledEvents.add(ev.type);
+        }
+      }
+    });
+  }
+  /**
+   * Override to revert back to a classic Component's structure
+   *
+   * @override
+   */
+  __callWillUnmount() {
+    super.__callWillUnmount();
+    this.el!.appendChild(this.portal!.elm!);
+    this.doTargetLookUp = true;
+  }
+  /**
+   * At each DOM change, we must ensure that the portal contains exactly one
+   * child
+   */
+  __checkVNodeStructure(vnode: VNode) {
+    const children = vnode.children!;
+    let countRealNodes = 0;
+    for (let child of children) {
+      if ((child as VNode).sel) {
+        countRealNodes++;
+      }
+    }
+    if (countRealNodes !== 1) {
+      throw new Error(`Portal must have exactly one non-text child (has ${countRealNodes})`);
+    }
+  }
+  /**
+   * Ensure the target is still there at whichever time we render
+   */
+  __checkTargetPresence() {
+    if (!this.target || !document.contains(this.target)) {
+      throw new Error(`Could not find any match for "${this.props.target}"`);
+    }
+  }
+  /**
+   * Move the portal's element to the target
+   */
+  __deployPortal() {
+    this.__checkTargetPresence();
+    this.target!.appendChild(this.portal!.elm!);
+  }
+  /**
+   * Override to remove from the DOM the element we have teleported
+   *
+   * @override
+   */
+  __destroy(parent) {
+    if (this.portal && this.portal.elm) {
+      const displacedElm = this.portal.elm!;
+      const parent = displacedElm.parentNode;
+      if (parent) {
+        parent.removeChild(displacedElm);
+      }
+    }
+    super.__destroy(parent);
+  }
+  /**
+   * Override to patch the element that has been teleported
+   *
+   * @override
+   */
+  __patch(vnode) {
+    if (this.doTargetLookUp) {
+      const target = document.querySelector(this.props.target);
+      if (!target) {
+        this.env.qweb.on("dom-appended", this, () => {
+          this.doTargetLookUp = false;
+          this.env.qweb.off("dom-appended", this);
+          this.target = document.querySelector(this.props.target);
+          this.__deployPortal();
+        });
+      } else {
+        this.doTargetLookUp = false;
+        this.target = target;
+      }
+    }
+    this.__checkVNodeStructure(vnode);
+    const shouldDeploy =
+      (!this.portal || this.el!.contains(this.portal.elm!)) && !this.doTargetLookUp;
+
+    if (!this.doTargetLookUp && !shouldDeploy) {
+      // Only on pure patching, provided the
+      // this.target's parent has not been unmounted
+      this.__checkTargetPresence();
+    }
+
+    const portalPatch = this.portal ? this.portal : document.createElement(vnode.children[0].sel);
+    this.portal = patch(portalPatch, vnode.children![0] as VNode);
+    vnode.children = [];
+
+    super.__patch(vnode);
+
+    if (shouldDeploy) {
+      this.__deployPortal();
+    }
+  }
+  /**
+   * Override to set the env
+   */
+  __trigger(component: Component<any, any>, eventType: string, payload?: any) {
+    const env = this.env;
+    this.env = this.parentEnv;
+    super.__trigger(component, eventType, payload);
+    this.env = env;
+  }
+}

src/qweb/base_directives.ts

@@ -19,38 +19,40 @@ import { htmlToVDOM } from "../vdom/html_to_vdom";
 //------------------------------------------------------------------------------
 // t-esc and t-raw
 //------------------------------------------------------------------------------
-QWeb.utils.getFragment = function(str: string): DocumentFragment {
-  const temp = document.createElement("template");
-  temp.innerHTML = str;
-  return temp.content;
-};
-
 QWeb.utils.htmlToVDOM = htmlToVDOM;
 
 function compileValueNode(value: any, node: Element, qweb: QWeb, ctx: CompilationContext) {
+  ctx.rootContext.shouldDefineScope = true;
   if (value === "0") {
-    const caller = ctx.getCaller();
-    if (caller) {
-      qweb._compileNode(caller, ctx.getInliningContext());
-      return;
-    }
-  }
-
-  if (value.xml instanceof NodeList && !value.id) {
-    for (let node of Array.from(value.xml)) {
-      qweb._compileNode(<ChildNode>node, ctx);
+    if (ctx.parentNode) {
+      // the 'zero' magical symbol is where we can find the result of the rendering
+      // of  the body of the t-call.
+      ctx.rootContext.shouldDefineUtils = true;
+      const zeroArgs = ctx.escaping
+        ? `{text: utils.vDomToString(scope[utils.zero])}`
+        : `...scope[utils.zero]`;
+      ctx.addLine(`c${ctx.parentNode}.push(${zeroArgs});`);
     }
     return;
   }
+
   let exprID: string;
   if (typeof value === "string") {
     exprID = `_${ctx.generateID()}`;
     ctx.addLine(`var ${exprID} = ${ctx.formatExpression(value)};`);
   } else {
-    exprID = value.id;
+    exprID = `scope.${value.id}`;
   }
   ctx.addIf(`${exprID} || ${exprID} === 0`);
+
   if (ctx.escaping) {
+    let protectID;
+    if (value.hasBody) {
+      protectID = ctx.startProtectScope();
+      ctx.addLine(
+        `${exprID} = ${exprID} instanceof utils.VDomArray ? utils.vDomToString(${exprID}) : ${exprID};`
+      );
+    }
     if (ctx.parentTextNode) {
       ctx.addLine(`vn${ctx.parentTextNode}.text += ${exprID};`);
     } else if (ctx.parentNode) {
@@ -64,21 +66,25 @@ function compileValueNode(value: any, node: Element, qweb: QWeb, ctx: Compilatio
         ctx.addLine(`result = vn${nodeID}`);
       }
     }
+    if (value.hasBody) {
+      ctx.stopProtectScope(protectID);
+    }
   } else {
     ctx.rootContext.shouldDefineUtils = true;
-    ctx.addLine(`c${ctx.parentNode}.push(...utils.htmlToVDOM(${exprID}));`);
+    if (value.hasBody) {
+      ctx.addLine(
+        `const vnodeArray = ${exprID} instanceof utils.VDomArray ? ${exprID} : utils.htmlToVDOM(${exprID});`
+      );
+      ctx.addLine(`c${ctx.parentNode}.push(...vnodeArray);`);
+    } else {
+      ctx.addLine(`c${ctx.parentNode}.push(...utils.htmlToVDOM(${exprID}));`);
+    }
   }
   if (node.childNodes.length) {
     ctx.addElse();
     qweb._compileChildren(node, ctx);
   }
 
-  if (value.xml instanceof NodeList && value.id) {
-    ctx.addElse();
-    for (let node of Array.from(value.xml)) {
-      qweb._compileNode(<ChildNode>node, ctx);
-    }
-  }
   ctx.closeIf();
 }
 
@@ -109,24 +115,46 @@ QWeb.addDirective({
   name: "set",
   extraNames: ["value"],
   priority: 60,
-  atNodeEncounter({ node, ctx }): boolean {
+  atNodeEncounter({ node, qweb, ctx }): boolean {
+    ctx.rootContext.shouldDefineScope = true;
     const variable = node.getAttribute("t-set")!;
     let value = node.getAttribute("t-value")!;
     ctx.variables[variable] = ctx.variables[variable] || {};
     let qwebvar = ctx.variables[variable];
+    const hasBody = node.hasChildNodes();
 
+    qwebvar.id = variable;
+    qwebvar.expr = `scope.${variable}`;
     if (value) {
       const formattedValue = ctx.formatExpression(value);
-      if (ctx.variables.hasOwnProperty(variable) && qwebvar.id) {
-        ctx.addLine(`${qwebvar.id} = ${formattedValue}`);
-      } else {
-        const varName = `_${ctx.generateID()}`;
-        ctx.addLine(`var ${varName} = ${formattedValue};`);
-        qwebvar.id = varName;
-        qwebvar.expr = formattedValue;
+      ctx.addLine(`${qwebvar.expr} = ${formattedValue};`);
+      qwebvar.value = formattedValue;
+    }
+
+    if (hasBody) {
+      ctx.rootContext.shouldDefineUtils = true;
+      if (value) {
+        ctx.addIf(`!(${qwebvar.expr})`);
+      }
+      const tempParentNodeID = ctx.generateID();
+      const _parentNode = ctx.parentNode;
+      ctx.parentNode = tempParentNodeID;
+
+      ctx.addLine(`const c${tempParentNodeID} = new utils.VDomArray();`);
+      const nodeCopy = node.cloneNode(true) as Element;
+      for (let attr of ["t-set", "t-value", "t-if", "t-else", "t-elif"]) {
+        nodeCopy.removeAttribute(attr);
+      }
+      qweb._compileNode(nodeCopy, ctx);
+
+      ctx.addLine(`${qwebvar.expr} = c${tempParentNodeID}`);
+      qwebvar.value = `c${tempParentNodeID}`;
+      qwebvar.hasBody = true;
+
+      ctx.parentNode = _parentNode;
+      if (value) {
+        ctx.closeIf();
       }
-    } else {
-      qwebvar.xml = node.childNodes;
     }
     return true;
   }
@@ -140,7 +168,7 @@ QWeb.addDirective({
   priority: 20,
   atNodeEncounter({ node, ctx }): boolean {
     let cond = ctx.getValue(node.getAttribute("t-if")!);
-    ctx.addIf(typeof cond === "string" ? ctx.formatExpression(cond) : cond.id!);
+    ctx.addIf(typeof cond === "string" ? ctx.formatExpression(cond) : `scope.${cond.id!}`);
     return false;
   },
   finalize({ ctx }) {
@@ -153,7 +181,9 @@ QWeb.addDirective({
   priority: 30,
   atNodeEncounter({ node, ctx }): boolean {
     let cond = ctx.getValue(node.getAttribute("t-elif")!);
-    ctx.addLine(`else if (${typeof cond === "string" ? ctx.formatExpression(cond) : cond.id}) {`);
+    ctx.addLine(
+      `else if (${typeof cond === "string" ? ctx.formatExpression(cond) : `scope.${cond.id}`}) {`
+    );
     ctx.indent();
     return false;
   },
@@ -182,6 +212,9 @@ QWeb.addDirective({
   name: "call",
   priority: 50,
   atNodeEncounter({ node, qweb, ctx }): boolean {
+    // Step 1: sanity checks
+    // ------------------------------------------------
+    ctx.rootContext.shouldDefineScope = true;
     if (node.nodeName !== "t") {
       throw new Error("Invalid tag for t-call directive (should be 't')");
     }
@@ -190,77 +223,63 @@ QWeb.addDirective({
     if (!nodeTemplate) {
       throw new Error(`Cannot find template "${subTemplate}" (t-call)`);
     }
-    const nodeCopy = node.cloneNode(true) as Element;
-    nodeCopy.removeAttribute("t-call");
 
-    // extract variables from nodecopy
-    const tempCtx = new CompilationContext();
-    tempCtx.allowMultipleRoots = true;
-    qweb._compileNode(nodeCopy, tempCtx);
-    const vars = Object.assign({}, ctx.variables, tempCtx.variables);
-
-    const templateMap = Object.create(ctx.templates);
-    // open new scope, if necessary
-    const hasNewVariables = Object.keys(tempCtx.variables).length > 0;
-
-    // compile sub template
-    let subCtx = ctx.subContext("caller", nodeCopy).subContext("variables", Object.create(vars));
-    subCtx = subCtx.subContext("templates", templateMap);
-
-    if (templateMap[subTemplate]) {
-      // OUCH, IT IS A RECURSIVE TEMPLATE SITUATION...
-      // This is a tricky situation... We obviously cannot inline the compiled
-      // template. So, what we need to do is to compile it, and make sure we
-      // properly transfer everything from the current scope to the sub template.
-      ctx.rootContext.shouldTrackScope = true;
-      ctx.rootContext.shouldDefineOwner = true;
-      let subTemplateName;
-      if (ctx.hasParentWidget) {
-        subTemplateName = ctx.templateName;
-      } else {
-        subTemplateName = `__${ctx.generateID()}`;
-        subCtx.variables = {};
-        let id = 0;
-        for (let v in vars) {
-          subCtx.variables[v] = vars[v];
-          (vars[v] as any).id = `_v${id++}`;
-        }
-        const subTemplateFn = qweb._compile(subTemplateName, nodeTemplate.elem, subCtx);
-        qweb.recursiveFns[subTemplateName] = subTemplateFn;
-      }
-      let varCode = `{}`;
-      if (Object.keys(vars).length) {
-        let id = 0;
-        const content = Object.values(vars)
-          .map((v: any) => `_v${id++}: ${v.expr}`)
-          .join(",");
-        varCode = `{${content}}`;
-      }
-      ctx.addLine(
-        `this.recursiveFns['${subTemplateName}'].call(this, context, Object.assign({}, extra, {parentNode: c${ctx.parentNode}, fiber: {vars: ${varCode}, scope}}));`
-      );
-      return true;
+    // Step 2: compile target template in sub templates
+    // ------------------------------------------------
+    if (!qweb.subTemplates[subTemplate]) {
+      qweb.subTemplates[subTemplate] = true;
+      const subTemplateFn = qweb._compile(subTemplate, nodeTemplate.elem, ctx);
+      qweb.subTemplates[subTemplate] = subTemplateFn;
     }
-    templateMap[subTemplate] = true;
 
-    if (hasNewVariables) {
-      ctx.addLine("{");
+    // Step 3: compile t-call body if necessary
+    // ------------------------------------------------
+    let hasBody = node.hasChildNodes();
+    let protectID;
+    if (hasBody) {
+      // we add a sub scope to protect the ambient scope
+      ctx.addLine(`{`);
       ctx.indent();
-      // add new variables, if any
-      for (let key in tempCtx.variables) {
-        const v = tempCtx.variables[key];
-        if (v.expr) {
-          ctx.addLine(`let ${v.id} = ${v.expr};`);
-        }
-        // todo: handle XML variables...
-      }
-    }
-    qweb._compileNode(nodeTemplate.elem, subCtx);
-
-    // close new scope
-    if (hasNewVariables) {
+      protectID = ctx.startProtectScope();
+      const nodeCopy = node.cloneNode(true) as Element;
+      nodeCopy.removeAttribute("t-call");
+      const parentNode = ctx.parentNode;
+      ctx.parentNode = "__0";
+      // this local scope is intended to trap c__0
+      ctx.addLine(`{`);
+      ctx.indent();
+      ctx.addLine("let c__0 = [];");
+      qweb._compileNode(nodeCopy, ctx);
+      ctx.rootContext.shouldDefineUtils = true;
+      ctx.addLine("scope[utils.zero] = c__0;");
+      ctx.parentNode = parentNode;
       ctx.dedent();
-      ctx.addLine("}");
+      ctx.addLine(`}`);
+    }
+
+    // Step 4: add the appropriate function call to current component
+    // ------------------------------------------------
+    const callingScope = hasBody ? "scope" : "Object.assign(Object.create(context), scope)";
+    if (ctx.parentNode) {
+      ctx.addLine(
+        `this.subTemplates['${subTemplate}'].call(this, ${callingScope}, Object.assign({}, extra, {parentNode: c${ctx.parentNode}}));`
+      );
+    } else {
+      // this is a t-call with no parentnode, we need to extract the result
+      ctx.rootContext.shouldDefineResult = true;
+      ctx.addLine(`result = []`);
+      ctx.addLine(
+        `this.subTemplates['${subTemplate}'].call(this, ${callingScope}, Object.assign({}, extra, {parentNode: result}));`
+      );
+      ctx.addLine(`result = result[0]`);
+    }
+
+    // Step 5: restore previous scope
+    // ------------------------------------------------
+    if (hasBody) {
+      ctx.stopProtectScope(protectID);
+      ctx.dedent();
+      ctx.addLine(`}`);
     }
 
     return true;
@@ -275,7 +294,7 @@ QWeb.addDirective({
   extraNames: ["as"],
   priority: 10,
   atNodeEncounter({ node, qweb, ctx }): boolean {
-    ctx.rootContext.shouldProtectContext = true;
+    ctx.rootContext.shouldDefineScope = true;
     ctx = ctx.subContext("loopNumber", ctx.loopNumber + 1);
     const elems = node.getAttribute("t-foreach")!;
     const name = node.getAttribute("t-as")!;
@@ -290,14 +309,16 @@ QWeb.addDirective({
     ctx.addLine(`_${valuesID} = Object.values(_${arrayID});`);
     ctx.closeIf();
     ctx.addLine(`var _length${keysID} = _${keysID}.length;`);
+    let varsID = ctx.startProtectScope();
     const loopVar = `i${ctx.loopNumber}`;
     ctx.addLine(`for (let ${loopVar} = 0; ${loopVar} < _length${keysID}; ${loopVar}++) {`);
     ctx.indent();
-    ctx.addToScope(name + "_first", `${loopVar} === 0`);
-    ctx.addToScope(name + "_last", `${loopVar} === _length${keysID} - 1`);
-    ctx.addToScope(name + "_index", loopVar);
-    ctx.addToScope(name, `_${keysID}[${loopVar}]`);
-    ctx.addToScope(name + "_value", `_${valuesID}[${loopVar}]`);
+
+    ctx.addLine(`scope.${name}_first = ${loopVar} === 0`);
+    ctx.addLine(`scope.${name}_last = ${loopVar} === _length${keysID} - 1`);
+    ctx.addLine(`scope.${name}_index = ${loopVar}`);
+    ctx.addLine(`scope.${name} = _${keysID}[${loopVar}]`);
+    ctx.addLine(`scope.${name}_value = _${valuesID}[${loopVar}]`);
     const nodeCopy = <Element>node.cloneNode(true);
     let shouldWarn =
       !nodeCopy.hasAttribute("t-key") &&
@@ -314,6 +335,7 @@ QWeb.addDirective({
     qweb._compileNode(nodeCopy, ctx);
     ctx.dedent();
     ctx.addLine("}");
+    ctx.stopProtectScope(varsID);
     return true;
   }
 });

src/qweb/compilation_context.ts

@@ -10,35 +10,27 @@ export class CompilationContext {
   code: string[] = [];
   variables: { [key: string]: QWebVar } = {};
   escaping: boolean = false;
-  parentNode: number | null = null;
+  parentNode: number | null | string = null;
   parentTextNode: number | null = null;
   rootNode: number | null = null;
   indentLevel: number = 0;
   rootContext: CompilationContext;
-  caller: Element | undefined;
-  shouldDefineOwner: boolean = false;
   shouldDefineParent: boolean = false;
+  shouldDefineScope: boolean = false;
   shouldDefineQWeb: boolean = false;
   shouldDefineUtils: boolean = false;
   shouldDefineRefs: boolean = false;
   shouldDefineResult: boolean = true;
-  shouldProtectContext: boolean = false;
-  shouldTrackScope: boolean = false;
   loopNumber: number = 0;
   inPreTag: boolean = false;
   templateName: string;
   allowMultipleRoots: boolean = false;
   hasParentWidget: boolean = false;
-  scopeVars: any[] = [];
   currentKey: string = "";
-  templates: { [key: string]: boolean } = {};
-  callingLevel: number = 0;
-  inliningLevel: number = 0;
 
   constructor(name?: string) {
     this.rootContext = this;
     this.templateName = name || "noname";
-    this.templates[this.templateName] = true;
     this.addLine("var h = this.h;");
   }
 
@@ -71,30 +63,16 @@ export class CompilationContext {
   }
 
   generateCode(): string[] {
-    const shouldTrackScope = this.shouldTrackScope && this.scopeVars.length;
-    if (shouldTrackScope) {
-      // add some vars to scope if needed
-      for (let scopeVar of this.scopeVars.reverse()) {
-        let { index, key, indent } = scopeVar;
-        const prefix = new Array(indent + 2).join("    ");
-        this.code.splice(index + 1, 0, prefix + `scope.${key} = context.${key};`);
-      }
-      this.code.unshift("    const scope = Object.create(null);");
-    }
-    if (this.shouldProtectContext) {
-      this.code.unshift("    context = Object.create(context);");
-    }
     if (this.shouldDefineResult) {
       this.code.unshift("    let result;");
     }
+
+    if (this.shouldDefineScope) {
+      this.code.unshift("    let scope = Object.create(context);");
+    }
     if (this.shouldDefineRefs) {
       this.code.unshift("    context.__owl__.refs = context.__owl__.refs || {};");
     }
-    if (this.shouldDefineOwner) {
-      // this is necessary to prevent some directives (t-forach for ex) to
-      // pollute the rendering context by adding some keys in it.
-      this.code.unshift("    let owner = context;");
-    }
     if (this.shouldDefineParent) {
       if (this.hasParentWidget) {
         this.code.unshift("    let parent = extra.parent;");
@@ -131,10 +109,6 @@ export class CompilationContext {
   subContext(key: keyof CompilationContext, value: any): CompilationContext {
     const newContext = Object.create(this);
     newContext[key] = value;
-    if (key === "caller") {
-      newContext.callingLevel++;
-      newContext.inliningLevel++;
-    }
     return newContext;
   }
 
@@ -152,11 +126,6 @@ export class CompilationContext {
     return this.code.length - 1;
   }
 
-  addToScope(key: string, expr: string) {
-    const index = this.addLine(`context.${key} = ${expr};`);
-    this.rootContext.scopeVars.push({ index, key, indent: this.indentLevel });
-  }
-
   addIf(condition: string) {
     this.addLine(`if (${condition}) {`);
     this.indent();
@@ -172,27 +141,6 @@ export class CompilationContext {
     this.dedent();
     this.addLine("}");
   }
-  /**
-   * Recursively (inverse) fetches the `caller` of a context
-   * Useful to determine to which t-call a t-raw="0" refers
-   */
-  getCaller(targetLevel?: number): Element | null {
-    if (targetLevel === undefined) {
-      targetLevel = this.inliningLevel;
-    }
-    if (targetLevel === this.callingLevel) {
-      return this.caller || null;
-    }
-    const proto = (this as any).__proto__;
-    return proto ? proto.getCaller(targetLevel) : null;
-  }
-  /**
-   * Marks the context with the current recursive level
-   * in which we are for inlining archs (t-raw="0")
-   */
-  getInliningContext(): CompilationContext {
-    return this.subContext("inliningLevel", this.inliningLevel - 1);
-  }
 
   getValue(val: any): QWebVar | string {
     return val in this.variables ? this.getValue(this.variables[val]) : val;
@@ -205,6 +153,7 @@ export class CompilationContext {
    * - replace already defined variables by their internal name
    */
   formatExpression(expr: string): string {
+    this.rootContext.shouldDefineScope = true;
     return compileExpr(expr, this.variables);
   }
 
@@ -225,4 +174,14 @@ export class CompilationContext {
     let r = s.replace(/\{\{.*?\}\}/g, s => "${" + this.formatExpression(s.slice(2, -2)) + "}");
     return "`" + r + "`";
   }
+  startProtectScope(): number {
+    const protectID = this.generateID();
+    this.rootContext.shouldDefineScope = true;
+    this.addLine(`const _origScope${protectID} = scope;`);
+    this.addLine(`scope = Object.assign(Object.create(context), scope);`);
+    return protectID;
+  }
+  stopProtectScope(protectID: number) {
+    this.addLine(`scope = _origScope${protectID};`);
+  }
 }

src/qweb/expression_parser.ts

@@ -39,9 +39,10 @@ const WORD_REPLACEMENT = {
 };
 
 export interface QWebVar {
-  id?: string;
-  expr?: string;
-  xml?: NodeList;
+  id: string; // foo
+  expr: string; // scope.foo (local variables => only foo)
+  value?: string; // 1 + 3
+  hasBody?: boolean;
 }
 
 //------------------------------------------------------------------------------
@@ -63,6 +64,7 @@ type TKind =
 interface Token {
   type: TKind;
   value: string;
+  originalValue?: string;
   size?: number;
 }
 
@@ -79,7 +81,7 @@ const STATIC_TOKEN_MAP: { [key: string]: TKind } = {
 
 // note that the space after typeof is relevant. It makes sure that the formatted
 // expression has a space after typeof
-const OPERATORS = ".,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ".split(",");
+const OPERATORS = ".,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>".split(",");
 
 type Tokenizer = (expr: string) => Token | false;
 
@@ -227,35 +229,53 @@ export function tokenize(expr: string): Token[] {
  * - unless the previous token is a dot (in that case, this is a property: `a.b`)
  * - or if the previous token is a left brace or a comma, and the next token is
  *   a colon (in that case, this is an object key: `{a: b}`)
+ *
+ * Some specific code is also required to support arrow functions. If we detect
+ * the arrow operator, then we add the current (or some previous tokens) token to
+ * the list of variables so it does not get replaced by a lookup in the context
  */
-export function compileExpr(expr: string, vars: { [key: string]: QWebVar }): string {
+export function compileExpr(expr: string, scope: { [key: string]: QWebVar }): string {
+  scope = Object.create(scope);
   const tokens = tokenize(expr);
-  let result = "";
   for (let i = 0; i < tokens.length; i++) {
     let token = tokens[i];
+    let prevToken = tokens[i - 1];
+    let nextToken = tokens[i + 1];
+    let isVar = token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value);
     if (token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value)) {
-      // we need to find if it is a variable
-      let isVar = true;
-      let prevToken = tokens[i - 1];
       if (prevToken) {
         if (prevToken.type === "OPERATOR" && prevToken.value === ".") {
           isVar = false;
         } else if (prevToken.type === "LEFT_BRACE" || prevToken.type === "COMMA") {
-          let nextToken = tokens[i + 1];
           if (nextToken && nextToken.type === "COLON") {
             isVar = false;
           }
         }
       }
-      if (isVar) {
-        if (token.value in vars && "id" in vars[token.value]) {
-          token.value = vars[token.value].id!;
-        } else {
-          token.value = `context['${token.value}']`;
+    }
+    if (nextToken && nextToken.type === "OPERATOR" && nextToken.value === "=>") {
+      if (token.type === "RIGHT_PAREN") {
+        let j = i - 1;
+        while (j > 0 && tokens[j].type !== "LEFT_PAREN") {
+          if (tokens[j].type === "SYMBOL" && tokens[j].originalValue) {
+            tokens[j].value = tokens[j].originalValue!;
+            scope[tokens[j].value] = { id: tokens[j].value, expr: tokens[j].value };
+          }
+          j--;
         }
+      } else {
+        scope[token.value] = { id: token.value, expr: token.value };
+      }
+    }
+
+    if (isVar) {
+      if (token.value in scope && "id" in scope[token.value]) {
+        token.value = scope[token.value].expr!;
+      } else {
+        token.originalValue = token.value;
+        token.value = `scope['${token.value}']`;
       }
     }
-    result += token.value;
   }
-  return result;
+  return tokens.map(t => t.value).join("");
 }

src/qweb/extensions.ts

@@ -30,7 +30,6 @@ QWeb.addDirective({
   name: "on",
   priority: 90,
   atNodeCreation({ ctx, fullName, value, nodeID }) {
-    ctx.rootContext.shouldDefineOwner = true;
     const [eventName, ...mods] = fullName.slice(5).split(".");
     if (!eventName) {
       throw new Error("Missing event name with t-on directive");
@@ -40,8 +39,8 @@ QWeb.addDirective({
       extraArgs = args.slice(1, -1);
       return "";
     });
-    let params = extraArgs ? `owner, ${ctx.formatExpression(extraArgs)}` : "owner";
-    let handler = `function (e) {`;
+    let params = extraArgs ? `context, ${ctx.formatExpression(extraArgs)}` : "context";
+    let handler = `function (e) {if (!context.__owl__.isMounted){return}`;
     handler += mods
       .map(function(mod) {
         return MODS_CODE[mod];
@@ -195,9 +194,8 @@ QWeb.addDirective({
 QWeb.addDirective({
   name: "slot",
   priority: 80,
-  atNodeEncounter({ ctx, value }): boolean {
+  atNodeEncounter({ ctx, value, node, qweb }): boolean {
     const slotKey = ctx.generateID();
-    ctx.rootContext.shouldDefineOwner = true;
     ctx.addLine(
       `const slot${slotKey} = this.constructor.slots[context.__owl__.slotId + '_' + '${value}'];`
     );
@@ -211,11 +209,17 @@ QWeb.addDirective({
       ctx.addLine(`result = {}`);
     }
     ctx.addLine(
-      `slot${slotKey}.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: ${parentNode}, vars: extra.vars, parent: extra.parent || owner}));`
+      `slot${slotKey}.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: ${parentNode}, parent: extra.parent || context}));`
     );
     if (!ctx.parentNode) {
       ctx.addLine(`utils.defineProxy(result, ${parentNode}[0]);`);
     }
+    if (node.hasChildNodes()) {
+      ctx.addElse();
+      const nodeCopy = <Element>node.cloneNode(true);
+      nodeCopy.removeAttribute("t-slot");
+      qweb._compileNode(nodeCopy, ctx);
+    }
     ctx.closeIf();
     return true;
   }

src/qweb/qweb.ts

@@ -87,6 +87,7 @@ interface Utils {
 }
 
 const UTILS: Utils = {
+  zero: Symbol("zero"),
   toObj(expr) {
     if (typeof expr === "string") {
       expr = expr.trim();
@@ -105,6 +106,20 @@ const UTILS: Utils = {
   shallowEqual,
   addNameSpace(vnode) {
     addNS(vnode.data, vnode.children, vnode.sel);
+  },
+  VDomArray: class VDomArray extends Array {},
+  vDomToString: function(vdom: VNode[]): string {
+    return vdom
+      .map(vnode => {
+        if (vnode.sel) {
+          const node = document.createElement(vnode.sel);
+          const result = patch(node, vnode);
+          return (<HTMLElement>result.elm).outerHTML;
+        } else {
+          return vnode.text;
+        }
+      })
+      .join();
   }
 };
 
@@ -171,7 +186,7 @@ export class QWeb extends EventBus {
   // recursiveTemplates contains sub templates called with t-call, but which
   // ends up in recursive situations.  This is very similar to the slot situation,
   // as in we need to propagate the scope.
-  recursiveFns = {};
+  subTemplates = {};
 
   isUpdating: boolean = false;
   translateFn?: QWebConfig["translateFn"];
@@ -360,23 +375,12 @@ export class QWeb extends EventBus {
       ctx.shouldDefineResult = false;
     }
     if (parentContext) {
-      ctx.templates = Object.create(parentContext.templates);
       ctx.variables = Object.create(parentContext.variables);
       ctx.parentNode = parentContext.parentNode || ctx.generateID();
       ctx.allowMultipleRoots = true;
       ctx.hasParentWidget = true;
       ctx.shouldDefineResult = false;
       ctx.addLine(`let c${ctx.parentNode} = extra.parentNode;`);
-
-      for (let v in parentContext.variables) {
-        let variable = <any>parentContext.variables[v];
-        if (variable.id) {
-          ctx.addLine(`let ${variable.id} = extra.fiber.vars.${variable.id}`);
-        }
-      }
-    }
-    if (parentContext) {
-      ctx.addLine("    Object.assign(context, extra.fiber.scope);");
     }
     this._compileNode(elem, ctx);
 
@@ -392,12 +396,13 @@ export class QWeb extends EventBus {
     }
 
     let code = ctx.generateCode();
+    const templateName = ctx.templateName.replace(/`/g, "'").slice(0, 200);
+    code.unshift(`    // Template name: "${templateName}"`);
 
     let template;
     try {
-      template = new Function("context", "extra", code.join("\n")) as CompiledTemplate;
+      template = new Function("context, extra", code.join("\n")) as CompiledTemplate;
     } catch (e) {
-      const templateName = ctx.templateName.replace(/`/g, "'");
       console.groupCollapsed(`Invalid Code generated by ${templateName}`);
       console.warn(code.join("\n"));
       console.groupEnd();
@@ -453,7 +458,6 @@ export class QWeb extends EventBus {
       }
       return;
     }
-
     if (ctx !== ctx.rootContext) {
       ctx = ctx.subContext("currentKey", ctx.currentKey);
     }
@@ -650,13 +654,14 @@ export class QWeb extends EventBus {
       if (!name.startsWith("t-") && !(<Element>node).getAttribute("t-attf-" + name)) {
         const attID = ctx.generateID();
         if (name === "class") {
-          let classDef = value
-            .trim()
-            .split(/\s+/)
-            .map(a => `'${a}':true`)
-            .join(",");
-          classObj = `_${ctx.generateID()}`;
-          ctx.addLine(`let ${classObj} = {${classDef}};`);
+          if ((value = value.trim())) {
+            let classDef = value
+              .split(/\s+/)
+              .map(a => `'${a}':true`)
+              .join(",");
+            classObj = `_${ctx.generateID()}`;
+            ctx.addLine(`let ${classObj} = {${classDef}};`);
+          }
         } else {
           ctx.addLine(`var _${attID} = '${value}';`);
           if (!name.match(/^[a-zA-Z]+$/)) {
@@ -672,7 +677,7 @@ export class QWeb extends EventBus {
       if (name.startsWith("t-att-")) {
         let attName = name.slice(6);
         const v = ctx.getValue(value);
-        let formattedValue = typeof v === "string" ? ctx.formatExpression(v) : v.id;
+        let formattedValue = typeof v === "string" ? ctx.formatExpression(v) : `scope.${v.id}`;
 
         if (attName === "class") {
           ctx.rootContext.shouldDefineUtils = true;

src/vdom/modules.ts

@@ -219,7 +219,7 @@ function updateClass(oldVnode: VNode, vnode: VNode): void {
   elm = vnode.elm as Element;
 
   for (name in oldClass) {
-    if (!klass[name]) {
+    if (name && !klass[name]) {
       elm.classList.remove(name);
     }
   }

tests/__snapshots__/animations.test.ts.snap

@@ -1,150 +1,148 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`animations t-transition combined with component 1`] = `
-"function anonymous(context,extra
+"function anonymous(context, extra
 ) {
+    // Template name: \\"Parent\\"
     let utils = this.constructor.utils;
     let QWeb = this.constructor;
     let parent = context;
-    let owner = context;
+    let scope = Object.create(context);
     var h = this.h;
     let c1 = [], p1 = {key:1};
     var vn1 = h('div', p1, c1);
     //COMPONENT
-    let k4 = \`__5__\`;
-    let w3 = k4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k4]] : false;
-    let props3 = {};
-    if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) {
-        w3.destroy();
-        w3 = false;
+    let k3 = \`__4__\`;
+    let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false;
+    let props2 = {};
+    if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
+        w2.destroy();
+        w2 = false;
     }
-    if (w3) {
-        w3.__updateProps(props3, extra.fiber, undefined, undefined);
-        let pvnode = w3.__owl__.pvnode;
+    if (w2) {
+        w2.__updateProps(props2, extra.fiber, undefined);
+        let pvnode = w2.__owl__.pvnode;
         c1.push(pvnode);
     } else {
-        let componentKey3 = \`Child\`;
-        let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| context['Child'];
-        if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
-        w3 = new W3(parent, props3);
-        const __patch3 = w3.__patch;
-        w3.__patch = fiber => {__patch3.call(w3, fiber); if(!w3.__owl__.transitionInserted){w3.__owl__.transitionInserted = true;utils.transitionInsert(w3.__owl__.vnode, 'chimay');}};
-        parent.__owl__.cmap[k4] = w3.__owl__.id;
-        let def2 = w3.__prepare(extra.fiber, undefined, undefined);
-        let pvnode = h('dummy', {key: k4, hook: {remove() {},destroy(vn) {let finalize = () => {
-          w3.destroy();
+        let componentKey2 = \`Child\`;
+        let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['Child'];
+        if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
+        w2 = new W2(parent, props2);
+        const __patch2 = w2.__patch;
+        w2.__patch = fiber => {__patch2.call(w2, fiber); if(!w2.__owl__.transitionInserted){w2.__owl__.transitionInserted = true;utils.transitionInsert(w2.__owl__.vnode, 'chimay');}};
+        parent.__owl__.cmap[k3] = w2.__owl__.id;
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {let finalize = () => {
+          w2.destroy();
         };
-        delete w3.__owl__.transitionInserted;
+        delete w2.__owl__.transitionInserted;
         utils.transitionRemove(vn, 'chimay', finalize);}}});
-        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () { if (fiber.isCompleted) { return; } const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
         c1.push(pvnode);
-        w3.__owl__.pvnode = pvnode;
+        w2.__owl__.pvnode = pvnode;
     }
-    w3.__owl__.parentLastFiberId = extra.fiber.id;
+    w2.__owl__.parentLastFiberId = extra.fiber.id;
     return vn1;
 }"
 `;
 
 exports[`animations t-transition combined with t-component and t-if 1`] = `
-"function anonymous(context,extra
+"function anonymous(context, extra
 ) {
+    // Template name: \\"Parent\\"
     let utils = this.constructor.utils;
     let QWeb = this.constructor;
     let parent = context;
-    let owner = context;
+    let scope = Object.create(context);
     var h = this.h;
     let c1 = [], p1 = {key:1};
     var vn1 = h('div', p1, c1);
-    if (context['state'].display) {
+    if (scope['state'].display) {
         //COMPONENT
-        let k4 = \`__5__\`;
-        let w3 = k4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k4]] : false;
-        let props3 = {};
-        if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) {
-            w3.destroy();
-            w3 = false;
+        let k3 = \`__4__\`;
+        let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false;
+        let props2 = {};
+        if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
+            w2.destroy();
+            w2 = false;
         }
-        if (w3) {
-            w3.__updateProps(props3, extra.fiber, undefined, undefined);
-            let pvnode = w3.__owl__.pvnode;
+        if (w2) {
+            w2.__updateProps(props2, extra.fiber, undefined);
+            let pvnode = w2.__owl__.pvnode;
             c1.push(pvnode);
         } else {
-            let componentKey3 = \`Child\`;
-            let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| context['Child'];
-            if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
-            w3 = new W3(parent, props3);
-            const __patch3 = w3.__patch;
-            w3.__patch = fiber => {__patch3.call(w3, fiber); if(!w3.__owl__.transitionInserted){w3.__owl__.transitionInserted = true;utils.transitionInsert(w3.__owl__.vnode, 'chimay');}};
-            parent.__owl__.cmap[k4] = w3.__owl__.id;
-            let def2 = w3.__prepare(extra.fiber, undefined, undefined);
-            let pvnode = h('dummy', {key: k4, hook: {remove() {},destroy(vn) {let finalize = () => {
-          w3.destroy();
+            let componentKey2 = \`Child\`;
+            let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['Child'];
+            if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
+            w2 = new W2(parent, props2);
+            const __patch2 = w2.__patch;
+            w2.__patch = fiber => {__patch2.call(w2, fiber); if(!w2.__owl__.transitionInserted){w2.__owl__.transitionInserted = true;utils.transitionInsert(w2.__owl__.vnode, 'chimay');}};
+            parent.__owl__.cmap[k3] = w2.__owl__.id;
+            let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {let finalize = () => {
+          w2.destroy();
         };
-        delete w3.__owl__.transitionInserted;
+        delete w2.__owl__.transitionInserted;
         utils.transitionRemove(vn, 'chimay', finalize);}}});
-            const fiber = w3.__owl__.currentFiber;
-            def2.then(function () { if (fiber.isCompleted) { return; } const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
             c1.push(pvnode);
-            w3.__owl__.pvnode = pvnode;
+            w2.__owl__.pvnode = pvnode;
         }
-        w3.__owl__.parentLastFiberId = extra.fiber.id;
+        w2.__owl__.parentLastFiberId = extra.fiber.id;
     }
     return vn1;
 }"
 `;
 
 exports[`animations t-transition combined with t-component, remove and re-add before transitionend 1`] = `
-"function anonymous(context,extra
+"function anonymous(context, extra
 ) {
+    // Template name: \\"__template__2\\"
     let utils = this.constructor.utils;
     let QWeb = this.constructor;
     let parent = context;
-    let owner = context;
+    let scope = Object.create(context);
     var h = this.h;
     let c1 = [], p1 = {key:1};
     var vn1 = h('div', p1, c1);
-    if (context['state'].flag) {
+    if (scope['state'].flag) {
         //COMPONENT
-        let k4 = \`__5__\`;
-        let w3 = k4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k4]] : false;
-        let props3 = {};
-        if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) {
-            w3.destroy();
-            w3 = false;
+        let k3 = \`__4__\`;
+        let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false;
+        let props2 = {};
+        if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
+            w2.destroy();
+            w2 = false;
         }
-        if (w3) {
-            w3.__updateProps(props3, extra.fiber, undefined, undefined);
-            let pvnode = w3.__owl__.pvnode;
+        if (w2) {
+            w2.__updateProps(props2, extra.fiber, undefined);
+            let pvnode = w2.__owl__.pvnode;
             c1.push(pvnode);
         } else {
-            let componentKey3 = \`Child\`;
-            let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| context['Child'];
-            if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
-            w3 = new W3(parent, props3);
-            const __patch3 = w3.__patch;
-            w3.__patch = fiber => {__patch3.call(w3, fiber); if(!w3.__owl__.transitionInserted){w3.__owl__.transitionInserted = true;utils.transitionInsert(w3.__owl__.vnode, 'chimay');}};
-            parent.__owl__.cmap[k4] = w3.__owl__.id;
-            let def2 = w3.__prepare(extra.fiber, undefined, undefined);
-            let pvnode = h('dummy', {key: k4, hook: {remove() {},destroy(vn) {let finalize = () => {
-          w3.destroy();
+            let componentKey2 = \`Child\`;
+            let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['Child'];
+            if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
+            w2 = new W2(parent, props2);
+            const __patch2 = w2.__patch;
+            w2.__patch = fiber => {__patch2.call(w2, fiber); if(!w2.__owl__.transitionInserted){w2.__owl__.transitionInserted = true;utils.transitionInsert(w2.__owl__.vnode, 'chimay');}};
+            parent.__owl__.cmap[k3] = w2.__owl__.id;
+            let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {let finalize = () => {
+          w2.destroy();
         };
-        delete w3.__owl__.transitionInserted;
+        delete w2.__owl__.transitionInserted;
         utils.transitionRemove(vn, 'chimay', finalize);}}});
-            const fiber = w3.__owl__.currentFiber;
-            def2.then(function () { if (fiber.isCompleted) { return; } const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
             c1.push(pvnode);
-            w3.__owl__.pvnode = pvnode;
+            w2.__owl__.pvnode = pvnode;
         }
-        w3.__owl__.parentLastFiberId = extra.fiber.id;
+        w2.__owl__.parentLastFiberId = extra.fiber.id;
     }
     return vn1;
 }"
 `;
 
 exports[`animations t-transition with no delay/duration 1`] = `
-"function anonymous(context,extra
+"function anonymous(context, extra
 ) {
+    // Template name: \\"test\\"
     let utils = this.constructor.utils;
     var h = this.h;
     let c1 = [], p1 = {key:1};
@@ -163,8 +161,9 @@ exports[`animations t-transition with no delay/duration 1`] = `
 `;
 
 exports[`animations t-transition, on a simple node (insert) 1`] = `
-"function anonymous(context,extra
+"function anonymous(context, extra
 ) {
+    // Template name: \\"test\\"
     let utils = this.constructor.utils;
     var h = this.h;
     let c1 = [], p1 = {key:1};

tests/animations.test.ts

@@ -254,11 +254,11 @@ describe("animations", () => {
     widget.state.display = false;
     patchNextFrame(cb => {
       expect(fixture.innerHTML).toBe(
-        '<div><span class="chimay-leave chimay-leave-active" data-owl-key="__5__">blue</span></div>'
+        '<div><span class="chimay-leave chimay-leave-active" data-owl-key="__4__">blue</span></div>'
       );
       cb();
       expect(fixture.innerHTML).toBe(
-        '<div><span class="chimay-leave-active chimay-leave-to" data-owl-key="__5__">blue</span></div>'
+        '<div><span class="chimay-leave-active chimay-leave-to" data-owl-key="__4__">blue</span></div>'
       );
       def.resolve();
     });
@@ -371,7 +371,7 @@ describe("animations", () => {
 
     await def; // wait for the mocked repaint to be done
     widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend")); // mock end of css transition
-    expect(fixture.innerHTML).toBe('<div><span class="" data-owl-key="__5__">blue</span></div>');
+    expect(fixture.innerHTML).toBe('<div><span class="" data-owl-key="__4__">blue</span></div>');
   });
 
   test("transitionInsert is called the correct amount of times", async () => {
@@ -405,14 +405,14 @@ describe("animations", () => {
     widget.state.flag = false;
     await nextTick();
     expect(fixture.innerHTML).toBe(
-      '<div><span class="chimay-leave-active chimay-leave-to" data-owl-key="__5__">blue</span></div>'
+      '<div><span class="chimay-leave-active chimay-leave-to" data-owl-key="__4__">blue</span></div>'
     );
     expect(QWeb.utils.transitionInsert).toBeCalledTimes(1);
 
     widget.state.flag = true;
     await nextTick();
     expect(fixture.innerHTML).toBe(
-      '<div><span class="chimay-enter-active chimay-enter-to" data-owl-key="__5__">blue</span></div>'
+      '<div><span class="chimay-enter-active chimay-enter-to" data-owl-key="__4__">blue</span></div>'
     );
     expect(QWeb.utils.transitionInsert).toBeCalledTimes(2);
 
@@ -423,7 +423,7 @@ describe("animations", () => {
 
     expect(QWeb.utils.transitionInsert).toBeCalledTimes(3);
     widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend"));
-    expect(fixture.innerHTML).toBe('<div><span class="" data-owl-key="__5__">blue</span></div>');
+    expect(fixture.innerHTML).toBe('<div><span class="" data-owl-key="__4__">blue</span></div>');
     QWeb.utils.transitionInsert = oldTransitionInsert;
   });
 });

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

@@ -1,41 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`props validation props are validated in dev mode (code snapshot) 1`] = `
-"function anonymous(context,extra
+"function anonymous(context, extra
 ) {
+    // Template name: \\"App\\"
     let utils = this.constructor.utils;
     let QWeb = this.constructor;
     let parent = context;
-    let owner = context;
+    let scope = Object.create(context);
     var h = this.h;
     let c1 = [], p1 = {key:1};
     var vn1 = h('div', p1, c1);
     //COMPONENT
-    let k4 = \`__5__\`;
-    let w3 = k4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k4]] : false;
-    let props3 = {message:1};
-    if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) {
-        w3.destroy();
-        w3 = false;
+    let k3 = \`__4__\`;
+    let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false;
+    let props2 = {message:1};
+    if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
+        w2.destroy();
+        w2 = false;
     }
-    if (w3) {
-        w3.__updateProps(props3, extra.fiber, undefined, undefined);
-        let pvnode = w3.__owl__.pvnode;
+    if (w2) {
+        w2.__updateProps(props2, extra.fiber, undefined);
+        let pvnode = w2.__owl__.pvnode;
         c1.push(pvnode);
     } else {
-        let componentKey3 = \`Child\`;
-        let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| context['Child'];
-        if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
-        w3 = new W3(parent, props3);
-        parent.__owl__.cmap[k4] = w3.__owl__.id;
-        let def2 = w3.__prepare(extra.fiber, undefined, undefined);
-        let pvnode = h('dummy', {key: k4, hook: {remove() {},destroy(vn) {w3.destroy();}}});
-        const fiber = w3.__owl__.currentFiber;
-        def2.then(function () { if (fiber.isCompleted) { return; } const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        let componentKey2 = \`Child\`;
+        let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['Child'];
+        if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
+        w2 = new W2(parent, props2);
+        parent.__owl__.cmap[k3] = w2.__owl__.id;
+        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {w2.destroy();}}});
         c1.push(pvnode);
-        w3.__owl__.pvnode = pvnode;
+        w2.__owl__.pvnode = pvnode;
     }
-    w3.__owl__.parentLastFiberId = extra.fiber.id;
+    w2.__owl__.parentLastFiberId = extra.fiber.id;
     return vn1;
 }"
 `;

tests/component/component.test.ts

@@ -164,7 +164,7 @@ describe("basic widget properties", () => {
     button.click();
     await nextTick();
     expect(target.innerHTML).toBe("<div>0<button>Inc</button></div>");
-    expect(counter.state.counter).toBe(1);
+    expect(counter.state.counter).toBe(0);
   });
 
   test("widget style and classname", async () => {
@@ -358,6 +358,74 @@ describe("basic widget properties", () => {
   });
 });
 
+describe("mount targets", () => {
+  test("can attach a component to an existing node (if same tagname)", async () => {
+    class App extends Component<any, any> {
+      static template = xml`<div>app</div>`;
+    }
+    const div = document.createElement("div");
+    fixture.appendChild(div);
+
+    const app = new App();
+    await app.mount(div, { position: "self" });
+    expect(fixture.innerHTML).toBe("<div>app</div>");
+  });
+
+  test("cannot attach a component to an existing node (if not same tagname)", async () => {
+    class App extends Component<any, any> {
+      static template = xml`<span>app</span>`;
+    }
+    const div = document.createElement("div");
+    fixture.appendChild(div);
+
+    const app = new App();
+    let error;
+    try {
+      await app.mount(div, { position: "self" });
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Cannot attach 'App' to target node (not same tag name)");
+  });
+
+  test("can mount a component (with position='first-child')", async () => {
+    class App extends Component<any, any> {
+      static template = xml`<div>app</div>`;
+    }
+    const span = document.createElement("span");
+    fixture.appendChild(span);
+
+    const app = new App();
+    await app.mount(fixture, { position: "first-child" });
+    expect(fixture.innerHTML).toBe("<div>app</div><span></span>");
+  });
+
+  test("can mount a component (with position='last-child')", async () => {
+    class App extends Component<any, any> {
+      static template = xml`<div>app</div>`;
+    }
+    const span = document.createElement("span");
+    fixture.appendChild(span);
+
+    const app = new App();
+    await app.mount(fixture, { position: "last-child" });
+    expect(fixture.innerHTML).toBe("<span></span><div>app</div>");
+  });
+
+  test("default mount option is 'last-child'", async () => {
+    class App extends Component<any, any> {
+      static template = xml`<div>app</div>`;
+    }
+    const span = document.createElement("span");
+    fixture.appendChild(span);
+
+    const app = new App();
+    await app.mount(fixture);
+    expect(fixture.innerHTML).toBe("<span></span><div>app</div>");
+  });
+});
+
 describe("lifecycle hooks", () => {
   test("willStart hook is called", async () => {
     let willstart = false;
@@ -1614,6 +1682,19 @@ describe("class and style attributes with t-component", () => {
     expect(fixture.innerHTML).toBe(`<div><div class="c a b"></div></div>`);
   });
 
+  test("empty class attribute is not added on widget root el", async () => {
+    class Child extends Component<any, any> {
+      static template = xml`<span/>`;
+    }
+    class Parent extends Component<any, any> {
+      static template = xml`<div><Child class=""/></div>`;
+      static components = { Child };
+    }
+    const widget = new Parent();
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe(`<div><span></span></div>`);
+  });
+
   test("t-att-class is properly added/removed on widget root el", async () => {
     class Child extends Widget {
       static template = xml`<div class="c"/>`;
@@ -1849,6 +1930,38 @@ describe("other directives with t-component", () => {
     expect(widget.n).toBe(1);
   });
 
+  test("t-on works, even if flush is called many times", async () => {
+    let flag = false;
+    let mounted = false;
+    class Child extends Component<any, any> {
+      static template = xml`<span>child</span>`;
+      mounted() {
+        mounted = true;
+      }
+    }
+
+    class Parent extends Component<any, any> {
+      static template = xml`<div><Child t-on-click="doSomething"/></div>`;
+      static components = { Child };
+
+      doSomething() {
+        flag = true;
+      }
+    }
+
+    const parent = new Parent();
+    parent.mount(fixture);
+    while (!mounted) {
+      await nextMicroTick();
+      Component.scheduler.flush();
+    }
+
+    expect(fixture.innerHTML).toBe("<div><span>child</span></div>");
+    expect(flag).toBe(false);
+    fixture.querySelector("span")!.click();
+    expect(flag).toBe(true);
+  });
+
   test("t-on with handler bound to argument", async () => {
     expect.assertions(3);
     env.qweb.addTemplates(`
@@ -2189,6 +2302,100 @@ describe("other directives with t-component", () => {
     expect(steps).toEqual(["GrandChild", "Child", "Parent"]);
   });
 
+  test("t-on on unmounted components", async () => {
+    const steps: string[] = [];
+    let child;
+    class Child extends Component<any, any> {
+      static template = xml`<div t-on-click="onClick"/>`;
+      mounted() {
+        child = this;
+      }
+      onClick() {
+        steps.push("click");
+      }
+    }
+    class Parent extends Component<any, any> {
+      static template = xml`<div><Child/></div>`;
+      static components = { Child };
+      state = useState({ flag: true });
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    let el = child.el;
+    el.click();
+    expect(steps).toEqual(["click"]);
+    parent.unmount();
+    expect(child.__owl__.isMounted).toBe(false);
+    el.click();
+    expect(steps).toEqual(["click"]);
+  });
+
+  test("t-on on destroyed components", async () => {
+    const steps: string[] = [];
+    let child;
+    class Child extends Component<any, any> {
+      static template = xml`<div t-on-click="onClick"/>`;
+      mounted() {
+        child = this;
+      }
+      onClick() {
+        steps.push("click");
+      }
+    }
+    class Parent extends Component<any, any> {
+      static template = xml`<div><Child t-if="state.flag"/></div>`;
+      static components = { Child };
+      state = useState({ flag: true });
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    let el = child.el;
+    el.click();
+    expect(steps).toEqual(["click"]);
+    parent.state.flag = false;
+    await nextTick();
+    expect(child.__owl__.isDestroyed).toBe(true);
+    el.click();
+    expect(steps).toEqual(["click"]);
+  });
+
+  test("t-on on destroyed components, part 2", async () => {
+    const steps: string[] = [];
+    let child;
+    class GrandChild extends Component<any, any> {
+      static template = xml`<div>grandchild</div>`;
+    }
+    class Child extends Component<any, any> {
+      static template = xml`<div><GrandChild t-ref="gc" t-on-click="onClick"/></div>`;
+      static components = { GrandChild };
+      gc = useRef("gc");
+      mounted() {
+        child = this;
+      }
+      onClick() {
+        steps.push("click");
+      }
+    }
+    class Parent extends Component<any, any> {
+      static template = xml`<div><Child t-if="state.flag"/></div>`;
+      static components = { Child };
+      state = useState({ flag: true });
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    let el = child.gc.el;
+    el.click();
+    expect(steps).toEqual(["click"]);
+    parent.state.flag = false;
+    await nextTick();
+    expect(child.__owl__.isDestroyed).toBe(true);
+    el.click();
+    expect(steps).toEqual(["click"]);
+  });
+
   test("t-if works with t-component", async () => {
     env.qweb.addTemplate("ParentWidget", `<div><t t-component="child" t-if="state.flag"/></div>`);
     class Child extends Widget {}
@@ -3825,6 +4032,76 @@ describe("t-slot directive", () => {
     expect(QWeb.slots["1_footer"].toString()).toMatchSnapshot();
   });
 
+  test("named slots can define a default content", async () => {
+    class Dialog extends Component<any, any> {
+      static template = xml`
+        <span>
+          <t t-slot="header">default content</t>
+        </span>`;
+    }
+    class Parent extends Component<any, any> {
+      static template = xml`<div><Dialog/></div>`;
+      static components = { Dialog };
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<div><span>default content</span></div>");
+    expect(env.qweb.templates[Dialog.template].fn.toString()).toMatchSnapshot();
+  });
+
+  test("dafault slots can define a default content", async () => {
+    class Dialog extends Component<any, any> {
+      static template = xml`
+        <span>
+          <t t-slot="default">default content</t>
+        </span>`;
+    }
+    class Parent extends Component<any, any> {
+      static template = xml`<div><Dialog/></div>`;
+      static components = { Dialog };
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<div><span>default content</span></div>");
+    expect(env.qweb.templates[Dialog.template].fn.toString()).toMatchSnapshot();
+  });
+
+  test("default content is not rendered if slot is provided", async () => {
+    class Dialog extends Component<any, any> {
+      static template = xml`
+        <span>
+          <t t-slot="default">default content</t>
+        </span>`;
+    }
+    class Parent extends Component<any, any> {
+      static template = xml`<div><Dialog>hey</Dialog></div>`;
+      static components = { Dialog };
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<div><span>hey</span></div>");
+  });
+
+  test("default content is not rendered if named slot is provided", async () => {
+    class Dialog extends Component<any, any> {
+      static template = xml`
+        <span>
+          <t t-slot="header">default content</t>
+        </span>`;
+    }
+    class Parent extends Component<any, any> {
+      static template = xml`<div><Dialog><t t-set="header">hey</t></Dialog></div>`;
+      static components = { Dialog };
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<div><span>hey</span></div>");
+  });
+
   test("slots are rendered with proper context", async () => {
     env.qweb.addTemplates(`
         <templates>
@@ -4378,6 +4655,189 @@ describe("t-slot directive", () => {
     await nextTick(); // wait for changes triggered in mounted to be applied
     expect(fixture.innerHTML).toBe("<div><span>B0</span><span>B1</span></div>");
   });
+
+  test("nested slots in same template", async () => {
+    let child, child2, child3;
+    class Child extends Widget {
+      static template = xml`
+        <span id="c1">
+          <div>
+            <t t-slot="default"/>
+          </div>
+        </span>`;
+      constructor(parent, props) {
+        super(parent, props);
+        child = this;
+      }
+    }
+    class Child2 extends Widget {
+      static template = xml`
+        <span id="c2">
+          <t t-slot="default"/>
+        </span>`;
+      constructor(parent, props) {
+        super(parent, props);
+        child2 = this;
+      }
+    }
+    class Child3 extends Widget {
+      static template = xml`
+        <span>Child 3</span>`;
+      constructor(parent, props) {
+        super(parent, props);
+        child3 = this;
+      }
+    }
+    class Parent extends Widget {
+      static components = { Child, Child2, Child3 };
+      static template = xml`
+        <span id="parent">
+          <Child>
+            <Child2>
+              <Child3/>
+            </Child2>
+          </Child>
+        </span>`;
+    }
+
+    const widget = new Parent();
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe(
+      '<span id="parent"><span id="c1"><div><span id="c2"><span>Child 3</span></span></div></span></span>'
+    );
+
+    expect(child3.__owl__.parent).toStrictEqual(child2);
+    expect(child2.__owl__.parent).toStrictEqual(child);
+    expect(child.__owl__.parent).toStrictEqual(widget);
+  });
+
+  test("t-slot nested within another slot", async () => {
+    let portal, modal, child3;
+    class Child3 extends Widget {
+      static template = xml`
+        <span>Child 3</span>`;
+      constructor(parent, props) {
+        super(parent, props);
+        child3 = this;
+      }
+    }
+    class Modal extends Widget {
+      static template = xml`
+        <span id="modal">
+          <t t-slot="default"/>
+        </span>`;
+      constructor(parent, props) {
+        super(parent, props);
+        modal = this;
+      }
+    }
+    class Portal extends Widget {
+      static template = xml`
+        <span id="portal">
+          <t t-slot="default"/>
+        </span>`;
+      constructor(parent, props) {
+        super(parent, props);
+        portal = this;
+      }
+    }
+    class Dialog extends Widget {
+      static components = { Modal, Portal };
+      static template = xml`
+        <span id="c2">
+          <Modal>
+            <Portal>
+              <t t-slot="default"/>
+            </Portal>
+           </Modal>
+        </span>`;
+    }
+    class Parent extends Widget {
+      static components = { Child3, Dialog };
+      static template = xml`
+        <span id="c1">
+          <Dialog>
+            <Child3/>
+          </Dialog>
+        </span>`;
+    }
+
+    const widget = new Parent();
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe(
+      '<span id="c1"><span id="c2"><span id="modal"><span id="portal"><span>Child 3</span></span></span></span></span>'
+    );
+
+    expect(child3.__owl__.parent).toStrictEqual(portal);
+    expect(portal.__owl__.parent).toStrictEqual(modal);
+  });
+
+  test("t-slot supports many instances", async () => {
+    let child3;
+    class Child3 extends Widget {
+      static template = xml`
+        <span>Child 3</span>`;
+      constructor(parent, props) {
+        super(parent, props);
+        child3 = this;
+      }
+    }
+    class Dialog extends Widget {
+      static template = xml`
+        <span id="c2">
+          <t t-slot="default"/>
+        </span>`;
+    }
+    class Parent extends Widget {
+      static components = { Child3, Dialog };
+      static template = xml`
+        <span id="c1">
+          <Dialog>
+            <Child3 val="state.lol"/>
+          </Dialog>
+        </span>`;
+      state = { lol: "k" };
+    }
+
+    const widget = new Parent();
+    await widget.mount(fixture);
+    expect(child3.props.val).toBe("k");
+
+    const widget_1 = new Parent();
+    widget_1.state.lol = "m";
+    await widget_1.mount(fixture);
+    expect(child3.props.val).toBe("m");
+  });
+
+  test("slots in slots, with vars", async () => {
+    class B extends Component<any, any> {
+      static template = xml`<span><t t-slot="default"/></span>`;
+    }
+    class A extends Component<any, any> {
+      static template = xml`
+        <div>
+          <B>
+            <t t-slot="default"/>
+          </B>
+        </div>`;
+      static components = { B };
+    }
+    class Parent extends Component<any, any> {
+      static template = xml`
+        <div>
+          <t t-set="test" t-value="state.name"/>
+          <A>
+            <p>hey<t t-esc="test"/></p>
+          </A>
+        </div>`;
+      static components = { A };
+      state = { name: "aaron" };
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><div><span><p>heyaaron</p></span></div></div>");
+  });
 });
 
 describe("t-model directive", () => {

tests/helpers.ts

@@ -87,6 +87,11 @@ export function renderToDOM(
   context: EvalContext = {},
   extra?: any
 ): HTMLElement | Text {
+  if (!context.__owl__) {
+    // we add `__owl__` to better simulate a component as context.  This is
+    // particularly important for event handlers added with the `t-on` directive.
+    context.__owl__ = { isMounted: true };
+  }
   const vnode = qweb.render(template, context, extra);
 
   // we snapshot here the compiled code. This is useful to prevent unwanted code

tests/misc/portal.test.ts

@@ -0,0 +1,890 @@
+import { Portal } from "../../src/misc/portal";
+import { xml } from "../../src/tags";
+import { makeTestFixture, makeTestEnv, nextTick } from "../helpers";
+import { Component } from "../../src/component/component";
+import { useState } from "../../src/hooks";
+import { QWeb } from "../../src/qweb";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+// We create before each test:
+// - fixture: a div, appended to the DOM, intended to be the target of dom
+//   manipulations.  Note that it is removed after each test.
+// - outside: a div with id #outside appended into fixture, meant to be used as
+//   target by Portal component
+// - a test env, necessary to create components, that is set on Component
+
+let fixture: HTMLElement;
+let outside: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+  outside = document.createElement("div");
+  outside.setAttribute("id", "outside");
+  fixture.appendChild(outside);
+
+  Component.env = makeTestEnv();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+describe("Portal: Props validation", () => {
+  test("target is mandatory", async () => {
+    const dev = QWeb.dev;
+    QWeb.dev = true;
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <Portal>
+            <div>2</div>
+          </Portal>
+        </div>`;
+    }
+    let error;
+    try {
+      const parent = new Parent();
+      await parent.mount(fixture);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe(`Missing props 'target' (component 'Portal')`);
+
+    QWeb.dev = dev;
+  });
+
+  test("target is not list", async () => {
+    const dev = QWeb.dev;
+    QWeb.dev = true;
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <Portal target="['body']">
+            <div>2</div>
+          </Portal>
+        </div>`;
+    }
+    let error;
+    try {
+      const parent = new Parent();
+      await parent.mount(fixture);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe(`Invalid Prop 'target' in component 'Portal'`);
+
+    QWeb.dev = dev;
+  });
+});
+
+describe("Portal: Basic use and DOM placement", () => {
+  test("basic use of portal", async () => {
+    const dev = QWeb.dev;
+    QWeb.dev = true;
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <span>1</span>
+          <Portal target="'#outside'">
+            <div>2</div>
+          </Portal>
+        </div>`;
+    }
+    let error;
+    let parent;
+    try {
+      parent = new Parent();
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeUndefined();
+    await parent.mount(fixture);
+    expect(outside.innerHTML).toBe("<div>2</div>");
+    expect(parent.el!.outerHTML).toBe("<div><span>1</span><portal></portal></div>");
+    QWeb.dev = dev;
+  });
+
+  test("conditional use of Portal", async () => {
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <span>1</span>
+          <Portal target="'#outside'" t-if="state.hasPortal">
+            <div>2</div>
+          </Portal>
+        </div>`;
+
+      state = useState({ hasPortal: false });
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+    expect(outside.innerHTML).toBe("");
+    expect(parent.el!.outerHTML).toBe("<div><span>1</span></div>");
+
+    parent.state.hasPortal = true;
+    await nextTick();
+    expect(outside.innerHTML).toBe("<div>2</div>");
+    expect(parent.el!.outerHTML).toBe("<div><span>1</span><portal></portal></div>");
+
+    parent.state.hasPortal = false;
+    await nextTick();
+    expect(outside.innerHTML).toBe("");
+    expect(parent.el!.outerHTML).toBe("<div><span>1</span></div>");
+
+    parent.state.hasPortal = true;
+    await nextTick();
+    expect(outside.innerHTML).toBe("<div>2</div>");
+    expect(parent.el!.outerHTML).toBe("<div><span>1</span><portal></portal></div>");
+  });
+
+  test("conditional use of Portal (with sub Component)", async () => {
+    class Child extends Component<any, any> {
+      static template = xml`<div><t t-esc="props.val"/></div>`;
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div>
+          <span>1</span>
+          <Portal t-if="state.hasPortal" target="'#outside'">
+            <Child val="state.val"/>
+          </Portal>
+        </div>`;
+      state = useState({ hasPortal: false, val: 1 });
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+    expect(outside.innerHTML).toBe("");
+    expect(parent.el!.outerHTML).toBe("<div><span>1</span></div>");
+
+    parent.state.hasPortal = true;
+    await nextTick();
+    expect(outside.innerHTML).toBe("<div>1</div>");
+    expect(parent.el!.outerHTML).toBe("<div><span>1</span><portal></portal></div>");
+
+    parent.state.hasPortal = false;
+    await nextTick();
+    expect(outside.innerHTML).toBe("");
+    expect(parent.el!.outerHTML).toBe("<div><span>1</span></div>");
+
+    parent.state.val = 2;
+    await nextTick();
+    expect(outside.innerHTML).toBe("");
+    expect(parent.el!.outerHTML).toBe("<div><span>1</span></div>");
+
+    parent.state.hasPortal = true;
+    await nextTick();
+    expect(outside.innerHTML).toBe("<div>2</div>");
+    expect(parent.el!.outerHTML).toBe("<div><span>1</span><portal></portal></div>");
+  });
+
+  test("with target in template (before portal)", async () => {
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <div id="local-target"></div>
+          <span>1</span>
+          <Portal target="'#local-target'">
+            <p>2</p>
+          </Portal>
+        </div>`;
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+    expect(parent.el!.innerHTML).toBe(
+      '<div id="local-target"><p>2</p></div><span>1</span><portal></portal>'
+    );
+  });
+
+  test("with target in template (after portal)", async () => {
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <span>1</span>
+          <Portal target="'#local-target'">
+            <p>2</p>
+          </Portal>
+          <div id="local-target"></div>
+        </div>`;
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+    expect(parent.el!.innerHTML).toBe(
+      '<span>1</span><portal></portal><div id="local-target"><p>2</p></div>'
+    );
+  });
+
+  test("portal with target not in dom", async () => {
+    const consoleError = console.error;
+    console.error = jest.fn(() => {});
+
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <Portal target="'#does-not-exist'">
+            <div>2</div>
+          </Portal>
+        </div>`;
+    }
+
+    const parent = new Parent();
+    let error;
+    try {
+      await parent.mount(fixture);
+    } catch (e) {
+      error = e;
+    }
+
+    expect(error).toBeDefined();
+    expect(error.message).toBe('Could not find any match for "#does-not-exist"');
+    expect(console.error).toBeCalledTimes(0);
+    expect(fixture.innerHTML).toBe(`<div id="outside"></div>`);
+    console.error = consoleError;
+  });
+
+  test("portal with child and props", async () => {
+    const steps: string[] = [];
+    class Child extends Component<any, any> {
+      static template = xml`<span><t t-esc="props.val"/></span>`;
+      mounted() {
+        steps.push("mounted");
+        expect(outside.innerHTML).toBe("<span>1</span>");
+      }
+      patched() {
+        steps.push("patched");
+        expect(outside.innerHTML).toBe("<span>2</span>");
+      }
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'">
+            <Child val="state.val"/>
+          </Portal>
+        </div>`;
+      state = useState({ val: 1 });
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+    expect(outside.innerHTML).toBe("<span>1</span>");
+    expect(parent.el!.innerHTML).toBe("<portal></portal>");
+
+    parent.state.val = 2;
+    await nextTick();
+    expect(outside.innerHTML).toBe("<span>2</span>");
+    expect(parent.el!.innerHTML).toBe("<portal></portal>");
+    expect(steps).toEqual(["mounted", "patched"]);
+  });
+
+  test("portal with only text as content", async () => {
+    const consoleError = console.error;
+    console.error = jest.fn(() => {});
+
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'">
+            <t t-esc="'only text'"/>
+          </Portal>
+        </div>`;
+    }
+
+    const parent = new Parent();
+    let error;
+    try {
+      await parent.mount(fixture);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Portal must have exactly one non-text child (has 0)");
+    expect(console.error).toBeCalledTimes(0);
+    expect(fixture.innerHTML).toBe(`<div id="outside"></div>`);
+    console.error = consoleError;
+  });
+
+  test("portal with no content", async () => {
+    const consoleError = console.error;
+    console.error = jest.fn(() => {});
+
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'">
+            <t t-if="false" t-esc="'ABC'"/>
+          </Portal>
+        </div>`;
+    }
+
+    const parent = new Parent();
+    let error;
+    try {
+      await parent.mount(fixture);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Portal must have exactly one non-text child (has 0)");
+    expect(console.error).toBeCalledTimes(0);
+    expect(fixture.innerHTML).toBe(`<div id="outside"></div>`);
+    console.error = consoleError;
+  });
+
+  test("portal with many children", async () => {
+    const consoleError = console.error;
+    console.error = jest.fn(() => {});
+
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'">
+            <div>1</div>
+            <p>2</p>
+          </Portal>
+        </div>`;
+    }
+    const parent = new Parent();
+    let error;
+    try {
+      await parent.mount(fixture);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Portal must have exactly one non-text child (has 2)");
+    expect(console.error).toBeCalledTimes(0);
+    expect(fixture.innerHTML).toBe(`<div id="outside"></div>`);
+    console.error = consoleError;
+  });
+
+  test("portal with dynamic body", async () => {
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'">
+            <span t-if="state.val" t-esc="state.val"/>
+            <div t-else=""/>
+          </Portal>
+        </div>`;
+      state = useState({ val: "ab" });
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(outside.innerHTML).toBe(`<span>ab</span>`);
+
+    parent.state.val = "";
+    await nextTick();
+    expect(outside.innerHTML).toBe(`<div></div>`);
+  });
+
+  test("portal could have dynamically no content", async () => {
+    const consoleError = console.error;
+    console.error = jest.fn(() => {});
+
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'">
+            <span t-if="state.val" t-esc="state.val"/>
+          </Portal>
+        </div>`;
+      state = { val: "ab" };
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(outside.innerHTML).toBe(`<span>ab</span>`);
+
+    let error;
+    try {
+      parent.state.val = "";
+      await parent.render();
+    } catch (e) {
+      error = e;
+    }
+    expect(outside.innerHTML).toBe(``);
+
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Portal must have exactly one non-text child (has 0)");
+
+    expect(console.error).toBeCalledTimes(0);
+    console.error = consoleError;
+  });
+
+  test("lifecycle hooks of portal sub component are properly called", async () => {
+    const steps: any[] = [];
+
+    class Child extends Component<any, any> {
+      static template = xml`<span t-esc="props.val"/>`;
+      mounted() {
+        steps.push("child:mounted");
+      }
+      willPatch() {
+        steps.push("child:willPatch");
+      }
+      patched() {
+        steps.push("child:patched");
+      }
+      willUnmount() {
+        steps.push("child:willUnmount");
+      }
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div>
+          <Portal t-if="state.hasChild" target="'#outside'">
+            <Child val="state.val"/>
+          </Portal>
+        </div>`;
+      state = useState({ hasChild: false, val: 1 });
+      mounted() {
+        steps.push("parent:mounted");
+      }
+      willPatch() {
+        steps.push("parent:willPatch");
+      }
+      patched() {
+        steps.push("parent:patched");
+      }
+      willUnmount() {
+        steps.push("parent:willUnmount");
+      }
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+    expect(steps).toEqual(["parent:mounted"]);
+
+    parent.state.hasChild = true;
+    await nextTick();
+    expect(steps).toEqual([
+      "parent:mounted",
+      "parent:willPatch",
+      "child:mounted",
+      "parent:patched"
+    ]);
+
+    parent.state.val = 2;
+    await nextTick();
+    expect(steps).toEqual([
+      "parent:mounted",
+      "parent:willPatch",
+      "child:mounted",
+      "parent:patched",
+      "parent:willPatch",
+      "child:willPatch",
+      "child:patched",
+      "parent:patched"
+    ]);
+
+    parent.state.hasChild = false;
+    await nextTick();
+    expect(steps).toEqual([
+      "parent:mounted",
+      "parent:willPatch",
+      "child:mounted",
+      "parent:patched",
+      "parent:willPatch",
+      "child:willPatch",
+      "child:patched",
+      "parent:patched",
+      "parent:willPatch",
+      "child:willUnmount",
+      "parent:patched"
+    ]);
+  });
+
+  test("portal destroys on crash", async () => {
+    class Child extends Component<any, any> {
+      static template = xml`<span t-esc="props.error and this.will.crash" />`;
+      state = {};
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'" >
+            <Child error="state.error"/>
+          </Portal>
+        </div>`;
+      state = { error: false };
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+    parent.state.error = true;
+
+    let error;
+    try {
+      await parent.render();
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Cannot read property 'crash' of undefined");
+  });
+
+  test("portal manual unmount", async () => {
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'">
+            <span>gloria</span>
+          </Portal>
+        </div>`;
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(outside.innerHTML).toBe("<span>gloria</span>");
+    expect(parent.el!.innerHTML).toBe("<portal></portal>");
+
+    parent.unmount();
+    expect(outside.innerHTML).toBe("");
+    expect(parent.el!.innerHTML).toBe("<portal><span>gloria</span></portal>");
+
+    await parent.mount(fixture);
+    expect(outside.innerHTML).toBe("<span>gloria</span>");
+    expect(parent.el!.innerHTML).toBe("<portal></portal>");
+  });
+
+  test("portal manual unmount with subcomponent", async () => {
+    expect.assertions(9);
+    class Child extends Component<any, any> {
+      static template = xml`<span>gloria</span>`;
+      mounted() {
+        expect(outside.contains(this.el)).toBeTruthy();
+      }
+      willUnmount() {
+        expect(outside.contains(this.el)).toBeTruthy();
+      }
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'">
+            <Child />
+          </Portal>
+        </div>`;
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(outside.innerHTML).toBe("<span>gloria</span>");
+    expect(parent.el!.innerHTML).toBe("<portal></portal>");
+
+    parent.unmount();
+    expect(outside.innerHTML).toBe("");
+    expect(parent.el!.innerHTML).toBe("<portal><span>gloria</span></portal>");
+
+    await parent.mount(fixture);
+    expect(outside.innerHTML).toBe("<span>gloria</span>");
+    expect(parent.el!.innerHTML).toBe("<portal></portal>");
+  });
+});
+
+describe("Portal: Events handling", () => {
+  test("events triggered on movable pure node are handled", async () => {
+    class Parent extends Component<any, any> {
+      static components = { Portal };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'">
+            <span id="trigger-me" t-on-custom="_onCustom" t-esc="state.val"/>
+          </Portal>
+        </div>`;
+      state = useState({ val: "ab" });
+
+      _onCustom() {
+        this.state.val = "triggered";
+      }
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(outside.innerHTML).toBe(`<span id="trigger-me">ab</span>`);
+    outside.querySelector("#trigger-me")!.dispatchEvent(new Event("custom"));
+    await nextTick();
+    expect(outside.innerHTML).toBe(`<span id="trigger-me">triggered</span>`);
+  });
+
+  test("events triggered on movable owl components are redirected", async () => {
+    let childInst: Component<any, any> | null = null;
+    class Child extends Component<any, any> {
+      static template = xml`
+         <span t-on-custom="_onCustom" t-esc="props.val"/>`;
+
+      constructor(parent, props) {
+        super(parent, props);
+        childInst = this;
+      }
+
+      _onCustom() {
+        this.trigger("custom-portal");
+      }
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div t-on-custom-portal="_onCustomPortal">
+          <Portal target="'#outside'">
+            <Child val="state.val"/>
+          </Portal>
+        </div>`;
+      state = useState({ val: "ab" });
+
+      _onCustomPortal() {
+        this.state.val = "triggered";
+      }
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(outside.innerHTML).toBe(`<span>ab</span>`);
+    childInst!.trigger("custom");
+    await nextTick();
+    expect(outside.innerHTML).toBe(`<span>triggered</span>`);
+  });
+
+  test("events triggered on contained movable owl components are redirected", async () => {
+    const steps: string[] = [];
+    let childInst: Component<any, any> | null = null;
+    class Child extends Component<any, any> {
+      static template = xml`
+         <span t-on-custom="_onCustom"/>`;
+
+      constructor(parent, props) {
+        super(parent, props);
+        childInst = this;
+      }
+
+      _onCustom() {
+        this.trigger("custom-portal");
+      }
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div t-on-custom="_handled" t-on-custom-portal="_handled">
+          <Portal target="'#outside'">
+            <div>
+              <Child/>
+            </div>
+          </Portal>
+        </div>`;
+
+      _handled(ev) {
+        steps.push(ev.type);
+      }
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    childInst!.trigger("custom");
+    await nextTick();
+
+    // This is expected because trigger is synchronous
+    expect(steps).toMatchObject(["custom-portal", "custom"]);
+  });
+
+  test("Dom events are not mapped", async () => {
+    let childInst: Component<any, any> | null = null;
+    const steps: string[] = [];
+    class Child extends Component<any, any> {
+      static template = xml`
+        <button>child</button>`;
+
+      constructor(parent, props) {
+        super(parent, props);
+        childInst = this;
+      }
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div t-on-click="_handled">
+          <Portal target="'#outside'">
+            <Child />
+          </Portal>
+        </div>`;
+
+      _handled(ev) {
+        steps.push(ev.type as string);
+      }
+    }
+    const bodyListener = ev => {
+      steps.push(`body: ${ev.type}`);
+    };
+    document.body.addEventListener("click", bodyListener);
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+    childInst!.el!.click();
+
+    expect(steps).toEqual(["body: click"]);
+    document.body.removeEventListener("click", bodyListener);
+  });
+
+  test("Nested portals event propagation", async () => {
+    const outside2 = document.createElement("div");
+    outside2.setAttribute("id", "outside2");
+    fixture.appendChild(outside2);
+
+    const steps: Array<string> = [];
+    let childInst: Component<any, any> | null = null;
+    class Child2 extends Component<any, any> {
+      static template = xml`<div>child2</div>`;
+      constructor(parent, props) {
+        super(parent, props);
+        childInst = this;
+      }
+    }
+    class Child extends Component<any, any> {
+      static components = { Portal, Child2 };
+      static template = xml`
+        <Portal target="'#outside2'">
+          <Child2 />
+        </Portal>`;
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div t-on-custom='_handled'>
+          <Portal target="'#outside'">
+            <Child/>
+          </Portal>
+        </div>`;
+
+      _handled(ev) {
+        steps.push(`${ev.type} from ${ev.originalComponent.constructor.name}`);
+      }
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    childInst!.trigger("custom");
+    expect(steps).toEqual(["custom from Child2"]);
+  });
+
+  test("portal's parent's env is not polluted", async () => {
+    class Child extends Component<any, any> {
+      static template = xml`
+        <button>child</button>`;
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'">
+            <Child />
+          </Portal>
+        </div>`;
+    }
+    const parent = new Parent();
+    const parentEnv = Object.assign({}, parent.env);
+    await parent.mount(fixture);
+    expect(parentEnv).toStrictEqual(parent.env);
+  });
+
+  test("Portal composed with t-slot", async () => {
+    const steps: Array<string> = [];
+    let childInst: Component<any, any> | null = null;
+    class Child2 extends Component<any, any> {
+      static template = xml`<div>child2</div>`;
+      constructor(parent, props) {
+        super(parent, props);
+        childInst = this;
+      }
+    }
+    class Child extends Component<any, any> {
+      static components = { Portal, Child2 };
+      static template = xml`
+        <Portal target="'#outside'">
+          <t t-slot="default"/>
+        </Portal>`;
+    }
+    class Parent extends Component<any, any> {
+      static components = { Child, Child2 };
+      static template = xml`
+        <div t-on-custom='_handled'>
+          <Child>
+            <Child2/>
+          </Child>
+        </div>`;
+
+      _handled(ev) {
+        steps.push(ev.type as string);
+      }
+    }
+
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    childInst!.trigger("custom");
+    expect(steps).toEqual(["custom"]);
+  });
+});
+
+describe("Portal: UI/UX", () => {
+  test("focus is kept across re-renders", async () => {
+    class Child extends Component<any, any> {
+      static template = xml`
+        <input id="target-me" t-att-placeholder="props.val"/>`;
+    }
+    class Parent extends Component<any, any> {
+      static components = { Portal, Child };
+      static template = xml`
+        <div>
+          <Portal target="'#outside'">
+            <Child val="state.val"/>
+          </Portal>
+        </div>`;
+      state = useState({ val: "ab" });
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+    const input = document.querySelector("#target-me");
+    expect(input!.nodeName).toBe("INPUT");
+    expect((input as HTMLInputElement).placeholder).toBe("ab");
+
+    (input as HTMLInputElement).focus();
+    expect(document.activeElement === input).toBeTruthy();
+
+    parent.state.val = "bc";
+    await nextTick();
+    const inputReRendered = document.querySelector("#target-me");
+    expect(inputReRendered!.nodeName).toBe("INPUT");
+    expect((inputReRendered as HTMLInputElement).placeholder).toBe("bc");
+    expect(document.activeElement === inputReRendered).toBeTruthy();
+  });
+});

tests/qweb/qweb.test.ts

@@ -46,6 +46,16 @@ describe("static templates", () => {
     expect(renderToString(qweb, "test")).toBe("<div>word</div>");
   });
 
+  test("div with a class attribute", () => {
+    qweb.addTemplate("test", `<div class="abc">word</div>`);
+    expect(renderToString(qweb, "test")).toBe(`<div class="abc">word</div>`);
+  });
+
+  test("div with a empty class attribute", () => {
+    qweb.addTemplate("test", `<div class="">word</div>`);
+    expect(renderToString(qweb, "test")).toBe(`<div>word</div>`);
+  });
+
   test("div with a span child node", () => {
     qweb.addTemplate("test", "<div><span>word</span></div>");
     expect(renderToString(qweb, "test")).toBe("<div><span>word</span></div>");
@@ -129,6 +139,17 @@ describe("t-esc", () => {
     qweb.addTemplate("test", `<span t-esc="var">nope</span>`);
     expect(renderToString(qweb, "test")).toBe("<span>nope</span>");
   });
+  test("t-esc is escaped", () => {
+    qweb.addTemplate("test", `<div><t t-set="var"><p>escaped</p></t><t t-esc="var"/></div>`);
+    const domRendered = renderToDOM(qweb, "test");
+    expect(domRendered.textContent).toBe("<p>escaped</p>");
+  });
+  test("t-esc=0 is escaped", () => {
+    qweb.addTemplate("test", `<span><t t-esc="0"/></span>`);
+    qweb.addTemplate("testCaller", `<div><t t-call="test"><p>escaped</p></t></div>`);
+    const domRendered = renderToDOM(qweb, "testCaller") as HTMLElement;
+    expect(domRendered.querySelector("span")!.textContent).toBe("<p>escaped</p>");
+  });
 });
 
 describe("t-raw", () => {
@@ -268,6 +289,56 @@ describe("t-set", () => {
     expect(renderToString(qweb, "test", { flag: true })).toBe("<div>1</div>");
     expect(renderToString(qweb, "test", { flag: false })).toBe("<div>0</div>");
   });
+
+  test("t-set body is evaluated immediately", () => {
+    qweb.addTemplate(
+      "test",
+      `<div>
+        <t t-set="v1" t-value="'before'"/>
+        <t t-set="v2">
+          <span><t t-esc="v1"/></span>
+        </t>
+        <t t-set="v1" t-value="'after'"/>
+        <t t-raw="v2"/>
+      </div>`
+    );
+
+    expect(renderToString(qweb, "test")).toBe("<div><span>before</span></div>");
+  });
+
+  test("t-set with t-value (falsy) and body", () => {
+    qweb.addTemplate(
+      "test",
+      `<div>
+        <t t-set="v3" t-value="false"/>
+        <t t-set="v1" t-value="'before'"/>
+        <t t-set="v2" t-value="v3">
+          <span><t t-esc="v1"/></span>
+        </t>
+        <t t-set="v1" t-value="'after'"/>
+        <t t-set="v3" t-value="true"/>
+        <t t-raw="v2"/>
+      </div>`);
+
+      expect(renderToString(qweb, "test")).toBe("<div><span>before</span></div>");
+    });
+
+    test("t-set with t-value (truthy) and body", () => {
+    qweb.addTemplate(
+      "test",
+      `<div>
+        <t t-set="v3" t-value="'Truthy'"/>
+        <t t-set="v1" t-value="'before'"/>
+        <t t-set="v2" t-value="v3">
+          <span><t t-esc="v1"/></span>
+        </t>
+        <t t-set="v1" t-value="'after'"/>
+        <t t-set="v3" t-value="false"/>
+        <t t-raw="v2"/>
+      </div>`);
+
+      expect(renderToString(qweb, "test")).toBe("<div>Truthy</div>");
+    });
 });
 
 describe("t-if", () => {
@@ -432,6 +503,18 @@ describe("attributes", () => {
     expect(result).toBe(`<div foo="bar"></div>`);
   });
 
+  test("dynamic class attribute", () => {
+    qweb.addTemplate("test", `<div t-att-class="c"/>`);
+    const result = renderToString(qweb, "test", { c: "abc" });
+    expect(result).toBe(`<div class="abc"></div>`);
+  });
+
+  test("dynamic empty class attribute", () => {
+    qweb.addTemplate("test", `<div t-att-class="c"/>`);
+    const result = renderToString(qweb, "test", { c: "" });
+    expect(result).toBe(`<div></div>`);
+  });
+
   test("dynamic attribute with a dash", () => {
     qweb.addTemplate("test", `<div t-att-data-action-id="id"/>`);
     const result = renderToString(qweb, "test", { id: 32 });
@@ -576,10 +659,19 @@ describe("attributes", () => {
 
 describe("t-call (template calling", () => {
   test("basic caller", () => {
+    qweb.addTemplate("_basic-callee", "<span>ok</span>");
+    qweb.addTemplate("caller", '<div><t t-call="_basic-callee"/></div>');
+    const expected = "<div><span>ok</span></div>";
+    expect(renderToString(qweb, "caller")).toBe(expected);
+    expect(qweb.subTemplates["_basic-callee"].toString()).toMatchSnapshot();
+  });
+
+  test("basic caller, no parent node", () => {
     qweb.addTemplate("_basic-callee", "<div>ok</div>");
     qweb.addTemplate("caller", '<t t-call="_basic-callee"/>');
     const expected = "<div>ok</div>";
     expect(renderToString(qweb, "caller")).toBe(expected);
+    expect(qweb.subTemplates["_basic-callee"].toString()).toMatchSnapshot();
   });
 
   test("t-call with t-if", () => {
@@ -587,6 +679,7 @@ describe("t-call (template calling", () => {
     qweb.addTemplate("caller", '<div><t t-if="flag" t-call="sub"/></div>');
     const expected = "<div><span>ok</span></div>";
     expect(renderToString(qweb, "caller", { flag: true })).toBe(expected);
+    expect(qweb.subTemplates["sub"].toString()).toMatchSnapshot();
   });
 
   test("t-call not allowed on a non t node", () => {
@@ -671,6 +764,7 @@ describe("t-call (template calling", () => {
     `);
     const expected = "<div><div><span>hey</span> <span>yay</span></div></div>";
     expect(renderToString(qweb, "main")).toBe(expected);
+    expect(qweb.subTemplates["SubTemplate"].toString()).toMatchSnapshot();
   });
 
   test("cascading t-call t-raw='0'", () => {
@@ -720,7 +814,7 @@ describe("t-call (template calling", () => {
     `);
     const expected = "<div><span>hey</span></div>";
     expect(renderToString(qweb, "recursive")).toBe(expected);
-    const recursiveFn = Object.values(qweb.recursiveFns)[0] as any;
+    const recursiveFn = Object.values(qweb.subTemplates)[0] as any;
     expect(recursiveFn.toString()).toMatchSnapshot();
   });
 
@@ -748,7 +842,7 @@ describe("t-call (template calling", () => {
     expect(renderToString(qweb, "Parent", { root }, { fiber: { vars: {}, scope: {} } })).toBe(
       expected
     );
-    const recursiveFn = Object.values(qweb.recursiveFns)[0] as any;
+    const recursiveFn = Object.values(qweb.subTemplates)[0] as any;
     expect(recursiveFn.toString()).toMatchSnapshot();
   });
 
@@ -775,7 +869,7 @@ describe("t-call (template calling", () => {
     const expected =
       "<div><div><p>a</p><div><p>b</p><div><p>d</p></div></div><div><p>c</p></div></div></div>";
     expect(renderToString(qweb, "Parent", { root }, { fiber: {} })).toBe(expected);
-    const recursiveFn = Object.values(qweb.recursiveFns)[0] as any;
+    const recursiveFn = Object.values(qweb.subTemplates)[0] as any;
     expect(recursiveFn.toString()).toMatchSnapshot();
   });
 
@@ -785,6 +879,51 @@ describe("t-call (template calling", () => {
     const expected = "<div><span>desk</span></div>";
     expect(trim(renderToString(qweb, "abcd"))).toBe(expected);
   });
+
+  test("t-call with t-set inside and outside", () => {
+    qweb.addTemplates(`
+      <templates>
+        <div t-name="main">
+          <t t-foreach="list" t-as="v">
+            <t t-set="val" t-value="v.val"/>
+            <t t-call="sub">
+              <t t-set="val3" t-value="val*3"/>
+            </t>
+          </t>
+        </div>
+        <t t-name="sub">
+          <span t-esc="val3"/>
+        </t>
+      </templates>
+    `);
+    const expected = "<div><span>3</span><span>6</span><span>9</span></div>";
+    const context = { list: [{ val: 1 }, { val: 2 }, { val: 3 }] };
+    expect(trim(renderToString(qweb, "main", context))).toBe(expected);
+  });
+
+  test("t-call with t-set inside and outside. 2", () => {
+    qweb.addTemplates(`
+      <templates>
+        <div t-name="main">
+          <t t-foreach="list" t-as="v">
+            <t t-set="val" t-value="v.val"/>
+            <t t-call="sub">
+              <t t-set="val3" t-value="val*3"/>
+            </t>
+          </t>
+        </div>
+        <t t-name="sub">
+          <span t-esc="val3"/>
+          <t t-esc="w"/>
+        </t>
+        <p t-name="wrapper"><t t-set="w" t-value="'fromwrapper'"/><t t-call="main"/></p>
+      </templates>
+    `);
+    const expected =
+      "<p><div><span>3</span>fromwrapper<span>6</span>fromwrapper<span>9</span>fromwrapper</div></p>";
+    const context = { list: [{ val: 1 }, { val: 2 }, { val: 3 }] };
+    expect(trim(renderToString(qweb, "wrapper", context))).toBe(expected);
+  });
 });
 
 describe("foreach", () => {
@@ -853,9 +992,9 @@ describe("foreach", () => {
         <t t-foreach="[1]" t-as="item"><t t-esc="item"/></t>
       </div>`
     );
-    const context = {};
+    const context = { __owl__: {} };
     renderToString(qweb, "test", context);
-    expect(Object.keys(context).length).toBe(0);
+    expect(Object.keys(context)).toEqual(["__owl__"]);
   });
 
   test("t-foreach in t-forach", () => {
@@ -1514,6 +1653,22 @@ describe("debugging", () => {
     console.log = consoleLog;
   });
 
+  test("t-debug on sub template", () => {
+    const consoleLog = console.log;
+    console.log = jest.fn();
+    qweb.addTemplates(`
+      <templates>
+      <p t-name="sub" t-debug="1">coucou</p>
+      <div t-name="test">
+        <t t-call="sub"/>
+      </div>
+      </templates>`);
+    qweb.render("test");
+
+    expect(console.log).toHaveBeenCalledTimes(1);
+    console.log = consoleLog;
+  });
+
   test("t-log", () => {
     const consoleLog = console.log;
     console.log = jest.fn();

tests/qweb/qweb_expressions.test.ts

@@ -92,7 +92,7 @@ describe("expression evaluation", () => {
 
   test("parenthesis", () => {
     expect(compileExpr("(1)", {})).toBe("(1)");
-    expect(compileExpr("a*(1 +3)", {})).toBe("context['a']*(1+3)");
+    expect(compileExpr("a*(1 +3)", {})).toBe("scope['a']*(1+3)");
   });
 
   test("objects and sub objects", () => {
@@ -100,8 +100,8 @@ describe("expression evaluation", () => {
   });
 
   test("replacing variables", () => {
-    expect(compileExpr("a", {})).toBe("context['a']");
-    expect(compileExpr("a", { a: { id: "_3", expr: "" } })).toBe("_3");
+    expect(compileExpr("a", {})).toBe("scope['a']");
+    expect(compileExpr("a", { a: { id: "_3", expr: "scope._3" } })).toBe("scope._3");
   });
 
   test("arrays and objects", () => {
@@ -111,56 +111,63 @@ describe("expression evaluation", () => {
   });
 
   test("dot operator", () => {
-    expect(compileExpr("a.b", {})).toBe("context['a'].b");
-    expect(compileExpr("a.b.c", {})).toBe("context['a'].b.c");
+    expect(compileExpr("a.b", {})).toBe("scope['a'].b");
+    expect(compileExpr("a.b.c", {})).toBe("scope['a'].b.c");
   });
 
   test("various unary operators", () => {
-    expect(compileExpr("!flag", {})).toBe("!context['flag']");
+    expect(compileExpr("!flag", {})).toBe("!scope['flag']");
     expect(compileExpr("-3", {})).toBe("-3");
-    expect(compileExpr("-a", {})).toBe("-context['a']");
-    expect(compileExpr("typeof a", {})).toBe("typeof context['a']");
+    expect(compileExpr("-a", {})).toBe("-scope['a']");
+    expect(compileExpr("typeof a", {})).toBe("typeof scope['a']");
   });
 
   test("various binary operators", () => {
-    expect(compileExpr("color == 'black'", {})).toBe("context['color']=='black'");
-    expect(compileExpr("a || b", {})).toBe("context['a']||context['b']");
-    expect(compileExpr("color === 'black'", {})).toBe("context['color']==='black'");
-    expect(compileExpr("'li_'+item", {})).toBe("'li_'+context['item']");
-    expect(compileExpr("state.val > 1", {})).toBe("context['state'].val>1");
+    expect(compileExpr("color == 'black'", {})).toBe("scope['color']=='black'");
+    expect(compileExpr("a || b", {})).toBe("scope['a']||scope['b']");
+    expect(compileExpr("color === 'black'", {})).toBe("scope['color']==='black'");
+    expect(compileExpr("'li_'+item", {})).toBe("'li_'+scope['item']");
+    expect(compileExpr("state.val > 1", {})).toBe("scope['state'].val>1");
   });
 
   test("boolean operations", () => {
-    expect(compileExpr("a && b", {})).toBe("context['a']&&context['b']");
+    expect(compileExpr("a && b", {})).toBe("scope['a']&&scope['b']");
   });
 
   test("ternary operators", () => {
-    expect(compileExpr("a ? b: '2'", {})).toBe("context['a']?context['b']:'2'");
-    expect(compileExpr("a ? b: (c or '2') ", {})).toBe(
-      "context['a']?context['b']:(context['c']||'2')"
-    );
+    expect(compileExpr("a ? b: '2'", {})).toBe("scope['a']?scope['b']:'2'");
+    expect(compileExpr("a ? b: (c or '2') ", {})).toBe("scope['a']?scope['b']:(scope['c']||'2')");
     expect(compileExpr("a ? {test:c}: [1,u]", {})).toBe(
-      "context['a']?{test:context['c']}:[1,context['u']]"
+      "scope['a']?{test:scope['c']}:[1,scope['u']]"
     );
   });
 
   test("word replacement", () => {
-    expect(compileExpr("a or b", {})).toBe("context['a']||context['b']");
-    expect(compileExpr("a and b", {})).toBe("context['a']&&context['b']");
+    expect(compileExpr("a or b", {})).toBe("scope['a']||scope['b']");
+    expect(compileExpr("a and b", {})).toBe("scope['a']&&scope['b']");
   });
 
   test("function calls", () => {
-    expect(compileExpr("a()", {})).toBe("context['a']()");
-    expect(compileExpr("a(1)", {})).toBe("context['a'](1)");
-    expect(compileExpr("a(1,2)", {})).toBe("context['a'](1,2)");
-    expect(compileExpr("a(1,2,{a:[a]})", {})).toBe("context['a'](1,2,{a:[context['a']]})");
+    expect(compileExpr("a()", {})).toBe("scope['a']()");
+    expect(compileExpr("a(1)", {})).toBe("scope['a'](1)");
+    expect(compileExpr("a(1,2)", {})).toBe("scope['a'](1,2)");
+    expect(compileExpr("a(1,2,{a:[a]})", {})).toBe("scope['a'](1,2,{a:[scope['a']]})");
     expect(compileExpr("'x'.toUpperCase()", {})).toBe("'x'.toUpperCase()");
     expect(compileExpr("'x'.toUpperCase({a: 3})", {})).toBe("'x'.toUpperCase({a:3})");
-    expect(compileExpr("'x'.toUpperCase(a)", { a: { id: "_v5", expr: "" } })).toBe(
-      "'x'.toUpperCase(_v5)"
+    expect(compileExpr("'x'.toUpperCase(a)", { a: { id: "_v5", expr: "scope._v5" } })).toBe(
+      "'x'.toUpperCase(scope._v5)"
     );
-    expect(compileExpr("'x'.toUpperCase({b: a})", { a: { id: "_v5", expr: "" } })).toBe(
-      "'x'.toUpperCase({b:_v5})"
+    expect(compileExpr("'x'.toUpperCase({b: a})", { a: { id: "_v5", expr: "scope._v5" } })).toBe(
+      "'x'.toUpperCase({b:scope._v5})"
+    );
+  });
+
+  test("arrow functions", () => {
+    expect(compileExpr("list.map(e => e.val)", {})).toBe("scope['list'].map(e=>e.val)");
+    expect(compileExpr("list.map(e => a + e)", {})).toBe("scope['list'].map(e=>scope['a']+e)");
+    expect(compileExpr("list.map((e) => e)", {})).toBe("scope['list'].map((e)=>e)");
+    expect(compileExpr("list.map((elem, index) => elem + index)", {})).toBe(
+      "scope['list'].map((elem,index)=>elem+index)"
     );
   });
 });

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

@@ -1,21 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Link component can render simple cases 1`] = `
-"function anonymous(context,extra
+"function anonymous(context, extra
 ) {
+    // Template name: \\"__template__1\\"
     let utils = this.constructor.utils;
-    let owner = context;
+    let scope = Object.create(context);
     var h = this.h;
-    let _6 = utils.toObj({'router-link-active':context['isActive']});
-    var _7 = context['href'];
-    let c8 = [], p8 = {key:8,attrs:{href: _7},class:_6,on:{}};
-    var vn8 = h('a', p8, c8);
-    extra.handlers['click' + 8] = extra.handlers['click' + 8] || function (e) {const fn = context['navigate'];if (fn) { fn.call(owner, e); } else { context.navigate; }};
-    p8.on['click'] = extra.handlers['click' + 8];
-    const slot9 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
-    if (slot9) {
-        slot9.call(this, context.__owl__.parent, Object.assign({}, extra, {parentNode: c8, vars: extra.vars, parent: extra.parent || owner}));
+    let _5 = utils.toObj({'router-link-active':scope['isActive']});
+    var _6 = scope['href'];
+    let c7 = [], p7 = {key:7,attrs:{href: _6},class:_5,on:{}};
+    var vn7 = h('a', p7, c7);
+    extra.handlers['click' + 7] = extra.handlers['click' + 7] || function (e) {if (!context.__owl__.isMounted){return}const fn = context['navigate'];if (fn) { fn.call(context, e); } else { context.navigate; }};
+    p7.on['click'] = extra.handlers['click' + 7];
+    const slot8 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
+    if (slot8) {
+        slot8.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c7, parent: extra.parent || context}));
     }
-    return vn8;
+    return vn7;
 }"
 `;

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

@@ -1,44 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RouteComponent can render simple cases 1`] = `
-"function anonymous(context,extra
+"function anonymous(context, extra
 ) {
+    // Template name: \\"__template__1\\"
     let utils = this.constructor.utils;
     let QWeb = this.constructor;
     let parent = context;
-    let owner = context;
+    let scope = Object.create(context);
     let result;
     var h = this.h;
-    if (context['routeComponent']) {
-        const nodeKey6 = context['env'].router.currentRouteName;
+    if (scope['routeComponent']) {
+        const nodeKey5 = scope['env'].router.currentRouteName;
         //COMPONENT
-        let k9 = \`__10__\` + nodeKey6;
-        let w8 = k9 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k9]] : false;
-        let vn11 = {};
-        result = vn11;
-        let props8 = Object.assign({}, context['env'].router.currentParams);
-        if (w8 && w8.__owl__.currentFiber && !w8.__owl__.vnode) {
-            w8.destroy();
-            w8 = false;
+        let k7 = \`__8__\` + nodeKey5;
+        let w6 = k7 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k7]] : false;
+        let vn9 = {};
+        result = vn9;
+        let props6 = Object.assign({}, scope['env'].router.currentParams);
+        if (w6 && w6.__owl__.currentFiber && !w6.__owl__.vnode) {
+            w6.destroy();
+            w6 = false;
         }
-        if (w8) {
-            w8.__updateProps(props8, extra.fiber, undefined, undefined);
-            let pvnode = w8.__owl__.pvnode;
-            utils.defineProxy(vn11, pvnode);
+        if (w6) {
+            w6.__updateProps(props6, extra.fiber, undefined);
+            let pvnode = w6.__owl__.pvnode;
+            utils.defineProxy(vn9, pvnode);
         } else {
-            let componentKey8 = \`routeComponent\`;
-            let W8 = context.constructor.components[componentKey8] || QWeb.components[componentKey8]|| context['routeComponent'];
-            if (!W8) {throw new Error('Cannot find the definition of component \\"' + componentKey8 + '\\"')}
-            w8 = new W8(parent, props8);
-            parent.__owl__.cmap[k9] = w8.__owl__.id;
-            let def7 = w8.__prepare(extra.fiber, undefined, undefined);
-            let pvnode = h('dummy', {key: k9, hook: {remove() {},destroy(vn) {w8.destroy();}}});
-            const fiber = w8.__owl__.currentFiber;
-            def7.then(function () { if (fiber.isCompleted) { return; } const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
-            utils.defineProxy(vn11, pvnode);
-            w8.__owl__.pvnode = pvnode;
+            let componentKey6 = \`routeComponent\`;
+            let W6 = context.constructor.components[componentKey6] || QWeb.components[componentKey6]|| scope['routeComponent'];
+            if (!W6) {throw new Error('Cannot find the definition of component \\"' + componentKey6 + '\\"')}
+            w6 = new W6(parent, props6);
+            parent.__owl__.cmap[k7] = w6.__owl__.id;
+            let fiber = w6.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            let pvnode = h('dummy', {key: k7, hook: {remove() {},destroy(vn) {w6.destroy();}}});
+            utils.defineProxy(vn9, pvnode);
+            w6.__owl__.pvnode = pvnode;
         }
-        w8.__owl__.parentLastFiberId = extra.fiber.id;
+        w6.__owl__.parentLastFiberId = extra.fiber.id;
     }
     return result;
 }"

tests/tooling/debug_script_1.test.ts

@@ -0,0 +1,57 @@
+/**
+ * We can only make one test per file, since the debug tool modify in place
+ * the owl object in a way that is difficult to undo.
+ */
+
+import { debugOwl } from "../../tools/debug";
+import * as owl from "../../src/index";
+
+import { Component, Env } from "../../src/component/component";
+import { xml } from "../../src/tags";
+import { useState } from "../../src/hooks";
+import { makeTestFixture, makeTestEnv, nextTick } from "../helpers";
+
+let fixture: HTMLElement = makeTestFixture();
+let env: Env = makeTestEnv();
+Component.env = env;
+
+debugOwl(owl, {});
+
+test("can log full lifecycle", async () => {
+  const steps: string[] = [];
+  const log = console.log;
+  console.log = arg => steps.push(arg);
+
+  class Child extends Component<any, any> {
+    static template = xml`<div>child</div>`;
+  }
+
+  class Parent extends Component<any, any> {
+    static template = xml`<div><Child t-if="state.flag"/></div>`;
+    static components = { Child };
+    state = useState({ flag: false });
+  }
+
+  const parent = new Parent(null, {});
+  await parent.mount(fixture);
+
+  parent.state.flag = true;
+  await nextTick();
+
+  expect(steps).toEqual([
+    "[OWL_DEBUG] Parent<id=1> constructor, props={}",
+    "[OWL_DEBUG] Parent<id=1> mount",
+    "[OWL_DEBUG] Parent<id=1> willStart",
+    "[OWL_DEBUG] Parent<id=1> rendering template",
+    "[OWL_DEBUG] Parent<id=1> mounted",
+    "[OWL_DEBUG] Parent<id=1> render",
+    "[OWL_DEBUG] Parent<id=1> rendering template",
+    "[OWL_DEBUG] Child<id=2> constructor, props={}",
+    "[OWL_DEBUG] Child<id=2> willStart",
+    "[OWL_DEBUG] Child<id=2> rendering template",
+    "[OWL_DEBUG] Parent<id=1> willPatch",
+    "[OWL_DEBUG] Child<id=2> mounted",
+    "[OWL_DEBUG] Parent<id=1> patched"
+  ]);
+  console.log = log;
+});

tests/tooling/debug_script_2.test.ts

@@ -0,0 +1,50 @@
+/**
+ * We can only make one test per file, since the debug tool modify in place
+ * the owl object in a way that is difficult to undo.
+ */
+
+import { debugOwl } from "../../tools/debug";
+import * as owl from "../../src/index";
+
+import { Component, Env } from "../../src/component/component";
+import { xml } from "../../src/tags";
+import { makeTestFixture, makeTestEnv } from "../helpers";
+
+let fixture: HTMLElement = makeTestFixture();
+let env: Env = makeTestEnv();
+Component.env = env;
+
+debugOwl(owl, { logScheduler: true });
+
+test("can log scheduler start and stop", async () => {
+  const steps: string[] = [];
+  const log = console.log;
+  console.log = arg => steps.push(arg);
+
+  class Child extends Component<any, any> {
+    static template = xml`<div>child</div>`;
+  }
+
+  class Parent extends Component<any, any> {
+    static template = xml`<div><Child /></div>`;
+    static components = { Child };
+  }
+
+  const parent = new Parent(null, {});
+  await parent.mount(fixture);
+
+  expect(steps).toEqual([
+    "[OWL_DEBUG] Parent<id=1> constructor, props={}",
+    "[OWL_DEBUG] Parent<id=1> mount",
+    "[OWL_DEBUG] Parent<id=1> willStart",
+    "[OWL_DEBUG] scheduler: start running tasks queue",
+    "[OWL_DEBUG] Parent<id=1> rendering template",
+    "[OWL_DEBUG] Child<id=2> constructor, props={}",
+    "[OWL_DEBUG] Child<id=2> willStart",
+    "[OWL_DEBUG] Child<id=2> rendering template",
+    "[OWL_DEBUG] Child<id=2> mounted",
+    "[OWL_DEBUG] Parent<id=1> mounted",
+    "[OWL_DEBUG] scheduler: stop running tasks queue"
+  ]);
+  console.log = log;
+});

tests/tooling/debug_script_3.test.ts

@@ -0,0 +1,46 @@
+/**
+ * We can only make one test per file, since the debug tool modify in place
+ * the owl object in a way that is difficult to undo.
+ */
+
+import { debugOwl } from "../../tools/debug";
+import * as owl from "../../src/index";
+
+import { Component, Env } from "../../src/component/component";
+import { xml } from "../../src/tags";
+import { makeTestFixture, makeTestEnv } from "../helpers";
+
+let fixture: HTMLElement = makeTestFixture();
+let env: Env = makeTestEnv();
+Component.env = env;
+
+debugOwl(owl, { logScheduler: true });
+
+test("log a specific message for render method calls if component is not mounted", async () => {
+  const steps: string[] = [];
+  const log = console.log;
+  console.log = arg => steps.push(arg);
+
+  class Parent extends Component<any, any> {
+    static template = xml`<div><t t-esc="state.value"/></div>`;
+    state = owl.hooks.useState({ value: 1 });
+  }
+
+  const parent = new Parent(null, {});
+  await parent.mount(fixture);
+  parent.unmount();
+  parent.state.value = 2;
+
+  expect(steps).toEqual([
+    "[OWL_DEBUG] Parent<id=1> constructor, props={}",
+    "[OWL_DEBUG] Parent<id=1> mount",
+    "[OWL_DEBUG] Parent<id=1> willStart",
+    "[OWL_DEBUG] scheduler: start running tasks queue",
+    "[OWL_DEBUG] Parent<id=1> rendering template",
+    "[OWL_DEBUG] Parent<id=1> mounted",
+    "[OWL_DEBUG] scheduler: stop running tasks queue",
+    "[OWL_DEBUG] Parent<id=1> willUnmount",
+    "[OWL_DEBUG] Parent<id=1> render (warning: component is not mounted, this render has no effect)"
+  ]);
+  console.log = log;
+});

tools/benchmarks/owl-0.10.0/app.js

@@ -1,173 +0,0 @@
-import {
-  buildData,
-  startMeasure,
-  stopMeasure,
-  formatNumber
-} from "../shared/utils.js";
-
-//------------------------------------------------------------------------------
-// Likes Counter Widget
-//------------------------------------------------------------------------------
-class Counter extends owl.Component {
-  state = { counter: 0 };
-  template = "Counter";
-
-  increment() {
-    this.state.counter++;
-  }
-}
-
-//------------------------------------------------------------------------------
-// Message Widget
-//------------------------------------------------------------------------------
-class Message extends owl.Component {
-  widgets = { Counter };
-  template = "Message";
-
-  shouldUpdate(nextProps) {
-    return nextProps !== this.props;
-  }
-  removeMessage() {
-    this.trigger("remove_message", {
-      id: this.props.id
-    });
-  }
-}
-
-//------------------------------------------------------------------------------
-// Root Widget
-//------------------------------------------------------------------------------
-class App extends owl.Component {
-  widgets = { Message };
-  state = { messages: [], multipleFlag: false, clearAfterFlag: false };
-  template = "App";
-
-  mounted() {
-    this.log(
-      `Benchmarking Owl v${owl._version} (build date: ${
-        owl._date
-      })`
-    );
-  }
-
-  benchmark(message, fn, callback) {
-    if (this.state.multipleFlag) {
-      const N = 20;
-      let n = N;
-      let total = 0;
-      let cb = info => {
-        let finalize = () => {
-          n--;
-          total += info.delta;
-          if (n === 0) {
-            const avg = total / N;
-            this.log(`Average: ${formatNumber(avg)}ms`, true);
-            if (callback) {
-              callback();
-            }
-          } else {
-            this._benchmark(message, fn, cb);
-          }
-        };
-
-        if (this.state.clearAfterFlag) {
-          this._benchmark(
-            "clear",
-            () => {
-              this.state.messages = [];
-            },
-            finalize,
-            false
-          );
-        } else {
-          finalize();
-        }
-      };
-      this._benchmark(message, fn, cb);
-    } else {
-      this._benchmark(message, fn, callback);
-    }
-  }
-
-  _benchmark(message, fn, cb, log = true) {
-    setTimeout(() => {
-      startMeasure(message);
-      fn();
-      stopMeasure(info => {
-        if (log) {
-          this.log(info.msg);
-        }
-        if (cb) {
-          cb(info);
-        }
-      });
-    }, 10);
-  }
-
-  addMessages(n) {
-    this.benchmark("add " + n, () => {
-      const newMessages = buildData(n);
-      this.state.messages.push.apply(this.state.messages, newMessages);
-    });
-  }
-
-  clear() {
-    this._benchmark("clear", () => {
-      this.state.messages = [];
-    });
-  }
-
-  updateSomeMessages() {
-    this.benchmark("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);
-      }
-    });
-  }
-
-  removeMessage(data) {
-    this.benchmark("remove message", () => {
-      const index = this.state.messages.findIndex(m => m.id === data.id);
-      this.state.messages.splice(index, 1);
-    });
-  }
-
-  log(str, isBold) {
-    const div = document.createElement("div");
-    if (isBold) {
-      div.classList.add("bold");
-    }
-    div.textContent = `> ${str}`;
-    this.refs.log.appendChild(div);
-    this.refs.log.scrollTop = this.refs.log.scrollHeight;
-  }
-
-  clearLog() {
-    this.refs.log.innerHTML = "";
-  }
-
-  toggleMultiple() {
-    this.state.multipleFlag = !this.state.multipleFlag;
-  }
-
-  toggleClear() {
-    this.state.clearAfterFlag = !this.state.clearAfterFlag;
-  }
-}
-
-//------------------------------------------------------------------------------
-// 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();

tools/benchmarks/owl-0.10.0/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>OWL 0.10.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>

tools/benchmarks/owl-0.10.0/templates.xml

@@ -1,50 +0,0 @@
-<templates>
-  <div t-name="App" class="main">
-      <div class="left-thing">
-        <div class="title">Actions</div>
-        <div class="panel">
-          <button t-on-click="addMessages(100)">Add 100 messages</button>
-          <button t-on-click="addMessages(1000)">Add 1k messages</button>
-          <button t-on-click="addMessages(10000)">Add 10k messages</button>
-          <button t-on-click="addMessages(30000)">Add 30k messages</button>
-          <button t-on-click="updateSomeMessages">Update every 10th messages</button>
-          <button t-on-click="clear">Clear</button>
-        </div>
-        <div class="flags">
-            <div>
-                <input type="checkbox" id="multipleflag" t-on-change="toggleMultiple" t-att-checked="state.multipleFlag"/>
-                <label for="multipleflag">Do it 20x</label>
-            </div>
-            <div>
-                <input type="checkbox" id="clearFlag" t-on-change="toggleClear"  t-att-checked="state.clearAfterFlag"/>
-                <label for="clearFlag">Clear after</label>
-            </div>
-        </div>
-        <div class="info">Number of messages: <t t-esc="state.messages.length"/></div>
-        <hr/>
-        <div class="title">Log <span class="clear-log" t-on-click="clearLog">(clear)</span></div>
-        <div class="log">
-            <div class="log-content" t-ref="'log'"/>
-        </div>
-      </div>
-      <div class="right-thing">
-          <div class="content" t-on-remove-message="removeMessage">
-              <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>

tools/benchmarks/owl-0.12.0/app.js

@@ -1,170 +0,0 @@
-import {
-  buildData,
-  startMeasure,
-  stopMeasure,
-  formatNumber
-} from "../shared/utils.js";
-
-//------------------------------------------------------------------------------
-// Likes Counter Widget
-//------------------------------------------------------------------------------
-class Counter extends owl.Component {
-  state = { counter: 0 };
-
-  increment() {
-    this.state.counter++;
-  }
-}
-
-//------------------------------------------------------------------------------
-// Message Widget
-//------------------------------------------------------------------------------
-class Message extends owl.Component {
-  widgets = { Counter };
-
-  shouldUpdate(nextProps) {
-    return nextProps !== this.props;
-  }
-  removeMessage() {
-    this.trigger("remove_message", {
-      id: this.props.id
-    });
-  }
-}
-
-//------------------------------------------------------------------------------
-// Root Widget
-//------------------------------------------------------------------------------
-class App extends owl.Component {
-  widgets = { Message };
-  state = { messages: [], multipleFlag: false, clearAfterFlag: false };
-
-  mounted() {
-    this.log(
-      `Benchmarking Owl v${owl.__info__.version} (build date: ${
-        owl.__info__.date
-      })`
-    );
-  }
-
-  benchmark(message, fn, callback) {
-    if (this.state.multipleFlag) {
-      const N = 20;
-      let n = N;
-      let total = 0;
-      let cb = info => {
-        let finalize = () => {
-          n--;
-          total += info.delta;
-          if (n === 0) {
-            const avg = total / N;
-            this.log(`Average: ${formatNumber(avg)}ms`, true);
-            if (callback) {
-              callback();
-            }
-          } else {
-            this._benchmark(message, fn, cb);
-          }
-        };
-
-        if (this.state.clearAfterFlag) {
-          this._benchmark(
-            "clear",
-            () => {
-              this.state.messages = [];
-            },
-            finalize,
-            false
-          );
-        } else {
-          finalize();
-        }
-      };
-      this._benchmark(message, fn, cb);
-    } else {
-      this._benchmark(message, fn, callback);
-    }
-  }
-
-  _benchmark(message, fn, cb, log = true) {
-    setTimeout(() => {
-      startMeasure(message);
-      fn();
-      stopMeasure(info => {
-        if (log) {
-          this.log(info.msg);
-        }
-        if (cb) {
-          cb(info);
-        }
-      });
-    }, 10);
-  }
-
-  addMessages(n) {
-    this.benchmark("add " + n, () => {
-      const newMessages = buildData(n);
-      this.state.messages.push.apply(this.state.messages, newMessages);
-    });
-  }
-
-  clear() {
-    this.benchmark("clear", () => {
-      this.state.messages = [];
-    });
-  }
-
-  updateSomeMessages() {
-    this.benchmark("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);
-      }
-    });
-  }
-
-  removeMessage(data) {
-    this.benchmark("remove message", () => {
-      const index = this.state.messages.findIndex(m => m.id === data.id);
-      this.state.messages.splice(index, 1);
-    });
-  }
-
-  log(str, isBold) {
-    const div = document.createElement("div");
-    if (isBold) {
-      div.classList.add("bold");
-    }
-    div.textContent = `> ${str}`;
-    this.refs.log.appendChild(div);
-    this.refs.log.scrollTop = this.refs.log.scrollHeight;
-  }
-
-  clearLog() {
-    this.refs.log.innerHTML = "";
-  }
-
-  toggleMultiple() {
-    this.state.multipleFlag = !this.state.multipleFlag;
-  }
-
-  toggleClear() {
-    this.state.clearAfterFlag = !this.state.clearAfterFlag;
-  }
-}
-
-//------------------------------------------------------------------------------
-// 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();

tools/benchmarks/owl-0.12.0/templates.xml

@@ -1,50 +0,0 @@
-<templates>
-  <div t-name="App" class="main">
-      <div class="left-thing">
-        <div class="title">Actions</div>
-        <div class="panel">
-          <button t-on-click="addMessages(100)">Add 100 messages</button>
-          <button t-on-click="addMessages(1000)">Add 1k messages</button>
-          <button t-on-click="addMessages(10000)">Add 10k messages</button>
-          <button t-on-click="addMessages(30000)">Add 30k messages</button>
-          <button t-on-click="updateSomeMessages">Update every 10th messages</button>
-          <button t-on-click="clear">Clear</button>
-        </div>
-        <div class="flags">
-            <div>
-                <input type="checkbox" id="multipleflag" t-on-change="toggleMultiple" t-att-checked="state.multipleFlag"/>
-                <label for="multipleflag">Do it 20x</label>
-            </div>
-            <div>
-                <input type="checkbox" id="clearFlag" t-on-change="toggleClear"  t-att-checked="state.clearAfterFlag"/>
-                <label for="clearFlag">Clear after</label>
-            </div>
-        </div>
-        <div class="info">Number of messages: <t t-esc="state.messages.length"/></div>
-        <hr/>
-        <div class="title">Log <span class="clear-log" t-on-click="clearLog">(clear)</span></div>
-        <div class="log">
-            <div class="log-content" t-ref="log"/>
-        </div>
-      </div>
-      <div class="right-thing">
-          <div class="content" t-on-remove-message="removeMessage">
-              <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>

tools/benchmarks/owl-0.14.0/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>OWL 0.14.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>

tools/benchmarks/owl-0.14.0/templates.xml

@@ -1,50 +0,0 @@
-<templates>
-  <div t-name="App" class="main">
-      <div class="left-thing">
-        <div class="title">Actions</div>
-        <div class="panel">
-          <button t-on-click="addMessages(100)">Add 100 messages</button>
-          <button t-on-click="addMessages(1000)">Add 1k messages</button>
-          <button t-on-click="addMessages(10000)">Add 10k messages</button>
-          <button t-on-click="addMessages(30000)">Add 30k messages</button>
-          <button t-on-click="updateSomeMessages">Update every 10th messages</button>
-          <button t-on-click="clear">Clear</button>
-        </div>
-        <div class="flags">
-            <div>
-                <input type="checkbox" id="multipleflag" t-on-change="toggleMultiple" t-att-checked="state.multipleFlag"/>
-                <label for="multipleflag">Do it 20x</label>
-            </div>
-            <div>
-                <input type="checkbox" id="clearFlag" t-on-change="toggleClear"  t-att-checked="state.clearAfterFlag"/>
-                <label for="clearFlag">Clear after</label>
-            </div>
-        </div>
-        <div class="info">Number of messages: <t t-esc="state.messages.length"/></div>
-        <hr/>
-        <div class="title">Log <span class="clear-log" t-on-click="clearLog">(clear)</span></div>
-        <div class="log">
-            <div class="log-content" t-ref="log"/>
-        </div>
-      </div>
-      <div class="right-thing">
-          <div class="content" t-on-remove-message="removeMessage">
-              <t t-foreach="state.messages" t-as="message">
-                  <t t-widget="Message" t-key="message.id" message="message"/>
-              </t>
-          </div>
-      </div>
-  </div>
-
-  <div t-name="Message" class="message">
-    <span class="author"><t t-esc="props.message.author"/></span>
-    <span class="msg"><t t-esc="props.message.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>

tools/benchmarks/owl-0.16.0/app.js

@@ -1,161 +0,0 @@
-import { buildData, startMeasure, stopMeasure, formatNumber } from "../shared/utils.js";
-
-//------------------------------------------------------------------------------
-// Likes Counter Widget
-//------------------------------------------------------------------------------
-class Counter extends owl.Component {
-  state = { counter: 0 };
-
-  increment() {
-    this.state.counter++;
-  }
-}
-
-//------------------------------------------------------------------------------
-// Message Widget
-//------------------------------------------------------------------------------
-class Message extends owl.Component {
-  components = { Counter };
-
-  shouldUpdate(nextProps) {
-    return nextProps.message !== this.props.message;
-  }
-  removeMessage() {
-    this.trigger("remove-message", {
-      id: this.props.message.id
-    });
-  }
-}
-
-//------------------------------------------------------------------------------
-// Root Widget
-//------------------------------------------------------------------------------
-class App extends owl.Component {
-  components = { Message };
-  state = { messages: [], multipleFlag: false, clearAfterFlag: false };
-
-  mounted() {
-    this.log(`Benchmarking Owl v${owl.__info__.version} (build date: ${owl.__info__.date})`);
-  }
-
-  benchmark(message, fn, callback) {
-    if (this.state.multipleFlag) {
-      const N = 20;
-      let n = N;
-      let total = 0;
-      let cb = info => {
-        let finalize = () => {
-          n--;
-          total += info.delta;
-          if (n === 0) {
-            const avg = total / N;
-            this.log(`Average: ${formatNumber(avg)}ms`, true);
-            if (callback) {
-              callback();
-            }
-          } else {
-            this._benchmark(message, fn, cb);
-          }
-        };
-
-        if (this.state.clearAfterFlag) {
-          this._benchmark(
-            "clear",
-            () => {
-              this.state.messages = [];
-            },
-            finalize,
-            false
-          );
-        } else {
-          finalize();
-        }
-      };
-      this._benchmark(message, fn, cb);
-    } else {
-      this._benchmark(message, fn, callback);
-    }
-  }
-
-  _benchmark(message, fn, cb, log = true) {
-    setTimeout(() => {
-      startMeasure(message);
-      fn();
-      stopMeasure(info => {
-        if (log) {
-          this.log(info.msg);
-        }
-        if (cb) {
-          cb(info);
-        }
-      });
-    }, 10);
-  }
-
-  addMessages(n) {
-    this.benchmark("add " + n, () => {
-      const newMessages = buildData(n);
-      this.state.messages.push.apply(this.state.messages, newMessages);
-    });
-  }
-
-  clear() {
-    this._benchmark("clear", () => {
-      this.state.messages = [];
-    });
-  }
-
-  updateSomeMessages() {
-    this.benchmark("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);
-      }
-    });
-  }
-
-  removeMessage(event) {
-    this.benchmark("remove message", () => {
-      const index = this.state.messages.findIndex(m => m.id === event.detail.id);
-      this.state.messages.splice(index, 1);
-    });
-  }
-
-  log(str, isBold) {
-    const div = document.createElement("div");
-    if (isBold) {
-      div.classList.add("bold");
-    }
-    div.textContent = `> ${str}`;
-    this.refs.log.appendChild(div);
-    this.refs.log.scrollTop = this.refs.log.scrollHeight;
-  }
-
-  clearLog() {
-    this.refs.log.innerHTML = "";
-  }
-
-  toggleMultiple() {
-    this.state.multipleFlag = !this.state.multipleFlag;
-  }
-
-  toggleClear() {
-    this.state.clearAfterFlag = !this.state.clearAfterFlag;
-  }
-}
-
-//------------------------------------------------------------------------------
-// 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();

tools/benchmarks/owl-0.16.0/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>OWL 0.16.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>

tools/benchmarks/owl-0.8.0/app.js

@@ -1,173 +0,0 @@
-import {
-  buildData,
-  startMeasure,
-  stopMeasure,
-  formatNumber
-} from "../shared/utils.js";
-
-//------------------------------------------------------------------------------
-// Likes Counter Widget
-//------------------------------------------------------------------------------
-class Counter extends owl.Component {
-  state = { counter: 0 };
-  template = "Counter";
-
-  increment() {
-    this.state.counter++;
-  }
-}
-
-//------------------------------------------------------------------------------
-// Message Widget
-//------------------------------------------------------------------------------
-class Message extends owl.Component {
-  widgets = { Counter };
-  template = "Message";
-
-  shouldUpdate(nextProps) {
-    return nextProps !== this.props;
-  }
-  removeMessage() {
-    this.trigger("remove_message", {
-      id: this.props.id
-    });
-  }
-}
-
-//------------------------------------------------------------------------------
-// Root Widget
-//------------------------------------------------------------------------------
-class App extends owl.Component {
-  widgets = { Message };
-  state = { messages: [], multipleFlag: false, clearAfterFlag: false };
-  template = "App";
-
-  mounted() {
-    this.log(
-      `Benchmarking Owl v${owl._version} (build date: ${
-        owl._date
-      })`
-    );
-  }
-
-  benchmark(message, fn, callback) {
-    if (this.state.multipleFlag) {
-      const N = 20;
-      let n = N;
-      let total = 0;
-      let cb = info => {
-        let finalize = () => {
-          n--;
-          total += info.delta;
-          if (n === 0) {
-            const avg = total / N;
-            this.log(`Average: ${formatNumber(avg)}ms`, true);
-            if (callback) {
-              callback();
-            }
-          } else {
-            this._benchmark(message, fn, cb);
-          }
-        };
-
-        if (this.state.clearAfterFlag) {
-          this._benchmark(
-            "clear",
-            () => {
-              this.state.messages = [];
-            },
-            finalize,
-            false
-          );
-        } else {
-          finalize();
-        }
-      };
-      this._benchmark(message, fn, cb);
-    } else {
-      this._benchmark(message, fn, callback);
-    }
-  }
-
-  _benchmark(message, fn, cb, log = true) {
-    setTimeout(() => {
-      startMeasure(message);
-      fn();
-      stopMeasure(info => {
-        if (log) {
-          this.log(info.msg);
-        }
-        if (cb) {
-          cb(info);
-        }
-      });
-    }, 10);
-  }
-
-  addMessages(n) {
-    this.benchmark("add " + n, () => {
-      const newMessages = buildData(n);
-      this.state.messages.push.apply(this.state.messages, newMessages);
-    });
-  }
-
-  clear() {
-    this._benchmark("clear", () => {
-      this.state.messages = [];
-    });
-  }
-
-  updateSomeMessages() {
-    this.benchmark("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);
-      }
-    });
-  }
-
-  removeMessage(data) {
-    this.benchmark("remove message", () => {
-      const index = this.state.messages.findIndex(m => m.id === data.id);
-      this.state.messages.splice(index, 1);
-    });
-  }
-
-  log(str, isBold) {
-    const div = document.createElement("div");
-    if (isBold) {
-      div.classList.add("bold");
-    }
-    div.textContent = `> ${str}`;
-    this.refs.log.appendChild(div);
-    this.refs.log.scrollTop = this.refs.log.scrollHeight;
-  }
-
-  clearLog() {
-    this.refs.log.innerHTML = "";
-  }
-
-  toggleMultiple() {
-    this.state.multipleFlag = !this.state.multipleFlag;
-  }
-
-  toggleClear() {
-    this.state.clearAfterFlag = !this.state.clearAfterFlag;
-  }
-}
-
-//------------------------------------------------------------------------------
-// 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();

tools/benchmarks/owl-0.8.0/index.html

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

tools/benchmarks/owl-0.8.0/templates.xml

@@ -1,50 +0,0 @@
-<templates>
-  <div t-name="App" class="main">
-      <div class="left-thing">
-        <div class="title">Actions</div>
-        <div class="panel">
-          <button t-on-click="addMessages(100)">Add 100 messages</button>
-          <button t-on-click="addMessages(1000)">Add 1k messages</button>
-          <button t-on-click="addMessages(10000)">Add 10k messages</button>
-          <button t-on-click="addMessages(30000)">Add 30k messages</button>
-          <button t-on-click="updateSomeMessages">Update every 10th messages</button>
-          <button t-on-click="clear">Clear</button>
-        </div>
-        <div class="flags">
-            <div>
-                <input type="checkbox" id="multipleflag" t-on-change="toggleMultiple" t-att-checked="state.multipleFlag"/>
-                <label for="multipleflag">Do it 20x</label>
-            </div>
-            <div>
-                <input type="checkbox" id="clearFlag" t-on-change="toggleClear"  t-att-checked="state.clearAfterFlag"/>
-                <label for="clearFlag">Clear after</label>
-            </div>
-        </div>
-        <div class="info">Number of messages: <t t-esc="state.messages.length"/></div>
-        <hr/>
-        <div class="title">Log <span class="clear-log" t-on-click="clearLog">(clear)</span></div>
-        <div class="log">
-            <div class="log-content" t-ref="'log'"/>
-        </div>
-      </div>
-      <div class="right-thing">
-          <div class="content" t-on-remove-message="removeMessage">
-              <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>

tools/benchmarks/owl-1.0.0-beta1/app.js

@@ -1,10 +1,11 @@
 import { buildData, startMeasure, stopMeasure, formatNumber } from "../shared/utils.js";
 
+const { useState, useRef } = owl.hooks;
 //------------------------------------------------------------------------------
 // Likes Counter Widget
 //------------------------------------------------------------------------------
 class Counter extends owl.Component {
-  state = { counter: 0 };
+  state = useState({ counter: 0 });
 
   increment() {
     this.state.counter++;
@@ -15,8 +16,6 @@ class Counter extends owl.Component {
 // Message Widget
 //------------------------------------------------------------------------------
 class Message extends owl.Component {
-  widgets = { Counter };
-
   shouldUpdate(nextProps) {
     return nextProps.message !== this.props.message;
   }
@@ -26,13 +25,14 @@ class Message extends owl.Component {
     });
   }
 }
+Message.components = { Counter };
 
 //------------------------------------------------------------------------------
 // Root Widget
 //------------------------------------------------------------------------------
 class App extends owl.Component {
-  widgets = { Message };
-  state = { messages: [], multipleFlag: false, clearAfterFlag: false };
+  state = useState({ messages: [], multipleFlag: false, clearAfterFlag: false });
+  logRef = useRef("log");
 
   mounted() {
     this.log(`Benchmarking Owl v${owl.__info__.version} (build date: ${owl.__info__.date})`);
@@ -108,10 +108,10 @@ class App extends owl.Component {
   updateSomeMessages() {
     this.benchmark("update every 10th", () => {
       const messages = this.state.messages;
-      for (let i = 0; i < this.state.messages.length; i += 10) {
+      for (let i = 0; i < messages.length; i += 10) {
         const msg = Object.assign({}, messages[i]);
         msg.author += "!!!";
-        this.set(messages, i, msg);
+        messages[i] = msg;
       }
     });
   }
@@ -129,32 +129,25 @@ class App extends owl.Component {
       div.classList.add("bold");
     }
     div.textContent = `> ${str}`;
-    this.refs.log.appendChild(div);
-    this.refs.log.scrollTop = this.refs.log.scrollHeight;
+    this.logRef.el.appendChild(div);
+    this.logRef.el.scrollTop = this.logRef.el.scrollHeight;
   }
 
   clearLog() {
-    this.refs.log.innerHTML = "";
-  }
-
-  toggleMultiple() {
-    this.state.multipleFlag = !this.state.multipleFlag;
-  }
-
-  toggleClear() {
-    this.state.clearAfterFlag = !this.state.clearAfterFlag;
+    this.logRef.el.innerHTML = "";
   }
 }
+App.components = { Message };
 
 //------------------------------------------------------------------------------
 // Application initialization
 //------------------------------------------------------------------------------
 async function start() {
-  const templates = await owl.utils.loadTemplates("templates.xml");
-  const env = {
-    qweb: new owl.QWeb(templates)
+  const templates = await owl.utils.loadFile("templates.xml");
+  App.env = {
+    qweb: new owl.QWeb({ templates })
   };
-  const app = new App(env);
+  const app = new App();
   app.mount(document.body);
 }
 

tools/benchmarks/owl-1.0.0-beta1/index.html

@@ -2,12 +2,11 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>OWL 0.12.0 Benchmark</title>
+  <title>OWL v1.0.0-beta1 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>

tools/benchmarks/owl-1.0.0-beta1/templates.xml

@@ -12,11 +12,11 @@
         </div>
         <div class="flags">
             <div>
-                <input type="checkbox" id="multipleflag" t-on-change="toggleMultiple" t-att-checked="state.multipleFlag"/>
+                <input type="checkbox" id="multipleflag" t-model="state.multipleFlag"/>
                 <label for="multipleflag">Do it 20x</label>
             </div>
             <div>
-                <input type="checkbox" id="clearFlag" t-on-change="toggleClear"  t-att-checked="state.clearAfterFlag"/>
+                <input type="checkbox" id="clearFlag" t-model="state.clearAfterFlag" />
                 <label for="clearFlag">Clear after</label>
             </div>
         </div>

tools/debug.js

@@ -5,15 +5,7 @@
  * to log lot of helpful information on how Owl components behave.
  */
 
-let debugSetup = {
-  // componentBlackList: /App/,  // regexp
-  // componentWhiteList: /SomeComponent/, // regexp
-  // methodBlackList: ["mounted"], // list of method names
-  // methodWhiteList: ["willStart"], // list of method names
-  logScheduler: true, // display/mute scheduler logs
-  logStore: true // display/mute store logs
-};
-{
+ function debugOwl(owl, options) {
   let prefix = "[OWL_DEBUG]";
   let current;
   Object.defineProperty(owl.Component, "current", {
@@ -23,10 +15,10 @@ let debugSetup = {
     set(comp) {
       current = comp;
       const name = comp.constructor.name;
-      if (debugSetup.componentBlackList && debugSetup.componentBlackList.test(name)) {
+      if (options.componentBlackList && options.componentBlackList.test(name)) {
         return;
       }
-      if (debugSetup.componentWhiteList && !debugSetup.componentWhiteList.test(name)) {
+      if (options.componentWhiteList && !options.componentWhiteList.test(name)) {
         return;
       }
       let __owl__;
@@ -52,82 +44,88 @@ let debugSetup = {
 
   function debugComponent(component, name, id) {
     let fullName = `${name}<id=${id}>`;
+    let log = str => console.log(`${prefix} ${fullName} ${str}`);
     let shouldDebug = method => {
-      if (debugSetup.methodBlackList && debugSetup.methodBlackList.includes(method)) {
+      if (options.methodBlackList && options.methodBlackList.includes(method)) {
         return false;
       }
-      if (debugSetup.methodWhiteList && !debugSetup.methodWhiteList.includes(method)) {
+      if (options.methodWhiteList && !options.methodWhiteList.includes(method)) {
         return false;
       }
       return true;
     };
     if (shouldDebug("constructor")) {
-      console.log(`${prefix} ${fullName} constructor, props=${toStr(component.props)}`);
+      log(`constructor, props=${toStr(component.props)}`);
     }
     if (shouldDebug("willStart")) {
       owl.hooks.onWillStart(() => {
-        console.log(`${prefix} ${fullName} willStart`);
+        log(`willStart`);
       });
     }
     if (shouldDebug("mounted")) {
       owl.hooks.onMounted(() => {
-        console.log(`${prefix} ${fullName} mounted`);
+        log(`mounted`);
       });
     }
     if (shouldDebug("willUpdateProps")) {
       owl.hooks.onWillUpdateProps(nextProps => {
-        console.log(`${prefix} ${fullName} willUpdateProps, nextprops=${toStr(nextProps)}`);
+        log(`willUpdateProps, nextprops=${toStr(nextProps)}`);
       });
     }
     if (shouldDebug("willPatch")) {
       owl.hooks.onWillPatch(() => {
-        console.log(`${prefix} ${fullName} willPatch`);
+        log(`willPatch`);
       });
     }
     if (shouldDebug("patched")) {
       owl.hooks.onPatched(() => {
-        console.log(`${prefix} ${fullName} patched`);
+        log(`patched`);
       });
     }
     if (shouldDebug("willUnmount")) {
       owl.hooks.onWillUnmount(() => {
-        console.log(`${prefix} ${fullName} willUnmount`);
+        log(`willUnmount`);
       });
     }
     const __render = component.__render.bind(component);
     component.__render = function(...args) {
-      console.log(`${prefix} ${fullName} rendering template`);
+      log(`rendering template`);
       __render(...args);
     };
     const render = component.render.bind(component);
     component.render = function(...args) {
-      console.log(`${prefix} ${fullName} render`);
+      const __owl__ = component.__owl__;
+      let msg = `render`;
+      if (!__owl__.isMounted && !__owl__.currentFiber) {
+        msg += ` (warning: component is not mounted, this render has no effect)`;
+      }
+      log(msg);
       return render(...args);
     };
     const mount = component.mount.bind(component);
     component.mount = function(...args) {
-      console.log(`${prefix} ${fullName} mount`);
+      log(`mount`);
       return mount(...args);
     };
   }
 
-  if (debugSetup.logScheduler) {
-    let isRunning;
-    Object.defineProperty(owl.Component.scheduler, "isRunning", {
-      get() {
-        return isRunning;
-      },
-      set(val) {
-        if (val) {
-          console.log(`${prefix} scheduler: start running tasks queue`);
-        } else {
-          console.log(`${prefix} scheduler: stop running tasks queue`);
-        }
-        isRunning = val;
+  if (options.logScheduler) {
+    let start = owl.Component.scheduler.start;
+    let stop = owl.Component.scheduler.stop;
+    owl.Component.scheduler.start = function () {
+      if (!this.isRunning) {
+        console.log(`${prefix} scheduler: start running tasks queue`);
       }
-    });
+      start.call(this);
+    };
+    owl.Component.scheduler.stop = function () {
+      if (this.isRunning) {
+        console.log(`${prefix} scheduler: stop running tasks queue`);
+      }
+      stop.call(this);
+    };
   }
-  if (debugSetup.logStore) {
+  if (options.logStore) {
     let dispatch = owl.Store.prototype.dispatch;
     owl.Store.prototype.dispatch = function(action, ...payload) {
       console.log(`${prefix} store: action '${action}' dispatched. Payload: '${toStr(payload)}'`);
@@ -135,3 +133,17 @@ let debugSetup = {
     };
   }
 }
+
+
+// This debug function can then be used like this:
+//
+// debugOwl(owl, {
+//   componentBlackList: /App/,  // regexp
+//   componentWhiteList: /SomeComponent/, // regexp
+//   methodBlackList: ["mounted"], // list of method names
+//   methodWhiteList: ["willStart"], // list of method names
+//   logScheduler: true, // display/mute scheduler logs
+//   logStore: true // display/mute store logs
+// });
+
+module.exports.debugOwl = debugOwl;

tools/index.html

@@ -28,19 +28,15 @@
         <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-0.13.0">OWL 0.13.0</a></li>
-                <li><a href="benchmarks/owl-0.14.0">OWL 0.14.0</a></li>
                 <li><a href="benchmarks/owl-0.15.0">OWL 0.15.0</a></li>
-                <li><a href="benchmarks/owl-0.16.0">OWL 0.16.0</a></li>
                 <li><a href="benchmarks/owl-0.17.0">OWL 0.17.0</a></li>
                 <li><a href="benchmarks/owl-0.18.0">OWL 0.18.0</a></li>
                 <li><a href="benchmarks/owl-0.21.0">OWL 0.21.0</a></li>
                 <li><a href="benchmarks/owl-0.24.0">OWL 0.24.0</a></li>
+                <li><a href="benchmarks/owl-1.0.0-beta1">OWL 1.0.0-beta1</a></li>
                 <li><a href="benchmarks/owl-master">OWL Master</a></li>
             </ul>
             <ul>

tools/playground/samples.js

@@ -1444,6 +1444,111 @@ const FORM_XML = `<templates>
 </templates>
 `;
 
+const PORTAL_COMPONENTS = `
+// This shows the expected use case of Portal
+// which is to implement something similar
+// to bootstrap modal
+const { Component, useState } = owl;
+const { Portal } = owl.misc;
+
+class Modal extends Component {}
+Modal.components = { Portal };
+
+class Dialog extends Component {}
+Dialog.components = { Modal };
+
+class Interstellar extends Component {}
+
+// Main root component
+class App extends Component {
+    state = useState({
+        name: 'Portal used for Dialog (Modal)',
+        dialog: false,
+        text: 'Hello !',
+    });
+}
+App.components = { Dialog , Interstellar };
+
+// Application setup
+const app = new App();
+app.mount(document.body);
+`;
+
+const PORTAL_XML = `
+<templates>
+  <t t-name="Modal">
+    <Portal target="'body'">
+        <div class="owl-modal-supercontainer">
+          <div class="owl-modal-backdrop"></div>
+          <div class="owl-modal-container">
+            <t t-slot="default" />
+          </div>
+        </div>
+    </Portal>
+  </t>
+
+  <t t-name="Dialog">
+    <Modal>
+      <div class="owl-dialog-body">
+        <t t-slot="default" />
+      </div>
+    </Modal>
+  </t>
+
+  <div t-name="Interstellar" class="owl-interstellar">
+    <h4>This is a subComponent</h4>
+    <p>The events it triggers will go through the Portal and be teleported
+    on the other side of the wormhole it has created</p>
+    <button t-on-click="trigger('collapse-all')">Close the wormhole</button>
+  </div>
+
+  <div t-name="App" t-on-collapse-all="state.dialog=false">
+    <div t-esc="state.name"/>
+    <button t-on-click="state.dialog = true">Open Dialog</button>
+    <Dialog t-if="state.dialog">
+      <div t-esc="state.text"/>
+      <Interstellar />
+    </Dialog>
+  </div>
+</templates>
+`;
+
+const PORTAL_CSS = `
+.owl-modal-supercontainer {
+  position: static;
+}
+.owl-modal-backdrop {
+    position: fixed;
+    top: 0;
+    left:0;
+    background-color: #000000;
+    opacity: 0.5;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1000;
+}
+.owl-modal-container {
+    opacity:1;
+    z-index: 1050;
+    position: fixed;
+    top: 0;
+    left:0;
+    width: 100%;
+    height: 100%;
+}
+.owl-dialog-body {
+    max-width: 500px;
+    margin: 0 auto;
+    position: relative;
+    text-align: center;
+    padding: 2rem;
+    background-color: #FFFFFF;
+    max-height: 100%;
+}
+.owl-interstellar {
+    border: groove;
+}`
+
 const WMS = `// This example is slightly more complex than usual. We demonstrate
 // here a way to manage sub windows in Owl, declaratively. This is still just a
 // demonstration. Managing windows can be as complex as we want.  For example,
@@ -1770,5 +1875,11 @@ export const SAMPLES = [
     code: ASYNC_COMPONENTS,
     xml: ASYNC_COMPONENTS_XML,
     css: ASYNC_COMPONENTS_CSS
-  }
+  },
+  {
+    description: "Portal (Dialog)",
+    code: PORTAL_COMPONENTS,
+    xml: PORTAL_XML,
+    css: PORTAL_CSS,
+  },
 ];