[REL] v2.2.5

# v2.2.5 - [FIX] compiler: fix xmlns attribute not being set correctly in firefox - [FIX] compiler: fix t-call at root of template causing crashes - [REF] compiler: minor cleanup - [FIX] devtools: fix inspected path
[FIX] compiler: fix xmlns attribute not being set correctly in firefox
2025-10-06 19:59:41 +07:00 · 2023-08-07 12:26:46 +02:00 · 2023-08-07 12:21:43 +02:00 · 2023-08-04 11:49:14 +02:00 · 2023-08-04 11:44:54 +02:00 · 2023-08-04 11:44:54 +02:00
103 changed files with 2490 additions and 1084 deletions
@@ -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
 ```
@@ -175,7 +175,7 @@ class Notebook extends Component {
    <div class="notebook">
      <div class="tabs">
        <t t-foreach="tabNames" t-as="tab" t-key="tab_index">
-          <span t-att-class="{active:tab_index === activeTab}" t-on-click="() => state.activeTab=tab">
+          <span t-att-class="{active:tab_index === activeTab}" t-on-click="() => state.activeTab=tab_index">
            <t t-esc="props.slots[tab].title"/>
          </span>
        </t>
@@ -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`)
@@ -10,7 +10,7 @@
  <link rel="stylesheet" href="assets/milligram.css">
  <link rel="stylesheet" href="assets/highlight.tomorrow.css">
  <link rel="stylesheet" href="assets/main.css">
-  <script src="./owl.js"></script>
+  <script type="importmap">{ "imports": { "@odoo/owl": "./owl.js" } }</script>
 </head>
 <body>
  <header class="container">
@@ -68,7 +68,6 @@
    <p><a href=".">OWL</a> is licensed under LGPLv3.<br>Logo from <a href="https://github.com/googlefonts/noto-emoji">Google Noto Emoji Font</a>, licensed under Apache License 2.0</p>
  </footer>
  <script src="assets/highlight.pack.js"></script>
-  <script type="importmap">{ "imports": { "@odoo/owl": "./owl.js" } }</script>
  <script type="module" src="display_code.js"></script>
  <script type="module" src="counter.js"></script>
 </body>
@@ -82,65 +82,6 @@ function toggler(key, child) {

 // Custom error class that wraps error that happen in the owl lifecycle
 class OwlError extends Error {
-}
-// Maps fibers to thrown errors
-const fibersInError = new WeakMap();
-const nodeErrorHandlers = new WeakMap();
-function _handleError(node, error) {
-    if (!node) {
-        return false;
-    }
-    const fiber = node.fiber;
-    if (fiber) {
-        fibersInError.set(fiber, error);
-    }
-    const errorHandlers = nodeErrorHandlers.get(node);
-    if (errorHandlers) {
-        let handled = false;
-        // execute in the opposite order
-        for (let i = errorHandlers.length - 1; i >= 0; i--) {
-            try {
-                errorHandlers[i](error);
-                handled = true;
-                break;
-            }
-            catch (e) {
-                error = e;
-            }
-        }
-        if (handled) {
-            return true;
-        }
-    }
-    return _handleError(node.parent, error);
-}
-function handleError(params) {
-    let { error } = params;
-    // Wrap error if it wasn't wrapped by wrapError (ie when not in dev mode)
-    if (!(error instanceof OwlError)) {
-        error = Object.assign(new OwlError(`An error occured in the owl lifecycle (see this Error's "cause" property)`), { cause: error });
-    }
-    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);
-    const handled = _handleError(node, error);
-    if (!handled) {
-        console.warn(`[Owl] Unhandled error. Destroying the root component`);
-        try {
-            node.app.destroy();
-        }
-        catch (e) {
-            console.error(e);
-        }
-        throw error;
-    }
 }

 const { setAttribute: elemSetAttribute, removeAttribute } = Element.prototype;
@@ -175,11 +116,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 +142,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 +157,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 +252,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);
        }
    };
 }
@@ -751,12 +710,7 @@ function buildTree(node, parent = null, domParentTree = null) {
                info.push({ type: "child", idx: index });
                el = document.createTextNode("");
            }
