Bump word-wrap from 1.2.3 to 1.2.4

Bumps [word-wrap](https://github.com/jonschlinkert/word-wrap) from 1.2.3 to 1.2.4.
- [Release notes](https://github.com/jonschlinkert/word-wrap/releases)
- [Commits](https://github.com/jonschlinkert/word-wrap/compare/1.2.3...1.2.4)

---
updated-dependencies:
- dependency-name: word-wrap
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

doc/reference/component.md

@@ -451,5 +451,6 @@ 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
 ```

doc/reference/templates.md

@@ -376,15 +376,16 @@ 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 an array (the current item will be the current value)
-or an object (the current item will be the current key).
+`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`.
 
-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`):
+In addition to the name passed via t-as, `t-foreach` provides a few other useful
+variables (note: `$as` will be replaced with the name passed to `t-as`):
 
-- `$as_value`: the current iteration value, identical to `$as` for lists and
-  integers, but for objects, it provides the value (where `$as` provides the key)
+- `$as_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_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`)

docs/owl.js

@@ -122,14 +122,16 @@ function handleError(params) {
     }
     const node = "node" in params ? params.node : params.fiber.node;
     const fiber = "fiber" in params ? params.fiber : node.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);
+    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);
+    }
     const handled = _handleError(node, error);
     if (!handled) {
         console.warn(`[Owl] Unhandled error. Destroying the root component`);
@@ -175,11 +177,21 @@ function createAttrUpdater(attr) {
 }
 function attrsSetter(attrs) {
     if (isArray(attrs)) {
-        setAttribute.call(this, attrs[0], attrs[1]);
+        if (attrs[0] === "class") {
+            setClass.call(this, attrs[1]);
+        }
+        else {
+            setAttribute.call(this, attrs[0], attrs[1]);
+        }
     }
     else {
         for (let k in attrs) {
-            setAttribute.call(this, k, attrs[k]);
+            if (k === "class") {
+                setClass.call(this, attrs[k]);
+            }
+            else {
+                setAttribute.call(this, k, attrs[k]);
+            }
         }
     }
 }
@@ -191,7 +203,12 @@ function attrsUpdater(attrs, oldAttrs) {
             if (val === oldAttrs[1]) {
                 return;
             }
-            setAttribute.call(this, name, val);
+            if (name === "class") {
+                updateClass.call(this, val, oldAttrs[1]);
+            }
+            else {
+                setAttribute.call(this, name, val);
+            }
         }
         else {
             removeAttribute.call(this, oldAttrs[0]);
@@ -201,13 +218,23 @@ function attrsUpdater(attrs, oldAttrs) {
     else {
         for (let k in oldAttrs) {
             if (!(k in attrs)) {
-                removeAttribute.call(this, k);
+                if (k === "class") {
+                    updateClass.call(this, "", oldAttrs[k]);
+                }
+                else {
+                    removeAttribute.call(this, k);
+                }
             }
         }
         for (let k in attrs) {
             const val = attrs[k];
             if (val !== oldAttrs[k]) {
-                setAttribute.call(this, k, val);
+                if (k === "class") {
+                    updateClass.call(this, val, oldAttrs[k]);
+                }
+                else {
+                    setAttribute.call(this, k, val);
+                }
             }
         }
     }
@@ -286,20 +313,13 @@ function updateClass(val, oldVal) {
  * @returns a batched version of the original callback
  */
 function batched(callback) {
-    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();
+    let scheduled = false;
+    return async (...args) => {
+        if (!scheduled) {
+            scheduled = true;
+            await Promise.resolve();
+            scheduled = false;
+            callback(...args);
         }
     };
 }
@@ -1632,8 +1652,7 @@ function cancelFibers(fibers) {
         let node = fiber.node;
         fiber.render = throwOnRender;
         if (node.status === 0 /* NEW */) {
-            node.destroy();
-            delete node.parent.children[node.parentKey];
+            node.cancel();
         }
         node.fiber = null;
         if (fiber.bdom) {
@@ -2360,6 +2379,9 @@ 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();
@@ -2385,7 +2407,7 @@ class ComponentNode {
         this.fiber = fiber;
         this.app.scheduler.addFiber(fiber);
         await Promise.resolve();
-        if (this.status === 2 /* DESTROYED */) {
+        if (this.status >= 2 /* CANCELLED */) {
             return;
         }
         // We only want to actually render the component if the following two
@@ -2403,6 +2425,18 @@ 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();
@@ -2430,7 +2464,7 @@ class ComponentNode {
                 this.app.handleError({ error: e, node: this });
             }
         }
-        this.status = 2 /* DESTROYED */;
+        this.status = 3 /* DESTROYED */;
     }
     async updateAndRender(props, parentFiber) {
         this.nextProps = props;
@@ -2963,12 +2997,22 @@ function prepareList(collection) {
         keys = collection;
         values = collection;
     }
-    else if (collection) {
-        values = Object.keys(collection);
-        keys = Object.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 {
-        throw new OwlError("Invalid loop expression");
+        throw new OwlError(`Invalid loop expression: "${collection}" is not iterable`);
     }
     const n = values.length;
     return [keys, values, n, new Array(n)];
@@ -3875,6 +3919,10 @@ 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
      */
@@ -3952,8 +4000,7 @@ class CodeGenerator {
         let { block, forceNewBlock } = ctx;
         let value = ast.value;
         if (value && ctx.translate !== false) {
-            const match = translationRE.exec(value);
-            value = match[1] + this.translateFn(match[2]) + match[3];
+            value = this.translate(value);
         }
         if (!ctx.inPreTag) {
             value = value.replace(whitespaceRE, " ");
@@ -4494,11 +4541,12 @@ class CodeGenerator {
         else {
             let value;
             if (ast.defaultValue) {
+                const defaultValue = ctx.translate ? this.translate(ast.defaultValue) : ast.defaultValue;
                 if (ast.value) {
-                    value = `withDefault(${expr}, \`${ast.defaultValue}\`)`;
+                    value = `withDefault(${expr}, \`${defaultValue}\`)`;
                 }
                 else {
-                    value = `\`${ast.defaultValue}\``;
+                    value = `\`${defaultValue}\``;
                 }
             }
             else {
@@ -4791,10 +4839,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) ||
@@ -4879,10 +4927,10 @@ function parseDOMNode(node, ctx) {
     let model = null;
     for (let attr of nodeAttrsNames) {
         const value = node.getAttribute(attr);
-        if (attr.startsWith("t-on")) {
-            if (attr === "t-on") {
-                throw new OwlError("Missing event name with t-on directive");
-            }
+        if (attr === "t-on" || attr === "t-on-") {
+            throw new OwlError("Missing event name with t-on directive");
+        }
+        if (attr.startsWith("t-on-")) {
             on = on || {};
             on[attr.slice(5)] = value;
         }
@@ -4907,10 +4955,8 @@ 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");
@@ -4922,8 +4968,8 @@ function parseDOMNode(node, ctx) {
                 specialInitTargetAttr: isRadioInput ? "checked" : null,
                 eventType,
                 hasDynamicChildren: false,
-                shouldTrim: hasTrimMod && (isOtherInput || isTextarea),
-                shouldNumberize: hasNumberMod && (isOtherInput || isTextarea),
+                shouldTrim: hasTrimMod,
+                shouldNumberize: hasNumberMod,
             };
             if (isSelect) {
                 // don't pollute the original ctx
@@ -4986,9 +5032,6 @@ function parseTEscNode(node, ctx) {
             content: [tesc],
         };
     }
-    if (ast.type === 11 /* TComponent */) {
-        throw new OwlError("t-esc is not supported on Component nodes");
-    }
     return tesc;
 }
 // -----------------------------------------------------------------------------
@@ -5430,19 +5473,21 @@ function normalizeTIf(el) {
  *
  * @param el the element containing the tree that should be normalized
  */
-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");
+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);
         }
-        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);
     }
 }
 /**
@@ -5453,7 +5498,7 @@ function normalizeTEsc(el) {
  */
 function normalizeXML(el) {
     normalizeTIf(el);
-    normalizeTEsc(el);
+    normalizeTEscTOut(el);
 }
 /**
  * Parses an XML string into an XML document, throwing errors on parser errors
@@ -5506,7 +5551,7 @@ function compile(template, options = {}) {
 }
 
 // do not modify manually. This file is generated by the release script.
-const version = "2.1.2";
+const version = "2.2";
 
 // -----------------------------------------------------------------------------
 //  Scheduler
@@ -5516,11 +5561,18 @@ 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.
@@ -5530,21 +5582,28 @@ class Scheduler {
             let renders = this.delayedRenders;
             this.delayedRenders = [];
             for (let f of renders) {
-                if (f.root && f.node.status !== 2 /* DESTROYED */ && f.node.fiber === f) {
+                if (f.root && f.node.status !== 3 /* DESTROYED */ && f.node.fiber === f) {
                     f.render();
                 }
             }
         }
         if (this.frame === 0) {
-            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);
-                    }
-                }
-            });
+            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);
+            }
         }
     }
     processFiber(fiber) {
@@ -5557,7 +5616,7 @@ class Scheduler {
             this.tasks.delete(fiber);
             return;
         }
-        if (fiber.node.status === 2 /* DESTROYED */) {
+        if (fiber.node.status === 3 /* DESTROYED */) {
             this.tasks.delete(fiber);
             return;
         }
@@ -5585,6 +5644,8 @@ window.__OWL_DEVTOOLS__ || (window.__OWL_DEVTOOLS__ = {
     apps: new Set(),
     Fiber: Fiber,
     RootFiber: RootFiber,
+    toRaw: toRaw,
+    reactive: reactive,
 });
 class App extends TemplateSet {
     constructor(Root, config = {}) {
@@ -5779,9 +5840,11 @@ function status(component) {
     switch (component.__owl__.status) {
         case 0 /* NEW */:
             return "new";
+        case 2 /* CANCELLED */:
+            return "cancelled";
         case 1 /* MOUNTED */:
             return "mounted";
-        case 2 /* DESTROYED */:
+        case 3 /* DESTROYED */:
             return "destroyed";
     }
 }
@@ -5837,8 +5900,9 @@ function useChildSubEnv(envExtension) {
  * will run a cleanup function before patching and before unmounting the
  * the component.
  *
- * @param {Effect} effect the effect to run on component mount and/or patch
- * @param {()=>any[]} [computeDependencies=()=>[NaN]] a callback to compute
+ * @template T
+ * @param {Effect<T>} effect the effect to run on component mount and/or patch
+ * @param {()=>T} [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
@@ -5920,6 +5984,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-04-29T07:45:54.333Z';
-__info__.hash = 'aabb755';
+__info__.date = '2023-07-19T13:22:24.480Z';
+__info__.hash = '2e07799';
 __info__.url = 'https://github.com/odoo/owl';

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.1.3",
+  "version": "2.2.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -5890,9 +5890,9 @@
       }
     },
     "word-wrap": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.4.tgz",
+      "integrity": "sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==",
       "dev": true
     },
     "wrap-ansi": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.1.3",
+  "version": "2.2.1",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "module": "dist/owl.es.js",

src/compiler/parser.ts

@@ -235,10 +235,10 @@ function parseNode(node: Node, ctx: ParsingContext): AST | null {
     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) ||
@@ -365,10 +365,8 @@ 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");
@@ -381,8 +379,8 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
         specialInitTargetAttr: isRadioInput ? "checked" : null,
         eventType,
         hasDynamicChildren: false,
-        shouldTrim: hasTrimMod && (isOtherInput || isTextarea),
-        shouldNumberize: hasNumberMod && (isOtherInput || isTextarea),
+        shouldTrim: hasTrimMod,
+        shouldNumberize: hasNumberMod,
       };
       if (isSelect) {
         // don't pollute the original ctx
@@ -446,9 +444,6 @@ 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;
 }
 
@@ -943,21 +938,23 @@ function normalizeTIf(el: Element) {
  *
  * @param el the element containing the tree that should be normalized
  */
-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");
+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);
     }
-    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);
   }
 }
 
