[REF] blockdom: some small optimization

doc/reference/templates.md

@@ -376,16 +376,15 @@ An important difference should be made with the usual `QWeb` behaviour: Owl
 requires the presence of a `t-key` directive, to be able to properly reconcile
 renderings.
 
-`t-foreach` can iterate on any iterable, and also has special support for objects
-and maps, it will expose the key of the current iteration as the contents of the
-`t-as`, and the corresponding value with the same name and the suffix `_value`.
+`t-foreach` can iterate on an array (the current item will be the current value)
+or an object (the current item will be the current key).
 
-In addition to the name passed via t-as, `t-foreach` provides a few other useful
-variables (note: `$as` will be replaced with the name passed to `t-as`):
+In addition to the name passed via t-as, `t-foreach` provides a few other
+variables for various data points (note: `$as` will be replaced with the name
+passed to `t-as`):
 
-- `$as_value`: the current iteration value, identical to `$as` for arrays and
-  other iterables, but for objects and maps, it provides the value (where `$as`
-  provides the key)
+- `$as_value`: the current iteration value, identical to `$as` for lists and
+  integers, but for objects, it provides the value (where `$as` provides the key)
 - `$as_index`: the current iteration index (the first item of the iteration has index 0)
 - `$as_first`: whether the current item is the first of the iteration
   (equivalent to `$as_index == 0`)

docs/owl.js