-            const attrs = node.attributes;
-            const ns = attrs.getNamedItem("block-ns");
-            if (ns) {
-                attrs.removeNamedItem("block-ns");
-                currentNS = ns.value;
-            }
+            currentNS || (currentNS = node.namespaceURI);
            if (!el) {
                el = currentNS
                    ? document.createElementNS(currentNS, tagName)
@@ -772,6 +726,7 @@ function buildTree(node, parent = null, domParentTree = null) {
                    const fragment = document.createElement("template").content;
                    fragment.appendChild(el);
                }
+                const attrs = node.attributes;
                for (let i = 0; i < attrs.length; i++) {
                    const attrName = attrs[i].name;
                    const attrValue = attrs[i].value;
@@ -1583,6 +1538,68 @@ function remove(vnode, withBeforeRemove = false) {
    vnode.remove();
 }

+// Maps fibers to thrown errors
+const fibersInError = new WeakMap();
+const nodeErrorHandlers = new WeakMap();
+function _handleError(node, error) {
+    if (!node) {
+        return false;
+    }
+    const fiber = node.fiber;
+    if (fiber) {
+        fibersInError.set(fiber, error);
+    }
+    const errorHandlers = nodeErrorHandlers.get(node);
+    if (errorHandlers) {
+        let handled = false;
+        // execute in the opposite order
+        for (let i = errorHandlers.length - 1; i >= 0; i--) {
+            try {
+                errorHandlers[i](error);
+                handled = true;
+                break;
+            }
+            catch (e) {
+                error = e;
+            }
+        }
+        if (handled) {
+            return true;
+        }
+    }
+    return _handleError(node.parent, error);
+}
+function handleError(params) {
+    let { error } = params;
+    // Wrap error if it wasn't wrapped by wrapError (ie when not in dev mode)
+    if (!(error instanceof OwlError)) {
+        error = Object.assign(new OwlError(`An error occured in the owl lifecycle (see this Error's "cause" property)`), { cause: error });
+    }
+    const node = "node" in params ? params.node : params.fiber.node;
+    const fiber = "fiber" in params ? params.fiber : node.fiber;
+    if (fiber) {
+        // resets the fibers on components if possible. This is important so that
+        // new renderings can be properly included in the initial one, if any.
+        let current = fiber;
+        do {
+            current.node.fiber = current;
+            current = current.parent;
+        } while (current);
+        fibersInError.set(fiber.root, error);
+    }
+    const handled = _handleError(node, error);
+    if (!handled) {
+        console.warn(`[Owl] Unhandled error. Destroying the root component`);
+        try {
+            node.app.destroy();
+        }
+        catch (e) {
+            console.error(e);
+        }
+        throw error;
+    }
+}
+
 function makeChildFiber(node, parent) {
    let current = node.fiber;
    if (current) {
@@ -1632,8 +1649,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 +2376,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 +2404,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 +2422,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 +2461,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 +2994,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.values(collection);
+            keys = Object.keys(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)];
@@ -3221,7 +3262,7 @@ class TemplateSet {
    }
    callTemplate(owner, subTemplate, ctx, parent, key) {
        const template = this.getTemplate(subTemplate);
-        return toggler(subTemplate, template.call(owner, ctx, parent, key));
+        return toggler(subTemplate, template.call(owner, ctx, parent, key + subTemplate));
    }
 }
 // -----------------------------------------------------------------------------
@@ -3809,7 +3850,7 @@ class CodeGenerator {
    createBlock(parentBlock, type, ctx) {
        const hasRoot = this.target.hasRoot;
        const block = new BlockDescription(this.target, type);
-        if (!hasRoot && !ctx.preventRoot) {
+        if (!hasRoot) {
            this.target.hasRoot = true;
            block.isRoot = true;
        }
@@ -3832,7 +3873,7 @@ class CodeGenerator {
        if (ctx.tKeyExpr) {
            blockExpr = `toggler(${ctx.tKeyExpr}, ${blockExpr})`;
        }
-        if (block.isRoot && !ctx.preventRoot) {
+        if (block.isRoot) {
            if (this.target.on) {
                blockExpr = this.wrapWithEventCatcher(blockExpr, this.target.on);
            }
@@ -3875,6 +3916,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 +3997,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, " ");
@@ -4005,11 +4049,6 @@ class CodeGenerator {
        }
        // attributes
        const attrs = {};
-        const nameSpace = ast.ns || ctx.nameSpace;
-        if (nameSpace && isNewBlock) {
-            // specific namespace uri
-            attrs["block-ns"] = nameSpace;
-        }
        for (let key in ast.attrs) {
            let expr, attrName;
            if (key.startsWith("t-attf")) {
@@ -4125,7 +4164,10 @@ class CodeGenerator {
            const idx = block.insertData(setRefStr, "ref");
            attrs["block-ref"] = String(idx);
        }
-        const dom = xmlDoc.createElement(ast.tag);
+        const nameSpace = ast.ns || ctx.nameSpace;
+        const dom = nameSpace
+            ? xmlDoc.createElementNS(nameSpace, ast.tag)
+            : xmlDoc.createElement(ast.tag);
        for (const [attr, val] of Object.entries(attrs)) {
            if (!(attr === "class" && val === "")) {
                dom.setAttribute(attr, val);
@@ -4167,7 +4209,7 @@ class CodeGenerator {
                            break;
                    }
                }
-                this.addLine(`let ${block.children.map((c) => c.varName)};`, codeIdx);
+                this.addLine(`let ${block.children.map((c) => c.varName).join(", ")};`, codeIdx);
            }
        }
        return block.varName;
@@ -4270,7 +4312,7 @@ class CodeGenerator {
                            break;
                    }
                }
-                this.addLine(`let ${block.children.map((c) => c.varName)};`, codeIdx);
+                this.addLine(`let ${block.children.map((c) => c.varName).join(", ")};`, codeIdx);
            }
            // note: this part is duplicated from end of compilemulti:
            const args = block.children.map((c) => c.varName).join(", ");
@@ -4299,18 +4341,18 @@ class CodeGenerator {
        }
        this.addLine(`for (let ${loopVar} = 0; ${loopVar} < ${l}; ${loopVar}++) {`);
        this.target.indentLevel++;
-        this.addLine(`ctx[\`${ast.elem}\`] = ${vals}[${loopVar}];`);
+        this.addLine(`ctx[\`${ast.elem}\`] = ${keys}[${loopVar}];`);
        if (!ast.hasNoFirst) {
            this.addLine(`ctx[\`${ast.elem}_first\`] = ${loopVar} === 0;`);
        }
        if (!ast.hasNoLast) {
-            this.addLine(`ctx[\`${ast.elem}_last\`] = ${loopVar} === ${vals}.length - 1;`);
+            this.addLine(`ctx[\`${ast.elem}_last\`] = ${loopVar} === ${keys}.length - 1;`);
        }
        if (!ast.hasNoIndex) {
            this.addLine(`ctx[\`${ast.elem}_index\`] = ${loopVar};`);
        }
        if (!ast.hasNoValue) {
-            this.addLine(`ctx[\`${ast.elem}_value\`] = ${keys}[${loopVar}];`);
+            this.addLine(`ctx[\`${ast.elem}_value\`] = ${vals}[${loopVar}];`);
        }
        this.define(`key${this.target.loopLevel}`, ast.key ? compileExpr(ast.key) : loopVar);
        if (this.dev) {
@@ -4385,7 +4427,6 @@ class CodeGenerator {
                block,
                index,
                forceNewBlock: !isTSet,
-                preventRoot: ctx.preventRoot,
                isLast: ctx.isLast && i === l - 1,
            });
            this.compileAST(child, subCtx);
@@ -4394,21 +4435,19 @@ class CodeGenerator {
            }
        }
        if (isNewBlock) {
-            if (block.hasDynamicChildren) {
-                if (block.children.length) {
-                    const code = this.target.code;
-                    const children = block.children.slice();
-                    let current = children.shift();
-                    for (let i = codeIdx; i < code.length; i++) {
-                        if (code[i].trimStart().startsWith(`const ${current.varName} `)) {
-                            code[i] = code[i].replace(`const ${current.varName}`, current.varName);
-                            current = children.shift();
-                            if (!current)
-                                break;
-                        }
+            if (block.hasDynamicChildren && block.children.length) {
+                const code = this.target.code;
+                const children = block.children.slice();
+                let current = children.shift();
+                for (let i = codeIdx; i < code.length; i++) {
+                    if (code[i].trimStart().startsWith(`const ${current.varName} `)) {
+                        code[i] = code[i].replace(`const ${current.varName}`, current.varName);
+                        current = children.shift();
+                        if (!current)
+                            break;
                    }
-                    this.addLine(`let ${block.children.map((c) => c.varName)};`, codeIdx);
                }
+                this.addLine(`let ${block.children.map((c) => c.varName).join(", ")};`, codeIdx);
            }
            const args = block.children.map((c) => c.varName).join(", ");
            this.insertBlock(`multi([${args}])`, block, ctx);
@@ -4422,24 +4461,23 @@ class CodeGenerator {
            ctxVar = generateId("ctx");
            this.addLine(`let ${ctxVar} = ${compileExpr(ast.context)};`);
        }
+        const isDynamic = INTERP_REGEXP.test(ast.name);
+        const subTemplate = isDynamic ? interpolate(ast.name) : "`" + ast.name + "`";
+        if (block && !forceNewBlock) {
+            this.insertAnchor(block);
+        }
+        block = this.createBlock(block, "multi", ctx);
        if (ast.body) {
            this.addLine(`${ctxVar} = Object.create(${ctxVar});`);
            this.addLine(`${ctxVar}[isBoundary] = 1;`);
            this.helpers.add("isBoundary");
-            const subCtx = createContext(ctx, { preventRoot: true, ctxVar });
+            const subCtx = createContext(ctx, { ctxVar });
            const bl = this.compileMulti({ type: 3 /* Multi */, content: ast.body }, subCtx);
            if (bl) {
                this.helpers.add("zero");
                this.addLine(`${ctxVar}[zero] = ${bl};`);
            }
        }
-        const isDynamic = INTERP_REGEXP.test(ast.name);
-        const subTemplate = isDynamic ? interpolate(ast.name) : "`" + ast.name + "`";
-        if (block) {
-            if (!forceNewBlock) {
-                this.insertAnchor(block);
-            }
-        }
        const key = `key + \`${this.generateComponentKey()}\``;
        if (isDynamic) {
            const templateVar = generateId("template");
@@ -4447,7 +4485,6 @@ class CodeGenerator {
                this.staticDefs.push({ id: "call", expr: `app.callTemplate.bind(app)` });
            }
            this.define(templateVar, subTemplate);
-            block = this.createBlock(block, "multi", ctx);
            this.insertBlock(`call(this, ${templateVar}, ${ctxVar}, node, ${key})`, block, {
                ...ctx,
                forceNewBlock: !block,
@@ -4456,7 +4493,6 @@ class CodeGenerator {
        else {
            const id = generateId(`callTemplate_`);
            this.staticDefs.push({ id, expr: `app.getTemplate(${subTemplate})` });
-            block = this.createBlock(block, "multi", ctx);
            this.insertBlock(`${id}.call(this, ${ctxVar}, node, ${key})`, block, {
                ...ctx,
                forceNewBlock: !block,
@@ -4494,11 +4530,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 {
@@ -4777,7 +4814,7 @@ function parse(xml) {
 }
 function _parse(xml) {
    normalizeXML(xml);
-    const ctx = { inPreTag: false, inSVG: false };
+    const ctx = { inPreTag: false };
    return parseNode(xml, ctx) || { type: 0 /* Text */, value: "" };
 }
 function parseNode(node, ctx) {
@@ -4791,10 +4828,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) ||
@@ -4868,9 +4905,7 @@ function parseDOMNode(node, ctx) {
    if (tagName === "pre") {
        ctx.inPreTag = true;
    }
-    const shouldAddSVGNS = ROOT_SVG_TAGS.has(tagName) && !ctx.inSVG;
-    ctx.inSVG = ctx.inSVG || shouldAddSVGNS;
-    const ns = shouldAddSVGNS ? "http://www.w3.org/2000/svg" : null;
+    let ns = !ctx.nameSpace && ROOT_SVG_TAGS.has(tagName) ? "http://www.w3.org/2000/svg" : null;
    const ref = node.getAttribute("t-ref");
    node.removeAttribute("t-ref");
    const nodeAttrsNames = node.getAttributeNames();
@@ -4879,10 +4914,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 +4942,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 +4955,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
@@ -4934,6 +4967,9 @@ function parseDOMNode(node, ctx) {
        else if (attr.startsWith("block-")) {
            throw new OwlError(`Invalid attribute: '${attr}'`);
        }
+        else if (attr === "xmlns") {
+            ns = value;
+        }
        else if (attr !== "t-name") {
            if (attr.startsWith("t-") && !attr.startsWith("t-att")) {
                throw new OwlError(`Unknown QWeb directive: '${attr}'`);
@@ -4946,6 +4982,9 @@ function parseDOMNode(node, ctx) {
            attrs[attr] = value;
        }
    }
+    if (ns) {
+        ctx.nameSpace = ns;
+    }
    const children = parseChildren(node, ctx);
    return {
        type: 2 /* DomNode */,
@@ -4986,9 +5025,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 +5466,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 +5491,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
@@ -5502,11 +5540,20 @@ function compile(template, options = {}) {
    const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext });
    const code = codeGenerator.generateCode();
    // template function
-    return new Function("app, bdom, helpers", code);
+    try {
+        return new Function("app, bdom, helpers", code);
+    }
+    catch (originalError) {
+        const { name } = options;
+        const nameStr = name ? `template "${name}"` : "anonymous template";
+        const err = new OwlError(`Failed to compile ${nameStr}: ${originalError.message}\n\ngenerated code:\nfunction(app, bdom, helpers) {\n${code}\n}`);
+        err.cause = originalError;
+        throw err;
+    }
 }

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

 // -----------------------------------------------------------------------------
 //  Scheduler
@@ -5516,11 +5563,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 +5584,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 +5618,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 +5646,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 = {}) {
@@ -5647,8 +5710,8 @@ class App extends TemplateSet {
    }
    destroy() {
        if (this.root) {
-            this.scheduler.flush();
            this.root.destroy();
+            this.scheduler.processTasks();
        }
        window.__OWL_DEVTOOLS__.apps.delete(this);
    }
@@ -5779,9 +5842,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 +5902,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 +5986,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-24T14:29:32.376Z';
-__info__.hash = 'f9d810a';
+__info__.date = '2023-08-07T10:26:30.557Z';
+__info__.hash = 'b25e988';
 __info__.url = 'https://github.com/odoo/owl';
@@ -43,10 +43,6 @@ class TaskList {
        }
    }

-    toggleTask(task) {
-        task.isCompleted = !task.isCompleted;
-    }
-
    toggleTask(id) {
        const task = this.tasks.find(t => t.id === id);
        task.isCompleted = !task.isCompleted;
@@ -61,7 +57,7 @@ class TaskList {
    clearCompleted() {
        const tasks = this.tasks.filter(t => t.isCompleted);
        for (let task of tasks) {
-            this.deleteTask(task);
+            this.deleteTask(task.id);
        }
    }
    
@@ -1,6 +1,6 @@
 {
  "name": "@odoo/owl",
-  "version": "2.1.2",
+  "version": "2.2.5",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -1,6 +1,6 @@
 {
  "name": "@odoo/owl",
-  "version": "2.1.2",
+  "version": "2.2.5",
  "description": "Odoo Web Library (OWL)",
  "main": "dist/owl.cjs.js",
  "module": "dist/owl.es.js",
@@ -0,0 +1,4 @@
+// Custom error class that wraps error that happen in the owl lifecycle
+export class OwlError extends Error {
+  cause?: any;
+}
@@ -29,7 +29,7 @@ import {
  Attrs,
  EventHandlers,
 } from "./parser";
-import { OwlError } from "../runtime/error_handling";
+import { OwlError } from "../common/owl_error";

 type BlockType = "block" | "text" | "multi" | "list" | "html" | "comment";
 const whitespaceRE = /\s+/g;
@@ -160,7 +160,6 @@ interface Context {
  block: BlockDescription | null;
  index: number | string;
  forceNewBlock: boolean;
-  preventRoot?: boolean;
  isLast?: boolean;
  translate: boolean;
  tKeyExpr: string | null;
@@ -377,7 +376,7 @@ export class CodeGenerator {
  ): BlockDescription {
    const hasRoot = this.target.hasRoot;
    const block = new BlockDescription(this.target, type);
-    if (!hasRoot && !ctx.preventRoot) {
+    if (!hasRoot) {
      this.target.hasRoot = true;
      block.isRoot = true;
    }
@@ -403,7 +402,7 @@ export class CodeGenerator {
      blockExpr = `toggler(${ctx.tKeyExpr}, ${blockExpr})`;
    }

-    if (block.isRoot && !ctx.preventRoot) {
+    if (block.isRoot) {
      if (this.target.on) {
        blockExpr = this.wrapWithEventCatcher(blockExpr, this.target.on);
      }
@@ -447,6 +446,11 @@ export class CodeGenerator {
      .join("");
  }

+  translate(str: string): string {
+    const match = translationRE.exec(str) as any;
+    return match[1] + this.translateFn(match[2]) + match[3];
+  }
+
  /**
   * @returns the newly created block name, if any
   */
@@ -527,8 +531,7 @@ export class CodeGenerator {

    let value = ast.value;
    if (value && ctx.translate !== false) {
-      const match = translationRE.exec(value) as any;
-      value = match[1] + this.translateFn(match[2]) + match[3];
+      value = this.translate(value);
    }
    if (!ctx.inPreTag) {
      value = value.replace(whitespaceRE, " ");
@@ -582,11 +585,6 @@ export class CodeGenerator {
    }
    // attributes
    const attrs: Attrs = {};
-    const nameSpace = ast.ns || ctx.nameSpace;
-    if (nameSpace && isNewBlock) {
-      // specific namespace uri
-      attrs["block-ns"] = nameSpace;
-    }

    for (let key in ast.attrs) {
      let expr, attrName;
@@ -715,7 +713,10 @@ export class CodeGenerator {
      attrs["block-ref"] = String(idx);
    }

-    const dom = xmlDoc.createElement(ast.tag);
+    const nameSpace = ast.ns || ctx.nameSpace;
+    const dom = nameSpace
+      ? xmlDoc.createElementNS(nameSpace, ast.tag)
+      : xmlDoc.createElement(ast.tag);
    for (const [attr, val] of Object.entries(attrs)) {
      if (!(attr === "class" && val === "")) {
        dom.setAttribute(attr, val);
@@ -757,7 +758,7 @@ export class CodeGenerator {
            if (!current) break;
          }
        }
-        this.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
+        this.addLine(`let ${block!.children.map((c) => c.varName).join(", ")};`, codeIdx);
      }
    }
    return block!.varName;
@@ -859,7 +860,7 @@ export class CodeGenerator {
            if (!current) break;
          }
        }
-        this.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
+        this.addLine(`let ${block!.children.map((c) => c.varName).join(", ")};`, codeIdx);
      }

      // note: this part is duplicated from end of compilemulti:
@@ -890,18 +891,18 @@ export class CodeGenerator {
    }
    this.addLine(`for (let ${loopVar} = 0; ${loopVar} < ${l}; ${loopVar}++) {`);
    this.target.indentLevel++;
-    this.addLine(`ctx[\`${ast.elem}\`] = ${vals}[${loopVar}];`);
+    this.addLine(`ctx[\`${ast.elem}\`] = ${keys}[${loopVar}];`);
    if (!ast.hasNoFirst) {
      this.addLine(`ctx[\`${ast.elem}_first\`] = ${loopVar} === 0;`);
    }
    if (!ast.hasNoLast) {
-      this.addLine(`ctx[\`${ast.elem}_last\`] = ${loopVar} === ${vals}.length - 1;`);
+      this.addLine(`ctx[\`${ast.elem}_last\`] = ${loopVar} === ${keys}.length - 1;`);
    }
    if (!ast.hasNoIndex) {
      this.addLine(`ctx[\`${ast.elem}_index\`] = ${loopVar};`);
    }
    if (!ast.hasNoValue) {
-      this.addLine(`ctx[\`${ast.elem}_value\`] = ${keys}[${loopVar}];`);
+      this.addLine(`ctx[\`${ast.elem}_value\`] = ${vals}[${loopVar}];`);
    }
    this.define(`key${this.target.loopLevel}`, ast.key ? compileExpr(ast.key) : loopVar);
    if (this.dev) {
@@ -985,7 +986,6 @@ export class CodeGenerator {
        block,
        index,
        forceNewBlock: !isTSet,
-        preventRoot: ctx.preventRoot,
        isLast: ctx.isLast && i === l - 1,
      });
      this.compileAST(child, subCtx);
@@ -994,20 +994,18 @@ export class CodeGenerator {
      }
    }
    if (isNewBlock) {
-      if (block!.hasDynamicChildren) {
-        if (block!.children.length) {
-          const code = this.target.code;
-          const children = block!.children.slice();
-          let current = children.shift();
-          for (let i = codeIdx; i < code.length; i++) {
-            if (code[i].trimStart().startsWith(`const ${current!.varName} `)) {
-              code[i] = code[i].replace(`const ${current!.varName}`, current!.varName);
-              current = children.shift();
-              if (!current) break;
-            }
+      if (block!.hasDynamicChildren && block!.children.length) {
+        const code = this.target.code;
+        const children = block!.children.slice();
+        let current = children.shift();
+        for (let i = codeIdx; i < code.length; i++) {
+          if (code[i].trimStart().startsWith(`const ${current!.varName} `)) {
+            code[i] = code[i].replace(`const ${current!.varName}`, current!.varName);
+            current = children.shift();
+            if (!current) break;
          }
-          this.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
        }
+        this.addLine(`let ${block!.children.map((c) => c.varName).join(", ")};`, codeIdx);
      }

      const args = block!.children.map((c) => c.varName).join(", ");
@@ -1023,24 +1021,24 @@ export class CodeGenerator {
      ctxVar = generateId("ctx");
      this.addLine(`let ${ctxVar} = ${compileExpr(ast.context)};`);
    }
+    const isDynamic = INTERP_REGEXP.test(ast.name);
+    const subTemplate = isDynamic ? interpolate(ast.name) : "`" + ast.name + "`";
+    if (block && !forceNewBlock) {
+      this.insertAnchor(block);
+    }
+    block = this.createBlock(block, "multi", ctx);
    if (ast.body) {
      this.addLine(`${ctxVar} = Object.create(${ctxVar});`);
      this.addLine(`${ctxVar}[isBoundary] = 1;`);
      this.helpers.add("isBoundary");
-      const subCtx = createContext(ctx, { preventRoot: true, ctxVar });
+      const subCtx = createContext(ctx, { ctxVar });
      const bl = this.compileMulti({ type: ASTType.Multi, content: ast.body }, subCtx);
      if (bl) {
        this.helpers.add("zero");
        this.addLine(`${ctxVar}[zero] = ${bl};`);
      }
    }
-    const isDynamic = INTERP_REGEXP.test(ast.name);
-    const subTemplate = isDynamic ? interpolate(ast.name) : "`" + ast.name + "`";
-    if (block) {
-      if (!forceNewBlock) {
-        this.insertAnchor(block);
-      }
-    }
+
    const key = `key + \`${this.generateComponentKey()}\``;
    if (isDynamic) {
      const templateVar = generateId("template");
@@ -1048,7 +1046,6 @@ export class CodeGenerator {
        this.staticDefs.push({ id: "call", expr: `app.callTemplate.bind(app)` });
      }
      this.define(templateVar, subTemplate);
-      block = this.createBlock(block, "multi", ctx);
      this.insertBlock(`call(this, ${templateVar}, ${ctxVar}, node, ${key})`, block!, {
        ...ctx,
        forceNewBlock: !block,
@@ -1056,7 +1053,6 @@ export class CodeGenerator {
    } else {
      const id = generateId(`callTemplate_`);
      this.staticDefs.push({ id, expr: `app.getTemplate(${subTemplate})` });
-      block = this.createBlock(block, "multi", ctx);
      this.insertBlock(`${id}.call(this, ${ctxVar}, node, ${key})`, block!, {
        ...ctx,
        forceNewBlock: !block,
@@ -1095,10 +1091,11 @@ export class CodeGenerator {
    } else {
      let value: string;
      if (ast.defaultValue) {
+        const defaultValue = ctx.translate ? this.translate(ast.defaultValue) : ast.defaultValue;
        if (ast.value) {
-          value = `withDefault(${expr}, \`${ast.defaultValue}\`)`;
+          value = `withDefault(${expr}, \`${defaultValue}\`)`;
        } else {
-          value = `\`${ast.defaultValue}\``;
+          value = `\`${defaultValue}\``;
        }
      } else {
        value = expr;
@@ -2,6 +2,7 @@ import type { TemplateSet } from "../runtime/template_set";
 import type { BDom } from "../runtime/blockdom";
 import { CodeGenerator, Config } from "./code_generator";
 import { parse } from "./parser";
+import { OwlError } from "../common/owl_error";

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

@@ -27,5 +28,15 @@ export function compile(
  const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext });
  const code = codeGenerator.generateCode();
  // template function
-  return new Function("app, bdom, helpers", code) as TemplateFunction;
+  try {
+    return new Function("app, bdom, helpers", code) as TemplateFunction;
+  } catch (originalError: any) {
+    const { name } = options;
+    const nameStr = name ? `template "${name}"` : "anonymous template";
+    const err = new OwlError(
+      `Failed to compile ${nameStr}: ${originalError.message}\n\ngenerated code:\nfunction(app, bdom, helpers) {\n${code}\n}`
+    );
+    err.cause = originalError;
+    throw err;
+  }
 }
@@ -1,4 +1,4 @@
-import { OwlError } from "../runtime/error_handling";
+import { OwlError } from "../common/owl_error";

 /**
 * Owl QWeb Expression Parser
@@ -1,4 +1,4 @@
-import { OwlError } from "../runtime/error_handling";
+import { OwlError } from "../common/owl_error";

 // -----------------------------------------------------------------------------
 // AST Type definition
@@ -213,14 +213,14 @@ export function parse(xml: string | Element): AST {

 function _parse(xml: Element): AST {
  normalizeXML(xml);
-  const ctx = { inPreTag: false, inSVG: false };
+  const ctx = { inPreTag: false };
  return parseNode(xml, ctx) || { type: ASTType.Text, value: "" };
 }

 interface ParsingContext {
  tModelInfo?: TModelInfo | null;
+  nameSpace?: string;
  inPreTag: boolean;
-  inSVG: boolean;
 }

 function parseNode(node: Node, ctx: ParsingContext): AST | null {
@@ -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) ||
@@ -323,9 +323,8 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
  if (tagName === "pre") {
    ctx.inPreTag = true;
  }
-  const shouldAddSVGNS = ROOT_SVG_TAGS.has(tagName) && !ctx.inSVG;
-  ctx.inSVG = ctx.inSVG || shouldAddSVGNS;
-  const ns = shouldAddSVGNS ? "http://www.w3.org/2000/svg" : null;
+
+  let ns = !ctx.nameSpace && ROOT_SVG_TAGS.has(tagName) ? "http://www.w3.org/2000/svg" : null;
  const ref = node.getAttribute("t-ref");
  node.removeAttribute("t-ref");

@@ -336,10 +335,10 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | 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;
    } else if (attr.startsWith("t-model")) {
@@ -365,10 +364,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 +378,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
@@ -391,6 +388,8 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
      }
    } else if (attr.startsWith("block-")) {
      throw new OwlError(`Invalid attribute: '${attr}'`);
+    } else if (attr === "xmlns") {
+      ns = value;
    } else if (attr !== "t-name") {
      if (attr.startsWith("t-") && !attr.startsWith("t-att")) {
        throw new OwlError(`Unknown QWeb directive: '${attr}'`);
@@ -403,6 +402,9 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
      attrs[attr] = value;
    }
  }
+  if (ns) {
+    ctx.nameSpace = ns;
+  }

  const children = parseChildren(node, ctx);
  return {
@@ -446,9 +448,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 +942,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 +970,7 @@ function normalizeTEsc(el: Element) {
 */
 function normalizeXML(el: Element) {
  normalizeTIf(el);
-  normalizeTEsc(el);
+  normalizeTEscTOut(el);
 }

 /**
@@ -1,12 +1,14 @@
 import { version } from "../version";
 import { Component, ComponentConstructor, Props } from "./component";
 import { ComponentNode } from "./component_node";
-import { nodeErrorHandlers, OwlError, handleError } from "./error_handling";
+import { nodeErrorHandlers, handleError } from "./error_handling";
+import { OwlError } from "../common/owl_error";
 import { Fiber, RootFiber, MountOptions } from "./fibers";
 import { Scheduler } from "./scheduler";
 import { validateProps } from "./template_helpers";
 import { TemplateSet, TemplateSetConfig } from "./template_set";
 import { validateTarget } from "./utils";
+import { toRaw, reactive } from "./reactivity";

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

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

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

  destroy() {
    if (this.root) {
-      this.scheduler.flush();
      this.root.destroy();
+      this.scheduler.processTasks();
    }
    window.__OWL_DEVTOOLS__.apps.delete(this);
  }
@@ -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);
+        }
      }
    }
  }
@@ -1,4 +1,4 @@
-import { OwlError } from "../error_handling";
+import { OwlError } from "../../common/owl_error";
 import { attrsSetter, attrsUpdater, createAttrUpdater, setClass, updateClass } from "./attributes";
 import { config } from "./config";
 import { createEventHandler } from "./events";
@@ -144,12 +144,7 @@ function buildTree(
        info.push({ type: "child", idx: index });
        el = document.createTextNode("");
      }
-      const attrs = (node as Element).attributes;
-      const ns = attrs.getNamedItem("block-ns");
-      if (ns) {
-        attrs.removeNamedItem("block-ns");
-        currentNS = ns.value;
-      }
+      currentNS ||= (node as Element).namespaceURI;
      if (!el) {
        el = currentNS
          ? document.createElementNS(currentNS, tagName)
@@ -165,6 +160,7 @@ function buildTree(
          const fragment = document.createElement("template").content;
          fragment.appendChild(el);
        }
+        const attrs = (node as Element).attributes;
        for (let i = 0; i < attrs.length; i++) {
          const attrName = attrs[i].name;
          const attrValue = attrs[i].value;
@@ -1,7 +1,8 @@
 import type { App, Env } from "./app";
 import { BDom, VNode } from "./blockdom";
 import { Component, ComponentConstructor, Props } from "./component";
-import { fibersInError, OwlError } from "./error_handling";
+import { fibersInError } from "./error_handling";
+import { OwlError } from "../common/owl_error";
 import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
 import { clearReactivesForCallback, getSubscriptions, reactive, targets } from "./reactivity";
 import { STATUS } from "./status";
@@ -145,6 +146,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 +175,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 +194,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();
@@ -1,11 +1,7 @@
+import { OwlError } from "../common/owl_error";
 import type { ComponentNode } from "./component_node";
 import type { Fiber } from "./fibers";

-// Custom error class that wraps error that happen in the owl lifecycle
-export class OwlError extends Error {
-  cause?: any;
-}
-
 // Maps fibers to thrown errors
 export const fibersInError: WeakMap<Fiber, any> = new WeakMap();
 export const nodeErrorHandlers: WeakMap<ComponentNode, ((error: any) => void)[]> = new WeakMap();
@@ -51,17 +47,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) {
@@ -1,6 +1,6 @@
 import { filterOutModifiersFromData } from "./blockdom/config";
 import { STATUS } from "./status";
-import { OwlError } from "./error_handling";
+import { OwlError } from "../common/owl_error";

 export const mainEventHandler = (data: any, ev: Event, currentTarget?: EventTarget | null) => {
  const { data: _data, modifiers } = filterOutModifiersFromData(data);
@@ -1,6 +1,7 @@
 import { BDom, mount } from "./blockdom";
 import type { ComponentNode } from "./component_node";
-import { fibersInError, OwlError } from "./error_handling";
+import { fibersInError } from "./error_handling";
+import { OwlError } from "../common/owl_error";
 import { STATUS } from "./status";

 export function makeChildFiber(node: ComponentNode, parent: Fiber): Fiber {
@@ -55,8 +56,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) {
@@ -59,28 +59,35 @@ export function useChildSubEnv(envExtension: Env) {
 // useEffect
 // -----------------------------------------------------------------------------

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

 /**
 * This hook will run a callback when a component is mounted and patched, and
 * will run a cleanup function before patching and before unmounting the
 * the component.
 *
- * @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
 *      NaN !== NaN, which will cause the effect to rerun on every patch.
 */
-export function useEffect(effect: Effect, computeDependencies: () => any[] = () => [NaN]) {
+export function useEffect<T extends [...T]>(
+  effect: Effect<T>,
+  computeDependencies: () => T = () => [NaN] as never
+) {
  let cleanup: (() => void) | void;
-  let dependencies: any[];
+  let dependencies: T;
  onMounted(() => {
    dependencies = computeDependencies();
    cleanup = effect(...dependencies);
@@ -55,7 +55,7 @@ export {
  onError,
 } from "./lifecycle_hooks";
 export { validate, validateType } from "./validation";
-export { OwlError } from "./error_handling";
+export { OwlError } from "../common/owl_error";

 export const __info__ = {
  version: App.version,
@@ -1,5 +1,6 @@
 import { getCurrent } from "./component_node";
-import { nodeErrorHandlers, OwlError } from "./error_handling";
+import { nodeErrorHandlers } from "./error_handling";
+import { OwlError } from "../common/owl_error";

 const TIMEOUT = Symbol("timeout");
 function wrapError(fn: (...args: any[]) => any, hookName: string) {
@@ -1,7 +1,7 @@
 import { onMounted, onWillUnmount } from "./lifecycle_hooks";
 import { BDom, text, VNode } from "./blockdom";
 import { Component } from "./component";
-import { OwlError } from "./error_handling";
+import { OwlError } from "../common/owl_error";

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

@@ -1,5 +1,5 @@
 import type { Callback } from "./utils";
-import { OwlError } from "./error_handling";
+import { OwlError } from "../common/owl_error";

 // Special key to subscribe to, to be notified of key creation/deletion
 const KEYCHANGES = Symbol("Key changes");
@@ -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);
+      }
    }
  }

@@ -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:
@@ -4,7 +4,7 @@ import { html } from "./blockdom/index";
 import { isOptional, validateSchema } from "./validation";
 import type { ComponentConstructor } from "./component";
 import { markRaw } from "./reactivity";
-import { OwlError } from "./error_handling";
+import { OwlError } from "../common/owl_error";
 import type { ComponentNode } from "./component_node";

 const ObjectCreate = Object.create;
@@ -60,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.values(collection);
+      keys = Object.keys(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)];
@@ -3,7 +3,7 @@ import { comment, createBlock, html, list, multi, text, toggler } from "./blockd
 import { getCurrent } from "./component_node";
 import { Portal, portalTemplate } from "./portal";
 import { helpers } from "./template_helpers";
-import { OwlError } from "./error_handling";
+import { OwlError } from "../common/owl_error";

 const bdom = { text, createBlock, list, multi, html, toggler, comment };

@@ -125,7 +125,7 @@ export class TemplateSet {

  callTemplate(owner: any, subTemplate: string, ctx: any, parent: any, key: any): any {
    const template = this.getTemplate(subTemplate);
-    return toggler(subTemplate, template.call(owner, ctx, parent, key));
+    return toggler(subTemplate, template.call(owner, ctx, parent, key + subTemplate));
  }
 }

@@ -1,4 +1,4 @@
-import { OwlError } from "./error_handling";
+import { OwlError } from "../common/owl_error";
 export type Callback = () => void;

 /**
@@ -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);
    }
  };
 }
@@ -1,4 +1,4 @@
-import { OwlError } from "./error_handling";
+import { OwlError } from "../common/owl_error";
 import { toRaw } from "./reactivity";

 type BaseType =
@@ -1,2 +1,2 @@
 // do not modify manually. This file is generated by the release script.
-export const version = "2.1.2";
+export const version = "2.2.5";
@@ -353,7 +353,7 @@ exports[`Reactivity: useState useless atoms should be deleted 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Object.keys(ctx['state']));;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`id\`] = v_block2[i1];
+      ctx[\`id\`] = k_block2[i1];
      const key1 = ctx['id'];
      c_block2[i1] = withKey(comp1({id: ctx['id']}, key + \`__1__\${key1}\`, node, this, null), key1);
    }
@@ -15,6 +15,34 @@ exports[`app App supports env with getters/setters 1`] = `
 }"
 `;

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

 let fixture: HTMLElement;

@@ -94,4 +102,44 @@ describe("app", () => {
    expect(iframeDoc.contains(div)).toBe(false);
    expect(status(comp)).toBe("destroyed");
  });
+
+  test("app: clear scheduler tasks and destroy cancelled nodes immediately on destroy", async () => {
+    let def = makeDeferred();
+    class B extends Component {
+      static template = xml`B`;
+      setup() {
+        useLogLifecycle();
+        onWillStart(() => def);
+      }
+    }
+    class A extends Component {
+      static template = xml`A<t t-if="state.value"><B/></t>`;
+      static components = { B };
+      state = useState({ value: false });
+      setup() {
+        useLogLifecycle();
+      }
+    }
+
+    const app = new App(A);
+    const comp = await app.mount(fixture);
+    expect(["A:setup", "A:willStart", "A:willRender", "A:rendered", "A:mounted"]).toBeLogged();
+
+    comp.state.value = true;
+    await nextTick();
+    expect(["A:willRender", "B:setup", "B:willStart", "A:rendered"]).toBeLogged();
+
+    // rerender to force the instantiation of a new B component (and cancelling the first)
+    comp.render();
+    await nextMicroTick();
+    expect(["A:willRender", "B:setup", "B:willStart", "A:rendered"]).toBeLogged();
+
+    app.destroy();
+    expect([
+      "A:willUnmount",
+      "B:willDestroy",
+      "A:willDestroy",
+      "B:willDestroy", // make sure the 2 B instances have been destroyed synchronously
+    ]).toBeLogged();
+  });
 });
@@ -244,12 +244,14 @@ describe("misc", () => {
  });

  test("namespace is not propagated to siblings", () => {
-    const block = createBlock(`<div><svg block-ns="someNameSpace"><g/></svg><div></div></div>`);
+    const block = createBlock(`<div><svg xmlns="someNameSpace"><g/></svg><div></div></div>`);

    const fixture = makeTestFixture();
    mount(block(), fixture);

-    expect(fixture.innerHTML).toBe("<div><svg><g></g></svg><div></div></div>");
+    expect(fixture.innerHTML).toBe(
+      '<div><svg xmlns="someNameSpace"><g></g></svg><div></div></div>'
+    );
    expect(fixture.querySelector("svg")!.namespaceURI).toBe("someNameSpace");
    expect(fixture.querySelector("g")!.namespaceURI).toBe("someNameSpace");
    const allDivs = fixture.querySelectorAll("div");
@@ -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>`);
+});
@@ -30,22 +30,22 @@ describe("namespace", () => {
    expect(fixture.firstElementChild!.namespaceURI).toBe(XHTML_URI);
  });

-  test("namespace can be changed with block-ns", () => {
-    const block = createBlock(`<tag block-ns="${SVG_URI}"/>`);
+  test("namespace can be changed with xmlns", () => {
+    const block = createBlock(`<tag xmlns="${SVG_URI}"/>`);
    const tree = block();
    mount(tree, fixture);
-    expect(fixture.innerHTML).toBe("<tag></tag>");
+    expect(fixture.innerHTML).toBe(`<tag xmlns="${SVG_URI}"></tag>`);
    expect(fixture.firstElementChild!.namespaceURI).toBe(SVG_URI);
  });

  test("namespace is kept for children", () => {
    const block = createBlock(
-      `<parent block-ns="${SVG_URI}"><child><subchild/></child><child/></parent>`
+      `<parent xmlns="${SVG_URI}"><child><subchild/></child><child/></parent>`
    );
    const tree = block();
    mount(tree, fixture);
    expect(fixture.innerHTML).toBe(
-      "<parent><child><subchild></subchild></child><child></child></parent>"
+      `<parent xmlns="${SVG_URI}"><child><subchild></subchild></child><child></child></parent>`
    );
    const parent = fixture.firstElementChild!;
    const child1 = parent.firstElementChild!;
@@ -58,10 +58,10 @@ describe("namespace", () => {
  });

  test("various namespaces in same block", () => {
-    const block = createBlock(`<none><one block-ns="one"/><two block-ns="two"/></none>`);
+    const block = createBlock(`<none><one xmlns="one"/><two xmlns="two"/></none>`);
    const tree = block();
    mount(tree, fixture);
-    expect(fixture.innerHTML).toBe("<none><one></one><two></two></none>");
+    expect(fixture.innerHTML).toBe('<none><one xmlns="one"></one><two xmlns="two"></two></none>');
    const none = fixture.firstElementChild!;
    const one = none.firstElementChild!;
    const two = one.nextElementSibling!;
@@ -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
 ) {
@@ -34,7 +34,7 @@ exports[`comments properly handle comments between t-if/t-else 1`] = `
  let block3 = createBlock(\`<span>owl</span>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (true) {
      b2 = block2();
    } else {
@@ -72,7 +72,7 @@ exports[`t-on can bind handlers with empty object (with non empty inner string)
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['someval']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`action\`] = v_block2[i1];
+      ctx[\`action\`] = k_block2[i1];
      ctx[\`action_index\`] = i1;
      const key1 = ctx['action_index'];
      const v1 = ctx['activate'];
@@ -142,7 +142,7 @@ exports[`t-on handler is bound to proper owner, part 2 1`] = `
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1]);;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`value\`] = v_block1[i1];
+      ctx[\`value\`] = k_block1[i1];
      const key1 = ctx['value'];
      let hdlr1 = [ctx['add'], ctx];
      c_block1[i1] = withKey(block2([hdlr1]), key1);
@@ -189,11 +189,11 @@ exports[`t-on handler is bound to proper owner, part 4 1`] = `
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1]);;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`value\`] = v_block1[i1];
+      ctx[\`value\`] = k_block1[i1];
      ctx[\`value_first\`] = i1 === 0;
-      ctx[\`value_last\`] = i1 === v_block1.length - 1;
+      ctx[\`value_last\`] = i1 === k_block1.length - 1;
      ctx[\`value_index\`] = i1;
-      ctx[\`value_value\`] = k_block1[i1];
+      ctx[\`value_value\`] = v_block1[i1];
      const key1 = ctx['value'];
      c_block1[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
    }
@@ -348,7 +348,7 @@ exports[`t-on t-on modifiers (native listener) t-on with prevent modifier in t-f
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['projects']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`project\`] = v_block2[i1];
+      ctx[\`project\`] = k_block2[i1];
      const key1 = ctx['project'];
      const v1 = ctx['onEdit'];
      const v2 = ctx['project'];
@@ -18,7 +18,7 @@ exports[`misc complex template 1`] = `
  let block13 = createBlock(\`<i class=\\"fa fa-fw fa-clock-o\\" title=\\"This commit is the head of a base branch\\"/>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4,b6,b8;
+    let b2, b3, b4, b6, b8;
    let attr1 = \`batch_tile \${ctx['options'].more?'more':'nomore'}\`;
    let attr2 = \`card bg-\${ctx['klass']}-light\`;
    let attr3 = \`/runbot/batch/\${ctx['batch'].id}\`;
@@ -33,7 +33,7 @@ exports[`misc complex template 1`] = `
    ctx = Object.create(ctx);
    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['batch'].slot_ids.filter(_slot=>_slot.build_id.id&&!_slot.trigger_id.manual&&(ctx['options'].trigger_display[_slot.trigger_id.id])));;
    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`slot\`] = v_block4[i1];
+      ctx[\`slot\`] = k_block4[i1];
      const key1 = ctx['slot'].id;
      c_block4[i1] = withKey(comp1({class: ctx['slot_container'],slot: ctx['slot']}, key + \`__1__\${key1}\`, node, this, null), key1);
    }
@@ -42,7 +42,7 @@ exports[`misc complex template 1`] = `
    ctx = Object.create(ctx);
    const [k_block6, v_block6, l_block6, c_block6] = prepareList([1,2,3,4]);;
    for (let i1 = 0; i1 < l_block6; i1++) {
-      ctx[\`x\`] = v_block6[i1];
+      ctx[\`x\`] = k_block6[i1];
      const key1 = ctx['x'];
      c_block6[i1] = withKey(block7(), key1);
    }
@@ -51,9 +51,9 @@ exports[`misc complex template 1`] = `
    ctx = Object.create(ctx);
    const [k_block8, v_block8, l_block8, c_block8] = prepareList(ctx['commit_links']);;
    for (let i1 = 0; i1 < l_block8; i1++) {
-      ctx[\`commit_link\`] = v_block8[i1];
+      ctx[\`commit_link\`] = k_block8[i1];
      const key1 = ctx['commit_link'].id;
-      let b10,b11,b12,b13;
+      let b10, b11, b12, b13;
      let attr5 = \`/runbot/commit/\${ctx['commit_link'].commit_id}\`;
      let attr6 = \`badge badge-light batch_commit match_type_\${ctx['commit_link'].match_type}\`;
      if (ctx['commit_link'].match_type=='new') {
@@ -99,11 +99,11 @@ exports[`misc global 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList([4,5,6]);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`value\`] = v_block2[i1];
+      ctx[\`value\`] = k_block2[i1];
      ctx[\`value_first\`] = i1 === 0;
-      ctx[\`value_last\`] = i1 === v_block2.length - 1;
+      ctx[\`value_last\`] = i1 === k_block2.length - 1;
      ctx[\`value_index\`] = i1;
-      ctx[\`value_value\`] = k_block2[i1];
+      ctx[\`value_value\`] = v_block2[i1];
      const key1 = ctx['value'];
      let txt1 = ctx['value'];
      const b4 = block4([txt1]);
@@ -112,16 +112,16 @@ exports[`misc global 1`] = `
      ctx = Object.create(ctx);
      ctx[isBoundary] = 1;
      setContextValue(ctx, \\"foo\\", 'aaa');
-      const b6 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
+      const b7 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
      ctx = ctx.__proto__;
-      const b7 = callTemplate_2.call(this, ctx, node, key + \`__2__\${key1}\`);
+      const b8 = callTemplate_2.call(this, ctx, node, key + \`__2__\${key1}\`);
      setContextValue(ctx, \\"foo\\", 'bbb');
-      const b8 = callTemplate_3.call(this, ctx, node, key + \`__3__\${key1}\`);
-      const b5 = multi([b6, b7, b8]);
-      ctx[zero] = b5;
-      const b9 = callTemplate_4.call(this, ctx, node, key + \`__4__\${key1}\`);
+      const b9 = callTemplate_3.call(this, ctx, node, key + \`__3__\${key1}\`);
+      const b6 = multi([b7, b8, b9]);
+      ctx[zero] = b6;
+      const b5 = callTemplate_4.call(this, ctx, node, key + \`__4__\${key1}\`);
      ctx = ctx.__proto__;
-      c_block2[i1] = withKey(multi([b4, b9]), key1);
+      c_block2[i1] = withKey(multi([b4, b5]), key1);
    }
    ctx = ctx.__proto__;
    const b2 = list(c_block2);
@@ -217,13 +217,13 @@ exports[`misc other complex template 1`] = `
  let block25 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b4,b14,b17,b22,b23,b24,b25;
+    let b2, b4, b14, b17, b22, b23, b24, b25;
    let attr1 = \`/runbot/\${ctx['project'].slug}\`;
    let txt1 = ctx['project'].name;
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['projects']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`project\`] = v_block2[i1];
+      ctx[\`project\`] = k_block2[i1];
      const key1 = ctx['project'].id;
      let hdlr1 = [ctx['selectProject'](ctx['project']), ctx];
      let txt2 = ctx['project'].name;
@@ -232,12 +232,12 @@ exports[`misc other complex template 1`] = `
    ctx = ctx.__proto__;
    b2 = list(c_block2);
    if (ctx['user']) {
-      let b5,b6;
+      let b5, b6;
      if (ctx['user'].public) {
        let attr2 = \`/web/login?redirect=/\`;
        b5 = block5([attr2]);
      } else {
-        let b7,b10,b13;
+        let b7, b10, b13;
        if (ctx['nb_assigned_errors']&&ctx['nb_assigned_errors']>0) {
          let attr3 = \`You have \${ctx['nb_assigned_errors']} random bug assigned\`;
          let txt3 = ctx['nb_assigned_errors'];
@@ -263,7 +263,7 @@ exports[`misc other complex template 1`] = `
      ctx = Object.create(ctx);
      const [k_block15, v_block15, l_block15, c_block15] = prepareList(ctx['categories']);;
      for (let i1 = 0; i1 < l_block15; i1++) {
-        ctx[\`category\`] = v_block15[i1];
+        ctx[\`category\`] = k_block15[i1];
        const key1 = ctx['category'].id;
        let attr6 = ctx['category'].id;
        let prop1 = new Boolean(ctx['category'].id==ctx['options'].active_category_id);
@@ -284,7 +284,7 @@ exports[`misc other complex template 1`] = `
      ctx = Object.create(ctx);
      const [k_block18, v_block18, l_block18, c_block18] = prepareList(ctx['triggers']);;
      for (let i1 = 0; i1 < l_block18; i1++) {
-        ctx[\`trigger\`] = v_block18[i1];
+        ctx[\`trigger\`] = k_block18[i1];
        const key1 = ctx['trigger'].id;
        let b20;
        if (!ctx['trigger'].manual&&ctx['trigger'].project_id===ctx['project'].id&&ctx['trigger'].category_id===ctx['options'].active_category_id) {
@@ -12,7 +12,7 @@ exports[`memory t-foreach does not leak stuff in global scope 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item\`] = k_block2[i1];
      ctx[\`item_index\`] = i1;
      const key1 = ctx['item_index'];
      c_block2[i1] = withKey(text(ctx['item']), key1);
@@ -5,7 +5,7 @@ exports[`properly support svg add proper namespace to g tags 1`] = `
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  
-  let block1 = createBlock(\`<g block-ns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/> </g>\`);
+  let block1 = createBlock(\`<g xmlns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/> </g>\`);
  
  return function template(ctx, node, key = \\"\\") {
    return block1();
@@ -18,7 +18,7 @@ exports[`properly support svg add proper namespace to svg 1`] = `
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  
-  let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\" width=\\"100px\\" height=\\"90px\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/> </svg>\`);
+  let block1 = createBlock(\`<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"100px\\" height=\\"90px\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/> </svg>\`);
  
  return function template(ctx, node, key = \\"\\") {
    return block1();
@@ -31,7 +31,7 @@ exports[`properly support svg namespace to g tags not added if already in svg na
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  
-  let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><g/></svg>\`);
+  let block1 = createBlock(\`<svg xmlns=\\"http://www.w3.org/2000/svg\\"><g/></svg>\`);
  
  return function template(ctx, node, key = \\"\\") {
    return block1();
@@ -44,7 +44,7 @@ exports[`properly support svg namespace to svg tags added even if already in svg
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  
-  let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><svg/></svg>\`);
+  let block1 = createBlock(\`<svg xmlns=\\"http://www.w3.org/2000/svg\\"><svg/></svg>\`);
  
  return function template(ctx, node, key = \\"\\") {
    return block1();
@@ -58,8 +58,8 @@ exports[`properly support svg svg creates new block if it is within html -- 2 1`
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block2 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><polygon fill=\\"#000000\\" points=\\"0 0 4 4 8 0\\" transform=\\"translate(5 7)\\"/><block-child-0/></svg>\`);
-  let block3 = createBlock(\`<path block-ns=\\"http://www.w3.org/2000/svg\\"/>\`);
+  let block2 = createBlock(\`<svg xmlns=\\"http://www.w3.org/2000/svg\\"><polygon fill=\\"#000000\\" points=\\"0 0 4 4 8 0\\" transform=\\"translate(5 7)\\"/><block-child-0 xmlns=\\"\\"/></svg>\`);
+  let block3 = createBlock(\`<path xmlns=\\"http://www.w3.org/2000/svg\\"/>\`);
  
  return function template(ctx, node, key = \\"\\") {
    let b3;
@@ -78,7 +78,7 @@ exports[`properly support svg svg creates new block if it is within html 1`] = `
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block2 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><polygon fill=\\"#000000\\" points=\\"0 0 4 4 8 0\\" transform=\\"translate(5 7)\\"/></svg>\`);
+  let block2 = createBlock(\`<svg xmlns=\\"http://www.w3.org/2000/svg\\"><polygon fill=\\"#000000\\" points=\\"0 0 4 4 8 0\\" transform=\\"translate(5 7)\\"/></svg>\`);
  
  return function template(ctx, node, key = \\"\\") {
    const b2 = block2();
@@ -93,7 +93,7 @@ exports[`properly support svg svg namespace added to sub templates if root tag i
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`path\`);
  
-  let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
+  let block1 = createBlock(\`<svg xmlns=\\"http://www.w3.org/2000/svg\\"><block-child-0 xmlns=\\"\\"/></svg>\`);
  
  return function template(ctx, node, key = \\"\\") {
    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
@@ -107,7 +107,7 @@ exports[`properly support svg svg namespace added to sub templates if root tag i
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  
-  let block1 = createBlock(\`<path block-ns=\\"http://www.w3.org/2000/svg\\"/>\`);
+  let block1 = createBlock(\`<path xmlns=\\"http://www.w3.org/2000/svg\\"/>\`);
  
  return function template(ctx, node, key = \\"\\") {
    return block1();
@@ -120,8 +120,8 @@ exports[`properly support svg svg namespace added to sub-blocks 1`] = `
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  
-  let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
-  let block2 = createBlock(\`<path block-ns=\\"http://www.w3.org/2000/svg\\"/>\`);
+  let block1 = createBlock(\`<svg xmlns=\\"http://www.w3.org/2000/svg\\"><block-child-0 xmlns=\\"\\"/></svg>\`);
+  let block2 = createBlock(\`<path xmlns=\\"http://www.w3.org/2000/svg\\"/>\`);
  
  return function template(ctx, node, key = \\"\\") {
    let b2;
@@ -61,19 +61,19 @@ exports[`t-call (template calling) call with several sub nodes on same line 1`]
  const callTemplate_1 = app.getTemplate(\`sub\`);
  
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<span>hey</span>\`);
-  let block5 = createBlock(\`<span>yay</span>\`);
+  let block4 = createBlock(\`<span>hey</span>\`);
+  let block6 = createBlock(\`<span>yay</span>\`);
  
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1;
-    const b3 = block3();
-    const b4 = text(\` \`);
-    const b5 = block5();
-    const b2 = multi([b3, b4, b5]);
-    ctx[zero] = b2;
-    const b6 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    return block1([], [b6]);
+    const b4 = block4();
+    const b5 = text(\` \`);
+    const b6 = block6();
+    const b3 = multi([b4, b5, b6]);
+    ctx[zero] = b3;
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
  }
 }"
 `;
@@ -101,19 +101,19 @@ exports[`t-call (template calling) cascading t-call t-out='0' 1`] = `
  const callTemplate_1 = app.getTemplate(\`subTemplate\`);
  
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<span>hey</span>\`);
-  let block5 = createBlock(\`<span>yay</span>\`);
+  let block4 = createBlock(\`<span>hey</span>\`);
+  let block6 = createBlock(\`<span>yay</span>\`);
  
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1;
-    const b3 = block3();
-    const b4 = text(\` \`);
-    const b5 = block5();
-    const b2 = multi([b3, b4, b5]);
-    ctx[zero] = b2;
-    const b6 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    return block1([], [b6]);
+    const b4 = block4();
+    const b5 = text(\` \`);
+    const b6 = block6();
+    const b3 = multi([b4, b5, b6]);
+    ctx[zero] = b3;
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
  }
 }"
 `;
@@ -126,17 +126,17 @@ exports[`t-call (template calling) cascading t-call t-out='0' 2`] = `
  const callTemplate_1 = app.getTemplate(\`subSubTemplate\`);
  
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<span>cascade 0</span>\`);
+  let block4 = createBlock(\`<span>cascade 0</span>\`);
  
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1;
-    const b3 = block3();
-    const b4 = ctx[zero];
-    const b2 = multi([b3, b4]);
-    ctx[zero] = b2;
-    const b5 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    return block1([], [b5]);
+    const b4 = block4();
+    const b5 = ctx[zero];
+    const b3 = multi([b4, b5]);
+    ctx[zero] = b3;
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
  }
 }"
 `;
@@ -149,17 +149,17 @@ exports[`t-call (template calling) cascading t-call t-out='0' 3`] = `
  const callTemplate_1 = app.getTemplate(\`finalTemplate\`);
  
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<span>cascade 1</span>\`);
+  let block4 = createBlock(\`<span>cascade 1</span>\`);
  
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1;
-    const b3 = block3();
-    const b4 = ctx[zero];
-    const b2 = multi([b3, b4]);
-    ctx[zero] = b2;
-    const b5 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    return block1([], [b5]);
+    const b4 = block4();
+    const b5 = ctx[zero];
+    const b3 = multi([b4, b5]);
+    ctx[zero] = b3;
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
  }
 }"
 `;
@@ -186,17 +186,17 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
  let { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`subTemplate\`);
  
-  let block2 = createBlock(\`<span>hey</span>\`);
-  let block4 = createBlock(\`<span>yay</span>\`);
+  let block3 = createBlock(\`<span>hey</span>\`);
+  let block5 = createBlock(\`<span>yay</span>\`);
  
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1;
-    const b2 = block2();
-    const b3 = text(\` \`);
-    const b4 = block4();
-    const b1 = multi([b2, b3, b4]);
-    ctx[zero] = b1;
+    const b3 = block3();
+    const b4 = text(\` \`);
+    const b5 = block5();
+    const b2 = multi([b3, b4, b5]);
+    ctx[zero] = b2;
    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
  }
 }"
@@ -209,15 +209,15 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
  let { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`subSubTemplate\`);
  
-  let block2 = createBlock(\`<span>cascade 0</span>\`);
+  let block3 = createBlock(\`<span>cascade 0</span>\`);
  
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1;
-    const b2 = block2();
-    const b3 = ctx[zero];
-    const b1 = multi([b2, b3]);
-    ctx[zero] = b1;
+    const b3 = block3();
+    const b4 = ctx[zero];
+    const b2 = multi([b3, b4]);
+    ctx[zero] = b2;
    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
  }
 }"
@@ -230,15 +230,15 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
  let { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`finalTemplate\`);
  
-  let block2 = createBlock(\`<span>cascade 1</span>\`);
+  let block3 = createBlock(\`<span>cascade 1</span>\`);
  
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1;
-    const b2 = block2();
-    const b3 = ctx[zero];
-    const b1 = multi([b2, b3]);
-    ctx[zero] = b1;
+    const b3 = block3();
+    const b4 = ctx[zero];
+    const b2 = multi([b3, b4]);
+    ctx[zero] = b2;
    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
  }
 }"
@@ -342,15 +342,15 @@ exports[`t-call (template calling) nested t-calls with magic variable 0 1`] = `
  const callTemplate_1 = app.getTemplate(\`grandchild\`);
  const callTemplate_2 = app.getTemplate(\`child\`);
  
-  let block1 = createBlock(\`<p>Some content...</p>\`);
+  let block3 = createBlock(\`<p>Some content...</p>\`);
  
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1;
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1;
-    const b1 = block1();
-    ctx[zero] = b1;
+    const b3 = block3();
+    ctx[zero] = b3;
    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
    ctx = ctx.__proto__;
    ctx[zero] = b2;
@@ -440,11 +440,11 @@ exports[`t-call (template calling) recursive template, part 2 2`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['node'].children||[]);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`subtree\`] = v_block2[i1];
+      ctx[\`subtree\`] = k_block2[i1];
      ctx[\`subtree_first\`] = i1 === 0;
-      ctx[\`subtree_last\`] = i1 === v_block2.length - 1;
+      ctx[\`subtree_last\`] = i1 === k_block2.length - 1;
      ctx[\`subtree_index\`] = i1;
-      ctx[\`subtree_value\`] = k_block2[i1];
+      ctx[\`subtree_value\`] = v_block2[i1];
      const key1 = ctx['subtree_index'];
      ctx = Object.create(ctx);
      ctx[isBoundary] = 1;
@@ -495,11 +495,11 @@ exports[`t-call (template calling) recursive template, part 3 2`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['node'].children||[]);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`subtree\`] = v_block2[i1];
+      ctx[\`subtree\`] = k_block2[i1];
      ctx[\`subtree_first\`] = i1 === 0;
-      ctx[\`subtree_last\`] = i1 === v_block2.length - 1;
+      ctx[\`subtree_last\`] = i1 === k_block2.length - 1;
      ctx[\`subtree_index\`] = i1;
-      ctx[\`subtree_value\`] = k_block2[i1];
+      ctx[\`subtree_value\`] = v_block2[i1];
      const key1 = ctx['subtree_index'];
      ctx = Object.create(ctx);
      ctx[isBoundary] = 1;
@@ -553,11 +553,11 @@ exports[`t-call (template calling) recursive template, part 4: with t-set recurs
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['node'].children||[]);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`subtree\`] = v_block2[i1];
+      ctx[\`subtree\`] = k_block2[i1];
      ctx[\`subtree_first\`] = i1 === 0;
-      ctx[\`subtree_last\`] = i1 === v_block2.length - 1;
+      ctx[\`subtree_last\`] = i1 === k_block2.length - 1;
      ctx[\`subtree_index\`] = i1;
-      ctx[\`subtree_value\`] = k_block2[i1];
+      ctx[\`subtree_value\`] = v_block2[i1];
      const key1 = ctx['subtree_index'];
      ctx = Object.create(ctx);
      ctx[isBoundary] = 1;
@@ -571,6 +571,134 @@ exports[`t-call (template calling) recursive template, part 4: with t-set recurs
 }"
 `;

+exports[`t-call (template calling) root t-call with body: t-foreach 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, prepareList, withKey, zero } = helpers;
+  const callTemplate_1 = app.getTemplate(\`subTemplate\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1;
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1]);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`i\`] = k_block2[i1];
+      const key1 = ctx['i'];
+      c_block2[i1] = withKey(text(\`1\`), key1);
+    }
+    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
+    ctx[zero] = b2;
+    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call (template calling) root t-call with body: t-foreach 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`sub\`);
+  }
+}"
+`;
+
+exports[`t-call (template calling) root t-call with body: t-if false 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, zero } = helpers;
+  const callTemplate_1 = app.getTemplate(\`subTemplate\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1;
+    let b3;
+    if (false) {
+      b3 = text(\`zero\`);
+    }
+    const b2 = multi([b3]);
+    ctx[zero] = b2;
+    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call (template calling) root t-call with body: t-if false 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`sub\`);
+  }
+}"
+`;
+
+exports[`t-call (template calling) root t-call with body: t-if true 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, zero } = helpers;
+  const callTemplate_1 = app.getTemplate(\`subTemplate\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1;
+    let b3;
+    if (true) {
+      b3 = text(\`zero\`);
+    }
+    const b2 = multi([b3]);
+    ctx[zero] = b2;
+    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call (template calling) root t-call with body: t-if true 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`sub\`);
+  }
+}"
+`;
+
+exports[`t-call (template calling) root t-call with body: t-out with default 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, safeOutput, zero } = helpers;
+  const callTemplate_1 = app.getTemplate(\`subTemplate\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1;
+    const b2 = safeOutput(ctx['nothing']);
+    ctx[zero] = b2;
+    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call (template calling) root t-call with body: t-out with default 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`sub\`);
+  }
+}"
+`;
+
 exports[`t-call (template calling) scoped parameters 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -705,13 +833,13 @@ exports[`t-call (template calling) t-call with body content as root of a templat
  let { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`antony\`);
  
-  let block1 = createBlock(\`<p>antony</p>\`);
+  let block2 = createBlock(\`<p>antony</p>\`);
  
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1;
-    const b1 = block1();
-    ctx[zero] = b1;
+    const b2 = block2();
+    ctx[zero] = b2;
    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
  }
 }"
@@ -813,11 +941,11 @@ exports[`t-call (template calling) t-call with t-set inside and outside 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['list']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`v\`] = v_block2[i1];
+      ctx[\`v\`] = k_block2[i1];
      ctx[\`v_first\`] = i1 === 0;
-      ctx[\`v_last\`] = i1 === v_block2.length - 1;
+      ctx[\`v_last\`] = i1 === k_block2.length - 1;
      ctx[\`v_index\`] = i1;
-      ctx[\`v_value\`] = k_block2[i1];
+      ctx[\`v_value\`] = v_block2[i1];
      const key1 = ctx['v_index'];
      setContextValue(ctx, \\"val\\", ctx['v'].val);
      ctx = Object.create(ctx);
@@ -880,11 +1008,11 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 2`] =
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['list']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`v\`] = v_block2[i1];
+      ctx[\`v\`] = k_block2[i1];
      ctx[\`v_first\`] = i1 === 0;
-      ctx[\`v_last\`] = i1 === v_block2.length - 1;
+      ctx[\`v_last\`] = i1 === k_block2.length - 1;
      ctx[\`v_index\`] = i1;
-      ctx[\`v_value\`] = k_block2[i1];
+      ctx[\`v_value\`] = v_block2[i1];
      const key1 = ctx['v_index'];
      setContextValue(ctx, \\"val\\", ctx['v'].val);
      ctx = Object.create(ctx);
@@ -928,7 +1056,7 @@ exports[`t-call (template calling) t-call, conditional and t-set in t-call body
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    let b2,b3;
+    let b2, b3;
    setContextValue(ctx, \\"v1\\", 'elif');
    if (ctx['v1']==='if') {
      b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
@@ -1075,8 +1203,8 @@ exports[`t-call (template calling) with unused body 1`] = `
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1;
-    const b1 = text(\`WHEEE\`);
-    ctx[zero] = b1;
+    const b2 = text(\`WHEEE\`);
+    ctx[zero] = b2;
    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
  }
 }"
@@ -1136,8 +1264,8 @@ exports[`t-call (template calling) with used body 1`] = `
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1;
-    const b1 = text(\`ok\`);
-    ctx[zero] = b1;
+    const b2 = text(\`ok\`);
+    ctx[zero] = b2;
    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
  }
 }"
@@ -180,15 +180,15 @@ exports[`t-esc t-esc=0 is escaped 1`] = `
  const callTemplate_1 = app.getTemplate(\`sub\`);
  
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block2 = createBlock(\`<p>escaped</p>\`);
+  let block3 = createBlock(\`<p>escaped</p>\`);
  
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1;
-    const b2 = block2();
-    ctx[zero] = b2;
-    const b3 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    return block1([], [b3]);
+    const b3 = block3();
+    ctx[zero] = b3;
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
  }
 }"
 `;
@@ -12,7 +12,7 @@ exports[`t-foreach does not pollute the rendering context 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1]);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item\`] = k_block2[i1];
      const key1 = ctx['item'];
      c_block2[i1] = withKey(text(ctx['item']), key1);
    }
@@ -35,7 +35,7 @@ exports[`t-foreach iterate on items (on a element node) 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1,2]);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item\`] = k_block2[i1];
      const key1 = ctx['item'];
      let txt1 = ctx['item'];
      c_block2[i1] = withKey(block3([txt1]), key1);
@@ -58,9 +58,9 @@ exports[`t-foreach iterate on items 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item\`] = k_block2[i1];
      ctx[\`item_index\`] = i1;
-      ctx[\`item_value\`] = k_block2[i1];
+      ctx[\`item_value\`] = v_block2[i1];
      const key1 = ctx['item'];
      const b4 = text(\` [\`);
      const b5 = text(ctx['item_index']);
@@ -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\`] = k_block1[i1];
+      ctx[\`item_index\`] = i1;
+      ctx[\`item_value\`] = v_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\`] = k_block1[i1];
+      ctx[\`item_index\`] = i1;
+      ctx[\`item_value\`] = v_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
 ) {
@@ -89,9 +145,9 @@ exports[`t-foreach iterate, dict param 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['value']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item\`] = k_block2[i1];
      ctx[\`item_index\`] = i1;
-      ctx[\`item_value\`] = k_block2[i1];
+      ctx[\`item_value\`] = v_block2[i1];
      const key1 = ctx['item_index'];
      const b4 = text(\` [\`);
      const b5 = text(ctx['item_index']);
@@ -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\`] = k_block1[i1];
+      ctx[\`item_index\`] = i1;
+      ctx[\`item_value\`] = v_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\`] = k_block1[i1];
+      ctx[\`item_index\`] = i1;
+      ctx[\`item_value\`] = v_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
 ) {
@@ -120,12 +232,12 @@ exports[`t-foreach iterate, position 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(5));;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`elem\`] = v_block2[i1];
+      ctx[\`elem\`] = k_block2[i1];
      ctx[\`elem_first\`] = i1 === 0;
-      ctx[\`elem_last\`] = i1 === v_block2.length - 1;
+      ctx[\`elem_last\`] = i1 === k_block2.length - 1;
      ctx[\`elem_index\`] = i1;
      const key1 = ctx['elem'];
-      let b4,b5,b6,b7,b8,b9;
+      let b4, b5, b6, b7, b8, b9;
      b4 = text(\` -\`);
      if (ctx['elem_first']) {
        b5 = text(\` first\`);
@@ -156,7 +268,7 @@ exports[`t-foreach simple iteration (in a node) 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item\`] = k_block2[i1];
      const key1 = ctx['item'];
      c_block2[i1] = withKey(text(ctx['item']), key1);
    }
@@ -176,7 +288,7 @@ exports[`t-foreach simple iteration 1`] = `
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList([3,2,1]);;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = v_block1[i1];
+      ctx[\`item\`] = k_block1[i1];
      const key1 = ctx['item'];
      c_block1[i1] = withKey(text(ctx['item']), key1);
    }
@@ -198,7 +310,7 @@ exports[`t-foreach simple iteration with two nodes inside 1`] = `
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList([3,2,1]);;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = v_block1[i1];
+      ctx[\`item\`] = k_block1[i1];
      const key1 = ctx['item'];
      let txt1 = ctx['item'];
      const b3 = block3([txt1]);
@@ -227,20 +339,20 @@ exports[`t-foreach t-call with body in t-foreach in t-foreach 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`a\`] = v_block2[i1];
+      ctx[\`a\`] = k_block2[i1];
      ctx[\`a_first\`] = i1 === 0;
-      ctx[\`a_last\`] = i1 === v_block2.length - 1;
+      ctx[\`a_last\`] = i1 === k_block2.length - 1;
      ctx[\`a_index\`] = i1;
-      ctx[\`a_value\`] = k_block2[i1];
+      ctx[\`a_value\`] = v_block2[i1];
      const key1 = ctx['a'];
      ctx = Object.create(ctx);
      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['letters']);;
      for (let i2 = 0; i2 < l_block4; i2++) {
-        ctx[\`b\`] = v_block4[i2];
+        ctx[\`b\`] = k_block4[i2];
        ctx[\`b_first\`] = i2 === 0;
-        ctx[\`b_last\`] = i2 === v_block4.length - 1;
+        ctx[\`b_last\`] = i2 === k_block4.length - 1;
        ctx[\`b_index\`] = i2;
-        ctx[\`b_value\`] = k_block4[i2];
+        ctx[\`b_value\`] = v_block4[i2];
        const key2 = ctx['b'];
        ctx = Object.create(ctx);
        ctx[isBoundary] = 1;
@@ -296,20 +408,20 @@ exports[`t-foreach t-call without body in t-foreach in t-foreach 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`a\`] = v_block2[i1];
+      ctx[\`a\`] = k_block2[i1];
      ctx[\`a_first\`] = i1 === 0;
-      ctx[\`a_last\`] = i1 === v_block2.length - 1;
+      ctx[\`a_last\`] = i1 === k_block2.length - 1;
      ctx[\`a_index\`] = i1;
-      ctx[\`a_value\`] = k_block2[i1];
+      ctx[\`a_value\`] = v_block2[i1];
      const key1 = ctx['a'];
      ctx = Object.create(ctx);
      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['letters']);;
      for (let i2 = 0; i2 < l_block4; i2++) {
-        ctx[\`b\`] = v_block4[i2];
+        ctx[\`b\`] = k_block4[i2];
        ctx[\`b_first\`] = i2 === 0;
-        ctx[\`b_last\`] = i2 === v_block4.length - 1;
+        ctx[\`b_last\`] = i2 === k_block4.length - 1;
        ctx[\`b_index\`] = i2;
-        ctx[\`b_value\`] = k_block4[i2];
+        ctx[\`b_value\`] = v_block4[i2];
        const key2 = ctx['b'];
        c_block4[i2] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`), key2);
      }
@@ -363,12 +475,12 @@ exports[`t-foreach t-foreach in t-foreach 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`number\`] = v_block2[i1];
+      ctx[\`number\`] = k_block2[i1];
      const key1 = ctx['number'];
      ctx = Object.create(ctx);
      const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['letters']);;
      for (let i2 = 0; i2 < l_block3; i2++) {
-        ctx[\`letter\`] = v_block3[i2];
+        ctx[\`letter\`] = k_block3[i2];
        const key2 = ctx['letter'];
        const b5 = text(\` [\`);
        const b6 = text(ctx['number']);
@@ -397,7 +509,7 @@ exports[`t-foreach t-foreach with t-if inside (no external node) 1`] = `
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['elems']);;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`elem\`] = v_block1[i1];
+      ctx[\`elem\`] = k_block1[i1];
      const key1 = ctx['elem'].id;
      let b3;
      if (ctx['elem'].id<3) {
@@ -424,7 +536,7 @@ exports[`t-foreach t-foreach with t-if inside 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['elems']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`elem\`] = v_block2[i1];
+      ctx[\`elem\`] = k_block2[i1];
      const key1 = ctx['elem'].id;
      let b4;
      if (ctx['elem'].id<3) {
@@ -452,7 +564,7 @@ exports[`t-foreach t-key on t-foreach 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['things']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`thing\`] = v_block2[i1];
+      ctx[\`thing\`] = k_block2[i1];
      const key1 = ctx['thing'];
      c_block2[i1] = withKey(block3(), key1);
    }
@@ -475,7 +587,7 @@ exports[`t-foreach throws error if invalid loop expression 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['abc']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item\`] = k_block2[i1];
      ctx[\`item_index\`] = i1;
      const key1 = ctx['item'];
      const tKey_1 = ctx['item_index'];
@@ -502,7 +614,7 @@ exports[`t-foreach with t-memo 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item\`] = k_block2[i1];
      const key1 = ctx['item'].id;
      const memo1 = [ctx['item'].x];
      const vnode1 = cache[key1];;
@@ -8,7 +8,7 @@ exports[`t-if a t-if next to a div 1`] = `
  let block2 = createBlock(\`<div>foo</div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    b2 = block2();
    if (ctx['cond']) {
      b3 = text(\`1\`);
@@ -44,7 +44,7 @@ exports[`t-if boolean value condition elif (no outside node) 1`] = `
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4,b5;
+    let b2, b3, b4, b5;
    if (ctx['color']=='black') {
      b2 = text(\`black pearl\`);
    } else if (ctx['color']=='yellow') {
@@ -67,7 +67,7 @@ exports[`t-if boolean value condition elif 1`] = `
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-2/><block-child-3/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4,b5;
+    let b2, b3, b4, b5;
    if (ctx['color']=='black') {
      b2 = text(\`black pearl\`);
    } else if (ctx['color']=='yellow') {
@@ -90,7 +90,7 @@ exports[`t-if boolean value condition else 1`] = `
  let block1 = createBlock(\`<div><span>begin</span><block-child-0/><block-child-1/><span>end</span></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['condition']) {
      b2 = text(\`ok\`);
    } else {
@@ -109,7 +109,7 @@ exports[`t-if boolean value condition false else 1`] = `
  let block1 = createBlock(\`<div><span>begin</span><block-child-0/><block-child-1/><span>end</span></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['condition']) {
      b2 = text(\`fail\`);
    } else {
@@ -145,7 +145,7 @@ exports[`t-if can use some boolean operators in expressions 1`] = `
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-2/><block-child-3/><block-child-4/><block-child-5/><block-child-6/><block-child-7/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4,b5,b6,b7,b8,b9;
+    let b2, b3, b4, b5, b6, b7, b8, b9;
    if (ctx['cond1']&&ctx['cond2']) {
      b2 = text(\`and\`);
    }
@@ -239,7 +239,7 @@ exports[`t-if simple t-if/t-else 1`] = `
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['condition']) {
      b2 = text(\`1\`);
    } else {
@@ -258,7 +258,7 @@ exports[`t-if simple t-if/t-else in a div 1`] = `
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['condition']) {
      b2 = text(\`1\`);
    } else {
@@ -277,7 +277,7 @@ exports[`t-if t-esc with t-elif 1`] = `
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (false) {
      b2 = text(\`abc\`);
    } else {
@@ -314,7 +314,7 @@ exports[`t-if t-if and t-else with two nodes 1`] = `
  let block5 = createBlock(\`<span>b</span>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['condition']) {
      b2 = text(\`1\`);
    } else {
@@ -372,7 +372,7 @@ exports[`t-if t-if with empty content 1`] = `
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    b2 = text(\`hello\`);
    if (ctx['condition']) {
      b3 = text(\`\`);
@@ -388,7 +388,7 @@ exports[`t-if t-if/t-else with more content 1`] = `
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['condition']) {
      if (ctx['condition']) {
        b2 = text(\`asf\`);
@@ -458,7 +458,7 @@ exports[`t-if t-set, then t-if, part 3 1`] = `
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    let b2,b3;
+    let b2, b3;
    setContextValue(ctx, \\"y\\", false);
    setContextValue(ctx, \\"x\\", ctx['y']);
    if (ctx['x']) {
@@ -477,7 +477,7 @@ exports[`t-if two consecutive t-if 1`] = `
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['cond1']) {
      b2 = text(\`1\`);
    }
@@ -497,7 +497,7 @@ exports[`t-if two consecutive t-if in a div 1`] = `
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['cond1']) {
      b2 = text(\`1\`);
    }
@@ -520,7 +520,7 @@ exports[`t-if two t-ifs next to each other 1`] = `
  let block5 = createBlock(\`<p>2</p>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['condition']) {
      let txt1 = ctx['text'];
      b2 = block2([txt1]);
@@ -58,7 +58,7 @@ exports[`t-key t-key directive in a list 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['beers']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`beer\`] = v_block2[i1];
+      ctx[\`beer\`] = k_block2[i1];
      const key1 = ctx['beer'].id;
      let txt1 = ctx['beer'].name;
      c_block2[i1] = withKey(block3([txt1]), key1);
@@ -79,7 +79,7 @@ exports[`t-key t-key on sub dom node pushes a child block in its parent 1`] = `
  let block3 = createBlock(\`<div><h1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['hasSpan']) {
      b2 = block2();
    }
@@ -35,15 +35,15 @@ exports[`t-out multiple calls to t-out 1`] = `
  const callTemplate_1 = app.getTemplate(\`sub\`);
  
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block2 = createBlock(\`<span>coucou</span>\`);
+  let block3 = createBlock(\`<span>coucou</span>\`);
  
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1;
-    const b2 = block2();
-    ctx[zero] = b2;
-    const b3 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    return block1([], [b3]);
+    const b3 = block3();
+    ctx[zero] = b3;
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
  }
 }"
 `;
@@ -102,15 +102,15 @@ exports[`t-out t-out 0 1`] = `
  const callTemplate_1 = app.getTemplate(\`_basic-callee\`);
  
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block2 = createBlock(\`<div>zero</div>\`);
+  let block3 = createBlock(\`<div>zero</div>\`);
  
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1;
-    const b2 = block2();
-    ctx[zero] = b2;
-    const b3 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    return block1([], [b3]);
+    const b3 = block3();
+    ctx[zero] = b3;
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
  }
 }"
 `;
@@ -309,7 +309,7 @@ exports[`t-out t-out switch markup on bdom 1`] = `
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    let b3,b5;
+    let b3, b5;
    ctx[\`bdom\`] = new LazyValue(value1, ctx, this, node, key);
    if (ctx['hasBdom']) {
      const b4 = safeOutput(ctx['bdom']);
@@ -105,7 +105,7 @@ exports[`t-ref refs in a loop 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item\`] = k_block2[i1];
      const key1 = ctx['item'];
      const tKey_1 = ctx['item'];
      const v1 = ctx['item'];
@@ -94,7 +94,7 @@ exports[`t-set set from body literal (with t-if/t-else 1`] = `
  let { isBoundary, withDefault, LazyValue } = helpers;
  
  function value1(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['condition']) {
      b2 = text(\`true\`);
    } else {
@@ -351,7 +351,7 @@ exports[`t-set t-set outside modified in t-foreach 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block2[i1];
+      ctx[\`val\`] = k_block2[i1];
      const key1 = ctx['val'];
      let txt1 = ctx['iter'];
      c_block2[i1] = withKey(block3([txt1]), key1);
@@ -381,7 +381,7 @@ exports[`t-set t-set outside modified in t-foreach increment-after operator 1`]
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block2[i1];
+      ctx[\`val\`] = k_block2[i1];
      const key1 = ctx['val'];
      let txt1 = ctx['iter'];
      c_block2[i1] = withKey(block3([txt1]), key1);
@@ -411,7 +411,7 @@ exports[`t-set t-set outside modified in t-foreach increment-before operator 1`]
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block2[i1];
+      ctx[\`val\`] = k_block2[i1];
      const key1 = ctx['val'];
      let txt1 = ctx['iter'];
      c_block2[i1] = withKey(block3([txt1]), key1);
@@ -441,7 +441,7 @@ exports[`t-set t-set should reuse variable if possible 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['list']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`elem\`] = v_block2[i1];
+      ctx[\`elem\`] = k_block2[i1];
      ctx[\`elem_index\`] = i1;
      const key1 = ctx['elem_index'];
      let txt1 = ctx['v'];
@@ -1,5 +1,79 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

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

+exports[`translation support t-set and falsy t-value: t-body are translated 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"label\\", withDefault(false, \`translated\`));
+    return text(ctx['label']);
+  }
+}"
+`;
+
 exports[`translation support translation is done on the trimmed text, with extra spaces readded after 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -371,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>');
+  });
 });
@@ -1147,6 +1147,24 @@ describe("qweb parser", () => {
    });
  });

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

+  test("component with event handler", async () => {
+    expect(() => parse(`<MyComponent t-onclick="someMethod"/>`)).toThrowError(
+      "unsupported directive on Component: t-onclick"
+    );
+  });
+
  test("component with t-ref", async () => {
    expect(() => parse(`<MyComponent t-ref="something"/>`)).toThrow(
      "t-ref is no longer supported on components. Consider exposing only the public part of the component's API through a callback prop."
@@ -1545,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"
@@ -1967,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",
@@ -9,20 +9,20 @@ describe("properly support svg", () => {
  test("add proper namespace to svg", () => {
    const template = `<svg width="100px" height="90px"><circle cx="50" cy="50" r="4" stroke="green" stroke-width="1" fill="yellow"/> </svg>`;
    expect(renderToString(template)).toBe(
-      `<svg width=\"100px\" height=\"90px\"><circle cx=\"50\" cy=\"50\" r=\"4\" stroke=\"green\" stroke-width=\"1\" fill=\"yellow\"></circle> </svg>`
+      `<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="90px"><circle cx="50" cy="50" r="4" stroke="green" stroke-width="1" fill="yellow"></circle> </svg>`
    );
  });

  test("add proper namespace to g tags", () => {
    const template = `<g><circle cx="50" cy="50" r="4" stroke="green" stroke-width="1" fill="yellow"/> </g>`;
    expect(renderToString(template)).toBe(
-      `<g><circle cx=\"50\" cy=\"50\" r=\"4\" stroke=\"green\" stroke-width=\"1\" fill=\"yellow\"></circle> </g>`
+      `<g xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="4" stroke="green" stroke-width="1" fill="yellow"></circle> </g>`
    );
  });

  test("namespace to g tags not added if already in svg namespace", () => {
    const template = `<svg><g/></svg>`;
-    expect(renderToString(template)).toBe(`<svg><g></g></svg>`);
+    expect(renderToString(template)).toBe(`<svg xmlns="http://www.w3.org/2000/svg"><g></g></svg>`);
  });

  test("namespace to svg tags added even if already in svg namespace", () => {
@@ -41,8 +41,13 @@ describe("properly support svg", () => {
  test("svg namespace added to sub-blocks", () => {
    const template = `<svg><path t-if="path"/></svg>`;

-    expect(renderToString(template, { path: false })).toBe(`<svg></svg>`);
-    expect(renderToString(template, { path: true })).toBe(`<svg><path></path></svg>`);
+    expect(renderToString(template, { path: false })).toBe(
+      `<svg xmlns="http://www.w3.org/2000/svg"></svg>`
+    );
+    // Because the path is its own block, it has its own xmlns attribute
+    expect(renderToString(template, { path: true })).toBe(
+      `<svg xmlns="http://www.w3.org/2000/svg"><path xmlns="http://www.w3.org/2000/svg"></path></svg>`
+    );

    const bdom = renderToBdom(template, { path: true });
    const fixture = makeTestFixture();
@@ -430,6 +430,48 @@ describe("t-call (template calling)", () => {
    expect(context.renderToString("main")).toBe(expected);
  });

+  test("root t-call with body: t-if true", () => {
+    const context = new TestContext();
+    const subTemplate = `sub`;
+    const main = `<t t-call="subTemplate"><t t-if="true">zero</t></t>`;
+    context.addTemplate("subTemplate", subTemplate);
+    context.addTemplate("main", main);
+    const expected = "sub";
+    expect(context.renderToString("main")).toBe(expected);
+  });
+
+  test("root t-call with body: t-if false", () => {
+    const context = new TestContext();
+    const subTemplate = `sub`;
+    const main = `<t t-call="subTemplate"><t t-if="false">zero</t></t>`;
+    context.addTemplate("subTemplate", subTemplate);
+    context.addTemplate("main", main);
+    const expected = "sub";
+    expect(context.renderToString("main")).toBe(expected);
+  });
+
+  test("root t-call with body: t-out with default", () => {
+    const context = new TestContext();
+    const subTemplate = `sub`;
+    const main = `<t t-call="subTemplate"><t t-out="nothing">default</t></t>`;
+    context.addTemplate("subTemplate", subTemplate);
+    context.addTemplate("main", main);
+    const expected = "sub";
+    expect(context.renderToString("main")).toBe(expected);
+  });
+
+  test("root t-call with body: t-foreach", () => {
+    const context = new TestContext();
+    const subTemplate = `sub`;
+    const main = `<t t-call="subTemplate">
+      <t t-foreach="[1]" t-as="i" t-key="i">1</t>
+    </t>`;
+    context.addTemplate("subTemplate", subTemplate);
+    context.addTemplate("main", main);
+    const expected = "sub";
+    expect(context.renderToString("main")).toBe(expected);
+  });
+
  test("dynamic t-call", () => {
    const context = new TestContext();
    const foo = `<foo><t t-esc="val"/></foo>`;
@@ -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: a 1]  [1: b 2]  [2: c 3] `;
+    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", () => {
@@ -100,4 +100,74 @@ describe("translation support", () => {
    expect(translateFn).toHaveBeenCalledWith("some  word");
    expect(fixture.innerHTML).toBe("<div>un mot</div>");
  });
+
+  test("body of t-sets are translated", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+        <t t-set="label">untranslated</t>
+        <t t-esc="label"/>`;
+    }
+
+    const translateFn = () => "translated";
+
+    await mount(SomeComponent, fixture, { translateFn });
+    expect(fixture.innerHTML).toBe("translated");
+  });
+
+  test("body of t-sets inside translation=off are not translated", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+        <t t-translation="off">
+          <t t-set="label">untranslated</t>
+          <t t-esc="label"/>
+        </t>`;
+    }
+
+    const translateFn = () => "translated";
+
+    await mount(SomeComponent, fixture, { translateFn });
+    expect(fixture.innerHTML).toBe("untranslated");
+  });
+
+  test("body of t-sets with html content are translated", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+        <t t-set="label"><div>untranslated</div></t>
+        <t t-out="label"/>`;
+    }
+
+    const translateFn = () => "translated";
+
+    await mount(SomeComponent, fixture, { translateFn });
+    expect(fixture.innerHTML).toBe("<div>translated</div>");
+  });
+
+  test("body of t-sets with text and html content are translated", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+        <t t-set="label">
+          some text
+          <div>untranslated</div>
+        </t>
+        <t t-out="label"/>`;
+    }
+
+    const translateFn = () => "translated";
+
+    await mount(SomeComponent, fixture, { translateFn });
+    expect(fixture.innerHTML).toBe(" translated <div>translated</div>");
+  });
+
+  test("t-set and falsy t-value: t-body are translated", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+          <t t-set="label" t-value="false">untranslated</t>
+          <t t-esc="label"/>`;
+    }
+
+    const translateFn = () => "translated";
+
+    await mount(SomeComponent, fixture, { translateFn });
+    expect(fixture.innerHTML).toBe("translated");
+  });
 });
@@ -37,4 +37,22 @@ describe("basic validation", () => {
    const template = `<div t-best-beer="rochefort 10">test</div>`;
    expect(() => renderToString(template)).toThrow("Unknown QWeb directive: 't-best-beer'");
  });
+
+  test("compilation error", () => {
+    const template = `<div t-att-class="a b">test</div>`;
+    expect(() => renderToString(template))
+      .toThrow(`Failed to compile anonymous template: Unexpected identifier
+
+generated code:
+function(app, bdom, helpers) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0="class">test</div>\`);
+  
+  return function template(ctx, node, key = "") {
+    let attr1 = ctx['a']ctx['b'];
+    return block1([attr1]);
+  }
+}`);
+  });
 });
@@ -440,7 +440,7 @@ exports[`basics higher order components parent and child 2`] = `
  const comp2 = app.createComponent(\`ChildB\`, true, false, false, []);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['props'].child==='a') {
      b2 = comp1({}, key + \`__1\`, node, this, null);
    } else {
@@ -492,7 +492,7 @@ exports[`basics list of two sub components inside other nodes 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].blips);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`blip\`] = v_block2[i1];
+      ctx[\`blip\`] = k_block2[i1];
      const key1 = ctx['blip'].id;
      const b4 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
      const b5 = comp2({}, key + \`__2__\${key1}\`, node, this, null);
@@ -738,7 +738,7 @@ exports[`basics sub components between t-ifs 1`] = `
  let block5 = createBlock(\`<span>test</span>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4,b5;
+    let b2, b3, b4, b5;
    if (ctx['state'].flag) {
      b2 = block2();
    } else {
@@ -776,7 +776,7 @@ exports[`basics t-elif works with t-component 1`] = `
  let block2 = createBlock(\`<div>somediv</div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].flag) {
      b2 = block2();
    } else if (!ctx['state'].flag) {
@@ -810,7 +810,7 @@ exports[`basics t-else with empty string works with t-component 1`] = `
  let block2 = createBlock(\`<div>somediv</div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].flag) {
      b2 = block2();
    } else {
@@ -844,7 +844,7 @@ exports[`basics t-else works with t-component 1`] = `
  let block2 = createBlock(\`<div>somediv</div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].flag) {
      b2 = block2();
    } else {
@@ -909,7 +909,7 @@ exports[`basics t-key on a component with t-if, and a sibling component 1`] = `
  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (false) {
      const tKey_1 = 'str';
      b2 = toggler(tKey_1, comp1({}, tKey_1 + key + \`__1\`, node, this, null));
@@ -1084,7 +1084,7 @@ exports[`basics updating a component with t-foreach as root 1`] = `
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['items']);;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = v_block1[i1];
+      ctx[\`item\`] = k_block1[i1];
      const key1 = ctx['item'];
      c_block1[i1] = withKey(text(ctx['item']), key1);
    }
@@ -1135,7 +1135,7 @@ exports[`basics widget after a t-foreach 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(2));;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`elem\`] = v_block2[i1];
+      ctx[\`elem\`] = k_block2[i1];
      ctx[\`elem_index\`] = i1;
      const key1 = ctx['elem_index'];
      c_block2[i1] = withKey(text(\`txt\`), key1);
@@ -1248,7 +1248,7 @@ exports[`support svg components add proper namespace to svg 1`] = `
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`GComp\`, true, false, false, []);
  
-  let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
+  let block1 = createBlock(\`<svg xmlns=\\"http://www.w3.org/2000/svg\\"><block-child-0 xmlns=\\"\\"/></svg>\`);
  
  return function template(ctx, node, key = \\"\\") {
    const b2 = comp1({}, key + \`__1\`, node, this, null);
@@ -1262,7 +1262,7 @@ exports[`support svg components add proper namespace to svg 2`] = `
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  
-  let block1 = createBlock(\`<g block-ns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/></g>\`);
+  let block1 = createBlock(\`<g xmlns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/></g>\`);
  
  return function template(ctx, node, key = \\"\\") {
    return block1();
@@ -1282,7 +1282,7 @@ exports[`t-out in components can render list of t-out  1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].items);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item\`] = k_block2[i1];
      const key1 = ctx['item'];
      const b4 = text(ctx['item']);
      const b5 = safeOutput(ctx['item']);
@@ -13,7 +13,7 @@ exports[`Cascading renders after microtaskTick 1`] = `
    ctx = Object.create(ctx);
    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state']);;
    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`elem\`] = v_block4[i1];
+      ctx[\`elem\`] = k_block4[i1];
      const key1 = ctx['elem'].id;
      c_block4[i1] = withKey(text(ctx['elem'].id), key1);
    }
@@ -34,7 +34,7 @@ exports[`Cascading renders after microtaskTick 2`] = `
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['state']);;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`elem\`] = v_block1[i1];
+      ctx[\`elem\`] = k_block1[i1];
      const key1 = ctx['elem'].id;
      c_block1[i1] = withKey(comp1({id: ctx['elem'].id}, key + \`__1__\${key1}\`, node, this, null), key1);
    }
@@ -61,7 +61,7 @@ exports[`another scenario with delayed rendering 1`] = `
  const comp1 = app.createComponent(\`B\`, true, false, false, [\\"value\\"]);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    b2 = text(\`A\`);
    if (ctx['state'].value<15) {
      b3 = comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
@@ -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
 ) {
@@ -764,7 +831,7 @@ exports[`concurrent renderings scenario 13 1`] = `
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    b2 = comp1({}, key + \`__1\`, node, this, null);
    if (ctx['state'].bool) {
      b3 = comp2({}, key + \`__2\`, node, this, null);
@@ -911,7 +978,7 @@ exports[`concurrent renderings scenario 16 3`] = `
  const comp1 = app.createComponent(\`D\`, true, false, false, []);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4,b5,b6,b7,b8;
+    let b2, b3, b4, b5, b6, b7, b8;
    b2 = text(ctx['props'].fromA);
    b3 = text(\`:\`);
    b4 = text(ctx['props'].fromB);
@@ -945,7 +1012,7 @@ exports[`creating two async components, scenario 1 1`] = `
  const comp2 = app.createComponent(\`ChildB\`, true, false, false, []);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].flagA) {
      b2 = comp1({}, key + \`__1\`, node, this, null);
    }
@@ -994,7 +1061,7 @@ exports[`creating two async components, scenario 2 1`] = `
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    b2 = comp1({val: ctx['state'].valA}, key + \`__1\`, node, this, null);
    if (ctx['state'].flagB) {
      b3 = comp2({val: ctx['state'].valB}, key + \`__2\`, node, this, null);
@@ -1042,7 +1109,7 @@ exports[`creating two async components, scenario 3 (patching in the same frame)
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    b2 = comp1({val: ctx['state'].valA}, key + \`__1\`, node, this, null);
    if (ctx['state'].flagB) {
      b3 = comp2({val: ctx['state'].valB}, key + \`__2\`, node, this, null);
@@ -1354,7 +1421,7 @@ exports[`delayed rendering, destruction, stuff happens 2`] = `
  const comp1 = app.createComponent(\`C\`, true, false, false, [\\"value\\"]);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    b2 = text(\`B\`);
    if (ctx['state'].hasChild) {
      b3 = comp1({value: ctx['state'].someValue+ctx['props'].value}, key + \`__1\`, node, this, null);
@@ -1447,7 +1514,7 @@ exports[`delayed rendering, reusing fiber then component is destroyed and  stuff
  const comp1 = app.createComponent(\`B\`, true, false, false, [\\"value\\"]);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    b2 = text(\`A\`);
    if (ctx['state'].value<15) {
      b3 = comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
@@ -1505,7 +1572,7 @@ exports[`delayed rendering, then component is destroyed and  stuff 2`] = `
  const comp1 = app.createComponent(\`C\`, true, false, false, []);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    b2 = text(ctx['props'].value);
    if (ctx['props'].value<10) {
      b3 = comp1({}, key + \`__1\`, node, this, null);
@@ -1538,7 +1605,7 @@ exports[`destroyed component causes other soon to be destroyed component to rere
  const comp2 = app.createComponent(\`C\`, true, false, false, [\\"value\\"]);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    b2 = text(\` A \`);
    if (ctx['state'].flag) {
      const b4 = comp1({value: ctx['state'].valueB}, key + \`__1\`, node, this, null);
@@ -1579,7 +1646,7 @@ exports[`destroying/recreating a subcomponent, other scenario 1`] = `
  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    b2 = text(\`parent\`);
    if (ctx['state'].hasChild) {
      b3 = comp1({}, key + \`__1\`, node, this, null);
@@ -1779,7 +1846,7 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 2`] =
  const comp1 = app.createComponent(\`C\`, true, false, false, []);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    b2 = text(\`B\`);
    if (ctx['props'].value===33) {
      b3 = comp1({}, key + \`__1\`, node, this, null);
@@ -1834,7 +1901,7 @@ exports[`t-foreach with dynamic async component 1`] = `
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['list']);;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`arr\`] = v_block1[i1];
+      ctx[\`arr\`] = k_block1[i1];
      ctx[\`arr_index\`] = i1;
      const key1 = ctx['arr_index'];
      let b3;
@@ -12,6 +12,18 @@ exports[`basics display a nice error if a component is not a component 1`] = `
 }"
 `;

+exports[`basics display a nice error if a non-root component template fails to compile 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return comp1({}, key + \`__1\`, node, this, null);
+  }
+}"
+`;
+
 exports[`basics display a nice error if it cannot find component (in dev mode) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -91,7 +103,7 @@ exports[`basics simple catchError 1`] = `
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['error']) {
      b2 = text(\`Error\`);
    } else {
@@ -189,7 +201,7 @@ exports[`can catch errors an error in onWillDestroy 1`] = `
  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    b2 = text(ctx['state'].value);
    if (ctx['state'].hasChild) {
      b3 = comp1({}, key + \`__1\`, node, this, null);
@@ -219,7 +231,7 @@ exports[`can catch errors an error in onWillDestroy, variation 1`] = `
  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    b2 = text(ctx['state'].value);
    if (ctx['state'].hasChild) {
      b3 = comp1({}, key + \`__1\`, node, this, null);
@@ -283,7 +295,7 @@ exports[`can catch errors can catch an error in a component render function 2`]
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].error) {
      b2 = text(\`Error handled\`);
    } else {
@@ -338,7 +350,7 @@ exports[`can catch errors can catch an error in the constructor call of a compon
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].error) {
      b2 = text(\`Error handled\`);
    } else {
@@ -382,7 +394,7 @@ exports[`can catch errors can catch an error in the constructor call of a compon
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].error) {
      b2 = text(\`Error handled\`);
    } else {
@@ -462,7 +474,7 @@ exports[`can catch errors can catch an error in the initial call of a component
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].error) {
      b2 = text(\`Error handled\`);
    } else {
@@ -520,7 +532,7 @@ exports[`can catch errors can catch an error in the initial call of a component
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].error) {
      b2 = text(\`Error handled\`);
    } else {
@@ -581,7 +593,7 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].error) {
      b2 = text(\`Error handled\`);
    } else {
@@ -614,7 +626,7 @@ exports[`can catch errors can catch an error in the mounted call (in root compon
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].error) {
      b2 = text(\`Error handled\`);
    } else {
@@ -668,7 +680,7 @@ exports[`can catch errors can catch an error in the mounted call 2`] = `
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].error) {
      b2 = text(\`Error handled\`);
    } else {
@@ -723,7 +735,7 @@ exports[`can catch errors can catch an error in the willPatch call 2`] = `
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].error) {
      b2 = text(\`Error handled\`);
    } else {
@@ -778,7 +790,7 @@ exports[`can catch errors can catch an error in the willStart call 2`] = `
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].error) {
      b2 = text(\`Error handled\`);
    } else {
@@ -835,7 +847,7 @@ exports[`can catch errors can catch an error origination from a child's willStar
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].error) {
      b2 = text(\`Error handled\`);
    } else {
@@ -881,7 +893,7 @@ exports[`can catch errors catchError in catchError 1`] = `
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['error']) {
      b2 = text(\`Error\`);
    } else {
@@ -938,7 +950,7 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList(Object.values(ctx['state'].cps));;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`cp\`] = v_block1[i1];
+      ctx[\`cp\`] = k_block1[i1];
      const key1 = ctx['cp'].id;
      const v1 = ctx['this'];
      const v2 = ctx['cp'];
@@ -1017,7 +1029,7 @@ exports[`can catch errors catching in child makes parent render 1`] = `
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList(Object.entries(ctx['this'].elements));;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`elem\`] = v_block1[i1];
+      ctx[\`elem\`] = k_block1[i1];
      const key1 = ctx['elem'][0];
      const v1 = ctx['this'];
      const v2 = ctx['elem'];
@@ -1111,7 +1123,7 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].error) {
      b2 = text(\`Error handled\`);
    } else {
@@ -1155,7 +1167,7 @@ exports[`can catch errors onError in class inheritance is called if rethrown 2`]
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (!ctx['state'].error) {
      b2 = text(ctx['this'].will.crash);
    } else {
@@ -1186,7 +1198,7 @@ exports[`can catch errors onError in class inheritance is not called if no rethr
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (!ctx['state'].error) {
      b2 = text(ctx['this'].will.crash);
    } else {
@@ -117,7 +117,7 @@ exports[`event handling objects from scope are properly captured by t-on 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item\`] = k_block2[i1];
      const key1 = ctx['item'];
      const v1 = ctx['onClick'];
      const v2 = ctx['item'];
@@ -158,7 +158,7 @@ exports[`event handling t-on with handler bound to dynamic argument on a t-forea
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item\`] = k_block2[i1];
      const key1 = ctx['item'];
      const v1 = ctx['onClick'];
      const v2 = ctx['item'];
@@ -34,7 +34,7 @@ exports[`basics can select a sub widget  1`] = `
  const comp2 = app.createComponent(\`OtherChild\`, true, false, false, []);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['env'].options.flag) {
      b2 = comp1({}, key + \`__1\`, node, this, null);
    }
@@ -80,7 +80,7 @@ exports[`basics can select a sub widget, part 2 1`] = `
  const comp2 = app.createComponent(\`OtherChild\`, true, false, false, []);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].flag) {
      b2 = comp1({}, key + \`__1\`, node, this, null);
    }
@@ -54,7 +54,7 @@ exports[`lifecycle hooks component semantics 3`] = `
  let block1 = createBlock(\`<div>C<block-child-0/><block-child-1/><block-child-2/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4;
+    let b2, b3, b4;
    b2 = comp1({}, key + \`__1\`, node, this, null);
    if (ctx['state'].flag) {
      b3 = comp2({}, key + \`__2\`, node, this, null);
@@ -174,7 +174,7 @@ exports[`lifecycle hooks destroy new children before being mountged 1`] = `
  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4;
+    let b2, b3, b4;
    b2 = text(\`before\`);
    if (ctx['state'].flag) {
      b3 = comp1({}, key + \`__1\`, node, this, null);
@@ -826,7 +826,7 @@ exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is
  let block3 = createBlock(\`<div/>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].ok) {
      b2 = comp1({}, key + \`__1\`, node, this, null);
    } else {
@@ -11,7 +11,7 @@ exports[`.alike suffix in a list 1`] = `
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['state'].elems);;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`elem\`] = v_block1[i1];
+      ctx[\`elem\`] = k_block1[i1];
      const key1 = ctx['elem'].id;
      const v1 = ctx['this'];
      const v2 = ctx['elem'];
@@ -106,7 +106,7 @@ exports[`basics arrow functions as prop correctly capture their scope 1`] = `
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['items']);;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = v_block1[i1];
+      ctx[\`item\`] = k_block1[i1];
      const key1 = ctx['item'].val;
      const v1 = ctx['onClick'];
      const v2 = ctx['item'];
@@ -39,7 +39,7 @@ exports[`default props can set default boolean values 2`] = `
  let block1 = createBlock(\`<span><block-child-0/><block-child-1/></span>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['props'].p) {
      b2 = text(\`hey\`);
    }
@@ -23,7 +23,7 @@ exports[`refs can use 2 refs with same name in a t-if/t-else situation 1`] = `
  let block3 = createBlock(\`<span block-ref=\\"0\\"/>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].value) {
      let ref1 = (el) => this.__owl__.setRef((\`coucou\`), el);
      b2 = block2([ref1]);
@@ -509,7 +509,7 @@ exports[`slots default slot with slot scope: shorthand syntax 1`] = `
  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
  
  function slot1(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['slotScope'].bool) {
      b2 = text(\`some text\`);
    } else {
@@ -633,7 +633,7 @@ exports[`slots dynamic slot in multiple locations 2`] = `
  let block2 = createBlock(\`<p><block-child-0/></p>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b4;
+    let b2, b4;
    if (ctx['props'].location===1) {
      const slot1 = ('coffee');
      const b3 = toggler(slot1, callSlot(ctx, node, key + \`__1\`, slot1, true, {}));
@@ -1462,7 +1462,7 @@ exports[`slots simple default slot with params 1`] = `
  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
  
  function slot1(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['slotScope'].bool) {
      b2 = text(\`some text\`);
    } else {
@@ -1558,7 +1558,7 @@ exports[`slots simple dynamic slot with slot scope 1`] = `
  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
  
  function slot1(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['slotScope'].bool) {
      b2 = text(\`some text\`);
    } else {
@@ -1665,7 +1665,7 @@ exports[`slots simple slot with slot scope 1`] = `
  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
  
  function slot1(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['slotScope'].bool) {
      b2 = text(\`some text\`);
    } else {
@@ -2082,7 +2082,7 @@ exports[`slots slot in multiple locations 2`] = `
  let block2 = createBlock(\`<p><block-child-0/></p>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b4;
+    let b2, b4;
    if (ctx['props'].location===1) {
      const b3 = callSlot(ctx, node, key, 'default', false, {});
      b2 = block2([], [b3]);
@@ -2140,7 +2140,7 @@ exports[`slots slot in t-foreach locations 2`] = `
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['props'].list);;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`elem\`] = v_block1[i1];
+      ctx[\`elem\`] = k_block1[i1];
      ctx[\`elem_index\`] = i1;
      const key1 = ctx['elem_index'];
      let txt1 = ctx['elem'];
@@ -2430,7 +2430,7 @@ exports[`slots slots are rendered with proper context, part 2 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].users);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`user\`] = v_block2[i1];
+      ctx[\`user\`] = k_block2[i1];
      const key1 = ctx['user'].id;
      const ctx1 = capture(ctx);
      const b7 = comp1({to: '/user/'+ctx['user'].id,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null);
@@ -2478,7 +2478,7 @@ exports[`slots slots are rendered with proper context, part 3 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].users);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`user\`] = v_block2[i1];
+      ctx[\`user\`] = k_block2[i1];
      const key1 = ctx['user'].id;
      setContextValue(ctx, \\"userdescr\\", 'User '+ctx['user'].name);
      const ctx1 = capture(ctx);
@@ -2625,7 +2625,7 @@ exports[`slots slots in t-foreach and re-rendering 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(2));;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`n\`] = v_block2[i1];
+      ctx[\`n\`] = k_block2[i1];
      ctx[\`n_index\`] = i1;
      const key1 = ctx['n_index'];
      const ctx1 = capture(ctx);
@@ -2674,14 +2674,14 @@ exports[`slots slots in t-foreach in t-foreach 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['tree']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`node1\`] = v_block2[i1];
+      ctx[\`node1\`] = k_block2[i1];
      const key1 = ctx['node1'].key;
      let txt1 = ctx['node1'].value;
      const b4 = block4([txt1]);
      ctx = Object.create(ctx);
      const [k_block6, v_block6, l_block6, c_block6] = prepareList(ctx['node1'].nodes);;
      for (let i2 = 0; i2 < l_block6; i2++) {
-        ctx[\`node2\`] = v_block6[i2];
+        ctx[\`node2\`] = k_block6[i2];
        const key2 = ctx['node2'].key;
        const ctx1 = capture(ctx);
        c_block6[i2] = withKey(comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}__\${key2}\`, node, this, null), key2);
@@ -2731,7 +2731,7 @@ exports[`slots slots in t-foreach with t-set and re-rendering 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(2));;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`n\`] = v_block2[i1];
+      ctx[\`n\`] = k_block2[i1];
      ctx[\`n_index\`] = i1;
      const key1 = ctx['n_index'];
      setContextValue(ctx, \\"dummy\\", ctx['n_index']);
@@ -2881,13 +2881,13 @@ exports[`slots t-slot in recursive templates 1`] = `
    ctx = Object.create(ctx);
    const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['items']);;
    for (let i1 = 0; i1 < l_block3; i1++) {
-      ctx[\`item\`] = v_block3[i1];
+      ctx[\`item\`] = k_block3[i1];
      ctx[\`item_first\`] = i1 === 0;
-      ctx[\`item_last\`] = i1 === v_block3.length - 1;
+      ctx[\`item_last\`] = i1 === k_block3.length - 1;
      ctx[\`item_index\`] = i1;
-      ctx[\`item_value\`] = k_block3[i1];
+      ctx[\`item_value\`] = v_block3[i1];
      const key1 = ctx['item'].name;
-      let b5,b6;
+      let b5, b6;
      if (!ctx['item'].children.length) {
        b5 = text(ctx['item'].name);
      } else {
@@ -166,7 +166,7 @@ exports[`style and class handling class on sub component, which is switched to a
  const comp2 = app.createComponent(\`ChildB\`, true, false, false, [\\"class\\"]);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['props'].child==='a') {
      b2 = comp1({class: ctx['props'].class}, key + \`__1\`, node, this, null);
    } else {
@@ -10,8 +10,8 @@ exports[`t-call dynamic t-call 1`] = `
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1;
-    const b1 = text(\` owl \`);
-    ctx[zero] = b1;
+    const b2 = text(\` owl \`);
+    ctx[zero] = b2;
    const template1 = (ctx['current'].template);
    return call(this, template1, ctx, node, key + \`__1\`);
  }
@@ -42,6 +42,56 @@ exports[`t-call dynamic t-call 3`] = `
 }"
 `;

+exports[`t-call dynamic t-call with same sub component 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const call = app.callTemplate.bind(app);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(ctx['current'].template);
+    const template1 = (ctx['current'].template);
+    const b3 = call(this, template1, ctx, node, key + \`__1\`);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`t-call dynamic t-call with same sub component 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return comp1({}, key + \`__1\`, node, this, null);
+  }
+}"
+`;
+
+exports[`t-call dynamic t-call with same sub component 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`child\`);
+  }
+}"
+`;
+
+exports[`t-call dynamic t-call with same sub component 4`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return comp1({}, key + \`__1\`, node, this, null);
+  }
+}"
+`;
+
 exports[`t-call dynamic t-call: key is propagated 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -314,7 +364,7 @@ exports[`t-call sub components in two t-calls 1`] = `
  let block3 = createBlock(\`<div><block-child-0/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].val===1) {
      b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
    } else {
@@ -365,11 +415,11 @@ exports[`t-call t-call in t-foreach and children component 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b','c']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block2[i1];
+      ctx[\`val\`] = k_block2[i1];
      ctx[\`val_first\`] = i1 === 0;
-      ctx[\`val_last\`] = i1 === v_block2.length - 1;
+      ctx[\`val_last\`] = i1 === k_block2.length - 1;
      ctx[\`val_index\`] = i1;
-      ctx[\`val_value\`] = k_block2[i1];
+      ctx[\`val_value\`] = v_block2[i1];
      const key1 = ctx['val'];
      c_block2[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
    }
@@ -14,7 +14,7 @@ exports[`list of components components in a node in a t-foreach  1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item\`] = k_block2[i1];
      const key1 = 'li_'+ctx['item'];
      const b4 = comp1({item: ctx['item']}, key + \`__1__\${key1}\`, node, this, null);
      c_block2[i1] = withKey(block3([], [b4]), key1);
@@ -51,7 +51,7 @@ exports[`list of components crash on duplicate key in dev mode 1`] = `
    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1,2]);;
    const keys1 = new Set();
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = v_block1[i1];
+      ctx[\`item\`] = k_block1[i1];
      const key1 = 'child';
      if (keys1.has(String(key1))) { throw new OwlError(\`Got duplicate key in t-foreach: \${key1}\`)}
      keys1.add(String(key1));
@@ -87,7 +87,7 @@ exports[`list of components crash when using object as keys that serialize to th
    const [k_block1, v_block1, l_block1, c_block1] = prepareList([{},{}]);;
    const keys1 = new Set();
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = v_block1[i1];
+      ctx[\`item\`] = k_block1[i1];
      const key1 = ctx['item'];
      if (keys1.has(String(key1))) { throw new OwlError(\`Got duplicate key in t-foreach: \${key1}\`)}
      keys1.add(String(key1));
@@ -125,7 +125,7 @@ exports[`list of components list of sub components inside other nodes 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].blips);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`blip\`] = v_block2[i1];
+      ctx[\`blip\`] = k_block2[i1];
      const key1 = ctx['blip'].id;
      const b4 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
      c_block2[i1] = withKey(block3([], [b4]), key1);
@@ -191,7 +191,7 @@ exports[`list of components order is correct when slots are not of same type 2`]
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['slotNames']);;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`slotName\`] = v_block1[i1];
+      ctx[\`slotName\`] = k_block1[i1];
      const key1 = ctx['slotName'];
      const slot1 = (ctx['slotName']);
      c_block1[i1] = withKey(toggler(slot1, callSlot(ctx, node, key1 + \`__1__\${key1}\`, slot1, true, {})), key1);
@@ -214,13 +214,13 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].s);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`section\`] = v_block2[i1];
+      ctx[\`section\`] = k_block2[i1];
      ctx[\`section_index\`] = i1;
      const key1 = ctx['section_index'];
      ctx = Object.create(ctx);
      const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['section'].blips);;
      for (let i2 = 0; i2 < l_block3; i2++) {
-        ctx[\`blip\`] = v_block3[i2];
+        ctx[\`blip\`] = k_block3[i2];
        ctx[\`blip_index\`] = i2;
        const key2 = ctx['blip_index'];
        c_block3[i2] = withKey(comp1({blip: ctx['blip']}, key + \`__1__\${key1}__\${key2}\`, node, this, null), key2);
@@ -263,12 +263,12 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach,
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].rows);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`row\`] = v_block2[i1];
+      ctx[\`row\`] = k_block2[i1];
      const key1 = ctx['row'];
      ctx = Object.create(ctx);
      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].cols);;
      for (let i2 = 0; i2 < l_block4; i2++) {
-        ctx[\`col\`] = v_block4[i2];
+        ctx[\`col\`] = k_block4[i2];
        const key2 = ctx['col'];
        const b6 = comp1({row: ctx['row'],col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, this, null);
        c_block4[i2] = withKey(block5([], [b6]), key2);
@@ -308,7 +308,7 @@ exports[`list of components simple list 1`] = `
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['state'].elems);;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`elem\`] = v_block1[i1];
+      ctx[\`elem\`] = k_block1[i1];
      const key1 = ctx['elem'].id;
      c_block1[i1] = withKey(comp1({value: ctx['elem'].value}, key + \`__1__\${key1}\`, node, this, null), key1);
    }
@@ -344,7 +344,7 @@ exports[`list of components sub components rendered in a loop 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].numbers);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`number\`] = v_block2[i1];
+      ctx[\`number\`] = k_block2[i1];
      const key1 = ctx['number'];
      c_block2[i1] = withKey(comp1({n: ctx['number']}, key + \`__1__\${key1}\`, node, this, null), key1);
    }
@@ -381,7 +381,7 @@ exports[`list of components sub components with some state rendered in a loop 1`
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].numbers);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`number\`] = v_block2[i1];
+      ctx[\`number\`] = k_block2[i1];
      const key1 = ctx['number'];
      c_block2[i1] = withKey(comp1({}, key + \`__1__\${key1}\`, node, this, null), key1);
    }
@@ -418,7 +418,7 @@ exports[`list of components switch component position 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['clist']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`c\`] = v_block2[i1];
+      ctx[\`c\`] = k_block2[i1];
      const key1 = ctx['c'];
      c_block2[i1] = withKey(comp1({key: ctx['c']}, key + \`__1__\${key1}\`, node, this, null), key1);
    }
@@ -455,7 +455,7 @@ exports[`list of components t-foreach with t-component, and update 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(2));;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`n\`] = v_block2[i1];
+      ctx[\`n\`] = k_block2[i1];
      ctx[\`n_index\`] = i1;
      const key1 = ctx['n_index'];
      c_block2[i1] = withKey(comp1({val: ctx['n_index']}, key + \`__1__\${key1}\`, node, this, null), key1);
@@ -13,7 +13,7 @@ exports[`t-key t-foreach with t-key switch component position 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['clist']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`c\`] = v_block2[i1];
+      ctx[\`c\`] = k_block2[i1];
      const key1 = ctx['c'];
      const tKey_1 = ctx['key1'];
      c_block2[i1] = withKey(comp1({key: ctx['c']+ctx['key1']}, tKey_1 + key + \`__1__\${key1}\`, node, this, null), tKey_1 + key1);
@@ -196,7 +196,7 @@ exports[`t-model directive in a t-foreach 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`thing\`] = v_block2[i1];
+      ctx[\`thing\`] = k_block2[i1];
      const key1 = ctx['thing'].id;
      const bExpr1 = ctx['thing'];
      const expr1 = 'f';
@@ -223,7 +223,7 @@ exports[`t-model directive in a t-foreach, part 2 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`thing\`] = v_block2[i1];
+      ctx[\`thing\`] = k_block2[i1];
      ctx[\`thing_index\`] = i1;
      const key1 = ctx['thing_index'];
      const bExpr1 = ctx['state'];
@@ -251,7 +251,7 @@ exports[`t-model directive in a t-foreach, part 3 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['names']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`name\`] = v_block2[i1];
+      ctx[\`name\`] = k_block2[i1];
      ctx[\`name_index\`] = i1;
      const key1 = ctx['name_index'];
      const bExpr1 = ctx['state'].values;
@@ -376,7 +376,7 @@ exports[`t-model directive on an input, type=checkbox 1`] = `
  let block1 = createBlock(\`<div><input type=\\"checkbox\\" block-property-0=\\"checked\\" block-handler-1=\\"input\\"/><span><block-child-0/><block-child-1/></span></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    const bExpr1 = ctx['state'];
    const expr1 = 'flag';
    let prop1 = bExpr1[expr1];
@@ -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\`] = k_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
 ) {
@@ -556,7 +586,7 @@ exports[`t-model directive t-model with dynamic values on select options in fore
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['options']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`v\`] = v_block2[i1];
+      ctx[\`v\`] = k_block2[i1];
      const key1 = ctx['v'];
      let attr1 = ctx['v'];
      let attr2 = bValue1 === ctx['v'];
@@ -583,7 +613,7 @@ exports[`t-model directive t-model with radio button group in t-foreach 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['options']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`opt\`] = v_block2[i1];
+      ctx[\`opt\`] = k_block2[i1];
      const key1 = ctx['opt'];
      let prop1 = new String((ctx['opt']) === 0 ? 0 : ((ctx['opt']) || \\"\\"));
      let attr1 = ctx['opt'];
@@ -610,7 +640,7 @@ exports[`t-model directive two inputs in a div alternating with a t-if 1`] = `
  let block3 = createBlock(\`<input class=\\"b\\" block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['state'].flag) {
      const bExpr1 = ctx['state'];
      const expr1 = 'text1';
@@ -16,7 +16,7 @@ exports[`t-on t-on expression captured in t-foreach 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['arr']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block2[i1];
+      ctx[\`val\`] = k_block2[i1];
      const key1 = ctx['val'];
      const v1 = ctx['otherState'];
      const v2 = ctx['iter'];
@@ -43,7 +43,7 @@ exports[`t-on t-on expression in t-foreach 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block2[i1];
+      ctx[\`val\`] = k_block2[i1];
      ctx[\`val_index\`] = i1;
      const key1 = ctx['val'];
      let txt1 = ctx['val_index'];
@@ -75,7 +75,7 @@ exports[`t-on t-on expression in t-foreach with t-set 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block2[i1];
+      ctx[\`val\`] = k_block2[i1];
      ctx[\`val_index\`] = i1;
      const key1 = ctx['val'];
      setContextValue(ctx, \\"bossa\\", ctx['bossa']+'_'+ctx['val_index']);
@@ -106,7 +106,7 @@ exports[`t-on t-on method call in t-foreach 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block2[i1];
+      ctx[\`val\`] = k_block2[i1];
      ctx[\`val_index\`] = i1;
      const key1 = ctx['val'];
      let txt1 = ctx['val_index'];
@@ -196,7 +196,7 @@ exports[`t-on t-on on components and t-foreach 1`] = `
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList(['John','Raoul','Gérald']);;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`name\`] = v_block1[i1];
+      ctx[\`name\`] = k_block1[i1];
      const key1 = ctx['name'];
      const v1 = ctx['this'];
      const v2 = ctx['name'];
@@ -493,7 +493,7 @@ exports[`t-on t-on when first component child is an empty component 2`] = `
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['props'].list);;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`c\`] = v_block1[i1];
+      ctx[\`c\`] = k_block1[i1];
      ctx[\`c_index\`] = i1;
      const key1 = ctx['c_index'];
      let txt1 = ctx['c'];
@@ -17,7 +17,7 @@ exports[`components in t-out simple list 1`] = `
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1,2]);;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`n\`] = v_block1[i1];
+      ctx[\`n\`] = k_block1[i1];
      const key1 = ctx['n'];
      ctx[\`blabla\`] = new LazyValue(value1, ctx, this, node, key1);
      c_block1[i1] = withKey(safeOutput(ctx['blabla']), key1);
@@ -1024,7 +1024,7 @@ describe("support svg components", () => {
    await mount(Svg, fixture);

    expect(fixture.innerHTML).toBe(
-      '<svg><g><circle cx="50" cy="50" r="4" stroke="green" stroke-width="1" fill="yellow"></circle></g></svg>'
+      '<svg xmlns="http://www.w3.org/2000/svg"><g xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="4" stroke="green" stroke-width="1" fill="yellow"></circle></g></svg>'
    );
  });
 });
@@ -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 };

@@ -20,7 +20,7 @@ import {
  useLogLifecycle,
  nextAppError,
 } from "../helpers";
-import { OwlError } from "../../src/runtime/error_handling";
+import { OwlError } from "../../src/common/owl_error";

 let fixture: HTMLElement;

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

+  test("display a nice error if the root component template fails to compile", async () => {
+    // This is a special case: mount throws synchronously and we don't have any
+    // node which can handle the error, hence the different structure of this test
+    class Comp extends Component {
+      static template = xml`<div t-att-class="a b">test</div>`;
+    }
+    const app = new App(Comp);
+    let error: Error;
+    try {
+      await app.mount(fixture);
+    } catch (e) {
+      error = e as Error;
+    }
+    const expectedErrorMessage = `Failed to compile anonymous template: Unexpected identifier
+
+generated code:
+function(app, bdom, helpers) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0="class">test</div>\`);
+  
+  return function template(ctx, node, key = "") {
+    let attr1 = ctx['a']ctx['b'];
+    return block1([attr1]);
+  }
+}`;
+    expect(error!).toBeDefined();
+    expect(error!.message).toBe(expectedErrorMessage);
+  });
+
+  test("display a nice error if a non-root component template fails to compile", async () => {
+    class Child extends Component {
+      static template = xml`<div t-att-class="a b">test</div>`;
+    }
+    class Parent extends Component {
+      static components = { Child };
+      static template = xml`<Child/>`;
+    }
+    const expectedErrorMessage = `Failed to compile anonymous template: Unexpected identifier
+
+generated code:
+function(app, bdom, helpers) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0="class">test</div>\`);
+  
+  return function template(ctx, node, key = "") {
+    let attr1 = ctx['a']ctx['b'];
+    return block1([attr1]);
+  }
+}`;
+    const app = new App(Parent as typeof Component);
+    let error: Error;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(expectedErrorMessage);
+    await mountProm;
+    expect(error!).toBeDefined();
+    expect(error!.message).toBe(expectedErrorMessage);
+  });
+
  test("simple catchError", async () => {
    class Boom extends Component {
      static template = xml`<div t-esc="a.b.c"/>`;
@@ -1444,6 +1504,7 @@ describe("can catch errors", () => {
      "Parent:willPatch",
      "Child:willUnmount",
      "Child:willDestroy",
+      "Parent:patched",
      "Parent:willRender",
      "Parent:rendered",
      "Parent:willPatch",
@@ -1506,12 +1567,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");
  });
 });
@@ -1,4 +1,4 @@
-import { OwlError } from "../../src/runtime/error_handling";
+import { OwlError } from "../../src/common/owl_error";
 import { App, Component, mount, onMounted, useState, xml } from "../../src";
 import { makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";

@@ -398,4 +398,31 @@ describe("t-call", () => {
    });
    expect(fixture.innerHTML).toBe("");
  });
+
+  test("dynamic t-call with same sub component", async () => {
+    class Child extends Component {
+      static template = xml`child`;
+    }
+
+    class Root extends Component {
+      static template = xml`
+        <t t-esc="current.template"/>
+        <t t-call="{{current.template}}"/>`;
+      static components = { Child };
+      current = useState({ template: "A" });
+    }
+
+    const root = await mount(Root, fixture, {
+      templates: `
+        <templates>
+          <t t-name="A"><Child/></t>
+          <t t-name="B"><Child/></t>
+        </templates>`,
+    });
+    expect(fixture.innerHTML).toBe("Achild");
+
+    root.current.template = "B";
+    await nextTick();
+    expect(fixture.innerHTML).toBe("Bchild");
+  });
 });
@@ -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 {
@@ -19,7 +19,7 @@ import { helpers } from "../src/runtime/template_helpers";
 import { TemplateSet, globalTemplates } from "../src/runtime/template_set";
 import { BDom } from "../src/runtime/blockdom";
 import { compile } from "../src/compiler";
-import { OwlError } from "../src/runtime/error_handling";
+import { OwlError } from "../src/common/owl_error";

 const mount = blockDom.mount;

@@ -18,7 +18,7 @@ exports[`Portal Add and remove portals 1`] = `
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['portalIds']);;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`portalId\`] = v_block1[i1];
+      ctx[\`portalId\`] = k_block1[i1];
      const key1 = ctx['portalId'];
      const ctx1 = capture(ctx);
      c_block1[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
@@ -47,7 +47,7 @@ exports[`Portal Add and remove portals on div 1`] = `
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['portalIds']);;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`portalId\`] = v_block1[i1];
+      ctx[\`portalId\`] = k_block1[i1];
      const key1 = ctx['portalId'];
      const ctx1 = capture(ctx);
      c_block1[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
@@ -77,7 +77,7 @@ exports[`Portal Add and remove portals with t-foreach 1`] = `
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['portalIds']);;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`portalId\`] = v_block1[i1];
+      ctx[\`portalId\`] = k_block1[i1];
      const key1 = ctx['portalId'];
      let txt1 = ctx['portalId'];
      const ctx1 = capture(ctx);
@@ -109,7 +109,7 @@ exports[`Portal Add and remove portals with t-foreach and destroy 1`] = `
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['portalIds']);;
    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`portalId\`] = v_block1[i1];
+      ctx[\`portalId\`] = k_block1[i1];
      const key1 = ctx['portalId'];
      let txt1 = ctx['portalId'];
      const ctx1 = capture(ctx);
@@ -142,7 +142,7 @@ exports[`Portal Add and remove portals with t-foreach inside div 1`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['portalIds']);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`portalId\`] = v_block2[i1];
+      ctx[\`portalId\`] = k_block2[i1];
      const key1 = ctx['portalId'];
      let txt1 = ctx['portalId'];
      const ctx1 = capture(ctx);
@@ -345,7 +345,7 @@ exports[`Portal conditional use of Portal (with sub Component) 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b4;
+    let b2, b4;
    b2 = block2();
    if (ctx['state'].hasPortal) {
      b4 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
@@ -384,7 +384,7 @@ exports[`Portal conditional use of Portal 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b4;
+    let b2, b4;
    b2 = block2();
    if (ctx['state'].hasPortal) {
      b4 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
@@ -429,7 +429,7 @@ exports[`Portal conditional use of Portal with child and div 2`] = `
    ctx = Object.create(ctx);
    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1]);;
    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`elem\`] = v_block2[i1];
+      ctx[\`elem\`] = k_block2[i1];
      const key1 = ctx['elem'];
      const ctx1 = capture(ctx);
      c_block2[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
@@ -479,7 +479,7 @@ exports[`Portal conditional use of Portal with child and div, variation 2`] = `
    ctx = Object.create(ctx);
    const [k_block3, v_block3, l_block3, c_block3] = prepareList([1]);;
    for (let i1 = 0; i1 < l_block3; i1++) {
-      ctx[\`elem\`] = v_block3[i1];
+      ctx[\`elem\`] = k_block3[i1];
      const key1 = ctx['elem'];
      const ctx1 = capture(ctx);
      c_block3[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
@@ -699,7 +699,7 @@ exports[`Portal portal with dynamic body 1`] = `
  let block4 = createBlock(\`<div/>\`);
  
  function slot1(ctx, node, key = \\"\\") {
-    let b3,b4;
+    let b3, b4;
    if (ctx['state'].val) {
      let txt1 = ctx['state'].val;
      b3 = block3([txt1]);
@@ -848,7 +848,7 @@ exports[`Portal simple catchError with portal 1`] = `
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2, b3;
    if (ctx['error']) {
      b2 = text(\`Error\`);
    } else {
@@ -1,4 +1,4 @@
-import { OwlError } from "../../src/runtime/error_handling";
+import { OwlError } from "../../src/common/owl_error";
 import {
  App,
  Component,
@@ -988,7 +988,7 @@ describe("Portal: Props validation", () => {
      error = e as Error;
    }
    expect(error!).toBeDefined();
-    expect(error!.message).toBe(`Unexpected token ','`);
+    expect(error!.message).toContain(`Unexpected token ','`);
  });

  test("target must be a valid selector", async () => {
@@ -1,6 +1,6 @@
 {
  "name": "Owl devtools",
-  "version": "1.0",
+  "version": "1.2.1",
  "manifest_version": 3,
  "description": "Chrome devtools extension for Odoo Owl framework",
  "icons": {
@@ -5,7 +5,7 @@ let owlStatus = 0;
 const browserInstance = IS_FIREFOX ? browser : chrome;

 // Used to keep track of the tabs where the owl devtools have been opened
-const activePanels = new Set();
+const activePanels = new Map();

 // Load the devtools global hook this way when running on manifest v3 chrome
 if (!IS_FIREFOX) {
@@ -75,8 +75,23 @@ browserInstance.runtime.onMessage.addListener(async (message, sender, sendRespon
    return true;
  } else if (message.type === "owlStatus") {
    setOwlStatus(message.data);
-    // Dummy message to test if the extension context is still valid
+    // Refresh panel connection timeout
  } else if (message.type === "keepAlive") {
+    const panel = activePanels.get(message.id);
+    if (panel) {
+      clearTimeout(panel.expirationTimeout);
+      panel.expirationTimeout = setTimeout(() => {
+        activePanels.delete(message.id);
+        panel.port.disconnect();
+      }, 750);
+    } else {
+      const port = browserInstance.runtime.connect({ name: "OwlDevtoolsPort_" + message.id });
+      const expirationTimeout = setTimeout(() => {
+        activePanels.delete(message.id);
+        port.disconnect();
+      }, 750);
+      activePanels.set(message.id, { port: port, expirationTimeout: expirationTimeout });
+    }
    return;
    // Open the devtools documentation in a new tab
  } else if (message.type === "openDoc") {
@@ -87,10 +102,15 @@ browserInstance.runtime.onMessage.addListener(async (message, sender, sendRespon
      }
    );
    return;
-    // Relay the received message to the devtools app
+    // Register a new port for the devtools panel
  } else if (message.type === "newDevtoolsPanel") {
-    const tab = await getActiveTabURL();
-    activePanels.add(tab);
+    const id = message.id;
+    const port = browserInstance.runtime.connect({ name: "OwlDevtoolsPort_" + id });
+    const expirationTimeout = setTimeout(() => {
+      activePanels.delete(id);
+      port.disconnect();
+    }, 750);
+    activePanels.set(message.id, { port: port, expirationTimeout: expirationTimeout });
    // This is solely for firefox which doesnt allow access to the chrome.tabs api inside devtools
  } else if (message.type === "getActiveTabURL") {
    getActiveTabURL().then((tab) => {
@@ -98,15 +118,13 @@ browserInstance.runtime.onMessage.addListener(async (message, sender, sendRespon
    });
    return true;
  } else {
-    const tab = await getActiveTabURL();
-    if (!activePanels.has(tab)) {
-      return;
+    const destinationPanel = activePanels.get(sender.tab.id);
+    if (destinationPanel) {
+      destinationPanel.port.postMessage(
+        message.data
+          ? { type: message.type, data: message.data, origin: message.origin }
+          : { type: message.type, origin: message.origin }
+      );
    }
-    const port = browserInstance.runtime.connect({ name: "OwlDevtoolsPort" });
-    port.postMessage(
-      message.data
-        ? { type: message.type, data: message.data, origin: message.origin }
-        : { type: message.type, origin: message.origin }
-    );
  }
 });
@@ -27,7 +27,6 @@ function createPanelsIfOwl() {
        "../../assets/icon128.png",
        IS_FIREFOX ? "devtools_panel.html" : "devtools_app/devtools_panel.html"
      );
-      browserInstance.runtime.sendMessage({ type: "newDevtoolsPanel" });
    }
  );
 }
@@ -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");
@@ -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">
@@ -72,7 +76,7 @@
        </t>
      </div>
    </div>
-    <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="contextmenu">
+    <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-ref="contextmenu">
      <ul class="my-1">
        <li t-on-click.stop="() => this.store.inspectComponent('source', store.activeComponent.path)" class="custom-menu-item py-1 px-4">Inspect source code</li>
        <t t-if="store.activeComponent.path.length !== 1">
@@ -41,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() {
@@ -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,9 +28,10 @@
            </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-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="contextmenu">
+    <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-ref="contextmenu">
      <ul class="my-1">
        <li t-on-click="() => this.store.logObjectInConsole(this.props.object.path)" class="custom-menu-item py-1 px-4 text-nowrap">Store as global variable</li>
        <t t-if='props.object.contentType == "function"'>
@@ -38,10 +39,9 @@
        </t>
      </ul>
    </div>
-    <t t-if="props.object.toggled">
-      <t t-foreach="props.object.children" t-as="child" t-key="child.name">
-        <ObjectTreeElement t-if="props.object.objectType === 'subscription'" object="child" keys="props.keys"/>
-        <ObjectTreeElement t-else="" object="child"/>
+    <t t-if="props.object.toggled" t-key="contextMenuId">
+      <t t-foreach="props.object.children" t-as="child" t-key="child_index">
+        <ObjectTreeElement object="child" class="this.classFor(child)"/>
      </t>
    </t>
  </t>
@@ -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;
-  }
-}
@@ -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>
@@ -1,9 +1,11 @@
 /** @odoo-module **/

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

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

 export class TreeElement extends Component {
@@ -105,4 +107,30 @@ export class TreeElement extends Component {
      this.store.selectComponent(this.props.component.path);
    }
  }
+
+  // Adds the component name to the components toggle blacklist if not already present
+  // Else, remove it from the blacklist
+  toggleComponentToBlacklist() {
+    if (this.store.settings.componentsToggleBlacklist.has(this.props.component.name)) {
+      if (!this.props.component.toggled) {
+        this.props.component.toggled = !this.props.component.toggled;
+      }
+      this.store.settings.componentsToggleBlacklist.delete(this.props.component.name);
+      browserInstance.storage.local.set({
+        owlDevtoolsComponentsToggleBlacklist: Array.from(
+          this.store.settings.componentsToggleBlacklist
+        ),
+      });
+    } else {
+      if (this.props.component.toggled) {
+        this.props.component.toggled = !this.props.component.toggled;
+      }
+      this.store.settings.componentsToggleBlacklist.add(this.props.component.name);
+      browserInstance.storage.local.set({
+        owlDevtoolsComponentsToggleBlacklist: Array.from(
+          this.store.settings.componentsToggleBlacklist
+        ),
+      });
+    }
+  }
 }
@@ -26,7 +26,7 @@
        <span t-if="props.component.depth">&gt;</span>
        <span class="version" t-else="">owl=<t t-esc="props.component.version"/></span>
      </div>
-      <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="contextmenu">
+      <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-ref="contextmenu">
        <ul class="my-1">
          <li t-on-click.stop="() => this.store.toggleComponentAndChildren(props.component, true)" class="custom-menu-item py-1 px-4">Expand children</li>
          <li t-on-click.stop="() => this.store.toggleComponentAndChildren(props.component, false)" class="custom-menu-item py-1 px-4">Fold all children</li>
@@ -43,6 +43,10 @@
          <t t-else="">
            <li t-on-click.stop="() => this.store.logObjectInConsole([...props.component.path])" class="custom-menu-item py-1 px-4">Store as global variable</li>
          </t>
+          <li t-on-click.stop="() => this.toggleComponentToBlacklist()" class="custom-menu-item py-1 px-4">
+            <t t-if="store.settings.componentsToggleBlacklist.has(props.component.name)">Don't fold component by default</t>
+            <t t-else="">Fold component by default</t>
+          </li>
        </ul>
      </div>
    </div>
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
  <t t-name="devtools.Event" owl="1">
-    <div class="event-container">
+    <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"
@@ -43,7 +43,7 @@
          </span>
        </div>
      </t>
-      <div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="componentContextmenu">
+      <div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-ref="componentContextmenu">
        <ul class="my-1">
          <li t-on-click.stop="() => this.store.inspectComponent('source', props.event.path)" class="custom-menu-item py-1 px-4">Inspect source code</li>
          <t t-if="props.event.path.length !== 1">
@@ -28,14 +28,14 @@
        </span>
      </div>
    </div>
-    <div t-if="store.contextMenu.activeMenu === nodeContextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="nodeContextMenu">
+    <div t-if="store.contextMenu.activeMenu === nodeContextMenuId" class="custom-menu" t-ref="nodeContextMenu">
      <ul class="my-1">
        <li t-on-click.stop="() => this.store.toggleEventAndChildren(props.event, true)" class="custom-menu-item py-1 px-4">Expand children</li>
        <li t-on-click.stop="() => this.store.toggleEventAndChildren(props.event, false)" class="custom-menu-item py-1 px-4">Fold all children</li>
        <li t-on-click.stop="() => this.store.foldDirectChildren(props.event)" class="custom-menu-item py-1 px-4">Fold direct children</li>
      </ul>
    </div>
-    <div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="componentContextmenu">
+    <div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-ref="componentContextmenu">
      <ul class="my-1">
        <li t-on-click.stop="() => this.store.inspectComponent('source', props.event.path)" class="custom-menu-item py-1 px-4">Inspect source code</li>
        <t t-if="props.event.path.length !== 1">
@@ -11,10 +11,9 @@ export const store = reactive({
    expandByDefault: true,
    toggleOnSelected: false,
    darkmode: false,
+    componentsToggleBlacklist: new Set(),
  },
  contextMenu: {
-    top: 0,
-    left: 0,
    id: 0,
    activeMenu: -1,
    // Opens the context menu corresponding with the given menu html element
@@ -29,9 +28,9 @@ export const store = reactive({
      if (y + menuHeight > window.innerHeight) {
        y = window.innerHeight - menuHeight;
      }
-      this.left = x + "px";
+      menu.style.left = x + "px";
      // Need 25px offset because of the main navbar from the browser devtools
-      this.top = y - 25 + "px";
+      menu.style.top = y - 25 + "px";
    },
    // Close the currently displayed context menu
    close() {
@@ -103,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));
+      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
@@ -154,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");
@@ -414,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];
        }
@@ -503,13 +497,18 @@ export const store = reactive({
  },

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

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

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

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

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

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

-  loadSettings();
+  browserInstance.runtime.sendMessage({ type: "newDevtoolsPanel", id: store.devtoolsId });
+
+  // Heartbeat message to test whether the extension context is still valid or not
+  setInterval(() => {
+    if (store.extensionContextStatus) {
+      try {
+        browserInstance.runtime.sendMessage({ type: "keepAlive", id: store.devtoolsId });
+      } catch (e) {
+        store.extensionContextStatus = false;
+      }
+    }
+  }, 500);
 }

-// Heartbeat message to test whether the extension context is still valid or not
-setInterval(() => {
-  if (store.extensionContextStatus) {
-    try {
-      browserInstance.runtime.sendMessage({ type: "keepAlive" });
-    } catch (e) {
-      store.extensionContextStatus = false;
-    }
-  }
-}, 1000);
-
-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") {
-    return;
-  }
-  port.onMessage.addListener(async (msg) => {
-    // Reload the tree after checking if the scripts are loaded when this message is received
-    if (msg.type === "Reload") {
-      const tab = await getTabURL();
-      // Since this message is sent to all devtools windows, only take it into account when this is the active tab
-      if (tab !== store.devtoolsId) {
-        return;
+  if (port.name === "OwlDevtoolsPort_" + store.devtoolsId) {
+    port.onMessage.addListener(async (msg) => {
+      // Reload the tree after checking if the scripts are loaded when this message is received
+      if (msg.type === "Reload") {
+        store.owlStatus = await evalInWindow("window.__OWL__DEVTOOLS_GLOBAL_HOOK__ !== undefined;");
+        if (store.owlStatus) {
+          evalFunctionInWindow("initDevtools", []);
+          await store.resetData();
+        }
      }
-      store.owlStatus = await evalInWindow("window.__OWL__DEVTOOLS_GLOBAL_HOOK__ !== undefined;");
-      if (store.owlStatus) {
-        evalInWindow("__OWL__DEVTOOLS_GLOBAL_HOOK__.devtoolsId = " + store.devtoolsId + ";");
-        store.resetData();
-      }
-    }
-    // Received when a frame has been delayed when loading the scripts due to owl being lazy loaded
-    if (msg.type === "FrameReady") {
-      const tab = await getTabURL();
-      // Same as for the reload message
-      if (tab !== store.devtoolsId) {
-        return;
-      }
-      store.updateIFrameList();
-      store.owlStatus = true;
-      store.resetData();
-    }
-    // We need to reload the components tree when the set of apps in the page is modified
-    if (msg.type === "RefreshApps") {
-      store.loadComponentsTree(true);
-    }
-    // Filter out the messages that are not destined to this devtools tab. The messages above may be sent before
-    // the devtoolsId is set
-    if (msg.origin.id !== store.devtoolsId) {
-      return;
-    }
-    // When message of type Flush is received, overwrite the component tree with the new one from page
-    // A flush message is sent everytime a component is rendered on the page
-    if (msg.type === "Flush") {
-      if (msg.origin.frame !== store.activeFrame) {
-        return;
-      }
-      if (!(Array.isArray(msg.data) && msg.data.every((val) => typeof val === "string"))) {
-        return;
-      }
-      // 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(() => {
-        store.renderPaths.clear();
-      }, 100);
-      store.loadComponentsTree(true);
-    }
-    // Select the component based on the path received with the SelectElement message
-    if (msg.type === "SelectElement") {
-      if (!(Array.isArray(msg.data) && msg.data.every((val) => typeof val === "string"))) {
-        return;
-      }
-      store.selectComponent(msg.data);
-    }
-    // Stop the DOM element selector tool upon receiving the StopSelector message
-    if (msg.type === "StopSelector") {
-      store.componentSearch.activeSelector = false;
-    }
-
-    // Logic for recording an event when the event message is received
-    if (msg.type === "Event") {
-      let events = msg.data;
-      loadEvents(events);
-    }
-
-    // If we know a new iframe has been added to the page, load scripts into it and update the
-    // frames list if it has been directly loaded.
-    if (msg.type === "NewIFrame") {
-      const isLoaded = await loadScripts(msg.data);
-      if (isLoaded) {
+      // Received when a frame has been delayed when loading the scripts due to owl being lazy loaded
+      if (msg.type === "FrameReady") {
        store.updateIFrameList();
+        store.owlStatus = true;
+        await store.resetData();
      }
-    }
-  });
+      // We need to reload the components tree when the set of apps in the page is modified
+      if (msg.type === "RefreshApps") {
+        store.loadComponentsTree(true);
+      }
+      // When message of type Complete is received, overwrite the component tree with the new one from page
+      // A Complete message is sent everytime a root render is triggered on the page
+      if (msg.type === "Complete") {
+        if (msg.origin.frame !== store.activeFrame) {
+          return;
+        }
+        if (!(Array.isArray(msg.data) && msg.data.every((val) => typeof val === "string"))) {
+          return;
+        }
+        // This determines which components will have a short highlight effect in the tree to indicate they have been rendered
+        store.renderPaths.add(JSON.stringify(msg.data));
+        clearTimeout(rootRendersTimeout);
+        rootRendersTimeout = setTimeout(() => {
+          store.renderPaths.clear();
+        }, 100);
+        store.loadComponentsTree(true);
+      }
+      // Select the component based on the path received with the SelectElement message
+      if (msg.type === "SelectElement") {
+        if (!(Array.isArray(msg.data) && msg.data.every((val) => typeof val === "string"))) {
+          return;
+        }
+        store.selectComponent(msg.data);
+      }
+      // Stop the DOM element selector tool upon receiving the StopSelector message
+      if (msg.type === "StopSelector") {
+        store.componentSearch.activeSelector = false;
+      }
+
+      // Logic for recording an event when the event message is received
+      if (msg.type === "Event") {
+        let events = msg.data;
+        loadEvents(events);
+      }
+
+      // If we know a new iframe has been added to the page, load scripts into it and update the
+      // frames list if it has been directly loaded.
+      if (msg.type === "NewIFrame") {
+        const isLoaded = await loadScripts(msg.data);
+        if (isLoaded) {
+          store.updateIFrameList();
+        }
+      }
+    });
+  }
 });

 // Load all settings from the chrome sync storage
 async function loadSettings() {
  let storage = await browserInstance.storage.local.get();
-  if (storage.owl_devtools_dark_mode === undefined) {
+  // Darkmode
+  if (storage.owlDevtoolsDarkMode === undefined) {
    // Load dark mode based on the global settings of the chrome devtools
    darkMode = browserInstance.devtools.panels.themeName === "dark";
  } else {
-    darkMode = storage.owl_devtools_dark_mode;
+    darkMode = storage.owlDevtoolsDarkMode;
  }
  store.settings.darkMode = darkMode;
  if (darkMode) {
@@ -766,6 +752,12 @@ async function loadSettings() {
  } else {
    document.querySelector("html").classList.remove("dark-mode");
  }
+  // Components toggle blacklist
+  if (storage.owlDevtoolsComponentsToggleBlacklist !== undefined) {
+    store.settings.componentsToggleBlacklist = new Set(
+      storage.owlDevtoolsComponentsToggleBlacklist
+    );
+  }
 }

 // Function to handle and store a batch of events coming from the page
@@ -790,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--) {
@@ -839,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
@@ -885,10 +879,39 @@ function highlightChildren(component) {
 }

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

--- a/Show More
+++ b/Show More