@@ -969,7 +966,7 @@ function normalizeTEsc(el: Element) {
  */
 function normalizeXML(el: Element) {
   normalizeTIf(el);
-  normalizeTEsc(el);
+  normalizeTEscTOut(el);
 }
 
 /**

src/runtime/blockdom/attributes.ts

@@ -36,10 +36,18 @@ export function createAttrUpdater(attr: string): Setter<HTMLElement> {
 
 export function attrsSetter(this: HTMLElement, attrs: any) {
   if (isArray(attrs)) {
-    setAttribute.call(this, attrs[0], attrs[1]);
+    if (attrs[0] === "class") {
+      setClass.call(this, attrs[1]);
+    } else {
+      setAttribute.call(this, attrs[0], attrs[1]);
+    }
   } else {
     for (let k in attrs) {
-      setAttribute.call(this, k, attrs[k]);
+      if (k === "class") {
+        setClass.call(this, attrs[k]);
+      } else {
+        setAttribute.call(this, k, attrs[k]);
+      }
     }
   }
 }
@@ -52,7 +60,11 @@ export function attrsUpdater(this: HTMLElement, attrs: any, oldAttrs: any) {
       if (val === oldAttrs[1]) {
         return;
       }
-      setAttribute.call(this, name, val);
+      if (name === "class") {
+        updateClass.call(this, val, oldAttrs[1]);
+      } else {
+        setAttribute.call(this, name, val);
+      }
     } else {
       removeAttribute.call(this, oldAttrs[0]);
       setAttribute.call(this, name, val);
@@ -60,13 +72,21 @@ export function attrsUpdater(this: HTMLElement, attrs: any, oldAttrs: any) {
   } else {
     for (let k in oldAttrs) {
       if (!(k in attrs)) {
-        removeAttribute.call(this, k);
+        if (k === "class") {
+          updateClass.call(this, "", oldAttrs[k]);
+        } else {
+          removeAttribute.call(this, k);
+        }
       }
     }
     for (let k in attrs) {
       const val = attrs[k];
       if (val !== oldAttrs[k]) {
-        setAttribute.call(this, k, val);
+        if (k === "class") {
+          updateClass.call(this, val, oldAttrs[k]);
+        } else {
+          setAttribute.call(this, k, val);
+        }
       }
     }
   }

src/runtime/component_node.ts

@@ -145,6 +145,9 @@ 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();
@@ -171,7 +174,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.DESTROYED) {
+    if (this.status >= STATUS.CANCELLED) {
       return;
     }
     // We only want to actually render the component if the following two
@@ -190,6 +193,20 @@ 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();

src/runtime/error_handling.ts

@@ -51,17 +51,19 @@ 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;
 
-  // 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);
+  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);
 
-  fibersInError.set(fiber.root!, error);
+    fibersInError.set(fiber.root!, error);
+  }
 
   const handled = _handleError(node, error);
   if (!handled) {

src/runtime/fibers.ts

@@ -55,8 +55,7 @@ function cancelFibers(fibers: Fiber[]): number {
     let node = fiber.node;
     fiber.render = throwOnRender;
     if (node.status === STATUS.NEW) {
-      node.destroy();
-      delete node.parent!.children[node.parentKey!];
+      node.cancel();
     }
     node.fiber = null;
     if (fiber.bdom) {

src/runtime/scheduler.ts

@@ -1,3 +1,4 @@
+import type { ComponentNode } from "./component_node";
 import { fibersInError } from "./error_handling";
 import { Fiber, RootFiber } from "./fibers";
 import { STATUS } from "./status";
@@ -14,6 +15,7 @@ export class Scheduler {
   requestAnimationFrame: Window["requestAnimationFrame"];
   frame: number = 0;
   delayedRenders: Fiber[] = [];
+  cancelledNodes: Set<ComponentNode> = new Set();
 
   constructor() {
     this.requestAnimationFrame = Scheduler.requestAnimationFrame;
@@ -23,6 +25,13 @@ 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.
@@ -39,15 +48,23 @@ export class Scheduler {
     }
 
     if (this.frame === 0) {
-      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);
-          }
-        }
-      });
+      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);
+      }
     }
   }
 

src/runtime/status.ts

@@ -7,15 +7,20 @@ 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" | "destroyed";
+type STATUS_DESCR = "new" | "mounted" | "cancelled" | "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:

src/runtime/template_helpers.ts

@@ -8,12 +8,6 @@ import { OwlError } from "./error_handling";
 import type { ComponentNode } from "./component_node";
 
 const ObjectCreate = Object.create;
-const ObjectGetPrototypeOf = Object.getPrototypeOf;
-const ObjectGetOwnPropertyDescriptors = Object.getOwnPropertyDescriptors;
-const ObjectDefineProperty = Object.defineProperty;
-const ObjectEntries = Object.entries;
-const hasOwnProperty = (obj: Object, prop: PropertyKey) =>
-  Object.prototype.hasOwnProperty.call(obj, prop);
 /**
  * This file contains utility functions that will be injected in each template,
  * to perform various useful tasks in the compiled code.
@@ -55,14 +49,8 @@ function callSlot(
 
 function capture(ctx: any): any {
   const result = ObjectCreate(ctx);
-  let current = ctx;
-  while (current && current !== Object.prototype) {
-    for (const [key, descriptor] of ObjectEntries(ObjectGetOwnPropertyDescriptors(current))) {
-      if (!hasOwnProperty(result, key) && "value" in descriptor) {
-        ObjectDefineProperty(result, key, descriptor);
-      }
-    }
-    current = ObjectGetPrototypeOf(current);
+  for (let k in ctx) {
+    result[k] = ctx[k];
   }
   return result;
 }
@@ -72,18 +60,26 @@ function withKey(elem: any, k: string) {
   return elem;
 }
 
-function prepareList(collection: any): [any[], any[], number, any[]] {
-  let keys: any[];
-  let values: any[];
+function prepareList(collection: unknown): [unknown[], unknown[], number, undefined[]] {
+  let keys: unknown[];
+  let values: unknown[];
 
   if (Array.isArray(collection)) {
     keys = collection;
     values = collection;
-  } else if (collection) {
-    values = Object.keys(collection);
-    keys = Object.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 {
-    throw new OwlError("Invalid loop expression");
+    throw new OwlError(`Invalid loop expression: "${collection}" is not iterable`);
   }
   const n = values.length;
   return [keys, values, n, new Array(n)];

src/runtime/utils.ts

@@ -9,20 +9,13 @@ export type Callback = () => void;
  * @returns a batched version of the original callback
  */
 export function batched(callback: Callback): Callback {
-  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();
+  let scheduled = false;
+  return async (...args) => {
+    if (!scheduled) {
+      scheduled = true;
+      await Promise.resolve();
+      scheduled = false;
+      callback(...args);
     }
   };
 }

src/version.ts

@@ -1,2 +1,2 @@
 // do not modify manually. This file is generated by the release script.
-export const version = "2.1.3";
+export const version = "2.2.1";

tests/blockdom/block_attributes.test.ts

@@ -145,3 +145,34 @@ 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>`);
+});

tests/compiler/__snapshots__/attributes.test.ts.snap

@@ -707,6 +707,123 @@ 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
 ) {

tests/compiler/__snapshots__/t_foreach.test.ts.snap

@@ -77,6 +77,62 @@ 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
 ) {
@@ -108,6 +164,62 @@ 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
 ) {

tests/compiler/attributes.test.ts

@@ -371,4 +371,33 @@ 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>');
+  });
 });

tests/compiler/parser.test.ts

@@ -1569,6 +1569,12 @@ 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"
@@ -1991,8 +1997,8 @@ describe("qweb parser", () => {
       baseExpr: "state",
       expr: "'stuff'",
       eventType: "click",
-      shouldNumberize: false,
-      shouldTrim: false,
+      shouldNumberize: true,
+      shouldTrim: true,
       targetAttr: "value",
       hasDynamicChildren: false,
       specialInitTargetAttr: "checked",

tests/compiler/t_foreach.test.ts

@@ -105,6 +105,64 @@ 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>
@@ -193,7 +251,9 @@ 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");
+    expect(() => renderToString(test)).toThrow(
+      'Invalid loop expression: "undefined" is not iterable'
+    );
   });
 
   test("t-foreach with t-if inside", () => {

tests/components/__snapshots__/concurrency.test.ts.snap

@@ -212,6 +212,73 @@ 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
 ) {

tests/components/__snapshots__/t_call.test.ts.snap

@@ -1,50 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`t-call component with an enumerable getter, t-call inside slot 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
-  const callTemplate_1 = app.getTemplate(\`sub\`);
-  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
-  }
-}"
-`;
-
-exports[`t-call component with an enumerable getter, t-call inside slot 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['foo'];
-    return block1([txt1]);
-  }
-}"
-`;
-
-exports[`t-call component with an enumerable getter, t-call inside slot 3`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {});
-  }
-}"
-`;
-
 exports[`t-call dynamic t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/components/__snapshots__/t_model.test.ts.snap

@@ -468,6 +468,36 @@ 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
 ) {

tests/components/concurrency.test.ts

@@ -115,13 +115,7 @@ test("destroying/recreating a subwidget with different props (if start is not ov
   await nextMicroTick();
   expect(n).toBe(2);
 
-  expect([
-    "Child:willDestroy",
-    "W:willRender",
-    "Child:setup",
-    "Child:willStart",
-    "W:rendered",
-  ]).toBeLogged();
+  expect(["W:willRender", "Child:setup", "Child:willStart", "W:rendered"]).toBeLogged();
 
   def.resolve();
   await nextTick();
@@ -130,6 +124,7 @@ 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",
@@ -178,13 +173,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",
@@ -251,13 +246,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();
@@ -703,13 +698,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",
@@ -1732,9 +1727,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();
@@ -2282,7 +2277,6 @@ test("concurrent renderings scenario 16", async () => {
     "D:setup",
     "D:willStart",
     "C:rendered",
-    "D:willDestroy",
     "B:willRender",
     "C:willUpdateProps",
     "B:rendered",
@@ -2290,6 +2284,7 @@ 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
@@ -2997,11 +2992,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",
@@ -3055,11 +3050,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",
@@ -3114,11 +3109,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",
@@ -3801,7 +3796,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 = this;
+      c = c || this;
       useLogLifecycle();
     }
   }
@@ -3846,8 +3841,6 @@ 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",
@@ -3858,6 +3851,8 @@ 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",
@@ -4200,6 +4195,116 @@ 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 };
 

tests/components/error_handling.test.ts

@@ -1444,6 +1444,7 @@ describe("can catch errors", () => {
       "Parent:willPatch",
       "Child:willUnmount",
       "Child:willDestroy",
+      "Parent:patched",
       "Parent:willRender",
       "Parent:rendered",
       "Parent:willPatch",
@@ -1506,12 +1507,15 @@ 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");
   });
 });