@@ -82,6 +82,65 @@ 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;
@@ -252,13 +311,20 @@ function updateClass(val, oldVal) {
  * @returns a batched version of the original callback
  */
 function batched(callback) {
-    let scheduled = false;
-    return async (...args) => {
-        if (!scheduled) {
-            scheduled = true;
-            await Promise.resolve();
-            scheduled = false;
-            callback(...args);
+    let called = false;
+    return async () => {
+        // This await blocks all calls to the callback here, then releases them sequentially
+        // in the next microtick. This line decides the granularity of the batch.
+        await Promise.resolve();
+        if (!called) {
+            called = true;
+            // wait for all calls in this microtick to fall through before resetting "called"
+            // so that only the first call to the batched function calls the original callback.
+            // Schedule this before calling the callback so that calls to the batched function
+            // within the callback will proceed only after resetting called to false, and have
+            // a chance to execute the callback again
+            Promise.resolve().then(() => (called = false));
+            callback();
         }
     };
 }
@@ -710,7 +776,12 @@ function buildTree(node, parent = null, domParentTree = null) {
                 info.push({ type: "child", idx: index });
                 el = document.createTextNode("");
             }
-            currentNS || (currentNS = node.namespaceURI);
+            const attrs = node.attributes;
+            const ns = attrs.getNamedItem("block-ns");
+            if (ns) {
+                attrs.removeNamedItem("block-ns");
+                currentNS = ns.value;
+            }
             if (!el) {
                 el = currentNS
                     ? document.createElementNS(currentNS, tagName)
@@ -726,7 +797,6 @@ 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;
@@ -1538,68 +1608,6 @@ 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) {
@@ -1649,7 +1657,8 @@ function cancelFibers(fibers) {
         let node = fiber.node;
         fiber.render = throwOnRender;
         if (node.status === 0 /* NEW */) {
-            node.cancel();
+            node.destroy();
+            delete node.parent.children[node.parentKey];
         }
         node.fiber = null;
         if (fiber.bdom) {
@@ -2177,7 +2186,7 @@ function delegateAndNotify(setterName, getterName, target) {
         if (hadKey !== hasKey) {
             notifyReactives(target, KEYCHANGES);
         }
-        if (originalValue !== target[getterName](key)) {
+        if (originalValue !== value) {
             notifyReactives(target, key);
         }
         return ret;
@@ -2376,9 +2385,6 @@ class ComponentNode {
         }
     }
     async render(deep) {
-        if (this.status >= 2 /* CANCELLED */) {
-            return;
-        }
         let current = this.fiber;
         if (current && (current.root.locked || current.bdom === true)) {
             await Promise.resolve();
@@ -2404,7 +2410,7 @@ class ComponentNode {
         this.fiber = fiber;
         this.app.scheduler.addFiber(fiber);
         await Promise.resolve();
-        if (this.status >= 2 /* CANCELLED */) {
+        if (this.status === 2 /* DESTROYED */) {
             return;
         }
         // We only want to actually render the component if the following two
@@ -2422,18 +2428,6 @@ class ComponentNode {
             fiber.render();
         }
     }
-    cancel() {
-        this._cancel();
-        delete this.parent.children[this.parentKey];
-        this.app.scheduler.scheduleDestroy(this);
-    }
-    _cancel() {
-        this.status = 2 /* CANCELLED */;
-        const children = this.children;
-        for (let childKey in children) {
-            children[childKey]._cancel();
-        }
-    }
     destroy() {
         let shouldRemove = this.status === 1 /* MOUNTED */;
         this._destroy();
@@ -2461,7 +2455,7 @@ class ComponentNode {
                 this.app.handleError({ error: e, node: this });
             }
         }
-        this.status = 3 /* DESTROYED */;
+        this.status = 2 /* DESTROYED */;
     }
     async updateAndRender(props, parentFiber) {
         this.nextProps = props;
@@ -2994,20 +2988,12 @@ function prepareList(collection) {
         keys = collection;
         values = collection;
     }
-    else if (collection instanceof Map) {
-        keys = [...collection.keys()];
-        values = [...collection.values()];
-    }
-    else if (Symbol.iterator in Object(collection)) {
-        keys = [...collection];
-        values = keys;
-    }
-    else if (collection && typeof collection === "object") {
-        values = Object.values(collection);
-        keys = Object.keys(collection);
+    else if (collection) {
+        values = Object.keys(collection);
+        keys = Object.values(collection);
     }
     else {
-        throw new OwlError(`Invalid loop expression: "${collection}" is not iterable`);
+        throw new OwlError("Invalid loop expression");
     }
     const n = values.length;
     return [keys, values, n, new Array(n)];
@@ -3205,10 +3191,6 @@ class TemplateSet {
     }
     addTemplate(name, template) {
         if (name in this.rawTemplates) {
-            // this check can be expensive, just silently ignore double definitions outside dev mode
-            if (!this.dev) {
-                return;
-            }
             const rawTemplate = this.rawTemplates[name];
             const currentAsString = typeof rawTemplate === "string"
                 ? rawTemplate
@@ -3852,7 +3834,7 @@ class CodeGenerator {
     createBlock(parentBlock, type, ctx) {
         const hasRoot = this.target.hasRoot;
         const block = new BlockDescription(this.target, type);
-        if (!hasRoot) {
+        if (!hasRoot && !ctx.preventRoot) {
             this.target.hasRoot = true;
             block.isRoot = true;
         }
@@ -3875,7 +3857,7 @@ class CodeGenerator {
         if (ctx.tKeyExpr) {
             blockExpr = `toggler(${ctx.tKeyExpr}, ${blockExpr})`;
         }
-        if (block.isRoot) {
+        if (block.isRoot && !ctx.preventRoot) {
             if (this.target.on) {
                 blockExpr = this.wrapWithEventCatcher(blockExpr, this.target.on);
             }
@@ -4051,6 +4033,11 @@ 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")) {
@@ -4166,10 +4153,7 @@ class CodeGenerator {
             const idx = block.insertData(setRefStr, "ref");
             attrs["block-ref"] = String(idx);
         }
-        const nameSpace = ast.ns || ctx.nameSpace;
-        const dom = nameSpace
-            ? xmlDoc.createElementNS(nameSpace, ast.tag)
-            : xmlDoc.createElement(ast.tag);
+        const dom = xmlDoc.createElement(ast.tag);
         for (const [attr, val] of Object.entries(attrs)) {
             if (!(attr === "class" && val === "")) {
                 dom.setAttribute(attr, val);
@@ -4211,7 +4195,7 @@ class CodeGenerator {
                             break;
                     }
                 }
-                this.addLine(`let ${block.children.map((c) => c.varName).join(", ")};`, codeIdx);
+                this.addLine(`let ${block.children.map((c) => c.varName)};`, codeIdx);
             }
         }
         return block.varName;
@@ -4314,7 +4298,7 @@ class CodeGenerator {
                             break;
                     }
                 }
-                this.addLine(`let ${block.children.map((c) => c.varName).join(", ")};`, codeIdx);
+                this.addLine(`let ${block.children.map((c) => c.varName)};`, codeIdx);
             }
             // note: this part is duplicated from end of compilemulti:
             const args = block.children.map((c) => c.varName).join(", ");
@@ -4343,18 +4327,18 @@ class CodeGenerator {
         }
         this.addLine(`for (let ${loopVar} = 0; ${loopVar} < ${l}; ${loopVar}++) {`);
         this.target.indentLevel++;
-        this.addLine(`ctx[\`${ast.elem}\`] = ${keys}[${loopVar}];`);
+        this.addLine(`ctx[\`${ast.elem}\`] = ${vals}[${loopVar}];`);
         if (!ast.hasNoFirst) {
             this.addLine(`ctx[\`${ast.elem}_first\`] = ${loopVar} === 0;`);
         }
         if (!ast.hasNoLast) {
-            this.addLine(`ctx[\`${ast.elem}_last\`] = ${loopVar} === ${keys}.length - 1;`);
+            this.addLine(`ctx[\`${ast.elem}_last\`] = ${loopVar} === ${vals}.length - 1;`);
         }
         if (!ast.hasNoIndex) {
             this.addLine(`ctx[\`${ast.elem}_index\`] = ${loopVar};`);
         }
         if (!ast.hasNoValue) {
-            this.addLine(`ctx[\`${ast.elem}_value\`] = ${vals}[${loopVar}];`);
+            this.addLine(`ctx[\`${ast.elem}_value\`] = ${keys}[${loopVar}];`);
         }
         this.define(`key${this.target.loopLevel}`, ast.key ? compileExpr(ast.key) : loopVar);
         if (this.dev) {
@@ -4429,6 +4413,7 @@ class CodeGenerator {
                 block,
                 index,
                 forceNewBlock: !isTSet,
+                preventRoot: ctx.preventRoot,
                 isLast: ctx.isLast && i === l - 1,
             });
             this.compileAST(child, subCtx);
@@ -4437,19 +4422,21 @@ class CodeGenerator {
             }
         }
         if (isNewBlock) {
-            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;
+            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;
+                        }
                     }
+                    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);
@@ -4463,23 +4450,24 @@ 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, { ctxVar });
+            const subCtx = createContext(ctx, { preventRoot: true, 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");
@@ -4487,6 +4475,7 @@ 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,
@@ -4495,6 +4484,7 @@ 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,
@@ -4816,7 +4806,7 @@ function parse(xml) {
 }
 function _parse(xml) {
     normalizeXML(xml);
-    const ctx = { inPreTag: false };
+    const ctx = { inPreTag: false, inSVG: false };
     return parseNode(xml, ctx) || { type: 0 /* Text */, value: "" };
 }
 function parseNode(node, ctx) {
@@ -4830,10 +4820,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) ||
@@ -4907,7 +4897,9 @@ function parseDOMNode(node, ctx) {
     if (tagName === "pre") {
         ctx.inPreTag = true;
     }
-    let ns = !ctx.nameSpace && ROOT_SVG_TAGS.has(tagName) ? "http://www.w3.org/2000/svg" : null;
+    const shouldAddSVGNS = ROOT_SVG_TAGS.has(tagName) && !ctx.inSVG;
+    ctx.inSVG = ctx.inSVG || shouldAddSVGNS;
+    const ns = shouldAddSVGNS ? "http://www.w3.org/2000/svg" : null;
     const ref = node.getAttribute("t-ref");
     node.removeAttribute("t-ref");
     const nodeAttrsNames = node.getAttributeNames();
@@ -4944,8 +4936,10 @@ function parseDOMNode(node, ctx) {
             const typeAttr = node.getAttribute("type");
             const isInput = tagName === "input";
             const isSelect = tagName === "select";
+            const isTextarea = tagName === "textarea";
             const isCheckboxInput = isInput && typeAttr === "checkbox";
             const isRadioInput = isInput && typeAttr === "radio";
+            const isOtherInput = isInput && !isCheckboxInput && !isRadioInput;
             const hasLazyMod = attr.includes(".lazy");
             const hasNumberMod = attr.includes(".number");
             const hasTrimMod = attr.includes(".trim");
@@ -4957,8 +4951,8 @@ function parseDOMNode(node, ctx) {
                 specialInitTargetAttr: isRadioInput ? "checked" : null,
                 eventType,
                 hasDynamicChildren: false,
-                shouldTrim: hasTrimMod,
-                shouldNumberize: hasNumberMod,
+                shouldTrim: hasTrimMod && (isOtherInput || isTextarea),
+                shouldNumberize: hasNumberMod && (isOtherInput || isTextarea),
             };
             if (isSelect) {
                 // don't pollute the original ctx
@@ -4969,9 +4963,6 @@ 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}'`);
@@ -4984,9 +4975,6 @@ function parseDOMNode(node, ctx) {
             attrs[attr] = value;
         }
     }
-    if (ns) {
-        ctx.nameSpace = ns;
-    }
     const children = parseChildren(node, ctx);
     return {
         type: 2 /* DomNode */,
@@ -5027,6 +5015,9 @@ function parseTEscNode(node, ctx) {
             content: [tesc],
         };
     }
+    if (ast.type === 11 /* TComponent */) {
+        throw new OwlError("t-esc is not supported on Component nodes");
+    }
     return tesc;
 }
 // -----------------------------------------------------------------------------
@@ -5468,21 +5459,19 @@ function normalizeTIf(el) {
  *
  * @param el the element containing the tree that should be normalized
  */
-function normalizeTEscTOut(el) {
-    for (const d of ["t-esc", "t-out"]) {
-        const elements = [...el.querySelectorAll(`[${d}]`)].filter((el) => el.tagName[0] === el.tagName[0].toUpperCase() || el.hasAttribute("t-component"));
-        for (const el of elements) {
-            if (el.childNodes.length) {
-                throw new OwlError(`Cannot have ${d} on a component that already has content`);
-            }
-            const value = el.getAttribute(d);
-            el.removeAttribute(d);
-            const t = el.ownerDocument.createElement("t");
-            if (value != null) {
-                t.setAttribute(d, value);
-            }
-            el.appendChild(t);
+function normalizeTEsc(el) {
+    const elements = [...el.querySelectorAll("[t-esc]")].filter((el) => el.tagName[0] === el.tagName[0].toUpperCase() || el.hasAttribute("t-component"));
+    for (const el of elements) {
+        if (el.childNodes.length) {
+            throw new OwlError("Cannot have t-esc on a component that already has content");
         }
+        const value = el.getAttribute("t-esc");
+        el.removeAttribute("t-esc");
+        const t = el.ownerDocument.createElement("t");
+        if (value != null) {
+            t.setAttribute("t-esc", value);
+        }
+        el.appendChild(t);
     }
 }
 /**
@@ -5493,7 +5482,7 @@ function normalizeTEscTOut(el) {
  */
 function normalizeXML(el) {
     normalizeTIf(el);
-    normalizeTEscTOut(el);
+    normalizeTEsc(el);
 }
 /**
  * Parses an XML string into an XML document, throwing errors on parser errors
@@ -5542,20 +5531,11 @@ function compile(template, options = {}) {
     const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext });
     const code = codeGenerator.generateCode();
     // template function
-    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;
-    }
+    return new Function("app, bdom, helpers", code);
 }
 
 // do not modify manually. This file is generated by the release script.
-const version = "2.2.6";
+const version = "2.1.3";
 
 // -----------------------------------------------------------------------------
 //  Scheduler
@@ -5565,18 +5545,11 @@ class Scheduler {
         this.tasks = new Set();
         this.frame = 0;
         this.delayedRenders = [];
-        this.cancelledNodes = new Set();
         this.requestAnimationFrame = Scheduler.requestAnimationFrame;
     }
     addFiber(fiber) {
         this.tasks.add(fiber.root);
     }
-    scheduleDestroy(node) {
-        this.cancelledNodes.add(node);
-        if (this.frame === 0) {
-            this.frame = this.requestAnimationFrame(() => this.processTasks());
-        }
-    }
     /**
      * Process all current tasks. This only applies to the fibers that are ready.
      * Other tasks are left unchanged.
@@ -5586,28 +5559,21 @@ class Scheduler {
             let renders = this.delayedRenders;
             this.delayedRenders = [];
             for (let f of renders) {
-                if (f.root && f.node.status !== 3 /* DESTROYED */ && f.node.fiber === f) {
+                if (f.root && f.node.status !== 2 /* DESTROYED */ && f.node.fiber === f) {
                     f.render();
                 }
             }
         }
         if (this.frame === 0) {
-            this.frame = this.requestAnimationFrame(() => this.processTasks());
-        }
-    }
-    processTasks() {
-        this.frame = 0;
-        for (let node of this.cancelledNodes) {
-            node._destroy();
-        }
-        this.cancelledNodes.clear();
-        for (let task of this.tasks) {
-            this.processFiber(task);
-        }
-        for (let task of this.tasks) {
-            if (task.node.status === 3 /* DESTROYED */) {
-                this.tasks.delete(task);
-            }
+            this.frame = this.requestAnimationFrame(() => {
+                this.frame = 0;
+                this.tasks.forEach((fiber) => this.processFiber(fiber));
+                for (let task of this.tasks) {
+                    if (task.node.status === 2 /* DESTROYED */) {
+                        this.tasks.delete(task);
+                    }
+                }
+            });
         }
     }
     processFiber(fiber) {
@@ -5620,7 +5586,7 @@ class Scheduler {
             this.tasks.delete(fiber);
             return;
         }
-        if (fiber.node.status === 3 /* DESTROYED */) {
+        if (fiber.node.status === 2 /* DESTROYED */) {
             this.tasks.delete(fiber);
             return;
         }
@@ -5644,8 +5610,13 @@ const DEV_MSG = () => {
 This is not suitable for production use.
 See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration for more information.`;
 };
-const apps = new Set();
-window.__OWL_DEVTOOLS__ || (window.__OWL_DEVTOOLS__ = { apps, Fiber, RootFiber, toRaw, reactive });
+window.__OWL_DEVTOOLS__ || (window.__OWL_DEVTOOLS__ = {
+    apps: new Set(),
+    Fiber: Fiber,
+    RootFiber: RootFiber,
+    toRaw: toRaw,
+    reactive: reactive,
+});
 class App extends TemplateSet {
     constructor(Root, config = {}) {
         super(config);
@@ -5653,7 +5624,7 @@ class App extends TemplateSet {
         this.root = null;
         this.name = config.name || "";
         this.Root = Root;
-        apps.add(this);
+        window.__OWL_DEVTOOLS__.apps.add(this);
         if (config.test) {
             this.dev = true;
         }
@@ -5707,10 +5678,10 @@ class App extends TemplateSet {
     }
     destroy() {
         if (this.root) {
+            this.scheduler.flush();
             this.root.destroy();
-            this.scheduler.processTasks();
         }
-        apps.delete(this);
+        window.__OWL_DEVTOOLS__.apps.delete(this);
     }
     createComponent(name, isStatic, hasSlotsProp, hasDynamicPropList, propList) {
         const isDynamic = !isStatic;
@@ -5785,7 +5756,6 @@ class App extends TemplateSet {
     }
 }
 App.validateTarget = validateTarget;
-App.apps = apps;
 App.version = version;
 async function mount(C, target, config = {}) {
     return new App(C, config).mount(target, config);
@@ -5840,11 +5810,9 @@ function status(component) {
     switch (component.__owl__.status) {
         case 0 /* NEW */:
             return "new";
-        case 2 /* CANCELLED */:
-            return "cancelled";
         case 1 /* MOUNTED */:
             return "mounted";
-        case 3 /* DESTROYED */:
+        case 2 /* DESTROYED */:
             return "destroyed";
     }
 }
@@ -5984,6 +5952,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-09-25T11:48:01.531Z';
-__info__.hash = '752160f';
+__info__.date = '2023-06-28T09:17:13.630Z';
+__info__.hash = '432ff44';
 __info__.url = 'https://github.com/odoo/owl';

docs/playground/samples/todo_app/todo_app.js

@@ -43,6 +43,10 @@ class TaskList {
         }
     }
 
+    toggleTask(task) {
+        task.isCompleted = !task.isCompleted;
+    }
+
     toggleTask(id) {
         const task = this.tasks.find(t => t.id === id);
         task.isCompleted = !task.isCompleted;
@@ -57,7 +61,7 @@ class TaskList {
     clearCompleted() {
         const tasks = this.tasks.filter(t => t.isCompleted);
         for (let task of tasks) {
-            this.deleteTask(task.id);
+            this.deleteTask(task);
         }
     }
     

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.2.6",
+  "version": "2.1.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

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

src/common/owl_error.ts

@@ -1,4 +0,0 @@
-// Custom error class that wraps error that happen in the owl lifecycle
-export class OwlError extends Error {
-  cause?: any;
-}

src/compiler/code_generator.ts

@@ -29,7 +29,7 @@ import {
   Attrs,
   EventHandlers,
 } from "./parser";
-import { OwlError } from "../common/owl_error";
+import { OwlError } from "../runtime/error_handling";
 
 type BlockType = "block" | "text" | "multi" | "list" | "html" | "comment";
 const whitespaceRE = /\s+/g;
@@ -160,6 +160,7 @@ interface Context {
   block: BlockDescription | null;
   index: number | string;
   forceNewBlock: boolean;
+  preventRoot?: boolean;
   isLast?: boolean;
   translate: boolean;
   tKeyExpr: string | null;
@@ -376,7 +377,7 @@ export class CodeGenerator {
   ): BlockDescription {
     const hasRoot = this.target.hasRoot;
     const block = new BlockDescription(this.target, type);
-    if (!hasRoot) {
+    if (!hasRoot && !ctx.preventRoot) {
       this.target.hasRoot = true;
       block.isRoot = true;
     }
@@ -402,7 +403,7 @@ export class CodeGenerator {
       blockExpr = `toggler(${ctx.tKeyExpr}, ${blockExpr})`;
     }
 
-    if (block.isRoot) {
+    if (block.isRoot && !ctx.preventRoot) {
       if (this.target.on) {
         blockExpr = this.wrapWithEventCatcher(blockExpr, this.target.on);
       }
@@ -585,6 +586,11 @@ 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;
@@ -713,10 +719,7 @@ export class CodeGenerator {
       attrs["block-ref"] = String(idx);
     }
 
-    const nameSpace = ast.ns || ctx.nameSpace;
-    const dom = nameSpace
-      ? xmlDoc.createElementNS(nameSpace, ast.tag)
-      : xmlDoc.createElement(ast.tag);
+    const dom = xmlDoc.createElement(ast.tag);
     for (const [attr, val] of Object.entries(attrs)) {
       if (!(attr === "class" && val === "")) {
         dom.setAttribute(attr, val);
@@ -758,7 +761,7 @@ export class CodeGenerator {
             if (!current) break;
           }
         }
-        this.addLine(`let ${block!.children.map((c) => c.varName).join(", ")};`, codeIdx);
+        this.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
       }
     }
     return block!.varName;
@@ -860,7 +863,7 @@ export class CodeGenerator {
             if (!current) break;
           }
         }
-        this.addLine(`let ${block!.children.map((c) => c.varName).join(", ")};`, codeIdx);
+        this.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
       }
 
       // note: this part is duplicated from end of compilemulti:
@@ -891,18 +894,18 @@ export class CodeGenerator {
     }
     this.addLine(`for (let ${loopVar} = 0; ${loopVar} < ${l}; ${loopVar}++) {`);
     this.target.indentLevel++;
-    this.addLine(`ctx[\`${ast.elem}\`] = ${keys}[${loopVar}];`);
+    this.addLine(`ctx[\`${ast.elem}\`] = ${vals}[${loopVar}];`);
     if (!ast.hasNoFirst) {
       this.addLine(`ctx[\`${ast.elem}_first\`] = ${loopVar} === 0;`);
     }
     if (!ast.hasNoLast) {
-      this.addLine(`ctx[\`${ast.elem}_last\`] = ${loopVar} === ${keys}.length - 1;`);
+      this.addLine(`ctx[\`${ast.elem}_last\`] = ${loopVar} === ${vals}.length - 1;`);
     }
     if (!ast.hasNoIndex) {
       this.addLine(`ctx[\`${ast.elem}_index\`] = ${loopVar};`);
     }
     if (!ast.hasNoValue) {
-      this.addLine(`ctx[\`${ast.elem}_value\`] = ${vals}[${loopVar}];`);
+      this.addLine(`ctx[\`${ast.elem}_value\`] = ${keys}[${loopVar}];`);
     }
     this.define(`key${this.target.loopLevel}`, ast.key ? compileExpr(ast.key) : loopVar);
     if (this.dev) {
@@ -986,6 +989,7 @@ export class CodeGenerator {
         block,
         index,
         forceNewBlock: !isTSet,
+        preventRoot: ctx.preventRoot,
         isLast: ctx.isLast && i === l - 1,
       });
       this.compileAST(child, subCtx);
@@ -994,18 +998,20 @@ export class CodeGenerator {
       }
     }
     if (isNewBlock) {
-      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;
+      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;
+            }
           }
+          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(", ");
@@ -1021,24 +1027,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, { ctxVar });
+      const subCtx = createContext(ctx, { preventRoot: true, 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");
@@ -1046,6 +1052,7 @@ 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,
@@ -1053,6 +1060,7 @@ 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,

src/compiler/index.ts

@@ -2,7 +2,6 @@ import type { TemplateSet } from "../runtime/template_set";
 import type { BDom } from "../runtime/blockdom";
 import { CodeGenerator, Config } from "./code_generator";
 import { parse } from "./parser";
-import { OwlError } from "../common/owl_error";
 
 export type Template = (context: any, vnode: any, key?: string) => BDom;
 
@@ -28,15 +27,5 @@ export function compile(
   const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext });
   const code = codeGenerator.generateCode();
   // template function
-  try {
-    return new Function("app, bdom, helpers", code) as TemplateFunction;
-  } catch (originalError: any) {
-    const { name } = options;
-    const nameStr = name ? `template "${name}"` : "anonymous template";
-    const err = new OwlError(
-      `Failed to compile ${nameStr}: ${originalError.message}\n\ngenerated code:\nfunction(app, bdom, helpers) {\n${code}\n}`
-    );
-    err.cause = originalError;
-    throw err;
-  }
+  return new Function("app, bdom, helpers", code) as TemplateFunction;
 }

src/compiler/inline_expressions.ts

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

src/compiler/parser.ts

@@ -1,4 +1,4 @@
-import { OwlError } from "../common/owl_error";
+import { OwlError } from "../runtime/error_handling";
 
 // -----------------------------------------------------------------------------
 // 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 };
+  const ctx = { inPreTag: false, inSVG: 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,8 +323,9 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
   if (tagName === "pre") {
     ctx.inPreTag = true;
   }
-
-  let ns = !ctx.nameSpace && ROOT_SVG_TAGS.has(tagName) ? "http://www.w3.org/2000/svg" : null;
+  const shouldAddSVGNS = ROOT_SVG_TAGS.has(tagName) && !ctx.inSVG;
+  ctx.inSVG = ctx.inSVG || shouldAddSVGNS;
+  const ns = shouldAddSVGNS ? "http://www.w3.org/2000/svg" : null;
   const ref = node.getAttribute("t-ref");
   node.removeAttribute("t-ref");
 
@@ -388,8 +389,6 @@ 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}'`);
@@ -402,9 +401,6 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
       attrs[attr] = value;
     }
   }
-  if (ns) {
-    ctx.nameSpace = ns;
-  }
 
   const children = parseChildren(node, ctx);
   return {
@@ -448,6 +444,9 @@ function parseTEscNode(node: Element, ctx: ParsingContext): AST | null {
       content: [tesc],
     };
   }
+  if (ast.type === ASTType.TComponent) {
+    throw new OwlError("t-esc is not supported on Component nodes");
+  }
   return tesc;
 }
 
@@ -942,23 +941,21 @@ function normalizeTIf(el: Element) {
  *
  * @param el the element containing the tree that should be normalized
  */
-function normalizeTEscTOut(el: Element) {
-  for (const d of ["t-esc", "t-out"]) {
-    const elements = [...el.querySelectorAll(`[${d}]`)].filter(
-      (el) => el.tagName[0] === el.tagName[0].toUpperCase() || el.hasAttribute("t-component")
-    );
-    for (const el of elements) {
-      if (el.childNodes.length) {
-        throw new OwlError(`Cannot have ${d} on a component that already has content`);
-      }
-      const value = el.getAttribute(d);
-      el.removeAttribute(d);
-      const t = el.ownerDocument.createElement("t");
-      if (value != null) {
-        t.setAttribute(d, value);
-      }
-      el.appendChild(t);
+function normalizeTEsc(el: Element) {
+  const elements = [...el.querySelectorAll("[t-esc]")].filter(
+    (el) => el.tagName[0] === el.tagName[0].toUpperCase() || el.hasAttribute("t-component")
+  );
+  for (const el of elements) {
+    if (el.childNodes.length) {
+      throw new OwlError("Cannot have t-esc on a component that already has content");
     }
+    const value = el.getAttribute("t-esc");
+    el.removeAttribute("t-esc");
+    const t = el.ownerDocument.createElement("t");
+    if (value != null) {
+      t.setAttribute("t-esc", value);
+    }
+    el.appendChild(t);
   }
 }
 
@@ -970,7 +967,7 @@ function normalizeTEscTOut(el: Element) {
  */
 function normalizeXML(el: Element) {
   normalizeTIf(el);
-  normalizeTEscTOut(el);
+  normalizeTEsc(el);
 }
 
 /**

src/runtime/app.ts

@@ -1,8 +1,7 @@
 import { version } from "../version";
 import { Component, ComponentConstructor, Props } from "./component";
 import { ComponentNode } from "./component_node";
-import { nodeErrorHandlers, handleError } from "./error_handling";
-import { OwlError } from "../common/owl_error";
+import { nodeErrorHandlers, OwlError, handleError } from "./error_handling";
 import { Fiber, RootFiber, MountOptions } from "./fibers";
 import { Scheduler } from "./scheduler";
 import { validateProps } from "./template_helpers";
@@ -35,8 +34,6 @@ This is not suitable for production use.
 See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration for more information.`;
 };
 
-const apps = new Set<App>();
-
 declare global {
   interface Window {
     __OWL_DEVTOOLS__: {
@@ -49,7 +46,13 @@ declare global {
   }
 }
 
-window.__OWL_DEVTOOLS__ ||= { apps, Fiber, RootFiber, toRaw, reactive };
+window.__OWL_DEVTOOLS__ ||= {
+  apps: new Set<App>(),
+  Fiber: Fiber,
+  RootFiber: RootFiber,
+  toRaw: toRaw,
+  reactive: reactive,
+};
 
 export class App<
   T extends abstract new (...args: any) => any = any,
@@ -57,7 +60,6 @@ export class App<
   E = any
 > extends TemplateSet {
   static validateTarget = validateTarget;
-  static apps = apps;
   static version = version;
 
   name: string;
@@ -72,7 +74,7 @@ export class App<
     super(config);
     this.name = config.name || "";
     this.Root = Root;
-    apps.add(this);
+    window.__OWL_DEVTOOLS__.apps.add(this);
     if (config.test) {
       this.dev = true;
     }
@@ -134,10 +136,10 @@ export class App<
 
   destroy() {
     if (this.root) {
+      this.scheduler.flush();
       this.root.destroy();
-      this.scheduler.processTasks();
     }
-    apps.delete(this);
+    window.__OWL_DEVTOOLS__.apps.delete(this);
   }
 
   createComponent<P extends Props>(

src/runtime/blockdom/block_compiler.ts

@@ -1,4 +1,4 @@
-import { OwlError } from "../../common/owl_error";
+import { OwlError } from "../error_handling";
 import { attrsSetter, attrsUpdater, createAttrUpdater, setClass, updateClass } from "./attributes";
 import { config } from "./config";
 import { createEventHandler } from "./events";
@@ -93,6 +93,17 @@ function normalizeNode(node: HTMLElement | Text) {
   }
 }
 
+/**
+ * Encode 2 numbers and 1 boolean in a number, using 31 bits:
+ * n1 => encoded in 16 most significant bits
+ * n2 => encoded in 15 next bits
+ * boolean => encoded in last significant bit.
+ * This code assumes that n1 and n2 are small enough to fit in that number of bits
+ */
+function encodeValue(n1: number, n2: number, b: boolean): number {
+  return (((n1 << 15) | n2) << 1) | (b ? 1 : 0);
+}
+
 // -----------------------------------------------------------------------------
 // building a intermediate tree
 // -----------------------------------------------------------------------------
@@ -144,7 +155,12 @@ function buildTree(
         info.push({ type: "child", idx: index });
         el = document.createTextNode("");
       }
-      currentNS ||= (node as Element).namespaceURI;
+      const attrs = (node as Element).attributes;
+      const ns = attrs.getNamedItem("block-ns");
+      if (ns) {
+        attrs.removeNamedItem("block-ns");
+        currentNS = ns.value;
+      }
       if (!el) {
         el = currentNS
           ? document.createElementNS(currentNS, tagName)
@@ -160,7 +176,6 @@ 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;
@@ -302,7 +317,7 @@ interface IndexedLocation extends Location {
 
 interface Child {
   parentRefIdx: number;
-  afterRefIdx?: number;
+  afterRefIdx: number;
   isOnlyChild?: boolean;
 }
 
@@ -370,6 +385,7 @@ function updateCtx(ctx: BlockCtx, tree: IntermediateTree) {
           // tree is the parentnode here
           ctx.children[info.idx] = {
             parentRefIdx: info.refIdx!,
+            afterRefIdx: 0,
             isOnlyChild: true,
           };
         } else {
@@ -497,7 +513,6 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
   }));
   const locN = locations.length;
   const childN = children.length;
-  const childrenLocs = children;
   const isDynamic = refN > 0;
 
   // these values are defined here to make them faster to lookup in the class
@@ -552,6 +567,19 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
   }
 
   if (isDynamic) {
+    const nextSibling = nodeGetNextSibling;
+    const firstChild = nodeGetFirstChild;
+    const bitPackedCollectors = new Uint32Array(
+      collectors.map((c) => {
+        return encodeValue(c.idx, c.prevIdx, c.getVal === nextSibling);
+      })
+    );
+    const childrenLocs = new Uint32Array(
+      children.map((c) => {
+        return encodeValue(c.afterRefIdx, c.parentRefIdx, Boolean(c.isOnlyChild));
+      })
+    );
+
     Block.prototype.mount = function mount(parent: HTMLElement, afterNode: Node | null) {
       const el = nodeCloneNode.call(template, true);
       // collecting references
@@ -559,12 +587,17 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
       this.refs = refs;
       refs[0] = el;
       for (let i = 0; i < colN; i++) {
-        const w = collectors[i];
-        refs[w.idx] = w.getVal.call(refs[w.prevIdx]);
+        let info = bitPackedCollectors[i];
+        // decode info
+        const fn = (info & 1) === 1 ? nextSibling : firstChild;
+        info = info >> 1;
+        const prevIdx = info & 0b111111111111111;
+        const idx = info >> 15;
+        refs[idx] = fn.call(refs[prevIdx]);
       }
 
       // applying data to all update points
-      if (locN) {
+      if (locN !== 0) {
         const data = this.data!;
         for (let i = 0; i < locN; i++) {
           const loc = locations[i];
@@ -575,15 +608,21 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
       nodeInsertBefore.call(parent, el, afterNode);
 
       // preparing all children
-      if (childN) {
+      if (childN !== 0) {
         const children = this.children;
         for (let i = 0; i < childN; i++) {
           const child = children![i];
-          if (child) {
-            const loc = childrenLocs[i];
-            const afterNode = loc.afterRefIdx ? refs[loc.afterRefIdx] : null;
-            child.isOnlyChild = loc.isOnlyChild;
-            child.mount(refs[loc.parentRefIdx] as any, afterNode);
+          if (child !== undefined) {
+            let info = childrenLocs[i];
+            // decode info
+            const isOnlyChild = info & 1;
+            info = info >> 1;
+            const parentRefIdx = info & 0b111111111111111;
+            const afterRefIdx = info >> 15;
+
+            const afterNode = afterRefIdx !== 0 ? refs[afterRefIdx] : null;
+            child.isOnlyChild = isOnlyChild as any;
+            child.mount(refs[parentRefIdx] as any, afterNode);
           }
         }
       }
@@ -597,7 +636,7 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
       }
       const refs = this.refs!;
       // update texts/attributes/
-      if (locN) {
+      if (locN !== 0) {
         const data1 = this.data!;
         const data2 = other.data!;
         for (let i = 0; i < locN; i++) {
@@ -612,14 +651,14 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
       }
 
       // update children
-      if (childN) {
+      if (childN !== 0) {
         let children1 = this.children;
         const children2 = other.children;
         for (let i = 0; i < childN; i++) {
           const child1 = children1![i];
           const child2 = children2![i];
-          if (child1) {
-            if (child2) {
+          if (child1 !== undefined) {
+            if (child2 !== undefined) {
               child1.patch(child2, withBeforeRemove);
             } else {
               if (withBeforeRemove) {
@@ -628,10 +667,15 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
               child1.remove();
               children1![i] = undefined;
             }
-          } else if (child2) {
-            const loc = childrenLocs[i];
-            const afterNode = loc.afterRefIdx ? refs[loc.afterRefIdx] : null;
-            child2.mount(refs[loc.parentRefIdx] as any, afterNode);
+          } else if (child2 !== undefined) {
+            let info = childrenLocs[i];
+            // decode info
+            info = info >> 1;
+            const parentRefIdx = info & 0b111111111111111;
+            const afterRefIdx = info >> 15;
+
+            const afterNode = afterRefIdx !== 0 ? refs[afterRefIdx] : null;
+            child2.mount(refs[parentRefIdx] as any, afterNode);
             children1![i] = child2;
           }
         }

src/runtime/blockdom/events.ts

@@ -41,7 +41,7 @@ function createElementHandler(evName: string, capture: boolean = false): EventHa
   }
 
   function remove(this: HTMLElement) {
-    delete (this as any)[eventKey];
+    (this as any)[eventKey] = false;
     this.removeEventListener(evName, listener, { capture });
   }
   function update(this: HTMLElement, data: any) {

src/runtime/blockdom/list.ts

@@ -28,7 +28,7 @@ class VList {
     this.anchor = _anchor;
     nodeInsertBefore.call(parent, _anchor, afterNode);
     const l = children.length;
-    if (l) {
+    if (l !== 0) {
       const mount = children[0].mount;
       for (let i = 0; i < l; i++) {
         mount.call(children[i], parent, _anchor);
@@ -186,7 +186,7 @@ class VList {
       } else {
         for (let i = startIdx1; i <= endIdx1; i++) {
           let ch = ch1[i];
-          if (ch) {
+          if (ch !== null) {
             if (withBeforeRemove) {
               beforeRemove.call(ch);
             }
@@ -200,7 +200,7 @@ class VList {
   beforeRemove() {
     const children = this.children;
     const l = children.length;
-    if (l) {
+    if (l !== 0) {
       const beforeRemove = children[0].beforeRemove;
       for (let i = 0; i < l; i++) {
         beforeRemove.call(children[i]);
@@ -215,7 +215,7 @@ class VList {
     } else {
       const children = this.children;
       const l = children.length;
-      if (l) {
+      if (l !== 0) {
         const remove = children[0].remove;
         for (let i = 0; i < l; i++) {
           remove.call(children[i]);
@@ -240,7 +240,7 @@ export function list(children: VNode[]): VNode<VList> {
 }
 
 function createMapping(ch1: any[], startIdx1: number, endIdx2: number): { [key: string]: any } {
-  let mapping: any = {};
+  const mapping: any = {};
   for (let i = startIdx1; i <= endIdx2; i++) {
     mapping[ch1[i].key] = i;
   }

src/runtime/blockdom/multi.ts

@@ -26,7 +26,7 @@ export class VMulti {
     const anchors = new Array(l);
     for (let i = 0; i < l; i++) {
       let child = children[i];
-      if (child) {
+      if (child !== undefined) {
         child.mount(parent, afterNode);
       } else {
         const childAnchor = document.createTextNode("");
@@ -44,7 +44,7 @@ export class VMulti {
     const anchors = this.anchors;
     for (let i = 0, l = children.length; i < l; i++) {
       let child = children[i];
-      if (child) {
+      if (child !== undefined) {
         child.moveBeforeDOMNode(node, parent);
       } else {
         const anchor = anchors![i];
@@ -56,14 +56,14 @@ export class VMulti {
   moveBeforeVNode(other: VMulti | null, afterNode: Node | null) {
     if (other) {
       const next = other!.children[0];
-      afterNode = (next ? next.firstNode() : other!.anchors![0]) || null;
+      afterNode = (next !== undefined ? next.firstNode() : other!.anchors![0]) || null;
     }
     const children = this.children;
     const parent = this.parentEl;
     const anchors = this.anchors;
     for (let i = 0, l = children.length; i < l; i++) {
       let child = children[i];
-      if (child) {
+      if (child !== undefined) {
         child.moveBeforeVNode(null, afterNode);
       } else {
         const anchor = anchors![i];
@@ -83,8 +83,8 @@ export class VMulti {
     for (let i = 0, l = children1.length; i < l; i++) {
       const vn1 = children1[i];
       const vn2 = children2[i];
-      if (vn1) {
-        if (vn2) {
+      if (vn1 !== undefined) {
+        if (vn2 !== undefined) {
           vn1.patch(vn2, withBeforeRemove);
         } else {
           const afterNode = vn1.firstNode()!;
@@ -97,7 +97,7 @@ export class VMulti {
           vn1.remove();
           children1[i] = undefined;
         }
-      } else if (vn2) {
+      } else if (vn2 !== undefined) {
         children1[i] = vn2;
         const anchor = anchors[i];
         vn2.mount(parentEl, anchor);
@@ -110,7 +110,7 @@ export class VMulti {
     const children = this.children;
     for (let i = 0, l = children.length; i < l; i++) {
       const child = children[i];
-      if (child) {
+      if (child !== undefined) {
         child.beforeRemove();
       }
     }
@@ -125,7 +125,7 @@ export class VMulti {
       const anchors = this.anchors;
       for (let i = 0, l = children.length; i < l; i++) {
         const child = children[i];
-        if (child) {
+        if (child !== undefined) {
           child.remove();
         } else {
           nodeRemoveChild.call(parentEl, anchors![i]);
@@ -136,7 +136,7 @@ export class VMulti {
 
   firstNode(): Node | undefined {
     const child = this.children[0];
-    return child ? child.firstNode() : this.anchors![0];
+    return child !== undefined ? child.firstNode() : this.anchors![0];
   }
 
   toString(): string {

src/runtime/component_node.ts

@@ -1,12 +1,11 @@
 import type { App, Env } from "./app";
 import { BDom, VNode } from "./blockdom";
 import { Component, ComponentConstructor, Props } from "./component";
-import { fibersInError } from "./error_handling";
-import { OwlError } from "../common/owl_error";
+import { fibersInError, OwlError } from "./error_handling";
 import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
 import { clearReactivesForCallback, getSubscriptions, reactive, targets } from "./reactivity";
 import { STATUS } from "./status";
-import { batched, Callback, possiblySync } from "./utils";
+import { batched, Callback } from "./utils";
 
 let currentNode: ComponentNode | null = null;
 
@@ -128,29 +127,21 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     this.initiateRender(fiber);
   }
 
-  initiateRender(fiber: Fiber | MountFiber) {
+  async initiateRender(fiber: Fiber | MountFiber) {
     this.fiber = fiber;
     if (this.mounted.length) {
       fiber.root!.mounted.push(fiber);
     }
     const component = this.component;
-    return possiblySync(
-      () => {
-        const willStartResults = this.willStart.map((f) => f.call(component));
-        if (willStartResults.some((r) => typeof r?.then === "function")) {
-          return Promise.all(willStartResults);
-        }
-        return;
-      },
-      () => {
-        if (this.status === STATUS.NEW && this.fiber === fiber) {
-          fiber.render();
-        }
-      },
-      (e: any) => {
-        this.app.handleError({ node: this, error: e });
-      }
-    );
+    try {
+      await Promise.all(this.willStart.map((f) => f.call(component)));
+    } catch (e) {
+      this.app.handleError({ node: this, error: e });
+      return;
+    }
+    if (this.status === STATUS.NEW && this.fiber === fiber) {
+      fiber.render();
+    }
   }
 
   async render(deep: boolean) {
@@ -246,7 +237,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     this.status = STATUS.DESTROYED;
   }
 
-  updateAndRender(props: P, parentFiber: Fiber) {
+  async updateAndRender(props: P, parentFiber: Fiber) {
     this.nextProps = props;
     props = Object.assign({}, props);
     // update
@@ -266,29 +257,20 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
       }
     }
     currentNode = null;
-    return possiblySync(
-      () => {
-        const willUpdateProps = this.willUpdateProps.map((f) => f.call(component, props));
-        if (willUpdateProps.some((p) => typeof p?.then === "function")) {
-          return Promise.all(willUpdateProps);
-        }
-        return;
-      },
-      () => {
-        if (fiber !== this.fiber) {
-          return;
-        }
-        component.props = props;
-        fiber.render();
-        const parentRoot = parentFiber.root!;
-        if (this.willPatch.length) {
-          parentRoot.willPatch.push(fiber);
-        }
-        if (this.patched.length) {
-          parentRoot.patched.push(fiber);
-        }
-      }
-    );
+    const prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
+    await prom;
+    if (fiber !== this.fiber) {
+      return;
+    }
+    component.props = props;
+    fiber.render();
+    const parentRoot = parentFiber.root!;
+    if (this.willPatch.length) {
+      parentRoot.willPatch.push(fiber);
+    }
+    if (this.patched.length) {
+      parentRoot.patched.push(fiber);
+    }
   }
 
   /**

src/runtime/error_handling.ts

@@ -1,7 +1,11 @@
-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();

src/runtime/event_handling.ts

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

src/runtime/fibers.ts

@@ -1,7 +1,6 @@
 import { BDom, mount } from "./blockdom";
 import type { ComponentNode } from "./component_node";
-import { fibersInError } from "./error_handling";
-import { OwlError } from "../common/owl_error";
+import { fibersInError, OwlError } from "./error_handling";
 import { STATUS } from "./status";
 
 export function makeChildFiber(node: ComponentNode, parent: Fiber): Fiber {

src/runtime/index.ts

@@ -55,7 +55,7 @@ export {
   onError,
 } from "./lifecycle_hooks";
 export { validate, validateType } from "./validation";
-export { OwlError } from "../common/owl_error";
+export { OwlError } from "./error_handling";
 
 export const __info__ = {
   version: App.version,

src/runtime/lifecycle_hooks.ts

@@ -1,6 +1,5 @@
 import { getCurrent } from "./component_node";
-import { nodeErrorHandlers } from "./error_handling";
-import { OwlError } from "../common/owl_error";
+import { nodeErrorHandlers, OwlError } from "./error_handling";
 
 const TIMEOUT = Symbol("timeout");
 function wrapError(fn: (...args: any[]) => any, hookName: string) {

src/runtime/portal.ts

@@ -1,7 +1,7 @@
 import { onMounted, onWillUnmount } from "./lifecycle_hooks";
 import { BDom, text, VNode } from "./blockdom";
 import { Component } from "./component";
-import { OwlError } from "../common/owl_error";
+import { OwlError } from "./error_handling";
 
 const VText: any = text("").constructor;
 

src/runtime/reactivity.ts

@@ -1,5 +1,5 @@
 import type { Callback } from "./utils";
-import { OwlError } from "../common/owl_error";
+import { OwlError } from "./error_handling";
 
 // Special key to subscribe to, to be notified of key creation/deletion
 const KEYCHANGES = Symbol("Key changes");
@@ -368,7 +368,7 @@ function delegateAndNotify(
     if (hadKey !== hasKey) {
       notifyReactives(target, KEYCHANGES);
     }
-    if (originalValue !== target[getterName](key)) {
+    if (originalValue !== value) {
       notifyReactives(target, key);
     }
     return ret;

src/runtime/template_helpers.ts

@@ -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 "../common/owl_error";
+import { OwlError } from "./error_handling";
 import type { ComponentNode } from "./component_node";
 
 const ObjectCreate = Object.create;
@@ -30,7 +30,7 @@ function callSlot(
   const slots = ctx.props.slots || {};
   const { __render, __ctx, __scope } = slots[name] || {};
   const slotScope = ObjectCreate(__ctx || {});
-  if (__scope) {
+  if (__scope !== undefined) {
     slotScope[__scope] = extra;
   }
   const slotBDom = __render ? __render(slotScope, parent, key) : null;
@@ -60,24 +60,18 @@ function withKey(elem: any, k: string) {
   return elem;
 }
 
-function prepareList(collection: unknown): [unknown[], unknown[], number, undefined[]] {
-  let keys: unknown[];
-  let values: unknown[];
+function prepareList(collection: any): [any[], any[], number, any[]] {
+  let keys: any[];
+  let values: any[];
 
   if (Array.isArray(collection)) {
     keys = collection;
     values = collection;
-  } else if (collection instanceof Map) {
-    keys = [...collection.keys()];
-    values = [...collection.values()];
-  } else if (Symbol.iterator in Object(collection)) {
-    keys = [...(<Iterable<unknown>>collection)];
-    values = keys;
-  } else if (collection && typeof collection === "object") {
-    values = Object.values(collection);
-    keys = Object.keys(collection);
+  } else if (collection) {
+    values = Object.keys(collection);
+    keys = Object.values(collection);
   } else {
-    throw new OwlError(`Invalid loop expression: "${collection}" is not iterable`);
+    throw new OwlError("Invalid loop expression");
   }
   const n = values.length;
   return [keys, values, n, new Array(n)];

src/runtime/template_set.ts

@@ -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 "../common/owl_error";
+import { OwlError } from "./error_handling";
 
 const bdom = { text, createBlock, list, multi, html, toggler, comment };
 
@@ -66,10 +66,6 @@ export class TemplateSet {
 
   addTemplate(name: string, template: string | Element) {
     if (name in this.rawTemplates) {
-      // this check can be expensive, just silently ignore double definitions outside dev mode
-      if (!this.dev) {
-        return;
-      }
       const rawTemplate = this.rawTemplates[name];
       const currentAsString =
         typeof rawTemplate === "string"

src/runtime/utils.ts

@@ -1,4 +1,4 @@
-import { OwlError } from "../common/owl_error";
+import { OwlError } from "./error_handling";
 export type Callback = () => void;
 
 /**
@@ -11,7 +11,7 @@ export type Callback = () => void;
 export function batched(callback: Callback): Callback {
   let scheduled = false;
   return async (...args) => {
-    if (!scheduled) {
+    if (scheduled === false) {
       scheduled = true;
       await Promise.resolve();
       scheduled = false;
@@ -88,24 +88,3 @@ export class Markup extends String {}
 export function markup(value: any) {
   return new Markup(value);
 }
-
-export function possiblySync(computation: Function, onSuccess: Function, onError?: Function) {
-  try {
-    let result;
-    if (onError) {
-      try {
-        result = computation();
-      } catch (e) {
-        return onError(e);
-      }
-    } else {
-      result = computation();
-    }
-    if (typeof result?.then === "function") {
-      return result.then(onSuccess, onError);
-    }
-    return onSuccess(result);
-  } catch (e) {
-    return Promise.reject(e);
-  }
-}

src/runtime/validation.ts

@@ -1,4 +1,4 @@
-import { OwlError } from "../common/owl_error";
+import { OwlError } from "./error_handling";
 import { toRaw } from "./reactivity";
 
 type BaseType =

src/version.ts

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

tests/__snapshots__/reactivity.test.ts.snap

@@ -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\`] = k_block2[i1];
+      ctx[\`id\`] = v_block2[i1];
       const key1 = ctx['id'];
       c_block2[i1] = withKey(comp1({id: ctx['id']}, key + \`__1__\${key1}\`, node, this, null), key1);
     }

tests/app/__snapshots__/app.test.ts.snap

@@ -15,34 +15,6 @@ exports[`app App supports env with getters/setters 1`] = `
 }"
 `;
 
-exports[`app app: clear scheduler tasks and destroy cancelled nodes immediately on destroy 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, []);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2, b3;
-    b2 = text(\`A\`);
-    if (ctx['state'].value) {
-      b3 = comp1({}, key + \`__1\`, node, this, null);
-    }
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`app app: clear scheduler tasks and destroy cancelled nodes immediately on destroy 3`] = `
-"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
 ) {

tests/app/app.test.ts

@@ -1,15 +1,6 @@
-import { App, Component, mount, onWillStart, useState, xml } from "../../src";
+import { App, Component, mount, xml } from "../../src";
 import { status } from "../../src/runtime/status";
-import {
-  makeTestFixture,
-  snapshotEverything,
-  nextTick,
-  elem,
-  useLogLifecycle,
-  makeDeferred,
-  nextMicroTick,
-  steps,
-} from "../helpers";
+import { makeTestFixture, snapshotEverything, nextTick, elem } from "../helpers";
 
 let fixture: HTMLElement;
 
@@ -103,68 +94,4 @@ describe("app", () => {
     expect(iframeDoc.contains(div)).toBe(false);
     expect(status(comp)).toBe("destroyed");
   });
-
-  test("app: clear scheduler tasks and destroy cancelled nodes immediately on destroy", async () => {
-    let def = makeDeferred();
-    class B extends Component {
-      static template = xml`B`;
-      setup() {
-        useLogLifecycle();
-        onWillStart(() => def);
-      }
-    }
-    class A extends Component {
-      static template = xml`A<t t-if="state.value"><B/></t>`;
-      static components = { B };
-      state = useState({ value: false });
-      setup() {
-        useLogLifecycle();
-      }
-    }
-
-    const app = new App(A);
-    const comp = await app.mount(fixture);
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "A:setup",
-        "A:willStart",
-        "A:willRender",
-        "A:rendered",
-        "A:mounted",
-      ]
-    `);
-
-    comp.state.value = true;
-    await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "A:willRender",
-        "B:setup",
-        "B:willStart",
-        "A:rendered",
-      ]
-    `);
-
-    // rerender to force the instantiation of a new B component (and cancelling the first)
-    comp.render();
-    await nextMicroTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "A:willRender",
-        "B:setup",
-        "B:willStart",
-        "A:rendered",
-      ]
-    `);
-
-    app.destroy();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "A:willUnmount",
-        "B:willDestroy",
-        "A:willDestroy",
-        "B:willDestroy",
-      ]
-    `);
-  });
 });

tests/blockdom/block.test.ts

@@ -244,14 +244,12 @@ describe("misc", () => {
   });
 
   test("namespace is not propagated to siblings", () => {
-    const block = createBlock(`<div><svg xmlns="someNameSpace"><g/></svg><div></div></div>`);
+    const block = createBlock(`<div><svg block-ns="someNameSpace"><g/></svg><div></div></div>`);
 
     const fixture = makeTestFixture();
     mount(block(), fixture);
 
-    expect(fixture.innerHTML).toBe(
-      '<div><svg xmlns="someNameSpace"><g></g></svg><div></div></div>'
-    );
+    expect(fixture.innerHTML).toBe("<div><svg><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");

tests/blockdom/namespace.test.ts

@@ -30,22 +30,22 @@ describe("namespace", () => {
     expect(fixture.firstElementChild!.namespaceURI).toBe(XHTML_URI);
   });
 
-  test("namespace can be changed with xmlns", () => {
-    const block = createBlock(`<tag xmlns="${SVG_URI}"/>`);
+  test("namespace can be changed with block-ns", () => {
+    const block = createBlock(`<tag block-ns="${SVG_URI}"/>`);
     const tree = block();
     mount(tree, fixture);
-    expect(fixture.innerHTML).toBe(`<tag xmlns="${SVG_URI}"></tag>`);
+    expect(fixture.innerHTML).toBe("<tag></tag>");
     expect(fixture.firstElementChild!.namespaceURI).toBe(SVG_URI);
   });
 
   test("namespace is kept for children", () => {
     const block = createBlock(
-      `<parent xmlns="${SVG_URI}"><child><subchild/></child><child/></parent>`
+      `<parent block-ns="${SVG_URI}"><child><subchild/></child><child/></parent>`
     );
     const tree = block();
     mount(tree, fixture);
     expect(fixture.innerHTML).toBe(
-      `<parent xmlns="${SVG_URI}"><child><subchild></subchild></child><child></child></parent>`
+      "<parent><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 xmlns="one"/><two xmlns="two"/></none>`);
+    const block = createBlock(`<none><one block-ns="one"/><two block-ns="two"/></none>`);
     const tree = block();
     mount(tree, fixture);
-    expect(fixture.innerHTML).toBe('<none><one xmlns="one"></one><two xmlns="two"></two></none>');
+    expect(fixture.innerHTML).toBe("<none><one></one><two></two></none>");
     const none = fixture.firstElementChild!;
     const one = none.firstElementChild!;
     const two = one.nextElementSibling!;

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

@@ -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 {

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

@@ -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\`] = k_block2[i1];
+      ctx[\`action\`] = v_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\`] = k_block1[i1];
+      ctx[\`value\`] = v_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\`] = k_block1[i1];
+      ctx[\`value\`] = v_block1[i1];
       ctx[\`value_first\`] = i1 === 0;
-      ctx[\`value_last\`] = i1 === k_block1.length - 1;
+      ctx[\`value_last\`] = i1 === v_block1.length - 1;
       ctx[\`value_index\`] = i1;
-      ctx[\`value_value\`] = v_block1[i1];
+      ctx[\`value_value\`] = k_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\`] = k_block2[i1];
+      ctx[\`project\`] = v_block2[i1];
       const key1 = ctx['project'];
       const v1 = ctx['onEdit'];
       const v2 = ctx['project'];

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

@@ -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\`] = k_block4[i1];
+      ctx[\`slot\`] = v_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\`] = k_block6[i1];
+      ctx[\`x\`] = v_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\`] = k_block8[i1];
+      ctx[\`commit_link\`] = v_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\`] = k_block2[i1];
+      ctx[\`value\`] = v_block2[i1];
       ctx[\`value_first\`] = i1 === 0;
-      ctx[\`value_last\`] = i1 === k_block2.length - 1;
+      ctx[\`value_last\`] = i1 === v_block2.length - 1;
       ctx[\`value_index\`] = i1;
-      ctx[\`value_value\`] = v_block2[i1];
+      ctx[\`value_value\`] = k_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 b7 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
+      const b6 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
       ctx = ctx.__proto__;
-      const b8 = callTemplate_2.call(this, ctx, node, key + \`__2__\${key1}\`);
+      const b7 = callTemplate_2.call(this, ctx, node, key + \`__2__\${key1}\`);
       setContextValue(ctx, \\"foo\\", 'bbb');
-      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}\`);
+      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}\`);
       ctx = ctx.__proto__;
-      c_block2[i1] = withKey(multi([b4, b5]), key1);
+      c_block2[i1] = withKey(multi([b4, b9]), 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\`] = k_block2[i1];
+      ctx[\`project\`] = v_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\`] = k_block15[i1];
+        ctx[\`category\`] = v_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\`] = k_block18[i1];
+        ctx[\`trigger\`] = v_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) {

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

@@ -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\`] = k_block2[i1];
+      ctx[\`item\`] = v_block2[i1];
       ctx[\`item_index\`] = i1;
       const key1 = ctx['item_index'];
       c_block2[i1] = withKey(text(ctx['item']), key1);

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

@@ -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 xmlns=\\"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 block-ns=\\"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 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>\`);
+  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>\`);
   
   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 xmlns=\\"http://www.w3.org/2000/svg\\"><g/></svg>\`);
+  let block1 = createBlock(\`<svg block-ns=\\"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 xmlns=\\"http://www.w3.org/2000/svg\\"><svg/></svg>\`);
+  let block1 = createBlock(\`<svg block-ns=\\"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 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\\"/>\`);
+  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\\"/>\`);
   
   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 xmlns=\\"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 block-ns=\\"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 xmlns=\\"http://www.w3.org/2000/svg\\"><block-child-0 xmlns=\\"\\"/></svg>\`);
+  let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></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 xmlns=\\"http://www.w3.org/2000/svg\\"/>\`);
+  let block1 = createBlock(\`<path block-ns=\\"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 xmlns=\\"http://www.w3.org/2000/svg\\"><block-child-0 xmlns=\\"\\"/></svg>\`);
-  let block2 = createBlock(\`<path xmlns=\\"http://www.w3.org/2000/svg\\"/>\`);
+  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\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;

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

@@ -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 block4 = createBlock(\`<span>hey</span>\`);
-  let block6 = 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 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]);
+    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]);
   }
 }"
 `;
@@ -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 block4 = createBlock(\`<span>hey</span>\`);
-  let block6 = 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 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]);
+    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]);
   }
 }"
 `;
@@ -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 block4 = 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 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]);
+    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]);
   }
 }"
 `;
@@ -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 block4 = 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 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]);
+    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]);
   }
 }"
 `;
@@ -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 block3 = createBlock(\`<span>hey</span>\`);
-  let block5 = createBlock(\`<span>yay</span>\`);
+  let block2 = createBlock(\`<span>hey</span>\`);
+  let block4 = 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 b2 = block2();
+    const b3 = text(\` \`);
+    const b4 = block4();
+    const b1 = multi([b2, b3, b4]);
+    ctx[zero] = b1;
     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 block3 = createBlock(\`<span>cascade 0</span>\`);
+  let block2 = 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 b2 = block2();
+    const b3 = ctx[zero];
+    const b1 = multi([b2, b3]);
+    ctx[zero] = b1;
     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 block3 = createBlock(\`<span>cascade 1</span>\`);
+  let block2 = 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 b2 = block2();
+    const b3 = ctx[zero];
+    const b1 = multi([b2, b3]);
+    ctx[zero] = b1;
     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 block3 = createBlock(\`<p>Some content...</p>\`);
+  let block1 = 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 b3 = block3();
-    ctx[zero] = b3;
+    const b1 = block1();
+    ctx[zero] = b1;
     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\`] = k_block2[i1];
+      ctx[\`subtree\`] = v_block2[i1];
       ctx[\`subtree_first\`] = i1 === 0;
-      ctx[\`subtree_last\`] = i1 === k_block2.length - 1;
+      ctx[\`subtree_last\`] = i1 === v_block2.length - 1;
       ctx[\`subtree_index\`] = i1;
-      ctx[\`subtree_value\`] = v_block2[i1];
+      ctx[\`subtree_value\`] = k_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\`] = k_block2[i1];
+      ctx[\`subtree\`] = v_block2[i1];
       ctx[\`subtree_first\`] = i1 === 0;
-      ctx[\`subtree_last\`] = i1 === k_block2.length - 1;
+      ctx[\`subtree_last\`] = i1 === v_block2.length - 1;
       ctx[\`subtree_index\`] = i1;
-      ctx[\`subtree_value\`] = v_block2[i1];
+      ctx[\`subtree_value\`] = k_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\`] = k_block2[i1];
+      ctx[\`subtree\`] = v_block2[i1];
       ctx[\`subtree_first\`] = i1 === 0;
-      ctx[\`subtree_last\`] = i1 === k_block2.length - 1;
+      ctx[\`subtree_last\`] = i1 === v_block2.length - 1;
       ctx[\`subtree_index\`] = i1;
-      ctx[\`subtree_value\`] = v_block2[i1];
+      ctx[\`subtree_value\`] = k_block2[i1];
       const key1 = ctx['subtree_index'];
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
@@ -571,134 +571,6 @@ 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
 ) {
@@ -833,13 +705,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 block2 = createBlock(\`<p>antony</p>\`);
+  let block1 = createBlock(\`<p>antony</p>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b2 = block2();
-    ctx[zero] = b2;
+    const b1 = block1();
+    ctx[zero] = b1;
     return callTemplate_1.call(this, ctx, node, key + \`__1\`);
   }
 }"
@@ -941,11 +813,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\`] = k_block2[i1];
+      ctx[\`v\`] = v_block2[i1];
       ctx[\`v_first\`] = i1 === 0;
-      ctx[\`v_last\`] = i1 === k_block2.length - 1;
+      ctx[\`v_last\`] = i1 === v_block2.length - 1;
       ctx[\`v_index\`] = i1;
-      ctx[\`v_value\`] = v_block2[i1];
+      ctx[\`v_value\`] = k_block2[i1];
       const key1 = ctx['v_index'];
       setContextValue(ctx, \\"val\\", ctx['v'].val);
       ctx = Object.create(ctx);
@@ -1008,11 +880,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\`] = k_block2[i1];
+      ctx[\`v\`] = v_block2[i1];
       ctx[\`v_first\`] = i1 === 0;
-      ctx[\`v_last\`] = i1 === k_block2.length - 1;
+      ctx[\`v_last\`] = i1 === v_block2.length - 1;
       ctx[\`v_index\`] = i1;
-      ctx[\`v_value\`] = v_block2[i1];
+      ctx[\`v_value\`] = k_block2[i1];
       const key1 = ctx['v_index'];
       setContextValue(ctx, \\"val\\", ctx['v'].val);
       ctx = Object.create(ctx);
@@ -1056,7 +928,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\`);
@@ -1203,8 +1075,8 @@ exports[`t-call (template calling) with unused body 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b2 = text(\`WHEEE\`);
-    ctx[zero] = b2;
+    const b1 = text(\`WHEEE\`);
+    ctx[zero] = b1;
     return callTemplate_1.call(this, ctx, node, key + \`__1\`);
   }
 }"
@@ -1264,8 +1136,8 @@ exports[`t-call (template calling) with used body 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b2 = text(\`ok\`);
-    ctx[zero] = b2;
+    const b1 = text(\`ok\`);
+    ctx[zero] = b1;
     return callTemplate_1.call(this, ctx, node, key + \`__1\`);
   }
 }"

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

@@ -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 block3 = createBlock(\`<p>escaped</p>\`);
+  let block2 = createBlock(\`<p>escaped</p>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b3 = block3();
-    ctx[zero] = b3;
-    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    return block1([], [b2]);
+    const b2 = block2();
+    ctx[zero] = b2;
+    const b3 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b3]);
   }
 }"
 `;

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

@@ -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\`] = k_block2[i1];
+      ctx[\`item\`] = v_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\`] = k_block2[i1];
+      ctx[\`item\`] = v_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\`] = k_block2[i1];
+      ctx[\`item\`] = v_block2[i1];
       ctx[\`item_index\`] = i1;
-      ctx[\`item_value\`] = v_block2[i1];
+      ctx[\`item_value\`] = k_block2[i1];
       const key1 = ctx['item'];
       const b4 = text(\` [\`);
       const b5 = text(ctx['item_index']);
@@ -77,62 +77,6 @@ exports[`t-foreach iterate on items 1`] = `
 }"
 `;
 
-exports[`t-foreach iterate, Map param 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, withKey } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['value']);;
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = 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
 ) {
@@ -145,9 +89,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\`] = k_block2[i1];
+      ctx[\`item\`] = v_block2[i1];
       ctx[\`item_index\`] = i1;
-      ctx[\`item_value\`] = v_block2[i1];
+      ctx[\`item_value\`] = k_block2[i1];
       const key1 = ctx['item_index'];
       const b4 = text(\` [\`);
       const b5 = text(ctx['item_index']);
@@ -164,62 +108,6 @@ exports[`t-foreach iterate, dict param 1`] = `
 }"
 `;
 
-exports[`t-foreach iterate, generator param 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, withKey } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['gen']());;
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = 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
 ) {
@@ -232,12 +120,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\`] = k_block2[i1];
+      ctx[\`elem\`] = v_block2[i1];
       ctx[\`elem_first\`] = i1 === 0;
-      ctx[\`elem_last\`] = i1 === k_block2.length - 1;
+      ctx[\`elem_last\`] = i1 === v_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\`);
@@ -256,34 +144,6 @@ exports[`t-foreach iterate, position 1`] = `
 }"
 `;
 
-exports[`t-foreach iterate, string 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('abc');;
-    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 simple iteration (in a node) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -296,7 +156,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\`] = k_block2[i1];
+      ctx[\`item\`] = v_block2[i1];
       const key1 = ctx['item'];
       c_block2[i1] = withKey(text(ctx['item']), key1);
     }
@@ -316,7 +176,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\`] = k_block1[i1];
+      ctx[\`item\`] = v_block1[i1];
       const key1 = ctx['item'];
       c_block1[i1] = withKey(text(ctx['item']), key1);
     }
@@ -338,7 +198,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\`] = k_block1[i1];
+      ctx[\`item\`] = v_block1[i1];
       const key1 = ctx['item'];
       let txt1 = ctx['item'];
       const b3 = block3([txt1]);
@@ -367,20 +227,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\`] = k_block2[i1];
+      ctx[\`a\`] = v_block2[i1];
       ctx[\`a_first\`] = i1 === 0;
-      ctx[\`a_last\`] = i1 === k_block2.length - 1;
+      ctx[\`a_last\`] = i1 === v_block2.length - 1;
       ctx[\`a_index\`] = i1;
-      ctx[\`a_value\`] = v_block2[i1];
+      ctx[\`a_value\`] = k_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\`] = k_block4[i2];
+        ctx[\`b\`] = v_block4[i2];
         ctx[\`b_first\`] = i2 === 0;
-        ctx[\`b_last\`] = i2 === k_block4.length - 1;
+        ctx[\`b_last\`] = i2 === v_block4.length - 1;
         ctx[\`b_index\`] = i2;
-        ctx[\`b_value\`] = v_block4[i2];
+        ctx[\`b_value\`] = k_block4[i2];
         const key2 = ctx['b'];
         ctx = Object.create(ctx);
         ctx[isBoundary] = 1;
@@ -436,20 +296,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\`] = k_block2[i1];
+      ctx[\`a\`] = v_block2[i1];
       ctx[\`a_first\`] = i1 === 0;
-      ctx[\`a_last\`] = i1 === k_block2.length - 1;
+      ctx[\`a_last\`] = i1 === v_block2.length - 1;
       ctx[\`a_index\`] = i1;
-      ctx[\`a_value\`] = v_block2[i1];
+      ctx[\`a_value\`] = k_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\`] = k_block4[i2];
+        ctx[\`b\`] = v_block4[i2];
         ctx[\`b_first\`] = i2 === 0;
-        ctx[\`b_last\`] = i2 === k_block4.length - 1;
+        ctx[\`b_last\`] = i2 === v_block4.length - 1;
         ctx[\`b_index\`] = i2;
-        ctx[\`b_value\`] = v_block4[i2];
+        ctx[\`b_value\`] = k_block4[i2];
         const key2 = ctx['b'];
         c_block4[i2] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`), key2);
       }
@@ -503,12 +363,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\`] = k_block2[i1];
+      ctx[\`number\`] = v_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\`] = k_block3[i2];
+        ctx[\`letter\`] = v_block3[i2];
         const key2 = ctx['letter'];
         const b5 = text(\` [\`);
         const b6 = text(ctx['number']);
@@ -537,7 +397,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\`] = k_block1[i1];
+      ctx[\`elem\`] = v_block1[i1];
       const key1 = ctx['elem'].id;
       let b3;
       if (ctx['elem'].id<3) {
@@ -564,7 +424,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\`] = k_block2[i1];
+      ctx[\`elem\`] = v_block2[i1];
       const key1 = ctx['elem'].id;
       let b4;
       if (ctx['elem'].id<3) {
@@ -592,7 +452,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\`] = k_block2[i1];
+      ctx[\`thing\`] = v_block2[i1];
       const key1 = ctx['thing'];
       c_block2[i1] = withKey(block3(), key1);
     }
@@ -615,7 +475,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\`] = k_block2[i1];
+      ctx[\`item\`] = v_block2[i1];
       ctx[\`item_index\`] = i1;
       const key1 = ctx['item'];
       const tKey_1 = ctx['item_index'];
@@ -642,7 +502,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\`] = k_block2[i1];
+      ctx[\`item\`] = v_block2[i1];
       const key1 = ctx['item'].id;
       const memo1 = [ctx['item'].x];
       const vnode1 = cache[key1];;

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

@@ -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]);

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

@@ -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\`] = k_block2[i1];
+      ctx[\`beer\`] = v_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();
     }

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

@@ -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 block3 = createBlock(\`<span>coucou</span>\`);
+  let block2 = createBlock(\`<span>coucou</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b3 = block3();
-    ctx[zero] = b3;
-    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    return block1([], [b2]);
+    const b2 = block2();
+    ctx[zero] = b2;
+    const b3 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b3]);
   }
 }"
 `;
@@ -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 block3 = createBlock(\`<div>zero</div>\`);
+  let block2 = createBlock(\`<div>zero</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b3 = block3();
-    ctx[zero] = b3;
-    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    return block1([], [b2]);
+    const b2 = block2();
+    ctx[zero] = b2;
+    const b3 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b3]);
   }
 }"
 `;
@@ -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']);

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

@@ -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\`] = k_block2[i1];
+      ctx[\`item\`] = v_block2[i1];
       const key1 = ctx['item'];
       const tKey_1 = ctx['item'];
       const v1 = ctx['item'];

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

@@ -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\`] = k_block2[i1];
+      ctx[\`val\`] = v_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\`] = k_block2[i1];
+      ctx[\`val\`] = v_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\`] = k_block2[i1];
+      ctx[\`val\`] = v_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\`] = k_block2[i1];
+      ctx[\`elem\`] = v_block2[i1];
       ctx[\`elem_index\`] = i1;
       const key1 = ctx['elem_index'];
       let txt1 = ctx['v'];

tests/compiler/parser.test.ts

@@ -1569,12 +1569,6 @@ describe("qweb parser", () => {
     );
   });
 
-  test("component with t-out", async () => {
-    expect(parse(`<MyComponent t-out="someValue"/>`)).toEqual(
-      parse(`<MyComponent><t t-out="someValue"/></MyComponent>`)
-    );
-  });
-
   test("component with t-esc and content", async () => {
     expect(() => parse(`<MyComponent t-esc="someValue">Some content</MyComponent>`)).toThrow(
       "Cannot have t-esc on a component that already has content"

tests/compiler/svg.test.ts

@@ -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 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>`
+      `<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 xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="4" stroke="green" stroke-width="1" fill="yellow"></circle> </g>`
+      `<g><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 xmlns="http://www.w3.org/2000/svg"><g></g></svg>`);
+    expect(renderToString(template)).toBe(`<svg><g></g></svg>`);
   });
 
   test("namespace to svg tags added even if already in svg namespace", () => {
@@ -41,13 +41,8 @@ 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 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>`
-    );
+    expect(renderToString(template, { path: false })).toBe(`<svg></svg>`);
+    expect(renderToString(template, { path: true })).toBe(`<svg><path></path></svg>`);
 
     const bdom = renderToBdom(template, { path: true });
     const fixture = makeTestFixture();

tests/compiler/t_call.test.ts

@@ -430,48 +430,6 @@ 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>`;

tests/compiler/t_foreach.test.ts

@@ -105,73 +105,6 @@ describe("t-foreach", () => {
     expect(renderToString(template, context)).toBe(expected);
   });
 
-  test("iterate, Map param", () => {
-    const template = `
-      <t t-foreach="value" t-as="item" t-key="item_index">
-        [<t t-esc="item_index"/>: <t t-esc="item"/> <t t-esc="item_value"/>]
-      </t>`;
-    const expected = ` [0: 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, string param", () => {
-    const template = `
-      <t t-foreach="'abc'" 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 a]  [1: b b]  [2: c c] `;
-    expect(renderToString(template)).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>
@@ -260,9 +193,7 @@ describe("t-foreach", () => {
 
   test("throws error if invalid loop expression", () => {
     const test = `<div><t t-foreach="abc" t-as="item" t-key="item"><span t-key="item_index"/></t></div>`;
-    expect(() => renderToString(test)).toThrow(
-      'Invalid loop expression: "undefined" is not iterable'
-    );
+    expect(() => renderToString(test)).toThrow("Invalid loop expression");
   });
 
   test("t-foreach with t-if inside", () => {

tests/compiler/validation.test.ts

@@ -11,8 +11,8 @@ describe("basic validation", () => {
     expect(() => context.getTemplate("invalidname")).toThrow("Missing template");
   });
 
-  test("cannot add a different template with the same name in dev mode", () => {
-    const context = new TemplateSet({ dev: true });
+  test("cannot add a different template with the same name", () => {
+    const context = new TemplateSet();
     context.addTemplate("test", `<t/>`);
     // Same template with the same name is fine
     expect(() => context.addTemplate("test", "<t/>")).not.toThrow();
@@ -20,13 +20,6 @@ describe("basic validation", () => {
     expect(() => context.addTemplate("test", "<div/>")).toThrow("already defined");
   });
 
-  test("adding different template with same name outside dev mode silently ignores it", () => {
-    const context = new TemplateSet({ dev: false });
-    context.addTemplate("test", `<t/>`);
-    expect(() => context.addTemplate("test", "<div/>")).not.toThrow();
-    expect(context.rawTemplates.test).toBe("<t/>");
-  });
-
   test("invalid xml", () => {
     const template = "<div>";
     expect(() => snapshotTemplate(template)).toThrow("Invalid XML in template");
@@ -44,22 +37,4 @@ describe("basic validation", () => {
     const template = `<div t-best-beer="rochefort 10">test</div>`;
     expect(() => renderToString(template)).toThrow("Unknown QWeb directive: 't-best-beer'");
   });
-
-  test("compilation error", () => {
-    const template = `<div t-att-class="a b">test</div>`;
-    expect(() => renderToString(template))
-      .toThrow(`Failed to compile anonymous template: Unexpected identifier
-
-generated code:
-function(app, bdom, helpers) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div block-attribute-0="class">test</div>\`);
-  
-  return function template(ctx, node, key = "") {
-    let attr1 = ctx['a']ctx['b'];
-    return block1([attr1]);
-  }
-}`);
-  });
 });

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

@@ -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\`] = k_block2[i1];
+      ctx[\`blip\`] = v_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\`] = k_block1[i1];
+      ctx[\`item\`] = v_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\`] = k_block2[i1];
+      ctx[\`elem\`] = v_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 xmlns=\\"http://www.w3.org/2000/svg\\"><block-child-0 xmlns=\\"\\"/></svg>\`);
+  let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></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 xmlns=\\"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 block-ns=\\"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\`] = k_block2[i1];
+      ctx[\`item\`] = v_block2[i1];
       const key1 = ctx['item'];
       const b4 = text(ctx['item']);
       const b5 = safeOutput(ctx['item']);

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

@@ -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\`] = k_block4[i1];
+      ctx[\`elem\`] = v_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\`] = k_block1[i1];
+      ctx[\`elem\`] = v_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);
@@ -184,7 +184,7 @@ exports[`changing state before first render does not trigger a render (with pare
 }"
 `;
 
-exports[`changing state before first render does not trigger a render (with parent) 3`] = `
+exports[`changing state before first render does not trigger a render (with parent) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -244,7 +244,7 @@ exports[`components are not destroyed between animation frame 1`] = `
   const comp1 = app.createComponent(\`B\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2, b3;
+    let b2,b3;
     b2 = text(\`A\`);
     if (ctx['state'].flag) {
       b3 = comp1({}, key + \`__1\`, node, this, null);
@@ -254,7 +254,7 @@ exports[`components are not destroyed between animation frame 1`] = `
 }"
 `;
 
-exports[`components are not destroyed between animation frame 3`] = `
+exports[`components are not destroyed between animation frame 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -268,7 +268,7 @@ exports[`components are not destroyed between animation frame 3`] = `
 }"
 `;
 
-exports[`components are not destroyed between animation frame 5`] = `
+exports[`components are not destroyed between animation frame 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -748,7 +748,7 @@ exports[`concurrent renderings scenario 10 2`] = `
 }"
 `;
 
-exports[`concurrent renderings scenario 10 4`] = `
+exports[`concurrent renderings scenario 10 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -831,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);
@@ -978,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);
@@ -993,7 +993,7 @@ exports[`concurrent renderings scenario 16 3`] = `
 }"
 `;
 
-exports[`concurrent renderings scenario 16 6`] = `
+exports[`concurrent renderings scenario 16 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -1012,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);
     }
@@ -1024,7 +1024,7 @@ exports[`creating two async components, scenario 1 1`] = `
 }"
 `;
 
-exports[`creating two async components, scenario 1 3`] = `
+exports[`creating two async components, scenario 1 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -1038,7 +1038,7 @@ exports[`creating two async components, scenario 1 3`] = `
 }"
 `;
 
-exports[`creating two async components, scenario 1 5`] = `
+exports[`creating two async components, scenario 1 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -1061,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);
@@ -1085,7 +1085,7 @@ exports[`creating two async components, scenario 2 2`] = `
 }"
 `;
 
-exports[`creating two async components, scenario 2 5`] = `
+exports[`creating two async components, scenario 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -1109,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);
@@ -1133,7 +1133,7 @@ exports[`creating two async components, scenario 3 (patching in the same frame)
 }"
 `;
 
-exports[`creating two async components, scenario 3 (patching in the same frame) 5`] = `
+exports[`creating two async components, scenario 3 (patching in the same frame) 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -1308,7 +1308,7 @@ exports[`delayed render does not go through when t-component value changed 2`] =
 }"
 `;
 
-exports[`delayed render does not go through when t-component value changed 4`] = `
+exports[`delayed render does not go through when t-component value changed 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -1421,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);
@@ -1514,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);
@@ -1572,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);
@@ -1605,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);
@@ -1617,7 +1617,7 @@ exports[`destroyed component causes other soon to be destroyed component to rere
 }"
 `;
 
-exports[`destroyed component causes other soon to be destroyed component to rerender, weird stuff happens 3`] = `
+exports[`destroyed component causes other soon to be destroyed component to rerender, weird stuff happens 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -1628,7 +1628,7 @@ exports[`destroyed component causes other soon to be destroyed component to rere
 }"
 `;
 
-exports[`destroyed component causes other soon to be destroyed component to rerender, weird stuff happens 4`] = `
+exports[`destroyed component causes other soon to be destroyed component to rerender, weird stuff happens 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -1646,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);
@@ -1656,7 +1656,7 @@ exports[`destroying/recreating a subcomponent, other scenario 1`] = `
 }"
 `;
 
-exports[`destroying/recreating a subcomponent, other scenario 3`] = `
+exports[`destroying/recreating a subcomponent, other scenario 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -1685,7 +1685,7 @@ exports[`destroying/recreating a subwidget with different props (if start is not
 }"
 `;
 
-exports[`destroying/recreating a subwidget with different props (if start is not over) 3`] = `
+exports[`destroying/recreating a subwidget with different props (if start is not over) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -1787,7 +1787,7 @@ exports[`rendering component again in next microtick 1`] = `
 }"
 `;
 
-exports[`rendering component again in next microtick 3`] = `
+exports[`rendering component again in next microtick 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -1846,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);
@@ -1861,10 +1861,10 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 3`] =
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<span block-handler-0=\\"click\\"><block-text-1/></span>\`);
+  let block3 = createBlock(\`<p block-handler-0=\\"click\\"><block-text-1/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`C\`);
+    const b2 = text(\`D\`);
     let hdlr1 = [ctx['increment'], ctx];
     let txt1 = ctx['state'].val;
     const b3 = block3([hdlr1, txt1]);
@@ -1878,10 +1878,10 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 4`] =
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<p block-handler-0=\\"click\\"><block-text-1/></p>\`);
+  let block3 = createBlock(\`<span block-handler-0=\\"click\\"><block-text-1/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`D\`);
+    const b2 = text(\`C\`);
     let hdlr1 = [ctx['increment'], ctx];
     let txt1 = ctx['state'].val;
     const b3 = block3([hdlr1, txt1]);
@@ -1901,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\`] = k_block1[i1];
+      ctx[\`arr\`] = v_block1[i1];
       ctx[\`arr_index\`] = i1;
       const key1 = ctx['arr_index'];
       let b3;

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

@@ -12,18 +12,6 @@ exports[`basics display a nice error if a component is not a component 1`] = `
 }"
 `;
 
-exports[`basics display a nice error if a non-root component template fails to compile 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, this, null);
-  }
-}"
-`;
-
 exports[`basics display a nice error if it cannot find component (in dev mode) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -103,7 +91,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 {
@@ -201,7 +189,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);
@@ -231,7 +219,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);
@@ -241,7 +229,7 @@ exports[`can catch errors an error in onWillDestroy, variation 1`] = `
 }"
 `;
 
-exports[`can catch errors an error in onWillDestroy, variation 3`] = `
+exports[`can catch errors an error in onWillDestroy, variation 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -295,7 +283,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 {
@@ -350,7 +338,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 {
@@ -394,7 +382,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 {
@@ -474,7 +462,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 {
@@ -532,7 +520,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 {
@@ -593,7 +581,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 {
@@ -626,7 +614,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 {
@@ -680,7 +668,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 {
@@ -735,7 +723,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 {
@@ -790,7 +778,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 {
@@ -847,7 +835,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 {
@@ -893,7 +881,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 {
@@ -950,7 +938,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\`] = k_block1[i1];
+      ctx[\`cp\`] = v_block1[i1];
       const key1 = ctx['cp'].id;
       const v1 = ctx['this'];
       const v2 = ctx['cp'];
@@ -1029,7 +1017,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\`] = k_block1[i1];
+      ctx[\`elem\`] = v_block1[i1];
       const key1 = ctx['elem'][0];
       const v1 = ctx['this'];
       const v2 = ctx['elem'];
@@ -1123,7 +1111,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 {
@@ -1167,7 +1155,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 {
@@ -1198,7 +1186,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 {

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

@@ -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\`] = k_block2[i1];
+      ctx[\`item\`] = v_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\`] = k_block2[i1];
+      ctx[\`item\`] = v_block2[i1];
       const key1 = ctx['item'];
       const v1 = ctx['onClick'];
       const v2 = ctx['item'];

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

@@ -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);
     }

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

@@ -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);
@@ -92,7 +92,7 @@ exports[`lifecycle hooks component semantics 5`] = `
 }"
 `;
 
-exports[`lifecycle hooks component semantics 7`] = `
+exports[`lifecycle hooks component semantics 6`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -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);
@@ -185,7 +185,7 @@ exports[`lifecycle hooks destroy new children before being mountged 1`] = `
 }"
 `;
 
-exports[`lifecycle hooks destroy new children before being mountged 3`] = `
+exports[`lifecycle hooks destroy new children before being mountged 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -291,7 +291,7 @@ exports[`lifecycle hooks lifecycle semantics, part 2 1`] = `
 }"
 `;
 
-exports[`lifecycle hooks lifecycle semantics, part 2 3`] = `
+exports[`lifecycle hooks lifecycle semantics, part 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -303,7 +303,7 @@ exports[`lifecycle hooks lifecycle semantics, part 2 3`] = `
 }"
 `;
 
-exports[`lifecycle hooks lifecycle semantics, part 2 4`] = `
+exports[`lifecycle hooks lifecycle semantics, part 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -348,7 +348,7 @@ exports[`lifecycle hooks lifecycle semantics, part 4 1`] = `
 }"
 `;
 
-exports[`lifecycle hooks lifecycle semantics, part 4 3`] = `
+exports[`lifecycle hooks lifecycle semantics, part 4 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -360,7 +360,7 @@ exports[`lifecycle hooks lifecycle semantics, part 4 3`] = `
 }"
 `;
 
-exports[`lifecycle hooks lifecycle semantics, part 4 4`] = `
+exports[`lifecycle hooks lifecycle semantics, part 4 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -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 {

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

@@ -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\`] = k_block1[i1];
+      ctx[\`elem\`] = v_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\`] = k_block1[i1];
+      ctx[\`item\`] = v_block1[i1];
       const key1 = ctx['item'].val;
       const v1 = ctx['onClick'];
       const v2 = ctx['item'];

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

@@ -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\`);
     }

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

@@ -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]);

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

@@ -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\`] = k_block1[i1];
+      ctx[\`elem\`] = v_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\`] = k_block2[i1];
+      ctx[\`user\`] = v_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\`] = k_block2[i1];
+      ctx[\`user\`] = v_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\`] = k_block2[i1];
+      ctx[\`n\`] = v_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\`] = k_block2[i1];
+      ctx[\`node1\`] = v_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\`] = k_block6[i2];
+        ctx[\`node2\`] = v_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\`] = k_block2[i1];
+      ctx[\`n\`] = v_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\`] = k_block3[i1];
+      ctx[\`item\`] = v_block3[i1];
       ctx[\`item_first\`] = i1 === 0;
-      ctx[\`item_last\`] = i1 === k_block3.length - 1;
+      ctx[\`item_last\`] = i1 === v_block3.length - 1;
       ctx[\`item_index\`] = i1;
-      ctx[\`item_value\`] = v_block3[i1];
+      ctx[\`item_value\`] = k_block3[i1];
       const key1 = ctx['item'].name;
-      let b5, b6;
+      let b5,b6;
       if (!ctx['item'].children.length) {
         b5 = text(ctx['item'].name);
       } else {

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

@@ -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 {

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

@@ -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 b2 = text(\` owl \`);
-    ctx[zero] = b2;
+    const b1 = text(\` owl \`);
+    ctx[zero] = b1;
     const template1 = (ctx['current'].template);
     return call(this, template1, ctx, node, key + \`__1\`);
   }
@@ -364,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 {
@@ -415,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\`] = k_block2[i1];
+      ctx[\`val\`] = v_block2[i1];
       ctx[\`val_first\`] = i1 === 0;
-      ctx[\`val_last\`] = i1 === k_block2.length - 1;
+      ctx[\`val_last\`] = i1 === v_block2.length - 1;
       ctx[\`val_index\`] = i1;
-      ctx[\`val_value\`] = v_block2[i1];
+      ctx[\`val_value\`] = k_block2[i1];
       const key1 = ctx['val'];
       c_block2[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
     }

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

@@ -180,7 +180,7 @@ exports[`t-component switching dynamic component 2`] = `
 }"
 `;
 
-exports[`t-component switching dynamic component 4`] = `
+exports[`t-component switching dynamic component 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;

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

@@ -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\`] = k_block2[i1];
+      ctx[\`item\`] = v_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\`] = k_block1[i1];
+      ctx[\`item\`] = v_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\`] = k_block1[i1];
+      ctx[\`item\`] = v_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\`] = k_block2[i1];
+      ctx[\`blip\`] = v_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\`] = k_block1[i1];
+      ctx[\`slotName\`] = v_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\`] = k_block2[i1];
+      ctx[\`section\`] = v_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\`] = k_block3[i2];
+        ctx[\`blip\`] = v_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\`] = k_block2[i1];
+      ctx[\`row\`] = v_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\`] = k_block4[i2];
+        ctx[\`col\`] = v_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\`] = k_block1[i1];
+      ctx[\`elem\`] = v_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\`] = k_block2[i1];
+      ctx[\`number\`] = v_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\`] = k_block2[i1];
+      ctx[\`number\`] = v_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\`] = k_block2[i1];
+      ctx[\`c\`] = v_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\`] = k_block2[i1];
+      ctx[\`n\`] = v_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);

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

@@ -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\`] = k_block2[i1];
+      ctx[\`c\`] = v_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);

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

@@ -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\`] = k_block2[i1];
+      ctx[\`thing\`] = v_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\`] = k_block2[i1];
+      ctx[\`thing\`] = v_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\`] = k_block2[i1];
+      ctx[\`name\`] = v_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];
@@ -485,7 +485,7 @@ exports[`t-model directive t-model with dynamic number values on select options
     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];
+      ctx[\`o\`] = v_block2[i1];
       const key1 = ctx['o'].value;
       let attr1 = ctx['o'].value;
       let attr2 = bValue1 === ctx['o'].value;
@@ -586,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\`] = k_block2[i1];
+      ctx[\`v\`] = v_block2[i1];
       const key1 = ctx['v'];
       let attr1 = ctx['v'];
       let attr2 = bValue1 === ctx['v'];
@@ -613,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\`] = k_block2[i1];
+      ctx[\`opt\`] = v_block2[i1];
       const key1 = ctx['opt'];
       let prop1 = new String((ctx['opt']) === 0 ? 0 : ((ctx['opt']) || \\"\\"));
       let attr1 = ctx['opt'];
@@ -640,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';

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

@@ -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\`] = k_block2[i1];
+      ctx[\`val\`] = v_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\`] = k_block2[i1];
+      ctx[\`val\`] = v_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\`] = k_block2[i1];
+      ctx[\`val\`] = v_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\`] = k_block2[i1];
+      ctx[\`val\`] = v_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\`] = k_block1[i1];
+      ctx[\`name\`] = v_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\`] = k_block1[i1];
+      ctx[\`c\`] = v_block1[i1];
       ctx[\`c_index\`] = i1;
       const key1 = ctx['c_index'];
       let txt1 = ctx['c'];

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

@@ -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\`] = k_block1[i1];
+      ctx[\`n\`] = v_block1[i1];
       const key1 = ctx['n'];
       ctx[\`blabla\`] = new LazyValue(value1, ctx, this, node, key1);
       c_block1[i1] = withKey(safeOutput(ctx['blabla']), key1);

tests/components/basics.test.ts

@@ -5,7 +5,6 @@ import {
   nextAppError,
   nextTick,
   snapshotEverything,
-  steps,
   useLogLifecycle,
 } from "../helpers";
 import { markup } from "../../src/runtime/utils";
@@ -869,26 +868,19 @@ describe("basics", () => {
 
     const parent = await mount(Parent, fixture);
     expect(Object.keys(parent.__owl__.children).length).toStrictEqual(1);
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Child:mounted",
-      ]
-    `);
+    expect([
+      "Child:setup",
+      "Child:willStart",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+    ]).toBeLogged();
 
     parent.ifVar = false;
     parent.render();
     await nextTick();
     expect(Object.keys(parent.__owl__.children).length).toStrictEqual(0);
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Child:willUnmount",
-        "Child:willDestroy",
-      ]
-    `);
+    expect(["Child:willUnmount", "Child:willDestroy"]).toBeLogged();
   });
 
   test("component children doesn't leak (t-key case)", async () => {
@@ -907,31 +899,27 @@ describe("basics", () => {
 
     const parent = await mount(Parent, fixture);
     expect(Object.keys(parent.__owl__.children).length).toStrictEqual(1);
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Child:mounted",
-      ]
-    `);
+    expect([
+      "Child:setup",
+      "Child:willStart",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+    ]).toBeLogged();
 
     parent.keyVar = 2;
     parent.render();
     await nextTick();
     expect(Object.keys(parent.__owl__.children).length).toStrictEqual(1);
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Child:willUnmount",
-        "Child:willDestroy",
-        "Child:mounted",
-      ]
-    `);
+    expect([
+      "Child:setup",
+      "Child:willStart",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:willUnmount",
+      "Child:willDestroy",
+      "Child:mounted",
+    ]).toBeLogged();
   });
 
   test("GrandChild display is controlled by its GrandParent", async () => {
@@ -955,27 +943,20 @@ describe("basics", () => {
 
     const parent = await mount(Parent, fixture);
     expect(fixture.innerHTML).toBe("<div></div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "GrandChild:setup",
-        "GrandChild:willStart",
-        "GrandChild:willRender",
-        "GrandChild:rendered",
-        "GrandChild:mounted",
-      ]
-    `);
+    expect([
+      "GrandChild:setup",
+      "GrandChild:willStart",
+      "GrandChild:willRender",
+      "GrandChild:rendered",
+      "GrandChild:mounted",
+    ]).toBeLogged();
 
     parent.displayGrandChild = false;
     parent.render();
     await nextTick();
     expect(fixture.innerHTML).toBe("");
 
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "GrandChild:willUnmount",
-        "GrandChild:willDestroy",
-      ]
-    `);
+    expect(["GrandChild:willUnmount", "GrandChild:willDestroy"]).toBeLogged();
   });
 });
 
@@ -1043,7 +1024,7 @@ describe("support svg components", () => {
     await mount(Svg, fixture);
 
     expect(fixture.innerHTML).toBe(
-      '<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>'
+      '<svg><g><circle cx="50" cy="50" r="4" stroke="green" stroke-width="1" fill="yellow"></circle></g></svg>'
     );
   });
 });

tests/components/error_handling.test.ts

@@ -19,9 +19,8 @@ import {
   snapshotEverything,
   useLogLifecycle,
   nextAppError,
-  steps,
 } from "../helpers";
-import { OwlError } from "../../src/common/owl_error";
+import { OwlError } from "../../src/runtime/error_handling";
 
 let fixture: HTMLElement;
 
@@ -76,9 +75,8 @@ describe("basics", () => {
     }
     const app = new App(Parent);
     let error: Error;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow(
+    await expect(nextAppError(app)).resolves.toThrow(
       'Cannot find the definition of component "SomeMispelledComponent"'
     );
     await mountProm;
@@ -97,9 +95,8 @@ describe("basics", () => {
     }
     const app = new App(Parent, { test: true });
     let error: Error;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow(
+    await expect(nextAppError(app)).resolves.toThrow(
       'Cannot find the definition of component "SomeMispelledComponent"'
     );
     await mountProm;
@@ -118,9 +115,8 @@ describe("basics", () => {
     }
     const app = new App(Parent as typeof Component);
     let error: Error;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow(
+    await expect(nextAppError(app)).resolves.toThrow(
       '"SomeComponent" is not a Component. It must inherit from the Component class'
     );
     await mountProm;
@@ -136,9 +132,8 @@ describe("basics", () => {
     }
     const app = new App(Parent as typeof Component);
     let error: Error;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow(
+    await expect(nextAppError(app)).resolves.toThrow(
       'Cannot find the definition of component "MissingChild", missing static components key in parent'
     );
     await mountProm;
@@ -148,67 +143,6 @@ describe("basics", () => {
     );
   });
 
-  test("display a nice error if the root component template fails to compile", async () => {
-    // This is a special case: mount throws synchronously and we don't have any
-    // node which can handle the error, hence the different structure of this test
-    class Comp extends Component {
-      static template = xml`<div t-att-class="a b">test</div>`;
-    }
-    const app = new App(Comp);
-    let error: Error;
-    try {
-      await app.mount(fixture);
-    } catch (e) {
-      error = e as Error;
-    }
-    const expectedErrorMessage = `Failed to compile anonymous template: Unexpected identifier
-
-generated code:
-function(app, bdom, helpers) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div block-attribute-0="class">test</div>\`);
-  
-  return function template(ctx, node, key = "") {
-    let attr1 = ctx['a']ctx['b'];
-    return block1([attr1]);
-  }
-}`;
-    expect(error!).toBeDefined();
-    expect(error!.message).toBe(expectedErrorMessage);
-  });
-
-  test("display a nice error if a non-root component template fails to compile", async () => {
-    class Child extends Component {
-      static template = xml`<div t-att-class="a b">test</div>`;
-    }
-    class Parent extends Component {
-      static components = { Child };
-      static template = xml`<Child/>`;
-    }
-    const expectedErrorMessage = `Failed to compile anonymous template: Unexpected identifier
-
-generated code:
-function(app, bdom, helpers) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div block-attribute-0="class">test</div>\`);
-  
-  return function template(ctx, node, key = "") {
-    let attr1 = ctx['a']ctx['b'];
-    return block1([attr1]);
-  }
-}`;
-    const app = new App(Parent as typeof Component);
-    let error: Error;
-    const appError = nextAppError(app);
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).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"/>`;
@@ -249,9 +183,8 @@ describe("errors and promises", () => {
 
     const app = new App(Root);
     let error: OwlError;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.cause).toBeDefined();
@@ -274,9 +207,8 @@ describe("errors and promises", () => {
 
     const app = new App(Root);
     let error: OwlError;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.cause).toBeDefined();
@@ -298,9 +230,8 @@ describe("errors and promises", () => {
 
     const app = new App(Root, { test: true });
     let error: OwlError;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("error occurred in onMounted");
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.stack).toContain("Root.setup");
@@ -325,9 +256,8 @@ describe("errors and promises", () => {
 
     const app = new App(Root, { test: true });
     let error: OwlError;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("error occurred in onWillRender");
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillRender");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
@@ -367,9 +297,8 @@ describe("errors and promises", () => {
 
     const app = new App(Root, { test: true });
     let error: OwlError;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("error occurred in onWillStart");
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
@@ -436,9 +365,8 @@ describe("errors and promises", () => {
 
     const app = new App(Parent);
     let error: OwlError;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.cause).toBeDefined();
@@ -483,9 +411,8 @@ describe("errors and promises", () => {
 
     const app = new App(Parent);
     let error: OwlError;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.cause).toBeDefined();
@@ -514,9 +441,8 @@ describe("errors and promises", () => {
 
     const app = new App(Example, { test: true });
     let error: OwlError;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("error occurred in onMounted");
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
     await mountProm;
     expect(error!.message).toBe(`The following error occurred in onMounted: "Error in mounted"`);
     // 1 additional error is logged because the destruction of the app causes
@@ -590,9 +516,9 @@ describe("can catch errors", () => {
     }
     const app = new App(Root, { test: true });
     let error: OwlError;
-    const appError = nextAppError(app);
+    const crashProm = expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
     await app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("error occurred in onWillStart");
+    await crashProm;
     expect(error!.message).toBe(
       `The following error occurred in onWillStart: "No active component (a hook function should only be called in 'setup')"`
     );
@@ -612,9 +538,8 @@ describe("can catch errors", () => {
     }
     const app = new App(Root, { test: true });
     let error: OwlError;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("error occurred in onMounted");
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
     await mountProm;
     expect(error!.message).toBe(`The following error occurred in onMounted: "test error"`);
     expect(error!.cause).toBe(err);
@@ -635,9 +560,8 @@ describe("can catch errors", () => {
     }
     const app = new App(Root, { test: true });
     let error: OwlError;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("error occurred in onWillStart");
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
     await mountProm;
     expect(error!.message).toBe(`The following error occurred in onWillStart: "test error"`);
     expect(error!.cause).toBe(err);
@@ -657,9 +581,8 @@ describe("can catch errors", () => {
     }
     const app = new App(Root);
     let error: OwlError;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
     await mountProm;
     expect(error!.message).toBe(
       `An error occured in the owl lifecycle (see this Error's "cause" property)`
@@ -682,9 +605,8 @@ describe("can catch errors", () => {
     }
     const app = new App(Root);
     let error: OwlError;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
     await mountProm;
     expect(error!.message).toBe(
       `An error occured in the owl lifecycle (see this Error's "cause" property)`
@@ -705,9 +627,8 @@ describe("can catch errors", () => {
     }
     const app = new App(Root, { test: true });
     let error: OwlError;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("not an Error was thrown in onMounted");
+    await expect(nextAppError(app)).resolves.toThrow("not an Error was thrown in onMounted");
     await mountProm;
     expect(error!.message).toBe(
       `Something that is not an Error was thrown in onMounted (see this Error's "cause" property)`
@@ -728,9 +649,8 @@ describe("can catch errors", () => {
     }
     const app = new App(Root);
     let error: OwlError;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
     await mountProm;
     expect(error!.message).toBe(
       `An error occured in the owl lifecycle (see this Error's "cause" property)`
@@ -968,28 +888,26 @@ describe("can catch errors", () => {
     }
     await mount(Root, fixture);
     expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Root:setup",
-        "Root:willStart",
-        "Root:willRender",
-        "ErrorBoundary:setup",
-        "ErrorBoundary:willStart",
-        "ErrorBoundary:willRender",
-        "ErrorComponent:setup",
-        "ErrorComponent:willStart",
-        "ErrorComponent:willRender",
-        "ErrorComponent:rendered",
-        "ErrorBoundary:rendered",
-        "Root:rendered",
-        "ErrorComponent:mounted",
-        "boom",
-        "ErrorBoundary:willRender",
-        "ErrorBoundary:rendered",
-        "ErrorBoundary:mounted",
-        "Root:mounted",
-      ]
-    `);
+    expect([
+      "Root:setup",
+      "Root:willStart",
+      "Root:willRender",
+      "ErrorBoundary:setup",
+      "ErrorBoundary:willStart",
+      "Root:rendered",
+      "ErrorBoundary:willRender",
+      "ErrorComponent:setup",
+      "ErrorComponent:willStart",
+      "ErrorBoundary:rendered",
+      "ErrorComponent:willRender",
+      "ErrorComponent:rendered",
+      "ErrorComponent:mounted",
+      "boom",
+      "ErrorBoundary:willRender",
+      "ErrorBoundary:rendered",
+      "ErrorBoundary:mounted",
+      "Root:mounted",
+    ]).toBeLogged();
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleWarn).toBeCalledTimes(0);
   });
@@ -1020,23 +938,21 @@ describe("can catch errors", () => {
     }
     await mount(Root, fixture);
     expect(fixture.innerHTML).toBe("<div>Error handled</div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Root:setup",
-        "Root:willStart",
-        "Root:willRender",
-        "ErrorComponent:setup",
-        "ErrorComponent:willStart",
-        "ErrorComponent:willRender",
-        "ErrorComponent:rendered",
-        "Root:rendered",
-        "ErrorComponent:mounted",
-        "boom",
-        "Root:willRender",
-        "Root:rendered",
-        "Root:mounted",
-      ]
-    `);
+    expect([
+      "Root:setup",
+      "Root:willStart",
+      "Root:willRender",
+      "ErrorComponent:setup",
+      "ErrorComponent:willStart",
+      "Root:rendered",
+      "ErrorComponent:willRender",
+      "ErrorComponent:rendered",
+      "ErrorComponent:mounted",
+      "boom",
+      "Root:willRender",
+      "Root:rendered",
+      "Root:mounted",
+    ]).toBeLogged();
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleWarn).toBeCalledTimes(0);
   });
@@ -1083,33 +999,31 @@ describe("can catch errors", () => {
     }
     await mount(A, fixture);
     expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "A:setup",
-        "A:willStart",
-        "A:willRender",
-        "B:setup",
-        "B:willStart",
-        "B:willRender",
-        "C:setup",
-        "C:willStart",
-        "C:willRender",
-        "Boom:setup",
-        "Boom:willStart",
-        "Boom:willRender",
-        "Boom:rendered",
-        "C:rendered",
-        "B:rendered",
-        "A:rendered",
-        "Boom:mounted",
-        "boom",
-        "C:willRender",
-        "C:rendered",
-        "C:mounted",
-        "B:mounted",
-        "A:mounted",
-      ]
-    `);
+    expect([
+      "A:setup",
+      "A:willStart",
+      "A:willRender",
+      "B:setup",
+      "B:willStart",
+      "A:rendered",
+      "B:willRender",
+      "C:setup",
+      "C:willStart",
+      "B:rendered",
+      "C:willRender",
+      "Boom:setup",
+      "Boom:willStart",
+      "C:rendered",
+      "Boom:willRender",
+      "Boom:rendered",
+      "Boom:mounted",
+      "boom",
+      "C:willRender",
+      "C:rendered",
+      "C:mounted",
+      "B:mounted",
+      "A:mounted",
+    ]).toBeLogged();
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleWarn).toBeCalledTimes(0);
   });
@@ -1156,33 +1070,31 @@ describe("can catch errors", () => {
     }
     await mount(Root, fixture);
     expect(fixture.innerHTML).toBe("<div>OK<div>Error handled</div></div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Root:setup",
-        "Root:willStart",
-        "Root:willRender",
-        "OK:setup",
-        "OK:willStart",
-        "OK:willRender",
-        "OK:rendered",
-        "ErrorBoundary:setup",
-        "ErrorBoundary:willStart",
-        "ErrorBoundary:willRender",
-        "ErrorComponent:setup",
-        "ErrorComponent:willStart",
-        "ErrorComponent:willRender",
-        "ErrorComponent:rendered",
-        "ErrorBoundary:rendered",
-        "Root:rendered",
-        "ErrorComponent:mounted",
-        "boom",
-        "ErrorBoundary:willRender",
-        "ErrorBoundary:rendered",
-        "ErrorBoundary:mounted",
-        "OK:mounted",
-        "Root:mounted",
-      ]
-    `);
+    expect([
+      "Root:setup",
+      "Root:willStart",
+      "Root:willRender",
+      "OK:setup",
+      "OK:willStart",
+      "ErrorBoundary:setup",
+      "ErrorBoundary:willStart",
+      "Root:rendered",
+      "OK:willRender",
+      "OK:rendered",
+      "ErrorBoundary:willRender",
+      "ErrorComponent:setup",
+      "ErrorComponent:willStart",
+      "ErrorBoundary:rendered",
+      "ErrorComponent:willRender",
+      "ErrorComponent:rendered",
+      "ErrorComponent:mounted",
+      "boom",
+      "ErrorBoundary:willRender",
+      "ErrorBoundary:rendered",
+      "ErrorBoundary:mounted",
+      "OK:mounted",
+      "Root:mounted",
+    ]).toBeLogged();
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleWarn).toBeCalledTimes(0);
   });
@@ -1509,39 +1421,35 @@ describe("can catch errors", () => {
 
     const parent = await mount(Parent, fixture);
     expect(fixture.innerHTML).toBe("1<div>abc</div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Child:mounted",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
     parent.state.hasChild = false;
     await nextTick();
     await nextTick();
     await nextTick();
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:willPatch",
-        "Child:willUnmount",
-        "Child:willDestroy",
-        "Parent:patched",
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:willPatch",
-        "Parent:patched",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Child:willUnmount",
+      "Child:willDestroy",
+      "Parent:patched",
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Parent:patched",
+    ]).toBeLogged();
     expect(fixture.innerHTML).toBe("2");
   });
 
@@ -1574,15 +1482,13 @@ describe("can catch errors", () => {
     const parent = await mount(Parent, fixture);
     expect(fixture.innerHTML).toBe("1");
 
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     parent.state.hasChild = true;
     await nextMicroTick();
@@ -1590,35 +1496,26 @@ describe("can catch errors", () => {
     await nextMicroTick();
     await nextMicroTick();
     await nextMicroTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+    ]).toBeLogged();
     parent.state.hasChild = false;
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Parent:rendered",
-        "Child:willDestroy",
-        "Parent:willRender",
-        "Parent:rendered",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Parent:rendered",
+      "Child:willDestroy",
+      "Parent:willRender",
+      "Parent:rendered",
+    ]).toBeLogged();
     expect(fixture.innerHTML).toBe("1");
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willPatch",
-        "Parent:patched",
-      ]
-    `);
+    expect(["Parent:willPatch", "Parent:patched"]).toBeLogged();
     expect(fixture.innerHTML).toBe("2");
   });
 });

tests/components/hooks.test.ts

@@ -660,9 +660,8 @@ describe("hooks", () => {
 
       let error: OwlError;
       const app = new App(MyComponent);
-      const appError = nextAppError(app);
       const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
+      await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
       await mountProm;
       expect(error!.cause.message).toBe("Intentional error");
       // no console.error because the error has been caught in this test

tests/components/lifecycle.test.ts

@@ -17,7 +17,6 @@ import {
   nextMicroTick,
   nextTick,
   snapshotEverything,
-  steps,
   useLogLifecycle,
 } from "../helpers";
 
@@ -342,16 +341,15 @@ describe("lifecycle hooks", () => {
     parent.state.n = 2;
     await nextTick();
     app.destroy();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "parent:willPatch",
-        "childchild:willPatch",
-        "child:willPatch",
-        "child:patched",
-        "childchild:patched",
-        "parent:patched",
-      ]
-    `);
+    expect(steps).toEqual([
+      "parent:willPatch",
+      "child:willPatch",
+      "childchild:willPatch",
+      "childchild:patched",
+      "child:patched",
+      "parent:patched",
+    ]);
+    Object.freeze(steps);
   });
 
   test("willStart, mounted on subwidget rendered after main is mounted in some other position", async () => {
@@ -457,51 +455,45 @@ describe("lifecycle hooks", () => {
 
     const parent = await mount(Parent, fixture);
     expect(fixture.innerHTML).toBe("<div><span>0</span></div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Child:mounted",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     parent.increment();
     await nextTick();
     expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Child:willUpdateProps",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Parent:willPatch",
-        "Child:willPatch",
-        "Child:patched",
-        "Parent:patched",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Child:willUpdateProps",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Parent:willPatch",
+      "Child:willPatch",
+      "Child:patched",
+      "Parent:patched",
+    ]).toBeLogged();
 
     parent.toggleSubWidget();
     await nextTick();
     expect(fixture.innerHTML).toBe("");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:willPatch",
-        "Child:willUnmount",
-        "Child:willDestroy",
-        "Parent:patched",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Child:willUnmount",
+      "Child:willDestroy",
+      "Parent:patched",
+    ]).toBeLogged();
   });
 
   test("hooks are called in proper order in widget creation/destruction", async () => {
@@ -522,30 +514,26 @@ describe("lifecycle hooks", () => {
 
     const app = new App(Parent);
     await app.mount(fixture);
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Child:mounted",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     app.destroy();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willUnmount",
-        "Child:willUnmount",
-        "Child:willDestroy",
-        "Parent:willDestroy",
-      ]
-    `);
+    expect([
+      "Parent:willUnmount",
+      "Child:willUnmount",
+      "Child:willDestroy",
+      "Parent:willDestroy",
+    ]).toBeLogged();
   });
 
   test("willUpdateProps hook is called", async () => {
@@ -644,30 +632,26 @@ describe("lifecycle hooks", () => {
 
     const app = new App(Parent);
     await app.mount(fixture);
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Child:mounted",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     app.destroy();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willUnmount",
-        "Child:willUnmount",
-        "Child:willDestroy",
-        "Parent:willDestroy",
-      ]
-    `);
+    expect([
+      "Parent:willUnmount",
+      "Child:willUnmount",
+      "Child:willDestroy",
+      "Parent:willDestroy",
+    ]).toBeLogged();
   });
 
   test("lifecycle semantics, part 2", async () => {
@@ -696,48 +680,42 @@ describe("lifecycle hooks", () => {
 
     const app = new App(Parent);
     const parent = await app.mount(fixture);
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     parent.state.hasChild = true;
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "GrandChild:setup",
-        "GrandChild:willStart",
-        "GrandChild:willRender",
-        "GrandChild:rendered",
-        "Child:rendered",
-        "Parent:rendered",
-        "Parent:willPatch",
-        "GrandChild:mounted",
-        "Child:mounted",
-        "Parent:patched",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "GrandChild:setup",
+      "GrandChild:willStart",
+      "Child:rendered",
+      "GrandChild:willRender",
+      "GrandChild:rendered",
+      "Parent:willPatch",
+      "GrandChild:mounted",
+      "Child:mounted",
+      "Parent:patched",
+    ]).toBeLogged();
 
     app.destroy();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willUnmount",
-        "Child:willUnmount",
-        "GrandChild:willUnmount",
-        "GrandChild:willDestroy",
-        "Child:willDestroy",
-        "Parent:willDestroy",
-      ]
-    `);
+    expect([
+      "Parent:willUnmount",
+      "Child:willUnmount",
+      "GrandChild:willUnmount",
+      "GrandChild:willDestroy",
+      "Child:willDestroy",
+      "Parent:willDestroy",
+    ]).toBeLogged();
   });
 
   test("lifecycle semantics, part 3", async () => {
@@ -766,26 +744,19 @@ describe("lifecycle hooks", () => {
 
     const app = new App(Parent);
     const parent = await app.mount(fixture);
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     parent.state.hasChild = true;
     // immediately destroy everything
     app.destroy();
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willUnmount",
-        "Parent:willDestroy",
-      ]
-    `);
+    expect(["Parent:willUnmount", "Parent:willDestroy"]).toBeLogged();
   });
 
   test("lifecycle semantics, part 4", async () => {
@@ -818,40 +789,34 @@ describe("lifecycle hooks", () => {
     const app = new App(Parent);
     const parent = await app.mount(fixture);
 
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     parent.state.hasChild = true;
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "GrandChild:setup",
-        "GrandChild:willStart",
-        "Child:rendered",
-        "Parent:rendered",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "GrandChild:setup",
+      "GrandChild:willStart",
+      "Child:rendered",
+    ]).toBeLogged();
 
     app.destroy();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willUnmount",
-        "GrandChild:willDestroy",
-        "Child:willDestroy",
-        "Parent:willDestroy",
-      ]
-    `);
+    expect([
+      "Parent:willUnmount",
+      "GrandChild:willDestroy",
+      "Child:willDestroy",
+      "Parent:willDestroy",
+    ]).toBeLogged();
   });
 
   test("lifecycle semantics, part 5", async () => {
@@ -872,33 +837,29 @@ describe("lifecycle hooks", () => {
     }
 
     const parent = await mount(Parent, fixture);
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Child:mounted",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     parent.state.hasChild = false;
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:willPatch",
-        "Child:willUnmount",
-        "Child:willDestroy",
-        "Parent:patched",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Child:willUnmount",
+      "Child:willDestroy",
+      "Parent:patched",
+    ]).toBeLogged();
   });
 
   test("lifecycle semantics, part 6", async () => {
@@ -919,36 +880,32 @@ describe("lifecycle hooks", () => {
     }
 
     const parent = await mount(Parent, fixture);
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Child:mounted",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     parent.state.value = 2;
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Child:willUpdateProps",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Parent:willPatch",
-        "Child:willPatch",
-        "Child:patched",
-        "Parent:patched",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Child:willUpdateProps",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Parent:willPatch",
+      "Child:willPatch",
+      "Child:patched",
+      "Parent:patched",
+    ]).toBeLogged();
   });
 
   test("onWillRender", async () => {
@@ -980,53 +937,43 @@ describe("lifecycle hooks", () => {
 
     const parent = await mount(Parent, fixture);
     expect(fixture.innerHTML).toBe("<button>1</button>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Child:mounted",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     parent.state.value++; // to block child render
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Child:willUpdateProps",
-        "Parent:rendered",
-      ]
-    `);
+    expect(["Parent:willRender", "Child:willUpdateProps", "Parent:rendered"]).toBeLogged();
 
     fixture.querySelector("button")!.click();
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`Array []`);
+    expect([]).toBeLogged();
 
     fixture.querySelector("button")!.click();
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`Array []`);
+    expect([]).toBeLogged();
     expect(fixture.innerHTML).toBe("<button>1</button>");
 
     def.resolve();
     await nextTick();
     expect(fixture.innerHTML).toBe("<button>3</button>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:willPatch",
-        "Child:willPatch",
-        "Child:patched",
-        "Parent:patched",
-      ]
-    `);
+    expect([
+      "Child:willRender",
+      "Child:rendered",
+      "Parent:willPatch",
+      "Child:willPatch",
+      "Child:patched",
+      "Parent:patched",
+    ]).toBeLogged();
   });
 
   // TODO: rename (remove? seems covered by lifecycle semantics)
@@ -1107,54 +1054,50 @@ describe("lifecycle hooks", () => {
 
     await mount(A, fixture);
     expect(fixture.innerHTML).toBe(`<div>A<div>B</div><div>C<div>D</div><div>E</div></div></div>`);
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "A:setup",
-        "A:willStart",
-        "A:willRender",
-        "B:setup",
-        "B:willStart",
-        "B:willRender",
-        "B:rendered",
-        "C:setup",
-        "C:willStart",
-        "C:willRender",
-        "D:setup",
-        "D:willStart",
-        "D:willRender",
-        "D:rendered",
-        "E:setup",
-        "E:willStart",
-        "E:willRender",
-        "E:rendered",
-        "C:rendered",
-        "A:rendered",
-        "E:mounted",
-        "D:mounted",
-        "C:mounted",
-        "B:mounted",
-        "A:mounted",
-      ]
-    `);
+    expect([
+      "A:setup",
+      "A:willStart",
+      "A:willRender",
+      "B:setup",
+      "B:willStart",
+      "C:setup",
+      "C:willStart",
+      "A:rendered",
+      "B:willRender",
+      "B:rendered",
+      "C:willRender",
+      "D:setup",
+      "D:willStart",
+      "E:setup",
+      "E:willStart",
+      "C:rendered",
+      "D:willRender",
+      "D:rendered",
+      "E:willRender",
+      "E:rendered",
+      "E:mounted",
+      "D:mounted",
+      "C:mounted",
+      "B:mounted",
+      "A:mounted",
+    ]).toBeLogged();
 
     // update
     c!.state.flag = false;
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "C:willRender",
-        "F:setup",
-        "F:willStart",
-        "F:willRender",
-        "F:rendered",
-        "C:rendered",
-        "C:willPatch",
-        "E:willUnmount",
-        "E:willDestroy",
-        "F:mounted",
-        "C:patched",
-      ]
-    `);
+    expect([
+      "C:willRender",
+      "F:setup",
+      "F:willStart",
+      "C:rendered",
+      "F:willRender",
+      "F:rendered",
+      "C:willPatch",
+      "E:willUnmount",
+      "E:willDestroy",
+      "F:mounted",
+      "C:patched",
+    ]).toBeLogged();
   });
 
   test("mounted hook is called on every mount, not just the first one", async () => {
@@ -1175,49 +1118,43 @@ describe("lifecycle hooks", () => {
     }
 
     const parent = await mount(Parent, fixture);
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Child:mounted",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     parent.state.hasChild = false;
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:willPatch",
-        "Child:willUnmount",
-        "Child:willDestroy",
-        "Parent:patched",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Child:willUnmount",
+      "Child:willDestroy",
+      "Parent:patched",
+    ]).toBeLogged();
 
     parent.state.hasChild = true;
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Parent:willPatch",
-        "Child:mounted",
-        "Parent:patched",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Parent:willPatch",
+      "Child:mounted",
+      "Parent:patched",
+    ]).toBeLogged();
   });
 
   test("render in mounted", async () => {
@@ -1235,26 +1172,19 @@ describe("lifecycle hooks", () => {
 
     await mount(Parent, fixture);
     expect(fixture.innerHTML).toBe("<span></span>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:mounted",
-        "Parent:willRender",
-        "Parent:rendered",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:mounted",
+      "Parent:willRender",
+      "Parent:rendered",
+    ]).toBeLogged();
 
     await nextTick();
     expect(fixture.innerHTML).toBe("<span>Patched</span>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willPatch",
-        "Parent:patched",
-      ]
-    `);
+    expect(["Parent:willPatch", "Parent:patched"]).toBeLogged();
   });
 
   test("render in patched", async () => {
@@ -1275,38 +1205,29 @@ describe("lifecycle hooks", () => {
 
     const parent = await mount(Parent, fixture);
     expect(fixture.innerHTML).toBe("<span></span>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     parent.render();
     await nextTick();
     expect(fixture.innerHTML).toBe("<span></span>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:willPatch",
-        "Parent:patched",
-        "Parent:willRender",
-        "Parent:rendered",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Parent:patched",
+      "Parent:willRender",
+      "Parent:rendered",
+    ]).toBeLogged();
 
     await nextTick();
     expect(fixture.innerHTML).toBe("<span>Patched</span>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willPatch",
-        "Parent:patched",
-      ]
-    `);
+    expect(["Parent:willPatch", "Parent:patched"]).toBeLogged();
   });
 
   test("render in willPatch", async () => {
@@ -1327,38 +1248,29 @@ describe("lifecycle hooks", () => {
 
     const parent = await mount(Parent, fixture);
     expect(fixture.innerHTML).toBe("<span></span>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     parent.render();
     await nextTick();
     expect(fixture.innerHTML).toBe("<span></span>");
 
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:willPatch",
-        "Parent:patched",
-        "Parent:willRender",
-        "Parent:rendered",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Parent:patched",
+      "Parent:willRender",
+      "Parent:rendered",
+    ]).toBeLogged();
 
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willPatch",
-        "Parent:patched",
-      ]
-    `);
+    expect(["Parent:willPatch", "Parent:patched"]).toBeLogged();
     expect(fixture.innerHTML).toBe("<span>Patched</span>");
   });
 
@@ -1401,21 +1313,19 @@ describe("lifecycle hooks", () => {
     await nextTick();
     app.destroy();
 
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "onWillStart",
-        "onWillRender",
-        "onRendered",
-        "onMounted",
-        "onWillUpdateProps",
-        "onWillRender",
-        "onRendered",
-        "onWillPatch",
-        "onPatched",
-        "onWillUnmount",
-        "onWillDestroy",
-      ]
-    `);
+    expect([
+      "onWillStart",
+      "onWillRender",
+      "onRendered",
+      "onMounted",
+      "onWillUpdateProps",
+      "onWillRender",
+      "onRendered",
+      "onWillPatch",
+      "onPatched",
+      "onWillUnmount",
+      "onWillDestroy",
+    ]).toBeLogged();
   });
 
   test("destroy new children before being mountged", async () => {
@@ -1447,32 +1357,26 @@ describe("lifecycle hooks", () => {
     const app = new App(Parent);
     const parent = await app.mount(fixture);
     expect(fixture.innerHTML).toBe("beforeafter");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     parent.state.flag = true;
 
     await nextTick();
     expect(fixture.innerHTML).toBe("");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Parent:willUnmount",
-        "Child:willDestroy",
-        "Parent:willDestroy",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Parent:willUnmount",
+      "Child:willDestroy",
+      "Parent:willDestroy",
+    ]).toBeLogged();
   });
 });

tests/components/props.test.ts

@@ -1,5 +1,5 @@
 import { Component, mount, onWillUpdateProps, useState, xml } from "../../src";
-import { makeTestFixture, nextTick, snapshotEverything, steps, useLogLifecycle } from "../helpers";
+import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
 
 let fixture: HTMLElement;
 
@@ -272,30 +272,26 @@ test("bound functions are considered 'alike'", async () => {
 
   const parent = await mount(Parent, fixture);
   expect(fixture.innerHTML).toBe("1child");
-  expect(steps.splice(0)).toMatchInlineSnapshot(`
-    Array [
-      "Parent:setup",
-      "Parent:willStart",
-      "Parent:willRender",
-      "Child:setup",
-      "Child:willStart",
-      "Child:willRender",
-      "Child:rendered",
-      "Parent:rendered",
-      "Child:mounted",
-      "Parent:mounted",
-    ]
-  `);
+  expect([
+    "Parent:setup",
+    "Parent:willStart",
+    "Parent:willRender",
+    "Child:setup",
+    "Child:willStart",
+    "Parent:rendered",
+    "Child:willRender",
+    "Child:rendered",
+    "Child:mounted",
+    "Parent:mounted",
+  ]).toBeLogged();
   parent.state.val = 3;
   await nextTick();
-  expect(steps.splice(0)).toMatchInlineSnapshot(`
-    Array [
-      "Parent:willRender",
-      "Parent:rendered",
-      "Parent:willPatch",
-      "Parent:patched",
-    ]
-  `);
+  expect([
+    "Parent:willRender",
+    "Parent:rendered",
+    "Parent:willPatch",
+    "Parent:patched",
+  ]).toBeLogged();
   expect(fixture.innerHTML).toBe("3child");
 });
 
@@ -334,33 +330,29 @@ test(".alike suffix in a simple case", async () => {
   }
 
   const parent = await mount(Parent, fixture);
-  expect(steps.splice(0)).toMatchInlineSnapshot(`
-    Array [
-      "Parent:setup",
-      "Parent:willStart",
-      "Parent:willRender",
-      "Child:setup",
-      "Child:willStart",
-      "Child:willRender",
-      "Child:rendered",
-      "Parent:rendered",
-      "Child:mounted",
-      "Parent:mounted",
-    ]
-  `);
+  expect([
+    "Parent:setup",
+    "Parent:willStart",
+    "Parent:willRender",
+    "Child:setup",
+    "Child:willStart",
+    "Parent:rendered",
+    "Child:willRender",
+    "Child:rendered",
+    "Child:mounted",
+    "Parent:mounted",
+  ]).toBeLogged();
 
   expect(fixture.innerHTML).toBe("01");
   parent.state.counter++;
   await nextTick();
   expect(fixture.innerHTML).toBe("11");
-  expect(steps.splice(0)).toMatchInlineSnapshot(`
-    Array [
-      "Parent:willRender",
-      "Parent:rendered",
-      "Parent:willPatch",
-      "Parent:patched",
-    ]
-  `);
+  expect([
+    "Parent:willRender",
+    "Parent:rendered",
+    "Parent:willPatch",
+    "Parent:patched",
+  ]).toBeLogged();
 });
 
 test(".alike suffix in a list", async () => {
@@ -396,40 +388,36 @@ test(".alike suffix in a list", async () => {
   }
 
   await mount(Parent, fixture);
-  expect(steps.splice(0)).toMatchInlineSnapshot(`
-    Array [
-      "Parent:setup",
-      "Parent:willStart",
-      "Parent:willRender",
-      "Todo:setup",
-      "Todo:willStart",
-      "Todo:willRender",
-      "Todo:rendered",
-      "Todo:setup",
-      "Todo:willStart",
-      "Todo:willRender",
-      "Todo:rendered",
-      "Parent:rendered",
-      "Todo:mounted",
-      "Todo:mounted",
-      "Parent:mounted",
-    ]
-  `);
+  expect([
+    "Parent:setup",
+    "Parent:willStart",
+    "Parent:willRender",
+    "Todo:setup",
+    "Todo:willStart",
+    "Todo:setup",
+    "Todo:willStart",
+    "Parent:rendered",
+    "Todo:willRender",
+    "Todo:rendered",
+    "Todo:willRender",
+    "Todo:rendered",
+    "Todo:mounted",
+    "Todo:mounted",
+    "Parent:mounted",
+  ]).toBeLogged();
 
   expect(fixture.innerHTML).toBe("<button>1</button><button>2V</button>");
   fixture.querySelector("button")?.click();
   await nextTick();
   expect(fixture.innerHTML).toBe("<button>1V</button><button>2V</button>");
-  expect(steps.splice(0)).toMatchInlineSnapshot(`
-    Array [
-      "Parent:willRender",
-      "Parent:rendered",
-      "Todo:willRender",
-      "Todo:rendered",
-      "Todo:willPatch",
-      "Todo:patched",
-      "Parent:willPatch",
-      "Parent:patched",
-    ]
-  `);
+  expect([
+    "Parent:willRender",
+    "Parent:rendered",
+    "Todo:willRender",
+    "Todo:rendered",
+    "Todo:willPatch",
+    "Todo:patched",
+    "Parent:willPatch",
+    "Parent:patched",
+  ]).toBeLogged();
 });

tests/components/props_validation.test.ts

@@ -51,9 +51,8 @@ describe("props validation", () => {
 
     const app = new App(Parent, { test: true });
     let error: OwlError | undefined;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow(
+    await expect(nextAppError(app)).resolves.toThrow(
       "Invalid props for component 'SubComp': 'message' is missing"
     );
     await mountProm;
@@ -81,9 +80,8 @@ describe("props validation", () => {
 
     const app = new App(Parent, { test: true });
     let error: OwlError | undefined;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow(
+    await expect(nextAppError(app)).resolves.toThrow(
       "Invalid props for component 'SubComp': 'message' is missing"
     );
     await mountProm;
@@ -133,9 +131,8 @@ describe("props validation", () => {
       props = {};
       let app = new App(Parent, { test: true });
       let error: OwlError | undefined;
-      let appError = nextAppError(app);
       let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      await expect(appError).resolves.toThrow("Invalid props for component '_a'");
+      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
       await mountProm;
       expect(error!).toBeDefined();
       expect(error!.message).toBe(
@@ -151,9 +148,8 @@ describe("props validation", () => {
       expect(error!).toBeUndefined();
       props = { p: test.ko };
       app = new App(Parent, { test: true });
-      appError = nextAppError(app);
       mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      await expect(appError).resolves.toThrow("Invalid props for component '_a'");
+      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
       await mountProm;
       expect(error!).toBeDefined();
       expect(error!.message).toBe(
@@ -187,9 +183,8 @@ describe("props validation", () => {
       props = {};
       let app = new App(Parent, { test: true });
       let error: OwlError | undefined;
-      let appError = nextAppError(app);
       let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      await expect(appError).resolves.toThrow("Invalid props for component '_a'");
+      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
       await mountProm;
       expect(error!).toBeDefined();
       expect(error!.message).toBe(
@@ -205,9 +200,8 @@ describe("props validation", () => {
       expect(error!).toBeUndefined();
       props = { p: test.ko };
       app = new App(Parent, { test: true });
-      appError = nextAppError(app);
       mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      await expect(appError).resolves.toThrow("Invalid props for component '_a'");
+      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
       await mountProm;
       expect(error!).toBeDefined();
       expect(error!.message).toBe(
@@ -246,9 +240,8 @@ describe("props validation", () => {
     expect(error!).toBeUndefined();
     props = { p: 1 };
     const app = new App(Parent, { test: true });
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("Invalid props for component 'SubComp'");
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
@@ -286,9 +279,8 @@ describe("props validation", () => {
     expect(error!).toBeUndefined();
     props = { p: 1 };
     const app = new App(Parent, { test: true });
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("Invalid props for component 'SubComp'");
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe("Invalid props for component 'SubComp': 'p' is not a string");
@@ -324,16 +316,14 @@ describe("props validation", () => {
     expect(error!).toBeUndefined();
     props = { p: [1] };
     let app = new App(Parent, { test: true });
-    let appError = nextAppError(app);
     let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("Invalid props for component 'SubComp'");
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
     await mountProm;
     expect(error!).toBeDefined();
     error = undefined;
     app = new App(Parent, { test: true });
-    appError = nextAppError(app);
     mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("Invalid props for component 'SubComp'");
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
     await mountProm;
     expect(error!).toBeDefined();
   });
@@ -375,9 +365,8 @@ describe("props validation", () => {
     expect(error!).toBeUndefined();
     props = { p: [true, 1] };
     const app = new App(Parent, { test: true });
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("Invalid props for component 'SubComp'");
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
@@ -410,9 +399,8 @@ describe("props validation", () => {
     expect(error!).toBeUndefined();
     props = { p: { id: 1, url: "url", extra: true } };
     let app = new App(Parent, { test: true });
-    let appError = nextAppError(app);
     let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("Invalid props for component 'SubComp'");
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
@@ -420,9 +408,8 @@ describe("props validation", () => {
     );
     props = { p: { id: "1", url: "url" } };
     app = new App(Parent, { test: true });
-    appError = nextAppError(app);
     mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("Invalid props for component 'SubComp'");
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
@@ -431,9 +418,8 @@ describe("props validation", () => {
     error = undefined;
     props = { p: { id: 1 } };
     app = new App(Parent, { test: true });
-    appError = nextAppError(app);
     mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("Invalid props for component 'SubComp'");
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
@@ -479,9 +465,8 @@ describe("props validation", () => {
     expect(error!).toBeUndefined();
     props = { p: { id: 1, url: [12, true] } };
     const app = new App(Parent, { test: true });
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("Invalid props for component 'SubComp'");
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
@@ -690,9 +675,8 @@ describe("props validation", () => {
     }
     let error: Error;
     const app = new App(Parent, { test: true });
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("Invalid props for component 'SubComp'");
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe("Invalid props for component 'SubComp': 'p' is missing");
@@ -781,9 +765,8 @@ describe("props validation", () => {
     }
     let error: Error;
     const app = new App(Parent, { test: true });
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("Invalid props for component 'Child'");
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'Child'");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
@@ -838,9 +821,8 @@ describe("props validation", () => {
 
     const app = new App(Parent, { test: true });
     let error: OwlError | undefined;
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow(
+    await expect(nextAppError(app)).resolves.toThrow(
       "Invalid props for component 'Child': 'message' is missing"
     );
     await mountProm;
@@ -913,9 +895,10 @@ describe("default props", () => {
     }
     let error: Error;
     const app = new App(Parent, { test: true });
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("default value cannot be defined for a mandatory prop");
+    await expect(nextAppError(app)).resolves.toThrow(
+      "default value cannot be defined for a mandatory prop"
+    );
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(

tests/components/reactivity.test.ts

@@ -9,7 +9,7 @@ import {
   xml,
   toRaw,
 } from "../../src";
-import { makeTestFixture, nextTick, snapshotEverything, steps, useLogLifecycle } from "../helpers";
+import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
 
 let fixture: HTMLElement;
 
@@ -151,10 +151,9 @@ describe("reactivity in lifecycle", () => {
       }
     }
     const prom = mount(Comp, fixture);
-    expect(steps).toEqual([1]);
     (STATE as any).val = 2;
     await prom;
-    expect(steps).toEqual([1, 2]);
+    expect(steps).toEqual([2]);
     expect(fixture.innerHTML).toBe("<div>2</div>");
   });
 
@@ -176,34 +175,30 @@ describe("reactivity in lifecycle", () => {
 
     const parent = await mount(Parent, fixture);
     expect(fixture.innerHTML).toBe("2");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Child:mounted",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     parent.state.content = null;
     parent.state.renderChild = false;
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:willPatch",
-        "Child:willUnmount",
-        "Child:willDestroy",
-        "Parent:patched",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Child:willUnmount",
+      "Child:willDestroy",
+      "Parent:patched",
+    ]).toBeLogged();
   });
 
   test("Component is automatically subscribed to reactive object received as prop", async () => {

tests/components/refs.test.ts

@@ -125,11 +125,10 @@ describe("refs", () => {
     }
 
     const app = new App(Test, { test: true });
-    const appError = nextAppError(app);
     const mountProm = expect(app.mount(fixture)).rejects.toThrowError(
       'Cannot set the same ref more than once in the same component, ref "coucou" was set multiple times in Test'
     );
-    await expect(appError).resolves.toThrow(
+    await expect(nextAppError(app)).resolves.toThrow(
       'Cannot set the same ref more than once in the same component, ref "coucou" was set multiple times in Test'
     );
     await mountProm;

tests/components/rendering.test.ts

@@ -6,7 +6,6 @@ import {
   useLogLifecycle,
   makeDeferred,
   nextMicroTick,
-  steps,
 } from "../helpers";
 
 let fixture: HTMLElement;
@@ -42,32 +41,28 @@ describe("rendering semantics", () => {
     const parent = await mount(Parent, fixture);
 
     expect(fixture.innerHTML).toBe("Achild");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Child:mounted",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     parent.state.value = "B";
     await nextTick();
     expect(fixture.innerHTML).toBe("Bchild");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:willPatch",
-        "Parent:patched",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Parent:patched",
+    ]).toBeLogged();
   });
 
   test("can force a render to update sub tree", async () => {
@@ -172,20 +167,18 @@ describe("rendering semantics", () => {
     const parent = await mount(Parent, fixture, { env });
 
     expect(fixture.innerHTML).toBe("parentAchild3");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Child:mounted",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     value = 4;
     parent.render(true);
@@ -194,34 +187,30 @@ describe("rendering semantics", () => {
     await nextMicroTick();
     await nextMicroTick();
     await nextMicroTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Child:willUpdateProps",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Child:willUpdateProps",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+    ]).toBeLogged();
 
     parent.state.value = "B";
 
     await nextTick();
 
     expect(fixture.innerHTML).toBe("parentBchild4");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Child:willUpdateProps",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Parent:willPatch",
-        "Child:willPatch",
-        "Child:patched",
-        "Parent:patched",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Child:willUpdateProps",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Parent:willPatch",
+      "Child:willPatch",
+      "Child:patched",
+      "Parent:patched",
+    ]).toBeLogged();
   });
 
   test("props are reactive", async () => {
@@ -246,32 +235,23 @@ describe("rendering semantics", () => {
 
     const parent = await mount(Parent, fixture);
     expect(fixture.innerHTML).toBe("1");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Child:mounted",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     parent.state.b = 3;
     await nextTick();
     expect(fixture.innerHTML).toBe("3");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Child:willRender",
-        "Child:rendered",
-        "Child:willPatch",
-        "Child:patched",
-      ]
-    `);
+    expect(["Child:willRender", "Child:rendered", "Child:willPatch", "Child:patched"]).toBeLogged();
   });
 
   test("props are reactive (nested prop)", async () => {
@@ -298,48 +278,37 @@ describe("rendering semantics", () => {
 
     const parent = await mount(Parent, fixture);
     expect(fixture.innerHTML).toBe("1");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Child:mounted",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     parent.state.b.c = 3; // parent is now subscribed to 'b' key
     await nextTick();
     expect(fixture.innerHTML).toBe("3");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Child:willRender",
-        "Child:rendered",
-        "Child:willPatch",
-        "Child:patched",
-      ]
-    `);
+    expect(["Child:willRender", "Child:rendered", "Child:willPatch", "Child:patched"]).toBeLogged();
 
     parent.state.b = { c: 444 }; // triggers a parent and a child render
     await nextTick();
     expect(fixture.innerHTML).toBe("444");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Parent:rendered",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:willPatch",
-        "Parent:patched",
-        "Child:willPatch",
-        "Child:patched",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Parent:willPatch",
+      "Parent:patched",
+      "Child:willPatch",
+      "Child:patched",
+    ]).toBeLogged();
   });
 
   test("works as expected for dynamic number of props", async () => {
@@ -397,45 +366,41 @@ describe("rendering semantics", () => {
 
     const parent = await mount(A, fixture);
     expect(fixture.innerHTML).toBe("11");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "A:setup",
-        "A:willStart",
-        "A:willRender",
-        "B:setup",
-        "B:willStart",
-        "B:willRender",
-        "C:setup",
-        "C:willStart",
-        "C:willRender",
-        "C:rendered",
-        "B:rendered",
-        "A:rendered",
-        "C:mounted",
-        "B:mounted",
-        "A:mounted",
-      ]
-    `);
+    expect([
+      "A:setup",
+      "A:willStart",
+      "A:willRender",
+      "B:setup",
+      "B:willStart",
+      "A:rendered",
+      "B:willRender",
+      "C:setup",
+      "C:willStart",
+      "B:rendered",
+      "C:willRender",
+      "C:rendered",
+      "C:mounted",
+      "B:mounted",
+      "A:mounted",
+    ]).toBeLogged();
 
     parent.state.obj.val = 3;
     await nextTick();
     expect(fixture.innerHTML).toBe("33");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "A:willRender",
-        "A:rendered",
-        "C:willRender",
-        "C:rendered",
-        "A:willPatch",
-        "A:patched",
-        "C:willPatch",
-        "C:patched",
-      ]
-    `);
+    expect([
+      "A:willRender",
+      "A:rendered",
+      "C:willRender",
+      "C:rendered",
+      "A:willPatch",
+      "A:patched",
+      "C:willPatch",
+      "C:patched",
+    ]).toBeLogged();
 
     def.resolve();
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`Array []`);
+    expect([]).toBeLogged();
   });
 });
 
@@ -466,67 +431,51 @@ test("force render in case of existing render", async () => {
   }
   const parent = await mount(A, fixture);
   expect(fixture.innerHTML).toBe("C1");
-  expect(steps.splice(0)).toMatchInlineSnapshot(`
-    Array [
-      "A:setup",
-      "A:willStart",
-      "A:willRender",
-      "B:setup",
-      "B:willStart",
-      "B:willRender",
-      "C:setup",
-      "C:willStart",
-      "C:willRender",
-      "C:rendered",
-      "B:rendered",
-      "A:rendered",
-      "C:mounted",
-      "B:mounted",
-      "A:mounted",
-    ]
-  `);
+  expect([
+    "A:setup",
+    "A:willStart",
+    "A:willRender",
+    "B:setup",
+    "B:willStart",
+    "A:rendered",
+    "B:willRender",
+    "C:setup",
+    "C:willStart",
+    "B:rendered",
+    "C:willRender",
+    "C:rendered",
+    "C:mounted",
+    "B:mounted",
+    "A:mounted",
+  ]).toBeLogged();
 
   // trigger a new rendering, blocked in B
   parent.state.val = 2;
   await nextTick();
-  expect(steps.splice(0)).toMatchInlineSnapshot(`
-    Array [
-      "A:willRender",
-      "B:willUpdateProps",
-      "A:rendered",
-    ]
-  `);
+  expect(["A:willRender", "B:willUpdateProps", "A:rendered"]).toBeLogged();
 
   // initiate a new render with deep=true. it should cancel the current render
   // and also be blocked in B
   parent.render(true);
   await nextTick();
-  expect(steps.splice(0)).toMatchInlineSnapshot(`
-    Array [
-      "A:willRender",
-      "B:willUpdateProps",
-      "A:rendered",
-    ]
-  `);
+  expect(["A:willRender", "B:willUpdateProps", "A:rendered"]).toBeLogged();
 
   def.resolve();
   await nextTick();
   // we check here that the render reaches C (so, that it was properly forced)
-  expect(steps.splice(0)).toMatchInlineSnapshot(`
-    Array [
-      "B:willRender",
-      "C:willUpdateProps",
-      "C:willRender",
-      "C:rendered",
-      "B:rendered",
-      "A:willPatch",
-      "C:willPatch",
-      "B:willPatch",
-      "B:patched",
-      "C:patched",
-      "A:patched",
-    ]
-  `);
+  expect([
+    "B:willRender",
+    "C:willUpdateProps",
+    "B:rendered",
+    "C:willRender",
+    "C:rendered",
+    "A:willPatch",
+    "B:willPatch",
+    "C:willPatch",
+    "C:patched",
+    "B:patched",
+    "A:patched",
+  ]).toBeLogged();
 });
 
 test("children, default props and renderings", async () => {
@@ -554,30 +503,26 @@ test("children, default props and renderings", async () => {
   const parent = await mount(Parent, fixture);
 
   expect(fixture.innerHTML).toBe("Achild");
-  expect(steps.splice(0)).toMatchInlineSnapshot(`
-    Array [
-      "Parent:setup",
-      "Parent:willStart",
-      "Parent:willRender",
-      "Child:setup",
-      "Child:willStart",
-      "Child:willRender",
-      "Child:rendered",
-      "Parent:rendered",
-      "Child:mounted",
-      "Parent:mounted",
-    ]
-  `);
+  expect([
+    "Parent:setup",
+    "Parent:willStart",
+    "Parent:willRender",
+    "Child:setup",
+    "Child:willStart",
+    "Parent:rendered",
+    "Child:willRender",
+    "Child:rendered",
+    "Child:mounted",
+    "Parent:mounted",
+  ]).toBeLogged();
 
   parent.state.value = "B";
   await nextTick();
   expect(fixture.innerHTML).toBe("Bchild");
-  expect(steps.splice(0)).toMatchInlineSnapshot(`
-    Array [
-      "Parent:willRender",
-      "Parent:rendered",
-      "Parent:willPatch",
-      "Parent:patched",
-    ]
-  `);
+  expect([
+    "Parent:willRender",
+    "Parent:rendered",
+    "Parent:willPatch",
+    "Parent:patched",
+  ]).toBeLogged();
 });

tests/components/slots.test.ts

@@ -223,9 +223,8 @@ describe("slots", () => {
 
     let error: Error;
     const app = new App(Parent);
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
     await mountProm;
     expect(error!).not.toBeNull();
     expect(mockConsoleWarn).toBeCalledTimes(1);

tests/components/style_class.test.ts

@@ -1,4 +1,4 @@
-import { OwlError } from "../../src/common/owl_error";
+import { OwlError } from "../../src/runtime/error_handling";
 import { App, Component, mount, onMounted, useState, xml } from "../../src";
 import { makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
 
@@ -349,9 +349,8 @@ describe("style and class handling", () => {
     }
     let error: OwlError;
     const app = new App(Parent);
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.cause).toBeDefined();

tests/components/t_component.test.ts

@@ -1,5 +1,5 @@
 import { Component, mount, useState, xml } from "../../src";
-import { makeTestFixture, nextTick, snapshotEverything, steps, useLogLifecycle } from "../helpers";
+import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
 
 let fixture: HTMLElement;
 
@@ -29,20 +29,18 @@ describe("t-component", () => {
     await mount(Parent, fixture);
 
     expect(fixture.innerHTML).toBe("<div>child</div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Child:mounted",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
   });
 
   test("switching dynamic component", async () => {
@@ -70,40 +68,36 @@ describe("t-component", () => {
 
     const parent = await mount(Parent, fixture);
     expect(fixture.innerHTML).toBe("<div>child a</div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "ChildA:setup",
-        "ChildA:willStart",
-        "ChildA:willRender",
-        "ChildA:rendered",
-        "Parent:rendered",
-        "ChildA:mounted",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "ChildA:setup",
+      "ChildA:willStart",
+      "Parent:rendered",
+      "ChildA:willRender",
+      "ChildA:rendered",
+      "ChildA:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     parent.Child = ChildB;
     parent.render();
     await nextTick();
     expect(fixture.innerHTML).toBe("child b");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "ChildB:setup",
-        "ChildB:willStart",
-        "ChildB:willRender",
-        "ChildB:rendered",
-        "Parent:rendered",
-        "Parent:willPatch",
-        "ChildA:willUnmount",
-        "ChildA:willDestroy",
-        "ChildB:mounted",
-        "Parent:patched",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "ChildB:setup",
+      "ChildB:willStart",
+      "Parent:rendered",
+      "ChildB:willRender",
+      "ChildB:rendered",
+      "Parent:willPatch",
+      "ChildA:willUnmount",
+      "ChildA:willDestroy",
+      "ChildB:mounted",
+      "Parent:patched",
+    ]).toBeLogged();
   });
 
   test("can switch between dynamic components without the need for a t-key", async () => {

tests/components/t_foreach.test.ts

@@ -4,7 +4,6 @@ import {
   nextAppError,
   nextTick,
   snapshotEverything,
-  steps,
   useLogLifecycle,
 } from "../helpers";
 
@@ -92,25 +91,23 @@ describe("list of components", () => {
     expect(fixture.innerHTML).toBe(
       "<div><ul><li><div>1</div></li><li><div>2</div></li></ul></div>"
     );
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Child:mounted",
-        "Child:mounted",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
   });
 
   test("reconciliation alg works for t-foreach in t-foreach", async () => {
@@ -326,11 +323,10 @@ describe("list of components", () => {
     }
 
     const app = new App(Parent, { test: true });
-    const appError = nextAppError(app);
     const mountProm = expect(app.mount(fixture)).rejects.toThrow(
       "Got duplicate key in t-foreach: child"
     );
-    await expect(appError).resolves.toThrow("Got duplicate key in t-foreach: child");
+    await expect(nextAppError(app)).resolves.toThrow("Got duplicate key in t-foreach: child");
     await mountProm;
     console.info = consoleInfo;
     expect(mockConsoleWarn).toBeCalledTimes(1);
@@ -353,11 +349,12 @@ describe("list of components", () => {
     }
 
     const app = new App(Parent, { test: true });
-    const appError = nextAppError(app);
     const mountProm = expect(app.mount(fixture)).rejects.toThrow(
       "Got duplicate key in t-foreach: [object Object]"
     );
-    await expect(appError).resolves.toThrow("Got duplicate key in t-foreach: [object Object]");
+    await expect(nextAppError(app)).resolves.toThrow(
+      "Got duplicate key in t-foreach: [object Object]"
+    );
     await mountProm;
     console.info = consoleInfo;
     expect(mockConsoleWarn).toBeCalledTimes(1);

tests/helpers.ts

@@ -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/common/owl_error";
+import { OwlError } from "../src/runtime/error_handling";
 
 const mount = blockDom.mount;
 
@@ -137,7 +137,7 @@ export function snapshotEverything() {
   };
 }
 
-export const steps: string[] = [];
+const steps: string[] = [];
 
 export function logStep(step: string) {
   steps.push(step);
@@ -235,7 +235,7 @@ expect.extend({
     };
 
     const currentSteps = steps.splice(0);
-    let pass = this.equals(currentSteps, expected);
+    const pass = this.equals(currentSteps, expected);
 
     const message = pass
       ? () =>

tests/misc/__snapshots__/portal.test.ts.snap

@@ -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\`] = k_block1[i1];
+      ctx[\`portalId\`] = v_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\`] = k_block1[i1];
+      ctx[\`portalId\`] = v_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\`] = k_block1[i1];
+      ctx[\`portalId\`] = v_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\`] = k_block1[i1];
+      ctx[\`portalId\`] = v_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\`] = k_block2[i1];
+      ctx[\`portalId\`] = v_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\`] = k_block2[i1];
+      ctx[\`elem\`] = v_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\`] = k_block3[i1];
+      ctx[\`elem\`] = v_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 {

tests/misc/portal.test.ts

@@ -1,4 +1,4 @@
-import { OwlError } from "../../src/common/owl_error";
+import { OwlError } from "../../src/runtime/error_handling";
 import {
   App,
   Component,
@@ -270,9 +270,8 @@ describe("Portal", () => {
 
     let error: Error;
     const app = new App(Parent);
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("invalid portal target");
+    await expect(nextAppError(app)).resolves.toThrow("invalid portal target");
     await mountProm;
 
     expect(error!).toBeDefined();
@@ -989,7 +988,7 @@ describe("Portal: Props validation", () => {
       error = e as Error;
     }
     expect(error!).toBeDefined();
-    expect(error!.message).toContain(`Unexpected token ','`);
+    expect(error!.message).toBe(`Unexpected token ','`);
   });
 
   test("target must be a valid selector", async () => {
@@ -1003,9 +1002,8 @@ describe("Portal: Props validation", () => {
     }
     let error: OwlError;
     const app = new App(Parent);
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.cause).toBeDefined();
@@ -1023,9 +1021,8 @@ describe("Portal: Props validation", () => {
     }
     let error: Error;
     const app = new App(Parent);
-    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(appError).resolves.toThrow("invalid portal target");
+    await expect(nextAppError(app)).resolves.toThrow("invalid portal target");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(`invalid portal target`);

tests/reactivity.test.ts

@@ -17,7 +17,6 @@ import {
   nextMicroTick,
   nextTick,
   snapshotEverything,
-  steps,
   useLogLifecycle,
 } from "./helpers";
 
@@ -1293,12 +1292,6 @@ describe("Collections", () => {
 
       state.add(3); // setting unobserved key doesn't notify
       expect(observer).toHaveBeenCalledTimes(3);
-      expect(state.has(3)).toBe(true); // subscribe to 3
-      state.add(3); // adding observed key doesn't notify if key was already present
-      expect(observer).toHaveBeenCalledTimes(3);
-      expect(state.has(4)).toBe(false); // subscribe to 4
-      state.delete(4); // deleting observed key doesn't notify if key was already not present
-      expect(observer).toHaveBeenCalledTimes(3);
     });
 
     test("iterating on keys returns reactives", async () => {
@@ -1492,12 +1485,6 @@ describe("Collections", () => {
 
       state.set(3, 4); // setting unobserved key doesn't notify
       expect(observer).toHaveBeenCalledTimes(3);
-      expect(state.has(3)).toBe(true); // subscribe to 3
-      state.set(3, 4); // setting the same value doesn't notify
-      expect(observer).toHaveBeenCalledTimes(3);
-      expect(state.has(4)).toBe(false); // subscribe to 4
-      state.delete(4); // deleting observed key doesn't notify if key was already not present
-      expect(observer).toHaveBeenCalledTimes(3);
     });
 
     test("checking for a key with 'get' subscribes the callback to changes to that key", () => {
@@ -1523,12 +1510,6 @@ describe("Collections", () => {
 
       state.set(3, 4); // setting unobserved key doesn't notify
       expect(observer).toHaveBeenCalledTimes(3);
-      expect(state.get(3)).toBe(4); // subscribe to 3
-      state.set(3, 4); // setting the same value doesn't notify
-      expect(observer).toHaveBeenCalledTimes(3);
-      expect(state.get(4)).toBe(undefined); // subscribe to 4
-      state.delete(4); // deleting observed key doesn't notify if key was already not present
-      expect(observer).toHaveBeenCalledTimes(3);
     });
 
     test("getting values returns a reactive", async () => {
@@ -1851,41 +1832,37 @@ describe("Reactivity: useState", () => {
       }
     }
     await mount(Parent, fixture);
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Child:mounted",
-        "Child:mounted",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     expect(fixture.innerHTML).toBe("<div><span>123</span><span>123</span></div>");
     testContext.value = 321;
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Child:willRender",
-        "Child:rendered",
-        "Child:willRender",
-        "Child:rendered",
-        "Child:willPatch",
-        "Child:patched",
-        "Child:willPatch",
-        "Child:patched",
-      ]
-    `);
+    expect([
+      "Child:willRender",
+      "Child:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:willPatch",
+      "Child:patched",
+      "Child:willPatch",
+      "Child:patched",
+    ]).toBeLogged();
     expect(fixture.innerHTML).toBe("<div><span>321</span><span>321</span></div>");
   });
 
@@ -1909,49 +1886,38 @@ describe("Reactivity: useState", () => {
     }
 
     await mount(Parent, fixture);
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Child:mounted",
-        "Child:mounted",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     expect(fixture.innerHTML).toBe("<div><span>123</span><span>123</span></div>");
     testContext.value = 321;
     await nextMicroTick();
     await nextMicroTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Child:willRender",
-        "Child:rendered",
-        "Child:willRender",
-        "Child:rendered",
-      ]
-    `);
+    expect([
+      "Child:willRender",
+      "Child:rendered",
+      "Child:willRender",
+      "Child:rendered",
+    ]).toBeLogged();
     expect(fixture.innerHTML).toBe("<div><span>123</span><span>123</span></div>");
 
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Child:willPatch",
-        "Child:patched",
-        "Child:willPatch",
-        "Child:patched",
-      ]
-    `);
+    expect(["Child:willPatch", "Child:patched", "Child:willPatch", "Child:patched"]).toBeLogged();
     expect(fixture.innerHTML).toBe("<div><span>321</span><span>321</span></div>");
   });
 
@@ -1985,54 +1951,43 @@ describe("Reactivity: useState", () => {
 
     await mount(GrandFather, fixture);
     expect(fixture.innerHTML).toBe("<div><span>123</span><div><span>123</span></div></div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "GrandFather:setup",
-        "GrandFather:willStart",
-        "GrandFather:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "GrandFather:rendered",
-        "Child:mounted",
-        "Parent:mounted",
-        "Child:mounted",
-        "GrandFather:mounted",
-      ]
-    `);
+    expect([
+      "GrandFather:setup",
+      "GrandFather:willStart",
+      "GrandFather:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:setup",
+      "Parent:willStart",
+      "GrandFather:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+      "Child:mounted",
+      "GrandFather:mounted",
+    ]).toBeLogged();
 
     testContext.value = 321;
     await nextMicroTick();
     await nextMicroTick();
     expect(fixture.innerHTML).toBe("<div><span>123</span><div><span>123</span></div></div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Child:willRender",
-        "Child:rendered",
-        "Child:willRender",
-        "Child:rendered",
-      ]
-    `);
+    expect([
+      "Child:willRender",
+      "Child:rendered",
+      "Child:willRender",
+      "Child:rendered",
+    ]).toBeLogged();
 
     await nextTick();
     expect(fixture.innerHTML).toBe("<div><span>321</span><div><span>321</span></div></div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Child:willPatch",
-        "Child:patched",
-        "Child:willPatch",
-        "Child:patched",
-      ]
-    `);
+    expect(["Child:willPatch", "Child:patched", "Child:willPatch", "Child:patched"]).toBeLogged();
   });
 
   test("one components can subscribe twice to same context", async () => {
@@ -2208,49 +2163,38 @@ describe("Reactivity: useState", () => {
     }
     const parent = await mount(Parent, fixture);
     expect(fixture.innerHTML).toBe("<div><span>123</span></div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Child:willRender",
-        "Child:rendered",
-        "Parent:rendered",
-        "Child:mounted",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     testContext.a = 321;
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Child:willRender",
-        "Child:rendered",
-        "Child:willPatch",
-        "Child:patched",
-      ]
-    `);
+    expect(["Child:willRender", "Child:rendered", "Child:willPatch", "Child:patched"]).toBeLogged();
 
     parent.state.flag = false;
     await nextTick();
     expect(fixture.innerHTML).toBe("<div></div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:willPatch",
-        "Child:willUnmount",
-        "Child:willDestroy",
-        "Parent:patched",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Child:willUnmount",
+      "Child:willDestroy",
+      "Parent:patched",
+    ]).toBeLogged();
 
     testContext.a = 456;
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`Array []`);
+    expect([]).toBeLogged();
   });
 
   test("destroyed component before being mounted is inactive", async () => {

tools/devtools/manifest-chrome.json

@@ -1,6 +1,6 @@
 {
   "name": "Owl devtools",
-  "version": "1.2.1",
+  "version": "1.1.1",
   "manifest_version": 3,
   "description": "Chrome devtools extension for Odoo Owl framework",
   "icons": {

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

@@ -899,7 +899,7 @@ function keepEnvLit(details) {
       alreadyMet.add(details.env.children[i].name);
     } else {
       let lastElement = details.env.children[i];
-      while (lastElement.children.at(-1)?.name === "[[Prototype]]") {
+      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)) {

tools/devtools/src/page_scripts/owl_devtools_global_hook.js

@@ -1396,7 +1396,7 @@
         return this.getDOMElementsRecursive(node.content);
       }
       if (node.hasOwnProperty("el")) {
-        if (node.el instanceof Element || node.el instanceof Text) {
+        if (node.el instanceof HTMLElement || node.el instanceof Text) {
           return [node.el];
         }
       }
@@ -1415,7 +1415,7 @@
         }
       }
       if (node.hasOwnProperty("parentEl")) {
-        if (node.parentEl instanceof Element) {
+        if (node.parentEl instanceof HTMLElement) {
           return [node.parentEl];
         }
       }
@@ -1527,9 +1527,6 @@
     // Use inspectedPath to specify the path of the selected component
     getComponentsTree(inspectedPath = null, oldTrees = null, oldDetails = null) {
       const appsArray = [...this.apps];
-      if (inspectedPath && !this.getComponentNode(inspectedPath)) {
-        inspectedPath = null;
-      }
       const trees = appsArray.map((app, index) => {
         let oldTree;
         if (oldTrees) {

tools/release.js

@@ -31,10 +31,6 @@ async function startRelease() {
 
   log(`*** Owl release script ***`);
   log(`Current Version: ${package.version}`);
-  log(`Warning: this script will push to the master branch!`);
-  log(`Make sure that github is configured to allow it:`);
-  log(`   settings => branches => edit master => uncheck Do not allow bypassing the above settings`);
-  log(`   (and probably a good idea to readd the protection after)`)
   
   const STEPS = 11;
   let step = 1;
@@ -86,12 +82,6 @@ async function startRelease() {
     return;
   }
 
-  // ---------------------------------------------------------------------------
-  log(`Step ${step++}/${STEPS}: updating package.json...`);
-  await writeFile("package.json", JSON.stringify({...package, version: next}, null, 2) + "\n");
-  await writeFile("package-lock.json", JSON.stringify({...packageLock, version: next}, null, 2) + "\n");
-  await writeFile("./src/version.ts", `// do not modify manually. This file is generated by the release script.\nexport const version = "${next}";\n`);
-
   // ---------------------------------------------------------------------------
   log(`Step ${step++}/${STEPS}: building owl...`);
   await execCommand("rm -rf dist/");
@@ -118,6 +108,13 @@ async function startRelease() {
   await execCommand("cd dist && zip -r owl-devtools.zip devtools-chrome devtools-firefox && cd ..");
   await execCommand("rm -r dist/devtools-chrome dist/devtools-firefox && rm dist/compiler.js");
 
+  // ---------------------------------------------------------------------------
+  log(`Step ${step++}/${STEPS}: updating package.json...`);
+  await writeFile("package.json", JSON.stringify({...package, version: next}, null, 2) + "\n");
+  await writeFile("package-lock.json", JSON.stringify({...packageLock, version: next}, null, 2) + "\n");
+  await writeFile("./src/version.ts", `// do not modify manually. This file is generated by the release script.\nexport const version = "${next}";\n`);
+
+
   // ---------------------------------------------------------------------------
   log(`Step ${step++}/${STEPS}: updating owl on github page...`);
   await fs.copyFileSync("dist/owl.es.js", "docs/owl.js");