[IMP] portal: add support for .closest modifier

It is sometimes useful in practice to be able to configure the portal so that it looks for a target as close as possible as the portal location. For example, in odoo, a portal may be set up in a form view that should target the current form view. But if the form view itself is in a dialog, it may fail, because it may find a valid target in the form view that is located underneath. With this commit, we add a .closest modifier to the `t-portal` directive.
2025-10-06 19:59:41 +07:00 · 2023-05-08 11:58:56 +02:00
63 changed files with 641 additions and 3841 deletions
@@ -117,7 +117,7 @@ const { loadFile, mount } = owl;
 Dev mode activates some additional checks and developer amenities:

 - [Props validation](./props.md#props-validation) is performed
- [t-for and t-foreach](./templates.md#loops) loops check for key unicity
+- [t-foreach](./templates.md#loops) loops check for key unicity
 - Lifecycle hooks are wrapped to report their errors in a more developer-friendly way
 - onWillStart and onWillUpdateProps will emit a warning in the console when they
  take longer than 3 seconds in an effort to ease debugging the presence of deadlocks
@@ -451,6 +451,5 @@ console.log(status(component));
 // logs either:
 // - 'new', if the component is new and has not been mounted yet
 // - 'mounted', if the component is currently mounted
-// - 'cancelled', if the component has not been mounted yet but will be destroyed soon
 // - 'destroyed' if the component is currently destroyed
 ```
@@ -15,3 +15,11 @@ class SomeComponent extends Component {
 The `t-portal` directive takes a valid css selector as argument. The content of
 the portalled template will be mounted at the corresponding location. Note that
 Owl need to insert an empty text node at the location of the portalled content.
+
+The `t-portal` directive supports a `.closest` modifier. It is useful to select
+the closest target from the portal location: Owl will look for a target in the
+current parent element, then in its parent, and so on until it finds it.
+
+```xml
+      <div t-portal.closest="'.target'">some content</div>
+```
@@ -61,7 +61,7 @@ For reference, here is a list of all standard QWeb directives:
 | `t-out`                        | [Outputting value, possibly without escaping](#outputting-data) |
 | `t-set`, `t-value`             | [Setting variables](#setting-variables)                         |
 | `t-if`, `t-elif`, `t-else`,    | [conditionally rendering](#conditionals)                        |
-| `t-for/t-of`, `t-foreach/t-as` | [Loops](#loops)                                                 |
+| `t-foreach`, `t-as`            | [Loops](#loops)                                                 |
 | `t-att`, `t-attf-*`, `t-att-*` | [Dynamic attributes](#dynamic-attributes)                       |
 | `t-call`                       | [Rendering sub templates](#sub-templates)                       |
 | `t-debug`, `t-log`             | [Debugging](#debugging)                                         |
@@ -372,39 +372,19 @@ Like conditions, `t-foreach` applies to the element bearing the directive’s at

 is equivalent to the previous example.

-Owl also has another pair of directives that can be used for looping that allow
-destructuring the contents of the loop item: `t-for` and `t-of`, which behaves
-much like `for..of` in javascript:
-
-```xml
-<t t-for="[left, right]" t-of="[['a', 1], ['b', 2], ['c', 3]]" t-key="left">
-    <p><t t-esc="left"/>: <t t-esc="right"/></p>
-</t>
-```
-
-will be rendered as:
-
-```xml
-<p>a: 1</p>
-<p>b: 2</p>
-<p>c: 3</p>
-```
-
 An important difference should be made with the usual `QWeb` behaviour: Owl
 requires the presence of a `t-key` directive, to be able to properly reconcile
 renderings.

-`t-foreach` can iterate on any iterable, and also has special support for objects
-and maps, it will expose the key of the current iteration as the contents of the
-`t-as`, and the corresponding value with the same name and the suffix `_value`.
+`t-foreach` can iterate on an array (the current item will be the current value)
+or an object (the current item will be the current key).

-In addition to the name passed via t-as, `t-foreach` (but not `t-for`) provides
-a few other useful variables (note: `$as` will be replaced with the name passed
-to `t-as`):
+In addition to the name passed via t-as, `t-foreach` provides a few other
+variables for various data points (note: `$as` will be replaced with the name
+passed to `t-as`):

- `$as_value`: the current iteration value, identical to `$as` for arrays and
-  other iterables, but for objects and maps, it provides the value (where `$as`
-  provides the key)
+- `$as_value`: the current iteration value, identical to `$as` for lists and
+  integers, but for objects, it provides the value (where `$as` provides the key)
 - `$as_index`: the current iteration index (the first item of the iteration has index 0)
 - `$as_first`: whether the current item is the first of the iteration
  (equivalent to `$as_index == 0`)
@@ -412,9 +392,10 @@ to `t-as`):
  (equivalent to `$as_index + 1 == $as_size`), requires the iteratee’s size be
  available

-These variables and all new variables created inside`t-foreach` and `t-for` are
-only available inside of the loop. If a variable existed outside the context of
-the loop, the assignment will affect the outer variable.
+These extra variables provided and all new variables created into the `t-foreach`
+are only available in the scope of the `t-foreach`. If the variable exists outside
+the context of the `t-foreach`, the value is copied at the end of the foreach
+into the global context.

 ```xml
 <t t-set="existing_variable" t-value="false"/>
@@ -426,7 +407,7 @@ the loop, the assignment will affect the outer variable.
    <!-- existing_variable and new_variable now true -->
 </p>

-<!-- existing_variable still true -->
+<!-- existing_variable always true -->
 <!-- new_variable undefined -->
 ```

@@ -489,11 +470,18 @@ are all equivalent:
 </t>
 ```

-The `t-key` directive is mandatory, and as mentioned should represent the object's
-identity. You may be tempted to use the loop index as a key, but keep in mind that
-this is only correct if items in the loop cannot be reordered. If this is not the
-case, using the index as the key can lead to bugs that are difficult to find, so
-use the index as the key only if you are sure items cannot be reordered.
+If there is no `t-key` directive, Owl will use the index as a default key.
+
+Note: the `t-foreach` directive only accepts arrays (lists) or objects. It does
+not work with other iterables, such as `Set`. However, it is only a matter of
+using the `...` javascript operator. For example:
+
+```xml
+<t t-foreach="[...items]" t-as="item">...</t>
+```
+
+The `...` operator will convert the `Set` (or any other iterables) into a list,
+which will work with Owl QWeb.

 ### Sub Templates

@@ -10,7 +10,7 @@
  <link rel="stylesheet" href="assets/milligram.css">
  <link rel="stylesheet" href="assets/highlight.tomorrow.css">
  <link rel="stylesheet" href="assets/main.css">
-  <script type="importmap">{ "imports": { "@odoo/owl": "./owl.js" } }</script>
+  <script src="./owl.js"></script>
 </head>
 <body>
  <header class="container">
@@ -68,6 +68,7 @@
    <p><a href=".">OWL</a> is licensed under LGPLv3.<br>Logo from <a href="https://github.com/googlefonts/noto-emoji">Google Noto Emoji Font</a>, licensed under Apache License 2.0</p>
  </footer>
  <script src="assets/highlight.pack.js"></script>
+  <script type="importmap">{ "imports": { "@odoo/owl": "./owl.js" } }</script>
  <script type="module" src="display_code.js"></script>
  <script type="module" src="counter.js"></script>
 </body>
@@ -122,16 +122,14 @@ function handleError(params) {
    }
    const node = "node" in params ? params.node : params.fiber.node;
    const fiber = "fiber" in params ? params.fiber : node.fiber;
-    if (fiber) {
-        // resets the fibers on components if possible. This is important so that
-        // new renderings can be properly included in the initial one, if any.
-        let current = fiber;
-        do {
-            current.node.fiber = current;
-            current = current.parent;
-        } while (current);
-        fibersInError.set(fiber.root, error);
-    }
+    // resets the fibers on components if possible. This is important so that
+    // new renderings can be properly included in the initial one, if any.
+    let current = fiber;
+    do {
+        current.node.fiber = current;
+        current = current.parent;
+    } while (current);
+    fibersInError.set(fiber.root, error);
    const handled = _handleError(node, error);
    if (!handled) {
        console.warn(`[Owl] Unhandled error. Destroying the root component`);
@@ -177,21 +175,11 @@ function createAttrUpdater(attr) {
 }
 function attrsSetter(attrs) {
    if (isArray(attrs)) {
-        if (attrs[0] === "class") {
-            setClass.call(this, attrs[1]);
-        }
-        else {
-            setAttribute.call(this, attrs[0], attrs[1]);
-        }
+        setAttribute.call(this, attrs[0], attrs[1]);
    }
    else {
        for (let k in attrs) {
-            if (k === "class") {
-                setClass.call(this, attrs[k]);
-            }
-            else {
-                setAttribute.call(this, k, attrs[k]);
-            }
+            setAttribute.call(this, k, attrs[k]);
        }
    }
 }
@@ -203,12 +191,7 @@ function attrsUpdater(attrs, oldAttrs) {
            if (val === oldAttrs[1]) {
                return;
            }
-            if (name === "class") {
-                updateClass.call(this, val, oldAttrs[1]);
-            }
-            else {
-                setAttribute.call(this, name, val);
-            }
+            setAttribute.call(this, name, val);
        }
        else {
            removeAttribute.call(this, oldAttrs[0]);
@@ -218,23 +201,13 @@ function attrsUpdater(attrs, oldAttrs) {
    else {
        for (let k in oldAttrs) {
            if (!(k in attrs)) {
-                if (k === "class") {
-                    updateClass.call(this, "", oldAttrs[k]);
-                }
-                else {
-                    removeAttribute.call(this, k);
-                }
+                removeAttribute.call(this, k);
            }
        }
        for (let k in attrs) {
            const val = attrs[k];
            if (val !== oldAttrs[k]) {
-                if (k === "class") {
-                    updateClass.call(this, val, oldAttrs[k]);
-                }
-                else {
-                    setAttribute.call(this, k, val);
-                }
+                setAttribute.call(this, k, val);
            }
        }
    }
@@ -313,13 +286,20 @@ function updateClass(val, oldVal) {
 * @returns a batched version of the original callback
 */
 function batched(callback) {
-    let scheduled = false;
-    return async (...args) => {
-        if (!scheduled) {
-            scheduled = true;
-            await Promise.resolve();
-            scheduled = false;
-            callback(...args);
+    let called = false;
+    return async () => {
+        // This await blocks all calls to the callback here, then releases them sequentially
+        // in the next microtick. This line decides the granularity of the batch.
+        await Promise.resolve();
+        if (!called) {
+            called = true;
+            // wait for all calls in this microtick to fall through before resetting "called"
+            // so that only the first call to the batched function calls the original callback.
+            // Schedule this before calling the callback so that calls to the batched function
+            // within the callback will proceed only after resetting called to false, and have
+            // a chance to execute the callback again
+            Promise.resolve().then(() => (called = false));
+            callback();
        }
    };
 }
@@ -1652,7 +1632,8 @@ function cancelFibers(fibers) {
        let node = fiber.node;
        fiber.render = throwOnRender;
        if (node.status === 0 /* NEW */) {
-            node.cancel();
+            node.destroy();
+            delete node.parent.children[node.parentKey];
        }
        node.fiber = null;
        if (fiber.bdom) {
@@ -2379,9 +2360,6 @@ class ComponentNode {
        }
    }
    async render(deep) {
-        if (this.status >= 2 /* CANCELLED */) {
-            return;
-        }
        let current = this.fiber;
        if (current && (current.root.locked || current.bdom === true)) {
            await Promise.resolve();
@@ -2407,7 +2385,7 @@ class ComponentNode {
        this.fiber = fiber;
        this.app.scheduler.addFiber(fiber);
        await Promise.resolve();
-        if (this.status >= 2 /* CANCELLED */) {
+        if (this.status === 2 /* DESTROYED */) {
            return;
        }
        // We only want to actually render the component if the following two
@@ -2425,18 +2403,6 @@ class ComponentNode {
            fiber.render();
        }
    }
-    cancel() {
-        this._cancel();
-        delete this.parent.children[this.parentKey];
-        this.app.scheduler.scheduleDestroy(this);
-    }
-    _cancel() {
-        this.status = 2 /* CANCELLED */;
-        const children = this.children;
-        for (let childKey in children) {
-            children[childKey]._cancel();
-        }
-    }
    destroy() {
        let shouldRemove = this.status === 1 /* MOUNTED */;
        this._destroy();
@@ -2464,7 +2430,7 @@ class ComponentNode {
                this.app.handleError({ error: e, node: this });
            }
        }
-        this.status = 3 /* DESTROYED */;
+        this.status = 2 /* DESTROYED */;
    }
    async updateAndRender(props, parentFiber) {
        this.nextProps = props;
@@ -2997,22 +2963,12 @@ function prepareList(collection) {
        keys = collection;
        values = collection;
    }
-    else if (collection instanceof Map) {
-        keys = [...collection.keys()];
-        values = [...collection.values()];
-    }
-    else if (collection && typeof collection === "object") {
-        if (Symbol.iterator in collection) {
-            keys = [...collection];
-            values = keys;
-        }
-        else {
-            values = Object.keys(collection);
-            keys = Object.values(collection);
-        }
+    else if (collection) {
+        values = Object.keys(collection);
+        keys = Object.values(collection);
    }
    else {
-        throw new OwlError(`Invalid loop expression: "${collection}" is not iterable`);
+        throw new OwlError("Invalid loop expression");
    }
    const n = values.length;
    return [keys, values, n, new Array(n)];
@@ -3919,10 +3875,6 @@ class CodeGenerator {
        })
            .join("");
    }
-    translate(str) {
-        const match = translationRE.exec(str);
-        return match[1] + this.translateFn(match[2]) + match[3];
-    }
    /**
     * @returns the newly created block name, if any
     */
@@ -4000,7 +3952,8 @@ class CodeGenerator {
        let { block, forceNewBlock } = ctx;
        let value = ast.value;
        if (value && ctx.translate !== false) {
-            value = this.translate(value);
+            const match = translationRE.exec(value);
+            value = match[1] + this.translateFn(match[2]) + match[3];
        }
        if (!ctx.inPreTag) {
            value = value.replace(whitespaceRE, " ");
@@ -4541,12 +4494,11 @@ class CodeGenerator {
        else {
            let value;
            if (ast.defaultValue) {
-                const defaultValue = ctx.translate ? this.translate(ast.defaultValue) : ast.defaultValue;
                if (ast.value) {
-                    value = `withDefault(${expr}, \`${defaultValue}\`)`;
+                    value = `withDefault(${expr}, \`${ast.defaultValue}\`)`;
                }
                else {
-                    value = `\`${defaultValue}\``;
+                    value = `\`${ast.defaultValue}\``;
                }
            }
            else {
@@ -4839,10 +4791,10 @@ function parseNode(node, ctx) {
        parseTCall(node, ctx) ||
        parseTCallBlock(node) ||
        parseTEscNode(node, ctx) ||
-        parseTOutNode(node, ctx) ||
        parseTKey(node, ctx) ||
        parseTTranslation(node, ctx) ||
        parseTSlot(node, ctx) ||
+        parseTOutNode(node, ctx) ||
        parseComponent(node, ctx) ||
        parseDOMNode(node, ctx) ||
        parseTSetNode(node, ctx) ||
@@ -4927,10 +4879,10 @@ function parseDOMNode(node, ctx) {
    let model = null;
    for (let attr of nodeAttrsNames) {
        const value = node.getAttribute(attr);
-        if (attr === "t-on" || attr === "t-on-") {
-            throw new OwlError("Missing event name with t-on directive");
-        }
-        if (attr.startsWith("t-on-")) {
+        if (attr.startsWith("t-on")) {
+            if (attr === "t-on") {
+                throw new OwlError("Missing event name with t-on directive");
+            }
            on = on || {};
            on[attr.slice(5)] = value;
        }
@@ -4955,8 +4907,10 @@ function parseDOMNode(node, ctx) {
            const typeAttr = node.getAttribute("type");
            const isInput = tagName === "input";
            const isSelect = tagName === "select";
+            const isTextarea = tagName === "textarea";
            const isCheckboxInput = isInput && typeAttr === "checkbox";
            const isRadioInput = isInput && typeAttr === "radio";
+            const isOtherInput = isInput && !isCheckboxInput && !isRadioInput;
            const hasLazyMod = attr.includes(".lazy");
            const hasNumberMod = attr.includes(".number");
            const hasTrimMod = attr.includes(".trim");
@@ -4968,8 +4922,8 @@ function parseDOMNode(node, ctx) {
                specialInitTargetAttr: isRadioInput ? "checked" : null,
                eventType,
                hasDynamicChildren: false,
-                shouldTrim: hasTrimMod,
-                shouldNumberize: hasNumberMod,
+                shouldTrim: hasTrimMod && (isOtherInput || isTextarea),
+                shouldNumberize: hasNumberMod && (isOtherInput || isTextarea),
            };
            if (isSelect) {
                // don't pollute the original ctx
@@ -5032,6 +4986,9 @@ function parseTEscNode(node, ctx) {
            content: [tesc],
        };
    }
+    if (ast.type === 11 /* TComponent */) {
+        throw new OwlError("t-esc is not supported on Component nodes");
+    }
    return tesc;
 }
 // -----------------------------------------------------------------------------
@@ -5473,21 +5430,19 @@ function normalizeTIf(el) {
 *
 * @param el the element containing the tree that should be normalized
 */
-function normalizeTEscTOut(el) {
-    for (const d of ["t-esc", "t-out"]) {
-        const elements = [...el.querySelectorAll(`[${d}]`)].filter((el) => el.tagName[0] === el.tagName[0].toUpperCase() || el.hasAttribute("t-component"));
-        for (const el of elements) {
-            if (el.childNodes.length) {
-                throw new OwlError(`Cannot have ${d} on a component that already has content`);
-            }
-            const value = el.getAttribute(d);
-            el.removeAttribute(d);
-            const t = el.ownerDocument.createElement("t");
-            if (value != null) {
-                t.setAttribute(d, value);
-            }
-            el.appendChild(t);
+function normalizeTEsc(el) {
+    const elements = [...el.querySelectorAll("[t-esc]")].filter((el) => el.tagName[0] === el.tagName[0].toUpperCase() || el.hasAttribute("t-component"));
+    for (const el of elements) {
+        if (el.childNodes.length) {
+            throw new OwlError("Cannot have t-esc on a component that already has content");
        }
+        const value = el.getAttribute("t-esc");
+        el.removeAttribute("t-esc");
+        const t = el.ownerDocument.createElement("t");
+        if (value != null) {
+            t.setAttribute("t-esc", value);
+        }
+        el.appendChild(t);
    }
 }
 /**
@@ -5498,7 +5453,7 @@ function normalizeTEscTOut(el) {
 */
 function normalizeXML(el) {
    normalizeTIf(el);
-    normalizeTEscTOut(el);
+    normalizeTEsc(el);
 }
 /**
 * Parses an XML string into an XML document, throwing errors on parser errors
@@ -5551,7 +5506,7 @@ function compile(template, options = {}) {
 }

 // do not modify manually. This file is generated by the release script.
-const version = "2.2.3";
+const version = "2.1.2";

 // -----------------------------------------------------------------------------
 //  Scheduler
@@ -5561,18 +5516,11 @@ class Scheduler {
        this.tasks = new Set();
        this.frame = 0;
        this.delayedRenders = [];
-        this.cancelledNodes = new Set();
        this.requestAnimationFrame = Scheduler.requestAnimationFrame;
    }
    addFiber(fiber) {
        this.tasks.add(fiber.root);
    }
-    scheduleDestroy(node) {
-        this.cancelledNodes.add(node);
-        if (this.frame === 0) {
-            this.frame = this.requestAnimationFrame(() => this.processTasks());
-        }
-    }
    /**
     * Process all current tasks. This only applies to the fibers that are ready.
     * Other tasks are left unchanged.
@@ -5582,28 +5530,21 @@ class Scheduler {
            let renders = this.delayedRenders;
            this.delayedRenders = [];
            for (let f of renders) {
-                if (f.root && f.node.status !== 3 /* DESTROYED */ && f.node.fiber === f) {
+                if (f.root && f.node.status !== 2 /* DESTROYED */ && f.node.fiber === f) {
                    f.render();
                }
            }
        }
        if (this.frame === 0) {
-            this.frame = this.requestAnimationFrame(() => this.processTasks());
-        }
-    }
-    processTasks() {
-        this.frame = 0;
-        for (let node of this.cancelledNodes) {
-            node._destroy();
-        }
-        this.cancelledNodes.clear();
-        for (let task of this.tasks) {
-            this.processFiber(task);
-        }
-        for (let task of this.tasks) {
-            if (task.node.status === 3 /* DESTROYED */) {
-                this.tasks.delete(task);
-            }
+            this.frame = this.requestAnimationFrame(() => {
+                this.frame = 0;
+                this.tasks.forEach((fiber) => this.processFiber(fiber));
+                for (let task of this.tasks) {
+                    if (task.node.status === 2 /* DESTROYED */) {
+                        this.tasks.delete(task);
+                    }
+                }
+            });
        }
    }
    processFiber(fiber) {
@@ -5616,7 +5557,7 @@ class Scheduler {
            this.tasks.delete(fiber);
            return;
        }
-        if (fiber.node.status === 3 /* DESTROYED */) {
+        if (fiber.node.status === 2 /* DESTROYED */) {
            this.tasks.delete(fiber);
            return;
        }
@@ -5644,8 +5585,6 @@ window.__OWL_DEVTOOLS__ || (window.__OWL_DEVTOOLS__ = {
    apps: new Set(),
    Fiber: Fiber,
    RootFiber: RootFiber,
-    toRaw: toRaw,
-    reactive: reactive,
 });
 class App extends TemplateSet {
    constructor(Root, config = {}) {
@@ -5708,8 +5647,8 @@ class App extends TemplateSet {
    }
    destroy() {
        if (this.root) {
+            this.scheduler.flush();
            this.root.destroy();
-            this.scheduler.processTasks();
        }
        window.__OWL_DEVTOOLS__.apps.delete(this);
    }
@@ -5840,11 +5779,9 @@ function status(component) {
    switch (component.__owl__.status) {
        case 0 /* NEW */:
            return "new";
-        case 2 /* CANCELLED */:
-            return "cancelled";
        case 1 /* MOUNTED */:
            return "mounted";
-        case 3 /* DESTROYED */:
+        case 2 /* DESTROYED */:
            return "destroyed";
    }
 }
@@ -5900,9 +5837,8 @@ function useChildSubEnv(envExtension) {
 * will run a cleanup function before patching and before unmounting the
 * the component.
 *
- * @template T
- * @param {Effect<T>} effect the effect to run on component mount and/or patch
- * @param {()=>T} [computeDependencies=()=>[NaN]] a callback to compute
+ * @param {Effect} effect the effect to run on component mount and/or patch
+ * @param {()=>any[]} [computeDependencies=()=>[NaN]] a callback to compute
 *      dependencies that will decide if the effect needs to be cleaned up and
 *      run again. If the dependencies did not change, the effect will not run
 *      again. The default value returns an array containing only NaN because
@@ -5984,6 +5920,6 @@ TemplateSet.prototype._compileTemplate = function _compileTemplate(name, templat
 export { App, Component, EventBus, OwlError, __info__, blockDom, loadFile, markRaw, markup, mount, onError, onMounted, onPatched, onRendered, onWillDestroy, onWillPatch, onWillRender, onWillStart, onWillUnmount, onWillUpdateProps, reactive, status, toRaw, useChildSubEnv, useComponent, useEffect, useEnv, useExternalListener, useRef, useState, useSubEnv, validate, validateType, whenReady, xml };


-__info__.date = '2023-07-20T06:05:29.796Z';
-__info__.hash = 'b1a3b32';
+__info__.date = '2023-04-29T07:45:54.333Z';
+__info__.hash = 'aabb755';
 __info__.url = 'https://github.com/odoo/owl';
@@ -1,6 +1,6 @@
 {
  "name": "@odoo/owl",
-  "version": "2.2.3",
+  "version": "2.1.3",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -1,6 +1,6 @@
 {
  "name": "@odoo/owl",
-  "version": "2.2.3",
+  "version": "2.1.3",
  "description": "Odoo Web Library (OWL)",
  "main": "dist/owl.cjs.js",
  "module": "dist/owl.es.js",
@@ -18,7 +18,6 @@ import {
  ASTTCallBlock,
  ASTTEsc,
  ASTText,
-  ASTTFor,
  ASTTForEach,
  ASTTif,
  ASTTKey,
@@ -448,11 +447,6 @@ export class CodeGenerator {
      .join("");
  }

-  translate(str: string): string {
-    const match = translationRE.exec(str) as any;
-    return match[1] + this.translateFn(match[2]) + match[3];
-  }
-
  /**
   * @returns the newly created block name, if any
   */
@@ -472,8 +466,6 @@ export class CodeGenerator {
        return this.compileTIf(ast, ctx);
      case ASTType.TForEach:
        return this.compileTForeach(ast, ctx);
-      case ASTType.TFor:
-        return this.compileTFor(ast, ctx);
      case ASTType.TKey:
        return this.compileTKey(ast, ctx);
      case ASTType.Multi:
@@ -535,7 +527,8 @@ export class CodeGenerator {

    let value = ast.value;
    if (value && ctx.translate !== false) {
-      value = this.translate(value);
+      const match = translationRE.exec(value) as any;
+      value = match[1] + this.translateFn(match[2]) + match[3];
    }
    if (!ctx.inPreTag) {
      value = value.replace(whitespaceRE, " ");
@@ -910,7 +903,7 @@ export class CodeGenerator {
    if (!ast.hasNoValue) {
      this.addLine(`ctx[\`${ast.elem}_value\`] = ${keys}[${loopVar}];`);
    }
-    this.define(`key${this.target.loopLevel}`, compileExpr(ast.key));
+    this.define(`key${this.target.loopLevel}`, ast.key ? compileExpr(ast.key) : loopVar);
    if (this.dev) {
      // Throw error on duplicate keys in dev mode
      this.helpers.add("OwlError");
@@ -957,46 +950,6 @@ export class CodeGenerator {
    return block.varName;
  }

-  compileTFor(ast: ASTTFor, ctx: Context): string {
-    let { block } = ctx;
-    if (block) {
-      this.insertAnchor(block);
-    }
-    block = this.createBlock(block, "list", ctx);
-    this.target.loopLevel++;
-    this.addLine(`ctx = Object.create(ctx);`);
-    // Throw errors on duplicate keys in dev mode
-    if (this.dev) {
-      this.define(`keys${block.id}`, `new Set()`);
-    }
-    this.define(`c_block${block.id}`, "[]");
-    const index = `i${this.target.loopLevel}`;
-    this.addLine(`let ${index} = ${0};`);
-    const binding = compileExpr(ast.binding);
-    this.addLine(`for (${binding} of ${compileExpr(ast.iterable)}) {`);
-    this.target.indentLevel++;
-    this.define(`key${this.target.loopLevel}`, compileExpr(ast.key));
-    if (this.dev) {
-      // Throw error on duplicate keys in dev mode
-      this.helpers.add("OwlError");
-      this.addLine(
-        `if (keys${block.id}.has(String(key${this.target.loopLevel}))) { throw new OwlError(\`Got duplicate key in t-for: \${key${this.target.loopLevel}}\`)}`
-      );
-      this.addLine(`keys${block.id}.add(String(key${this.target.loopLevel}));`);
-    }
-    const subCtx = createContext(ctx, { block, index });
-    this.compileAST(ast.body, subCtx);
-    this.addLine(`${index}++;`);
-    this.target.indentLevel--;
-    this.target.loopLevel--;
-    this.addLine(`}`);
-    if (!ctx.isLast) {
-      this.addLine(`ctx = ctx.__proto__;`);
-    }
-    this.insertBlock("l", block, ctx);
-    return block.varName;
-  }
-
  compileTKey(ast: ASTTKey, ctx: Context): string | null {
    const tKeyExpr = generateId("tKey_");
    this.define(tKeyExpr, compileExpr(ast.expr));
@@ -1142,11 +1095,10 @@ export class CodeGenerator {
    } else {
      let value: string;
      if (ast.defaultValue) {
-        const defaultValue = ctx.translate ? this.translate(ast.defaultValue) : ast.defaultValue;
        if (ast.value) {
-          value = `withDefault(${expr}, \`${defaultValue}\`)`;
+          value = `withDefault(${expr}, \`${ast.defaultValue}\`)`;
        } else {
-          value = `\`${defaultValue}\``;
+          value = `\`${ast.defaultValue}\``;
        }
      } else {
        value = expr;
@@ -1419,7 +1371,9 @@ export class CodeGenerator {
    });

    const target = compileExpr(ast.target);
-    const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}.bind(this), __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`;
+    const blockString = `${id}({target: ${target},${
+      ast.isClosest ? "isClosest: true," : ""
+    }slots: {'default': {__render: ${name}.bind(this), __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`;
    if (block) {
      this.insertAnchor(block);
    }
@@ -2,7 +2,6 @@ import type { TemplateSet } from "../runtime/template_set";
 import type { BDom } from "../runtime/blockdom";
 import { CodeGenerator, Config } from "./code_generator";
 import { parse } from "./parser";
-import { OwlError } from "../runtime";

 export type Template = (context: any, vnode: any, key?: string) => BDom;

@@ -28,15 +27,5 @@ export function compile(
  const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext });
  const code = codeGenerator.generateCode();
  // template function
-  try {
-    return new Function("app, bdom, helpers", code) as TemplateFunction;
-  } catch (originalError: any) {
-    const { name } = options;
-    const nameStr = name ? `template "${name}"` : "anonymous template";
-    const err = new OwlError(
-      `Failed to compile ${nameStr}: ${originalError.message}\n\ngenerated code:\nfunction(app, bdom, helpers) {\n${code}\n}`
-    );
-    err.cause = originalError;
-    throw err;
-  }
+  return new Function("app, bdom, helpers", code) as TemplateFunction;
 }
@@ -26,7 +26,6 @@ export const enum ASTType {
  TCallBlock,
  TTranslation,
  TPortal,
-  TFor,
 }

 export interface ASTText {
@@ -105,15 +104,7 @@ export interface ASTTForEach {
  hasNoLast: boolean;
  hasNoIndex: boolean;
  hasNoValue: boolean;
-  key: string;
-}
-
-export interface ASTTFor {
-  type: ASTType.TFor;
-  iterable: string;
-  binding: string;
-  body: AST;
-  key: string;
+  key: string | null;
 }

 export interface ASTTKey {
@@ -178,6 +169,7 @@ export interface ASTTranslation {
 export interface ASTTPortal {
  type: ASTType.TPortal;
  target: string;
+  isClosest: boolean;
  content: AST;
 }

@@ -192,7 +184,6 @@ export type AST =
  | ASTTCall
  | ASTTOut
  | ASTTForEach
-  | ASTTFor
  | ASTTKey
  | ASTComponent
  | ASTSlot
@@ -240,16 +231,15 @@ function parseNode(node: Node, ctx: ParsingContext): AST | null {
  return (
    parseTDebugLog(node, ctx) ||
    parseTForEach(node, ctx) ||
-    parseTFor(node, ctx) ||
    parseTIf(node, ctx) ||
    parseTPortal(node, ctx) ||
    parseTCall(node, ctx) ||
    parseTCallBlock(node, ctx) ||
    parseTEscNode(node, ctx) ||
-    parseTOutNode(node, ctx) ||
    parseTKey(node, ctx) ||
    parseTTranslation(node, ctx) ||
    parseTSlot(node, ctx) ||
+    parseTOutNode(node, ctx) ||
    parseComponent(node, ctx) ||
    parseDOMNode(node, ctx) ||
    parseTSetNode(node, ctx) ||
@@ -347,10 +337,10 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {

  for (let attr of nodeAttrsNames) {
    const value = node.getAttribute(attr)!;
-    if (attr === "t-on" || attr === "t-on-") {
-      throw new OwlError("Missing event name with t-on directive");
-    }
-    if (attr.startsWith("t-on-")) {
+    if (attr.startsWith("t-on")) {
+      if (attr === "t-on") {
+        throw new OwlError("Missing event name with t-on directive");
+      }
      on = on || {};
      on[attr.slice(5)] = value;
    } else if (attr.startsWith("t-model")) {
@@ -376,8 +366,10 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
      const typeAttr = node.getAttribute("type");
      const isInput = tagName === "input";
      const isSelect = tagName === "select";
+      const isTextarea = tagName === "textarea";
      const isCheckboxInput = isInput && typeAttr === "checkbox";
      const isRadioInput = isInput && typeAttr === "radio";
+      const isOtherInput = isInput && !isCheckboxInput && !isRadioInput;
      const hasLazyMod = attr.includes(".lazy");
      const hasNumberMod = attr.includes(".number");
      const hasTrimMod = attr.includes(".trim");
@@ -390,8 +382,8 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
        specialInitTargetAttr: isRadioInput ? "checked" : null,
        eventType,
        hasDynamicChildren: false,
-        shouldTrim: hasTrimMod,
-        shouldNumberize: hasNumberMod,
+        shouldTrim: hasTrimMod && (isOtherInput || isTextarea),
+        shouldNumberize: hasNumberMod && (isOtherInput || isTextarea),
      };
      if (isSelect) {
        // don't pollute the original ctx
@@ -455,6 +447,9 @@ function parseTEscNode(node: Element, ctx: ParsingContext): AST | null {
      content: [tesc],
    };
  }
+  if (ast.type === ASTType.TComponent) {
+    throw new OwlError("t-esc is not supported on Component nodes");
+  }
  return tesc;
 }

@@ -542,36 +537,6 @@ function parseTForEach(node: Element, ctx: ParsingContext): AST | null {
  };
 }

-function parseTFor(node: Element, ctx: ParsingContext): AST | null {
-  if (!node.hasAttribute("t-for")) {
-    return null;
-  }
-  const binding = node.getAttribute("t-for")!;
-  node.removeAttribute("t-for");
-  const iterable = node.getAttribute("t-of") || "";
-  node.removeAttribute("t-of");
-  const key = node.getAttribute("t-key");
-  if (!key) {
-    throw new OwlError(
-      `"Directive t-for should always be used with a t-key!" (expression: t-for="${binding}" t-of="${iterable}")`
-    );
-  }
-  node.removeAttribute("t-key");
-  const body = parseNode(node, ctx);
-
-  if (!body) {
-    return null;
-  }
-
-  return {
-    type: ASTType.TFor,
-    iterable,
-    binding,
-    body,
-    key,
-  };
-}
-
 function parseTKey(node: Element, ctx: ParsingContext): AST | null {
  if (!node.hasAttribute("t-key")) {
    return null;
@@ -869,11 +834,18 @@ function parseTTranslation(node: Element, ctx: ParsingContext): AST | null {
 // -----------------------------------------------------------------------------

 function parseTPortal(node: Element, ctx: ParsingContext): AST | null {
-  if (!node.hasAttribute("t-portal")) {
+  let target, isClosest;
+  if (node.hasAttribute("t-portal")) {
+    target = node.getAttribute("t-portal")!;
+    node.removeAttribute("t-portal");
+    isClosest = false;
+  } else if (node.hasAttribute("t-portal.closest")) {
+    target = node.getAttribute("t-portal.closest")!;
+    node.removeAttribute("t-portal.closest");
+    isClosest = true;
+  } else {
    return null;
  }
-  const target = node.getAttribute("t-portal")!;
-  node.removeAttribute("t-portal");
  const content = parseNode(node, ctx);
  if (!content) {
    return {
@@ -884,6 +856,7 @@ function parseTPortal(node: Element, ctx: ParsingContext): AST | null {
  return {
    type: ASTType.TPortal,
    target,
+    isClosest,
    content,
  };
 }
@@ -979,23 +952,21 @@ function normalizeTIf(el: Element) {
 *
 * @param el the element containing the tree that should be normalized
 */
-function normalizeTEscTOut(el: Element) {
-  for (const d of ["t-esc", "t-out"]) {
-    const elements = [...el.querySelectorAll(`[${d}]`)].filter(
-      (el) => el.tagName[0] === el.tagName[0].toUpperCase() || el.hasAttribute("t-component")
-    );
-    for (const el of elements) {
-      if (el.childNodes.length) {
-        throw new OwlError(`Cannot have ${d} on a component that already has content`);
-      }
-      const value = el.getAttribute(d);
-      el.removeAttribute(d);
-      const t = el.ownerDocument.createElement("t");
-      if (value != null) {
-        t.setAttribute(d, value);
-      }
-      el.appendChild(t);
+function normalizeTEsc(el: Element) {
+  const elements = [...el.querySelectorAll("[t-esc]")].filter(
+    (el) => el.tagName[0] === el.tagName[0].toUpperCase() || el.hasAttribute("t-component")
+  );
+  for (const el of elements) {
+    if (el.childNodes.length) {
+      throw new OwlError("Cannot have t-esc on a component that already has content");
    }
+    const value = el.getAttribute("t-esc");
+    el.removeAttribute("t-esc");
+    const t = el.ownerDocument.createElement("t");
+    if (value != null) {
+      t.setAttribute("t-esc", value);
+    }
+    el.appendChild(t);
  }
 }

@@ -1007,7 +978,7 @@ function normalizeTEscTOut(el: Element) {
 */
 function normalizeXML(el: Element) {
  normalizeTIf(el);
-  normalizeTEscTOut(el);
+  normalizeTEsc(el);
 }

 /**
@@ -7,7 +7,6 @@ import { Scheduler } from "./scheduler";
 import { validateProps } from "./template_helpers";
 import { TemplateSet, TemplateSetConfig } from "./template_set";
 import { validateTarget } from "./utils";
-import { toRaw, reactive } from "./reactivity";

 // reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f

@@ -40,8 +39,6 @@ declare global {
      apps: Set<App>;
      Fiber: typeof Fiber;
      RootFiber: typeof RootFiber;
-      toRaw: typeof toRaw;
-      reactive: typeof reactive;
    };
  }
 }
@@ -50,8 +47,6 @@ window.__OWL_DEVTOOLS__ ||= {
  apps: new Set<App>(),
  Fiber: Fiber,
  RootFiber: RootFiber,
-  toRaw: toRaw,
-  reactive: reactive,
 };

 export class App<
@@ -136,8 +131,8 @@ export class App<

  destroy() {
    if (this.root) {
+      this.scheduler.flush();
      this.root.destroy();
-      this.scheduler.processTasks();
    }
    window.__OWL_DEVTOOLS__.apps.delete(this);
  }
@@ -36,18 +36,10 @@ export function createAttrUpdater(attr: string): Setter<HTMLElement> {

 export function attrsSetter(this: HTMLElement, attrs: any) {
  if (isArray(attrs)) {
-    if (attrs[0] === "class") {
-      setClass.call(this, attrs[1]);
-    } else {
-      setAttribute.call(this, attrs[0], attrs[1]);
-    }
+    setAttribute.call(this, attrs[0], attrs[1]);
  } else {
    for (let k in attrs) {
-      if (k === "class") {
-        setClass.call(this, attrs[k]);
-      } else {
-        setAttribute.call(this, k, attrs[k]);
-      }
+      setAttribute.call(this, k, attrs[k]);
    }
  }
 }
@@ -60,11 +52,7 @@ export function attrsUpdater(this: HTMLElement, attrs: any, oldAttrs: any) {
      if (val === oldAttrs[1]) {
        return;
      }
-      if (name === "class") {
-        updateClass.call(this, val, oldAttrs[1]);
-      } else {
-        setAttribute.call(this, name, val);
-      }
+      setAttribute.call(this, name, val);
    } else {
      removeAttribute.call(this, oldAttrs[0]);
      setAttribute.call(this, name, val);
@@ -72,21 +60,13 @@ export function attrsUpdater(this: HTMLElement, attrs: any, oldAttrs: any) {
  } else {
    for (let k in oldAttrs) {
      if (!(k in attrs)) {
-        if (k === "class") {
-          updateClass.call(this, "", oldAttrs[k]);
-        } else {
-          removeAttribute.call(this, k);
-        }
+        removeAttribute.call(this, k);
      }
    }
    for (let k in attrs) {
      const val = attrs[k];
      if (val !== oldAttrs[k]) {
-        if (k === "class") {
-          updateClass.call(this, val, oldAttrs[k]);
-        } else {
-          setAttribute.call(this, k, val);
-        }
+        setAttribute.call(this, k, val);
      }
    }
  }
@@ -145,9 +145,6 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
  }

  async render(deep: boolean) {
-    if (this.status >= STATUS.CANCELLED) {
-      return;
-    }
    let current = this.fiber;
    if (current && (current.root!.locked || (current as any).bdom === true)) {
      await Promise.resolve();
@@ -174,7 +171,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp

    this.app.scheduler.addFiber(fiber);
    await Promise.resolve();
-    if (this.status >= STATUS.CANCELLED) {
+    if (this.status === STATUS.DESTROYED) {
      return;
    }
    // We only want to actually render the component if the following two
@@ -193,20 +190,6 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
    }
  }

-  cancel() {
-    this._cancel();
-    delete this.parent!.children[this.parentKey!];
-    this.app.scheduler.scheduleDestroy(this);
-  }
-
-  _cancel() {
-    this.status = STATUS.CANCELLED;
-    const children = this.children;
-    for (let childKey in children) {
-      children[childKey]._cancel();
-    }
-  }
-
  destroy() {
    let shouldRemove = this.status === STATUS.MOUNTED;
    this._destroy();
@@ -51,19 +51,17 @@ export function handleError(params: ErrorParams) {
    );
  }
  const node = "node" in params ? params.node : params.fiber.node;
-  const fiber = "fiber" in params ? params.fiber : node.fiber;
+  const fiber = "fiber" in params ? params.fiber : node.fiber!;

-  if (fiber) {
-    // resets the fibers on components if possible. This is important so that
-    // new renderings can be properly included in the initial one, if any.
-    let current: Fiber | null = fiber;
-    do {
-      current.node.fiber = current;
-      current = current.parent;
-    } while (current);
+  // resets the fibers on components if possible. This is important so that
+  // new renderings can be properly included in the initial one, if any.
+  let current: Fiber | null = fiber;
+  do {
+    current.node.fiber = current;
+    current = current.parent;
+  } while (current);

-    fibersInError.set(fiber.root!, error);
-  }
+  fibersInError.set(fiber.root!, error);

  const handled = _handleError(node, error);
  if (!handled) {
@@ -55,7 +55,8 @@ function cancelFibers(fibers: Fiber[]): number {
    let node = fiber.node;
    fiber.render = throwOnRender;
    if (node.status === STATUS.NEW) {
-      node.cancel();
+      node.destroy();
+      delete node.parent!.children[node.parentKey!];
    }
    node.fiber = null;
    if (fiber.bdom) {
@@ -59,35 +59,28 @@ export function useChildSubEnv(envExtension: Env) {
 // useEffect
 // -----------------------------------------------------------------------------

-type EffectDeps<T extends any[]> = T | (T extends [...infer H, never] ? EffectDeps<H> : never);
-
 /**
- * @template T
- * @param {...T} dependencies the dependencies computed by computeDependencies
+ * @param {...any} dependencies the dependencies computed by computeDependencies
 * @returns {void|(()=>void)} a cleanup function that reverses the side
 *      effects of the effect callback.
 */
-type Effect<T extends [...T]> = (...dependencies: EffectDeps<T>) => void | (() => void);
+type Effect = (...dependencies: any[]) => void | (() => void);

 /**
 * This hook will run a callback when a component is mounted and patched, and
 * will run a cleanup function before patching and before unmounting the
 * the component.
 *
- * @template T
- * @param {Effect<T>} effect the effect to run on component mount and/or patch
- * @param {()=>T} [computeDependencies=()=>[NaN]] a callback to compute
+ * @param {Effect} effect the effect to run on component mount and/or patch
+ * @param {()=>any[]} [computeDependencies=()=>[NaN]] a callback to compute
 *      dependencies that will decide if the effect needs to be cleaned up and
 *      run again. If the dependencies did not change, the effect will not run
 *      again. The default value returns an array containing only NaN because
 *      NaN !== NaN, which will cause the effect to rerun on every patch.
 */
-export function useEffect<T extends [...T]>(
-  effect: Effect<T>,
-  computeDependencies: () => T = () => [NaN] as never
-) {
+export function useEffect(effect: Effect, computeDependencies: () => any[] = () => [NaN]) {
  let cleanup: (() => void) | void;
-  let dependencies: T;
+  let dependencies: any[];
  onMounted(() => {
    dependencies = computeDependencies();
    cleanup = effect(...dependencies);
@@ -5,20 +5,34 @@ import { OwlError } from "./error_handling";

 const VText: any = text("").constructor;

+function getTarget(
+  currentParentEl: HTMLElement | Document,
+  selector: string,
+  isClosest: boolean
+): HTMLElement | null {
+  if (!isClosest || currentParentEl === document) {
+    return document.querySelector(selector);
+  }
+  const attempt = currentParentEl.querySelector(selector) as HTMLElement | null;
+  return attempt || getTarget(currentParentEl.parentElement!, selector, true);
+}
+
 class VPortal extends VText implements Partial<VNode<VPortal>> {
  content: BDom | null;
  selector: string;
+  isClosest: boolean;
  target: HTMLElement | null = null;

-  constructor(selector: string, content: BDom) {
+  constructor(selector: string, isClosest: boolean, content: BDom) {
    super("");
    this.selector = selector;
+    this.isClosest = isClosest;
    this.content = content;
  }

  mount(parent: HTMLElement, anchor: ChildNode) {
    super.mount(parent, anchor);
-    this.target = document.querySelector(this.selector) as any;
+    this.target = getTarget(parent, this.selector, this.isClosest);
    if (this.target) {
      this.content!.mount(this.target!, null);
    } else {
@@ -54,16 +68,19 @@ class VPortal extends VText implements Partial<VNode<VPortal>> {
 export function portalTemplate(app: any, bdom: any, helpers: any) {
  let { callSlot } = helpers;
  return function template(ctx: any, node: any, key = ""): any {
-    return new VPortal(ctx.props.target, callSlot(ctx, node, key, "default", false, null));
+    return new VPortal(
+      ctx.props.target,
+      ctx.props.isClosest,
+      callSlot(ctx, node, key, "default", false, null)
+    );
  };
 }

 export class Portal extends Component {
  static template = "__portal__";
  static props = {
-    target: {
-      type: String,
-    },
+    target: String,
+    isClosest: { type: Boolean, optional: true },
    slots: true,
  };

@@ -73,7 +90,7 @@ export class Portal extends Component {
    onMounted(() => {
      const portal: VPortal = node.bdom;
      if (!portal.target) {
-        const target: HTMLElement = document.querySelector(this.props.target);
+        const target = getTarget(portal.parentEl, this.props.target, this.props.isClosest);
        if (target) {
          portal.content!.moveBeforeDOMNode(target.firstChild, target);
        } else {
@@ -1,4 +1,3 @@
-import type { ComponentNode } from "./component_node";
 import { fibersInError } from "./error_handling";
 import { Fiber, RootFiber } from "./fibers";
 import { STATUS } from "./status";
@@ -15,7 +14,6 @@ export class Scheduler {
  requestAnimationFrame: Window["requestAnimationFrame"];
  frame: number = 0;
  delayedRenders: Fiber[] = [];
-  cancelledNodes: Set<ComponentNode> = new Set();

  constructor() {
    this.requestAnimationFrame = Scheduler.requestAnimationFrame;
@@ -25,13 +23,6 @@ export class Scheduler {
    this.tasks.add(fiber.root!);
  }

-  scheduleDestroy(node: ComponentNode) {
-    this.cancelledNodes.add(node);
-    if (this.frame === 0) {
-      this.frame = this.requestAnimationFrame(() => this.processTasks());
-    }
-  }
-
  /**
   * Process all current tasks. This only applies to the fibers that are ready.
   * Other tasks are left unchanged.
@@ -48,23 +39,15 @@ export class Scheduler {
    }

    if (this.frame === 0) {
-      this.frame = this.requestAnimationFrame(() => this.processTasks());
-    }
-  }
-
-  processTasks() {
-    this.frame = 0;
-    for (let node of this.cancelledNodes) {
-      node._destroy();
-    }
-    this.cancelledNodes.clear();
-    for (let task of this.tasks) {
-      this.processFiber(task);
-    }
-    for (let task of this.tasks) {
-      if (task.node.status === STATUS.DESTROYED) {
-        this.tasks.delete(task);
-      }
+      this.frame = this.requestAnimationFrame(() => {
+        this.frame = 0;
+        this.tasks.forEach((fiber) => this.processFiber(fiber));
+        for (let task of this.tasks) {
+          if (task.node.status === STATUS.DESTROYED) {
+            this.tasks.delete(task);
+          }
+        }
+      });
    }
  }

@@ -7,20 +7,15 @@ import type { Component } from "./component";
 export const enum STATUS {
  NEW,
  MOUNTED, // is ready, and in DOM. It has a valid el
-  // component has been created, but has been replaced by a newer component before being mounted
-  // it is cancelled until the next animation frame where it will be destroyed
-  CANCELLED,
  DESTROYED,
 }

-type STATUS_DESCR = "new" | "mounted" | "cancelled" | "destroyed";
+type STATUS_DESCR = "new" | "mounted" | "destroyed";

 export function status(component: Component): STATUS_DESCR {
  switch (component.__owl__.status) {
    case STATUS.NEW:
      return "new";
-    case STATUS.CANCELLED:
-      return "cancelled";
    case STATUS.MOUNTED:
      return "mounted";
    case STATUS.DESTROYED:
@@ -60,26 +60,18 @@ function withKey(elem: any, k: string) {
  return elem;
 }

-function prepareList(collection: unknown): [unknown[], unknown[], number, undefined[]] {
-  let keys: unknown[];
-  let values: unknown[];
+function prepareList(collection: any): [any[], any[], number, any[]] {
+  let keys: any[];
+  let values: any[];

  if (Array.isArray(collection)) {
    keys = collection;
    values = collection;
-  } else if (collection instanceof Map) {
-    keys = [...collection.keys()];
-    values = [...collection.values()];
-  } else if (collection && typeof collection === "object") {
-    if (Symbol.iterator in collection) {
-      keys = [...(<Iterable<unknown>>collection)];
-      values = keys;
-    } else {
-      values = Object.keys(collection);
-      keys = Object.values(collection);
-    }
+  } else if (collection) {
+    values = Object.keys(collection);
+    keys = Object.values(collection);
  } else {
-    throw new OwlError(`Invalid loop expression: "${collection}" is not iterable`);
+    throw new OwlError("Invalid loop expression");
  }
  const n = values.length;
  return [keys, values, n, new Array(n)];
@@ -9,13 +9,20 @@ export type Callback = () => void;
 * @returns a batched version of the original callback
 */
 export function batched(callback: Callback): Callback {
-  let scheduled = false;
-  return async (...args) => {
-    if (!scheduled) {
-      scheduled = true;
-      await Promise.resolve();
-      scheduled = false;
-      callback(...args);
+  let called = false;
+  return async () => {
+    // This await blocks all calls to the callback here, then releases them sequentially
+    // in the next microtick. This line decides the granularity of the batch.
+    await Promise.resolve();
+    if (!called) {
+      called = true;
+      // wait for all calls in this microtick to fall through before resetting "called"
+      // so that only the first call to the batched function calls the original callback.
+      // Schedule this before calling the callback so that calls to the batched function
+      // within the callback will proceed only after resetting called to false, and have
+      // a chance to execute the callback again
+      Promise.resolve().then(() => (called = false));
+      callback();
    }
  };
 }
@@ -1,2 +1,2 @@
 // do not modify manually. This file is generated by the release script.
-export const version = "2.2.3";
+export const version = "2.1.3";
@@ -15,34 +15,6 @@ exports[`app App supports env with getters/setters 1`] = `
 }"
 `;

-exports[`app app: clear scheduler tasks and destroy cancelled nodes immediately on destroy 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, []);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
-    b2 = text(\`A\`);
-    if (ctx['state'].value) {
-      b3 = comp1({}, key + \`__1\`, node, this, null);
-    }
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`app app: clear scheduler tasks and destroy cancelled nodes immediately on destroy 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(\`B\`);
-  }
-}"
-`;
-
 exports[`app can configure an app with props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -1,14 +1,6 @@
-import { App, Component, mount, onWillStart, useState, xml } from "../../src";
+import { App, Component, mount, xml } from "../../src";
 import { status } from "../../src/runtime/status";
-import {
-  makeTestFixture,
-  snapshotEverything,
-  nextTick,
-  elem,
-  useLogLifecycle,
-  makeDeferred,
-  nextMicroTick,
-} from "../helpers";
+import { makeTestFixture, snapshotEverything, nextTick, elem } from "../helpers";

 let fixture: HTMLElement;

@@ -102,44 +94,4 @@ describe("app", () => {
    expect(iframeDoc.contains(div)).toBe(false);
    expect(status(comp)).toBe("destroyed");
  });
-
-  test("app: clear scheduler tasks and destroy cancelled nodes immediately on destroy", async () => {
-    let def = makeDeferred();
-    class B extends Component {
-      static template = xml`B`;
-      setup() {
-        useLogLifecycle();
-        onWillStart(() => def);
-      }
-    }
-    class A extends Component {
-      static template = xml`A<t t-if="state.value"><B/></t>`;
-      static components = { B };
-      state = useState({ value: false });
-      setup() {
-        useLogLifecycle();
-      }
-    }
-
-    const app = new App(A);
-    const comp = await app.mount(fixture);
-    expect(["A:setup", "A:willStart", "A:willRender", "A:rendered", "A:mounted"]).toBeLogged();
-
-    comp.state.value = true;
-    await nextTick();
-    expect(["A:willRender", "B:setup", "B:willStart", "A:rendered"]).toBeLogged();
-
-    // rerender to force the instantiation of a new B component (and cancelling the first)
-    comp.render();
-    await nextMicroTick();
-    expect(["A:willRender", "B:setup", "B:willStart", "A:rendered"]).toBeLogged();
-
-    app.destroy();
-    expect([
-      "A:willUnmount",
-      "B:willDestroy",
-      "A:willDestroy",
-      "B:willDestroy", // make sure the 2 B instances have been destroyed synchronously
-    ]).toBeLogged();
-  });
 });
@@ -145,34 +145,3 @@ test("class attribute (with a preexisting value", async () => {
  patch(tree, block([""]));
  expect(fixture.innerHTML).toBe(`<div class="tomato"></div>`);
 });
-
-test("block-class attributes with preexisting class attribute", async () => {
-  const block = createBlock('<div block-attributes="0" class="owl"></div>');
-  const tree = block([{ class: "eagle" }]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe(`<div class="owl eagle"></div>`);
-
-  patch(tree, block([{ class: "falcon" }]));
-  expect(fixture.innerHTML).toBe(`<div class="owl falcon"></div>`);
-
-  patch(tree, block([{}]));
-  expect(fixture.innerHTML).toBe(`<div class="owl"></div>`);
-});
-
-test("block-class attributes (array syntax) with preexisting class attribute", async () => {
-  const block = createBlock('<div block-attributes="0" class="owl"></div>');
-  const tree = block([["class", "eagle"]]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe(`<div class="owl eagle"></div>`);
-
-  patch(tree, block([["class", "falcon"]]));
-  expect(fixture.innerHTML).toBe(`<div class="owl falcon"></div>`);
-
-  patch(tree, block([["class", ""]]));
-  expect(fixture.innerHTML).toBe(`<div class="owl"></div>`);
-
-  patch(tree, block([["class", "buzzard"]]));
-  expect(fixture.innerHTML).toBe(`<div class="owl buzzard"></div>`);
-});
@@ -707,123 +707,6 @@ exports[`attributes updating classes (with obj notation) 1`] = `
 }"
 `;

-exports[`attributes various combinations of class, t-att-class, and t-att 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div block-attributes=\\"0\\" class=\\"c\\">content</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = {class:'a'};
-    return block1([attr1]);
-  }
-}"
-`;
-
-exports[`attributes various combinations of class, t-att-class, and t-att 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div block-attributes=\\"0\\" block-attribute-1=\\"class\\" class=\\"c\\">content</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = {class:'a'};
-    let attr2 = {'b':true};
-    return block1([attr1, attr2]);
-  }
-}"
-`;
-
-exports[`attributes various combinations of class, t-att-class, and t-att 3`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div block-attributes=\\"0\\" class=\\"c\\" block-attribute-1=\\"class\\">content</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = {class:'a'};
-    let attr2 = {'b':true};
-    return block1([attr1, attr2]);
-  }
-}"
-`;
-
-exports[`attributes various combinations of class, t-att-class, and t-att 4`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div class=\\"c\\" block-attributes=\\"0\\" block-attribute-1=\\"class\\">content</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = {class:'a'};
-    let attr2 = {'b':true};
-    return block1([attr1, attr2]);
-  }
-}"
-`;
-
-exports[`attributes various combinations of class, t-att-class, and t-att 5`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div class=\\"c\\" block-attribute-0=\\"class\\" block-attributes=\\"1\\">content</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = {'b':true};
-    let attr2 = {class:'a'};
-    return block1([attr1, attr2]);
-  }
-}"
-`;
-
-exports[`attributes various combinations of class, t-att-class, and t-att 6`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div class=\\"c\\" block-attribute-0=\\"class\\">content</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = {'b':true};
-    return block1([attr1]);
-  }
-}"
-`;
-
-exports[`attributes various combinations of class, t-att-class, and t-att 7`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div class=\\"c\\" block-attribute-0=\\"class\\">content</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = ('b');
-    return block1([attr1]);
-  }
-}"
-`;
-
-exports[`attributes various combinations of class, t-att-class, and t-att 8`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div block-attributes=\\"0\\" block-attribute-1=\\"class\\">content</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = {class:'a'};
-    let attr2 = {'b':true};
-    return block1([attr1, attr2]);
-  }
-}"
-`;
-
 exports[`attributes various escapes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -1,670 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`t-for destructuring array items 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block1 = [];
-    let i1 = 0;
-    for ([ctx['key'],ctx['value']] of Object.entries({a:1,b:2})) {
-      const key1 = ctx['key'];
-      const b3 = text(\`(\`);
-      const b4 = text(ctx['key']);
-      const b5 = text(\`: \`);
-      const b6 = text(ctx['value']);
-      const b7 = text(\`)\`);
-      c_block1[i1] = withKey(multi([b3, b4, b5, b6, b7]), key1);
-      i1++;
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`t-for destructuring array items: rest 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block1 = [];
-    let i1 = 0;
-    for ([ctx['head'],...ctx['tail']] of [[1,2,3],[4,5,6]]) {
-      const key1 = ctx['head'];
-      const b3 = text(\`(\`);
-      const b4 = text(ctx['head']);
-      const b5 = text(\`;\`);
-      const b6 = text(ctx['tail']);
-      const b7 = text(\`)\`);
-      c_block1[i1] = withKey(multi([b3, b4, b5, b6, b7]), key1);
-      i1++;
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`t-for destructuring object items 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block1 = [];
-    let i1 = 0;
-    for ({k:ctx['k'],v:ctx['v']} of [{k:'a',v:1},{k:'b',v:2}]) {
-      const key1 = ctx['k'];
-      const b3 = text(\`(\`);
-      const b4 = text(ctx['k']);
-      const b5 = text(\`: \`);
-      const b6 = text(ctx['v']);
-      const b7 = text(\`)\`);
-      c_block1[i1] = withKey(multi([b3, b4, b5, b6, b7]), key1);
-      i1++;
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`t-for destructuring object items: rest 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block1 = [];
-    let i1 = 0;
-    for ({k:ctx['k'],v:ctx['v']} of [{k:'a',v:1},{k:'b',v:2}]) {
-      const key1 = ctx['k'];
-      const b3 = text(\`(\`);
-      const b4 = text(ctx['k']);
-      const b5 = text(\`: \`);
-      const b6 = text(ctx['v']);
-      const b7 = text(\`)\`);
-      c_block1[i1] = withKey(multi([b3, b4, b5, b6, b7]), key1);
-      i1++;
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`t-for does not pollute the rendering context 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['item'] of [1]) {
-      const key1 = ctx['item'];
-      c_block2[i1] = withKey(text(ctx['item']), key1);
-      i1++;
-    }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`t-for iterate on items (on a element node) 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['item'] of [1,2]) {
-      const key1 = ctx['item'];
-      let txt1 = ctx['item'];
-      c_block2[i1] = withKey(block3([txt1]), key1);
-      i1++;
-    }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`t-for iterate, Map param 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block1 = [];
-    let i1 = 0;
-    for ([ctx['key'],ctx['value']] of ctx['map']) {
-      const key1 = ctx['key'];
-      const b3 = text(\` [\`);
-      const b4 = text(ctx['key']);
-      const b5 = text(\`: \`);
-      const b6 = text(ctx['value']);
-      const b7 = text(\`] \`);
-      c_block1[i1] = withKey(multi([b3, b4, b5, b6, b7]), key1);
-      i1++;
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`t-for iterate, Set param 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block1 = [];
-    let i1 = 0;
-    for (ctx['item'] of ctx['set']) {
-      const key1 = ctx['item'];
-      c_block1[i1] = withKey(text(ctx['item']), key1);
-      i1++;
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`t-for iterate, generator param 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block1 = [];
-    let i1 = 0;
-    for (ctx['item'] of ctx['gen']()) {
-      const key1 = ctx['item'];
-      c_block1[i1] = withKey(text(ctx['item']), key1);
-      i1++;
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`t-for iterate, iterable param 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block1 = [];
-    let i1 = 0;
-    for (ctx['item'] of ctx['map'].values()) {
-      const key1 = ctx['item'];
-      c_block1[i1] = withKey(text(ctx['item']), key1);
-      i1++;
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`t-for nested destructuring 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block1 = [];
-    let i1 = 0;
-    for ([ctx['key'],{left:ctx['left'],right:ctx['right']}] of Object.entries(ctx['obj'])) {
-      const key1 = ctx['key'];
-      const b3 = text(\`(\`);
-      const b4 = text(ctx['key']);
-      const b5 = text(\`: [\`);
-      const b6 = text(ctx['left']);
-      const b7 = text(\`, \`);
-      const b8 = text(ctx['right']);
-      const b9 = text(\`])\`);
-      c_block1[i1] = withKey(multi([b3, b4, b5, b6, b7, b8, b9]), key1);
-      i1++;
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`t-for simple iteration (in a node) 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['item'] of [3,2,1]) {
-      const key1 = ctx['item'];
-      c_block2[i1] = withKey(text(ctx['item']), key1);
-      i1++;
-    }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`t-for simple iteration 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block1 = [];
-    let i1 = 0;
-    for (ctx['item'] of [3,2,1]) {
-      const key1 = ctx['item'];
-      c_block1[i1] = withKey(text(ctx['item']), key1);
-      i1++;
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`t-for simple iteration with two nodes inside 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  
-  let block3 = createBlock(\`<span>a<block-text-0/></span>\`);
-  let block4 = createBlock(\`<span>b<block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block1 = [];
-    let i1 = 0;
-    for (ctx['item'] of [3,2,1]) {
-      const key1 = ctx['item'];
-      let txt1 = ctx['item'];
-      const b3 = block3([txt1]);
-      let txt2 = ctx['item'];
-      const b4 = block4([txt2]);
-      c_block1[i1] = withKey(multi([b3, b4]), key1);
-      i1++;
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`t-for t-call with body in t-for in t-for 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, withKey } = helpers;
-  const callTemplate_1 = app.getTemplate(\`sub\`);
-  
-  let block1 = createBlock(\`<div><block-child-0/><span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span></div>\`);
-  let block6 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['a'] of ctx['numbers']) {
-      const key1 = ctx['a'];
-      ctx = Object.create(ctx);
-      const c_block4 = [];
-      let i2 = 0;
-      for (ctx['b'] of ctx['letters']) {
-        const key2 = ctx['b'];
-        ctx = Object.create(ctx);
-        ctx[isBoundary] = 1;
-        setContextValue(ctx, \\"c\\", 'x'+'_'+ctx['a']+'_'+ctx['b']);
-        c_block4[i2] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`), key2);
-        ctx = ctx.__proto__;
-        i2++;
-      }
-      ctx = ctx.__proto__;
-      const b4 = list(c_block4);
-      let txt1 = ctx['c'];
-      const b6 = block6([txt1]);
-      c_block2[i1] = withKey(multi([b4, b6]), key1);
-      i1++;
-    }
-    ctx = ctx.__proto__;
-    const b2 = list(c_block2);
-    let txt2 = ctx['a'];
-    let txt3 = ctx['b'];
-    let txt4 = ctx['c'];
-    return block1([txt2, txt3, txt4], [b2]);
-  }
-}"
-`;
-
-exports[`t-for t-call with body in t-for in t-for 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\` [\`);
-    const b3 = text(ctx['a']);
-    const b4 = text(\`] [\`);
-    const b5 = text(ctx['b']);
-    const b6 = text(\`] [\`);
-    const b7 = text(ctx['c']);
-    const b8 = text(\`] \`);
-    return multi([b2, b3, b4, b5, b6, b7, b8]);
-  }
-}"
-`;
-
-exports[`t-for t-call without body in t-for in t-for 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  const callTemplate_1 = app.getTemplate(\`sub\`);
-  
-  let block1 = createBlock(\`<div><block-child-0/><span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span></div>\`);
-  let block6 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['a'] of ctx['numbers']) {
-      const key1 = ctx['a'];
-      ctx = Object.create(ctx);
-      const c_block4 = [];
-      let i2 = 0;
-      for (ctx['b'] of ctx['letters']) {
-        const key2 = ctx['b'];
-        c_block4[i2] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`), key2);
-        i2++;
-      }
-      ctx = ctx.__proto__;
-      const b4 = list(c_block4);
-      let txt1 = ctx['c'];
-      const b6 = block6([txt1]);
-      c_block2[i1] = withKey(multi([b4, b6]), key1);
-      i1++;
-    }
-    ctx = ctx.__proto__;
-    const b2 = list(c_block2);
-    let txt2 = ctx['a'];
-    let txt3 = ctx['b'];
-    let txt4 = ctx['c'];
-    return block1([txt2, txt3, txt4], [b2]);
-  }
-}"
-`;
-
-exports[`t-for t-call without body in t-for in t-for 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1
-    setContextValue(ctx, \\"c\\", 'x'+'_'+ctx['a']+'_'+ctx['b']);
-    const b2 = text(\` [\`);
-    const b3 = text(ctx['a']);
-    const b4 = text(\`] [\`);
-    const b5 = text(ctx['b']);
-    const b6 = text(\`] [\`);
-    const b7 = text(ctx['c']);
-    const b8 = text(\`] \`);
-    return multi([b2, b3, b4, b5, b6, b7, b8]);
-  }
-}"
-`;
-
-exports[`t-for t-for in t-for 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['number'] of ctx['numbers']) {
-      const key1 = ctx['number'];
-      ctx = Object.create(ctx);
-      const c_block3 = [];
-      let i2 = 0;
-      for (ctx['letter'] of ctx['letters']) {
-        const key2 = ctx['letter'];
-        const b5 = text(\` [\`);
-        const b6 = text(ctx['number']);
-        const b7 = text(ctx['letter']);
-        const b8 = text(\`] \`);
-        c_block3[i2] = withKey(multi([b5, b6, b7, b8]), key2);
-        i2++;
-      }
-      ctx = ctx.__proto__;
-      c_block2[i1] = withKey(list(c_block3), key1);
-      i1++;
-    }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`t-for t-for in t-foreach 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, withKey } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`number\`] = v_block2[i1];
-      const key1 = ctx['number'];
-      ctx = Object.create(ctx);
-      const c_block3 = [];
-      let i2 = 0;
-      for (ctx['letter'] of ctx['letters']) {
-        const key2 = ctx['letter'];
-        const b5 = text(\` [\`);
-        const b6 = text(ctx['number']);
-        const b7 = text(ctx['letter']);
-        const b8 = text(\`] \`);
-        c_block3[i2] = withKey(multi([b5, b6, b7, b8]), key2);
-        i2++;
-      }
-      ctx = ctx.__proto__;
-      c_block2[i1] = withKey(list(c_block3), key1);
-    }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`t-for t-for with t-if inside (no external node) 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  
-  let block3 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block1 = [];
-    let i1 = 0;
-    for ({id:ctx['id'],text:ctx['text']} of ctx['elems']) {
-      const key1 = ctx['id'];
-      let b3;
-      if (ctx['id']<3) {
-        let txt1 = ctx['text'];
-        b3 = block3([txt1]);
-      }
-      c_block1[i1] = withKey(multi([b3]), key1);
-      i1++;
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`t-for t-for with t-if inside 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block4 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for ({id:ctx['id'],text:ctx['text']} of ctx['elems']) {
-      const key1 = ctx['id'];
-      let b4;
-      if (ctx['id']<3) {
-        let txt1 = ctx['text'];
-        b4 = block4([txt1]);
-      }
-      c_block2[i1] = withKey(multi([b4]), key1);
-      i1++;
-    }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`t-for t-foreach in t-for 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, withKey } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['number'] of ctx['numbers']) {
-      const key1 = ctx['number'];
-      ctx = Object.create(ctx);
-      const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['letters']);;
-      for (let i2 = 0; i2 < l_block3; i2++) {
-        ctx[\`letter\`] = v_block3[i2];
-        const key2 = ctx['letter'];
-        const b5 = text(\` [\`);
-        const b6 = text(ctx['number']);
-        const b7 = text(ctx['letter']);
-        const b8 = text(\`] \`);
-        c_block3[i2] = withKey(multi([b5, b6, b7, b8]), key2);
-      }
-      ctx = ctx.__proto__;
-      c_block2[i1] = withKey(list(c_block3), key1);
-      i1++;
-    }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`t-for t-key on t-for 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<span/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['thing'] of ctx['things']) {
-      const key1 = ctx['thing'];
-      c_block2[i1] = withKey(block3(), key1);
-      i1++;
-    }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`t-for throws error if invalid loop expression 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<span/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['item'] of ctx['abc']) {
-      const key1 = ctx['item'];
-      const tKey_1 = ctx['item'];
-      c_block2[i1] = withKey(block3(), tKey_1 + key1);
-      i1++;
-    }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
-  }
-}"
-`;
@@ -77,62 +77,6 @@ exports[`t-foreach iterate on items 1`] = `
 }"
 `;

-exports[`t-foreach iterate, Map param 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, withKey } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['value']);;
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = v_block1[i1];
-      ctx[\`item_index\`] = i1;
-      ctx[\`item_value\`] = k_block1[i1];
-      const key1 = ctx['item_index'];
-      const b3 = text(\` [\`);
-      const b4 = text(ctx['item_index']);
-      const b5 = text(\`: \`);
-      const b6 = text(ctx['item']);
-      const b7 = text(\` \`);
-      const b8 = text(ctx['item_value']);
-      const b9 = text(\`] \`);
-      c_block1[i1] = withKey(multi([b3, b4, b5, b6, b7, b8, b9]), key1);
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`t-foreach iterate, Set param 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, withKey } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['value']);;
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = v_block1[i1];
-      ctx[\`item_index\`] = i1;
-      ctx[\`item_value\`] = k_block1[i1];
-      const key1 = ctx['item_index'];
-      const b3 = text(\` [\`);
-      const b4 = text(ctx['item_index']);
-      const b5 = text(\`: \`);
-      const b6 = text(ctx['item']);
-      const b7 = text(\` \`);
-      const b8 = text(ctx['item_value']);
-      const b9 = text(\`] \`);
-      c_block1[i1] = withKey(multi([b3, b4, b5, b6, b7, b8, b9]), key1);
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
 exports[`t-foreach iterate, dict param 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -164,62 +108,6 @@ exports[`t-foreach iterate, dict param 1`] = `
 }"
 `;

-exports[`t-foreach iterate, generator param 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, withKey } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['gen']());;
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = v_block1[i1];
-      ctx[\`item_index\`] = i1;
-      ctx[\`item_value\`] = k_block1[i1];
-      const key1 = ctx['item_index'];
-      const b3 = text(\` [\`);
-      const b4 = text(ctx['item_index']);
-      const b5 = text(\`: \`);
-      const b6 = text(ctx['item']);
-      const b7 = text(\` \`);
-      const b8 = text(ctx['item_value']);
-      const b9 = text(\`] \`);
-      c_block1[i1] = withKey(multi([b3, b4, b5, b6, b7, b8, b9]), key1);
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`t-foreach iterate, iterable param 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, withKey } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['map'].values());;
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = v_block1[i1];
-      ctx[\`item_index\`] = i1;
-      ctx[\`item_value\`] = k_block1[i1];
-      const key1 = ctx['item_index'];
-      const b3 = text(\` [\`);
-      const b4 = text(ctx['item_index']);
-      const b5 = text(\`: \`);
-      const b6 = text(ctx['item']);
-      const b7 = text(\` \`);
-      const b8 = text(ctx['item_value']);
-      const b9 = text(\`] \`);
-      c_block1[i1] = withKey(multi([b3, b4, b5, b6, b7, b8, b9]), key1);
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
 exports[`t-foreach iterate, position 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -335,99 +335,6 @@ exports[`t-set t-set evaluates an expression only once 1`] = `
 }"
 `;

-exports[`t-set t-set outside modified in t-for 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, withKey } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/><p>EndLoop: <block-text-0/></p></div>\`);
-  let block3 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1
-    setContextValue(ctx, \\"iter\\", 0);
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['val'] of ['a','b']) {
-      const key1 = ctx['val'];
-      let txt1 = ctx['iter'];
-      c_block2[i1] = withKey(block3([txt1]), key1);
-      setContextValue(ctx, \\"iter\\", ctx['iter']+1);
-      i1++;
-    }
-    ctx = ctx.__proto__;
-    const b2 = list(c_block2);
-    let txt2 = ctx['iter'];
-    return block1([txt2], [b2]);
-  }
-}"
-`;
-
-exports[`t-set t-set outside modified in t-for increment-after operator 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, withKey } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/><p>EndLoop: <block-text-0/></p></div>\`);
-  let block3 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1
-    setContextValue(ctx, \\"iter\\", 0);
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['val'] of ['a','b']) {
-      const key1 = ctx['val'];
-      let txt1 = ctx['iter'];
-      c_block2[i1] = withKey(block3([txt1]), key1);
-      setContextValue(ctx, \\"iter\\", ctx['iter']++);
-      i1++;
-    }
-    ctx = ctx.__proto__;
-    const b2 = list(c_block2);
-    let txt2 = ctx['iter'];
-    return block1([txt2], [b2]);
-  }
-}"
-`;
-
-exports[`t-set t-set outside modified in t-for increment-before operator 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, withKey } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/><p>EndLoop: <block-text-0/></p></div>\`);
-  let block3 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1
-    setContextValue(ctx, \\"iter\\", 0);
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['val'] of ['a','b']) {
-      const key1 = ctx['val'];
-      let txt1 = ctx['iter'];
-      c_block2[i1] = withKey(block3([txt1]), key1);
-      setContextValue(ctx, \\"iter\\", ++ctx['iter']);
-      i1++;
-    }
-    ctx = ctx.__proto__;
-    const b2 = list(c_block2);
-    let txt2 = ctx['iter'];
-    return block1([txt2], [b2]);
-  }
-}"
-`;
-
 exports[`t-set t-set outside modified in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -547,35 +454,6 @@ exports[`t-set t-set should reuse variable if possible 1`] = `
 }"
 `;

-exports[`t-set t-set should reuse variable if possible: for..of 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, withKey } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<div><span>v<block-text-0/></span></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1
-    setContextValue(ctx, \\"v\\", 1);
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['elem'] of ctx['list']) {
-      const key1 = ctx['elem_index'];
-      let txt1 = ctx['v'];
-      setContextValue(ctx, \\"v\\", ctx['elem']);
-      c_block2[i1] = withKey(block3([txt1]), key1);
-      i1++;
-    }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
-  }
-}"
-`;
-
 exports[`t-set t-set with content and sub t-esc 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -1,79 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`translation support body of t-sets are translated 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1
-    setContextValue(ctx, \\"label\\", \`translated\`);
-    return text(ctx['label']);
-  }
-}"
-`;
-
-exports[`translation support body of t-sets inside translation=off are not translated 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1
-    setContextValue(ctx, \\"label\\", \`untranslated\`);
-    return text(ctx['label']);
-  }
-}"
-`;
-
-exports[`translation support body of t-sets with html content are translated 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
-  
-  let block1 = createBlock(\`<div>translated</div>\`);
-  
-  function value1(ctx, node, key = \\"\\") {
-    return block1();
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1
-    ctx[\`label\`] = new LazyValue(value1, ctx, this, node, key);
-    return safeOutput(ctx['label']);
-  }
-}"
-`;
-
-exports[`translation support body of t-sets with text and html content are translated 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
-  
-  let block3 = createBlock(\`<div>translated</div>\`);
-  
-  function value1(ctx, node, key = \\"\\") {
-    const b2 = text(\` translated \`);
-    const b3 = block3();
-    return multi([b2, b3]);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1
-    ctx[\`label\`] = new LazyValue(value1, ctx, this, node, key);
-    return safeOutput(ctx['label']);
-  }
-}"
-`;
-
 exports[`translation support can set and remove translatable attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -126,21 +52,6 @@ exports[`translation support some attributes are translated 1`] = `
 }"
 `;

-exports[`translation support t-set and falsy t-value: t-body are translated 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1
-    setContextValue(ctx, \\"label\\", withDefault(false, \`translated\`));
-    return text(ctx['label']);
-  }
-}"
-`;
-
 exports[`translation support translation is done on the trimmed text, with extra spaces readded after 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -371,33 +371,4 @@ describe("attributes", () => {
    // not sure about this. maybe we want to remove the attribute?
    expect(fixture.innerHTML).toBe('<div class="hoy a b"></div>');
  });
-
-  test("various combinations of class, t-att-class, and t-att", () => {
-    const template1 = `<div t-att="{ class: 'a' }" class="c">content</div>`;
-    expect(renderToString(template1)).toBe('<div class="c a">content</div>');
-
-    const template2 = `<div t-att="{ class: 'a' }" t-att-class="{'b': true}" class="c">content</div>`;
-    expect(renderToString(template2)).toBe('<div class="c a b">content</div>');
-
-    const template3 = `<div t-att="{ class: 'a' }" class="c" t-att-class="{'b': true}">content</div>`;
-    expect(renderToString(template3)).toBe('<div class="c a b">content</div>');
-
-    const template4 = `<div class="c" t-att="{ class: 'a' }" t-att-class="{'b': true}">content</div>`;
-    expect(renderToString(template4)).toBe('<div class="c a b">content</div>');
-
-    const template5 = `<div class="c" t-att-class="{'b': true}" t-att="{ class: 'a' }">content</div>`;
-    expect(renderToString(template5)).toBe('<div class="c b a">content</div>');
-
-    const template6 = `<div class="c" t-att-class="{'b': true}">content</div>`;
-    expect(renderToString(template6)).toBe('<div class="c b">content</div>');
-
-    const template7 = `<div class="c" t-attf-class="{{'b'}}">content</div>`;
-    expect(renderToString(template7)).toBe('<div class="c b">content</div>');
-
-    const template8 = `<div t-att="{ class: 'a' }" class="c" t-att-class="{'b': true}">content</div>`;
-    expect(renderToString(template8)).toBe('<div class="c a b">content</div>');
-
-    const template9 = `<div t-att="{ class: 'a' }" t-att-class="{'b': true}">content</div>`;
-    expect(renderToString(template9)).toBe('<div class="a b">content</div>');
-  });
 });
@@ -1147,24 +1147,6 @@ describe("qweb parser", () => {
    });
  });

-  test("t-onclick without dash", async () => {
-    expect(() => parse(`<button t-onclick="add">Click</button>`)).toThrowError(
-      "Unknown QWeb directive: 't-onclick'"
-    );
-  });
-
-  test("t-on without event", async () => {
-    expect(() => parse(`<button t-on="add">Click</button>`)).toThrowError(
-      "Missing event name with t-on directive"
-    );
-  });
-
-  test("t-on- without event", async () => {
-    expect(() => parse(`<button t-on-="add">Click</button>`)).toThrowError(
-      "Missing event name with t-on directive"
-    );
-  });
-
  // ---------------------------------------------------------------------------
  // t-model
  // ---------------------------------------------------------------------------
@@ -1293,12 +1275,6 @@ describe("qweb parser", () => {
    });
  });

-  test("component with event handler", async () => {
-    expect(() => parse(`<MyComponent t-onclick="someMethod"/>`)).toThrowError(
-      "unsupported directive on Component: t-onclick"
-    );
-  });
-
  test("component with t-ref", async () => {
    expect(() => parse(`<MyComponent t-ref="something"/>`)).toThrow(
      "t-ref is no longer supported on components. Consider exposing only the public part of the component's API through a callback prop."
@@ -1569,12 +1545,6 @@ describe("qweb parser", () => {
    );
  });

-  test("component with t-out", async () => {
-    expect(parse(`<MyComponent t-out="someValue"/>`)).toEqual(
-      parse(`<MyComponent><t t-out="someValue"/></MyComponent>`)
-    );
-  });
-
  test("component with t-esc and content", async () => {
    expect(() => parse(`<MyComponent t-esc="someValue">Some content</MyComponent>`)).toThrow(
      "Cannot have t-esc on a component that already has content"
@@ -1997,8 +1967,8 @@ describe("qweb parser", () => {
      baseExpr: "state",
      expr: "'stuff'",
      eventType: "click",
-      shouldNumberize: true,
-      shouldTrim: true,
+      shouldNumberize: false,
+      shouldTrim: false,
      targetAttr: "value",
      hasDynamicChildren: false,
      specialInitTargetAttr: "checked",
@@ -2028,6 +1998,7 @@ describe("qweb parser", () => {
  test("t-portal", async () => {
    expect(parse(`<t t-portal="target">Content</t>`)).toEqual({
      type: ASTType.TPortal,
+      isClosest: false,
      target: "target",
      content: { type: ASTType.Text, value: "Content" },
    });
@@ -2038,6 +2009,7 @@ describe("qweb parser", () => {
      condition: "condition",
      content: {
        content: { type: ASTType.Text, value: "Content" },
+        isClosest: false,
        target: "target",
        type: ASTType.TPortal,
      },
@@ -2046,4 +2018,13 @@ describe("qweb parser", () => {
      type: ASTType.TIf,
    });
  });
+
+  test("t-portal with .closest", async () => {
+    expect(parse(`<t t-portal.closest="target">Content</t>`)).toEqual({
+      type: ASTType.TPortal,
+      isClosest: true,
+      target: "target",
+      content: { type: ASTType.Text, value: "Content" },
+    });
+  });
 });
@@ -1,317 +0,0 @@
-import {
-  renderToBdom,
-  renderToString,
-  snapshotEverything,
-  TestContext,
-  makeTestFixture,
-} from "../helpers";
-import { mount, patch } from "../../src/runtime/blockdom";
-
-snapshotEverything();
-
-// -----------------------------------------------------------------------------
-// t-for
-// -----------------------------------------------------------------------------
-
-describe("t-for", () => {
-  test("simple iteration", () => {
-    const template = `<t t-for="item" t-of="[3, 2, 1]" t-key="item"><t t-esc="item"/></t>`;
-    expect(renderToString(template)).toBe("321");
-  });
-
-  test("simple iteration with two nodes inside", () => {
-    const template = `
-      <t t-for="item" t-of="[3, 2, 1]" t-key="item">
-        <span>a<t t-esc="item"/></span>
-        <span>b<t t-esc="item"/></span>
-      </t>`;
-    const expected =
-      "<span>a3</span><span>b3</span><span>a2</span><span>b2</span><span>a1</span><span>b1</span>";
-    expect(renderToString(template)).toBe(expected);
-  });
-
-  test("destructuring array items", () => {
-    const template = `<t t-for="[key, value]" t-of="Object.entries({ a: 1, b: 2 })" t-key="key">(<t t-esc="key"/>: <t t-esc="value"/>)</t>`;
-    expect(renderToString(template)).toBe("(a: 1)(b: 2)");
-  });
-
-  test("destructuring array items: rest", () => {
-    const template = `<t t-for="[head, ...tail]" t-of="[[1, 2, 3], [4, 5, 6]]" t-key="head">(<t t-esc="head"/>;<t t-esc="tail"/>)</t>`;
-    expect(renderToString(template)).toBe("(1;2,3)(4;5,6)");
-  });
-
-  test("destructuring object items", () => {
-    const template = `<t t-for="{ k, v }" t-of="[{ k: 'a', v: 1 }, { k: 'b', v: 2 }]" t-key="k">(<t t-esc="k"/>: <t t-esc="v"/>)</t>`;
-    expect(renderToString(template)).toBe("(a: 1)(b: 2)");
-  });
-
-  test("destructuring object items: rest", () => {
-    const template = `<t t-for="{ k, v }" t-of="[{ k: 'a', v: 1 }, { k: 'b', v: 2 }]" t-key="k">(<t t-esc="k"/>: <t t-esc="v"/>)</t>`;
-    expect(renderToString(template)).toBe("(a: 1)(b: 2)");
-  });
-
-  test("nested destructuring", () => {
-    const template = `<t t-for="[key, {left, right}]" t-of="Object.entries(obj)" t-key="key">(<t t-esc="key"/>: [<t t-esc="left"/>, <t t-esc="right"/>])</t>`;
-    expect(
-      renderToString(template, {
-        obj: {
-          a: { left: 1, right: 2 },
-          b: { left: 3, right: 4 },
-        },
-      })
-    ).toBe("(a: [1, 2])(b: [3, 4])");
-  });
-
-  test("t-key on t-for", async () => {
-    const template = `
-        <div>
-          <t t-for="thing" t-of="things" t-key="thing">
-            <span/>
-          </t>
-        </div>`;
-
-    const fixture = makeTestFixture();
-
-    const vnode1 = renderToBdom(template, { things: [1, 2] });
-    mount(vnode1, fixture);
-    let elm = fixture;
-    expect(elm.innerHTML).toBe("<div><span></span><span></span></div>");
-    const first = elm.querySelectorAll("span")[0];
-    const second = elm.querySelectorAll("span")[1];
-
-    const vnode2 = renderToBdom(template, { things: [2, 1] });
-    patch(vnode1, vnode2);
-
-    expect(elm.innerHTML).toBe("<div><span></span><span></span></div>");
-    expect(first).toBe(elm.querySelectorAll("span")[1]);
-    expect(second).toBe(elm.querySelectorAll("span")[0]);
-  });
-
-  test("simple iteration (in a node)", () => {
-    const template = `
-        <div>
-          <t t-for="item" t-of="[3, 2, 1]" t-key="item"><t t-esc="item"/></t>
-        </div>`;
-    expect(renderToString(template)).toBe("<div>321</div>");
-  });
-
-  test("iterate on items (on a element node)", () => {
-    const template = `
-        <div>
-          <span t-for="item" t-of="[1, 2]" t-key="item"><t t-esc="item"/></span>
-        </div>`;
-    const expected = `<div><span>1</span><span>2</span></div>`;
-    expect(renderToString(template)).toBe(expected);
-  });
-
-  test("iterate, Map param", () => {
-    const template = `
-      <t t-for="[key, value]" t-of="map" t-key="key">
-        [<t t-esc="key"/>: <t t-esc="value"/>]
-      </t>`;
-    const expected = ` [a: 1]  [b: 2]  [c: 3] `;
-    const context = {
-      map: new Map([
-        ["a", 1],
-        ["b", 2],
-        ["c", 3],
-      ]),
-    };
-    expect(renderToString(template, context)).toBe(expected);
-  });
-
-  test("iterate, Set param", () => {
-    const template = `
-      <t t-for="item" t-of="set" t-key="item">
-        <t t-esc="item"/>
-      </t>`;
-    const expected = `123`;
-    const context = { set: new Set([1, 2, 3]) };
-    expect(renderToString(template, context)).toBe(expected);
-  });
-
-  test("iterate, iterable param", () => {
-    const template = `
-      <t t-for="item" t-of="map.values()" t-key="item">
-        <t t-esc="item"/>
-      </t>`;
-    const expected = `123`;
-    const context = {
-      map: new Map([
-        ["a", 1],
-        ["b", 2],
-        ["c", 3],
-      ]),
-    };
-    expect(renderToString(template, context)).toBe(expected);
-  });
-
-  test("iterate, generator param", () => {
-    const template = `
-      <t t-for="item" t-of="gen()" t-key="item">
-        <t t-esc="item"/>
-      </t>`;
-    const expected = `123`;
-    const context = {
-      *gen() {
-        yield 1;
-        yield 2;
-        yield 3;
-      },
-    };
-    expect(renderToString(template, context)).toBe(expected);
-  });
-
-  test("does not pollute the rendering context", () => {
-    const template = `
-        <div>
-          <t t-for="item" t-of="[1]" t-key="item"><t t-esc="item"/></t>
-        </div>`;
-    const context = { __owl__: {} };
-    renderToString(template, context);
-    expect(Object.keys(context)).toEqual(["__owl__"]);
-  });
-
-  test("t-for in t-for", () => {
-    const template = `
-        <div>
-          <t t-for="number" t-of="numbers" t-key="number">
-            <t t-for="letter" t-of="letters" t-key="letter">
-              [<t t-esc="number"/><t t-esc="letter"/>]
-            </t>
-          </t>
-        </div>`;
-
-    const context = { numbers: [1, 2, 3], letters: ["a", "b"] };
-    const expected = "<div> [1a]  [1b]  [2a]  [2b]  [3a]  [3b] </div>";
-    expect(renderToString(template, context)).toBe(expected);
-  });
-
-  test("t-for in t-foreach", () => {
-    const template = `
-        <div>
-          <t t-foreach="numbers" t-as="number" t-key="number">
-            <t t-for="letter" t-of="letters" t-key="letter">
-              [<t t-esc="number"/><t t-esc="letter"/>]
-            </t>
-          </t>
-        </div>`;
-
-    const context = { numbers: [1, 2, 3], letters: ["a", "b"] };
-    const expected = "<div> [1a]  [1b]  [2a]  [2b]  [3a]  [3b] </div>";
-    expect(renderToString(template, context)).toBe(expected);
-  });
-
-  test("t-foreach in t-for", () => {
-    const template = `
-        <div>
-          <t t-for="number" t-of="numbers" t-key="number">
-            <t t-foreach="letters" t-as="letter" t-key="letter">
-              [<t t-esc="number"/><t t-esc="letter"/>]
-            </t>
-          </t>
-        </div>`;
-
-    const context = { numbers: [1, 2, 3], letters: ["a", "b"] };
-    const expected = "<div> [1a]  [1b]  [2a]  [2b]  [3a]  [3b] </div>";
-    expect(renderToString(template, context)).toBe(expected);
-  });
-
-  test("t-call without body in t-for in t-for", () => {
-    const context = new TestContext();
-    const sub = `
-        <t>
-          <t t-set="c" t-value="'x' + '_' + a + '_'+ b" />
-          [<t t-esc="a" />]
-          [<t t-esc="b" />]
-          [<t t-esc="c" />]
-        </t>`;
-
-    const main = `
-        <div>
-          <t t-for="a" t-of="numbers" t-key="a">
-            <t t-for="b" t-of="letters" t-key="b">
-              <t t-call="sub" />
-            </t>
-            <span t-esc="c"/>
-          </t>
-          <span>[<t t-esc="a" />][<t t-esc="b" />][<t t-esc="c" />]</span>
-        </div>`;
-
-    context.addTemplate("sub", sub);
-    context.addTemplate("main", main);
-
-    const ctx = { numbers: [1, 2, 3], letters: ["a", "b"] };
-    const expected =
-      "<div> [1] [a] [x_1_a]  [1] [b] [x_1_b] <span></span> [2] [a] [x_2_a]  [2] [b] [x_2_b] <span></span> [3] [a] [x_3_a]  [3] [b] [x_3_b] <span></span><span>[][][]</span></div>";
-    expect(context.renderToString("main", ctx)).toBe(expected);
-  });
-
-  test("t-call with body in t-for in t-for", () => {
-    const context = new TestContext();
-    const sub = `
-        <t>
-          [<t t-esc="a" />]
-          [<t t-esc="b" />]
-          [<t t-esc="c" />]
-        </t>`;
-
-    const main = `
-        <div>
-          <t t-for="a" t-of="numbers" t-key="a">
-            <t t-for="b" t-of="letters" t-key="b">
-              <t t-call="sub" >
-                <t t-set="c" t-value="'x' + '_' + a + '_'+ b" />
-              </t>
-            </t>
-            <span t-esc="c"/>
-          </t>
-          <span>[<t t-esc="a" />][<t t-esc="b" />][<t t-esc="c" />]</span>
-        </div>`;
-
-    context.addTemplate("sub", sub);
-    context.addTemplate("main", main);
-
-    const ctx = { numbers: [1, 2, 3], letters: ["a", "b"] };
-    const expected =
-      "<div> [1] [a] [x_1_a]  [1] [b] [x_1_b] <span></span> [2] [a] [x_2_a]  [2] [b] [x_2_b] <span></span> [3] [a] [x_3_a]  [3] [b] [x_3_b] <span></span><span>[][][]</span></div>";
-    expect(context.renderToString("main", ctx)).toBe(expected);
-  });
-
-  test("throws error if invalid loop expression", () => {
-    const test = `<div><t t-for="item" t-of="abc" t-key="item"><span t-key="item"/></t></div>`;
-    expect(() => renderToString(test)).toThrow("ctx.abc is not iterable");
-  });
-
-  test("t-for with t-if inside", () => {
-    const template = `
-        <div>
-          <t t-for="{ id, text }" t-of="elems" t-key="id">
-            <span t-if="id lt 3"><t t-esc="text"/></span>
-          </t>
-        </div>`;
-    const ctx = {
-      elems: [
-        { id: 1, text: "a" },
-        { id: 2, text: "b" },
-        { id: 3, text: "c" },
-      ],
-    };
-    expect(renderToString(template, ctx)).toBe("<div><span>a</span><span>b</span></div>");
-  });
-
-  test("t-for with t-if inside (no external node)", () => {
-    const template = `
-          <t t-for="{ id, text }" t-of="elems" t-key="id">
-            <span t-if="id lt 3"><t t-esc="text"/></span>
-          </t>`;
-    const ctx = {
-      elems: [
-        { id: 1, text: "a" },
-        { id: 2, text: "b" },
-        { id: 3, text: "c" },
-      ],
-    };
-    expect(renderToString(template, ctx)).toBe("<span>a</span><span>b</span>");
-  });
-});
@@ -105,64 +105,6 @@ describe("t-foreach", () => {
    expect(renderToString(template, context)).toBe(expected);
  });

-  test("iterate, Map param", () => {
-    const template = `
-      <t t-foreach="value" t-as="item" t-key="item_index">
-        [<t t-esc="item_index"/>: <t t-esc="item"/> <t t-esc="item_value"/>]
-      </t>`;
-    const expected = ` [0: 1 a]  [1: 2 b]  [2: 3 c] `;
-    const context = {
-      value: new Map([
-        ["a", 1],
-        ["b", 2],
-        ["c", 3],
-      ]),
-    };
-    expect(renderToString(template, context)).toBe(expected);
-  });
-
-  test("iterate, Set param", () => {
-    const template = `
-      <t t-foreach="value" t-as="item" t-key="item_index">
-        [<t t-esc="item_index"/>: <t t-esc="item"/> <t t-esc="item_value"/>]
-      </t>`;
-    const expected = ` [0: 1 1]  [1: 2 2]  [2: 3 3] `;
-    const context = { value: new Set([1, 2, 3]) };
-    expect(renderToString(template, context)).toBe(expected);
-  });
-
-  test("iterate, iterable param", () => {
-    const template = `
-      <t t-foreach="map.values()" t-as="item" t-key="item_index">
-        [<t t-esc="item_index"/>: <t t-esc="item"/> <t t-esc="item_value"/>]
-      </t>`;
-    const expected = ` [0: 1 1]  [1: 2 2]  [2: 3 3] `;
-    const context = {
-      map: new Map([
-        ["a", 1],
-        ["b", 2],
-        ["c", 3],
-      ]),
-    };
-    expect(renderToString(template, context)).toBe(expected);
-  });
-
-  test("iterate, generator param", () => {
-    const template = `
-      <t t-foreach="gen()" t-as="item" t-key="item_index">
-        [<t t-esc="item_index"/>: <t t-esc="item"/> <t t-esc="item_value"/>]
-      </t>`;
-    const expected = ` [0: 1 1]  [1: 2 2]  [2: 3 3] `;
-    const context = {
-      *gen() {
-        yield 1;
-        yield 2;
-        yield 3;
-      },
-    };
-    expect(renderToString(template, context)).toBe(expected);
-  });
-
  test("does not pollute the rendering context", () => {
    const template = `
        <div>
@@ -251,9 +193,7 @@ describe("t-foreach", () => {

  test("throws error if invalid loop expression", () => {
    const test = `<div><t t-foreach="abc" t-as="item" t-key="item"><span t-key="item_index"/></t></div>`;
-    expect(() => renderToString(test)).toThrow(
-      'Invalid loop expression: "undefined" is not iterable'
-    );
+    expect(() => renderToString(test)).toThrow("Invalid loop expression");
  });

  test("t-foreach with t-if inside", () => {
@@ -122,19 +122,6 @@ describe("t-set", () => {
    expect(renderToString(template, { list: ["a", "b"] })).toBe(expected);
  });

-  test("t-set should reuse variable if possible: for..of", () => {
-    const template = `
-        <div>
-          <t t-set="v" t-value="1"/>
-          <div t-for="elem" t-of="list" t-key="elem_index">
-              <span>v<t t-esc="v"/></span>
-              <t t-set="v" t-value="elem"/>
-          </div>
-        </div>`;
-    const expected = "<div><div><span>v1</span></div><div><span>va</span></div></div>";
-    expect(renderToString(template, { list: ["a", "b"] })).toBe(expected);
-  });
-
  test("t-set with content and sub t-esc", () => {
    const template = `
        <div>
@@ -245,22 +232,6 @@ describe("t-set", () => {
    );
  });

-  test("t-set outside modified in t-for", async () => {
-    const template = `
-      <div>
-        <t t-set="iter" t-value="0"/>
-        <t t-for="val" t-of="['a','b']" t-key="val">
-          <p>InLoop: <t t-esc="iter"/></p>
-          <t t-set="iter" t-value="iter + 1"/>
-        </t>
-        <p>EndLoop: <t t-esc="iter"/></p>
-      </div>
-    `;
-    expect(renderToString(template)).toBe(
-      "<div><p>InLoop: 0</p><p>InLoop: 1</p><p>EndLoop: 2</p></div>"
-    );
-  });
-
  test("t-set outside modified in t-foreach increment-after operator", async () => {
    const template = `
      <div>
@@ -277,22 +248,6 @@ describe("t-set", () => {
    );
  });

-  test("t-set outside modified in t-for increment-after operator", async () => {
-    const template = `
-      <div>
-        <t t-set="iter" t-value="0"/>
-        <t t-for="val" t-of="['a','b']" t-key="val">
-          <p>InLoop: <t t-esc="iter"/></p>
-          <t t-set="iter" t-value="iter++"/>
-        </t>
-        <p>EndLoop: <t t-esc="iter"/></p>
-      </div>
-    `;
-    expect(renderToString(template)).toBe(
-      "<div><p>InLoop: 0</p><p>InLoop: 0</p><p>EndLoop: 0</p></div>"
-    );
-  });
-
  test("t-set outside modified in t-foreach increment-before operator", async () => {
    const template = `
      <div>
@@ -309,22 +264,6 @@ describe("t-set", () => {
    );
  });

-  test("t-set outside modified in t-for increment-before operator", async () => {
-    const template = `
-      <div>
-        <t t-set="iter" t-value="0"/>
-        <t t-for="val" t-of="['a','b']" t-key="val">
-          <p>InLoop: <t t-esc="iter"/></p>
-          <t t-set="iter" t-value="++iter"/>
-        </t>
-        <p>EndLoop: <t t-esc="iter"/></p>
-      </div>
-    `;
-    expect(renderToString(template)).toBe(
-      "<div><p>InLoop: 0</p><p>InLoop: 1</p><p>EndLoop: 0</p></div>"
-    );
-  });
-
  test("t-set can't alter from within callee", async () => {
    const context = new TestContext();
    const sub = `<div><t t-esc="iter"/><t t-set="iter" t-value="'called'"/><t t-esc="iter"/></div>`;
@@ -100,74 +100,4 @@ describe("translation support", () => {
    expect(translateFn).toHaveBeenCalledWith("some  word");
    expect(fixture.innerHTML).toBe("<div>un mot</div>");
  });
-
-  test("body of t-sets are translated", async () => {
-    class SomeComponent extends Component {
-      static template = xml`
-        <t t-set="label">untranslated</t>
-        <t t-esc="label"/>`;
-    }
-
-    const translateFn = () => "translated";
-
-    await mount(SomeComponent, fixture, { translateFn });
-    expect(fixture.innerHTML).toBe("translated");
-  });
-
-  test("body of t-sets inside translation=off are not translated", async () => {
-    class SomeComponent extends Component {
-      static template = xml`
-        <t t-translation="off">
-          <t t-set="label">untranslated</t>
-          <t t-esc="label"/>
-        </t>`;
-    }
-
-    const translateFn = () => "translated";
-
-    await mount(SomeComponent, fixture, { translateFn });
-    expect(fixture.innerHTML).toBe("untranslated");
-  });
-
-  test("body of t-sets with html content are translated", async () => {
-    class SomeComponent extends Component {
-      static template = xml`
-        <t t-set="label"><div>untranslated</div></t>
-        <t t-out="label"/>`;
-    }
-
-    const translateFn = () => "translated";
-
-    await mount(SomeComponent, fixture, { translateFn });
-    expect(fixture.innerHTML).toBe("<div>translated</div>");
-  });
-
-  test("body of t-sets with text and html content are translated", async () => {
-    class SomeComponent extends Component {
-      static template = xml`
-        <t t-set="label">
-          some text
-          <div>untranslated</div>
-        </t>
-        <t t-out="label"/>`;
-    }
-
-    const translateFn = () => "translated";
-
-    await mount(SomeComponent, fixture, { translateFn });
-    expect(fixture.innerHTML).toBe(" translated <div>translated</div>");
-  });
-
-  test("t-set and falsy t-value: t-body are translated", async () => {
-    class SomeComponent extends Component {
-      static template = xml`
-          <t t-set="label" t-value="false">untranslated</t>
-          <t t-esc="label"/>`;
-    }
-
-    const translateFn = () => "translated";
-
-    await mount(SomeComponent, fixture, { translateFn });
-    expect(fixture.innerHTML).toBe("translated");
-  });
 });
@@ -37,22 +37,4 @@ describe("basic validation", () => {
    const template = `<div t-best-beer="rochefort 10">test</div>`;
    expect(() => renderToString(template)).toThrow("Unknown QWeb directive: 't-best-beer'");
  });
-
-  test("compilation error", () => {
-    const template = `<div t-att-class="a b">test</div>`;
-    expect(() => renderToString(template))
-      .toThrow(`Failed to compile anonymous template: Unexpected identifier
-
-generated code:
-function(app, bdom, helpers) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div block-attribute-0="class">test</div>\`);
-  
-  return function template(ctx, node, key = "") {
-    let attr1 = ctx['a']ctx['b'];
-    return block1([attr1]);
-  }
-}`);
-  });
 });
@@ -212,73 +212,6 @@ exports[`changing state before first render does not trigger a render 1`] = `
 }"
 `;

-exports[`component destroyed just after render 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, []);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, this, null);
-  }
-}"
-`;
-
-exports[`component destroyed just after render 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`B\`);
-    const b3 = text(ctx['state'].value);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`components are not destroyed between animation frame 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, []);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
-    b2 = text(\`A\`);
-    if (ctx['state'].flag) {
-      b3 = comp1({}, key + \`__1\`, node, this, null);
-    }
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`components are not destroyed between animation frame 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`C\`, true, false, false, []);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`B\`);
-    const b3 = comp1({}, key + \`__1\`, node, this, null);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`components are not destroyed between animation frame 3`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(\`C\`);
-  }
-}"
-`;
-
 exports[`concurrent renderings scenario 1 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -12,18 +12,6 @@ exports[`basics display a nice error if a component is not a component 1`] = `
 }"
 `;

-exports[`basics display a nice error if a non-root component template fails to compile 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, this, null);
-  }
-}"
-`;
-
 exports[`basics display a nice error if it cannot find component (in dev mode) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -1,493 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`list of components components in a node in a t-for  1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"item\\"]);
-  
-  let block1 = createBlock(\`<div><ul><block-child-0/></ul></div>\`);
-  let block3 = createBlock(\`<li><block-child-0/></li>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['item'] of ctx['items']) {
-      const key1 = 'li_'+ctx['item'];
-      const b4 = comp1({item: ctx['item']}, key + \`__1__\${key1}\`, node, this, null);
-      c_block2[i1] = withKey(block3([], [b4]), key1);
-      i1++;
-    }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`list of components components in a node in a t-for  2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['props'].item;
-    return block1([txt1]);
-  }
-}"
-`;
-
-exports[`list of components crash on duplicate key in dev mode 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { OwlError, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const keys1 = new Set();
-    const c_block1 = [];
-    let i1 = 0;
-    for (ctx['item'] of [1,2]) {
-      const key1 = 'child';
-      if (keys1.has(String(key1))) { throw new OwlError(\`Got duplicate key in t-for: \${key1}\`)}
-      keys1.add(String(key1));
-      const props1 = {};
-      helpers.validateProps(\`Child\`, props1, this);
-      c_block1[i1] = withKey(comp1(props1, key + \`__1__\${key1}\`, node, this, null), key1);
-      i1++;
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`list of components crash on duplicate key in dev mode 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(\`\`);
-  }
-}"
-`;
-
-exports[`list of components crash when using object as keys that serialize to the same string 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { OwlError, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const keys1 = new Set();
-    const c_block1 = [];
-    let i1 = 0;
-    for (ctx['item'] of [{},{}]) {
-      const key1 = ctx['item'];
-      if (keys1.has(String(key1))) { throw new OwlError(\`Got duplicate key in t-for: \${key1}\`)}
-      keys1.add(String(key1));
-      const props1 = {};
-      helpers.validateProps(\`Child\`, props1, this);
-      c_block1[i1] = withKey(comp1(props1, key + \`__1__\${key1}\`, node, this, null), key1);
-      i1++;
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`list of components crash when using object as keys that serialize to the same string 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(\`\`);
-  }
-}"
-`;
-
-exports[`list of components list of sub components inside other nodes 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  const comp1 = app.createComponent(\`SubComponent\`, true, false, false, []);
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['blip'] of ctx['state'].blips) {
-      const key1 = ctx['blip'].id;
-      const b4 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
-      c_block2[i1] = withKey(block3([], [b4]), key1);
-      i1++;
-    }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`list of components list of sub components inside other nodes 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<span>asdf</span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`list of components order is correct when slots are not of same type 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
-  
-  let block2 = createBlock(\`<div>A</div>\`);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    let b2;
-    if (!ctx['state'].active) {
-      b2 = block2();
-    }
-    return multi([b2]);
-  }
-  
-  function slot2(ctx, node, key = \\"\\") {
-    return text(\`B\`);
-  }
-  
-  function slot3(ctx, node, key = \\"\\") {
-    return text(\`C\`);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'a': {__render: slot1.bind(this), __ctx: ctx1, active: !ctx['state'].active}, 'b': {__render: slot2.bind(this), __ctx: ctx1, active: true}, 'c': {__render: slot3.bind(this), __ctx: ctx1, active: ctx['state'].active}})}, key + \`__1\`, node, this, null);
-  }
-}"
-`;
-
-exports[`list of components order is correct when slots are not of same type 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { callSlot, withKey } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block1 = [];
-    let i1 = 0;
-    for (ctx['slotName'] of ctx['slotNames']) {
-      const key1 = ctx['slotName'];
-      const slot1 = (ctx['slotName']);
-      c_block1[i1] = withKey(toggler(slot1, callSlot(ctx, node, key1 + \`__1__\${key1}\`, slot1, true, {})), key1);
-      i1++;
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`list of components reconciliation alg works for t-for in t-for 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"blip\\"]);
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['section'] of ctx['state'].s) {
-      const key1 = ctx['section'];
-      ctx = Object.create(ctx);
-      const c_block3 = [];
-      let i2 = 0;
-      for (ctx['blip'] of ctx['section'].blips) {
-        const key2 = ctx['blip'];
-        c_block3[i2] = withKey(comp1({blip: ctx['blip']}, key + \`__1__\${key1}__\${key2}\`, node, this, null), key2);
-        i2++;
-      }
-      ctx = ctx.__proto__;
-      c_block2[i1] = withKey(list(c_block3), key1);
-      i1++;
-    }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`list of components reconciliation alg works for t-for in t-for 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['props'].blip;
-    return block1([txt1]);
-  }
-}"
-`;
-
-exports[`list of components reconciliation alg works for t-for in t-for, 2 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"row\\",\\"col\\"]);
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<p><block-child-0/></p>\`);
-  let block5 = createBlock(\`<p><block-child-0/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['row'] of ctx['state'].rows) {
-      const key1 = ctx['row'];
-      ctx = Object.create(ctx);
-      const c_block4 = [];
-      let i2 = 0;
-      for (ctx['col'] of ctx['state'].cols) {
-        const key2 = ctx['col'];
-        const b6 = comp1({row: ctx['row'],col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, this, null);
-        c_block4[i2] = withKey(block5([], [b6]), key2);
-        i2++;
-      }
-      ctx = ctx.__proto__;
-      const b4 = list(c_block4);
-      c_block2[i1] = withKey(block3([], [b4]), key1);
-      i1++;
-    }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`list of components reconciliation alg works for t-for in t-for, 2 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['props'].row+'_'+ctx['props'].col;
-    return block1([txt1]);
-  }
-}"
-`;
-
-exports[`list of components simple list 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block1 = [];
-    let i1 = 0;
-    for (ctx['elem'] of ctx['state'].elems) {
-      const key1 = ctx['elem'].id;
-      c_block1[i1] = withKey(comp1({value: ctx['elem'].value}, key + \`__1__\${key1}\`, node, this, null), key1);
-      i1++;
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`list of components simple list 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['props'].value;
-    return block1([txt1]);
-  }
-}"
-`;
-
-exports[`list of components sub components rendered in a loop 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"n\\"]);
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['number'] of ctx['state'].numbers) {
-      const key1 = ctx['number'];
-      c_block2[i1] = withKey(comp1({n: ctx['number']}, key + \`__1__\${key1}\`, node, this, null), key1);
-      i1++;
-    }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`list of components sub components rendered in a loop 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<p><block-text-0/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['props'].n;
-    return block1([txt1]);
-  }
-}"
-`;
-
-exports[`list of components sub components with some state rendered in a loop 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['number'] of ctx['state'].numbers) {
-      const key1 = ctx['number'];
-      c_block2[i1] = withKey(comp1({}, key + \`__1__\${key1}\`, node, this, null), key1);
-      i1++;
-    }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`list of components sub components with some state rendered in a loop 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<p><block-text-0/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['state'].n;
-    return block1([txt1]);
-  }
-}"
-`;
-
-exports[`list of components switch component position 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
-  
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['c'] of ctx['clist']) {
-      const key1 = ctx['c'];
-      c_block2[i1] = withKey(comp1({key: ctx['c']}, key + \`__1__\${key1}\`, node, this, null), key1);
-      i1++;
-    }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`list of components switch component position 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['props'].key;
-    return block1([txt1]);
-  }
-}"
-`;
-
-exports[`list of components t-for with t-component, and update 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const c_block2 = [];
-    let i1 = 0;
-    for (ctx['n'] of [0,1]) {
-      const key1 = ctx['n'];
-      c_block2[i1] = withKey(comp1({val: ctx['n']}, key + \`__1__\${key1}\`, node, this, null), key1);
-      i1++;
-    }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`list of components t-for with t-component, and update 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['state'].val;
-    let txt2 = ctx['props'].val;
-    return block1([txt1, txt2]);
-  }
-}"
-`;
@@ -468,36 +468,6 @@ exports[`t-model directive t-model on select with static options 1`] = `
 }"
 `;

-exports[`t-model directive t-model with dynamic number values on select options in foreach 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { toNumber, prepareList, withKey } = helpers;
-  
-  let block1 = createBlock(\`<select block-handler-0=\\"change\\"><block-child-0/></select>\`);
-  let block3 = createBlock(\`<option block-attribute-0=\\"value\\" block-attribute-1=\\"selected\\"><block-text-2/></option>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const bExpr1 = ctx['state'];
-    const expr1 = 'value';
-    const bValue1 = bExpr1[expr1];
-    let hdlr1 = [(ev) => { bExpr1[expr1] = toNumber(ev.target.value); }];
-    ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].options);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`o\`] = v_block2[i1];
-      const key1 = ctx['o'].value;
-      let attr1 = ctx['o'].value;
-      let attr2 = bValue1 === ctx['o'].value;
-      let txt1 = ctx['o'].value;
-      c_block2[i1] = withKey(block3([attr1, attr2, txt1]), key1);
-    }
-    const b2 = list(c_block2);
-    return block1([hdlr1], [b2]);
-  }
-}"
-`;
-
 exports[`t-model directive t-model with dynamic values on select options -- 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -115,7 +115,13 @@ test("destroying/recreating a subwidget with different props (if start is not ov
  await nextMicroTick();
  expect(n).toBe(2);

-  expect(["W:willRender", "Child:setup", "Child:willStart", "W:rendered"]).toBeLogged();
+  expect([
+    "Child:willDestroy",
+    "W:willRender",
+    "Child:setup",
+    "Child:willStart",
+    "W:rendered",
+  ]).toBeLogged();

  def.resolve();
  await nextTick();
@@ -124,7 +130,6 @@ test("destroying/recreating a subwidget with different props (if start is not ov
  expect([
    "Child:willRender",
    "Child:rendered",
-    "Child:willDestroy",
    "W:willPatch",
    "Child:mounted",
    "W:patched",
@@ -173,13 +178,13 @@ test("destroying/recreating a subcomponent, other scenario", async () => {
    "Child:setup",
    "Child:willStart",
    "Parent:rendered",
+    "Child:willDestroy",
    "Parent:willRender",
    "Child:setup",
    "Child:willStart",
    "Parent:rendered",
    "Child:willRender",
    "Child:rendered",
-    "Child:willDestroy",
    "Parent:willPatch",
    "Child:mounted",
    "Parent:patched",
@@ -246,13 +251,13 @@ test("creating two async components, scenario 1", async () => {
  await nextTick();
  expect(fixture.innerHTML).toBe("");
  expect([
+    "ChildA:willDestroy",
    "Parent:willRender",
    "ChildA:setup",
    "ChildA:willStart",
    "ChildB:setup",
    "ChildB:willStart",
    "Parent:rendered",
-    "ChildA:willDestroy",
  ]).toBeLogged();

  defB.resolve();
@@ -698,13 +703,13 @@ test("rendering component again in next microtick", async () => {
    "Child:setup",
    "Child:willStart",
    "Parent:rendered",
+    "Child:willDestroy",
    "Parent:willRender",
    "Child:setup",
    "Child:willStart",
    "Parent:rendered",
    "Child:willRender",
    "Child:rendered",
-    "Child:willDestroy",
    "Parent:willPatch",
    "Child:mounted",
    "Parent:patched",
@@ -1727,9 +1732,9 @@ test("concurrent renderings scenario 10", async () => {
  expect(fixture.innerHTML).toBe("<div><p></p></div>");
  expect([
    "ComponentA:willRender",
+    "ComponentC:willDestroy",
    "ComponentB:willUpdateProps",
    "ComponentA:rendered",
-    "ComponentC:willDestroy",
  ]).toBeLogged();

  defB.resolve();
@@ -2277,6 +2282,7 @@ test("concurrent renderings scenario 16", async () => {
    "D:setup",
    "D:willStart",
    "C:rendered",
+    "D:willDestroy",
    "B:willRender",
    "C:willUpdateProps",
    "B:rendered",
@@ -2284,7 +2290,6 @@ test("concurrent renderings scenario 16", async () => {
    "D:setup",
    "D:willStart",
    "C:rendered",
-    "D:willDestroy",
  ]).toBeLogged();

  // at this point, C rendering is still pending, and nothing should have been
@@ -2992,11 +2997,11 @@ test("t-key on dom node having a component", async () => {

  expect(fixture.innerHTML).toBe("<div>3</div>");
  expect([
+    "Child (2):willDestroy",
    "Child (3):setup",
    "Child (3):willStart",
    "Child (3):willRender",
    "Child (3):rendered",
-    "Child (2):willDestroy",
    "Child (1):willUnmount",
    "Child (1):willDestroy",
    "Child (3):mounted",
@@ -3050,11 +3055,11 @@ test("t-key on dynamic async component (toggler is never patched)", async () =>

  expect(fixture.innerHTML).toBe("<div>3</div>");
  expect([
+    "Child (2):willDestroy",
    "Child (3):setup",
    "Child (3):willStart",
    "Child (3):willRender",
    "Child (3):rendered",
-    "Child (2):willDestroy",
    "Child (1):willUnmount",
    "Child (1):willDestroy",
    "Child (3):mounted",
@@ -3109,11 +3114,11 @@ test("t-foreach with dynamic async component", async () => {

  expect(fixture.innerHTML).toBe("<div>3</div>");
  expect([
+    "Child (2):willDestroy",
    "Child (3):setup",
    "Child (3):willStart",
    "Child (3):willRender",
    "Child (3):rendered",
-    "Child (2):willDestroy",
    "Child (1):willUnmount",
    "Child (1):willDestroy",
    "Child (3):mounted",
@@ -3796,7 +3801,7 @@ test("destroyed component causes other soon to be destroyed component to rerende
    static template = xml`<t t-esc="state.val + props.value"/>`;
    state = useState({ val: 0 });
    setup() {
-      c = c || this;
+      c = this;
      useLogLifecycle();
    }
  }
@@ -3841,6 +3846,8 @@ test("destroyed component causes other soon to be destroyed component to rerende
  parent.state.valueB = 2;
  await nextTick();
  expect([
+    "B:willDestroy",
+    "C:willDestroy",
    "A:willRender",
    "B:setup",
    "B:willStart",
@@ -3851,8 +3858,6 @@ test("destroyed component causes other soon to be destroyed component to rerende
    "B:rendered",
    "C:willRender",
    "C:rendered",
-    "B:willDestroy",
-    "C:willDestroy",
    "A:willPatch",
    "C:mounted",
    "B:mounted",
@@ -4195,116 +4200,6 @@ test("delayed render is not cancelled by upcoming render", async () => {
  ]).toBeLogged();
 });

-test("components are not destroyed between animation frame", async () => {
-  const def = makeDeferred();
-  class C extends Component {
-    static template = xml`C`;
-    setup() {
-      useLogLifecycle();
-    }
-  }
-  class B extends Component {
-    static template = xml`B<C/>`;
-    static components = { C };
-    setup() {
-      useLogLifecycle();
-      onWillStart(() => {
-        return def;
-      });
-    }
-  }
-  class A extends Component {
-    static template = xml`A<B t-if="state.flag"/>`;
-    static components = { B };
-
-    state = useState({ flag: false });
-    setup() {
-      useLogLifecycle();
-    }
-  }
-  const a = await mount(A, fixture);
-  expect(fixture.innerHTML).toBe("A");
-  expect(["A:setup", "A:willStart", "A:willRender", "A:rendered", "A:mounted"]).toBeLogged();
-
-  // turn the flag on, this will render A and stops at B because of def
-  a.state.flag = true;
-  await nextTick();
-  expect(["A:willRender", "B:setup", "B:willStart", "A:rendered"]).toBeLogged();
-
-  // force a render of A
-  //  => owl will need to create a new B component
-  //  => initial B component will be cancelled
-  a.render();
-  await nextMicroTick();
-  expect([
-    // note that B is not destroyed here. It is cancelled instead
-    "A:willRender",
-    "B:setup",
-    "B:willStart",
-    "A:rendered",
-  ]).toBeLogged();
-
-  // resolve def, so B render is unblocked
-  def.resolve();
-  await nextTick();
-  expect([
-    "B:willRender",
-    "C:setup",
-    "C:willStart",
-    "B:rendered",
-    "C:willRender",
-    "C:rendered",
-    // animation frame callback starts here
-    "B:willDestroy", // B is destroyed here
-    "A:willPatch",
-    "C:mounted",
-    "B:mounted",
-    "A:patched",
-  ]).toBeLogged();
-});
-
-test("component destroyed just after render", async () => {
-  let stateB: any;
-
-  class B extends Component {
-    static template = xml`B<t t-esc="state.value"/>`;
-    state = useState({ value: 1 });
-    setup() {
-      stateB = this.state;
-      useLogLifecycle();
-    }
-  }
-  class A extends Component {
-    static template = xml`<B/>`;
-    static components = { B };
-    setup() {
-      useLogLifecycle();
-    }
-  }
-  const a = await mount(A, fixture);
-  expect(fixture.innerHTML).toBe("B1");
-  expect([
-    "A:setup",
-    "A:willStart",
-    "A:willRender",
-    "B:setup",
-    "B:willStart",
-    "A:rendered",
-    "B:willRender",
-    "B:rendered",
-    "B:mounted",
-    "A:mounted",
-  ]).toBeLogged();
-
-  stateB!.value++; // force a render of B
-  await nextMicroTick(); // wait for B render to actually start
-  a.__owl__.app.destroy();
-  expect(["A:willUnmount", "B:willUnmount", "B:willDestroy", "A:willDestroy"]).toBeLogged();
-  await nextTick();
-  // check that B was not rendered after being destroyed
-  expect([]).toBeLogged();
-});
-
 //   test.skip("components with shouldUpdate=false", async () => {
 //     const state = { p: 1, cc: 10 };

@@ -143,66 +143,6 @@ describe("basics", () => {
    );
  });

-  test("display a nice error if the root component template fails to compile", async () => {
-    // This is a special case: mount throws synchronously and we don't have any
-    // node which can handle the error, hence the different structure of this test
-    class Comp extends Component {
-      static template = xml`<div t-att-class="a b">test</div>`;
-    }
-    const app = new App(Comp);
-    let error: Error;
-    try {
-      await app.mount(fixture);
-    } catch (e) {
-      error = e as Error;
-    }
-    const expectedErrorMessage = `Failed to compile anonymous template: Unexpected identifier
-
-generated code:
-function(app, bdom, helpers) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div block-attribute-0="class">test</div>\`);
-  
-  return function template(ctx, node, key = "") {
-    let attr1 = ctx['a']ctx['b'];
-    return block1([attr1]);
-  }
-}`;
-    expect(error!).toBeDefined();
-    expect(error!.message).toBe(expectedErrorMessage);
-  });
-
-  test("display a nice error if a non-root component template fails to compile", async () => {
-    class Child extends Component {
-      static template = xml`<div t-att-class="a b">test</div>`;
-    }
-    class Parent extends Component {
-      static components = { Child };
-      static template = xml`<Child/>`;
-    }
-    const expectedErrorMessage = `Failed to compile anonymous template: Unexpected identifier
-
-generated code:
-function(app, bdom, helpers) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div block-attribute-0="class">test</div>\`);
-  
-  return function template(ctx, node, key = "") {
-    let attr1 = ctx['a']ctx['b'];
-    return block1([attr1]);
-  }
-}`;
-    const app = new App(Parent as typeof Component);
-    let error: Error;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(expectedErrorMessage);
-    await mountProm;
-    expect(error!).toBeDefined();
-    expect(error!.message).toBe(expectedErrorMessage);
-  });
-
  test("simple catchError", async () => {
    class Boom extends Component {
      static template = xml`<div t-esc="a.b.c"/>`;
@@ -1504,7 +1444,6 @@ describe("can catch errors", () => {
      "Parent:willPatch",
      "Child:willUnmount",
      "Child:willDestroy",
-      "Parent:patched",
      "Parent:willRender",
      "Parent:rendered",
      "Parent:willPatch",
@@ -1567,15 +1506,12 @@ describe("can catch errors", () => {
    parent.state.hasChild = false;
    await nextTick();
    expect([
-      "Parent:willRender",
-      "Parent:rendered",
      "Child:willDestroy",
      "Parent:willRender",
      "Parent:rendered",
+      "Parent:willPatch",
+      "Parent:patched",
    ]).toBeLogged();
-    expect(fixture.innerHTML).toBe("1");
-    await nextTick();
-    expect(["Parent:willPatch", "Parent:patched"]).toBeLogged();
    expect(fixture.innerHTML).toBe("2");
  });
 });
@@ -1,391 +0,0 @@
-import { App, Component, mount, onMounted, useState, xml } from "../../src/index";
-import {
-  makeTestFixture,
-  nextAppError,
-  nextTick,
-  snapshotEverything,
-  useLogLifecycle,
-} from "../helpers";
-
-snapshotEverything();
-
-let originalconsoleWarn = console.warn;
-let mockConsoleWarn: any;
-
-let fixture: HTMLElement;
-
-beforeEach(() => {
-  fixture = makeTestFixture();
-  mockConsoleWarn = jest.fn(() => {});
-  console.warn = mockConsoleWarn;
-});
-
-afterEach(() => {
-  console.warn = originalconsoleWarn;
-});
-
-describe("list of components", () => {
-  test("simple list", async () => {
-    class Child extends Component {
-      static template = xml`<span><t t-esc="props.value"/></span>`;
-    }
-
-    class Parent extends Component {
-      static template = xml`
-            <t t-for="elem" t-of="state.elems" t-key="elem.id">
-                <Child value="elem.value"/>
-            </t>`;
-      static components = { Child };
-
-      state = useState({
-        elems: [
-          { id: 1, value: "a" },
-          { id: 2, value: "b" },
-        ],
-      });
-    }
-
-    const parent = await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe("<span>a</span><span>b</span>");
-    parent.state.elems.push({ id: 4, value: "d" });
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<span>a</span><span>b</span><span>d</span>");
-
-    parent.state.elems.pop();
-
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<span>a</span><span>b</span>");
-  });
-
-  test("components in a node in a t-for ", async () => {
-    class Child extends Component {
-      static template = xml`<div><t t-esc="props.item"/></div>`;
-      setup() {
-        useLogLifecycle();
-      }
-    }
-
-    class Parent extends Component {
-      static template = xml`
-              <div>
-                  <ul>
-                      <t t-for="item" t-of="items" t-key="'li_'+item">
-                          <li>
-                              <Child item="item"/>
-                          </li>
-                      </t>
-                  </ul>
-              </div>`;
-      static components = { Child };
-
-      setup() {
-        useLogLifecycle();
-      }
-
-      get items() {
-        return [1, 2];
-      }
-    }
-
-    await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe(
-      "<div><ul><li><div>1</div></li><li><div>2</div></li></ul></div>"
-    );
-    expect([
-      "Parent:setup",
-      "Parent:willStart",
-      "Parent:willRender",
-      "Child:setup",
-      "Child:willStart",
-      "Child:setup",
-      "Child:willStart",
-      "Parent:rendered",
-      "Child:willRender",
-      "Child:rendered",
-      "Child:willRender",
-      "Child:rendered",
-      "Child:mounted",
-      "Child:mounted",
-      "Parent:mounted",
-    ]).toBeLogged();
-  });
-
-  test("reconciliation alg works for t-for in t-for", async () => {
-    class Child extends Component {
-      static template = xml`<div><t t-esc="props.blip"/></div>`;
-    }
-
-    class Parent extends Component {
-      static template = xml`
-        <div>
-            <t t-for="section" t-of="state.s" t-key="section">
-                <t t-for="blip" t-of="section.blips" t-key="blip">
-                  <Child blip="blip"/>
-                </t>
-            </t>
-        </div>`;
-      static components = { Child };
-      state = { s: [{ blips: ["a1", "a2"] }, { blips: ["b1"] }] };
-    }
-
-    await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe("<div><div>a1</div><div>a2</div><div>b1</div></div>");
-  });
-
-  test("reconciliation alg works for t-for in t-for, 2", async () => {
-    class Child extends Component {
-      static template = xml`<div><t t-esc="props.row + '_' + props.col"/></div>`;
-    }
-
-    class Parent extends Component {
-      static template = xml`
-        <div>
-          <p t-for="row" t-of="state.rows" t-key="row">
-            <p t-for="col" t-of="state.cols" t-key="col">
-                <Child row="row" col="col"/>
-              </p>
-            </p>
-        </div>`;
-      static components = { Child };
-      state = useState({ rows: [1, 2], cols: ["a", "b"] });
-    }
-
-    const parent = await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe(
-      "<div><p><p><div>1_a</div></p><p><div>1_b</div></p></p><p><p><div>2_a</div></p><p><div>2_b</div></p></p></div>"
-    );
-    parent.state.rows = [2, 1];
-    await nextTick();
-    expect(fixture.innerHTML).toBe(
-      "<div><p><p><div>2_a</div></p><p><div>2_b</div></p></p><p><p><div>1_a</div></p><p><div>1_b</div></p></p></div>"
-    );
-  });
-
-  test("sub components rendered in a loop", async () => {
-    class Child extends Component {
-      static template = xml`<p><t t-esc="props.n"/></p>`;
-    }
-
-    class Parent extends Component {
-      static template = xml`
-        <div>
-          <t t-for="number" t-of="state.numbers" t-key="number" >
-            <Child n="number"/>
-          </t>
-        </div>`;
-      static components = { Child };
-
-      state = useState({ numbers: [1, 2, 3] });
-    }
-    await mount(Parent, fixture);
-
-    expect(fixture.innerHTML).toBe(`<div><p>1</p><p>2</p><p>3</p></div>`);
-  });
-
-  test("sub components with some state rendered in a loop", async () => {
-    let n = 1;
-
-    class Child extends Component {
-      static template = xml`<p><t t-esc="state.n"/></p>`;
-      state: any;
-      setup() {
-        this.state = useState({ n });
-        n++;
-      }
-    }
-
-    class Parent extends Component {
-      static template = xml`
-        <div>
-          <t t-for="number" t-of="state.numbers" t-key="number">
-            <Child/>
-          </t>
-        </div>`;
-      static components = { Child };
-
-      state = useState({
-        numbers: [1, 2, 3],
-      });
-    }
-    const parent = await mount(Parent, fixture);
-
-    parent.state.numbers = [1, 3];
-    await nextTick();
-    expect(fixture.innerHTML).toBe(`<div><p>1</p><p>3</p></div>`);
-  });
-
-  test("list of sub components inside other nodes", async () => {
-    // this confuses the patching algorithm...
-    class SubComponent extends Component {
-      static template = xml`<span>asdf</span>`;
-    }
-    class Parent extends Component {
-      static template = xml`
-      <div>
-          <div t-for="blip" t-of="state.blips" t-key="blip.id">
-              <SubComponent />
-          </div>
-      </div>`;
-      static components = { SubComponent };
-      state = useState({
-        blips: [
-          { a: "a", id: 1 },
-          { b: "b", id: 2 },
-          { c: "c", id: 4 },
-        ],
-      });
-    }
-    const parent = await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe(
-      "<div><div><span>asdf</span></div><div><span>asdf</span></div><div><span>asdf</span></div></div>"
-    );
-    parent.state.blips.splice(0, 1);
-    await nextTick();
-    expect(fixture.innerHTML).toBe(
-      "<div><div><span>asdf</span></div><div><span>asdf</span></div></div>"
-    );
-  });
-
-  test("t-for with t-component, and update", async () => {
-    class Child extends Component {
-      static template = xml`
-          <span>
-            <t t-esc="state.val"/>
-            <t t-esc="props.val"/>
-          </span>`;
-      state = useState({ val: "A" });
-      setup() {
-        onMounted(() => {
-          this.state.val = "B";
-        });
-      }
-    }
-    class Parent extends Component {
-      static components = { Child };
-      static template = xml`
-          <div>
-            <t t-for="n" t-of="[0, 1]" t-key="n">
-              <Child val="n"/>
-            </t>
-          </div>`;
-    }
-
-    await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe("<div><span>A0</span><span>A1</span></div>");
-
-    await nextTick(); // wait for changes triggered in mounted to be applied
-    expect(fixture.innerHTML).toBe("<div><span>B0</span><span>B1</span></div>");
-  });
-
-  test("switch component position", async () => {
-    const childInstances = [];
-    class Child extends Component {
-      static template = xml`<div t-esc="props.key"></div>`;
-      setup() {
-        childInstances.push(this);
-      }
-    }
-
-    class Parent extends Component {
-      static components = { Child };
-      static template = xml`<span>
-        <t t-for="c" t-of="clist" t-key="c">
-          <Child key="c"/>
-        </t>
-      </span>`;
-
-      clist = [1, 2];
-    }
-
-    const parent = await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe("<span><div>1</div><div>2</div></span>");
-    parent.clist = [2, 1];
-    parent.render();
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<span><div>2</div><div>1</div></span>");
-    expect(childInstances.length).toBe(2);
-  });
-
-  test("crash on duplicate key in dev mode", async () => {
-    const consoleInfo = console.info;
-    console.info = jest.fn();
-    class Child extends Component {
-      static template = xml``;
-    }
-
-    class Parent extends Component {
-      static template = xml`
-        <t t-for="item" t-of="[1, 2]" t-key="'child'">
-          <Child/>
-        </t>
-      `;
-      static components = { Child };
-    }
-
-    const app = new App(Parent, { test: true });
-    const mountProm = expect(app.mount(fixture)).rejects.toThrow(
-      "Got duplicate key in t-for: child"
-    );
-    await expect(nextAppError(app)).resolves.toThrow("Got duplicate key in t-for: child");
-    await mountProm;
-    console.info = consoleInfo;
-    expect(mockConsoleWarn).toBeCalledTimes(1);
-  });
-
-  test("crash when using object as keys that serialize to the same string", async () => {
-    const consoleInfo = console.info;
-    console.info = jest.fn();
-    class Child extends Component {
-      static template = xml``;
-    }
-
-    class Parent extends Component {
-      static template = xml`
-        <t t-for="item" t-of="[{}, {}]" t-key="item">
-          <Child/>
-        </t>
-      `;
-      static components = { Child };
-    }
-
-    const app = new App(Parent, { test: true });
-    const mountProm = expect(app.mount(fixture)).rejects.toThrow(
-      "Got duplicate key in t-for: [object Object]"
-    );
-    await expect(nextAppError(app)).resolves.toThrow("Got duplicate key in t-for: [object Object]");
-    await mountProm;
-    console.info = consoleInfo;
-    expect(mockConsoleWarn).toBeCalledTimes(1);
-  });
-
-  test("order is correct when slots are not of same type", async () => {
-    class Child extends Component {
-      static template = xml`
-          <t t-slot="{{ slotName }}" t-for="slotName" t-of="slotNames" t-key="slotName"/>
-      `;
-      get slotNames() {
-        return Object.entries(this.props.slots)
-          .filter((entry: any) => entry[1].active)
-          .map((entry) => entry[0]);
-      }
-    }
-
-    class Parent extends Component {
-      static template = xml`
-        <Child>
-          <t t-set-slot="a" active="!state.active"><div t-if="!state.active">A</div></t>
-          <t t-set-slot="b" active="true">B</t>
-          <t t-set-slot="c" active="state.active">C</t>
-        </Child>
-      `;
-      static components = { Child };
-      state = useState({ active: false });
-    }
-
-    const parent = await mount(Parent, fixture);
-    expect(fixture.textContent).toBe("AB");
-    parent.state.active = true;
-    await nextTick();
-    expect(fixture.textContent).toBe("BC");
-  });
-});
@@ -626,39 +626,6 @@ describe("t-model directive", () => {
    expect(fixture.querySelector("select")!.value).toEqual("b");
  });

-  test("t-model with dynamic number values on select options in foreach", async () => {
-    class Test extends Component {
-      static template = xml`
-          <select t-model.number="state.value">
-            <t t-foreach="state.options" t-as="o" t-key="o.value">
-                <option t-att-value="o.value" t-esc="o.value"/>
-            </t>
-          </select>
-      `;
-      state: any;
-      setup() {
-        this.state = useState({
-          value: 2,
-          options: [{ value: 1 }, { value: 2 }, { value: 3 }],
-        });
-      }
-    }
-
-    const comp = await mount(Test, fixture);
-    // check that we have a value of 2 selected
-    expect(fixture.querySelector("select")!.value).toEqual("2");
-    expect(comp.state.value).toBe(2);
-
-    // emulate a click on the option=3 element
-    fixture.querySelectorAll("option")[2].selected = true;
-    fixture.querySelector("select")!.dispatchEvent(new Event("change"));
-
-    await nextTick();
-    // check that we have now selected the number 3 (and not the string)
-    expect(fixture.querySelector("select")!.value).toEqual("3");
-    expect(comp.state.value).toBe(3);
-  });
-
  test("t-model is applied before t-on-input", async () => {
    expect.assertions(3);
    class SomeComponent extends Component {
@@ -999,3 +999,26 @@ exports[`Portal: UI/UX focus is kept across re-renders 2`] = `
  }
 }"
 `;
+
+exports[`portal .closest suffix basic use of .suffix 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const Portal = app.Portal;
+  const comp1 = app.createComponent(null, false, true, false, false);
+  
+  let block2 = createBlock(\`<p class=\\"target\\">far target</p>\`);
+  let block3 = createBlock(\`<div><p class=\\"target\\">close target</p><block-child-0/></div>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return text(\`portal content\`);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = block2();
+    const b5 = comp1({target: '.target',isClosest: true,slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = block3([], [b5]);
+    return multi([b2, b3]);
+  }
+}"
+`;
@@ -988,7 +988,7 @@ describe("Portal: Props validation", () => {
      error = e as Error;
    }
    expect(error!).toBeDefined();
-    expect(error!.message).toContain(`Unexpected token ','`);
+    expect(error!.message).toBe(`Unexpected token ','`);
  });

  test("target must be a valid selector", async () => {
@@ -1028,3 +1028,21 @@ describe("Portal: Props validation", () => {
    expect(error!.message).toBe(`invalid portal target`);
  });
 });
+
+describe("portal .closest suffix", () => {
+  test("basic use of .suffix", async () => {
+    class Parent extends Component {
+      static template = xml`
+        <p class="target">far target</p>
+        <div>
+          <p class="target">close target</p>
+          <t t-portal.closest="'.target'">portal content</t>
+        </div>`;
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(
+      '<p class="target">far target</p><div><p class="target">close targetportal content</p></div>'
+    );
+  });
+});
@@ -1,6 +1,6 @@
 {
  "name": "Owl devtools",
-  "version": "1.1.1",
+  "version": "1.0",
  "manifest_version": 3,
  "description": "Chrome devtools extension for Odoo Owl framework",
  "icons": {
@@ -1,10 +1,11 @@
 const { Component, useRef, useEffect } = owl;
 import { useStore } from "../../../store/store";
 import { ObjectTreeElement } from "./object_tree_element/object_tree_element";
+import { Subscriptions } from "./subscriptions/subscriptions";

 export class DetailsWindow extends Component {
  static template = "devtools.DetailsWindow";
-  static components = { ObjectTreeElement };
+  static components = { ObjectTreeElement, Subscriptions };
  setup() {
    this.store = useStore();
    this.contextMenu = useRef("contextmenu");
@@ -53,11 +53,7 @@
          </div>
          <i title="Store observed states as global variable in the console" class="fa fa-bug utility-icon p-1" t-on-click.stop="() => this.store.logObjectInConsole([...this.store.activeComponent.path, {type: 'item', value: 'subscriptions'}])"></i>
        </div>
-        <div t-if="store.activeComponent.subscriptions.toggled" id="subscriptionsPanel">
-          <t t-foreach="store.activeComponent.subscriptions.children" t-as="subscription" t-key="subscription_index">
-            <ObjectTreeElement object="subscription.target"/>
-          </t>
-        </div>
+        <Subscriptions t-if="store.activeComponent.subscriptions.toggled"/>
      </div>
      <div t-if="store.activeComponent.instance.children.length > 0"  id="instance" class="details-panel ps-2 py-1">
        <div class="d-flex mb-2">
@@ -76,7 +72,7 @@
        </t>
      </div>
    </div>
-    <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-ref="contextmenu">
+    <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="contextmenu">
      <ul class="my-1">
        <li t-on-click.stop="() => this.store.inspectComponent('source', store.activeComponent.path)" class="custom-menu-item py-1 px-4">Inspect source code</li>
        <t t-if="store.activeComponent.path.length !== 1">
@@ -41,22 +41,23 @@ export class ObjectTreeElement extends Component {
    return JSON.stringify(this.props.object.path);
  }

-  get keyChanges() {
-    return this.props.object.keys?.includes("Symbol(Key changes)");
+  get objectName() {
+    return this.props.object.name;
  }

-  classFor(object) {
+  get objectLineClass() {
    // Prototype items will be dyed down to appear less important
-    if (object.path.some((item) => item?.type === "prototype") && !object.keepLit) {
-      return "attenuate";
+    if (this.pathAsString.includes('{"type":"prototype",')) {
+      return { attenuate: true };
    }
    // Same for subscription items which are not present in the keys while the keys will be bold
-    if (object.objectType === "subscription" && object.depth > 0) {
-      if (this.props.object.keys?.includes(object.name.toString())) {
-        return "fw-bolder";
+    if (this.props.object.objectType === "subscription" && this.props.object.depth > 0) {
+      if (this.props.keys.includes(this.props.object.name.toString())) {
+        return { "fw-bolder": true };
      }
-      return "attenuate";
+      return { attenuate: true };
    }
+    return {};
  }

  get objectPadding() {
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
  <t t-name="devtools.ObjectTreeElement" owl="1">
    <div class="m-0 p-0 text-nowrap w-100 object-line"
-      t-att-class="props.class"
+      t-att-class="objectLineClass" 
      t-on-click.stop="() => this.store.toggleObjectTreeElementsDisplay(this.props.object)" 
      t-on-contextmenu.prevent="openMenu" 
    >
@@ -11,7 +11,7 @@
          t-att-class="{'fa-caret-right': !props.object.toggled, 'fa-caret-down': props.object.toggled}"
          t-attf-style="visibility: {{props.object.hasChildren ? '' : 'hidden'}};"
        />
-        <t t-esc="props.object.name"/>
+        <t t-esc="objectName"/>
        <t t-if="props.object.content.length > 0">: </t> 
        <t t-if="props.object.contentType == 'getter'">
          <span class="getter-content object-content" t-att-class="objectLineClass" t-on-click.stop="() => this.store.loadGetterContent(this.props.object)">
@@ -28,10 +28,9 @@
            </t>
          </span> 
        </t>
-        <span t-if="keyChanges" class="key-changes ms-1 badge p-1" title="Key additions/deletions are observed">+/-</span>
      </div>
    </div>
-    <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-ref="contextmenu">
+    <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="contextmenu">
      <ul class="my-1">
        <li t-on-click="() => this.store.logObjectInConsole(this.props.object.path)" class="custom-menu-item py-1 px-4 text-nowrap">Store as global variable</li>
        <t t-if='props.object.contentType == "function"'>
@@ -39,9 +38,10 @@
        </t>
      </ul>
    </div>
-    <t t-if="props.object.toggled" t-key="contextMenuId">
-      <t t-foreach="props.object.children" t-as="child" t-key="child_index">
-        <ObjectTreeElement object="child" class="this.classFor(child)"/>
+    <t t-if="props.object.toggled">
+      <t t-foreach="props.object.children" t-as="child" t-key="child.name">
+        <ObjectTreeElement t-if="props.object.objectType === 'subscription'" object="child" keys="props.keys"/>
+        <ObjectTreeElement t-else="" object="child"/>
      </t>
    </t>
  </t>
@@ -0,0 +1,30 @@
+const { Component } = owl;
+import { useStore } from "../../../../store/store";
+import { ObjectTreeElement } from "../object_tree_element/object_tree_element";
+
+export class Subscriptions extends Component {
+  static template = "devtools.Subscriptions";
+
+  static components = { ObjectTreeElement };
+
+  setup() {
+    this.store = useStore();
+  }
+
+  // Used to display the keys in a compact way
+  keysContent(index) {
+    const keys = this.store.activeComponent.subscriptions.children[index].keys;
+    let content = JSON.stringify(keys);
+    const maxLength = 50;
+    content = content.replace(/,/g, ", ");
+    if (content.length > maxLength) {
+      content = content.slice(0, content.lastIndexOf(",", maxLength - 5)) + ", ...]";
+    }
+    return content;
+  }
+
+  expandKeys(event, index) {
+    this.store.activeComponent.subscriptions.children[index].keysExpanded =
+      !this.store.activeComponent.subscriptions.children[index].keysExpanded;
+  }
+}
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+  <t t-name="devtools.Subscriptions" owl="1">
+    <div id="subscriptionsPanel">
+      <t t-foreach="store.activeComponent.subscriptions.children" t-as="subscription" t-key="subscription_index">
+        <div class="my-2">
+          <div class="my-0 p-0 object-line" t-on-click.stop="(ev) => this.expandKeys(ev, subscription_index)">
+            <span class="ps-1 text-nowrap">
+              <i class="fa fa-caret-right ms-1" t-attf-style="cursor: pointer;{{subscription.keysExpanded ? 'transform: rotate(90deg);' : ''}}"></i>
+              keys: <span class="key-name"><t t-esc="this.keysContent(subscription_index)"/></span>
+            </span>
+          </div>
+          <div t-foreach="subscription.keys" t-as="key" t-key="key_index" class="my-0 p-0 object-line" t-attf-style="display: {{subscription.keysExpanded ? 'flex' : 'none'}}">
+            <div style="transform: translateX(calc(1.1rem))" class="key-content">
+              <i class="fa fa-caret-right mx-1" t-attf-style="cursor: pointer; visibility: hidden;"></i>
+              <t t-esc="key"/>
+            </div>
+          </div>
+          <ObjectTreeElement object="subscription.target" keys="subscription.keys"/>
+        </div>
+      </t>
+    </div>
+  </t>
+</templates>
@@ -1,11 +1,9 @@
 /** @odoo-module **/

-import { isElementInCenterViewport, minimizeKey, IS_FIREFOX } from "../../../../utils";
+import { isElementInCenterViewport, minimizeKey } from "../../../../utils";
 import { useStore } from "../../../store/store";
 import { HighlightText } from "./highlight_text/highlight_text";

-const browserInstance = IS_FIREFOX ? browser : chrome;
-
 const { Component, useRef, useState, useEffect, onMounted } = owl;

 export class TreeElement extends Component {
@@ -107,30 +105,4 @@ export class TreeElement extends Component {
      this.store.selectComponent(this.props.component.path);
    }
  }
-
-  // Adds the component name to the components toggle blacklist if not already present
-  // Else, remove it from the blacklist
-  toggleComponentToBlacklist() {
-    if (this.store.settings.componentsToggleBlacklist.has(this.props.component.name)) {
-      if (!this.props.component.toggled) {
-        this.props.component.toggled = !this.props.component.toggled;
-      }
-      this.store.settings.componentsToggleBlacklist.delete(this.props.component.name);
-      browserInstance.storage.local.set({
-        owlDevtoolsComponentsToggleBlacklist: Array.from(
-          this.store.settings.componentsToggleBlacklist
-        ),
-      });
-    } else {
-      if (this.props.component.toggled) {
-        this.props.component.toggled = !this.props.component.toggled;
-      }
-      this.store.settings.componentsToggleBlacklist.add(this.props.component.name);
-      browserInstance.storage.local.set({
-        owlDevtoolsComponentsToggleBlacklist: Array.from(
-          this.store.settings.componentsToggleBlacklist
-        ),
-      });
-    }
-  }
 }
@@ -26,7 +26,7 @@
        <span t-if="props.component.depth">&gt;</span>
        <span class="version" t-else="">owl=<t t-esc="props.component.version"/></span>
      </div>
-      <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-ref="contextmenu">
+      <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="contextmenu">
        <ul class="my-1">
          <li t-on-click.stop="() => this.store.toggleComponentAndChildren(props.component, true)" class="custom-menu-item py-1 px-4">Expand children</li>
          <li t-on-click.stop="() => this.store.toggleComponentAndChildren(props.component, false)" class="custom-menu-item py-1 px-4">Fold all children</li>
@@ -43,10 +43,6 @@
          <t t-else="">
            <li t-on-click.stop="() => this.store.logObjectInConsole([...props.component.path])" class="custom-menu-item py-1 px-4">Store as global variable</li>
          </t>
-          <li t-on-click.stop="() => this.toggleComponentToBlacklist()" class="custom-menu-item py-1 px-4">
-            <t t-if="store.settings.componentsToggleBlacklist.has(props.component.name)">Don't fold component by default</t>
-            <t t-else="">Fold component by default</t>
-          </li>
        </ul>
      </div>
    </div>
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
  <t t-name="devtools.Event" owl="1">
-    <div class="event-container" t-att-class="{ 'event-last': props.event.isLast }">
+    <div class="event-container">
      <div class="my-0 p-0 object-line" t-on-click.stop="toggleDisplay">
        <div class="ps-2 text-nowrap">
          <i class="fa px-1 pointer-icon caret"
@@ -43,7 +43,7 @@
          </span>
        </div>
      </t>
-      <div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-ref="componentContextmenu">
+      <div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="componentContextmenu">
        <ul class="my-1">
          <li t-on-click.stop="() => this.store.inspectComponent('source', props.event.path)" class="custom-menu-item py-1 px-4">Inspect source code</li>
          <t t-if="props.event.path.length !== 1">
@@ -28,14 +28,14 @@
        </span>
      </div>
    </div>
-    <div t-if="store.contextMenu.activeMenu === nodeContextMenuId" class="custom-menu" t-ref="nodeContextMenu">
+    <div t-if="store.contextMenu.activeMenu === nodeContextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="nodeContextMenu">
      <ul class="my-1">
        <li t-on-click.stop="() => this.store.toggleEventAndChildren(props.event, true)" class="custom-menu-item py-1 px-4">Expand children</li>
        <li t-on-click.stop="() => this.store.toggleEventAndChildren(props.event, false)" class="custom-menu-item py-1 px-4">Fold all children</li>
        <li t-on-click.stop="() => this.store.foldDirectChildren(props.event)" class="custom-menu-item py-1 px-4">Fold direct children</li>
      </ul>
    </div>
-    <div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-ref="componentContextmenu">
+    <div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="componentContextmenu">
      <ul class="my-1">
        <li t-on-click.stop="() => this.store.inspectComponent('source', props.event.path)" class="custom-menu-item py-1 px-4">Inspect source code</li>
        <t t-if="props.event.path.length !== 1">
@@ -11,9 +11,10 @@ export const store = reactive({
    expandByDefault: true,
    toggleOnSelected: false,
    darkmode: false,
-    componentsToggleBlacklist: new Set(),
  },
  contextMenu: {
+    top: 0,
+    left: 0,
    id: 0,
    activeMenu: -1,
    // Opens the context menu corresponding with the given menu html element
@@ -28,9 +29,9 @@ export const store = reactive({
      if (y + menuHeight > window.innerHeight) {
        y = window.innerHeight - menuHeight;
      }
-      menu.style.left = x + "px";
+      this.left = x + "px";
      // Need 25px offset because of the main navbar from the browser devtools
-      menu.style.top = y - 25 + "px";
+      this.top = y - 25 + "px";
    },
    // Close the currently displayed context menu
    close() {
@@ -102,19 +103,21 @@ export const store = reactive({
    if (IS_FIREFOX) {
      await evalInWindow("window.$0 = $0;", this.activeFrame);
    }
-    const [apps, details] = await evalFunctionInWindow(
+    const apps = await evalFunctionInWindow(
      "getComponentsTree",
-      fromOld && this.activeComponent
-        ? [this.activeComponent.path, this.apps, this.activeComponent]
-        : [],
+      fromOld && this.activeComponent ? [this.activeComponent.path, this.apps] : [],
      this.activeFrame
    );
    this.apps = apps ? apps : [];
    if (!fromOld && this.settings.expandByDefault) {
-      this.apps.forEach((tree) => expandNodes(tree, true));
+      this.apps.forEach((tree) => expandNodes(tree));
    }
-    keepEnvLit(details);
-    this.activeComponent = details;
+    const component = await evalFunctionInWindow(
+      "getComponentDetails",
+      fromOld && this.activeComponent ? [this.activeComponent.path, this.activeComponent] : [],
+      this.activeFrame
+    );
+    this.activeComponent = component;
  },

  // Select a component by retrieving its details from the page based on its path
@@ -151,11 +154,9 @@ export const store = reactive({
      [component.path],
      this.activeFrame
    );
-    if (!details) {
+    this.activeComponent = details;
+    if (!this.activeComponent) {
      await this.loadComponentsTree(false);
-    } else {
-      keepEnvLit(details);
-      this.activeComponent = details;
    }
    if (this.page !== "ComponentsTab") {
      this.switchTab("ComponentsTab");
@@ -413,7 +414,12 @@ export const store = reactive({
        if (!scriptsLoaded) {
          await loadScripts(frame);
        }
-        evalFunctionInWindow("initDevtools", [frame], frame);
+        evalInWindow(
+          `__OWL__DEVTOOLS_GLOBAL_HOOK__.devtoolsId = ${
+            store.devtoolsId
+          }; __OWL__DEVTOOLS_GLOBAL_HOOK__.frame = ${JSON.stringify(frame)};`,
+          frame
+        );
        if (!this.frameUrls.includes(frame)) {
          this.frameUrls = [...this.frameUrls, frame];
        }
@@ -497,18 +503,13 @@ export const store = reactive({
  },

  // Reset all the relevant data about the page currently stored
-  async resetData() {
-    await loadSettings();
+  resetData() {
    this.loadComponentsTree(false);
    this.events = [];
    this.eventsTree = [];
    this.activeRecorder = false;
    evalFunctionInWindow("toggleEventsRecording", [false, 0]);
-    this.traceRenderings = false;
    evalFunctionInWindow("toggleTracing", [false]);
-    this.traceSubscriptions = false;
-    evalFunctionInWindow("toggleSubscriptionTracing", [false]);
-    this.updateIFrameList();
  },

  // Triggers manually the rendering of the selected component
@@ -604,7 +605,7 @@ export const store = reactive({
  // Refresh the whole extension
  async refreshExtension() {
    await loadScripts();
-    await this.resetData();
+    this.resetData();
  },

  // Toggle dark mode in the extension and store result in the storage
@@ -615,7 +616,7 @@ export const store = reactive({
    } else {
      document.querySelector("html").classList.remove("dark-mode");
    }
-    browserInstance.storage.local.set({ owlDevtoolsDarkMode: this.settings.darkMode });
+    browserInstance.storage.local.set({ owl_devtools_dark_mode: this.settings.darkMode });
  },

  openDocumentation() {
@@ -633,9 +634,7 @@ init();
 async function init() {
  store.devtoolsId = await getTabURL();

-  evalFunctionInWindow("initDevtools", []);
-
-  await loadSettings();
+  evalInWindow("__OWL__DEVTOOLS_GLOBAL_HOOK__.devtoolsId = " + store.devtoolsId + ";");

  // We want to load the base components tree when the devtools tab is first opened
  store.loadComponentsTree(false);
@@ -652,6 +651,8 @@ async function init() {
    evalFunctionInWindow("toggleEventsRecording", [false, 0], frame);
  }

+  loadSettings();
+
  browserInstance.runtime.sendMessage({ type: "newDevtoolsPanel", id: store.devtoolsId });

  // Heartbeat message to test whether the extension context is still valid or not
@@ -666,7 +667,7 @@ async function init() {
  }, 500);
 }

-let rootRendersTimeout = false;
+let flushRendersTimeout = false;
 // Connect to the port to communicate to the background script
 browserInstance.runtime.onConnect.addListener((port) => {
  if (port.name === "OwlDevtoolsPort_" + store.devtoolsId) {
@@ -675,23 +676,23 @@ browserInstance.runtime.onConnect.addListener((port) => {
      if (msg.type === "Reload") {
        store.owlStatus = await evalInWindow("window.__OWL__DEVTOOLS_GLOBAL_HOOK__ !== undefined;");
        if (store.owlStatus) {
-          evalFunctionInWindow("initDevtools", []);
-          await store.resetData();
+          evalInWindow("__OWL__DEVTOOLS_GLOBAL_HOOK__.devtoolsId = " + store.devtoolsId + ";");
+          store.resetData();
        }
      }
      // Received when a frame has been delayed when loading the scripts due to owl being lazy loaded
      if (msg.type === "FrameReady") {
        store.updateIFrameList();
        store.owlStatus = true;
-        await store.resetData();
+        store.resetData();
      }
      // We need to reload the components tree when the set of apps in the page is modified
      if (msg.type === "RefreshApps") {
        store.loadComponentsTree(true);
      }
-      // When message of type Complete is received, overwrite the component tree with the new one from page
-      // A Complete message is sent everytime a root render is triggered on the page
-      if (msg.type === "Complete") {
+      // When message of type Flush is received, overwrite the component tree with the new one from page
+      // A flush message is sent everytime a component is rendered on the page
+      if (msg.type === "Flush") {
        if (msg.origin.frame !== store.activeFrame) {
          return;
        }
@@ -700,8 +701,8 @@ browserInstance.runtime.onConnect.addListener((port) => {
        }
        // This determines which components will have a short highlight effect in the tree to indicate they have been rendered
        store.renderPaths.add(JSON.stringify(msg.data));
-        clearTimeout(rootRendersTimeout);
-        rootRendersTimeout = setTimeout(() => {
+        clearTimeout(flushRendersTimeout);
+        flushRendersTimeout = setTimeout(() => {
          store.renderPaths.clear();
        }, 100);
        store.loadComponentsTree(true);
@@ -739,12 +740,11 @@ browserInstance.runtime.onConnect.addListener((port) => {
 // Load all settings from the chrome sync storage
 async function loadSettings() {
  let storage = await browserInstance.storage.local.get();
-  // Darkmode
-  if (storage.owlDevtoolsDarkMode === undefined) {
+  if (storage.owl_devtools_dark_mode === undefined) {
    // Load dark mode based on the global settings of the chrome devtools
    darkMode = browserInstance.devtools.panels.themeName === "dark";
  } else {
-    darkMode = storage.owlDevtoolsDarkMode;
+    darkMode = storage.owl_devtools_dark_mode;
  }
  store.settings.darkMode = darkMode;
  if (darkMode) {
@@ -752,12 +752,6 @@ async function loadSettings() {
  } else {
    document.querySelector("html").classList.remove("dark-mode");
  }
-  // Components toggle blacklist
-  if (storage.owlDevtoolsComponentsToggleBlacklist !== undefined) {
-    store.settings.componentsToggleBlacklist = new Set(
-      storage.owlDevtoolsComponentsToggleBlacklist
-    );
-  }
 }

 // Function to handle and store a batch of events coming from the page
@@ -782,7 +776,6 @@ function loadEvents(events) {
    }
    event.origin = null;
    event.toggled = false;
-    event.isLast = false;
    // Logic to retrace the origin of the event if it is not a root render event
    if (!event.type.includes("render")) {
      for (let i = store.events.length - 1; i >= 0; i--) {
@@ -832,7 +825,6 @@ function loadEvents(events) {
    // Make sure we add the event while keeping the whole list ordered by id
    addEventSorted(event);
  }
-  store.events[store.events.length - 1].isLast = true;
 }

 // Deselect component and remove highlight on all children
@@ -879,39 +871,10 @@ function highlightChildren(component) {
 }

 // Expand the node given in entry and all of its children
-function expandNodes(node, blacklist = false) {
-  if (blacklist && store.settings.componentsToggleBlacklist.has(node.name)) {
-    node.toggled = false;
-  } else {
-    node.toggled = true;
-  }
+function expandNodes(node) {
+  node.toggled = true;
  for (const child of node.children) {
-    expandNodes(child, blacklist);
-  }
-}
-
-// This function transforms the env part of the details such that all env keys are not
-// greyed out in the UI at their first occurence
-function keepEnvLit(details) {
-  let alreadyMet = new Set();
-  for (let i = 0; i < details.env.children.length; i++) {
-    if (i < details.env.children.length - 1) {
-      alreadyMet.add(details.env.children[i].name);
-    } else {
-      let lastElement = details.env.children[i];
-      while (lastElement.children.at(-1).name === "[[Prototype]]") {
-        for (const [index, child] of lastElement.children.entries()) {
-          if (index < lastElement.children.length - 1) {
-            if (!alreadyMet.has(child.name)) {
-              child.keepLit = true;
-              alreadyMet.add(child.name);
-            }
-          } else {
-            lastElement = child;
-          }
-        }
-      }
-    }
+    expandNodes(child);
  }
 }

@@ -126,10 +126,6 @@
  color: var(--prototype-color);
 }

-.key-changes {
-  background-color: var(--version-bg);
-}
-
 .event-container {
  border-bottom: 1px solid rgb(240, 238, 238);
  padding-top: 2px!important;
@@ -137,10 +133,6 @@
  font-size: 11px;
 }

-.event-last {
-  border-bottom: 3px solid rgb(225, 154, 0);
-}
-
 .getter-content:hover {
  text-decoration: underline;
 }
@@ -11,10 +11,8 @@
      this.Fiber = window.__OWL_DEVTOOLS__.Fiber;
      // Same but for RootFiber
      this.RootFiber = window.__OWL_DEVTOOLS__.RootFiber;
-      // This is for retrocompatibility purposes since new versions of owl should always expose toRaw and reactive
-      // in __OWL_DEVTOOLS__
-      this.toRaw = window.__OWL_DEVTOOLS__.toRaw ?? window.owl?.toRaw;
-      this.reactive = window.__OWL_DEVTOOLS__.reactive ?? window.owl?.reactive;
+      // Set to keep track of the fibers that are in the flush queue
+      this.queuedFibers = new WeakSet();
      // Set to keep track of the HTML elements we added to the page
      this.addedElements = [];
      // To keep track of the succession order of the render events
@@ -22,6 +20,7 @@
      // Set to keep track of the frame on which this script is loaded
      this.frame = "top";
      // Allows to launch a message each time an iframe html element is added to the page
+      const self = this;
      const iFrameObserver = new MutationObserver(function (mutationsList) {
        mutationsList.forEach(function (mutation) {
          mutation.addedNodes.forEach(function (addedNode) {
@@ -44,6 +43,8 @@
        });
      });
      iFrameObserver.observe(document.body, { subtree: true, childList: true });
+      this.appsPatched = false;
+      this.destroyPatched = false;
      this.patchAppsSetMethods();
      this.recordEvents = false;
      this.traceRenderings = false;
@@ -117,15 +118,6 @@
            length += element.length;
            result.push(element);
          }
-          for (const key of Object.getOwnPropertySymbols(obj)) {
-            if (length > 25) {
-              result.push("...");
-              break;
-            }
-            const element = key.toString() + ": " + this.serializeItem(obj[key]);
-            length += element.length;
-            result.push(element);
-          }
          return "{" + result.join(", ") + "}";
        },
        map(obj) {
@@ -173,40 +165,34 @@
      };
    }

-    initDevtools(frame = "top") {
-      if (!this.devtoolsInit) {
-        this.frame = frame;
-        const self = this;
-        // Flush the events batcher when a root render is completed
-        const original_Complete = self.RootFiber.prototype.complete;
-        self.RootFiber.prototype.complete = function () {
-          original_Complete.call(this, ...arguments);
-          const path = self.getComponentPath(this.node);
-          //Add a functionnality to the complete function which sends a message to the window every time it is triggered.
-          window.top.postMessage({
-            source: "owl-devtools",
-            type: "Complete",
-            data: path,
-            origin: { frame: self.frame },
-          });
-          if (self.recordEvents) {
-            window.top.postMessage({
-              source: "owl-devtools",
-              type: "Event",
-              data: self.eventsBatch,
-            });
-            self.eventsBatch = [];
-          }
-        };
-        this.devtoolsInit = true;
-      }
-    }
    // Modify the methods of the apps set in order to send a message each time it is modified.
    patchAppsSetMethods() {
      const originalAdd = this.apps.add;
      const originalDelete = this.apps.delete;
+      const self = this;
      this.apps.add = function () {
        originalAdd.call(this, ...arguments);
+        if (!self.destroyPatched) {
+          const newApp = arguments[0];
+          // It is not a given that apps have a root node at creation so we need to wait
+          if (newApp.root) {
+            self.patchDestroyMethod(newApp.root);
+          } else {
+            let root = null;
+            Object.defineProperty(newApp, "root", {
+              get() {
+                return root;
+              },
+              set(value) {
+                root = value;
+                if (!self.destroyPatched) {
+                  self.patchDestroyMethod(root);
+                }
+              },
+            });
+          }
+        }
+        self.patchAppMethods();
        window.top.postMessage({
          source: "owl-devtools",
          type: "RefreshApps",
@@ -221,24 +207,63 @@
      };
    }

+    patchDestroyMethod(root) {
+      if (!this.destroyPatched) {
+        // Signals when a component is destroyed
+        const originalDestroy = root.constructor.prototype._destroy;
+        const self = this;
+        root.constructor.prototype._destroy = function () {
+          if (self.recordEvents) {
+            const path = self.getComponentPath(this);
+            const event = {
+              type: "destroy",
+              component: this.name,
+              key: this.parentKey,
+              path: path,
+              time: 0,
+              id: self.eventId++,
+            };
+            self.eventsBatch.push(event);
+            const before = performance.now();
+            originalDestroy.call(this, ...arguments);
+            event.time = performance.now() - before;
+          } else {
+            originalDestroy.call(this, ...arguments);
+          }
+        };
+        this.destroyPatched = true;
+      }
+    }
+
    // Modify methods of each app so that it triggers messages on each flush and component render
    patchAppMethods() {
-      let app;
-      for (const appItem of this.apps) {
-        if (appItem.root) {
-          app = appItem;
-        }
-      }
-      if (!app.root) {
+      if (this.appsPatched) {
+        return;
+      }
+      let app = this.apps.values().next().value;
+      if (!app) {
        return;
      }
-      const self = this;
      const originalFlush = app.scheduler.constructor.prototype.flush;
      let inFlush = false;
      let _render = false;
+      const self = this;
      app.scheduler.constructor.prototype.flush = function () {
        // Used to know when a render is triggered inside the flush method or not
        inFlush = true;
+        [...this.tasks].map((fiber) => {
+          if (fiber.counter === 0 && !self.queuedFibers.has(fiber)) {
+            self.queuedFibers.add(fiber);
+            const path = self.getComponentPath(fiber.node);
+            //Add a functionnality to the flush function which sends a message to the window every time it is triggered.
+            window.top.postMessage({
+              source: "owl-devtools",
+              type: "Flush",
+              data: path,
+              origin: { frame: self.frame },
+            });
+          }
+        });
        originalFlush.call(this, ...arguments);
        inFlush = false;
      };
@@ -335,27 +360,20 @@
        _render = true;
        original_Render.call(this, ...arguments);
      };
-      // Signals when a component is destroyed
-      const originalDestroy = app.root.constructor.prototype._destroy;
-      app.root.constructor.prototype._destroy = function () {
+      // Flush the events batcher when a root render is completed
+      const original_Complete = self.RootFiber.prototype.complete;
+      self.RootFiber.prototype.complete = function () {
+        original_Complete.call(this, ...arguments);
        if (self.recordEvents) {
-          const path = self.getComponentPath(this);
-          const event = {
-            type: "destroy",
-            component: this.name,
-            key: this.parentKey,
-            path: path,
-            time: 0,
-            id: self.eventId++,
-          };
-          self.eventsBatch.push(event);
-          const before = performance.now();
-          originalDestroy.call(this, ...arguments);
-          event.time = performance.now() - before;
-        } else {
-          originalDestroy.call(this, ...arguments);
+          window.top.postMessage({
+            source: "owl-devtools",
+            type: "Event",
+            data: self.eventsBatch,
+          });
+          self.eventsBatch = [];
        }
      };
+      this.appsPatched = true;
    }

    // patch reactivity system to activate subscription tracing
@@ -370,7 +388,7 @@
      let targetToKeysToCallbacks;

      // Step 1: extract internal values from owl
-      const obj = self.reactive({}, () => {});
+      const obj = owl.reactive({}, () => {});
      let count = 0;
      WeakMap.prototype.get = function () {
        count++;
@@ -419,14 +437,9 @@
    }

    toggleTracing(value) {
-      if (value) {
-        this.patchAppMethods();
-        this.patchAppMethods = () => {}; // to only patch once
-      }
      this.traceRenderings = value;
      return this.traceRenderings;
    }
-
    toggleSubscriptionTracing(value) {
      if (value) {
        this.patchReactivity();
@@ -437,10 +450,6 @@
    }
    // Enables/disables the recording of the render/destroy events based on value
    toggleEventsRecording(value, index) {
-      if (value) {
-        this.patchAppMethods();
-        this.patchAppMethods = () => {}; // to only patch once
-      }
      this.recordEvents = value;
      this.eventId = index;
      return this.recordEvents;
@@ -707,7 +716,7 @@
            }
        }
        if (obj) {
-          obj = this.toRaw(obj);
+          obj = owl.toRaw(obj);
        }
      }
      return obj;
@@ -748,9 +757,6 @@
          child.contentType = "object";
          child.content = this.serializer.serializeItem(Object.getPrototypeOf(parentObj), true);
          child.hasChildren = true;
-          if (!oldTree && type === "env") {
-            child.toggled = true;
-          }
          break;
        case "set entries":
        case "map entries":
@@ -797,48 +803,57 @@
          }
          break;
      }
-      if (!child.contentType) {
-        if (obj === null) {
-          child.content = "null";
-          child.contentType = "object";
-          child.hasChildren = false;
-        } else if (obj === undefined) {
-          child.content = "undefined";
-          child.contentType = "undefined";
-          child.hasChildren = false;
+      if (child.contentType) {
+        if (child.toggled) {
+          child.children = this.loadObjectChildren(
+            child.path,
+            child.depth,
+            child.contentType,
+            child.objectType,
+            oldTree
+          );
+        }
+        return child;
+      }
+      if (obj === null) {
+        child.content = "null";
+        child.contentType = "object";
+        child.hasChildren = false;
+      } else if (obj === undefined) {
+        child.content = "undefined";
+        child.contentType = "undefined";
+        child.hasChildren = false;
+      } else {
+        obj = owl.toRaw(obj);
+        switch (true) {
+          case obj instanceof Map:
+            child.contentType = "map";
+            child.hasChildren = true;
+            break;
+          case obj instanceof Set:
+            child.contentType = "set";
+            child.hasChildren = true;
+            break;
+          case obj instanceof Array:
+            child.contentType = "array";
+            child.hasChildren = obj.length > 0;
+            break;
+          case typeof obj === "function":
+            child.contentType = "function";
+            child.hasChildren = true;
+            break;
+          case obj instanceof Object:
+            child.contentType = "object";
+            child.hasChildren = Object.keys(obj).length > 0;
+            break;
+          default:
+            child.contentType = typeof obj;
+            child.hasChildren = false;
+        }
+        if (key.type === "set entry") {
+          child.content = this.serializer.serializeItem(obj, true);
        } else {
-          obj = this.toRaw(obj);
-          switch (true) {
-            case obj instanceof Map:
-              child.contentType = "map";
-              child.hasChildren = true;
-              break;
-            case obj instanceof Set:
-              child.contentType = "set";
-              child.hasChildren = true;
-              break;
-            case obj instanceof Array:
-              child.contentType = "array";
-              child.hasChildren = obj.length > 0;
-              break;
-            case typeof obj === "function":
-              child.contentType = "function";
-              child.hasChildren = true;
-              break;
-            case obj instanceof Object:
-              child.contentType = "object";
-              child.hasChildren =
-                Object.keys(obj).length || Object.getOwnPropertySymbols(obj).length;
-              break;
-            default:
-              child.contentType = typeof obj;
-              child.hasChildren = false;
-          }
-          if (key.type === "set entry") {
-            child.content = this.serializer.serializeItem(obj, true);
-          } else {
-            child.content = this.serializer.serializeContent(obj, child.contentType);
-          }
+          child.content = this.serializer.serializeContent(obj, child.contentType);
        }
      }
      if (child.toggled) {
@@ -850,7 +865,6 @@
          oldTree
        );
      }
-      this.addHighlightedKeys(child);
      return child;
    }

@@ -860,10 +874,7 @@
      let path = completePath.slice(objPathIndex);
      let obj;
      if (objType === "subscription") {
-        const subscriptionPath = completePath.slice(0, objPathIndex + 3);
-        obj = oldTree.subscriptions.children.find(
-          (child) => JSON.stringify(child.target.path) === JSON.stringify(subscriptionPath)
-        ).target;
+        obj = oldTree.subscriptions.children[path[1].value].target;
        path = path.slice(3);
      } else {
        // Everything here is in component if it is not an app so remove this key of the path in the former case
@@ -893,7 +904,7 @@
      const children = [];
      depth = depth + 1;
      let obj = this.getObjectProperty(path);
-      let oldBranch = oldTree && this.getObjectInOldTree(oldTree, path, objType);
+      let oldBranch = this.getObjectInOldTree(oldTree, path, objType);
      if (!obj) {
        return [];
      }
@@ -908,7 +919,7 @@
            depth,
            objType,
            path,
-            oldBranch?.children[0],
+            oldBranch.children[0],
            oldTree
          );
          children.push(mapKey);
@@ -918,7 +929,7 @@
            depth,
            objType,
            path,
-            oldBranch?.children[1],
+            oldBranch.children[1],
            oldTree
          );
          children.push(mapValue);
@@ -929,7 +940,7 @@
            depth,
            objType,
            path,
-            oldBranch?.children[0],
+            oldBranch.children[0],
            oldTree
          );
          children.push(setValue);
@@ -950,7 +961,7 @@
                depth,
                objType,
                path,
-                oldBranch?.children[index],
+                oldBranch.children[index],
                oldTree
              );
              if (child) {
@@ -965,7 +976,7 @@
                depth,
                objType,
                path,
-                oldBranch?.children[index],
+                oldBranch.children[index],
                oldTree
              );
              if (child) {
@@ -982,13 +993,26 @@
            depth,
            objType,
            path,
-            oldBranch?.children[index],
+            oldBranch.children[index],
            oldTree
          );
          if (entries) {
            children.push(entries);
            index++;
          }
+          const size = this.serializeObjectChild(
+            obj,
+            { type: "item", value: "size", childIndex: children.length },
+            depth,
+            objType,
+            path,
+            oldBranch.children[index],
+            oldTree
+          );
+          if (size) {
+            children.push(size);
+            index++;
+          }
          Reflect.ownKeys(obj).forEach((key) => {
            const child = this.serializeObjectChild(
              obj,
@@ -996,7 +1020,7 @@
              depth,
              objType,
              path,
-              oldBranch?.children[index],
+              oldBranch.children[index],
              oldTree
            );
            if (child) {
@@ -1031,7 +1055,7 @@
              depth,
              objType,
              path,
-              oldBranch?.children[index],
+              oldBranch.children[index],
              oldTree
            );
            if (child) children.push(child);
@@ -1064,14 +1088,14 @@
        });
        proto = Object.getPrototypeOf(proto);
      }
-      if (obj.__proto__) {
+      if (!(obj.constructor.name === "Object")) {
        prototype = this.serializeObjectChild(
          obj,
          { type: "prototype", childIndex: children.length },
          depth,
          objType,
          path,
-          oldBranch?.children.at(-1),
+          oldBranch.children.at(-1),
          oldTree
        );
        children.push(prototype);
@@ -1276,15 +1300,16 @@
          children: [],
        };
      } else {
-        const rawSubscriptions = this.topLevelSubscriptions(node);
+        const rawSubscriptions = node.subscriptions;
        component.subscriptions = {
          toggled: oldTree ? oldTree.subscriptions.toggled : true,
          children: [],
        };
-        rawSubscriptions.forEach((rawSubscription) => {
+        rawSubscriptions.forEach((rawSubscription, index) => {
          let subscription = {
+            keys: [],
            target: {
-              name: this.targetName(rawSubscription.target, node),
+              name: "target",
              contentType:
                typeof rawSubscription.target === "object"
                  ? Array.isArray(rawSubscription.target)
@@ -1295,20 +1320,28 @@
              path: [
                ...path,
                { type: "item", value: "subscriptions" },
-                { type: "item", value: rawSubscription.index },
+                { type: "item", value: index },
                { type: "item", value: "target" },
              ],
              toggled: false,
              objectType: "subscription",
            },
+            keysExpanded: false,
          };
          if (
            oldTree &&
-            oldTree.subscriptions.children[rawSubscription.index] &&
-            oldTree.subscriptions.children[rawSubscription.index].target.toggled
+            oldTree.subscriptions.children[index] &&
+            oldTree.subscriptions.children[index].target.toggled
          ) {
            subscription.target.toggled = true;
          }
+          rawSubscription.keys.forEach((key) => {
+            if (typeof key === "symbol") {
+              subscription.keys.push(key.toString());
+            } else {
+              subscription.keys.push(key);
+            }
+          });
          if (rawSubscription.target == null) {
            if (subscription.target.contentType === "undefined") {
              subscription.target.content = "undefined";
@@ -1338,7 +1371,6 @@
              oldTree
            );
          }
-          this.addHighlightedKeys(subscription.target);
          component.subscriptions.children.push(subscription);
        });
      }
@@ -1357,7 +1389,7 @@
        }
        getter.hasChildren = false;
      } else {
-        obj = this.toRaw(obj);
+        obj = owl.toRaw(obj);
        switch (true) {
          case obj instanceof Map:
            getter.contentType = "map";
@@ -1446,16 +1478,13 @@
          return;
        }
      }
-      const item = path.pop();
+      const key = path.pop().value;
      const obj = this.getObjectProperty(path);
-      const key = item.hasOwnProperty("symbolIndex")
-        ? Object.getOwnPropertySymbols(obj)[item.symbolIndex]
-        : item.value;
      if (!obj) {
        return;
      }
      if (objectType === "subscription") {
-        this.reactive(obj)[key] = value;
+        owl.reactive(obj)[key] = value;
      } else {
        obj[key] = value;
        if (objectType === "props" || objectType === "instance") {
@@ -1519,13 +1548,12 @@
          }
        }
      }
-      // If nothing was found, return the path of the first root component found in the apps
-      const appIndex = [...this.apps].findIndex((app) => app.root);
-      return [appIndex.toString(), "root"];
+      // If nothing was found, return the first app's root component path
+      return ["0", "root"];
    }
    // Returns the tree of components of the inspected page in a parsed format
    // Use inspectedPath to specify the path of the selected component
-    getComponentsTree(inspectedPath = null, oldTrees = null, oldDetails = null) {
+    getComponentsTree(inspectedPath = null, oldTrees = null) {
      const appsArray = [...this.apps];
      const trees = appsArray.map((app, index) => {
        let oldTree;
@@ -1578,8 +1606,7 @@
        }
        return appNode;
      });
-      const component = this.getComponentDetails(inspectedPath, oldDetails);
-      return trees ? [trees, component] : [];
+      return trees ? trees : [];
    }
    // Recursively fills the components tree as a parsed version
    fillTree(appNode, treeNode, inspectedPathString, oldBranch) {
@@ -1675,54 +1702,6 @@
        inspect(obj);
      }
    }
-
-    targetName(target, node) {
-      // check on component
-      const { component } = node;
-      for (const [key, value] of Object.entries(component)) {
-        if (target === this.toRaw(value)) {
-          return key;
-        }
-      }
-      // check on props
-      for (const [key, value] of Object.entries(component.props)) {
-        if (target === this.toRaw(value)) {
-          return `props.${key}`;
-        }
-      }
-      return "[unknown]";
-    }
-
-    /**
-     * Removes subscriptions that are a direct child of another subscription:
-     * they will be reachable from the top level by expanding observed keys.
-     *
-     * @param {ComponentNode} node
-     * @returns {{ keys: PropertyKey[], target: unknown}[]} the top level
-     *  subscriptions of the node
-     */
-    topLevelSubscriptions(node) {
-      const subscriptions = node.subscriptions.map((s, index) => ({ ...s, index }));
-      const topLevelValues = new Set(Object.values(node.component).map((o) => this.toRaw(o)));
-      const toOmit = new Set(
-        subscriptions
-          .flatMap(({ keys, target }) => keys.map((k) => this.toRaw(target[k])))
-          .filter((obj) => !topLevelValues.has(obj))
-      );
-      return subscriptions.filter(({ target }) => !toOmit.has(target));
-    }
-
-    addHighlightedKeys(child) {
-      const { path } = child;
-      const subscriptionIndex = path.findIndex((item) => typeof item !== "string");
-      if (path[subscriptionIndex]?.value === "subscriptions") {
-        const node = this.getComponentNode(path.slice(0, subscriptionIndex));
-        // Add observed keys
-        const targetToKeys = new Map(node.subscriptions.map(({ keys, target }) => [target, keys]));
-        const target = this.getObjectProperty(child.path);
-        child.keys = targetToKeys.get(target)?.map((k) => String(k));
-      }
-    }
  }

  function checkOwlStatus() {
@@ -82,12 +82,6 @@ async function startRelease() {
    return;
  }

-  // ---------------------------------------------------------------------------
-  log(`Step ${step++}/${STEPS}: updating package.json...`);
-  await writeFile("package.json", JSON.stringify({...package, version: next}, null, 2) + "\n");
-  await writeFile("package-lock.json", JSON.stringify({...packageLock, version: next}, null, 2) + "\n");
-  await writeFile("./src/version.ts", `// do not modify manually. This file is generated by the release script.\nexport const version = "${next}";\n`);
-
  // ---------------------------------------------------------------------------
  log(`Step ${step++}/${STEPS}: building owl...`);
  await execCommand("rm -rf dist/");
@@ -114,6 +108,13 @@ async function startRelease() {
  await execCommand("cd dist && zip -r owl-devtools.zip devtools-chrome devtools-firefox && cd ..");
  await execCommand("rm -r dist/devtools-chrome dist/devtools-firefox && rm dist/compiler.js");

+  // ---------------------------------------------------------------------------
+  log(`Step ${step++}/${STEPS}: updating package.json...`);
+  await writeFile("package.json", JSON.stringify({...package, version: next}, null, 2) + "\n");
+  await writeFile("package-lock.json", JSON.stringify({...packageLock, version: next}, null, 2) + "\n");
+  await writeFile("./src/version.ts", `// do not modify manually. This file is generated by the release script.\nexport const version = "${next}";\n`);
+
+
  // ---------------------------------------------------------------------------
  log(`Step ${step++}/${STEPS}: updating owl on github page...`);
  await fs.copyFileSync("dist/owl.es.js", "docs/owl.js");