tests/components/t_call.test.ts

@@ -425,26 +425,4 @@ describe("t-call", () => {
     await nextTick();
     expect(fixture.innerHTML).toBe("Bchild");
   });
-
-  test("component with an enumerable getter, t-call inside slot", async () => {
-    class Child extends Component {
-      static template = xml`<t t-slot="default"/>`;
-    }
-    class Parent extends Component {
-      static components = { Child };
-      static template = xml`<Child><t t-call="sub"/></Child>`;
-    }
-    // simulate adding a getter with patch in odoo: getter will be enumarable
-    Object.defineProperty(Parent.prototype, "foo", {
-      get() {
-        return 1;
-      },
-      enumerable: true,
-    });
-    const app = new App(Parent);
-    app.addTemplate("sub", `<div t-esc="foo"/>`);
-
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div>1</div>");
-  });
 });

tests/components/t_model.test.ts

@@ -626,6 +626,39 @@ 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 {

tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/details_window.js

@@ -1,11 +1,10 @@
 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, Subscriptions };
+  static components = { ObjectTreeElement };
   setup() {
     this.store = useStore();
     this.contextMenu = useRef("contextmenu");

tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/details_window.xml

@@ -53,7 +53,11 @@
           </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>
-        <Subscriptions t-if="store.activeComponent.subscriptions.toggled"/>
+        <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>
       </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">

tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/object_tree_element/object_tree_element.js

@@ -41,23 +41,22 @@ export class ObjectTreeElement extends Component {
     return JSON.stringify(this.props.object.path);
   }
 
-  get objectName() {
-    return this.props.object.name;
+  get keyChanges() {
+    return this.props.object.keys?.includes("Symbol(Key changes)");
   }
 
-  get objectLineClass() {
+  classFor(object) {
     // Prototype items will be dyed down to appear less important
-    if (this.pathAsString.includes('{"type":"prototype",')) {
-      return { attenuate: true };
+    if (object.path.some((item) => item?.type === "prototype") && !object.keepLit) {
+      return "attenuate";
     }
     // Same for subscription items which are not present in the keys while the keys will be bold
-    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 };
+    if (object.objectType === "subscription" && object.depth > 0) {
+      if (this.props.object.keys?.includes(object.name.toString())) {
+        return "fw-bolder";
       }
-      return { attenuate: true };
+      return "attenuate";
     }
-    return {};
   }
 
   get objectPadding() {

tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/object_tree_element/object_tree_element.xml

@@ -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="objectLineClass" 
+      t-att-class="props.class"
       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="objectName"/>
+        <t t-esc="props.object.name"/>
         <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,6 +28,7 @@
             </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">
@@ -40,8 +41,7 @@
     </div>
     <t t-if="props.object.toggled" t-key="contextMenuId">
       <t t-foreach="props.object.children" t-as="child" t-key="child_index">
-        <ObjectTreeElement t-if="props.object.objectType === 'subscription'" object="child" keys="props.keys"/>
-        <ObjectTreeElement t-else="" object="child"/>
+        <ObjectTreeElement object="child" class="this.classFor(child)"/>
       </t>
     </t>
   </t>

tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/subscriptions/subscriptions.js

@@ -1,30 +0,0 @@
-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;
-  }
-}

tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/subscriptions/subscriptions.xml

@@ -1,24 +0,0 @@
-<?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>

tools/devtools/src/devtools_app/devtools_window/profiler_tab/event/event.xml

@@ -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">
+    <div class="event-container" t-att-class="{ 'event-last': props.event.isLast }">
       <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"

tools/devtools/src/devtools_app/store/store.js

@@ -102,21 +102,19 @@ export const store = reactive({
     if (IS_FIREFOX) {
       await evalInWindow("window.$0 = $0;", this.activeFrame);
     }
-    const apps = await evalFunctionInWindow(
+    const [apps, details] = await evalFunctionInWindow(
       "getComponentsTree",
-      fromOld && this.activeComponent ? [this.activeComponent.path, this.apps] : [],
+      fromOld && this.activeComponent
+        ? [this.activeComponent.path, this.apps, this.activeComponent]
+        : [],
       this.activeFrame
     );
     this.apps = apps ? apps : [];
     if (!fromOld && this.settings.expandByDefault) {
       this.apps.forEach((tree) => expandNodes(tree, true));
     }
-    const component = await evalFunctionInWindow(
-      "getComponentDetails",
-      fromOld && this.activeComponent ? [this.activeComponent.path, this.activeComponent] : [],
-      this.activeFrame
-    );
-    this.activeComponent = component;
+    keepEnvLit(details);
+    this.activeComponent = details;
   },
 
   // Select a component by retrieving its details from the page based on its path
@@ -153,9 +151,11 @@ export const store = reactive({
       [component.path],
       this.activeFrame
     );
-    this.activeComponent = details;
-    if (!this.activeComponent) {
+    if (!details) {
       await this.loadComponentsTree(false);
+    } else {
+      keepEnvLit(details);
+      this.activeComponent = details;
     }
     if (this.page !== "ComponentsTab") {
       this.switchTab("ComponentsTab");
@@ -413,12 +413,7 @@ export const store = reactive({
         if (!scriptsLoaded) {
           await loadScripts(frame);
         }
-        evalInWindow(
-          `__OWL__DEVTOOLS_GLOBAL_HOOK__.devtoolsId = ${
-            store.devtoolsId
-          }; __OWL__DEVTOOLS_GLOBAL_HOOK__.frame = ${JSON.stringify(frame)};`,
-          frame
-        );
+        evalFunctionInWindow("initDevtools", [frame], frame);
         if (!this.frameUrls.includes(frame)) {
           this.frameUrls = [...this.frameUrls, frame];
         }
@@ -638,7 +633,7 @@ init();
 async function init() {
   store.devtoolsId = await getTabURL();
 
-  evalInWindow("__OWL__DEVTOOLS_GLOBAL_HOOK__.devtoolsId = " + store.devtoolsId + ";");
+  evalFunctionInWindow("initDevtools", []);
 
   await loadSettings();
 
@@ -671,7 +666,7 @@ async function init() {
   }, 500);
 }
 
-let flushRendersTimeout = false;
+let rootRendersTimeout = false;
 // Connect to the port to communicate to the background script
 browserInstance.runtime.onConnect.addListener((port) => {
   if (port.name === "OwlDevtoolsPort_" + store.devtoolsId) {
@@ -680,7 +675,7 @@ browserInstance.runtime.onConnect.addListener((port) => {
       if (msg.type === "Reload") {
         store.owlStatus = await evalInWindow("window.__OWL__DEVTOOLS_GLOBAL_HOOK__ !== undefined;");
         if (store.owlStatus) {
-          evalInWindow("__OWL__DEVTOOLS_GLOBAL_HOOK__.devtoolsId = " + store.devtoolsId + ";");
+          evalFunctionInWindow("initDevtools", []);
           await store.resetData();
         }
       }
@@ -694,9 +689,9 @@ browserInstance.runtime.onConnect.addListener((port) => {
       if (msg.type === "RefreshApps") {
         store.loadComponentsTree(true);
       }
-      // 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") {
+      // 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") {
         if (msg.origin.frame !== store.activeFrame) {
           return;
         }
@@ -705,8 +700,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(flushRendersTimeout);
-        flushRendersTimeout = setTimeout(() => {
+        clearTimeout(rootRendersTimeout);
+        rootRendersTimeout = setTimeout(() => {
           store.renderPaths.clear();
         }, 100);
         store.loadComponentsTree(true);
@@ -787,6 +782,7 @@ 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--) {
@@ -836,6 +832,7 @@ 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
@@ -893,6 +890,31 @@ function expandNodes(node, blacklist = false) {
   }
 }
 
+// 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;
+          }
+        }
+      }
+    }
+  }
+}
+
 // Fold the node given in entry and all of its children
 function foldNodes(node) {
   node.toggled = false;

tools/devtools/src/main.css

@@ -126,6 +126,10 @@
   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;
@@ -133,6 +137,10 @@
   font-size: 11px;
 }
 
+.event-last {
+  border-bottom: 3px solid rgb(225, 154, 0);
+}
+
 .getter-content:hover {
   text-decoration: underline;
 }

tools/devtools/src/page_scripts/owl_devtools_global_hook.js

@@ -15,8 +15,6 @@
       // 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
@@ -24,7 +22,6 @@
       // 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) {
@@ -47,12 +44,7 @@
         });
       });
       iFrameObserver.observe(document.body, { subtree: true, childList: true });
-      this.appsPatched = false;
-      this.destroyPatched = false;
       this.patchAppsSetMethods();
-      if (this.apps.size > 0) {
-        this.patchAppMethods();
-      }
       this.recordEvents = false;
       this.traceRenderings = false;
       this.traceSubscriptions = false;
@@ -125,6 +117,15 @@
             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) {
@@ -172,34 +173,40 @@
       };
     }
 
+    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",
@@ -214,72 +221,24 @@
       };
     }
 
-    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() {
-      if (this.appsPatched) {
+      let app;
+      for (const appItem of this.apps) {
+        if (appItem.root) {
+          app = appItem;
+        }
+      }
+      if (!app.root) {
         return;
       }
-      let app = this.apps.values().next().value;
       const self = this;
-      if (app.root) {
-        this.patchDestroyMethod(app.root);
-      } else {
-        const originalMount = app.constructor.prototype.mount;
-        app.constructor.prototype.mount = async function (...args) {
-          const result = await originalMount.call(this, ...args);
-          const root = this.root;
-          self.patchDestroyMethod(root);
-          app.constructor.prototype.mount = originalMount;
-          return result;
-        };
-      }
       const originalFlush = app.scheduler.constructor.prototype.flush;
       let inFlush = false;
       let _render = false;
       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;
       };
@@ -376,20 +335,27 @@
         _render = true;
         original_Render.call(this, ...arguments);
       };
-      // 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);
+      // Signals when a component is destroyed
+      const originalDestroy = app.root.constructor.prototype._destroy;
+      app.root.constructor.prototype._destroy = function () {
         if (self.recordEvents) {
-          window.top.postMessage({
-            source: "owl-devtools",
-            type: "Event",
-            data: self.eventsBatch,
-          });
-          self.eventsBatch = [];
+          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.appsPatched = true;
     }
 
     // patch reactivity system to activate subscription tracing
@@ -453,9 +419,14 @@
     }
 
     toggleTracing(value) {
+      if (value) {
+        this.patchAppMethods();
+        this.patchAppMethods = () => {}; // to only patch once
+      }
       this.traceRenderings = value;
       return this.traceRenderings;
     }
+
     toggleSubscriptionTracing(value) {
       if (value) {
         this.patchReactivity();
@@ -466,6 +437,10 @@
     }
     // 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;
@@ -773,6 +748,9 @@
           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":
@@ -819,57 +797,48 @@
           }
           break;
       }
-      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 = 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 > 0;
-            break;
-          default:
-            child.contentType = typeof obj;
-            child.hasChildren = false;
-        }
-        if (key.type === "set entry") {
-          child.content = this.serializer.serializeItem(obj, true);
+      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;
         } else {
-          child.content = this.serializer.serializeContent(obj, child.contentType);
+          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);
+          }
         }
       }
       if (child.toggled) {
@@ -881,6 +850,7 @@
           oldTree
         );
       }
