[IMP] devtools: introduce basic testing infrastructure

.gitignore

@@ -1,5 +1,7 @@
 /node_modules
 /dist
+# compiled devtools files
+/tools/devtools/assets/*.js
 
 npm-debug.log
 

doc/reference/component.md

@@ -451,6 +451,5 @@ console.log(status(component));
 // logs either:
 // - 'new', if the component is new and has not been mounted yet
 // - 'mounted', if the component is currently mounted
-// - 'cancelled', if the component has not been mounted yet but will be destroyed soon
 // - 'destroyed' if the component is currently destroyed
 ```

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;
@@ -116,21 +175,11 @@ function createAttrUpdater(attr) {
 }
 function attrsSetter(attrs) {
     if (isArray(attrs)) {
-        if (attrs[0] === "class") {
-            setClass.call(this, attrs[1]);
-        }
-        else {
-            setAttribute.call(this, attrs[0], attrs[1]);
-        }
+        setAttribute.call(this, attrs[0], attrs[1]);
     }
     else {
         for (let k in attrs) {
-            if (k === "class") {
-                setClass.call(this, attrs[k]);
-            }
-            else {
-                setAttribute.call(this, k, attrs[k]);
-            }
+            setAttribute.call(this, k, attrs[k]);
         }
     }
 }
@@ -142,12 +191,7 @@ function attrsUpdater(attrs, oldAttrs) {
             if (val === oldAttrs[1]) {
                 return;
             }
-            if (name === "class") {
-                updateClass.call(this, val, oldAttrs[1]);
-            }
-            else {
-                setAttribute.call(this, name, val);
-            }
+            setAttribute.call(this, name, val);
         }
         else {
             removeAttribute.call(this, oldAttrs[0]);
@@ -157,23 +201,13 @@ function attrsUpdater(attrs, oldAttrs) {
     else {
         for (let k in oldAttrs) {
             if (!(k in attrs)) {
-                if (k === "class") {
-                    updateClass.call(this, "", oldAttrs[k]);
-                }
-                else {
-                    removeAttribute.call(this, k);
-                }
+                removeAttribute.call(this, k);
             }
         }
         for (let k in attrs) {
             const val = attrs[k];
             if (val !== oldAttrs[k]) {
-                if (k === "class") {
-                    updateClass.call(this, val, oldAttrs[k]);
-                }
-                else {
-                    setAttribute.call(this, k, val);
-                }
+                setAttribute.call(this, k, val);
             }
         }
     }
@@ -252,13 +286,20 @@ function updateClass(val, oldVal) {
  * @returns a batched version of the original callback
  */
 function batched(callback) {
-    let scheduled = false;
-    return async (...args) => {
-        if (!scheduled) {
-            scheduled = true;
-            await Promise.resolve();
-            scheduled = false;
-            callback(...args);
+    let called = false;
+    return async () => {
+        // This await blocks all calls to the callback here, then releases them sequentially
+        // in the next microtick. This line decides the granularity of the batch.
+        await Promise.resolve();
+        if (!called) {
+            called = true;
+            // wait for all calls in this microtick to fall through before resetting "called"
+            // so that only the first call to the batched function calls the original callback.
+            // Schedule this before calling the callback so that calls to the batched function
+            // within the callback will proceed only after resetting called to false, and have
+            // a chance to execute the callback again
+            Promise.resolve().then(() => (called = false));
+            callback();
         }
     };
 }
@@ -710,7 +751,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 +772,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 +1583,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 +1632,8 @@ function cancelFibers(fibers) {
         let node = fiber.node;
         fiber.render = throwOnRender;
         if (node.status === 0 /* NEW */) {
-            node.cancel();
+            node.destroy();
+            delete node.parent.children[node.parentKey];
         }
         node.fiber = null;
         if (fiber.bdom) {
@@ -2177,7 +2161,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 +2360,6 @@ class ComponentNode {
         }
     }
     async render(deep) {
-        if (this.status >= 2 /* CANCELLED */) {
-            return;
-        }
         let current = this.fiber;
         if (current && (current.root.locked || current.bdom === true)) {
             await Promise.resolve();
@@ -2404,7 +2385,7 @@ class ComponentNode {
         this.fiber = fiber;
         this.app.scheduler.addFiber(fiber);
         await Promise.resolve();
-        if (this.status >= 2 /* CANCELLED */) {
+        if (this.status === 2 /* DESTROYED */) {
             return;
         }
         // We only want to actually render the component if the following two
@@ -2422,18 +2403,6 @@ class ComponentNode {
             fiber.render();
         }
     }
-    cancel() {
-        this._cancel();
-        delete this.parent.children[this.parentKey];
-        this.app.scheduler.scheduleDestroy(this);
-    }
-    _cancel() {
-        this.status = 2 /* CANCELLED */;
-        const children = this.children;
-        for (let childKey in children) {
-            children[childKey]._cancel();
-        }
-    }
     destroy() {
         let shouldRemove = this.status === 1 /* MOUNTED */;
         this._destroy();
@@ -2461,7 +2430,7 @@ class ComponentNode {
                 this.app.handleError({ error: e, node: this });
             }
         }
-        this.status = 3 /* DESTROYED */;
+        this.status = 2 /* DESTROYED */;
     }
     async updateAndRender(props, parentFiber) {
         this.nextProps = props;
@@ -2994,20 +2963,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 +3166,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 +3809,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 +3832,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);
             }
@@ -3918,10 +3875,6 @@ class CodeGenerator {
         })
             .join("");
     }
-    translate(str) {
-        const match = translationRE.exec(str);
-        return match[1] + this.translateFn(match[2]) + match[3];
-    }
     /**
      * @returns the newly created block name, if any
      */
@@ -3999,7 +3952,8 @@ class CodeGenerator {
         let { block, forceNewBlock } = ctx;
         let value = ast.value;
         if (value && ctx.translate !== false) {
-            value = this.translate(value);
+            const match = translationRE.exec(value);
+            value = match[1] + this.translateFn(match[2]) + match[3];
         }
         if (!ctx.inPreTag) {
             value = value.replace(whitespaceRE, " ");
@@ -4051,6 +4005,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 +4125,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 +4167,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 +4270,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 +4299,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 +4385,7 @@ class CodeGenerator {
                 block,
                 index,
                 forceNewBlock: !isTSet,
+                preventRoot: ctx.preventRoot,
                 isLast: ctx.isLast && i === l - 1,
             });
             this.compileAST(child, subCtx);
@@ -4437,19 +4394,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 +4422,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 +4447,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 +4456,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,
@@ -4532,12 +4494,11 @@ class CodeGenerator {
         else {
             let value;
             if (ast.defaultValue) {
-                const defaultValue = ctx.translate ? this.translate(ast.defaultValue) : ast.defaultValue;
                 if (ast.value) {
-                    value = `withDefault(${expr}, \`${defaultValue}\`)`;
+                    value = `withDefault(${expr}, \`${ast.defaultValue}\`)`;
                 }
                 else {
-                    value = `\`${defaultValue}\``;
+                    value = `\`${ast.defaultValue}\``;
                 }
             }
             else {
@@ -4816,7 +4777,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 +4791,10 @@ function parseNode(node, ctx) {
         parseTCall(node, ctx) ||
         parseTCallBlock(node) ||
         parseTEscNode(node, ctx) ||
-        parseTOutNode(node, ctx) ||
         parseTKey(node, ctx) ||
         parseTTranslation(node, ctx) ||
         parseTSlot(node, ctx) ||
+        parseTOutNode(node, ctx) ||
         parseComponent(node, ctx) ||
         parseDOMNode(node, ctx) ||
         parseTSetNode(node, ctx) ||
@@ -4907,7 +4868,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();
@@ -4916,10 +4879,10 @@ function parseDOMNode(node, ctx) {
     let model = null;
     for (let attr of nodeAttrsNames) {
         const value = node.getAttribute(attr);
-        if (attr === "t-on" || attr === "t-on-") {
-            throw new OwlError("Missing event name with t-on directive");
-        }
-        if (attr.startsWith("t-on-")) {
+        if (attr.startsWith("t-on")) {
+            if (attr === "t-on") {
+                throw new OwlError("Missing event name with t-on directive");
+            }
             on = on || {};
             on[attr.slice(5)] = value;
         }
@@ -4944,8 +4907,10 @@ function parseDOMNode(node, ctx) {
             const typeAttr = node.getAttribute("type");
             const isInput = tagName === "input";
             const isSelect = tagName === "select";
+            const isTextarea = tagName === "textarea";
             const isCheckboxInput = isInput && typeAttr === "checkbox";
             const isRadioInput = isInput && typeAttr === "radio";
+            const isOtherInput = isInput && !isCheckboxInput && !isRadioInput;
             const hasLazyMod = attr.includes(".lazy");
             const hasNumberMod = attr.includes(".number");
             const hasTrimMod = attr.includes(".trim");
@@ -4957,8 +4922,8 @@ function parseDOMNode(node, ctx) {
                 specialInitTargetAttr: isRadioInput ? "checked" : null,
                 eventType,
                 hasDynamicChildren: false,
-                shouldTrim: hasTrimMod,
-                shouldNumberize: hasNumberMod,
+                shouldTrim: hasTrimMod && (isOtherInput || isTextarea),
+                shouldNumberize: hasNumberMod && (isOtherInput || isTextarea),
             };
             if (isSelect) {
                 // don't pollute the original ctx
@@ -4969,9 +4934,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 +4946,6 @@ function parseDOMNode(node, ctx) {
             attrs[attr] = value;
         }
     }
-    if (ns) {
-        ctx.nameSpace = ns;
-    }
     const children = parseChildren(node, ctx);
     return {
         type: 2 /* DomNode */,
@@ -5027,6 +4986,9 @@ function parseTEscNode(node, ctx) {
             content: [tesc],
         };
     }
+    if (ast.type === 11 /* TComponent */) {
+        throw new OwlError("t-esc is not supported on Component nodes");
+    }
     return tesc;
 }
 // -----------------------------------------------------------------------------
@@ -5468,21 +5430,19 @@ function normalizeTIf(el) {
  *
  * @param el the element containing the tree that should be normalized
  */
-function normalizeTEscTOut(el) {
-    for (const d of ["t-esc", "t-out"]) {
-        const elements = [...el.querySelectorAll(`[${d}]`)].filter((el) => el.tagName[0] === el.tagName[0].toUpperCase() || el.hasAttribute("t-component"));
-        for (const el of elements) {
-            if (el.childNodes.length) {
-                throw new OwlError(`Cannot have ${d} on a component that already has content`);
-            }
-            const value = el.getAttribute(d);
-            el.removeAttribute(d);
-            const t = el.ownerDocument.createElement("t");
-            if (value != null) {
-                t.setAttribute(d, value);
-            }
-            el.appendChild(t);
+function normalizeTEsc(el) {
+    const elements = [...el.querySelectorAll("[t-esc]")].filter((el) => el.tagName[0] === el.tagName[0].toUpperCase() || el.hasAttribute("t-component"));
+    for (const el of elements) {
+        if (el.childNodes.length) {
+            throw new OwlError("Cannot have t-esc on a component that already has content");
         }
+        const value = el.getAttribute("t-esc");
+        el.removeAttribute("t-esc");
+        const t = el.ownerDocument.createElement("t");
+        if (value != null) {
+            t.setAttribute("t-esc", value);
+        }
+        el.appendChild(t);
     }
 }
 /**
@@ -5493,7 +5453,7 @@ function normalizeTEscTOut(el) {
  */
 function normalizeXML(el) {
     normalizeTIf(el);
-    normalizeTEscTOut(el);
+    normalizeTEsc(el);
 }
 /**
  * Parses an XML string into an XML document, throwing errors on parser errors
@@ -5542,20 +5502,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.2";
 
 // -----------------------------------------------------------------------------
 //  Scheduler
@@ -5565,18 +5516,11 @@ class Scheduler {
         this.tasks = new Set();
         this.frame = 0;
         this.delayedRenders = [];
-        this.cancelledNodes = new Set();
         this.requestAnimationFrame = Scheduler.requestAnimationFrame;
     }
     addFiber(fiber) {
         this.tasks.add(fiber.root);
     }
-    scheduleDestroy(node) {
-        this.cancelledNodes.add(node);
-        if (this.frame === 0) {
-            this.frame = this.requestAnimationFrame(() => this.processTasks());
-        }
-    }
     /**
      * Process all current tasks. This only applies to the fibers that are ready.
      * Other tasks are left unchanged.
@@ -5586,28 +5530,21 @@ class Scheduler {
             let renders = this.delayedRenders;
             this.delayedRenders = [];
             for (let f of renders) {
-                if (f.root && f.node.status !== 3 /* DESTROYED */ && f.node.fiber === f) {
+                if (f.root && f.node.status !== 2 /* DESTROYED */ && f.node.fiber === f) {
                     f.render();
                 }
             }
         }
         if (this.frame === 0) {
-            this.frame = this.requestAnimationFrame(() => this.processTasks());
-        }
-    }
-    processTasks() {
-        this.frame = 0;
-        for (let node of this.cancelledNodes) {
-            node._destroy();
-        }
-        this.cancelledNodes.clear();
-        for (let task of this.tasks) {
-            this.processFiber(task);
-        }
-        for (let task of this.tasks) {
-            if (task.node.status === 3 /* DESTROYED */) {
-                this.tasks.delete(task);
-            }
+            this.frame = this.requestAnimationFrame(() => {
+                this.frame = 0;
+                this.tasks.forEach((fiber) => this.processFiber(fiber));
+                for (let task of this.tasks) {
+                    if (task.node.status === 2 /* DESTROYED */) {
+                        this.tasks.delete(task);
+                    }
+                }
+            });
         }
     }
     processFiber(fiber) {
@@ -5620,7 +5557,7 @@ class Scheduler {
             this.tasks.delete(fiber);
             return;
         }
-        if (fiber.node.status === 3 /* DESTROYED */) {
+        if (fiber.node.status === 2 /* DESTROYED */) {
             this.tasks.delete(fiber);
             return;
         }
@@ -5644,8 +5581,11 @@ 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,
+});
 class App extends TemplateSet {
     constructor(Root, config = {}) {
         super(config);
@@ -5653,7 +5593,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 +5647,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 +5725,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 +5779,9 @@ function status(component) {
     switch (component.__owl__.status) {
         case 0 /* NEW */:
             return "new";
-        case 2 /* CANCELLED */:
-            return "cancelled";
         case 1 /* MOUNTED */:
             return "mounted";
-        case 3 /* DESTROYED */:
+        case 2 /* DESTROYED */:
             return "destroyed";
     }
 }
@@ -5900,9 +5837,8 @@ function useChildSubEnv(envExtension) {
  * will run a cleanup function before patching and before unmounting the
  * the component.
  *
- * @template T
- * @param {Effect<T>} effect the effect to run on component mount and/or patch
- * @param {()=>T} [computeDependencies=()=>[NaN]] a callback to compute
+ * @param {Effect} effect the effect to run on component mount and/or patch
+ * @param {()=>any[]} [computeDependencies=()=>[NaN]] a callback to compute
  *      dependencies that will decide if the effect needs to be cleaned up and
  *      run again. If the dependencies did not change, the effect will not run
  *      again. The default value returns an array containing only NaN because
@@ -5984,6 +5920,6 @@ TemplateSet.prototype._compileTemplate = function _compileTemplate(name, templat
 export { App, Component, EventBus, OwlError, __info__, blockDom, loadFile, markRaw, markup, mount, onError, onMounted, onPatched, onRendered, onWillDestroy, onWillPatch, onWillRender, onWillStart, onWillUnmount, onWillUpdateProps, reactive, status, toRaw, useChildSubEnv, useComponent, useEffect, useEnv, useExternalListener, useRef, useState, useSubEnv, validate, validateType, whenReady, xml };
 
 
-__info__.date = '2023-09-25T11:48:01.531Z';
-__info__.hash = '752160f';
+__info__.date = '2023-04-29T07:45:54.333Z';
+__info__.hash = 'aabb755';
 __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);
         }
     }
     

jest.config.json

@@ -0,0 +1,22 @@
+{
+    "testEnvironment": "jsdom",
+  "roots": [
+    "<rootDir>/tests"
+  ],
+  "setupFiles": [
+    "./tests/mocks/mockEventTarget.js"
+  ],
+  "transform": {
+    "^.+\\.ts?$": "ts-jest"
+  },
+  "verbose": false,
+  "testRegex": "(/tests/.*(test|spec))\\.ts?$",
+  "moduleFileExtensions": [
+    "ts",
+    "tsx",
+    "js",
+    "jsx",
+    "json",
+    "node"
+  ]
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.2.6",
+  "version": "2.1.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1048,6 +1048,31 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/chrome": {
+      "version": "0.0.114",
+      "resolved": "https://registry.npmjs.org/@types/chrome/-/chrome-0.0.114.tgz",
+      "integrity": "sha512-i7qRr74IrxHtbnrZSKUuP5Uvd5EOKwlwJq/yp7+yTPihOXnPhNQO4Z5bqb1XTnrjdbUKEJicaVVbhcgtRijmLA==",
+      "dev": true,
+      "requires": {
+        "@types/filesystem": "*",
+        "@types/har-format": "*"
+      }
+    },
+    "@types/filesystem": {
+      "version": "0.0.32",
+      "resolved": "https://registry.npmjs.org/@types/filesystem/-/filesystem-0.0.32.tgz",
+      "integrity": "sha512-Yuf4jR5YYMR2DVgwuCiP11s0xuVRyPKmz8vo6HBY3CGdeMj8af93CFZX+T82+VD1+UqHOxTq31lO7MI7lepBtQ==",
+      "dev": true,
+      "requires": {
+        "@types/filewriter": "*"
+      }
+    },
+    "@types/filewriter": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/filewriter/-/filewriter-0.0.29.tgz",
+      "integrity": "sha512-BsPXH/irW0ht0Ji6iw/jJaK8Lj3FJemon2gvEqHKpCdDCeemHa+rI3WBGq5z7cDMZgoLjY40oninGxqk+8NzNQ==",
+      "dev": true
+    },
     "@types/fs-extra": {
       "version": "8.1.2",
       "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-8.1.2.tgz",
@@ -1076,6 +1101,12 @@
         "@types/node": "*"
       }
     },
+    "@types/har-format": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@types/har-format/-/har-format-1.2.11.tgz",
+      "integrity": "sha512-T232/TneofqK30AD1LRrrf8KnjLvzrjWDp7eWST5KoiSzrBfRsLrWDPk4STQPW4NZG6v2MltnduBVmakbZOBIQ==",
+      "dev": true
+    },
     "@types/istanbul-lib-coverage": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
@@ -3338,6 +3369,15 @@
         }
       }
     },
+    "jest-chrome": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/jest-chrome/-/jest-chrome-0.8.0.tgz",
+      "integrity": "sha512-39RR1GT9nI4e4jsuH1vIf4l5ApxxkcstjGJr+GsOURL8f4Db0UlbRnsZaM+ZRniaGtokqklUH5VFKGZZ6YztUg==",
+      "dev": true,
+      "requires": {
+        "@types/chrome": "^0.0.114"
+      }
+    },
     "jest-circus": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-27.5.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.2.6",
+  "version": "2.1.3",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "module": "dist/owl.es.js",
@@ -21,15 +21,19 @@
     "dev:devtools-firefox": "npm run build:devtools -- --config-browser=firefox",
     "build:devtools-chrome": "npm run dev:devtools-chrome -- --config-env=production",
     "build:devtools-firefox": "npm run dev:devtools-firefox -- --config-env=production",
-    "test": "jest",
-    "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --watch --testTimeout=5000000",
-    "test:watch": "jest --watch",
+    "test-owl": "jest",
+    "test-owl:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --watch --testTimeout=5000000",
+    "test-owl:watch": "jest --watch",
+    "test-devtools": "npm run build:devtools-chrome && jest --config=tools/devtools/tests/jest.config.json",
+    "test-devtools:debug": "npm run build:devtools-chrome && node --inspect-brk node_modules/.bin/jest --config=tools/devtools/tests/jest.config.json --runInBand --watch --testTimeout=5000000",
+    "test-devtools:watch": "jest --config=tools/devtools/tests/jest.config.json --watch",
+    "test": "npm run test-owl && npm run test-devtools",
     "playground:serve": "python3 tools/playground_server.py || python tools/playground_server.py",
     "playground": "npm run build && npm run playground:serve",
     "preplayground:watch": "npm run build",
     "playground:watch": "npm-run-all  --parallel playground:serve \"build:* -- --watch\"",
     "prettier": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,doc/**/*.md,tools/devtools/**/*.js} --write",
-    "check-formatting": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,doc/**/*.md,tools/devtools/**/*.js} --check",
+    "check-formatting": "npm run prettier -- --check",
     "lint": "eslint src/**/*.ts tests/**/*.ts",
     "release": "node tools/release.js",
     "compile_templates": "node tools/compile_xml.js"
@@ -55,13 +59,13 @@
     "git-rev-sync": "^3.0.2",
     "github-api": "^3.3.0",
     "jest": "^27.1.0",
+    "jest-chrome": "^0.8.0",
     "jest-diff": "^27.3.1",
     "jest-environment-jsdom": "^27.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "2.4.1",
     "rollup": "^2.56.3",
     "rollup-plugin-copy": "^3.3.0",
-    "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-execute": "^1.1.1",
     "rollup-plugin-string": "^3.0.0",
@@ -71,29 +75,6 @@
     "ts-jest": "^27.0.5",
     "typescript": "4.5.2"
   },
-  "jest": {
-    "testEnvironment": "jsdom",
-    "roots": [
-      "<rootDir>/src",
-      "<rootDir>/tests"
-    ],
-    "setupFiles": [
-      "./tests/mocks/mockEventTarget.js"
-    ],
-    "transform": {
-      "^.+\\.ts?$": "ts-jest"
-    },
-    "verbose": false,
-    "testRegex": "(/tests/.*(test|spec))\\.ts?$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ]
-  },
   "prettier": {
     "printWidth": 100,
     "endOfLine": "auto"

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");
 
@@ -364,8 +365,10 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
       const typeAttr = node.getAttribute("type");
       const isInput = tagName === "input";
       const isSelect = tagName === "select";
+      const isTextarea = tagName === "textarea";
       const isCheckboxInput = isInput && typeAttr === "checkbox";
       const isRadioInput = isInput && typeAttr === "radio";
+      const isOtherInput = isInput && !isCheckboxInput && !isRadioInput;
       const hasLazyMod = attr.includes(".lazy");
       const hasNumberMod = attr.includes(".number");
       const hasTrimMod = attr.includes(".trim");
@@ -378,8 +381,8 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
         specialInitTargetAttr: isRadioInput ? "checked" : null,
         eventType,
         hasDynamicChildren: false,
-        shouldTrim: hasTrimMod,
-        shouldNumberize: hasNumberMod,
+        shouldTrim: hasTrimMod && (isOtherInput || isTextarea),
+        shouldNumberize: hasNumberMod && (isOtherInput || isTextarea),
       };
       if (isSelect) {
         // don't pollute the original ctx
@@ -388,8 +391,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 +403,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 +446,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 +943,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 +969,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";
@@ -144,7 +144,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 +165,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;

src/runtime/component_node.ts

@@ -1,8 +1,7 @@
 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";
@@ -146,9 +145,6 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
   }
 
   async render(deep: boolean) {
-    if (this.status >= STATUS.CANCELLED) {
-      return;
-    }
     let current = this.fiber;
     if (current && (current.root!.locked || (current as any).bdom === true)) {
       await Promise.resolve();
@@ -175,7 +171,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
 
     this.app.scheduler.addFiber(fiber);
     await Promise.resolve();
-    if (this.status >= STATUS.CANCELLED) {
+    if (this.status === STATUS.DESTROYED) {
       return;
     }
     // We only want to actually render the component if the following two
@@ -194,20 +190,6 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     }
   }
 
-  cancel() {
-    this._cancel();
-    delete this.parent!.children[this.parentKey!];
-    this.app.scheduler.scheduleDestroy(this);
-  }
-
-  _cancel() {
-    this.status = STATUS.CANCELLED;
-    const children = this.children;
-    for (let childKey in children) {
-      children[childKey]._cancel();
-    }
-  }
-
   destroy() {
     let shouldRemove = this.status === STATUS.MOUNTED;
     this._destroy();

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();
@@ -47,19 +51,17 @@ export function handleError(params: ErrorParams) {
     );
   }
   const node = "node" in params ? params.node : params.fiber.node;
-  const fiber = "fiber" in params ? params.fiber : node.fiber;
+  const fiber = "fiber" in params ? params.fiber : node.fiber!;
 
-  if (fiber) {
-    // resets the fibers on components if possible. This is important so that
-    // new renderings can be properly included in the initial one, if any.
-    let current: Fiber | null = fiber;
-    do {
-      current.node.fiber = current;
-      current = current.parent;
-    } while (current);
+  // resets the fibers on components if possible. This is important so that
+  // new renderings can be properly included in the initial one, if any.
+  let current: Fiber | null = fiber;
+  do {
+    current.node.fiber = current;
+    current = current.parent;
+  } while (current);
 
-    fibersInError.set(fiber.root!, error);
-  }
+  fibersInError.set(fiber.root!, error);
 
   const handled = _handleError(node, error);
   if (!handled) {

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

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/scheduler.ts

@@ -1,4 +1,3 @@
-import type { ComponentNode } from "./component_node";
 import { fibersInError } from "./error_handling";
 import { Fiber, RootFiber } from "./fibers";
 import { STATUS } from "./status";
@@ -15,7 +14,6 @@ export class Scheduler {
   requestAnimationFrame: Window["requestAnimationFrame"];
   frame: number = 0;
   delayedRenders: Fiber[] = [];
-  cancelledNodes: Set<ComponentNode> = new Set();
 
   constructor() {
     this.requestAnimationFrame = Scheduler.requestAnimationFrame;
@@ -25,13 +23,6 @@ export class Scheduler {
     this.tasks.add(fiber.root!);
   }
 
-  scheduleDestroy(node: ComponentNode) {
-    this.cancelledNodes.add(node);
-    if (this.frame === 0) {
-      this.frame = this.requestAnimationFrame(() => this.processTasks());
-    }
-  }
-
   /**
    * Process all current tasks. This only applies to the fibers that are ready.
    * Other tasks are left unchanged.
@@ -48,23 +39,15 @@ export class Scheduler {
     }
 
     if (this.frame === 0) {
-      this.frame = this.requestAnimationFrame(() => this.processTasks());
-    }
-  }
-
-  processTasks() {
-    this.frame = 0;
-    for (let node of this.cancelledNodes) {
-      node._destroy();
-    }
-    this.cancelledNodes.clear();
-    for (let task of this.tasks) {
-      this.processFiber(task);
-    }
-    for (let task of this.tasks) {
-      if (task.node.status === STATUS.DESTROYED) {
-        this.tasks.delete(task);
-      }
+      this.frame = this.requestAnimationFrame(() => {
+        this.frame = 0;
+        this.tasks.forEach((fiber) => this.processFiber(fiber));
+        for (let task of this.tasks) {
+          if (task.node.status === STATUS.DESTROYED) {
+            this.tasks.delete(task);
+          }
+        }
+      });
     }
   }
 

src/runtime/status.ts

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

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;
@@ -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;
 
 /**
@@ -9,13 +9,20 @@ export type Callback = () => void;
  * @returns a batched version of the original callback
  */
 export function batched(callback: Callback): Callback {
-  let scheduled = false;
-  return async (...args) => {
-    if (!scheduled) {
-      scheduled = true;
-      await Promise.resolve();
-      scheduled = false;
-      callback(...args);
+  let called = false;
+  return async () => {
+    // This await blocks all calls to the callback here, then releases them sequentially
+    // in the next microtick. This line decides the granularity of the batch.
+    await Promise.resolve();
+    if (!called) {
+      called = true;
+      // wait for all calls in this microtick to fall through before resetting "called"
+      // so that only the first call to the batched function calls the original callback.
+      // Schedule this before calling the callback so that calls to the batched function
+      // within the callback will proceed only after resetting called to false, and have
+      // a chance to execute the callback again
+      Promise.resolve().then(() => (called = false));
+      callback();
     }
   };
 }

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.3";

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 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(\`B\`);
-  }
-}"
-`;
-
 exports[`app can configure an app with props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/app/app.test.ts

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

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

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);
@@ -212,73 +212,6 @@ exports[`changing state before first render does not trigger a render 1`] = `
 }"
 `;
 
-exports[`component destroyed just after render 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, []);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, this, null);
-  }
-}"
-`;
-
-exports[`component destroyed just after render 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`B\`);
-    const b3 = text(ctx['state'].value);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`components are not destroyed between animation frame 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, []);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2, b3;
-    b2 = text(\`A\`);
-    if (ctx['state'].flag) {
-      b3 = comp1({}, key + \`__1\`, node, this, null);
-    }
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`components are not destroyed between animation frame 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`C\`, true, false, false, []);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`B\`);
-    const b3 = comp1({}, key + \`__1\`, node, this, null);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`components are not destroyed between animation frame 3`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(\`C\`);
-  }
-}"
-`;
-
 exports[`concurrent renderings scenario 1 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -831,7 +764,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 +911,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);
@@ -1012,7 +945,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);
     }
@@ -1061,7 +994,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);
@@ -1109,7 +1042,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);
@@ -1421,7 +1354,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 +1447,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 +1505,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 +1538,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);
@@ -1646,7 +1579,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);
@@ -1846,7 +1779,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);
@@ -1901,7 +1834,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);
@@ -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);
@@ -174,7 +174,7 @@ exports[`lifecycle hooks destroy new children before being mountged 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2, b3, b4;
+    let b2,b3,b4;
     b2 = text(\`before\`);
     if (ctx['state'].flag) {
       b3 = comp1({}, key + \`__1\`, node, this, null);
@@ -826,7 +826,7 @@ exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is
   let block3 = createBlock(\`<div/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2, b3;
+    let b2,b3;
     if (ctx['state'].ok) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
     } else {

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_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];
@@ -468,36 +468,6 @@ exports[`t-model directive t-model on select with static options 1`] = `
 }"
 `;
 
-exports[`t-model directive t-model with dynamic number values on select options in foreach 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { toNumber, prepareList, withKey } = helpers;
-  
-  let block1 = createBlock(\`<select block-handler-0=\\"change\\"><block-child-0/></select>\`);
-  let block3 = createBlock(\`<option block-attribute-0=\\"value\\" block-attribute-1=\\"selected\\"><block-text-2/></option>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const bExpr1 = ctx['state'];
-    const expr1 = 'value';
-    const bValue1 = bExpr1[expr1];
-    let hdlr1 = [(ev) => { bExpr1[expr1] = toNumber(ev.target.value); }];
-    ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].options);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`o\`] = k_block2[i1];
-      const key1 = ctx['o'].value;
-      let attr1 = ctx['o'].value;
-      let attr2 = bValue1 === ctx['o'].value;
-      let txt1 = ctx['o'].value;
-      c_block2[i1] = withKey(block3([attr1, attr2, txt1]), key1);
-    }
-    const b2 = list(c_block2);
-    return block1([hdlr1], [b2]);
-  }
-}"
-`;
-
 exports[`t-model directive t-model with dynamic values on select options -- 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -586,7 +556,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 +583,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 +610,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

@@ -1024,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/concurrency.test.ts

@@ -115,7 +115,13 @@ test("destroying/recreating a subwidget with different props (if start is not ov
   await nextMicroTick();
   expect(n).toBe(2);
 
-  expect(["W:willRender", "Child:setup", "Child:willStart", "W:rendered"]).toBeLogged();
+  expect([
+    "Child:willDestroy",
+    "W:willRender",
+    "Child:setup",
+    "Child:willStart",
+    "W:rendered",
+  ]).toBeLogged();
 
   def.resolve();
   await nextTick();
@@ -124,7 +130,6 @@ test("destroying/recreating a subwidget with different props (if start is not ov
   expect([
     "Child:willRender",
     "Child:rendered",
-    "Child:willDestroy",
     "W:willPatch",
     "Child:mounted",
     "W:patched",
@@ -173,13 +178,13 @@ test("destroying/recreating a subcomponent, other scenario", async () => {
     "Child:setup",
     "Child:willStart",
     "Parent:rendered",
+    "Child:willDestroy",
     "Parent:willRender",
     "Child:setup",
     "Child:willStart",
     "Parent:rendered",
     "Child:willRender",
     "Child:rendered",
-    "Child:willDestroy",
     "Parent:willPatch",
     "Child:mounted",
     "Parent:patched",
@@ -246,13 +251,13 @@ test("creating two async components, scenario 1", async () => {
   await nextTick();
   expect(fixture.innerHTML).toBe("");
   expect([
+    "ChildA:willDestroy",
     "Parent:willRender",
     "ChildA:setup",
     "ChildA:willStart",
     "ChildB:setup",
     "ChildB:willStart",
     "Parent:rendered",
-    "ChildA:willDestroy",
   ]).toBeLogged();
 
   defB.resolve();
@@ -698,13 +703,13 @@ test("rendering component again in next microtick", async () => {
     "Child:setup",
     "Child:willStart",
     "Parent:rendered",
+    "Child:willDestroy",
     "Parent:willRender",
     "Child:setup",
     "Child:willStart",
     "Parent:rendered",
     "Child:willRender",
     "Child:rendered",
-    "Child:willDestroy",
     "Parent:willPatch",
     "Child:mounted",
     "Parent:patched",
@@ -1727,9 +1732,9 @@ test("concurrent renderings scenario 10", async () => {
   expect(fixture.innerHTML).toBe("<div><p></p></div>");
   expect([
     "ComponentA:willRender",
+    "ComponentC:willDestroy",
     "ComponentB:willUpdateProps",
     "ComponentA:rendered",
-    "ComponentC:willDestroy",
   ]).toBeLogged();
 
   defB.resolve();
@@ -2277,6 +2282,7 @@ test("concurrent renderings scenario 16", async () => {
     "D:setup",
     "D:willStart",
     "C:rendered",
+    "D:willDestroy",
     "B:willRender",
     "C:willUpdateProps",
     "B:rendered",
@@ -2284,7 +2290,6 @@ test("concurrent renderings scenario 16", async () => {
     "D:setup",
     "D:willStart",
     "C:rendered",
-    "D:willDestroy",
   ]).toBeLogged();
 
   // at this point, C rendering is still pending, and nothing should have been
@@ -2992,11 +2997,11 @@ test("t-key on dom node having a component", async () => {
 
   expect(fixture.innerHTML).toBe("<div>3</div>");
   expect([
+    "Child (2):willDestroy",
     "Child (3):setup",
     "Child (3):willStart",
     "Child (3):willRender",
     "Child (3):rendered",
-    "Child (2):willDestroy",
     "Child (1):willUnmount",
     "Child (1):willDestroy",
     "Child (3):mounted",
@@ -3050,11 +3055,11 @@ test("t-key on dynamic async component (toggler is never patched)", async () =>
 
   expect(fixture.innerHTML).toBe("<div>3</div>");
   expect([
+    "Child (2):willDestroy",
     "Child (3):setup",
     "Child (3):willStart",
     "Child (3):willRender",
     "Child (3):rendered",
-    "Child (2):willDestroy",
     "Child (1):willUnmount",
     "Child (1):willDestroy",
     "Child (3):mounted",
@@ -3109,11 +3114,11 @@ test("t-foreach with dynamic async component", async () => {
 
   expect(fixture.innerHTML).toBe("<div>3</div>");
   expect([
+    "Child (2):willDestroy",
     "Child (3):setup",
     "Child (3):willStart",
     "Child (3):willRender",
     "Child (3):rendered",
-    "Child (2):willDestroy",
     "Child (1):willUnmount",
     "Child (1):willDestroy",
     "Child (3):mounted",
@@ -3796,7 +3801,7 @@ test("destroyed component causes other soon to be destroyed component to rerende
     static template = xml`<t t-esc="state.val + props.value"/>`;
     state = useState({ val: 0 });
     setup() {
-      c = c || this;
+      c = this;
       useLogLifecycle();
     }
   }
@@ -3841,6 +3846,8 @@ test("destroyed component causes other soon to be destroyed component to rerende
   parent.state.valueB = 2;
   await nextTick();
   expect([
+    "B:willDestroy",
+    "C:willDestroy",
     "A:willRender",
     "B:setup",
     "B:willStart",
@@ -3851,8 +3858,6 @@ test("destroyed component causes other soon to be destroyed component to rerende
     "B:rendered",
     "C:willRender",
     "C:rendered",
-    "B:willDestroy",
-    "C:willDestroy",
     "A:willPatch",
     "C:mounted",
     "B:mounted",
@@ -4195,116 +4200,6 @@ test("delayed render is not cancelled by upcoming render", async () => {
   ]).toBeLogged();
 });
 
-test("components are not destroyed between animation frame", async () => {
-  const def = makeDeferred();
-  class C extends Component {
-    static template = xml`C`;
-    setup() {
-      useLogLifecycle();
-    }
-  }
-  class B extends Component {
-    static template = xml`B<C/>`;
-    static components = { C };
-    setup() {
-      useLogLifecycle();
-      onWillStart(() => {
-        return def;
-      });
-    }
-  }
-  class A extends Component {
-    static template = xml`A<B t-if="state.flag"/>`;
-    static components = { B };
-
-    state = useState({ flag: false });
-    setup() {
-      useLogLifecycle();
-    }
-  }
-  const a = await mount(A, fixture);
-  expect(fixture.innerHTML).toBe("A");
-  expect(["A:setup", "A:willStart", "A:willRender", "A:rendered", "A:mounted"]).toBeLogged();
-
-  // turn the flag on, this will render A and stops at B because of def
-  a.state.flag = true;
-  await nextTick();
-  expect(["A:willRender", "B:setup", "B:willStart", "A:rendered"]).toBeLogged();
-
-  // force a render of A
-  //  => owl will need to create a new B component
-  //  => initial B component will be cancelled
-  a.render();
-  await nextMicroTick();
-  expect([
-    // note that B is not destroyed here. It is cancelled instead
-    "A:willRender",
-    "B:setup",
-    "B:willStart",
-    "A:rendered",
-  ]).toBeLogged();
-
-  // resolve def, so B render is unblocked
-  def.resolve();
-  await nextTick();
-  expect([
-    "B:willRender",
-    "C:setup",
-    "C:willStart",
-    "B:rendered",
-    "C:willRender",
-    "C:rendered",
-    // animation frame callback starts here
-    "B:willDestroy", // B is destroyed here
-    "A:willPatch",
-    "C:mounted",
-    "B:mounted",
-    "A:patched",
-  ]).toBeLogged();
-});
-
-test("component destroyed just after render", async () => {
-  let stateB: any;
-
-  class B extends Component {
-    static template = xml`B<t t-esc="state.value"/>`;
-    state = useState({ value: 1 });
-    setup() {
-      stateB = this.state;
-      useLogLifecycle();
-    }
-  }
-  class A extends Component {
-    static template = xml`<B/>`;
-    static components = { B };
-    setup() {
-      useLogLifecycle();
-    }
-  }
-  const a = await mount(A, fixture);
-  expect(fixture.innerHTML).toBe("B1");
-  expect([
-    "A:setup",
-    "A:willStart",
-    "A:willRender",
-    "B:setup",
-    "B:willStart",
-    "A:rendered",
-    "B:willRender",
-    "B:rendered",
-    "B:mounted",
-    "A:mounted",
-  ]).toBeLogged();
-
-  stateB!.value++; // force a render of B
-  await nextMicroTick(); // wait for B render to actually start
-  a.__owl__.app.destroy();
-  expect(["A:willUnmount", "B:willUnmount", "B:willDestroy", "A:willDestroy"]).toBeLogged();
-  await nextTick();
-  // check that B was not rendered after being destroyed
-  expect([]).toBeLogged();
-});
-
 //   test.skip("components with shouldUpdate=false", async () => {
 //     const state = { p: 1, cc: 10 };
 

tests/components/error_handling.test.ts

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

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";
 

tests/components/t_model.test.ts

@@ -626,39 +626,6 @@ describe("t-model directive", () => {
     expect(fixture.querySelector("select")!.value).toEqual("b");
   });
 
-  test("t-model with dynamic number values on select options in foreach", async () => {
-    class Test extends Component {
-      static template = xml`
-          <select t-model.number="state.value">
-            <t t-foreach="state.options" t-as="o" t-key="o.value">
-                <option t-att-value="o.value" t-esc="o.value"/>
-            </t>
-          </select>
-      `;
-      state: any;
-      setup() {
-        this.state = useState({
-          value: 2,
-          options: [{ value: 1 }, { value: 2 }, { value: 3 }],
-        });
-      }
-    }
-
-    const comp = await mount(Test, fixture);
-    // check that we have a value of 2 selected
-    expect(fixture.querySelector("select")!.value).toEqual("2");
-    expect(comp.state.value).toBe(2);
-
-    // emulate a click on the option=3 element
-    fixture.querySelectorAll("option")[2].selected = true;
-    fixture.querySelector("select")!.dispatchEvent(new Event("change"));
-
-    await nextTick();
-    // check that we have now selected the number 3 (and not the string)
-    expect(fixture.querySelector("select")!.value).toEqual("3");
-    expect(comp.state.value).toBe(3);
-  });
-
   test("t-model is applied before t-on-input", async () => {
     expect.assertions(3);
     class SomeComponent extends Component {

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;
 

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,
@@ -988,7 +988,7 @@ describe("Portal: Props validation", () => {
       error = e as Error;
     }
     expect(error!).toBeDefined();
-    expect(error!.message).toContain(`Unexpected token ','`);
+    expect(error!.message).toBe(`Unexpected token ','`);
   });
 
   test("target must be a valid selector", async () => {

tests/reactivity.test.ts

@@ -1292,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 () => {
@@ -1491,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", () => {
@@ -1522,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 () => {

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/rollup.config.js

@@ -1,7 +1,6 @@
 import terser from "rollup-plugin-terser";
 import copy from "rollup-plugin-copy";
 import execute from "rollup-plugin-execute";
-import del from "rollup-plugin-delete";
 import { string } from "rollup-plugin-string";
 
 const isWindows = process.platform === "win32";
@@ -37,12 +36,12 @@ export default ({ "config-browser": browser, "config-env": env }) => {
     },
   ];
 
-  function generateRule(input, format = "esm") {
+  function generateRule(input, plugins = []) {
     return {
-      input: input,
+      input,
       output: [
         {
-          format: format,
+          format: "esm",
           file: input.replace("tools/devtools/src", "dist/devtools"),
         },
       ],
@@ -51,6 +50,7 @@ export default ({ "config-browser": browser, "config-env": env }) => {
           include: "**/page_scripts/owl_devtools_global_hook.js",
         }),
         isProduction && terser.terser(),
+        ...plugins,
       ],
     };
   }
@@ -58,7 +58,6 @@ export default ({ "config-browser": browser, "config-env": env }) => {
   commands[1] = isWindows
     ? "npm run compile_templates -- tools\\devtools\\src && move templates.js tools\\devtools\\assets\\templates.js"
     : "npm run compile_templates -- tools/devtools/src && mv templates.js tools/devtools/assets/templates.js";
-  const firstRule = generateRule("tools/devtools/src/page_scripts/owl_devtools_global_hook.js");
   if (isProduction) {
     commands[0] = isWindows
       ? "npm run build && copy dist\\owl.iife.js tools\\devtools\\assets\\owl.js && npm run build:compiler"
@@ -68,19 +67,16 @@ export default ({ "config-browser": browser, "config-env": env }) => {
       ? "copy dist\\owl.iife.js tools\\devtools\\assets\\owl.js"
       : "cp dist/owl.iife.js tools/devtools/assets/owl.js";
   }
-  firstRule.plugins.push(execute(commands, true));
-  const secondRule = generateRule("tools/devtools/src/content.js");
-  secondRule.plugins.push(copy({ targets: filesToMove }));
-  const lastRule = generateRule("tools/devtools/src/background.js");
-  lastRule.plugins.push(del({ targets: "tools/devtools/assets/*.js" }));
 
   return [
-    firstRule,
-    secondRule,
+    generateRule("tools/devtools/src/page_scripts/owl_devtools_global_hook.js", [
+      execute(commands, true),
+    ]),
+    generateRule("tools/devtools/src/content.js", [copy({ targets: filesToMove })]),
     generateRule("tools/devtools/src/devtools_app/devtools.js"),
     generateRule("tools/devtools/src/utils.js"),
     generateRule("tools/devtools/src/devtools_app/devtools_panel.js"),
     generateRule("tools/devtools/src/popup_app/popup.js"),
-    lastRule,
+    generateRule("tools/devtools/src/background.js"),
   ];
 };

tools/devtools/src/devtools_app/devtools_panel.js

@@ -3,8 +3,10 @@
 import { DevtoolsWindow } from "./devtools_window/devtools_window";
 const { mount } = owl;
 import { templates } from "../../assets/templates.js";
+import { createStore } from "./store/store";
 
 for (const template in templates) {
   owl.App.registerTemplate(template, templates[template]);
 }
+createStore();
 mount(DevtoolsWindow, document.body, { dev: true });

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

@@ -47,7 +47,7 @@ export class ObjectTreeElement extends Component {
 
   classFor(object) {
     // Prototype items will be dyed down to appear less important
-    if (object.path.some((item) => item?.type === "prototype") && !object.keepLit) {
+    if (object.path.some((item) => item?.type === "prototype")) {
       return "attenuate";
     }
     // Same for subscription items which are not present in the keys while the keys will be bold

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

@@ -102,7 +102,7 @@ export const store = reactive({
     if (IS_FIREFOX) {
       await evalInWindow("window.$0 = $0;", this.activeFrame);
     }
-    const [apps, details] = await evalFunctionInWindow(
+    const [apps, component] = await evalFunctionInWindow(
       "getComponentsTree",
       fromOld && this.activeComponent
         ? [this.activeComponent.path, this.apps, this.activeComponent]
@@ -113,8 +113,7 @@ export const store = reactive({
     if (!fromOld && this.settings.expandByDefault) {
       this.apps.forEach((tree) => expandNodes(tree, true));
     }
-    keepEnvLit(details);
-    this.activeComponent = details;
+    this.activeComponent = component;
   },
 
   // Select a component by retrieving its details from the page based on its path
@@ -151,11 +150,9 @@ export const store = reactive({
       [component.path],
       this.activeFrame
     );
-    if (!details) {
+    this.activeComponent = details;
+    if (!this.activeComponent) {
       await this.loadComponentsTree(false);
-    } else {
-      keepEnvLit(details);
-      this.activeComponent = details;
     }
     if (this.page !== "ComponentsTab") {
       this.switchTab("ComponentsTab");
@@ -628,9 +625,7 @@ export function useStore() {
   return useState(store);
 }
 
-init();
-
-async function init() {
+export async function createStore() {
   store.devtoolsId = await getTabURL();
 
   evalFunctionInWindow("initDevtools", []);
@@ -890,31 +885,6 @@ function expandNodes(node, blacklist = false) {
   }
 }
 
-// This function transforms the env part of the details such that all env keys are not
-// greyed out in the UI at their first occurence
-function keepEnvLit(details) {
-  let alreadyMet = new Set();
-  for (let i = 0; i < details.env.children.length; i++) {
-    if (i < details.env.children.length - 1) {
-      alreadyMet.add(details.env.children[i].name);
-    } else {
-      let lastElement = details.env.children[i];
-      while (lastElement.children.at(-1)?.name === "[[Prototype]]") {
-        for (const [index, child] of lastElement.children.entries()) {
-          if (index < lastElement.children.length - 1) {
-            if (!alreadyMet.has(child.name)) {
-              child.keepLit = true;
-              alreadyMet.add(child.name);
-            }
-          } else {
-            lastElement = child;
-          }
-        }
-      }
-    }
-  }
-}
-
 // Fold the node given in entry and all of its children
 function foldNodes(node) {
   node.toggled = false;

tools/devtools/src/page_scripts/owl_devtools_global_hook.js

@@ -33,11 +33,14 @@
                  * This process may seem long and indirect but is necessary. This applies to all window.top.postMessage methods in this file.
                  * More information in the docs: https://developer.chrome.com/docs/extensions/mv3/devtools/#evaluated-scripts-to-devtools
                  */
-                window.top.postMessage({
-                  source: "owl-devtools",
-                  type: "NewIFrame",
-                  data: addedNode.contentDocument.location.href,
-                });
+                window.top.postMessage(
+                  {
+                    source: "owl-devtools",
+                    type: "NewIFrame",
+                    data: addedNode.contentDocument.location.href,
+                  },
+                  "/"
+                );
               }
             }
           });
@@ -117,15 +120,6 @@
             length += element.length;
             result.push(element);
           }
-          for (const key of Object.getOwnPropertySymbols(obj)) {
-            if (length > 25) {
-              result.push("...");
-              break;
-            }
-            const element = key.toString() + ": " + this.serializeItem(obj[key]);
-            length += element.length;
-            result.push(element);
-          }
           return "{" + result.join(", ") + "}";
         },
         map(obj) {
@@ -183,18 +177,24 @@
           original_Complete.call(this, ...arguments);
           const path = self.getComponentPath(this.node);
           //Add a functionnality to the complete function which sends a message to the window every time it is triggered.
-          window.top.postMessage({
-            source: "owl-devtools",
-            type: "Complete",
-            data: path,
-            origin: { frame: self.frame },
-          });
-          if (self.recordEvents) {
-            window.top.postMessage({
+          window.top.postMessage(
+            {
               source: "owl-devtools",
-              type: "Event",
-              data: self.eventsBatch,
-            });
+              type: "Complete",
+              data: path,
+              origin: { frame: self.frame },
+            },
+            "/"
+          );
+          if (self.recordEvents) {
+            window.top.postMessage(
+              {
+                source: "owl-devtools",
+                type: "Event",
+                data: self.eventsBatch,
+              },
+              "/"
+            );
             self.eventsBatch = [];
           }
         };
@@ -207,17 +207,23 @@
       const originalDelete = this.apps.delete;
       this.apps.add = function () {
         originalAdd.call(this, ...arguments);
-        window.top.postMessage({
-          source: "owl-devtools",
-          type: "RefreshApps",
-        });
+        window.top.postMessage(
+          {
+            source: "owl-devtools",
+            type: "RefreshApps",
+          },
+          "/"
+        );
       };
       this.apps.delete = function () {
         originalDelete.call(this, ...arguments);
-        window.top.postMessage({
-          source: "owl-devtools",
-          type: "RefreshApps",
-        });
+        window.top.postMessage(
+          {
+            source: "owl-devtools",
+            type: "RefreshApps",
+          },
+          "/"
+        );
       };
     }
 
@@ -611,11 +617,14 @@
         const path = this.getElementPath(target);
         this.highlightComponent(path);
         this.currentSelectedElement = target;
-        window.top.postMessage({
-          source: "owl-devtools",
-          type: "SelectElement",
-          data: path,
-        });
+        window.top.postMessage(
+          {
+            source: "owl-devtools",
+            type: "SelectElement",
+            data: path,
+          },
+          "/"
+        );
       }
     };
 
@@ -639,10 +648,13 @@
       document.removeEventListener("mouseover", this.HTMLSelector, { capture: true });
       document.removeEventListener("click", this.disableHTMLSelector, { capture: true });
       document.removeEventListener("mouseout", this.removeHighlights, { capture: true });
-      window.top.postMessage({
-        source: "owl-devtools",
-        type: "StopSelector",
-      });
+      window.top.postMessage(
+        {
+          source: "owl-devtools",
+          type: "StopSelector",
+        },
+        "/"
+      );
     };
 
     // Returns the object specified by the path starting from the topParent object
@@ -748,9 +760,6 @@
           child.contentType = "object";
           child.content = this.serializer.serializeItem(Object.getPrototypeOf(parentObj), true);
           child.hasChildren = true;
-          if (!oldTree && type === "env") {
-            child.toggled = true;
-          }
           break;
         case "set entries":
         case "map entries":
@@ -827,8 +836,7 @@
               break;
             case obj instanceof Object:
               child.contentType = "object";
-              child.hasChildren =
-                Object.keys(obj).length || Object.getOwnPropertySymbols(obj).length;
+              child.hasChildren = Object.keys(obj).length > 0;
               break;
             default:
               child.contentType = typeof obj;
@@ -893,7 +901,7 @@
       const children = [];
       depth = depth + 1;
       let obj = this.getObjectProperty(path);
-      let oldBranch = oldTree && this.getObjectInOldTree(oldTree, path, objType);
+      let oldBranch = this.getObjectInOldTree(oldTree, path, objType);
       if (!obj) {
         return [];
       }
@@ -908,7 +916,7 @@
             depth,
             objType,
             path,
-            oldBranch?.children[0],
+            oldBranch.children[0],
             oldTree
           );
           children.push(mapKey);
@@ -918,7 +926,7 @@
             depth,
             objType,
             path,
-            oldBranch?.children[1],
+            oldBranch.children[1],
             oldTree
           );
           children.push(mapValue);
@@ -929,7 +937,7 @@
             depth,
             objType,
             path,
-            oldBranch?.children[0],
+            oldBranch.children[0],
             oldTree
           );
           children.push(setValue);
@@ -950,7 +958,7 @@
                 depth,
                 objType,
                 path,
-                oldBranch?.children[index],
+                oldBranch.children[index],
                 oldTree
               );
               if (child) {
@@ -965,7 +973,7 @@
                 depth,
                 objType,
                 path,
-                oldBranch?.children[index],
+                oldBranch.children[index],
                 oldTree
               );
               if (child) {
@@ -982,7 +990,7 @@
             depth,
             objType,
             path,
-            oldBranch?.children[index],
+            oldBranch.children[index],
             oldTree
           );
           if (entries) {
@@ -996,7 +1004,7 @@
               depth,
               objType,
               path,
-              oldBranch?.children[index],
+              oldBranch.children[index],
               oldTree
             );
             if (child) {
@@ -1031,7 +1039,7 @@
               depth,
               objType,
               path,
-              oldBranch?.children[index],
+              oldBranch.children[index],
               oldTree
             );
             if (child) children.push(child);
@@ -1064,14 +1072,14 @@
         });
         proto = Object.getPrototypeOf(proto);
       }
-      if (obj.__proto__) {
+      if (!(obj.constructor.name === "Object")) {
         prototype = this.serializeObjectChild(
           obj,
           { type: "prototype", childIndex: children.length },
           depth,
           objType,
           path,
-          oldBranch?.children.at(-1),
+          oldBranch.children.at(-1),
           oldTree
         );
         children.push(prototype);
@@ -1396,7 +1404,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 +1423,7 @@
         }
       }
       if (node.hasOwnProperty("parentEl")) {
-        if (node.parentEl instanceof Element) {
+        if (node.parentEl instanceof HTMLElement) {
           return [node.parentEl];
         }
       }
@@ -1446,11 +1454,8 @@
           return;
         }
       }
-      const item = path.pop();
+      const key = path.pop().value;
       const obj = this.getObjectProperty(path);
-      const key = item.hasOwnProperty("symbolIndex")
-        ? Object.getOwnPropertySymbols(obj)[item.symbolIndex]
-        : item.value;
       if (!obj) {
         return;
       }
@@ -1519,17 +1524,13 @@
           }
         }
       }
-      // If nothing was found, return the path of the first root component found in the apps
-      const appIndex = [...this.apps].findIndex((app) => app.root);
-      return [appIndex.toString(), "root"];
+      // If nothing was found, return the first app's root component path
+      return ["0", "root"];
     }
     // Returns the tree of components of the inspected page in a parsed format
     // Use inspectedPath to specify the path of the selected component
     getComponentsTree(inspectedPath = null, oldTrees = null, oldDetails = null) {
       const appsArray = [...this.apps];
-      if (inspectedPath && !this.getComponentNode(inspectedPath)) {
-        inspectedPath = null;
-      }
       const trees = appsArray.map((app, index) => {
         let oldTree;
         if (oldTrees) {
@@ -1738,7 +1739,7 @@
         owlStatus = -1;
       }
     }
-    window.postMessage({ source: "owl-devtools", type: "owlStatus", data: owlStatus });
+    window.postMessage({ source: "owl-devtools", type: "owlStatus", data: owlStatus }, "/");
   }
 
   if (!window.__OWL_DEVTOOLS__) {
@@ -1760,19 +1761,19 @@
         if (value?.Fiber !== undefined) {
           window.__OWL__DEVTOOLS_GLOBAL_HOOK__ = new OwlDevtoolsGlobalHook();
         }
-        window.top.postMessage({ source: "owl-devtools", type: "FrameReady" });
+        window.top.postMessage({ source: "owl-devtools", type: "FrameReady" }, "/");
         checkOwlStatus();
       },
     });
     // Do note that the reload message is not sent on the top window so that it is not intercepted when originating
     // from an iframe
-    window.postMessage({ source: "owl-devtools", type: "Reload" });
+    window.postMessage({ source: "owl-devtools", type: "Reload" }, "/");
   } else if (
     window.__OWL_DEVTOOLS__?.Fiber !== undefined &&
     !window.__OWL__DEVTOOLS_GLOBAL_HOOK__
   ) {
     window.__OWL__DEVTOOLS_GLOBAL_HOOK__ = new OwlDevtoolsGlobalHook();
-    window.postMessage({ source: "owl-devtools", type: "Reload" });
+    window.postMessage({ source: "owl-devtools", type: "Reload" }, "/");
   }
   // Listener that checks whether owl is available on the page and if it has the right version
   window.addEventListener(

tools/devtools/tests/devtools.d.ts

@@ -0,0 +1,9 @@
+import type * as owl from "../../../src/runtime";
+import type { JestChrome } from "jest-chrome/types/jest-chrome";
+declare global {
+  interface Window {
+    owl: typeof owl;
+    browser: any;
+    chrome: JestChrome;
+  }
+}

tools/devtools/tests/devtools.test.ts

@@ -0,0 +1,15 @@
+import { mount } from "../../../src";
+import { makeTestFixture } from "../../../tests/helpers";
+import { DevtoolsWindow } from "../src/devtools_app/devtools_window/devtools_window";
+
+let fixture = makeTestFixture();
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+describe("devtools", () => {
+  test("mounting the devtools", async () => {
+    await mount(DevtoolsWindow as any, fixture);
+    expect(fixture.querySelector(".status-message")!.textContent).toContain("There are no apps currently running.")
+  });
+});

tools/devtools/tests/jest.config.json

@@ -0,0 +1,28 @@
+{
+  "testEnvironment": "jsdom",
+  "roots": [
+    "<rootDir>"
+  ],
+  "setupFiles": [
+    "<rootDir>/../../../tests/mocks/mockEventTarget.js",
+    "<rootDir>/setup.ts"
+  ],
+  "globals": {
+    "ts-jest": {
+      "tsconfig": "<rootDir>/tsconfig.json"
+    }
+  },
+  "transform": {
+    "^.+\\.[jt]s?$": "ts-jest"
+  },
+  "verbose": false,
+  "testRegex": "(/tests/.*(test|spec))\\.ts?$",
+  "moduleFileExtensions": [
+    "ts",
+    "tsx",
+    "js",
+    "jsx",
+    "json",
+    "node"
+  ]
+}

tools/devtools/tests/setup.ts

@@ -0,0 +1,9 @@
+import * as owl from "../../../src/runtime";
+window.owl = owl;
+import { chrome } from "jest-chrome";
+window.chrome = chrome;
+
+import { templates } from "../assets/templates";
+for (const template in templates) {
+  owl.App.registerTemplate(template, templates[template as keyof typeof templates]);
+}

tools/devtools/tests/tsconfig.json

@@ -0,0 +1,109 @@
+{
+  /**
+   ** Commented-out options have their default values.
+   **/
+  "include": [
+    "**/*.ts",
+  ],
+                                                                // "exclude": [],
+  // "files": [],                                               // A list of relative or absolute file paths to include.
+  // "extends": "",                                             // A string containing a path to another configuration file to inherit from.
+  // "references": [],                                          // An array of objects `{"path": "./to/dirOrConfig"}` that specifies projects to reference.
+  // "compileOnSave": false,                                    // Signals to the IDE to generate all files for a given tsconfig.json upon saving.
+  "compilerOptions": {
+                                                                // Main options
+    "target": "es2019",                                         // Specify ECMAScript target version: 'es3' (default), 'es5', 'es2015', 'es2016', 'es2017','es2018' or 'esnext'.
+    "module": "es6",                                         // Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'.
+    // "lib": ["esnext", "dom"],                                // Specify library files to be included in the compilation.
+    "allowJs": true,                                            // Allow javascript files to be compiled.
+    // "checkJs": false,                                        // Report errors in .js files.
+    // "outFile": "./",                                         // Concatenate and emit output to single file.
+    "outDir": "dist",                                           // Redirect output structure to the directory.
+    // "rootDir": "./",                                         // Specify the root directory of input files. Use to control the output directory structure with `--outDir`.
+    // "project": "",                                           // Compile a project given a valid configuration file.
+                                                                // Compilation options
+    // "composite": true,                                       // Enable project compilation
+    // "diagnostics": false,                                    // Show diagnostic information.
+    // "incremental": true,                                     // Enable incremental compilation by reading/writing information from prior compilations to a file on disk.
+    // "isolatedModules": false,                                // Transpile each file as a separate module (similar to 'ts.transpileModule').
+    // "listEmittedFiles": false,                               // Print names of generated files part of the compilation.
+    // "listFiles": true,                                       // Print names of files part of the compilation.
+    // "noErrorTruncation": false,                              // Do not truncate error messages.
+    // "preserveWatchOutput": false,                            // Keep outdated console output in watch mode instead of clearing the screen.
+    // "traceResolution": false,                                // Enable tracing of the name resolution process.
+    // "tsBuildInfoFile": ".tsbuildinfo",                       // Specify file to store incremental compilation information.
+                                                                // Strict typechecking options
+    "strict": true,                                             // Enable all strict type-checking options.
+    // "noImplicitAny": true,                                   // Raise error on expressions and declarations with an implied 'any' type.
+    // "noImplicitThis": true,                                  // Raise error on 'this' expressions with an implied 'any' type.
+    // "strictBindCallApply": true,                             // Enable stricter checking of of the `bind`, `call`, and `apply` methods on functions.
+    // "strictFunctionTypes": true,                             // Disable bivariant parameter checking for function types.
+    // "strictNullChecks": true,                                // In strict null checking mode, the null and undefined values are not in the domain of every type and are only assignable to themselves and any.
+    // "strictPropertyInitialization": true,                    // Ensure non-undefined class properties are initialized in the constructor. This option requires `--strictNullChecks` be enabled in order to take effect.
+    // "alwaysStrict": true,                                    // Parse in strict mode and emit "use strict" for each source file.
+                                                                // Additional checks
+    // "allowUnreachableCode": false,                           // Do not report errors on unreachable code.
+    // "allowUnusedLabels": false,                              // Do not report errors on unused labels.
+    "forceConsistentCasingInFileNames": true,                   // Disallow inconsistently-cased references to the same file.
+    // "noStrictGenericChecks": false,                          // Disable strict checking of generic signatures in function types.
+    "noUnusedLocals": true,                                     // Report errors on unused locals.
+    "noUnusedParameters": false,                                // Report errors on unused parameters.
+    "noImplicitReturns": true,                                  // Report error when not all code paths in function return a value.
+    "noFallthroughCasesInSwitch": true,                         // Report errors for fallthrough cases in switch statement.
+    // "skipLibCheck": false,                                   // Skip type checking of all declaration files (*.d.ts).
+    // "suppressExcessPropertyErrors": false,                   // Suppress excess property checks for object literals.
+    // "suppressImplicitAnyIndexErrors": false,                 // Suppress noImplicitAny errors for indexing objects lacking index signatures.
+                                                                // Module resolution options
+    "moduleResolution": "node",                                 // Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6).
+    // "baseUrl": "./",                                         // Base directory to resolve non-absolute module names.
+    // "paths": {},                                             // A series of entries which re-map imports to lookup locations relative to the 'baseUrl'.
+    // "rootDirs": [],                                          // List of root folders whose combined content represents the structure of the project at runtime.
+    // "typeRoots": [
+    //   "./node_modules/@types",
+    //   "./tools/devtools/tests"
+    // ],                                         // List of folders to include type definitions from.
+    "types": [
+      "jest",
+      "node"
+    ],                                                // Type declaration files to be included in compilation.
+    // "allowSyntheticDefaultImports": false                    // Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
+    "esModuleInterop": true,                                    // Emit '__importStar' and '__importDefault' helpers for runtime babel ecosystem compatibility and enable '--allowSyntheticDefaultImports' for typesystem compatibility.
+    // "maxNodeModuleJsDepth": 0,                               // The maximum dependency depth to search under node_modules and load JavaScript files. Only applicable with --allowJs.
+    // "preserveSymlinks": false,                               // Do not resolve the real path of symlinks.
+    "resolveJsonModule": true,                                  // Include modules imported with '.json' extension.
+                                                                // Emit options
+    "declaration": true,                                        // Generates corresponding '.d.ts' file.
+    "declarationDir": "dist/types",                             // Output directory for generated declaration files.
+    // "declarationMap": false,                                 // Generates a sourcemap for each corresponding '.d.ts' file.
+    // "emitBOM": false,                                        // Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files.
+    // "emitDeclarationOnly": false,                            // Only emit ‘.d.ts’ declaration files.
+    // "importHelpers": false,                                  // Import emit helpers from 'tslib'.
+    // "newLine": "LF",                                         // Use the specified end of line sequence to be used when emitting files: "crlf" (windows) or "lf" (unix).”
+    // "noEmit": true,                                          // Do not emit outputs.
+    // "noEmitHelpers": false,                                  // Do not generate custom helper functions like __extends in compiled output.
+    // "noEmitOnError": false,                                  // Do not emit outputs if any errors were reported.
+    // "noImplicitUseStrict": false,                            // Do not emit "use strict" directives in module output.
+    // "noResolve": false,                                      // Do not add triple-slash references or module import targets to the list of compiled files.
+    "preserveConstEnums": false,                                 // Do not erase const enum declarations in generated code.
+    // "removeComments": false,                                 // Remove all comments except copy-right header comments beginning with 
+    // "experimentalDecorators": true,                          // Enables experimental support for ES7 decorators.
+    // "emitDecoratorMetadata": true,                           // Enables experimental support for emitting type metadata for decorators.
+                                                                // Source map options
+    // "sourceMap": false,                                      // Generates corresponding '.map' file.
+    // "sourceRoot": "",                                        // Specify the location where debugger should locate TypeScript files instead of source locations.
+    // "mapRoot": "",                                           // Specify the location where debugger should locate map files instead of generated locations.
+    // "inlineSourceMap": true,                                 // Emit a single file with source maps instead of having a separate file.
+    // "inlineSources": true,                                   // Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set.
+                                                                // JSX options
+    // "jsx": "preserve",                                       // Specify JSX code generation: 'preserve', 'react-native', or 'react'.
+    // "jsxFactory": "React.createElement",                     // Specify the JSX factory function to use when targeting react JSX emit, e.g. 'React.createElement' or 'h'.
+                                                                // Other options
+    // "allowUmdGlobalAccess": true,                            // Allow accessing UMD globals from modules.
+    // "charset": "utf8",                                       // The character set of the input files.
+    // "downlevelIteration": false,                             // Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'.
+    // "disableSizeLimit": false,                               // Disable size limitation on JavaScript project.
+    // "keyofStringsOnly": false,                               // Resolve 'keyof' to string valued property names only (no numbers or symbols).
+    // "noLib": false,                                          // Do not include the default library file (lib.d.ts).
+    // "pretty": true,                                          // Stylize errors and messages using color and context.
+  }
+}

tools/release.js

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