+      this.addHighlightedKeys(child);
       return child;
     }
 
@@ -890,7 +860,10 @@
       let path = completePath.slice(objPathIndex);
       let obj;
       if (objType === "subscription") {
-        obj = oldTree.subscriptions.children[path[1].value].target;
+        const subscriptionPath = completePath.slice(0, objPathIndex + 3);
+        obj = oldTree.subscriptions.children.find(
+          (child) => JSON.stringify(child.target.path) === JSON.stringify(subscriptionPath)
+        ).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
@@ -920,7 +893,7 @@
       const children = [];
       depth = depth + 1;
       let obj = this.getObjectProperty(path);
-      let oldBranch = this.getObjectInOldTree(oldTree, path, objType);
+      let oldBranch = oldTree && this.getObjectInOldTree(oldTree, path, objType);
       if (!obj) {
         return [];
       }
@@ -935,7 +908,7 @@
             depth,
             objType,
             path,
-            oldBranch.children[0],
+            oldBranch?.children[0],
             oldTree
           );
           children.push(mapKey);
@@ -945,7 +918,7 @@
             depth,
             objType,
             path,
-            oldBranch.children[1],
+            oldBranch?.children[1],
             oldTree
           );
           children.push(mapValue);
@@ -956,7 +929,7 @@
             depth,
             objType,
             path,
-            oldBranch.children[0],
+            oldBranch?.children[0],
             oldTree
           );
           children.push(setValue);
@@ -977,7 +950,7 @@
                 depth,
                 objType,
                 path,
-                oldBranch.children[index],
+                oldBranch?.children[index],
                 oldTree
               );
               if (child) {
@@ -992,7 +965,7 @@
                 depth,
                 objType,
                 path,
-                oldBranch.children[index],
+                oldBranch?.children[index],
                 oldTree
               );
               if (child) {
@@ -1009,7 +982,7 @@
             depth,
             objType,
             path,
-            oldBranch.children[index],
+            oldBranch?.children[index],
             oldTree
           );
           if (entries) {
@@ -1023,7 +996,7 @@
               depth,
               objType,
               path,
-              oldBranch.children[index],
+              oldBranch?.children[index],
               oldTree
             );
             if (child) {
@@ -1058,7 +1031,7 @@
               depth,
               objType,
               path,
-              oldBranch.children[index],
+              oldBranch?.children[index],
               oldTree
             );
             if (child) children.push(child);
@@ -1091,14 +1064,14 @@
         });
         proto = Object.getPrototypeOf(proto);
       }
-      if (!(obj.constructor.name === "Object")) {
+      if (obj.__proto__) {
         prototype = this.serializeObjectChild(
           obj,
           { type: "prototype", childIndex: children.length },
           depth,
           objType,
           path,
-          oldBranch.children.at(-1),
+          oldBranch?.children.at(-1),
           oldTree
         );
         children.push(prototype);
@@ -1303,16 +1276,15 @@
           children: [],
         };
       } else {
-        const rawSubscriptions = node.subscriptions;
+        const rawSubscriptions = this.topLevelSubscriptions(node);
         component.subscriptions = {
           toggled: oldTree ? oldTree.subscriptions.toggled : true,
           children: [],
         };
-        rawSubscriptions.forEach((rawSubscription, index) => {
+        rawSubscriptions.forEach((rawSubscription) => {
           let subscription = {
-            keys: [],
             target: {
-              name: "target",
+              name: this.targetName(rawSubscription.target, node),
               contentType:
                 typeof rawSubscription.target === "object"
                   ? Array.isArray(rawSubscription.target)
@@ -1323,28 +1295,20 @@
               path: [
                 ...path,
                 { type: "item", value: "subscriptions" },
-                { type: "item", value: index },
+                { type: "item", value: rawSubscription.index },
                 { type: "item", value: "target" },
               ],
               toggled: false,
               objectType: "subscription",
             },
-            keysExpanded: false,
           };
           if (
             oldTree &&
-            oldTree.subscriptions.children[index] &&
-            oldTree.subscriptions.children[index].target.toggled
+            oldTree.subscriptions.children[rawSubscription.index] &&
+            oldTree.subscriptions.children[rawSubscription.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";
@@ -1374,6 +1338,7 @@
               oldTree
             );
           }
+          this.addHighlightedKeys(subscription.target);
           component.subscriptions.children.push(subscription);
         });
       }
@@ -1481,8 +1446,11 @@
           return;
         }
       }
-      const key = path.pop().value;
+      const item = path.pop();
       const obj = this.getObjectProperty(path);
+      const key = item.hasOwnProperty("symbolIndex")
+        ? Object.getOwnPropertySymbols(obj)[item.symbolIndex]
+        : item.value;
       if (!obj) {
         return;
       }
@@ -1551,12 +1519,13 @@
           }
         }
       }
-      // If nothing was found, return the first app's root component path
-      return ["0", "root"];
+      // 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"];
     }
     // 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) {
+    getComponentsTree(inspectedPath = null, oldTrees = null, oldDetails = null) {
       const appsArray = [...this.apps];
       const trees = appsArray.map((app, index) => {
         let oldTree;
@@ -1609,7 +1578,8 @@
         }
         return appNode;
       });
-      return trees ? trees : [];
+      const component = this.getComponentDetails(inspectedPath, oldDetails);
+      return trees ? [trees, component] : [];
     }
     // Recursively fills the components tree as a parsed version
     fillTree(appNode, treeNode, inspectedPathString, oldBranch) {
@@ -1705,6 +1675,54 @@
         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() {