snapshots

.gitignore

@@ -15,7 +15,7 @@ yarn-debug.log*
 yarn-error.log*
 
 #ide's
-**/.vscode/*
+.vscode
 .idea
 
 node_modules
@@ -26,10 +26,3 @@ release-notes.md
 
 # useful in some cases
 /temp
-
-# owl-vision
-*/owl-vision/out/
-*/owl-vision/.vs/
-**/*.vsix
-!*/owl-vision/.vscode/launch.json
-!*/owl-vision/.vscode/tasks.json

doc/reference/component.md

@@ -357,7 +357,7 @@ cleaning operation, since the component may be destroyed before it has even been
 mounted. The `willDestroy` hook is useful in that situation, since it is always
 called.
 
-The `onWillDestroy` hook is used to register a function that will be executed at
+The `onWillUnmount` hook is used to register a function that will be executed at
 this moment:
 
 ```javascript

doc/reference/error_handling.md

@@ -51,8 +51,8 @@ that render its content, and a fallback if an error happened.
 ```js
 class ErrorBoundary extends Component {
   static template = xml`
-    <t t-if="state.error" t-slot="fallback">An error occurred</t>
-    <t t-else="" t-slot="default"/>`;
+    <t t-if="error" t-slot="fallback">An error occurred</t>
+    <t t-else="" t-slot="content"`;
 
   setup() {
     this.state = useState({ error: false });

doc/reference/hooks.md

@@ -190,13 +190,12 @@ will then be updated accordingly.
 ### `useExternalListener`
 
 The `useExternalListener` hook helps solve a very common problem: adding and removing
-a listener on some target whenever a component is mounted/unmounted. It takes a target
-as its first argument, forwards the other arguments to `addEventListener`. For example,
+a listener on some target whenever a component is mounted/unmounted. For example,
 a dropdown menu (or its parent) may need to listen to a `click` event on `window`
 to be closed:
 
 ```js
-useExternalListener(window, "click", this.closeMenu, { capture: true });
+useExternalListener(window, "click", this.closeMenu);
 ```
 
 ### `useComponent`

doc/tools/devtools_guide.md

@@ -35,13 +35,13 @@ The components tab is separated into two sub windows: the components tree in the
 the component details in the right. The components tree will display all the different
 components that are present in the tab in the form of a tree. The root of this tree is
 actually the app which is not a component but can still be inspected by the devtools like
-one. There can also be multiple apps loaded in the page like in website:
+one. There can also be multiple apps loaded in the page like in the following:
 
 <img src="screenshots/multi_apps.png"/>
 
 There is a convenient search bar at the top of the components tree which will help finding
 the components tou want in the tree and also, an element picker can be used to directly select
-the component you want to focus on in the page which is especially useful when 1trying to find
+the component you want to focus on in the page which is especially useful when trying to find
 what you want. Just click on the elements picker icon and click on the element you want to focus
 on in the page and it will be selected in the devtools accordingly. Hovering any element in the
 page in this mode will highlight it and the same happens anytime in the components tree.
@@ -64,18 +64,25 @@ as its env, props, observed states and all the other variables that are present
 While the props and the env are already present on the actual instance of the component and are
 pretty explicit by themselves, the observed state value is a bit more complicated to grasp.
 
-The observed state is actually information about which variables are being observed by the component:
-when any property of a reactive object is being read by the component, the component will subscribe
-to this property which means it will listen to any change that can occur on the property and render
-when such a change occurs. This can be visualized easily within the devtools inside of the observed
-state section: observed properties of the reactive object(s) are displayed in bold while the others
-are greyed out. Do keep in mind that a greyed out property in the observed state of one component
-may be observed by another and the other way around is also possible. Here is an example for some
-user Field component:
+The observed state is actually information about which variables are observed by the component
+which will trigger a rerender of the component when it is modified. The keys represent which part of the
+variable is actually observed and the target is the actual variable. For simplicity, the properties
+that are not observed by the component are greyed out while the others are in bold. This means that
+editing bold ones will trigger a rerender while the greyed out ones will not.
 
 <img src="screenshots/states.png"/>
 
-Navigation inside the properties is also similar to the one in console variables: properties have
+In the given example, we have two keys/target pairs for two different variables. The first one indicates
+that adding or removing an element to the array will trigger a rerender since the length will have changed.
+Replacing the element at index 0, 1 or 2 will also have the same effect as implied by the keys. It doesn't
+mean that editing the properties of element at index 0, 1 or 2 will rerender the component though. It may
+be the case for some but this will be described in another keys/target pair. The second keys/target pair
+is actually the element at index 0 of the first pair. It only has id in the keys meaning that only the
+id property will actually trigger a rerender the component when modified. Be aware however that the other
+properties may be in the observed state of another component like a child one in this case. A greyed out
+property only implies it is not reactive for the selected component and not for the others.
+
+The navigation inside the properties is also similar to the one in console variables: properties have
 their prototype displayed and getters will get their value when clicked on (...). It is also possible to
 send any property to the console using the right-click context menu on it and functions can be inspected
 in the sources tab as well.
@@ -89,10 +96,8 @@ component's name. Using the left click on the component's name will focus it in
 It is also possible to edit any of the leaf node properties. To do so, you must double click on the
 property's value and modify it using the freshly created input then press enter to apply the changes.
 Do note that the modified values should be written in JSON format in order to be valid (examples:
-89, "yes", undefined, null, \["hello", 15\], {"a": 1}, true, ...). Editing any value will produce a
-manual render of the component (or the root component of the application in the case of env values).
-Whether the edition has an impact on the component or not and whether it produces an error is the
-responsability of the user.
+89, "yes", undefined, null, \["hello", 15\], {"a": 1}, true, ...). Whether it has an impact on the
+component or not and whether it produces an error is the responsability of the user.
 
 <img src="screenshots/edit.png"/>
 
@@ -112,8 +117,7 @@ are intercepted by the devtools using the record button.
 The second button is used to clear all the events that have been recorded. The select can be used to
 switch between the tree view (which shows the causality between renders) and the events log view which
 simply displays the events in the exact order they were triggered. In this view, you can expand the create,
-update and destroy events which reveals the component that initiated the event. Also, a transition line will
-appear each time a new animation frame has been loaded between events.
+update and destroy events which reveals the component that initiated the event.
 
 <img src="screenshots/events_log.png"/>
 
@@ -127,29 +131,20 @@ There is also the Trace Renderings and Trace Subscriptions features. These featu
 recording of events and have no effect on the profiler tab. The Trace Renderings option is used to log in
 the console all the render events and allows to show their traceback information. Similarly, the Trace
 Subscriptions option logs all the properties that caused a render event and also allows to see the traceback
-of the modification.
+of the modification
 
 <img src="screenshots/trace_rendering.png"/>
 <img src="screenshots/trace_subscriptions.png"/>
 
-The Owl Devtools also allow to inspect iframes coded in Owl: when an Owl iframe is detected in the page,
-the iframe selector will appear next to the tabs. This allows to switch from an iframe to another easily.
-Be aware that switching iframes will clear all record events from the profiler tab. Iframes detection is
-currently not working in the firefox version, we are aware of this issue and will try to address it in the
-future.
-
-<img src="screenshots/iframes.png"/>
-
 ## Options
 
 The owl devtools extension has a dark mode feature which defaults to your general devtools settings and can
-be toggled using the sun/moon icon at the top-right corner of the tab. There is also a refresh button to
-completely reset the owl devtools.
+be toggled using the sun/moon icon at the top-right corner of the tab. All the examples above were created
+with the dark mode enabled. There is also a refresh button to completely reset the owl devtools.
 
 <img src="screenshots/darkmode.png"/>
 
 ## Troubleshooting
 
-If the feedback from the page to the devtools seems to be cut, you can first try to use the refresh
-button mentioned above but if it still doesn't seem to work, just close the devtools and refresh the page.
+If the feedback from the page to the devtools seems to be cut, just close the devtools and refresh the page.
 This will eventually happen any time a tab stays opened for too long without being refreshed.

docs/owl.js

@@ -82,6 +82,67 @@ 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;
+    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;
+    }
 }
 
 const { setAttribute: elemSetAttribute, removeAttribute } = Element.prototype;
@@ -710,7 +771,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 +792,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 +1603,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) {
@@ -2073,7 +2076,7 @@ function basicProxyHandler(callback) {
         set(target, key, value, receiver) {
             const hadKey = objectHasOwnProperty.call(target, key);
             const originalValue = Reflect.get(target, key, receiver);
-            const ret = Reflect.set(target, key, toRaw(value), receiver);
+            const ret = Reflect.set(target, key, value, receiver);
             if (!hadKey && objectHasOwnProperty.call(target, key)) {
                 notifyReactives(target, KEYCHANGES);
             }
@@ -2177,7 +2180,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;
@@ -2998,13 +3001,15 @@ function prepareList(collection) {
         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);
+        if (Symbol.iterator in collection) {
+            keys = [...collection];
+            values = keys;
+        }
+        else {
+            values = Object.keys(collection);
+            keys = Object.values(collection);
+        }
     }
     else {
         throw new OwlError(`Invalid loop expression: "${collection}" is not iterable`);
@@ -3197,14 +3202,7 @@ class TemplateSet {
         this.translateFn = config.translateFn;
         this.translatableAttributes = config.translatableAttributes;
         if (config.templates) {
-            if (config.templates instanceof Document || typeof config.templates === "string") {
-                this.addTemplates(config.templates);
-            }
-            else {
-                for (const name in config.templates) {
-                    this.addTemplate(name, config.templates[name]);
-                }
-            }
+            this.addTemplates(config.templates);
         }
     }
     static registerTemplate(name, fn) {
@@ -3212,10 +3210,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
@@ -3859,7 +3853,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;
         }
@@ -3882,7 +3876,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);
             }
@@ -4058,6 +4052,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")) {
@@ -4173,10 +4172,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);
@@ -4218,7 +4214,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;
@@ -4321,7 +4317,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(", ");
@@ -4350,18 +4346,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) {
@@ -4436,6 +4432,7 @@ class CodeGenerator {
                 block,
                 index,
                 forceNewBlock: !isTSet,
+                preventRoot: ctx.preventRoot,
                 isLast: ctx.isLast && i === l - 1,
             });
             this.compileAST(child, subCtx);
@@ -4444,19 +4441,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);
@@ -4470,23 +4469,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");
@@ -4494,6 +4494,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,
@@ -4502,6 +4503,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,
@@ -4823,7 +4825,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) {
@@ -4914,7 +4916,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();
@@ -4976,9 +4980,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}'`);
@@ -4991,9 +4992,6 @@ function parseDOMNode(node, ctx) {
             attrs[attr] = value;
         }
     }
-    if (ns) {
-        ctx.nameSpace = ns;
-    }
     const children = parseChildren(node, ctx);
     return {
         type: 2 /* DomNode */,
@@ -5286,14 +5284,14 @@ function parseComponent(node, ctx) {
             // be ignored)
             let el = slotNode.parentElement;
             let isInSubComponent = false;
-            while (el && el !== clone) {
+            while (el !== clone) {
                 if (el.hasAttribute("t-component") || el.tagName[0] === el.tagName[0].toUpperCase()) {
                     isInSubComponent = true;
                     break;
                 }
                 el = el.parentElement;
             }
-            if (isInSubComponent || !el) {
+            if (isInSubComponent) {
                 continue;
             }
             slotNode.removeAttribute("t-set-slot");
@@ -5549,20 +5547,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.7";
+const version = "2.2.3";
 
 // -----------------------------------------------------------------------------
 //  Scheduler
@@ -5651,8 +5640,13 @@ const DEV_MSG = () => {
 This is not suitable for production use.
 See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration for more information.`;
 };
-const apps = new Set();
-window.__OWL_DEVTOOLS__ || (window.__OWL_DEVTOOLS__ = { apps, Fiber, RootFiber, toRaw, reactive });
+window.__OWL_DEVTOOLS__ || (window.__OWL_DEVTOOLS__ = {
+    apps: new Set(),
+    Fiber: Fiber,
+    RootFiber: RootFiber,
+    toRaw: toRaw,
+    reactive: reactive,
+});
 class App extends TemplateSet {
     constructor(Root, config = {}) {
         super(config);
@@ -5660,7 +5654,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;
         }
@@ -5717,7 +5711,7 @@ class App extends TemplateSet {
             this.root.destroy();
             this.scheduler.processTasks();
         }
-        apps.delete(this);
+        window.__OWL_DEVTOOLS__.apps.delete(this);
     }
     createComponent(name, isStatic, hasSlotsProp, hasDynamicPropList, propList) {
         const isDynamic = !isStatic;
@@ -5792,7 +5786,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);
@@ -5909,7 +5902,7 @@ function useChildSubEnv(envExtension) {
  *
  * @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 {()=>T} [computeDependencies=()=>[NaN]] a callback to compute
  *      dependencies that will decide if the effect needs to be cleaned up and
  *      run again. If the dependencies did not change, the effect will not run
  *      again. The default value returns an array containing only NaN because
@@ -5991,6 +5984,6 @@ TemplateSet.prototype._compileTemplate = function _compileTemplate(name, templat
 export { App, Component, EventBus, OwlError, __info__, blockDom, loadFile, markRaw, markup, mount, onError, onMounted, onPatched, onRendered, onWillDestroy, onWillPatch, onWillRender, onWillStart, onWillUnmount, onWillUpdateProps, reactive, status, toRaw, useChildSubEnv, useComponent, useEffect, useEnv, useExternalListener, useRef, useState, useSubEnv, validate, validateType, whenReady, xml };
 
 
-__info__.date = '2023-12-06T13:56:01.636Z';
-__info__.hash = 'e94428a';
+__info__.date = '2023-07-20T06:05:29.796Z';
+__info__.hash = 'b1a3b32';
 __info__.url = 'https://github.com/odoo/owl';

docs/playground/samples/todo_app/todo_app.js

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

package-lock.json

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

package.json

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

src/common/owl_error.ts

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

src/common/utils.ts

@@ -1,38 +0,0 @@
-import { OwlError } from "./owl_error";
-
-/**
- * Parses an XML string into an XML document, throwing errors on parser errors
- * instead of returning an XML document containing the parseerror.
- *
- * @param xml the string to parse
- * @returns an XML document corresponding to the content of the string
- */
-export function parseXML(xml: string): XMLDocument {
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(xml, "text/xml");
-  if (doc.getElementsByTagName("parsererror").length) {
-    let msg = "Invalid XML in template.";
-    const parsererrorText = doc.getElementsByTagName("parsererror")[0].textContent;
-    if (parsererrorText) {
-      msg += "\nThe parser has produced the following error message:\n" + parsererrorText;
-      const re = /\d+/g;
-      const firstMatch = re.exec(parsererrorText);
-      if (firstMatch) {
-        const lineNumber = Number(firstMatch[0]);
-        const line = xml.split("\n")[lineNumber - 1];
-        const secondMatch = re.exec(parsererrorText);
-        if (line && secondMatch) {
-          const columnIndex = Number(secondMatch[0]) - 1;
-          if (line[columnIndex]) {
-            msg +=
-              `\nThe error might be located at xml line ${lineNumber} column ${columnIndex}\n` +
-              `${line}\n${"-".repeat(columnIndex - 1)}^`;
-          }
-        }
-      }
-    }
-    throw new OwlError(msg);
-  }
-
-  return doc;
-}

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;
@@ -43,6 +43,7 @@ export interface Config {
 export interface CodeGenOptions extends Config {
   hasSafeContext?: boolean;
   name?: string;
+  alias?: string;
 }
 
 // using a non-html document so that <inner/outer>HTML serializes as XML instead
@@ -160,6 +161,7 @@ interface Context {
   block: BlockDescription | null;
   index: number | string;
   forceNewBlock: boolean;
+  preventRoot?: boolean;
   isLast?: boolean;
   translate: boolean;
   tKeyExpr: string | null;
@@ -196,6 +198,7 @@ class CodeTarget {
   hasRefWrapper: boolean = false;
 
   constructor(name: string, on?: EventHandlers | null) {
+    debugger
     this.name = name;
     this.on = on || null;
   }
@@ -242,6 +245,13 @@ class CodeTarget {
   }
 }
 
+function toFnName(name: string = "", alias?: string) {
+  if (alias) {
+    name += `_${alias}`;
+  }
+  return name.replace(/[^A-Za-z_$0-9]+/g, "_") || "template";
+}
+
 const TRANSLATABLE_ATTRS = ["label", "title", "placeholder", "alt"];
 const translationRE = /^(\s*)([\s\S]+?)(\s*)$/;
 
@@ -251,7 +261,7 @@ export class CodeGenerator {
   hasSafeContext: boolean;
   isDebug: boolean = false;
   targets: CodeTarget[] = [];
-  target = new CodeTarget("template");
+  target: CodeTarget;
   templateName?: string;
   dev: boolean;
   translateFn: (s: string) => string;
@@ -262,6 +272,7 @@ export class CodeGenerator {
   helpers: Set<string> = new Set();
 
   constructor(ast: AST, options: CodeGenOptions) {
+    this.target = new CodeTarget(toFnName(options.name, options.alias));
     this.translateFn = options.translateFn || ((s: string) => s);
     if (options.translatableAttributes) {
       const attrs = new Set(TRANSLATABLE_ATTRS);
@@ -376,7 +387,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 +413,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 +596,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 +729,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 +771,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 +873,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 +904,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 +999,7 @@ export class CodeGenerator {
         block,
         index,
         forceNewBlock: !isTSet,
+        preventRoot: ctx.preventRoot,
         isLast: ctx.isLast && i === l - 1,
       });
       this.compileAST(child, subCtx);
@@ -994,18 +1008,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 +1037,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 +1062,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 +1070,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,8 +2,7 @@ import type { TemplateSet } from "../runtime/template_set";
 import type { BDom } from "../runtime/blockdom";
 import { CodeGenerator, Config } from "./code_generator";
 import { parse } from "./parser";
-import { OwlError } from "../common/owl_error";
-import { parseXML } from "../common/utils";
+import { OwlError } from "../runtime";
 
 export type Template = (context: any, vnode: any, key?: string) => BDom;
 
@@ -11,19 +10,20 @@ export type TemplateFunction = (app: TemplateSet, bdom: any, helpers: any) => Te
 
 interface CompileOptions extends Config {
   name?: string;
+  alias?: string;
 }
 export function compile(
   template: string | Element,
   options: CompileOptions = {}
 ): TemplateFunction {
   // parsing
-  if (typeof template === "string") {
-    template = parseXML(`<t>${template}</t>`).firstChild as Element;
-  }
   const ast = parse(template);
 
   // some work
-  const hasSafeContext = template.querySelector("[t-set], [t-call]") === null;
+  const hasSafeContext =
+    template instanceof Node
+      ? !(template instanceof Element) || template.querySelector("[t-set], [t-call]") === null
+      : !template.includes("t-set") && !template.includes("t-call");
 
   // code generation
   const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext });

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
@@ -197,7 +197,11 @@ export type AST =
 // -----------------------------------------------------------------------------
 const cache: WeakMap<Element, AST> = new WeakMap();
 
-export function parse(xml: Element): AST {
+export function parse(xml: string | Element): AST {
+  if (typeof xml === "string") {
+    const elem = parseXML(`<t>${xml}</t>`).firstChild as Element;
+    return _parse(elem);
+  }
   let ast = cache.get(xml);
   if (!ast) {
     // we clone here the xml to prevent modifying it in place
@@ -209,14 +213,14 @@ export function parse(xml: 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 {
@@ -319,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");
 
@@ -362,9 +367,9 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
       const isSelect = tagName === "select";
       const isCheckboxInput = isInput && typeAttr === "checkbox";
       const isRadioInput = isInput && typeAttr === "radio";
-      const hasTrimMod = attr.includes(".trim");
-      const hasLazyMod = hasTrimMod || attr.includes(".lazy");
+      const hasLazyMod = attr.includes(".lazy");
       const hasNumberMod = attr.includes(".number");
+      const hasTrimMod = attr.includes(".trim");
       const eventType = isRadioInput ? "click" : isSelect || hasLazyMod ? "change" : "input";
 
       model = {
@@ -384,8 +389,6 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
       }
     } else if (attr.startsWith("block-")) {
       throw new OwlError(`Invalid attribute: '${attr}'`);
-    } else if (attr === "xmlns") {
-      ns = value;
     } else if (attr !== "t-name") {
       if (attr.startsWith("t-") && !attr.startsWith("t-att")) {
         throw new OwlError(`Unknown QWeb directive: '${attr}'`);
@@ -398,9 +401,6 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
       attrs[attr] = value;
     }
   }
-  if (ns) {
-    ctx.nameSpace = ns;
-  }
 
   const children = parseChildren(node, ctx);
   return {
@@ -736,14 +736,14 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
       // be ignored)
       let el = slotNode.parentElement!;
       let isInSubComponent = false;
-      while (el && el !== clone) {
+      while (el !== clone) {
         if (el!.hasAttribute("t-component") || el!.tagName[0] === el!.tagName[0].toUpperCase()) {
           isInSubComponent = true;
           break;
         }
         el = el.parentElement!;
       }
-      if (isInSubComponent || !el) {
+      if (isInSubComponent) {
         continue;
       }
 
@@ -968,3 +968,40 @@ function normalizeXML(el: Element) {
   normalizeTIf(el);
   normalizeTEscTOut(el);
 }
+
+/**
+ * Parses an XML string into an XML document, throwing errors on parser errors
+ * instead of returning an XML document containing the parseerror.
+ *
+ * @param xml the string to parse
+ * @returns an XML document corresponding to the content of the string
+ */
+function parseXML(xml: string): XMLDocument {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(xml, "text/xml");
+  if (doc.getElementsByTagName("parsererror").length) {
+    let msg = "Invalid XML in template.";
+    const parsererrorText = doc.getElementsByTagName("parsererror")[0].textContent;
+    if (parsererrorText) {
+      msg += "\nThe parser has produced the following error message:\n" + parsererrorText;
+      const re = /\d+/g;
+      const firstMatch = re.exec(parsererrorText);
+      if (firstMatch) {
+        const lineNumber = Number(firstMatch[0]);
+        const line = xml.split("\n")[lineNumber - 1];
+        const secondMatch = re.exec(parsererrorText);
+        if (line && secondMatch) {
+          const columnIndex = Number(secondMatch[0]) - 1;
+          if (line[columnIndex]) {
+            msg +=
+              `\nThe error might be located at xml line ${lineNumber} column ${columnIndex}\n` +
+              `${line}\n${"-".repeat(columnIndex - 1)}^`;
+          }
+        }
+      }
+    }
+    throw new OwlError(msg);
+  }
+
+  return doc;
+}

src/index.ts

@@ -5,10 +5,12 @@ export * from "./runtime";
 
 TemplateSet.prototype._compileTemplate = function _compileTemplate(
   name: string,
-  template: string | Element
+  template: string | Element,
+  alias?: string
 ) {
   return compile(template, {
     name,
+    alias,
     dev: this.dev,
     translateFn: this.translateFn,
     translatableAttributes: this.translatableAttributes,

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;
     }
@@ -137,7 +139,7 @@ export class App<
       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.ts

@@ -23,7 +23,7 @@ export type ComponentConstructor<P extends Props = any, E = any> = (new (
 
 export class Component<Props = any, Env = any> {
   static template: string = "";
-  static props?: Schema;
+  static props?: any;
   static defaultProps?: any;
 
   props: Props;

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";
@@ -117,7 +116,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     }
     this.component = new C(props, env, this);
     const ctx = Object.assign(Object.create(this.component), { this: this.component });
-    this.renderFn = app.getTemplate(C.template).bind(this.component, ctx, this);
+    this.renderFn = app.getTemplate(C.template, C.name).bind(this.component, ctx, this);
     this.component.setup();
     currentNode = null;
   }

src/runtime/error_handling.ts

@@ -1,7 +1,11 @@
-import { OwlError } from "../common/owl_error";
 import type { ComponentNode } from "./component_node";
 import type { Fiber } from "./fibers";
 
+// Custom error class that wraps error that happen in the owl lifecycle
+export class OwlError extends Error {
+  cause?: any;
+}
+
 // Maps fibers to thrown errors
 export const fibersInError: WeakMap<Fiber, any> = new WeakMap();
 export const nodeErrorHandlers: WeakMap<ComponentNode, ((error: any) => void)[]> = new WeakMap();

src/runtime/event_handling.ts

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

src/runtime/fibers.ts

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

src/runtime/hooks.ts

@@ -59,7 +59,7 @@ export function useChildSubEnv(envExtension: Env) {
 // useEffect
 // -----------------------------------------------------------------------------
 
-type EffectDeps<T extends unknown[]> = T | (T extends [...infer H, never] ? EffectDeps<H> : never);
+type EffectDeps<T extends any[]> = T | (T extends [...infer H, never] ? EffectDeps<H> : never);
 
 /**
  * @template T
@@ -67,7 +67,7 @@ type EffectDeps<T extends unknown[]> = T | (T extends [...infer H, never] ? Effe
  * @returns {void|(()=>void)} a cleanup function that reverses the side
  *      effects of the effect callback.
  */
-type Effect<T extends unknown[]> = (...dependencies: EffectDeps<T>) => void | (() => void);
+type Effect<T extends [...T]> = (...dependencies: EffectDeps<T>) => void | (() => void);
 
 /**
  * This hook will run a callback when a component is mounted and patched, and
@@ -76,15 +76,15 @@ type Effect<T extends unknown[]> = (...dependencies: EffectDeps<T>) => void | ((
  *
  * @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 {()=>T} [computeDependencies=()=>[NaN]] a callback to compute
  *      dependencies that will decide if the effect needs to be cleaned up and
  *      run again. If the dependencies did not change, the effect will not run
  *      again. The default value returns an array containing only NaN because
  *      NaN !== NaN, which will cause the effect to rerun on every patch.
  */
-export function useEffect<T extends unknown[]>(
+export function useEffect<T extends [...T]>(
   effect: Effect<T>,
-  computeDependencies: () => [...T] = () => [NaN] as never
+  computeDependencies: () => T = () => [NaN] as never
 ) {
   let cleanup: (() => void) | void;
   let dependencies: T;

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;
 
@@ -65,7 +65,7 @@ export class Portal extends Component {
       type: String,
     },
     slots: true,
-  } as const;
+  };
 
   setup() {
     const node: any = this.__owl__;

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");
@@ -249,7 +249,7 @@ function basicProxyHandler<T extends Target>(callback: Callback): ProxyHandler<T
     set(target, key, value, receiver) {
       const hadKey = objectHasOwnProperty.call(target, key);
       const originalValue = Reflect.get(target, key, receiver);
-      const ret = Reflect.set(target, key, toRaw(value), receiver);
+      const ret = Reflect.set(target, key, value, receiver);
       if (!hadKey && objectHasOwnProperty.call(target, key)) {
         notifyReactives(target, KEYCHANGES);
       }
@@ -368,7 +368,7 @@ function delegateAndNotify(
     if (hadKey !== hasKey) {
       notifyReactives(target, KEYCHANGES);
     }
-    if (originalValue !== target[getterName](key)) {
+    if (originalValue !== value) {
       notifyReactives(target, key);
     }
     return ret;

src/runtime/template_helpers.ts

@@ -4,7 +4,7 @@ import { html } from "./blockdom/index";
 import { isOptional, validateSchema } from "./validation";
 import type { ComponentConstructor } from "./component";
 import { markRaw } from "./reactivity";
-import { OwlError } from "../common/owl_error";
+import { OwlError } from "./error_handling";
 import type { ComponentNode } from "./component_node";
 
 const ObjectCreate = Object.create;
@@ -70,12 +70,14 @@ function prepareList(collection: unknown): [unknown[], unknown[], number, undefi
   } 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);
+    if (Symbol.iterator in collection) {
+      keys = [...(<Iterable<unknown>>collection)];
+      values = keys;
+    } else {
+      values = Object.keys(collection);
+      keys = Object.values(collection);
+    }
   } else {
     throw new OwlError(`Invalid loop expression: "${collection}" is not iterable`);
   }

src/runtime/template_set.ts

@@ -3,16 +3,45 @@ 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 { parseXML } from "../common/utils";
+import { OwlError } from "./error_handling";
 
 const bdom = { text, createBlock, list, multi, html, toggler, comment };
 
+function parseXML(xml: string): Document {
+  const parser = new DOMParser();
+
+  const doc = parser.parseFromString(xml, "text/xml");
+  if (doc.getElementsByTagName("parsererror").length) {
+    let msg = "Invalid XML in template.";
+    const parsererrorText = doc.getElementsByTagName("parsererror")[0].textContent;
+    if (parsererrorText) {
+      msg += "\nThe parser has produced the following error message:\n" + parsererrorText;
+      const re = /\d+/g;
+      const firstMatch = re.exec(parsererrorText);
+      if (firstMatch) {
+        const lineNumber = Number(firstMatch[0]);
+        const line = xml.split("\n")[lineNumber - 1];
+        const secondMatch = re.exec(parsererrorText);
+        if (line && secondMatch) {
+          const columnIndex = Number(secondMatch[0]) - 1;
+          if (line[columnIndex]) {
+            msg +=
+              `\nThe error might be located at xml line ${lineNumber} column ${columnIndex}\n` +
+              `${line}\n${"-".repeat(columnIndex - 1)}^`;
+          }
+        }
+      }
+    }
+    throw new OwlError(msg);
+  }
+  return doc;
+}
+
 export interface TemplateSetConfig {
   dev?: boolean;
   translatableAttributes?: string[];
   translateFn?: (s: string) => string;
-  templates?: string | Document | Record<string, string>;
+  templates?: string | Document;
 }
 
 export class TemplateSet {
@@ -31,22 +60,12 @@ export class TemplateSet {
     this.translateFn = config.translateFn;
     this.translatableAttributes = config.translatableAttributes;
     if (config.templates) {
-      if (config.templates instanceof Document || typeof config.templates === "string") {
-        this.addTemplates(config.templates);
-      } else {
-        for (const name in config.templates) {
-          this.addTemplate(name, config.templates[name]);
-        }
-      }
+      this.addTemplates(config.templates);
     }
   }
 
   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"
@@ -75,7 +94,7 @@ export class TemplateSet {
     }
   }
 
-  getTemplate(name: string): Template {
+  getTemplate(name: string, alias?: string): Template {
     if (!(name in this.templates)) {
       const rawTemplate = this.rawTemplates[name];
       if (rawTemplate === undefined) {
@@ -87,7 +106,7 @@ export class TemplateSet {
         throw new OwlError(`Missing template: "${name}"${extraInfo}`);
       }
       const isFn = typeof rawTemplate === "function" && !(rawTemplate instanceof Element);
-      const templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate);
+      const templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate, alias);
       // first add a function to lazily get the template, in case there is a
       // recursive call to the template name
       const templates = this.templates;
@@ -100,7 +119,7 @@ export class TemplateSet {
     return this.templates[name];
   }
 
-  _compileTemplate(name: string, template: string | Element): ReturnType<typeof compile> {
+  _compileTemplate(name: string, template: string | Element, alias?: string): ReturnType<typeof compile> {
     throw new OwlError(`Unable to compile a template. Please use owl full build instead`);
   }
 
@@ -116,7 +135,7 @@ export class TemplateSet {
 export const globalTemplates: { [key: string]: string | Element | TemplateFunction } = {};
 
 export function xml(...args: Parameters<typeof String.raw>) {
-  const name = `__template__${xml.nextId++}`;
+  const name = `xml_template_${xml.nextId++}`;
   const value = String.raw(...args);
   globalTemplates[name] = value;
   return name;

src/runtime/utils.ts

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

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 =
@@ -8,7 +8,6 @@ type BaseType =
   | typeof Date
   | typeof Object
   | typeof Array
-  | typeof Function
   | true
   | "*";
 

src/version.ts

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

tests/__snapshots__/reactivity.test.ts.snap

@@ -50,11 +50,12 @@ exports[`Reactivity: useState destroyed component before being mounted is inacti
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
@@ -68,10 +69,11 @@ exports[`Reactivity: useState destroyed component before being mounted is inacti
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['contextObj'].a;
     return block1([txt1]);
   }
@@ -82,11 +84,12 @@ exports[`Reactivity: useState destroyed component is inactive 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
@@ -100,10 +103,11 @@ exports[`Reactivity: useState destroyed component is inactive 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['contextObj'].a;
     return block1([txt1]);
   }
@@ -114,10 +118,11 @@ exports[`Reactivity: useState one components can subscribe twice to same context
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Comp(ctx, node, key = \\"\\") {
     let txt1 = ctx['contextObj1'].a;
     let txt2 = ctx['contextObj2'].b;
     return block1([txt1, txt2]);
@@ -129,11 +134,12 @@ exports[`Reactivity: useState parent and children subscribed to same context 1`]
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = comp1({}, key + \`__1\`, node, this, null);
     let txt1 = ctx['contextObj'].b;
     return block1([txt1], [b2]);
@@ -145,10 +151,11 @@ exports[`Reactivity: useState parent and children subscribed to same context 2`]
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['contextObj'].a;
     return block1([txt1]);
   }
@@ -222,12 +229,13 @@ exports[`Reactivity: useState two components are updated in parallel 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   const comp2 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = comp1({}, key + \`__1\`, node, this, null);
     const b3 = comp2({}, key + \`__2\`, node, this, null);
     return block1([], [b2, b3]);
@@ -239,10 +247,11 @@ exports[`Reactivity: useState two components are updated in parallel 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['contextObj'].value;
     return block1([txt1]);
   }
@@ -253,12 +262,13 @@ exports[`Reactivity: useState two components can subscribe to same context 1`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   const comp2 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = comp1({}, key + \`__1\`, node, this, null);
     const b3 = comp2({}, key + \`__2\`, node, this, null);
     return block1([], [b2, b3]);
@@ -270,10 +280,11 @@ exports[`Reactivity: useState two components can subscribe to same context 2`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['contextObj'].value;
     return block1([txt1]);
   }
@@ -284,12 +295,13 @@ exports[`Reactivity: useState two independent components on different levels are
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1001\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   const comp2 = app.createComponent(\`Parent\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_GrandFather(ctx, node, key = \\"\\") {
     const b2 = comp1({}, key + \`__1\`, node, this, null);
     const b3 = comp2({}, key + \`__2\`, node, this, null);
     return block1([], [b2, b3]);
@@ -301,10 +313,11 @@ exports[`Reactivity: useState two independent components on different levels are
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['contextObj'].value;
     return block1([txt1]);
   }
@@ -315,11 +328,12 @@ exports[`Reactivity: useState two independent components on different levels are
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -330,10 +344,11 @@ exports[`Reactivity: useState useContext=useState hook is reactive, for one comp
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Comp(ctx, node, key = \\"\\") {
     let txt1 = ctx['contextObj'].value;
     return block1([txt1]);
   }
@@ -345,15 +360,16 @@ exports[`Reactivity: useState useless atoms should be deleted 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Quantity\`, true, false, false, [\\"id\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/> Total: <block-text-0/> Count: <block-text-1/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_ListOfQuantities(ctx, node, key = \\"\\") {
     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);
     }
@@ -370,10 +386,11 @@ exports[`Reactivity: useState useless atoms should be deleted 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Quantity(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].quantity;
     return block1([txt1]);
   }
@@ -384,10 +401,11 @@ exports[`Reactivity: useState very simple use, with initial value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Comp(ctx, node, key = \\"\\") {
     let txt1 = ctx['contextObj'].value;
     return block1([txt1]);
   }

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

@@ -4,10 +4,11 @@ exports[`app App supports env with getters/setters 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/> <block-text-1/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     let txt1 = ctx['env'].someVal;
     let txt2 = Object.keys(ctx['env'].services);
     return block1([txt1, txt2]);
@@ -19,10 +20,11 @@ exports[`app app: clear scheduler tasks and destroy cancelled nodes immediately
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`B\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
-    let b2, b3;
+  return function xml_template_1000_A(ctx, node, key = \\"\\") {
+    let b2,b3;
     b2 = text(\`A\`);
     if (ctx['state'].value) {
       b3 = comp1({}, key + \`__1\`, node, this, null);
@@ -32,12 +34,13 @@ exports[`app app: clear scheduler tasks and destroy cancelled nodes immediately
 }"
 `;
 
-exports[`app app: clear scheduler tasks and destroy cancelled nodes immediately on destroy 3`] = `
+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;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_B(ctx, node, key = \\"\\") {
     return text(\`B\`);
   }
 }"
@@ -47,37 +50,26 @@ exports[`app can configure an app with props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].value;
     return block1([txt1]);
   }
 }"
 `;
 
-exports[`app can load templates from an object name-string 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div class=\\"hello\\">hello</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
 exports[`app can mount app in an iframe 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div class=\\"my-div\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -87,10 +79,11 @@ exports[`app destroy remove the widget from the DOM 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -100,10 +93,11 @@ exports[`app warnIfNoStaticProps works as expected 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Root(ctx, node, key = \\"\\") {
     let txt1 = ctx['message'];
     return block1([txt1]);
   }

tests/app/app.test.ts

@@ -8,7 +8,6 @@ import {
   useLogLifecycle,
   makeDeferred,
   nextMicroTick,
-  steps,
 } from "../helpers";
 
 let fixture: HTMLElement;
@@ -124,64 +123,23 @@ describe("app", () => {
 
     const app = new App(A);
     const comp = await app.mount(fixture);
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "A:setup",
-        "A:willStart",
-        "A:willRender",
-        "A:rendered",
-        "A:mounted",
-      ]
-    `);
+    expect(["A:setup", "A:willStart", "A:willRender", "A:rendered", "A:mounted"]).toBeLogged();
 
     comp.state.value = true;
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "A:willRender",
-        "B:setup",
-        "B:willStart",
-        "A:rendered",
-      ]
-    `);
+    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(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "A:willRender",
-        "B:setup",
-        "B:willStart",
-        "A:rendered",
-      ]
-    `);
+    expect(["A:willRender", "B:setup", "B:willStart", "A:rendered"]).toBeLogged();
 
     app.destroy();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "A:willUnmount",
-        "B:willDestroy",
-        "A:willDestroy",
-        "B:willDestroy",
-      ]
-    `);
-  });
-
-  test("can load templates from an object name-string", async () => {
-    const templates = {
-      hello: `<div class="hello">hello</div>`,
-      world: `<div>world</div>`,
-    };
-    class SomeComponent extends Component {
-      static template = "hello";
-    }
-
-    const app = new App(SomeComponent, { templates });
-    await app.mount(fixture);
-    expect(fixture.querySelector(".hello")).toBeDefined();
-    // Only the "hello" template is used, so the "world" template is not yet loaded
-    expect(Object.keys(app.templates)).toEqual(["hello"]);
-    expect(Object.keys(app.rawTemplates)).toEqual(["hello", "world"]);
+    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);
@@ -156,9 +156,10 @@ exports[`t-on handler is bound to proper owner, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"main\\"
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function main(ctx, node, key = \\"\\") {
     return callTemplate_1.call(this, ctx, node, key + \`__1\`);
   }
 }"
@@ -168,10 +169,11 @@ exports[`t-on handler is bound to proper owner, part 3 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"sub\\"
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function sub(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['add'], ctx];
     return block1([hdlr1]);
   }
@@ -183,17 +185,18 @@ exports[`t-on handler is bound to proper owner, part 4 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  // Template name: \\"main\\"
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function main(ctx, node, key = \\"\\") {
     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);
     }
@@ -206,10 +209,11 @@ exports[`t-on handler is bound to proper owner, part 4 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"sub\\"
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function sub(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['add'], ctx];
     return block1([hdlr1]);
   }
@@ -348,7 +352,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'];
@@ -471,11 +475,12 @@ exports[`t-on t-on with t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"main\\"
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function main(ctx, node, key = \\"\\") {
     const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
@@ -486,10 +491,11 @@ exports[`t-on t-on with t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"sub\\"
   
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function sub(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['update'], ctx];
     return block1([hdlr1]);
   }
@@ -500,11 +506,12 @@ exports[`t-on t-on, with arguments and t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"main\\"
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function main(ctx, node, key = \\"\\") {
     const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
@@ -515,10 +522,11 @@ exports[`t-on t-on, with arguments and t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"sub\\"
   
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function sub(ctx, node, key = \\"\\") {
     const v1 = ctx['this'];
     const v2 = ctx['value'];
     let hdlr1 = [()=>v1.update(v2), ctx];

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') {
@@ -84,6 +84,7 @@ exports[`misc global 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, isBoundary, withDefault, setContextValue, zero, withKey } = helpers;
+  // Template name: \\"caller\\"
   const callTemplate_1 = app.getTemplate(\`_callee-uses-foo\`);
   const callTemplate_2 = app.getTemplate(\`_callee-uses-foo\`);
   const callTemplate_3 = app.getTemplate(\`_callee-uses-foo\`);
@@ -93,17 +94,17 @@ exports[`misc global 1`] = `
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   let block4 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function caller(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 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 +113,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);
@@ -136,10 +137,11 @@ exports[`misc global 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { withDefault } = helpers;
+  // Template name: \\"_callee-uses-foo\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function _callee_uses_foo(ctx, node, key = \\"\\") {
     let txt1 = withDefault(ctx['foo'], \`foo default\`);
     return block1([txt1]);
   }
@@ -151,10 +153,11 @@ exports[`misc global 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
+  // Template name: \\"_callee-asc\\"
   
   let block1 = createBlock(\`<año block-attribute-0=\\"falló\\"><block-child-0/></año>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function _callee_asc(ctx, node, key = \\"\\") {
     let attr1 = 'agüero';
     const b2 = ctx[zero];
     return block1([attr1], [b2]);
@@ -167,10 +170,11 @@ exports[`misc global 4`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
+  // Template name: \\"_callee-asc-toto\\"
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function _callee_asc_toto(ctx, node, key = \\"\\") {
     const b3 = text(\`toto default\`);
     const b2 = safeOutput(ctx['toto'], b3);
     return block1([], [b2]);
@@ -217,13 +221,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 +236,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 +267,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 +288,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__/simple_templates.test.ts.snap

@@ -158,8 +158,9 @@ exports[`simple templates, mostly static empty string in a template set 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"potato\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function potato(ctx, node, key = \\"\\") {
     return text(\`\`);
   }
 }"

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();
@@ -56,12 +56,13 @@ exports[`properly support svg svg creates new block if it is within html -- 2 1`
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   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 = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     let b3;
     if (ctx['hasPath']) {
       b3 = block3();
@@ -76,11 +77,12 @@ exports[`properly support svg svg creates new block if it is within html 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   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 = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     const b2 = block2();
     return block1([], [b2]);
   }
@@ -91,11 +93,12 @@ exports[`properly support svg svg namespace added to sub templates if root tag i
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"svg\\"
   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 = \\"\\") {
+  return function svg_Svg(ctx, node, key = \\"\\") {
     const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
@@ -106,10 +109,11 @@ exports[`properly support svg svg namespace added to sub templates if root tag i
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"path\\"
   
-  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 function path(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -120,8 +124,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_esc.test.ts.snap

@@ -177,18 +177,19 @@ exports[`t-esc t-esc=0 is escaped 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
+  // Template name: \\"main\\"
   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 = \\"\\") {
+  return function main(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]);
   }
 }"
 `;
@@ -198,10 +199,11 @@ exports[`t-esc t-esc=0 is escaped 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
+  // Template name: \\"sub\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function sub(ctx, node, key = \\"\\") {
     let txt1 = ctx[zero];
     return block1([txt1]);
   }

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']);
@@ -87,9 +87,9 @@ exports[`t-foreach iterate, Map param 1`] = `
     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\`] = v_block1[i1];
       ctx[\`item_index\`] = i1;
-      ctx[\`item_value\`] = v_block1[i1];
+      ctx[\`item_value\`] = k_block1[i1];
       const key1 = ctx['item_index'];
       const b3 = text(\` [\`);
       const b4 = text(ctx['item_index']);
@@ -115,9 +115,9 @@ exports[`t-foreach iterate, Set param 1`] = `
     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\`] = v_block1[i1];
       ctx[\`item_index\`] = i1;
-      ctx[\`item_value\`] = v_block1[i1];
+      ctx[\`item_value\`] = k_block1[i1];
       const key1 = ctx['item_index'];
       const b3 = text(\` [\`);
       const b4 = text(ctx['item_index']);
@@ -145,9 +145,9 @@ exports[`t-foreach iterate, dict param 1`] = `
     ctx = Object.create(ctx);
     const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['value']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = 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']);
@@ -174,9 +174,9 @@ exports[`t-foreach iterate, generator param 1`] = `
     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\`] = v_block1[i1];
       ctx[\`item_index\`] = i1;
-      ctx[\`item_value\`] = v_block1[i1];
+      ctx[\`item_value\`] = k_block1[i1];
       const key1 = ctx['item_index'];
       const b3 = text(\` [\`);
       const b4 = text(ctx['item_index']);
@@ -202,9 +202,9 @@ exports[`t-foreach iterate, iterable param 1`] = `
     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\`] = v_block1[i1];
       ctx[\`item_index\`] = i1;
-      ctx[\`item_value\`] = v_block1[i1];
+      ctx[\`item_value\`] = k_block1[i1];
       const key1 = ctx['item_index'];
       const b3 = text(\` [\`);
       const b4 = text(ctx['item_index']);
@@ -232,12 +232,12 @@ exports[`t-foreach iterate, position 1`] = `
     ctx = Object.create(ctx);
     const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(5));;
     for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`elem\`] = 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 +256,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 +268,7 @@ exports[`t-foreach simple iteration (in a node) 1`] = `
     ctx = Object.create(ctx);
     const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);;
     for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = k_block2[i1];
+      ctx[\`item\`] = v_block2[i1];
       const key1 = ctx['item'];
       c_block2[i1] = withKey(text(ctx['item']), key1);
     }
@@ -316,7 +288,7 @@ exports[`t-foreach simple iteration 1`] = `
     ctx = Object.create(ctx);
     const [k_block1, v_block1, l_block1, c_block1] = prepareList([3,2,1]);;
     for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = k_block1[i1];
+      ctx[\`item\`] = v_block1[i1];
       const key1 = ctx['item'];
       c_block1[i1] = withKey(text(ctx['item']), key1);
     }
@@ -338,7 +310,7 @@ exports[`t-foreach simple iteration with two nodes inside 1`] = `
     ctx = Object.create(ctx);
     const [k_block1, v_block1, l_block1, c_block1] = prepareList([3,2,1]);;
     for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = k_block1[i1];
+      ctx[\`item\`] = v_block1[i1];
       const key1 = ctx['item'];
       let txt1 = ctx['item'];
       const b3 = block3([txt1]);
@@ -356,31 +328,32 @@ exports[`t-foreach t-call with body in t-foreach in t-foreach 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
+  // Template name: \\"main\\"
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/><span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span></div>\`);
   let block6 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function main(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 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;
@@ -408,8 +381,9 @@ exports[`t-foreach t-call with body in t-foreach in t-foreach 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"sub\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function sub(ctx, node, key = \\"\\") {
     const b2 = text(\` [\`);
     const b3 = text(ctx['a']);
     const b4 = text(\`] [\`);
@@ -427,29 +401,30 @@ exports[`t-foreach t-call without body in t-foreach in t-foreach 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  // Template name: \\"main\\"
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/><span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span></div>\`);
   let block6 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function main(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`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);
       }
@@ -474,8 +449,9 @@ exports[`t-foreach t-call without body in t-foreach in t-foreach 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  // Template name: \\"sub\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function sub(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"c\\", 'x'+'_'+ctx['a']+'_'+ctx['b']);
@@ -503,12 +479,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 +513,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 +540,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 +568,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 +591,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 +618,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

@@ -32,18 +32,19 @@ exports[`t-out multiple calls to t-out 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
+  // Template name: \\"main\\"
   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 = \\"\\") {
+  return function main(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]);
   }
 }"
 `;
@@ -53,10 +54,11 @@ exports[`t-out multiple calls to t-out 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
+  // Template name: \\"sub\\"
   
   let block1 = createBlock(\`<div><block-child-0/><div>Greeter</div><block-child-1/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function sub(ctx, node, key = \\"\\") {
     const b2 = ctx[zero];
     const b3 = ctx[zero];
     return block1([], [b2, b3]);
@@ -99,18 +101,19 @@ exports[`t-out t-out 0 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
+  // Template name: \\"caller\\"
   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 = \\"\\") {
+  return function caller(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]);
   }
 }"
 `;
@@ -120,10 +123,11 @@ exports[`t-out t-out 0 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
+  // Template name: \\"_basic-callee\\"
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function _basic_callee(ctx, node, key = \\"\\") {
     const b2 = ctx[zero];
     return block1([], [b2]);
   }
@@ -309,7 +313,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

@@ -48,11 +48,12 @@ exports[`t-ref ref in a t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"main\\"
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function main(ctx, node, key = \\"\\") {
     const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
@@ -63,10 +64,11 @@ exports[`t-ref ref in a t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"sub\\"
   
   let block1 = createBlock(\`<div>1<span block-ref=\\"0\\"/>2</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function sub(ctx, node, key = \\"\\") {
     let ref1 = (el) => this.__owl__.setRef((\`name\`), el);
     return block1([ref1]);
   }
@@ -105,7 +107,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 {
@@ -219,11 +219,12 @@ exports[`t-set t-set can't alter from within callee 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  // Template name: \\"main\\"
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function main(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"iter\\", 'source');
@@ -240,10 +241,11 @@ exports[`t-set t-set can't alter from within callee 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  // Template name: \\"sub\\"
   
   let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function sub(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     let txt1 = ctx['iter'];
@@ -259,11 +261,12 @@ exports[`t-set t-set can't alter in t-call body 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  // Template name: \\"main\\"
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function main(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"iter\\", 'source');
@@ -284,10 +287,11 @@ exports[`t-set t-set can't alter in t-call body 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  // Template name: \\"sub\\"
   
   let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function sub(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     let txt1 = ctx['iter'];
@@ -351,7 +355,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 +385,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 +415,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 +445,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/__snapshots__/template_set.test.ts.snap

@@ -4,10 +4,11 @@ exports[`loading templates addTemplates does not modify its xml document in plac
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"hey\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function hey(ctx, node, key = \\"\\") {
     let txt1 = ctx['value'];
     return block1([txt1]);
   }
@@ -18,10 +19,11 @@ exports[`loading templates can initialize qweb with a string 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"hey\\"
   
   let block1 = createBlock(\`<div>jupiler</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function hey(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -31,10 +33,11 @@ exports[`loading templates can initialize qweb with an XMLDocument 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"hey\\"
   
   let block1 = createBlock(\`<div>jupiler</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function hey(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -44,11 +47,12 @@ exports[`loading templates can load a few templates from a xml string 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"main\\"
   const callTemplate_1 = app.getTemplate(\`items\`);
   
   let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function main(ctx, node, key = \\"\\") {
     const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
@@ -59,11 +63,12 @@ exports[`loading templates can load a few templates from a xml string 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"items\\"
   
   let block2 = createBlock(\`<li>ok</li>\`);
   let block3 = createBlock(\`<li>foo</li>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function items(ctx, node, key = \\"\\") {
     const b2 = block2();
     const b3 = block3();
     return multi([b2, b3]);
@@ -75,11 +80,12 @@ exports[`loading templates can load a few templates from an XMLDocument 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"main\\"
   const callTemplate_1 = app.getTemplate(\`items\`);
   
   let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function main(ctx, node, key = \\"\\") {
     const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
@@ -90,11 +96,12 @@ exports[`loading templates can load a few templates from an XMLDocument 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"items\\"
   
   let block2 = createBlock(\`<li>ok</li>\`);
   let block3 = createBlock(\`<li>foo</li>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function items(ctx, node, key = \\"\\") {
     const b2 = block2();
     const b3 = block3();
     return multi([b2, b3]);

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

@@ -5,8 +5,9 @@ exports[`translation support body of t-sets are translated 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"label\\", \`translated\`);
@@ -20,8 +21,9 @@ exports[`translation support body of t-sets inside translation=off are not trans
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"label\\", \`untranslated\`);
@@ -35,6 +37,7 @@ exports[`translation support body of t-sets with html content are translated 1`]
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div>translated</div>\`);
   
@@ -42,7 +45,7 @@ exports[`translation support body of t-sets with html content are translated 1`]
     return block1();
   }
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     ctx[\`label\`] = new LazyValue(value1, ctx, this, node, key);
@@ -56,6 +59,7 @@ exports[`translation support body of t-sets with text and html content are trans
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block3 = createBlock(\`<div>translated</div>\`);
   
@@ -65,7 +69,7 @@ exports[`translation support body of t-sets with text and html content are trans
     return multi([b2, b3]);
   }
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     ctx[\`label\`] = new LazyValue(value1, ctx, this, node, key);
@@ -78,10 +82,11 @@ exports[`translation support can set and remove translatable attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div tomato=\\"word\\" potato=\\"mot\\" title=\\"mot\\" label=\\"word\\">text</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -91,10 +96,11 @@ exports[`translation support can translate node content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div>mot</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -104,10 +110,11 @@ exports[`translation support does not translate node content if disabled 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><span>mot</span><span>word</span></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -117,10 +124,11 @@ exports[`translation support some attributes are translated 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><p label=\\"mot\\">mot</p><p title=\\"mot\\">mot</p><p placeholder=\\"mot\\">mot</p><p alt=\\"mot\\">mot</p><p something=\\"word\\">mot</p></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -131,8 +139,9 @@ exports[`translation support t-set and falsy t-value: t-body are translated 1`]
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"label\\", withDefault(false, \`translated\`));
@@ -145,10 +154,11 @@ exports[`translation support translation is done on the trimmed text, with extra
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div> mot </div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -158,10 +168,11 @@ exports[`translation support translation works, even if initial string has inner
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div>un mot</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     return block1();
   }
 }"

tests/compiler/parser.test.ts

@@ -1,7 +1,4 @@
-import { parseXML } from "../../src/common/utils";
-import { ASTType, parse as _parse } from "../../src/compiler/parser";
-
-const parse = (template: string) => _parse(parseXML(`<t>${template}</t>`).firstChild as Element);
+import { ASTType, parse } from "../../src/compiler/parser";
 
 describe("qweb parser", () => {
   // ---------------------------------------------------------------------------

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

@@ -110,7 +110,7 @@ describe("t-foreach", () => {
       <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 expected = ` [0: 1 a]  [1: 2 b]  [2: 3 c] `;
     const context = {
       value: new Map([
         ["a", 1],
@@ -131,15 +131,6 @@ describe("t-foreach", () => {
     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">

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

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

@@ -4,10 +4,11 @@ exports[`event handling Invalid handler throws an error 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">click</button>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Parent(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['dosomething'], ctx];
     return block1([hdlr1]);
   }
@@ -18,10 +19,11 @@ exports[`event handling handler is not called if component is destroyed 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span block-handler-0=\\"click\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Parent(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['click'], ctx];
     return block1([hdlr1]);
   }
@@ -32,11 +34,12 @@ exports[`event handling handler receive the event as argument 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<span block-handler-0=\\"click\\"><block-child-0/><block-text-1/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['inc'], ctx];
     const b2 = comp1({}, key + \`__1\`, node, this, null);
     let txt1 = ctx['state'].value;
@@ -49,10 +52,11 @@ exports[`event handling handler receive the event as argument 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div>simple vnode</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -62,10 +66,11 @@ exports[`event handling handler works when app is mounted in an iframe 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span block-handler-0=\\"click\\">click me</span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Parent(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['inc'], ctx];
     return block1([hdlr1]);
   }
@@ -76,11 +81,12 @@ exports[`event handling input blur event is not called if component is destroyed
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><textarea/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].cond) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
@@ -94,10 +100,11 @@ exports[`event handling input blur event is not called if component is destroyed
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<input block-handler-0=\\"blur\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['blur'], ctx];
     return block1([hdlr1]);
   }
@@ -109,15 +116,16 @@ exports[`event handling objects from scope are properly captured by t-on 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<div class=\\"item\\" block-handler-0=\\"click\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Parent(ctx, node, key = \\"\\") {
     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'];
@@ -134,10 +142,11 @@ exports[`event handling support for callable expression in event handler 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/><input type=\\"text\\" block-handler-1=\\"input\\"/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Counter(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].value;
     let hdlr1 = [ctx['obj'].onInput, ctx];
     return block1([txt1, hdlr1]);
@@ -150,15 +159,16 @@ exports[`event handling t-on with handler bound to dynamic argument on a t-forea
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<div class=\\"item\\" block-handler-0=\\"click\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Parent(ctx, node, key = \\"\\") {
     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

@@ -4,9 +4,10 @@ exports[`basics basic use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"p\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({p: 1}, key + \`__1\`, node, this, null);
   }
 }"
@@ -16,10 +17,11 @@ exports[`basics basic use 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span>child<block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].p;
     return block1([txt1]);
   }
@@ -30,11 +32,12 @@ exports[`basics can select a sub widget  1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1001\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   const comp2 = app.createComponent(\`OtherChild\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
-    let b2, b3;
+  return function xml_template_1001_Parent(ctx, node, key = \\"\\") {
+    let b2,b3;
     if (ctx['env'].options.flag) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
     }
@@ -50,10 +53,11 @@ exports[`basics can select a sub widget  2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span>CHILD 1</span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -63,10 +67,11 @@ exports[`basics can select a sub widget  3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   
   let block1 = createBlock(\`<div>CHILD 2</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_OtherChild(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -76,11 +81,12 @@ exports[`basics can select a sub widget, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1001\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   const comp2 = app.createComponent(\`OtherChild\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
-    let b2, b3;
+  return function xml_template_1001_Parent(ctx, node, key = \\"\\") {
+    let b2,b3;
     if (ctx['state'].flag) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
     }
@@ -96,10 +102,11 @@ exports[`basics can select a sub widget, part 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span>CHILD 1</span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -109,10 +116,11 @@ exports[`basics can select a sub widget, part 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   
   let block1 = createBlock(\`<div>CHILD 2</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_OtherChild(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -122,9 +130,10 @@ exports[`basics sub widget is interactive 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"p\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({p: 1}, key + \`__1\`, node, this, null);
   }
 }"
@@ -134,10 +143,11 @@ exports[`basics sub widget is interactive 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><button block-handler-0=\\"click\\">click</button>child<block-text-1/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['inc'], ctx];
     let txt1 = ctx['state'].val;
     return block1([hdlr1, txt1]);
@@ -149,11 +159,12 @@ exports[`basics top level sub widget with a parent 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1001\\"
   const comp1 = app.createComponent(\`ComponentB\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_ComponentA(ctx, node, key = \\"\\") {
     const b2 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -164,9 +175,10 @@ exports[`basics top level sub widget with a parent 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`ComponentC\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_ComponentB(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
@@ -176,10 +188,11 @@ exports[`basics top level sub widget with a parent 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span>Hello</span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_ComponentC(ctx, node, key = \\"\\") {
     return block1();
   }
 }"

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

@@ -4,11 +4,12 @@ exports[`hooks autofocus hook input in a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><input block-ref=\\"0\\"/><block-child-0/></div>\`);
   let block2 = createBlock(\`<input block-ref=\\"0\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     let b2;
     let ref1 = (el) => this.__owl__.setRef((\`input1\`), el);
     if (ctx['state'].flag) {
@@ -24,10 +25,11 @@ exports[`hooks autofocus hook simple input 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><input block-ref=\\"0\\"/><input block-ref=\\"1\\"/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     let ref1 = (el) => this.__owl__.setRef((\`input1\`), el);
     let ref2 = (el) => this.__owl__.setRef((\`input2\`), el);
     return block1([ref1, ref2]);
@@ -39,9 +41,10 @@ exports[`hooks can use onWillStart, onWillUpdateProps 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`MyComponent\`, true, false, false, [\\"value\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_App(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
   }
 }"
@@ -51,10 +54,11 @@ exports[`hooks can use onWillStart, onWillUpdateProps 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_MyComponent(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].value;
     return block1([txt1]);
   }
@@ -65,10 +69,11 @@ exports[`hooks can use useComponent 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -78,10 +83,11 @@ exports[`hooks can use useEnv 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     let txt1 = ctx['env'].val;
     return block1([txt1]);
   }
@@ -92,10 +98,11 @@ exports[`hooks mounted callbacks should be called in reverse order from willUnmo
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].value;
     return block1([txt1]);
   }
@@ -106,9 +113,10 @@ exports[`hooks parent and child env (with useChildSubEnv then useSubEnv) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = text(ctx['env'].val);
     const b3 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
@@ -120,10 +128,11 @@ exports[`hooks parent and child env (with useChildSubEnv then useSubEnv) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block2 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['env'].hasParent) {
       let txt1 = ctx['env'].val;
@@ -138,9 +147,10 @@ exports[`hooks parent and child env (with useChildSubEnv) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = text(ctx['env'].val);
     const b3 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
@@ -152,10 +162,11 @@ exports[`hooks parent and child env (with useChildSubEnv) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['env'].val;
     return block1([txt1]);
   }
@@ -166,9 +177,10 @@ exports[`hooks parent and child env (with useSubEnv) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = text(ctx['env'].val);
     const b3 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
@@ -180,10 +192,11 @@ exports[`hooks parent and child env (with useSubEnv) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['env'].val;
     return block1([txt1]);
   }
@@ -194,10 +207,11 @@ exports[`hooks two different call to willPatch/patched should work 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].value;
     return block1([txt1]);
   }
@@ -208,10 +222,11 @@ exports[`hooks useChildSubEnv does not pollute user env 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     let txt1 = ctx['env'].val;
     return block1([txt1]);
   }
@@ -222,9 +237,10 @@ exports[`hooks useChildSubEnv supports arbitrary descriptor 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Test(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
@@ -234,10 +250,11 @@ exports[`hooks useChildSubEnv supports arbitrary descriptor 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/> <block-text-1/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['env'].someVal;
     let txt2 = ctx['env'].someVal2;
     return block1([txt1, txt2]);
@@ -249,10 +266,11 @@ exports[`hooks useEffect hook dependencies prevent effects from rerunning when u
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_MyComponent(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -262,10 +280,11 @@ exports[`hooks useEffect hook effect can depend on stuff in dom 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_MyComponent(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].value) {
       let ref1 = (el) => this.__owl__.setRef((\`div\`), el);
@@ -280,10 +299,11 @@ exports[`hooks useEffect hook effect runs on mount, is reapplied on patch, and i
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_MyComponent(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -293,10 +313,11 @@ exports[`hooks useEffect hook effect with empty dependency list never reruns 1`]
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_MyComponent(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].value;
     return block1([txt1]);
   }
@@ -307,10 +328,11 @@ exports[`hooks useEffect hook properly behaves when the effect function throws 1
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_MyComponent(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -320,9 +342,10 @@ exports[`hooks useExternalListener 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`MyComponent\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_App(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
@@ -336,10 +359,11 @@ exports[`hooks useExternalListener 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_MyComponent(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].value;
     return block1([txt1]);
   }
@@ -350,10 +374,11 @@ exports[`hooks useRef hook: basic use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><button block-ref=\\"0\\"><block-text-1/></button></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Counter(ctx, node, key = \\"\\") {
     let ref1 = (el) => this.__owl__.setRef((\`button\`), el);
     let txt1 = ctx['value'];
     return block1([ref1, txt1]);
@@ -365,10 +390,11 @@ exports[`hooks useSubEnv modifies user env 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     let txt1 = ctx['env'].val;
     return block1([txt1]);
   }
@@ -379,9 +405,10 @@ exports[`hooks useSubEnv supports arbitrary descriptor 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Test(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
@@ -391,10 +418,11 @@ exports[`hooks useSubEnv supports arbitrary descriptor 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/> <block-text-1/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['env'].someVal;
     let txt2 = ctx['env'].someVal2;
     return block1([txt1, txt2]);

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

@@ -4,10 +4,11 @@ exports[`lifecycle hooks basic checks for a component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span>test</span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -17,12 +18,13 @@ exports[`lifecycle hooks component semantics 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1004\\"
   const comp1 = app.createComponent(\`B\`, true, false, false, []);
   const comp2 = app.createComponent(\`C\`, true, false, false, []);
   
   let block1 = createBlock(\`<div>A<block-child-0/><block-child-1/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1004_A(ctx, node, key = \\"\\") {
     const b2 = comp1({}, key + \`__1\`, node, this, null);
     const b3 = comp2({}, key + \`__2\`, node, this, null);
     return block1([], [b2, b3]);
@@ -34,10 +36,11 @@ exports[`lifecycle hooks component semantics 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div>B</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_B(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -47,14 +50,15 @@ exports[`lifecycle hooks component semantics 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1003\\"
   const comp1 = app.createComponent(\`D\`, true, false, false, []);
   const comp2 = app.createComponent(\`E\`, true, false, false, []);
   const comp3 = app.createComponent(\`F\`, true, false, false, []);
   
   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;
+  return function xml_template_1003_C(ctx, node, key = \\"\\") {
+    let b2,b3,b4;
     b2 = comp1({}, key + \`__1\`, node, this, null);
     if (ctx['state'].flag) {
       b3 = comp2({}, key + \`__2\`, node, this, null);
@@ -70,10 +74,11 @@ exports[`lifecycle hooks component semantics 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   
   let block1 = createBlock(\`<div>D</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_D(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -83,23 +88,25 @@ exports[`lifecycle hooks component semantics 5`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1001\\"
   
   let block1 = createBlock(\`<div>E</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_E(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
 `;
 
-exports[`lifecycle hooks component semantics 7`] = `
+exports[`lifecycle hooks component semantics 6`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1002\\"
   
   let block1 = createBlock(\`<div>F</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1002_F(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -109,11 +116,12 @@ exports[`lifecycle hooks components are unmounted and destroyed if no longer in
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"n\\"]);
   
   let block2 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
       const b3 = comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
@@ -128,10 +136,11 @@ exports[`lifecycle hooks components are unmounted and destroyed if no longer in
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].n;
     return block1([txt1]);
   }
@@ -142,9 +151,10 @@ exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].ok) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
@@ -158,10 +168,11 @@ exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -171,10 +182,11 @@ exports[`lifecycle hooks destroy new children before being mountged 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
-    let b2, b3, b4;
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
+    let b2,b3,b4;
     b2 = text(\`before\`);
     if (ctx['state'].flag) {
       b3 = comp1({}, key + \`__1\`, node, this, null);
@@ -185,12 +197,13 @@ exports[`lifecycle hooks destroy new children before being mountged 1`] = `
 }"
 `;
 
-exports[`lifecycle hooks destroy new children before being mountged 3`] = `
+exports[`lifecycle hooks destroy new children before being mountged 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(\`child\`);
   }
 }"
@@ -200,11 +213,12 @@ exports[`lifecycle hooks hooks are called in proper order in widget creation/des
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -215,10 +229,11 @@ exports[`lifecycle hooks hooks are called in proper order in widget creation/des
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -228,9 +243,10 @@ exports[`lifecycle hooks lifecycle callbacks are bound to component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Test\`, true, false, false, [\\"rev\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({rev: ctx['rev']}, key + \`__1\`, node, this, null);
   }
 }"
@@ -240,8 +256,9 @@ exports[`lifecycle hooks lifecycle callbacks are bound to component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     return text(ctx['props'].rev);
   }
 }"
@@ -251,11 +268,12 @@ exports[`lifecycle hooks lifecycle semantics 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"a\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = comp1({a: ctx['state'].a}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -266,10 +284,11 @@ exports[`lifecycle hooks lifecycle semantics 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -279,9 +298,10 @@ exports[`lifecycle hooks lifecycle semantics, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1001\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_Parent(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
@@ -291,26 +311,28 @@ exports[`lifecycle hooks lifecycle semantics, part 2 1`] = `
 }"
 `;
 
-exports[`lifecycle hooks lifecycle semantics, part 2 3`] = `
+exports[`lifecycle hooks lifecycle semantics, part 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Child(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
 
-exports[`lifecycle hooks lifecycle semantics, part 2 4`] = `
+exports[`lifecycle hooks lifecycle semantics, part 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_GrandChild(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -320,9 +342,10 @@ exports[`lifecycle hooks lifecycle semantics, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1001\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_Parent(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
@@ -336,9 +359,10 @@ exports[`lifecycle hooks lifecycle semantics, part 4 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1001\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_Parent(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
@@ -348,26 +372,28 @@ exports[`lifecycle hooks lifecycle semantics, part 4 1`] = `
 }"
 `;
 
-exports[`lifecycle hooks lifecycle semantics, part 4 3`] = `
+exports[`lifecycle hooks lifecycle semantics, part 4 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Child(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
 
-exports[`lifecycle hooks lifecycle semantics, part 4 4`] = `
+exports[`lifecycle hooks lifecycle semantics, part 4 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_GrandChild(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -377,9 +403,10 @@ exports[`lifecycle hooks lifecycle semantics, part 5 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
@@ -393,10 +420,11 @@ exports[`lifecycle hooks lifecycle semantics, part 5 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -406,9 +434,10 @@ exports[`lifecycle hooks lifecycle semantics, part 6 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
   }
 }"
@@ -418,10 +447,11 @@ exports[`lifecycle hooks lifecycle semantics, part 6 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -431,10 +461,11 @@ exports[`lifecycle hooks mounted hook is called if mounted in DOM 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -444,9 +475,10 @@ exports[`lifecycle hooks mounted hook is called on every mount, not just the fir
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
@@ -460,10 +492,11 @@ exports[`lifecycle hooks mounted hook is called on every mount, not just the fir
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div>child</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -473,11 +506,12 @@ exports[`lifecycle hooks mounted hook is called on subcomponents, in proper orde
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -488,10 +522,11 @@ exports[`lifecycle hooks mounted hook is called on subcomponents, in proper orde
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -501,11 +536,12 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1001\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_Parent(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
@@ -519,11 +555,12 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`ChildChild\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Child(ctx, node, key = \\"\\") {
     const b2 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -534,10 +571,11 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_ChildChild(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -547,9 +585,10 @@ exports[`lifecycle hooks onWillRender 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"someValue\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({someValue: ctx['state'].value}, key + \`__1\`, node, this, null);
   }
 }"
@@ -559,10 +598,11 @@ exports[`lifecycle hooks onWillRender 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['increment'], ctx];
     let txt1 = ctx['state'].value;
     return block1([hdlr1, txt1]);
@@ -574,11 +614,12 @@ exports[`lifecycle hooks patched hook is called after updateProps 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"a\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = comp1({a: ctx['state'].a}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -589,10 +630,11 @@ exports[`lifecycle hooks patched hook is called after updateProps 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -602,10 +644,11 @@ exports[`lifecycle hooks patched hook is called after updating State 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].a;
     return block1([txt1]);
   }
@@ -616,10 +659,11 @@ exports[`lifecycle hooks render in mounted 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Parent(ctx, node, key = \\"\\") {
     let txt1 = ctx['patched'];
     return block1([txt1]);
   }
@@ -630,10 +674,11 @@ exports[`lifecycle hooks render in patched 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Parent(ctx, node, key = \\"\\") {
     let txt1 = ctx['patched'];
     return block1([txt1]);
   }
@@ -644,10 +689,11 @@ exports[`lifecycle hooks render in willPatch 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Parent(ctx, node, key = \\"\\") {
     let txt1 = ctx['patched'];
     return block1([txt1]);
   }
@@ -658,9 +704,10 @@ exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly calle
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
@@ -674,10 +721,11 @@ exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly calle
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -687,10 +735,11 @@ exports[`lifecycle hooks timeout in onWillStart emits a warning 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -700,9 +749,10 @@ exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"prop\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const props1 = {prop: ctx['state'].prop};
     helpers.validateProps(\`Child\`, props1, this);
     return comp1(props1, key + \`__1\`, node, this, null);
@@ -714,8 +764,9 @@ exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(\`\`);
   }
 }"
@@ -725,11 +776,12 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1001\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"n\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_Parent(ctx, node, key = \\"\\") {
     const b2 = comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -740,11 +792,12 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`ChildChild\`, true, false, false, [\\"n\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Child(ctx, node, key = \\"\\") {
     const b2 = comp1({n: ctx['props'].n}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -755,10 +808,11 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_ChildChild(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].n;
     return block1([txt1]);
   }
@@ -769,9 +823,10 @@ exports[`lifecycle hooks willStart hook is called on sub component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
@@ -781,10 +836,11 @@ exports[`lifecycle hooks willStart hook is called on sub component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -794,10 +850,11 @@ exports[`lifecycle hooks willStart is called 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span>simple vnode</span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -807,10 +864,11 @@ exports[`lifecycle hooks willStart is called with component as this 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span>simple vnode</span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -820,13 +878,14 @@ exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   let block3 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
-    let b2, b3;
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
+    let b2,b3;
     if (ctx['state'].ok) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
     } else {
@@ -841,10 +900,11 @@ exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -854,9 +914,10 @@ exports[`lifecycle hooks willUpdateProps hook is called 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"n\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
   }
 }"
@@ -866,10 +927,11 @@ exports[`lifecycle hooks willUpdateProps hook is called 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].n;
     return block1([txt1]);
   }

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

@@ -5,13 +5,14 @@ exports[`.alike suffix in a list 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Todo\`, true, false, false, [\\"todo\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     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'];
@@ -26,10 +27,11 @@ exports[`.alike suffix in a list 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/><block-child-0/></button>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Todo(ctx, node, key = \\"\\") {
     let b2;
     let hdlr1 = [ctx['props'].toggle, ctx];
     let txt1 = ctx['props'].todo.id;
@@ -45,9 +47,10 @@ exports[`.alike suffix in a simple case 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = text(ctx['state'].counter);
     const b3 = comp1({fn: ()=>1}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
@@ -59,8 +62,9 @@ exports[`.alike suffix in a simple case 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(ctx['props'].fn());
   }
 }"
@@ -70,11 +74,12 @@ exports[`basics accept ES6-like syntax for props (with getters) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"greetings\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = comp1({greetings: ctx['greetings']}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -85,10 +90,11 @@ exports[`basics accept ES6-like syntax for props (with getters) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].greetings;
     return block1([txt1]);
   }
@@ -100,13 +106,14 @@ exports[`basics arrow functions as prop correctly capture their scope 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"onClick\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     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'];
@@ -121,10 +128,11 @@ exports[`basics arrow functions as prop correctly capture their scope 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['props'].onClick, ctx];
     return block1([hdlr1]);
   }
@@ -135,11 +143,12 @@ exports[`basics explicit object prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = comp1({value: ctx['state'].val}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -150,10 +159,11 @@ exports[`basics explicit object prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].someval;
     return block1([txt1]);
   }
@@ -164,9 +174,10 @@ exports[`basics prop names can contain - 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"prop-name\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({'prop-name': 7}, key + \`__1\`, node, this, null);
   }
 }"
@@ -176,10 +187,11 @@ exports[`basics prop names can contain - 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props']['prop-name'];
     return block1([txt1]);
   }
@@ -190,9 +202,10 @@ exports[`basics support prop names that aren't valid bare object property names
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"some-dashed-prop\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({'some-dashed-prop': 5}, key + \`__1\`, node, this, null);
   }
 }"
@@ -202,10 +215,11 @@ exports[`basics support prop names that aren't valid bare object property names
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['props'].onClick, ctx];
     return block1([hdlr1]);
   }
@@ -217,6 +231,7 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -226,7 +241,7 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
     return block2();
   }
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     ctx[\`abc\`] = new LazyValue(value1, ctx, this, node, key);
@@ -241,10 +256,11 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/><block-child-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].val;
     const b2 = safeOutput(ctx['props'].val);
     return block1([txt1], [b2]);
@@ -257,11 +273,12 @@ exports[`basics t-set with a body expression can be used as textual prop 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"abc\\", \`42\`);
@@ -275,10 +292,11 @@ exports[`basics t-set with a body expression can be used as textual prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].val;
     return block1([txt1]);
   }
@@ -290,11 +308,12 @@ exports[`basics t-set works  1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"val\\", 42);
@@ -308,10 +327,11 @@ exports[`basics t-set works  2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].val;
     return block1([txt1]);
   }
@@ -322,9 +342,10 @@ exports[`basics template string in prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"propName\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({propName: \`1\${ctx['someVal']}3\`}, key + \`__1\`, node, this, null);
   }
 }"
@@ -334,8 +355,9 @@ exports[`basics template string in prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(\`\`);
   }
 }"
@@ -345,9 +367,10 @@ exports[`bound functions are considered 'alike' 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = text(ctx['state'].val);
     const b3 = comp1({fn: (ctx['someFunction']).bind(this)}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
@@ -359,8 +382,9 @@ exports[`bound functions are considered 'alike' 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(\`child\`);
   }
 }"
@@ -370,9 +394,10 @@ exports[`bound functions is not referentially equal after update 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({val: ctx['state'].val,fn: (ctx['someFunction']).bind(this)}, key + \`__1\`, node, this, null);
   }
 }"
@@ -382,8 +407,9 @@ exports[`bound functions is not referentially equal after update 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(ctx['props'].val);
   }
 }"
@@ -393,9 +419,10 @@ exports[`can bind function prop with bind suffix 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({doSomething: (ctx['doSomething']).bind(this)}, key + \`__1\`, node, this, null);
   }
 }"
@@ -405,8 +432,9 @@ exports[`can bind function prop with bind suffix 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(\`child\`);
   }
 }"
@@ -416,9 +444,10 @@ exports[`do not crash when binding anonymous function prop with bind suffix 1`]
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const v1 = ctx['this'];
     return comp1({doSomething: ((_val)=>v1.doSomething(_val)).bind(this)}, key + \`__1\`, node, this, null);
   }
@@ -429,8 +458,9 @@ exports[`do not crash when binding anonymous function prop with bind suffix 2`]
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(\`child\`);
   }
 }"

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

@@ -4,9 +4,10 @@ exports[`reactivity in lifecycle Child component doesn't render when state they
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"state\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].renderChild) {
       b2 = comp1({state: ctx['state']}, key + \`__1\`, node, this, null);
@@ -20,8 +21,9 @@ exports[`reactivity in lifecycle Child component doesn't render when state they
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(ctx['props'].state.content.a);
   }
 }"
@@ -31,9 +33,10 @@ exports[`reactivity in lifecycle Component is automatically subscribed to reacti
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"obj\\",\\"reactiveObj\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({obj: ctx['obj'],reactiveObj: ctx['reactiveObj']}, key + \`__1\`, node, this, null);
   }
 }"
@@ -43,8 +46,9 @@ exports[`reactivity in lifecycle Component is automatically subscribed to reacti
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     const b2 = text(ctx['props'].obj.a);
     const b3 = text(ctx['props'].reactiveObj.b);
     return multi([b2, b3]);
@@ -56,10 +60,11 @@ exports[`reactivity in lifecycle can use a state hook 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Counter(ctx, node, key = \\"\\") {
     let txt1 = ctx['counter'].value;
     return block1([txt1]);
   }
@@ -70,10 +75,11 @@ exports[`reactivity in lifecycle can use a state hook 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Comp(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].a;
     return block1([txt1]);
   }
@@ -84,10 +90,11 @@ exports[`reactivity in lifecycle can use a state hook on Map 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Counter(ctx, node, key = \\"\\") {
     let txt1 = ctx['counter'].get('value');
     return block1([txt1]);
   }
@@ -98,10 +105,11 @@ exports[`reactivity in lifecycle change state while mounting component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Comp(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].val;
     return block1([txt1]);
   }
@@ -112,11 +120,12 @@ exports[`reactivity in lifecycle state changes in willUnmount do not trigger rer
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
       b2 = comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
@@ -130,10 +139,11 @@ exports[`reactivity in lifecycle state changes in willUnmount do not trigger rer
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].val;
     let txt2 = ctx['state'].n;
     return block1([txt1, txt2]);
@@ -145,8 +155,9 @@ exports[`subscriptions subscriptions returns the keys and targets observed by th
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Comp(ctx, node, key = \\"\\") {
     return text(ctx['state'].a);
   }
 }"
@@ -156,9 +167,10 @@ exports[`subscriptions subscriptions returns the keys observed by the component
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"state\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = text(ctx['state'].a);
     const b3 = comp1({state: ctx['state']}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
@@ -170,8 +182,9 @@ exports[`subscriptions subscriptions returns the keys observed by the component
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(ctx['props'].state.b);
   }
 }"

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

@@ -4,10 +4,11 @@ exports[`refs basic use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     let ref1 = (el) => this.__owl__.setRef((\`div\`), el);
     return block1([ref1]);
   }
@@ -18,12 +19,13 @@ exports[`refs can use 2 refs with same name in a t-if/t-else situation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   let block3 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
-    let b2, b3;
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
+    let b2,b3;
     if (ctx['state'].value) {
       let ref1 = (el) => this.__owl__.setRef((\`coucou\`), el);
       b2 = block2([ref1]);
@@ -40,10 +42,11 @@ exports[`refs ref is unset when t-if goes to false after unrelated render 1`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block2 = createBlock(\`<div block-attribute-0=\\"class\\" block-ref=\\"1\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Comp(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].show) {
       let attr1 = ctx['state'].class;
@@ -59,11 +62,12 @@ exports[`refs refs and recursive templates 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   const comp1 = app.createComponent(\`Test\`, true, false, false, [\\"tree\\"]);
   
   let block1 = createBlock(\`<p block-ref=\\"0\\"><block-text-1/><block-child-0/></p>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     let b2;
     let ref1 = (el) => this.__owl__.setRef((\`root\`), el);
     let txt1 = ctx['props'].tree.value;
@@ -79,11 +83,12 @@ exports[`refs refs and t-key 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block2 = createBlock(\`<button block-handler-0=\\"click\\"/>\`);
   let block3 = createBlock(\`<p block-ref=\\"0\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     const v1 = ctx['state'];
     let hdlr1 = [()=>v1.renderId++, ctx];
     const b2 = block2([hdlr1]);
@@ -99,7 +104,8 @@ exports[`refs refs are properly bound in slots 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { markRaw } = helpers;
+  let { capture, markRaw } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><span class=\\"counter\\"><block-text-0/></span><block-child-0/></div>\`);
@@ -111,9 +117,10 @@ exports[`refs refs are properly bound in slots 1`] = `
     return block2([hdlr1, ref1]);
   }
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].val;
-    const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([txt1], [b3]);
   }
 }"
@@ -124,10 +131,11 @@ exports[`refs refs are properly bound in slots 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Dialog(ctx, node, key = \\"\\") {
     const b2 = callSlot(ctx, node, key, 'footer', false, {});
     return block1([], [b2]);
   }
@@ -139,11 +147,12 @@ exports[`refs throws if there are 2 same refs at the same time 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { makeRefWrapper } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   let block3 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     let refWrapper = makeRefWrapper(this.__owl__);
     let ref1 = refWrapper(\`coucou\`, (el) => this.__owl__.setRef((\`coucou\`), el));
     const b2 = block2([ref1]);

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

@@ -4,9 +4,10 @@ exports[`children, default props and renderings 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = text(ctx['state'].value);
     const b3 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
@@ -18,8 +19,9 @@ exports[`children, default props and renderings 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(\`child\`);
   }
 }"
@@ -29,9 +31,10 @@ exports[`force render in case of existing render 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1001\\"
   const comp1 = app.createComponent(\`B\`, true, false, false, [\\"val\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_A(ctx, node, key = \\"\\") {
     return comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
   }
 }"
@@ -41,9 +44,10 @@ exports[`force render in case of existing render 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`C\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_B(ctx, node, key = \\"\\") {
     const b2 = comp1({}, key + \`__1\`, node, this, null);
     const b3 = text(ctx['props'].val);
     return multi([b2, b3]);
@@ -55,8 +59,9 @@ exports[`force render in case of existing render 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_C(ctx, node, key = \\"\\") {
     return text(\`C\`);
   }
 }"
@@ -66,9 +71,10 @@ exports[`rendering semantics can force a render to update sub tree 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = text(ctx['state'].value);
     const b3 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
@@ -80,8 +86,9 @@ exports[`rendering semantics can force a render to update sub tree 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(\`child\`);
   }
 }"
@@ -91,9 +98,10 @@ exports[`rendering semantics can render a parent without rendering child 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = text(ctx['state'].value);
     const b3 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
@@ -105,8 +113,9 @@ exports[`rendering semantics can render a parent without rendering child 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(\`child\`);
   }
 }"
@@ -116,9 +125,10 @@ exports[`rendering semantics props are reactive (nested prop) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"a\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
   }
 }"
@@ -128,8 +138,9 @@ exports[`rendering semantics props are reactive (nested prop) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(ctx['props'].a.b.c);
   }
 }"
@@ -139,9 +150,10 @@ exports[`rendering semantics props are reactive 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"a\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
   }
 }"
@@ -151,8 +163,9 @@ exports[`rendering semantics props are reactive 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(ctx['props'].a.b);
   }
 }"
@@ -162,9 +175,10 @@ exports[`rendering semantics render need a boolean = true to be 'deep' 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = text(ctx['state'].value);
     const b3 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
@@ -176,8 +190,9 @@ exports[`rendering semantics render need a boolean = true to be 'deep' 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(\`child\`);
   }
 }"
@@ -187,9 +202,10 @@ exports[`rendering semantics render with deep=true followed by render with deep=
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = text(\`parent\`);
     const b3 = text(ctx['state'].value);
     const b4 = comp1({}, key + \`__1\`, node, this, null);
@@ -202,8 +218,9 @@ exports[`rendering semantics render with deep=true followed by render with deep=
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     const b2 = text(\`child\`);
     const b3 = text(ctx['env'].getValue());
     return multi([b2, b3]);
@@ -215,9 +232,10 @@ exports[`rendering semantics rendering is atomic (for one subtree) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1001\\"
   const comp1 = app.createComponent(\`B\`, true, false, false, [\\"obj\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_A(ctx, node, key = \\"\\") {
     const b2 = text(ctx['state'].obj.val);
     const b3 = comp1({obj: ctx['state'].obj}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
@@ -229,9 +247,10 @@ exports[`rendering semantics rendering is atomic (for one subtree) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`C\`, true, false, false, [\\"obj\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_B(ctx, node, key = \\"\\") {
     return comp1({obj: ctx['props'].obj}, key + \`__1\`, node, this, null);
   }
 }"
@@ -241,8 +260,9 @@ exports[`rendering semantics rendering is atomic (for one subtree) 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_C(ctx, node, key = \\"\\") {
     return text(ctx['props'].obj.val);
   }
 }"
@@ -252,9 +272,10 @@ exports[`rendering semantics works as expected for dynamic number of props 1`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, true, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1(Object.assign({}, ctx['state']), key + \`__1\`, node, this, null);
   }
 }"
@@ -264,8 +285,9 @@ exports[`rendering semantics works as expected for dynamic number of props 2`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(Object.keys(ctx['props']).length);
   }
 }"

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

@@ -4,9 +4,10 @@ exports[`style and class handling can set class on multi root component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({class: 'fromparent'}, key + \`__1\`, node, this, null);
   }
 }"
@@ -16,11 +17,12 @@ exports[`style and class handling can set class on multi root component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block2 = createBlock(\`<div>a</div>\`);
   let block3 = createBlock(\`<span block-attribute-0=\\"class\\">b</span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     const b2 = block2();
     let attr1 = ctx['props'].class;
     const b3 = block3([attr1]);
@@ -33,9 +35,10 @@ exports[`style and class handling can set class on sub component, as prop 1`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({class: 'some-class'}, key + \`__1\`, node, this, null);
   }
 }"
@@ -45,10 +48,11 @@ exports[`style and class handling can set class on sub component, as prop 2`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let attr1 = ctx['props'].class;
     return block1([attr1]);
   }
@@ -59,9 +63,10 @@ exports[`style and class handling can set class on sub sub component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1001\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_Parent(ctx, node, key = \\"\\") {
     return comp1({class: 'fromparent'}, key + \`__1\`, node, this, null);
   }
 }"
@@ -71,9 +76,10 @@ exports[`style and class handling can set class on sub sub component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`ChildChild\`, true, false, false, [\\"class\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Child(ctx, node, key = \\"\\") {
     return comp1({class: (ctx['props'].class||'')+' fromchild'}, key + \`__1\`, node, this, null);
   }
 }"
@@ -83,10 +89,11 @@ exports[`style and class handling can set class on sub sub component 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\">childchild</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_ChildChild(ctx, node, key = \\"\\") {
     let attr1 = ctx['props'].class;
     return block1([attr1]);
   }
@@ -97,9 +104,10 @@ exports[`style and class handling can set more than one class on sub component 1
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({class: 'a  b'}, key + \`__1\`, node, this, null);
   }
 }"
@@ -109,10 +117,11 @@ exports[`style and class handling can set more than one class on sub component 2
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let attr1 = ctx['props'].class;
     return block1([attr1]);
   }
@@ -123,10 +132,11 @@ exports[`style and class handling can set style and class inside component 1`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div style=\\"font-weight:bold;\\" class=\\"some-class\\">world</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -136,10 +146,11 @@ exports[`style and class handling class on components do not interfere with user
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_App(ctx, node, key = \\"\\") {
     let attr1 = {c:ctx['state'].c};
     return block1([attr1]);
   }
@@ -150,9 +161,10 @@ exports[`style and class handling class on sub component, which is switched to a
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1002\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\",\\"child\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1002_Parent(ctx, node, key = \\"\\") {
     return comp1({class: 'someclass',child: ctx['state'].child}, key + \`__1\`, node, this, null);
   }
 }"
@@ -162,11 +174,12 @@ exports[`style and class handling class on sub component, which is switched to a
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1001\\"
   const comp1 = app.createComponent(\`ChildA\`, true, false, false, [\\"class\\"]);
   const comp2 = app.createComponent(\`ChildB\`, true, false, false, [\\"class\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
-    let b2, b3;
+  return function xml_template_1001_Child(ctx, node, key = \\"\\") {
+    let b2,b3;
     if (ctx['props'].child==='a') {
       b2 = comp1({class: ctx['props'].class}, key + \`__1\`, node, this, null);
     } else {
@@ -181,10 +194,11 @@ exports[`style and class handling class on sub component, which is switched to a
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\">a</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_ChildA(ctx, node, key = \\"\\") {
     let attr1 = ctx['props'].class;
     return block1([attr1]);
   }
@@ -195,10 +209,11 @@ exports[`style and class handling class on sub component, which is switched to a
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   
   let block1 = createBlock(\`<span block-attribute-0=\\"class\\">b</span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_ChildB(ctx, node, key = \\"\\") {
     let attr1 = ctx['props'].class;
     return block1([attr1]);
   }
@@ -209,11 +224,12 @@ exports[`style and class handling class with extra whitespaces (variation) 1`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = comp1({class: 'a  b c   d'}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -224,10 +240,11 @@ exports[`style and class handling class with extra whitespaces (variation) 2`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let attr1 = ctx['props'].class;
     return block1([attr1]);
   }
@@ -238,9 +255,10 @@ exports[`style and class handling class with extra whitespaces 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({class: 'a  b c   d'}, key + \`__1\`, node, this, null);
   }
 }"
@@ -250,10 +268,11 @@ exports[`style and class handling class with extra whitespaces 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let attr1 = ctx['props'].class;
     return block1([attr1]);
   }
@@ -264,9 +283,10 @@ exports[`style and class handling component class and parent class combine toget
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({class: 'from parent'}, key + \`__1\`, node, this, null);
   }
 }"
@@ -276,10 +296,11 @@ exports[`style and class handling component class and parent class combine toget
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div class=\\"child\\" block-attribute-0=\\"class\\">child</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let attr1 = ctx['props'].class;
     return block1([attr1]);
   }
@@ -317,11 +338,12 @@ exports[`style and class handling empty class attribute is not added on widget r
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = comp1({class: undefined}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -332,10 +354,11 @@ exports[`style and class handling empty class attribute is not added on widget r
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span block-attribute-0=\\"class\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let attr1 = ctx['props'].class;
     return block1([attr1]);
   }
@@ -346,9 +369,10 @@ exports[`style and class handling error in subcomponent with class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({class: 'a'}, key + \`__1\`, node, this, null);
   }
 }"
@@ -358,10 +382,11 @@ exports[`style and class handling error in subcomponent with class 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"><block-text-1/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let attr1 = ctx['props'].class;
     let txt1 = ctx['this'].will.crash;
     return block1([attr1, txt1]);
@@ -373,9 +398,10 @@ exports[`style and class handling no class is set is child ignores it 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({class: 'hey'}, key + \`__1\`, node, this, null);
   }
 }"
@@ -385,10 +411,11 @@ exports[`style and class handling no class is set is child ignores it 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div>child</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -398,9 +425,10 @@ exports[`style and class handling no class is set is parent does not give it as
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
@@ -410,10 +438,11 @@ exports[`style and class handling no class is set is parent does not give it as
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let attr1 = ctx['props'].class;
     return block1([attr1]);
   }
@@ -424,9 +453,10 @@ exports[`style and class handling style is properly added on widget root el 1`]
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"style\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_ParentWidget(ctx, node, key = \\"\\") {
     return comp1({style: 'font-weight: bold;'}, key + \`__1\`, node, this, null);
   }
 }"
@@ -436,10 +466,11 @@ exports[`style and class handling style is properly added on widget root el 2`]
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div block-attribute-0=\\"style\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     let attr1 = ctx['props'].style;
     return block1([attr1]);
   }
@@ -450,11 +481,12 @@ exports[`style and class handling t-att-class is properly added/removed on widge
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = comp1({class: {b:ctx['state'].b}}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -465,10 +497,11 @@ exports[`style and class handling t-att-class is properly added/removed on widge
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span class=\\"c\\" block-attribute-0=\\"class\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let attr1 = {d:ctx['state'].d,...ctx['props'].class};
     return block1([attr1]);
   }
@@ -479,9 +512,10 @@ exports[`style and class handling t-att-class is properly added/removed on widge
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({class: {a:true,b:ctx['state'].b}}, key + \`__1\`, node, this, null);
   }
 }"
@@ -491,10 +525,11 @@ exports[`style and class handling t-att-class is properly added/removed on widge
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span class=\\"c\\" block-attribute-0=\\"class\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let attr1 = {d:ctx['state'].d,...ctx['props'].class};
     return block1([attr1]);
   }

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

@@ -5,13 +5,14 @@ exports[`t-call dynamic t-call 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
+  // Template name: \\"xml_template_999\\"
   const call = app.callTemplate.bind(app);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Root(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\`);
   }
@@ -22,10 +23,11 @@ exports[`t-call dynamic t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"foo\\"
   
   let block1 = createBlock(\`<div>foo</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function foo(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -35,8 +37,9 @@ exports[`t-call dynamic t-call 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"bar\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function bar(ctx, node, key = \\"\\") {
     return text(\`bar\`);
   }
 }"
@@ -46,9 +49,10 @@ exports[`t-call dynamic t-call with same sub component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const call = app.callTemplate.bind(app);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Root(ctx, node, key = \\"\\") {
     const b2 = text(ctx['current'].template);
     const template1 = (ctx['current'].template);
     const b3 = call(this, template1, ctx, node, key + \`__1\`);
@@ -61,9 +65,10 @@ exports[`t-call dynamic t-call with same sub component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"A\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function A(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
@@ -73,8 +78,9 @@ exports[`t-call dynamic t-call with same sub component 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(\`child\`);
   }
 }"
@@ -84,9 +90,10 @@ exports[`t-call dynamic t-call with same sub component 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"B\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function B(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
@@ -96,10 +103,11 @@ exports[`t-call dynamic t-call: key is propagated 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1001\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   const call = app.callTemplate.bind(app);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_Parent(ctx, node, key = \\"\\") {
     const b2 = comp1({}, key + \`__1\`, node, this, null);
     const template1 = (ctx['sub']);
     const b3 = call(this, template1, ctx, node, key + \`__2\`);
@@ -112,10 +120,11 @@ exports[`t-call dynamic t-call: key is propagated 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div block-attribute-0=\\"id\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let attr1 = ctx['id'];
     return block1([attr1]);
   }
@@ -126,9 +135,10 @@ exports[`t-call dynamic t-call: key is propagated 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
@@ -138,12 +148,13 @@ exports[`t-call handlers are properly bound through a dynamic t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const call = app.callTemplate.bind(app);
   
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
-    const template1 = ('__template__999');
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
+    const template1 = ('xml_template_999');
     const b2 = call(this, template1, ctx, node, key + \`__1\`);
     let txt1 = ctx['counter'];
     return block1([txt1], [b2]);
@@ -155,10 +166,11 @@ exports[`t-call handlers are properly bound through a dynamic t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999(ctx, node, key = \\"\\") {
     const v1 = ctx['this'];
     let hdlr1 = [()=>v1.update(), ctx];
     return block1([hdlr1]);
@@ -170,11 +182,12 @@ exports[`t-call handlers are properly bound through a t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const callTemplate_1 = app.getTemplate(\`__template__999\`);
+  // Template name: \\"xml_template_1000\\"
+  const callTemplate_1 = app.getTemplate(\`xml_template_999\`);
   
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     let txt1 = ctx['counter'];
     return block1([txt1], [b2]);
@@ -186,10 +199,11 @@ exports[`t-call handlers are properly bound through a t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['update'], ctx];
     return block1([hdlr1]);
   }
@@ -200,11 +214,12 @@ exports[`t-call handlers with arguments are properly bound through a t-call 1`]
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const callTemplate_1 = app.getTemplate(\`__template__999\`);
+  // Template name: \\"xml_template_1000\\"
+  const callTemplate_1 = app.getTemplate(\`xml_template_999\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
@@ -215,10 +230,11 @@ exports[`t-call handlers with arguments are properly bound through a t-call 2`]
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999(ctx, node, key = \\"\\") {
     const v1 = ctx['this'];
     const v2 = ctx['a'];
     let hdlr1 = [()=>v1.update(v2), ctx];
@@ -231,11 +247,12 @@ exports[`t-call parent is set within t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const callTemplate_1 = app.getTemplate(\`__template__999\`);
+  // Template name: \\"xml_template_1001\\"
+  const callTemplate_1 = app.getTemplate(\`xml_template_999\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_Parent(ctx, node, key = \\"\\") {
     const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
@@ -246,9 +263,10 @@ exports[`t-call parent is set within t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
@@ -258,10 +276,11 @@ exports[`t-call parent is set within t-call 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   
   let block1 = createBlock(\`<span>lucas</span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Child(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -271,9 +290,10 @@ exports[`t-call parent is set within t-call with no parentNode 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const callTemplate_1 = app.getTemplate(\`__template__999\`);
+  // Template name: \\"xml_template_1001\\"
+  const callTemplate_1 = app.getTemplate(\`xml_template_999\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_Parent(ctx, node, key = \\"\\") {
     return callTemplate_1.call(this, ctx, node, key + \`__1\`);
   }
 }"
@@ -283,9 +303,10 @@ exports[`t-call parent is set within t-call with no parentNode 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
@@ -295,10 +316,11 @@ exports[`t-call parent is set within t-call with no parentNode 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   
   let block1 = createBlock(\`<span>lucas</span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Child(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -309,11 +331,12 @@ exports[`t-call recursive t-call binding this -- static t-call 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  // Template name: \\"xml_template_999\\"
   const callTemplate_1 = app.getTemplate(\`recursive\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Parent(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     ctx = Object.create(ctx);
@@ -330,11 +353,12 @@ exports[`t-call recursive t-call binding this -- static t-call 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  // Template name: \\"recursive\\"
   const callTemplate_1 = app.getTemplate(\`recursive\`);
   
   let block3 = createBlock(\`<div block-handler-0=\\"click.stop\\"><block-text-1/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function recursive(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     let b2;
@@ -358,13 +382,14 @@ exports[`t-call sub components in two t-calls 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const callTemplate_1 = app.getTemplate(\`sub\`);
   const callTemplate_2 = app.getTemplate(\`sub\`);
   
   let block3 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
-    let b2, b3;
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
+    let b2,b3;
     if (ctx['state'].val===1) {
       b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     } else {
@@ -380,9 +405,10 @@ exports[`t-call sub components in two t-calls 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"sub\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function sub(ctx, node, key = \\"\\") {
     return comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
   }
 }"
@@ -392,10 +418,11 @@ exports[`t-call sub components in two t-calls 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].val;
     return block1([txt1]);
   }
@@ -407,19 +434,20 @@ exports[`t-call t-call in t-foreach and children component 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
-  const callTemplate_1 = app.getTemplate(\`__template__999\`);
+  // Template name: \\"xml_template_1001\\"
+  const callTemplate_1 = app.getTemplate(\`xml_template_999\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_Parent(ctx, node, key = \\"\\") {
     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);
     }
@@ -433,9 +461,10 @@ exports[`t-call t-call in t-foreach and children component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999(ctx, node, key = \\"\\") {
     return comp1({val: ctx['val']}, key + \`__1\`, node, this, null);
   }
 }"
@@ -445,10 +474,11 @@ exports[`t-call t-call in t-foreach and children component 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].val;
     return block1([txt1]);
   }
@@ -459,9 +489,10 @@ exports[`t-call t-call with t-call-context and subcomponent 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const callTemplate_1 = app.getTemplate(\`someTemplate\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Root(ctx, node, key = \\"\\") {
     let ctx1 = ctx['subctx'];
     return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
   }
@@ -472,10 +503,11 @@ exports[`t-call t-call with t-call-context and subcomponent 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"someTemplate\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"name\\"]);
   const comp2 = app.createComponent(\`Child\`, true, false, false, [\\"name\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function someTemplate(ctx, node, key = \\"\\") {
     const b2 = comp1({name: ctx['aab']}, key + \`__1\`, node, this, null);
     const b3 = comp2({name: ctx['lpe']}, key + \`__2\`, node, this, null);
     return multi([b2, b3]);
@@ -487,8 +519,9 @@ exports[`t-call t-call with t-call-context and subcomponent 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     const b2 = text(\`child\`);
     const b3 = text(ctx['props'].name);
     return multi([b2, b3]);
@@ -500,9 +533,10 @@ exports[`t-call t-call with t-call-context and subcomponent, in dev mode 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const callTemplate_1 = app.getTemplate(\`someTemplate\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Root(ctx, node, key = \\"\\") {
     let ctx1 = ctx['subctx'];
     return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
   }
@@ -513,10 +547,11 @@ exports[`t-call t-call with t-call-context and subcomponent, in dev mode 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"someTemplate\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"name\\"]);
   const comp2 = app.createComponent(\`Child\`, true, false, false, [\\"name\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function someTemplate(ctx, node, key = \\"\\") {
     const props1 = {name: ctx['aab']};
     helpers.validateProps(\`Child\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
@@ -532,8 +567,9 @@ exports[`t-call t-call with t-call-context and subcomponent, in dev mode 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     const b2 = text(\`child\`);
     const b3 = text(ctx['props'].name);
     return multi([b2, b3]);
@@ -545,9 +581,10 @@ exports[`t-call t-call with t-call-context, simple use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   const callTemplate_1 = app.getTemplate(\`someTemplate\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Root(ctx, node, key = \\"\\") {
     let ctx1 = ctx['subctx'];
     return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
   }
@@ -558,8 +595,9 @@ exports[`t-call t-call with t-call-context, simple use 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"someTemplate\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function someTemplate(ctx, node, key = \\"\\") {
     const b2 = text(ctx['aab']);
     const b3 = text(ctx['lpe']);
     return multi([b2, b3]);
@@ -571,9 +609,10 @@ exports[`t-call t-call-context: ComponentNode is not looked up in the context 1`
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const callTemplate_1 = app.getTemplate(\`someTemplate\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Root(ctx, node, key = \\"\\") {
     let ctx1 = {method:function(){}};
     return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
   }
@@ -585,6 +624,7 @@ exports[`t-call t-call-context: ComponentNode is not looked up in the context 2`
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, isBoundary, withDefault, setContextValue, markRaw } = helpers;
+  // Template name: \\"someTemplate\\"
   const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block2 = createBlock(\`<div block-ref=\\"0\\">outside slot</div>\`);
@@ -602,7 +642,7 @@ exports[`t-call t-call-context: ComponentNode is not looked up in the context 2`
     return multi([b4, b5]);
   }
   
-  return function template(ctx, node, key = \\"\\") {
+  return function someTemplate(ctx, node, key = \\"\\") {
     let ref1 = (el) => this.__owl__.setRef((\`myRef\`), el);
     const b2 = block2([ref1]);
     const ctx1 = capture(ctx);
@@ -617,8 +657,9 @@ exports[`t-call t-call-context: ComponentNode is not looked up in the context 3`
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return callSlot(ctx, node, key, 'default', false, {});
   }
 }"
@@ -628,9 +669,10 @@ exports[`t-call t-call-context: slots don't make component available again when
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const callTemplate_1 = app.getTemplate(\`template\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Root(ctx, node, key = \\"\\") {
     let ctx1 = {};
     return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
   }
@@ -642,6 +684,7 @@ exports[`t-call t-call-context: slots don't make component available again when
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, capture, markRaw } = helpers;
+  // Template name: \\"template\\"
   const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
@@ -665,8 +708,9 @@ exports[`t-call t-call-context: slots don't make component available again when
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return callSlot(ctx, node, key, 'default', false, {});
   }
 }"
@@ -676,9 +720,10 @@ exports[`t-call t-call-context: this is not available inside t-call-context 1`]
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   const callTemplate_1 = app.getTemplate(\`someTemplate\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Root(ctx, node, key = \\"\\") {
     let ctx1 = {};
     return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
   }
@@ -689,8 +734,9 @@ exports[`t-call t-call-context: this is not available inside t-call-context 2`]
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"someTemplate\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function someTemplate(ctx, node, key = \\"\\") {
     return text(ctx['this']);
   }
 }"

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

@@ -4,10 +4,11 @@ exports[`t-call-block simple t-call-block with static text 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     const b2 = ctx['myBlock']();
     return block1([], [b2]);
   }

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

@@ -4,11 +4,12 @@ exports[`t-component can switch between dynamic components without the need for
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1001\\"
   const comp1 = app.createComponent(null, false, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_App(ctx, node, key = \\"\\") {
     const Comp1 = ctx['constructor'].components[ctx['state'].child];
     const b2 = toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
     return block1([], [b2]);
@@ -20,10 +21,11 @@ exports[`t-component can switch between dynamic components without the need for
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span>child a</span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_A(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -33,10 +35,11 @@ exports[`t-component can switch between dynamic components without the need for
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   
   let block1 = createBlock(\`<span>child b</span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_B(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -46,9 +49,10 @@ exports[`t-component can use dynamic components (the class) if given (with diffe
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1001\\"
   const comp1 = app.createComponent(null, false, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_Parent(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['state'].child;
     const Comp1 = ctx['myComponent'];
     return toggler(tKey_1, toggler(Comp1, comp1({}, (Comp1).name + tKey_1 + key + \`__1\`, node, this, Comp1)));
@@ -60,10 +64,11 @@ exports[`t-component can use dynamic components (the class) if given (with diffe
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span>child a</span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_A(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -73,10 +78,11 @@ exports[`t-component can use dynamic components (the class) if given (with diffe
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   
   let block1 = createBlock(\`<div>child b</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_B(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -86,9 +92,10 @@ exports[`t-component can use dynamic components (the class) if given 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1001\\"
   const comp1 = app.createComponent(null, false, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_Parent(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['state'].child;
     const Comp1 = ctx['myComponent'];
     return toggler(tKey_1, toggler(Comp1, comp1({}, (Comp1).name + tKey_1 + key + \`__1\`, node, this, Comp1)));
@@ -100,10 +107,11 @@ exports[`t-component can use dynamic components (the class) if given 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span>child a</span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_A(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -113,10 +121,11 @@ exports[`t-component can use dynamic components (the class) if given 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   
   let block1 = createBlock(\`<span>child b</span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_B(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -126,11 +135,12 @@ exports[`t-component modifying a sub widget 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(null, false, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_ParentWidget(ctx, node, key = \\"\\") {
     const Comp1 = ctx['Counter'];
     const b2 = toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
     return block1([], [b2]);
@@ -142,10 +152,11 @@ exports[`t-component modifying a sub widget 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Counter(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].counter;
     const v1 = ctx['state'];
     let hdlr1 = [()=>v1.counter++, ctx];
@@ -158,9 +169,10 @@ exports[`t-component switching dynamic component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1001\\"
   const comp1 = app.createComponent(null, false, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_Parent(ctx, node, key = \\"\\") {
     const Comp1 = ctx['Child'];
     return toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
   }
@@ -171,21 +183,23 @@ exports[`t-component switching dynamic component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div>child a</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_ChildA(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
 `;
 
-exports[`t-component switching dynamic component 4`] = `
+exports[`t-component switching dynamic component 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_ChildB(ctx, node, key = \\"\\") {
     return text(\`child b\`);
   }
 }"
@@ -195,9 +209,10 @@ exports[`t-component t-component works in simple case 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(null, false, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const Comp1 = ctx['Child'];
     return toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
   }
@@ -208,10 +223,11 @@ exports[`t-component t-component works in simple case 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div>child</div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return block1();
   }
 }"

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

@@ -5,16 +5,17 @@ exports[`list of components components in a node in a t-foreach  1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"item\\"]);
   
   let block1 = createBlock(\`<div><ul><block-child-0/></ul></div>\`);
   let block3 = createBlock(\`<li><block-child-0/></li>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     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);
@@ -29,10 +30,11 @@ exports[`list of components components in a node in a t-foreach  2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].item;
     return block1([txt1]);
   }
@@ -44,14 +46,15 @@ exports[`list of components crash on duplicate key in dev mode 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, OwlError, withKey } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     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));
@@ -68,8 +71,9 @@ exports[`list of components crash on duplicate key in dev mode 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(\`\`);
   }
 }"
@@ -80,14 +84,15 @@ exports[`list of components crash when using object as keys that serialize to th
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, OwlError, withKey } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     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));
@@ -104,8 +109,9 @@ exports[`list of components crash when using object as keys that serialize to th
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(\`\`);
   }
 }"
@@ -116,16 +122,17 @@ exports[`list of components list of sub components inside other nodes 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`SubComponent\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     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);
@@ -140,10 +147,11 @@ exports[`list of components list of sub components inside other nodes 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span>asdf</span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SubComponent(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -153,7 +161,8 @@ exports[`list of components order is correct when slots are not of same type 1`]
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { markRaw } = helpers;
+  let { capture, markRaw } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block2 = createBlock(\`<div>A</div>\`);
@@ -174,8 +183,9 @@ exports[`list of components order is correct when slots are not of same type 1`]
     return text(\`C\`);
   }
   
-  return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'a': {__render: slot1.bind(this), __ctx: ctx, active: !ctx['state'].active}, 'b': {__render: slot2.bind(this), __ctx: ctx, active: true}, 'c': {__render: slot3.bind(this), __ctx: ctx, active: ctx['state'].active}})}, key + \`__1\`, node, this, null);
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
+    const ctx1 = capture(ctx);
+    return comp1({slots: markRaw({'a': {__render: slot1.bind(this), __ctx: ctx1, active: !ctx['state'].active}, 'b': {__render: slot2.bind(this), __ctx: ctx1, active: true}, 'c': {__render: slot3.bind(this), __ctx: ctx1, active: ctx['state'].active}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -185,12 +195,13 @@ exports[`list of components order is correct when slots are not of same type 2`]
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, callSlot, withKey } = helpers;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     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);
@@ -205,21 +216,22 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"blip\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     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);
@@ -237,10 +249,11 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].blip;
     return block1([txt1]);
   }
@@ -252,22 +265,23 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach,
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"row\\",\\"col\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<p><block-child-0/></p>\`);
   let block5 = createBlock(\`<p><block-child-0/></p>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     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);
@@ -286,10 +300,11 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach,
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].row+'_'+ctx['props'].col;
     return block1([txt1]);
   }
@@ -301,13 +316,14 @@ exports[`list of components simple list 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     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);
     }
@@ -320,10 +336,11 @@ exports[`list of components simple list 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].value;
     return block1([txt1]);
   }
@@ -335,15 +352,16 @@ exports[`list of components sub components rendered in a loop 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"n\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     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);
     }
@@ -357,10 +375,11 @@ exports[`list of components sub components rendered in a loop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<p><block-text-0/></p>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].n;
     return block1([txt1]);
   }
@@ -372,15 +391,16 @@ exports[`list of components sub components with some state rendered in a loop 1`
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     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);
     }
@@ -394,10 +414,11 @@ exports[`list of components sub components with some state rendered in a loop 2`
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<p><block-text-0/></p>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].n;
     return block1([txt1]);
   }
@@ -409,15 +430,16 @@ exports[`list of components switch component position 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     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);
     }
@@ -431,10 +453,11 @@ exports[`list of components switch component position 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].key;
     return block1([txt1]);
   }
@@ -446,15 +469,16 @@ exports[`list of components t-foreach with t-component, and update 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     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);
@@ -469,10 +493,11 @@ exports[`list of components t-foreach with t-component, and update 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].val;
     let txt2 = ctx['props'].val;
     return block1([txt1, txt2]);

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

@@ -5,15 +5,16 @@ exports[`t-key t-foreach with t-key switch component position 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     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);
@@ -28,10 +29,11 @@ exports[`t-key t-foreach with t-key switch component position 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].key;
     return block1([txt1]);
   }
@@ -42,9 +44,10 @@ exports[`t-key t-key on Component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
     return toggler(tKey_1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, this, null));
   }
@@ -55,10 +58,11 @@ exports[`t-key t-key on Component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].key;
     return block1([txt1]);
   }
@@ -69,11 +73,12 @@ exports[`t-key t-key on Component as a function 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
     const b2 = toggler(tKey_1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, this, null));
     return block1([], [b2]);
@@ -85,10 +90,11 @@ exports[`t-key t-key on Component as a function 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].key;
     return block1([txt1]);
   }
@@ -99,12 +105,13 @@ exports[`t-key t-key on multiple Components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
   const comp2 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
   
   let block1 = createBlock(\`<span><block-child-0/><block-child-1/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key1'];
     const b2 = toggler(tKey_1, comp1({key: ctx['key1']}, tKey_1 + key + \`__1\`, node, this, null));
     const tKey_2 = ctx['key2'];
@@ -118,10 +125,11 @@ exports[`t-key t-key on multiple Components 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].key;
     return block1([txt1]);
   }
@@ -133,12 +141,13 @@ exports[`t-key t-key on multiple Components with t-call 1 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const callTemplate_1 = app.getTemplate(\`calledTemplate\`);
   const callTemplate_2 = app.getTemplate(\`calledTemplate\`);
   
   let block1 = createBlock(\`<span><block-child-0/><block-child-1/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     ctx = Object.create(ctx);
@@ -159,9 +168,10 @@ exports[`t-key t-key on multiple Components with t-call 1 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"calledTemplate\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function calledTemplate(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
     return toggler(tKey_1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, this, null));
   }
@@ -172,10 +182,11 @@ exports[`t-key t-key on multiple Components with t-call 1 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].key;
     return block1([txt1]);
   }
@@ -186,11 +197,12 @@ exports[`t-key t-key on multiple Components with t-call 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const callTemplate_1 = app.getTemplate(\`calledTemplate\`);
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
@@ -201,10 +213,11 @@ exports[`t-key t-key on multiple Components with t-call 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"calledTemplate\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
   const comp2 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function calledTemplate(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key1'];
     const b2 = toggler(tKey_1, comp1({key: ctx['key1']}, tKey_1 + key + \`__1\`, node, this, null));
     const tKey_2 = ctx['key2'];
@@ -218,10 +231,11 @@ exports[`t-key t-key on multiple Components with t-call 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].key;
     return block1([txt1]);
   }

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

@@ -5,10 +5,11 @@ exports[`t-model directive .lazy modifier 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"change\\"/><span><block-text-2/></span></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let prop1 = bExpr1[expr1];
@@ -24,10 +25,11 @@ exports[`t-model directive .number modifier 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'number';
     let prop1 = bExpr1[expr1];
@@ -43,29 +45,11 @@ exports[`t-model directive .trim modifier 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
-  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"change\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
-    const bExpr1 = ctx['state'];
-    const expr1 = 'text';
-    let prop1 = bExpr1[expr1];
-    let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value.trim(); }];
-    let txt1 = ctx['state'].text;
-    return block1([prop1, hdlr1, txt1]);
-  }
-}"
-`;
-
-exports[`t-model directive .trim modifier implies .lazy modifier 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { toNumber } = helpers;
-  
-  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"change\\"/><span><block-text-2/></span></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let prop1 = bExpr1[expr1];
@@ -81,10 +65,11 @@ exports[`t-model directive basic use, on an input 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let prop1 = bExpr1[expr1];
@@ -100,10 +85,11 @@ exports[`t-model directive basic use, on an input with bracket expression 1`] =
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let prop1 = bExpr1[expr1];
@@ -119,10 +105,11 @@ exports[`t-model directive basic use, on another key in component 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['some'];
     const expr1 = 'text';
     let prop1 = bExpr1[expr1];
@@ -138,10 +125,11 @@ exports[`t-model directive can also define t-on directive on same event, part 1
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\" block-handler-2=\\"input\\"/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let prop1 = bExpr1[expr1];
@@ -157,10 +145,11 @@ exports[`t-model directive can also define t-on directive on same event, part 2
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-property-0=\\"checked\\" block-handler-1=\\"click\\" block-handler-2=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-property-3=\\"checked\\" block-handler-4=\\"click\\" block-handler-5=\\"click\\"/><input type=\\"radio\\" id=\\"three\\" value=\\"Three\\" block-property-6=\\"checked\\" block-handler-7=\\"click\\" block-handler-8=\\"click\\"/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'choice';
     let prop1 = bExpr1[expr1] === 'One';
@@ -186,10 +175,11 @@ exports[`t-model directive following a scope protecting directive (e.g. t-set) 1
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"admiral\\", 'Bruno');
@@ -207,15 +197,16 @@ exports[`t-model directive in a t-foreach 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, toNumber, withKey } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<input type=\\"checkbox\\" block-property-0=\\"checked\\" block-handler-1=\\"input\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     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';
@@ -234,15 +225,16 @@ exports[`t-model directive in a t-foreach, part 2 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, toNumber, withKey } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<input block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     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'];
@@ -262,15 +254,16 @@ exports[`t-model directive in a t-foreach, part 3 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, toNumber, withKey } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<input block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     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;
@@ -290,10 +283,11 @@ exports[`t-model directive on a select 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><select block-property-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"\\">Please select one</option><option value=\\"red\\">Red</option><option value=\\"blue\\">Blue</option></select><span>Choice: <block-text-2/></span></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'color';
     let prop1 = bExpr1[expr1];
@@ -309,10 +303,11 @@ exports[`t-model directive on a select, initial state 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><select block-property-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"\\">Please select one</option><option value=\\"red\\">Red</option><option value=\\"blue\\">Blue</option></select></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'color';
     let prop1 = bExpr1[expr1];
@@ -327,10 +322,11 @@ exports[`t-model directive on a sub state key 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'].something;
     const expr1 = 'text';
     let prop1 = bExpr1[expr1];
@@ -346,10 +342,11 @@ exports[`t-model directive on an input type=radio 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-property-0=\\"checked\\" block-handler-1=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-property-2=\\"checked\\" block-handler-3=\\"click\\"/><span>Choice: <block-text-4/></span></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'choice';
     let prop1 = bExpr1[expr1] === 'One';
@@ -369,10 +366,11 @@ exports[`t-model directive on an input type=radio, with initial value 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-property-0=\\"checked\\" block-handler-1=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-property-2=\\"checked\\" block-handler-3=\\"click\\"/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'choice';
     let prop1 = bExpr1[expr1] === 'One';
@@ -391,11 +389,12 @@ exports[`t-model directive on an input, type=checkbox 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   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;
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
+    let b2,b3;
     const bExpr1 = ctx['state'];
     const expr1 = 'flag';
     let prop1 = bExpr1[expr1];
@@ -415,10 +414,11 @@ exports[`t-model directive on an textarea 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><textarea block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let prop1 = bExpr1[expr1];
@@ -434,10 +434,11 @@ exports[`t-model directive t-model is applied before t-on-input 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\" block-handler-2=\\"input\\"/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let prop1 = bExpr1[expr1];
@@ -453,10 +454,11 @@ exports[`t-model directive t-model on an input with an undefined value 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<input block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let prop1 = bExpr1[expr1];
@@ -471,10 +473,11 @@ exports[`t-model directive t-model on select with static options 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><select block-property-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"a\\"><block-text-2/></option><option value=\\"b\\"><block-text-3/></option><option value=\\"c\\"><block-text-4/></option></select></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'model';
     let prop1 = bExpr1[expr1];
@@ -492,11 +495,12 @@ exports[`t-model directive t-model with dynamic number values on select options
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber, prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   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 = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'value';
     const bValue1 = bExpr1[expr1];
@@ -504,7 +508,7 @@ exports[`t-model directive t-model with dynamic number values on select options
     ctx = Object.create(ctx);
     const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].options);;
     for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`o\`] = k_block2[i1];
+      ctx[\`o\`] = v_block2[i1];
       const key1 = ctx['o'].value;
       let attr1 = ctx['o'].value;
       let attr2 = bValue1 === ctx['o'].value;
@@ -522,10 +526,11 @@ exports[`t-model directive t-model with dynamic values on select options -- 2 1`
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><select block-handler-0=\\"change\\"><option block-attribute-1=\\"value\\" block-attribute-2=\\"selected\\"><block-text-3/></option><option block-attribute-4=\\"value\\" block-attribute-5=\\"selected\\"><block-text-6/></option></select></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'model';
     const bValue1 = bExpr1[expr1];
@@ -546,10 +551,11 @@ exports[`t-model directive t-model with dynamic values on select options -- 3 1`
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><select block-handler-0=\\"change\\"><option block-attribute-1=\\"value\\" block-attribute-2=\\"selected\\"><block-text-3/></option><option value=\\"b\\" block-attribute-4=\\"selected\\"><block-text-5/></option></select></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'model';
     const bValue1 = bExpr1[expr1];
@@ -569,10 +575,11 @@ exports[`t-model directive t-model with dynamic values on select options 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><select block-handler-0=\\"change\\"><option block-attribute-1=\\"value\\" block-attribute-2=\\"selected\\"><block-text-3/></option><option block-attribute-4=\\"value\\" block-attribute-5=\\"selected\\"><block-text-6/></option></select></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'model';
     const bValue1 = bExpr1[expr1];
@@ -593,11 +600,12 @@ exports[`t-model directive t-model with dynamic values on select options in fore
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber, prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><select block-handler-0=\\"change\\"><block-child-0/></select></div>\`);
   let block3 = createBlock(\`<option block-attribute-0=\\"value\\" block-attribute-1=\\"selected\\"><block-text-2/></option>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Test(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'model';
     const bValue1 = bExpr1[expr1];
@@ -605,7 +613,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'];
@@ -623,16 +631,17 @@ exports[`t-model directive t-model with radio button group in t-foreach 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, toNumber, withKey } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div id=\\"get_data\\" block-handler-0=\\"click\\"><block-child-0/></div>\`);
   let block3 = createBlock(\`<input type=\\"radio\\" name=\\"radio_group\\" block-property-0=\\"value\\" block-attribute-1=\\"id\\" block-property-2=\\"checked\\" block-handler-3=\\"click\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['getData'], ctx];
     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'];
@@ -653,13 +662,14 @@ exports[`t-model directive two inputs in a div alternating with a t-if 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   let block2 = createBlock(\`<input class=\\"a\\" block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
   let block3 = createBlock(\`<input class=\\"b\\" block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
-    let b2, b3;
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
+    let b2,b3;
     if (ctx['state'].flag) {
       const bExpr1 = ctx['state'];
       const expr1 = 'text1';
@@ -684,10 +694,11 @@ exports[`t-model directive with expression having a changing key 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_SomeComponent(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'].something;
     const expr1 = ctx['text'].key;
     let prop1 = bExpr1[expr1];

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

@@ -5,18 +5,19 @@ exports[`t-on t-on expression captured in t-foreach 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<div><button block-handler-0=\\"click\\">expr</button></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Comp(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"iter\\", 0);
     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'];
@@ -35,15 +36,16 @@ exports[`t-on t-on expression in t-foreach 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<div><block-text-0/>: <block-text-1/><button block-handler-2=\\"click\\">Expr</button></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Comp(ctx, node, key = \\"\\") {
     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'];
@@ -64,18 +66,19 @@ exports[`t-on t-on expression in t-foreach with t-set 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<div><block-text-0/>: <block-text-1/><button block-handler-2=\\"click\\">Expr</button></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Comp(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"bossa\\", 'nova');
     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']);
@@ -98,15 +101,16 @@ exports[`t-on t-on method call in t-foreach 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<div><block-text-0/>: <block-text-1/><button block-handler-2=\\"click\\">meth call</button></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Comp(ctx, node, key = \\"\\") {
     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'];
@@ -127,12 +131,13 @@ exports[`t-on t-on on component next to t-on on div 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { createCatcher } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   const catcher1 = createCatcher({\\"click\\":0});
   
   let block1 = createBlock(\`<div><block-child-0/><p block-handler-0=\\"click\\">dec</p></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const hdlr1 = [ctx['increment'], ctx];
     const b2 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
     let hdlr2 = [ctx['decrement'], ctx];
@@ -145,10 +150,11 @@ exports[`t-on t-on on component next to t-on on div 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<button><block-text-0/></button>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].value;
     return block1([txt1]);
   }
@@ -160,10 +166,11 @@ exports[`t-on t-on on components 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { createCatcher } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   const catcher1 = createCatcher({\\"click\\":0});
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const hdlr1 = [ctx['increment'], ctx];
     return catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
   }
@@ -174,10 +181,11 @@ exports[`t-on t-on on components 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<button><block-text-0/></button>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].value;
     return block1([txt1]);
   }
@@ -189,14 +197,15 @@ exports[`t-on t-on on components and t-foreach 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, createCatcher, withKey } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   const catcher1 = createCatcher({\\"click\\":0});
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     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'];
@@ -212,10 +221,11 @@ exports[`t-on t-on on components and t-foreach 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].value;
     return block1([txt1]);
   }
@@ -227,12 +237,13 @@ exports[`t-on t-on on components, variation 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { createCatcher } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   const catcher1 = createCatcher({\\"click\\":0});
   
   let block1 = createBlock(\`<div><span/><block-child-0/><p/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const hdlr1 = [ctx['increment'], ctx];
     const b2 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
     return block1([], [b2]);
@@ -244,10 +255,11 @@ exports[`t-on t-on on components, variation 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<button><block-text-0/></button>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].value;
     return block1([txt1]);
   }
@@ -259,10 +271,11 @@ exports[`t-on t-on on components, with 'prevent' modifier 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { createCatcher } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   const catcher1 = createCatcher({\\"click.prevent\\":0});
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const hdlr1 = [\\"prevent\\", ctx['increment'], ctx];
     return catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
   }
@@ -273,10 +286,11 @@ exports[`t-on t-on on components, with 'prevent' modifier 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<button><block-text-0/></button>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].value;
     return block1([txt1]);
   }
@@ -288,10 +302,11 @@ exports[`t-on t-on on components, with a handler update 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, createCatcher } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   const catcher1 = createCatcher({\\"click\\":0});
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"name\\", ctx['state'].name);
@@ -307,10 +322,11 @@ exports[`t-on t-on on components, with a handler update 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].value;
     return block1([txt1]);
   }
@@ -321,11 +337,12 @@ exports[`t-on t-on on destroyed components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
@@ -339,10 +356,11 @@ exports[`t-on t-on on destroyed components 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div block-handler-0=\\"click\\"/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['onClick'], ctx];
     return block1([hdlr1]);
   }
@@ -354,6 +372,7 @@ exports[`t-on t-on on slot, with 'prevent' modifier 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block1 = createBlock(\`<button>button</button>\`);
@@ -362,7 +381,7 @@ exports[`t-on t-on on slot, with 'prevent' modifier 1`] = `
     return block1();
   }
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
@@ -373,9 +392,10 @@ exports[`t-on t-on on slot, with 'prevent' modifier 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot, createCatcher } = helpers;
+  // Template name: \\"xml_template_999\\"
   const catcher1 = createCatcher({\\"click.prevent\\":0});
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     const hdlr1 = [\\"prevent\\", ctx['doSomething'], ctx];
     return catcher1(callSlot(ctx, node, key, 'default', false, {}), [hdlr1]);
   }
@@ -386,7 +406,8 @@ exports[`t-on t-on on t-set-slots 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { createCatcher, markRaw } = helpers;
+  let { capture, createCatcher, markRaw } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const catcher1 = createCatcher({\\"click\\":0});
   const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
@@ -401,11 +422,12 @@ exports[`t-on t-on on t-set-slots 1`] = `
     return catcher1(multi([b6, b7]), [hdlr1]);
   }
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = text(\` [\`);
     const b3 = text(ctx['state'].count);
     const b4 = text(\`] \`);
-    const b8 = comp1({slots: markRaw({'myslot': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b8 = comp1({slots: markRaw({'myslot': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return multi([b2, b3, b4, b8]);
   }
 }"
@@ -416,8 +438,9 @@ exports[`t-on t-on on t-set-slots 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return callSlot(ctx, node, key, 'myslot', false, {});
   }
 }"
@@ -428,6 +451,7 @@ exports[`t-on t-on on t-slots 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block1 = createBlock(\`<p>something</p>\`);
@@ -436,7 +460,7 @@ exports[`t-on t-on on t-slots 1`] = `
     return block1();
   }
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
@@ -447,9 +471,10 @@ exports[`t-on t-on on t-slots 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot, createCatcher } = helpers;
+  // Template name: \\"xml_template_999\\"
   const catcher1 = createCatcher({\\"click\\":0});
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     const b2 = text(\` [\`);
     const b3 = text(ctx['state'].count);
     const b4 = text(\`] \`);
@@ -466,12 +491,13 @@ exports[`t-on t-on when first component child is an empty component 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { createCatcher } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"list\\"]);
   const catcher1 = createCatcher({\\"click\\":0});
   
   let block1 = createBlock(\`<div block-handler-0=\\"click\\"><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['push'], ctx];
     const hdlr2 = [()=>{}, ctx];
     const b2 = catcher1(comp1({list: ctx['list']}, key + \`__1\`, node, this, null), [hdlr2]);
@@ -485,14 +511,15 @@ exports[`t-on t-on when first component child is an empty component 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block2 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     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

@@ -5,19 +5,20 @@ exports[`components in t-out simple list 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, isBoundary, withDefault, LazyValue, safeOutput, withKey } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   function value1(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
   }
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 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);
@@ -31,8 +32,9 @@ exports[`components in t-out simple list 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(\`child\`);
   }
 }"

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

@@ -4,11 +4,12 @@ exports[`t-props basic use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, true, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = comp1(Object.assign({}, ctx['some'].obj), key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -19,10 +20,11 @@ exports[`t-props basic use 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].a+ctx['props'].b;
     return block1([txt1]);
   }
@@ -33,9 +35,10 @@ exports[`t-props child receives a copy of the t-props object, not the original 1
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, true, []);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     return comp1(Object.assign({}, ctx['childProps']), key + \`__1\`, node, this, null);
   }
 }"
@@ -45,10 +48,11 @@ exports[`t-props child receives a copy of the t-props object, not the original 2
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
@@ -58,11 +62,12 @@ exports[`t-props t-props and other props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Comp\`, true, false, true, [\\"a\\"]);
   
   let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = comp1(Object.assign({}, ctx['state1'], {a: ctx['a']}), key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -73,10 +78,11 @@ exports[`t-props t-props and other props 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Comp(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].a;
     let txt2 = ctx['props'].b;
     return block1([txt1, txt2]);
@@ -88,11 +94,12 @@ exports[`t-props t-props only 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Comp\`, true, false, true, []);
   
   let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = comp1(Object.assign({}, ctx['state']), key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -103,10 +110,11 @@ exports[`t-props t-props only 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Comp(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].a;
     return block1([txt1]);
   }
@@ -117,11 +125,12 @@ exports[`t-props t-props with props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, true, [\\"a\\",\\"b\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Parent(ctx, node, key = \\"\\") {
     const b2 = comp1(Object.assign({}, ctx['childProps'], {a: 1,b: 2}), key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -132,10 +141,11 @@ exports[`t-props t-props with props 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div/>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return block1();
   }
 }"

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

@@ -5,6 +5,7 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, capture, markRaw } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Childcomp\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
@@ -16,7 +17,7 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 1`] = `
   return text('');
   }
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Comp(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"iter\\", 'source');
@@ -34,10 +35,11 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Childcomp(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     let txt1 = ctx['iter'];
@@ -53,6 +55,7 @@ exports[`t-set slots with a t-set with a component in body 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, isBoundary, withDefault, LazyValue, safeOutput, markRaw } = helpers;
+  // Template name: \\"xml_template_1001\\"
   const comp1 = app.createComponent(\`C\`, true, false, false, []);
   const comp2 = app.createComponent(\`Child\`, true, true, false, []);
   
@@ -69,7 +72,7 @@ exports[`t-set slots with a t-set with a component in body 1`] = `
     return comp1({}, key + \`__1\`, node, this, null);
   }
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_Comp(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
     return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
@@ -81,8 +84,9 @@ exports[`t-set slots with a t-set with a component in body 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
+  // Template name: \\"xml_template_1000\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Child(ctx, node, key = \\"\\") {
     const b2 = text(\`Child \`);
     const b3 = callSlot(ctx, node, key, 'default', false, {});
     return multi([b2, b3]);
@@ -94,8 +98,9 @@ exports[`t-set slots with a t-set with a component in body 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_C(ctx, node, key = \\"\\") {
     return text(\`C\`);
   }
 }"
@@ -106,6 +111,7 @@ exports[`t-set slots with an t-set with a component in body 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, isBoundary, withDefault, LazyValue, safeOutput, markRaw } = helpers;
+  // Template name: \\"xml_template_1001\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   const comp2 = app.createComponent(\`Blorg\`, true, true, false, []);
   
@@ -126,7 +132,7 @@ exports[`t-set slots with an t-set with a component in body 1`] = `
     return multi([b3, b4]);
   }
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1001_Comp(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
     return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
@@ -138,8 +144,9 @@ exports[`t-set slots with an t-set with a component in body 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
+  // Template name: \\"xml_template_1000\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Blorg(ctx, node, key = \\"\\") {
     const b2 = text(\`Blorg \`);
     const b3 = callSlot(ctx, node, key, 'default', false, {});
     return multi([b2, b3]);
@@ -151,8 +158,9 @@ exports[`t-set slots with an t-set with a component in body 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(\`Child\`);
   }
 }"
@@ -163,6 +171,7 @@ exports[`t-set slots with an unused t-set with a component in body 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, isBoundary, withDefault, LazyValue, markRaw } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   const comp2 = app.createComponent(\`Child\`, true, true, false, []);
   
@@ -177,7 +186,7 @@ exports[`t-set slots with an unused t-set with a component in body 1`] = `
     return comp1({}, key + \`__1\`, node, this, null);
   }
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Comp(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
     return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
@@ -189,8 +198,9 @@ exports[`t-set slots with an unused t-set with a component in body 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     const b2 = text(\`Child \`);
     const b3 = callSlot(ctx, node, key, 'default', false, {});
     return multi([b2, b3]);
@@ -203,10 +213,11 @@ exports[`t-set t-set can't alter component even if key in component 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><p><block-text-0/></p><p><block-text-1/></p></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Comp(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     let txt1 = ctx['iter'];
@@ -222,10 +233,11 @@ exports[`t-set t-set can't alter component if key not in component 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><p><block-text-0/></p><p><block-text-1/></p></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Comp(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     let txt1 = ctx['iter'];
@@ -241,10 +253,11 @@ exports[`t-set t-set in t-if 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><p><block-text-0/></p></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Comp(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"flag\\", ctx['state'].flag);
@@ -266,11 +279,12 @@ exports[`t-set t-set not altered by child comp 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Childcomp\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Comp(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"iter\\", 'source');
@@ -287,10 +301,11 @@ exports[`t-set t-set not altered by child comp 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Childcomp(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     let txt1 = ctx['iter'];
@@ -306,10 +321,11 @@ exports[`t-set t-set outside modified in t-if 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><p><block-text-0/></p></div>\`);
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Comp(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"iter\\", 0);
@@ -332,6 +348,7 @@ exports[`t-set t-set with a component in body 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
+  // Template name: \\"xml_template_1000\\"
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
@@ -340,7 +357,7 @@ exports[`t-set t-set with a component in body 1`] = `
     return comp1({}, key + \`__1\`, node, this, null);
   }
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_1000_Comp(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
@@ -354,8 +371,9 @@ exports[`t-set t-set with a component in body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: \\"xml_template_999\\"
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Child(ctx, node, key = \\"\\") {
     return text(\`Child\`);
   }
 }"
@@ -366,6 +384,7 @@ exports[`t-set t-set with something in body 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
+  // Template name: \\"xml_template_999\\"
   
   let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
   let block2 = createBlock(\`<p>coucou</p>\`);
@@ -374,7 +393,7 @@ exports[`t-set t-set with something in body 1`] = `
     return block2();
   }
   
-  return function template(ctx, node, key = \\"\\") {
+  return function xml_template_999_Comp(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);

tests/components/basics.test.ts

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

tests/components/error_handling.test.ts

@@ -19,9 +19,8 @@ import {
   snapshotEverything,
   useLogLifecycle,
   nextAppError,
-  steps,
 } from "../helpers";
-import { OwlError } from "../../src/common/owl_error";
+import { OwlError } from "../../src/runtime/error_handling";
 
 let fixture: HTMLElement;
 
@@ -157,15 +156,16 @@ describe("basics", () => {
     } catch (e) {
       error = e as Error;
     }
-    const expectedErrorMessage = `Failed to compile anonymous template: Unexpected identifier
+    const expectedErrorMessage = `Failed to compile template "xml_template_999": Unexpected identifier
 
 generated code:
 function(app, bdom, helpers) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: "xml_template_999"
   
   let block1 = createBlock(\`<div block-attribute-0="class">test</div>\`);
   
-  return function template(ctx, node, key = "") {
+  return function xml_template_999_Comp(ctx, node, key = "") {
     let attr1 = ctx['a']ctx['b'];
     return block1([attr1]);
   }
@@ -182,15 +182,16 @@ function(app, bdom, helpers) {
       static components = { Child };
       static template = xml`<Child/>`;
     }
-    const expectedErrorMessage = `Failed to compile anonymous template: Unexpected identifier
+    const expectedErrorMessage = `Failed to compile template "xml_template_999": Unexpected identifier
 
 generated code:
 function(app, bdom, helpers) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  // Template name: "xml_template_999"
   
   let block1 = createBlock(\`<div block-attribute-0="class">test</div>\`);
   
-  return function template(ctx, node, key = "") {
+  return function xml_template_999_Child(ctx, node, key = "") {
     let attr1 = ctx['a']ctx['b'];
     return block1([attr1]);
   }
@@ -949,28 +950,26 @@ describe("can catch errors", () => {
     }
     await mount(Root, fixture);
     expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Root:setup",
-        "Root:willStart",
-        "Root:willRender",
-        "ErrorBoundary:setup",
-        "ErrorBoundary:willStart",
-        "Root:rendered",
-        "ErrorBoundary:willRender",
-        "ErrorComponent:setup",
-        "ErrorComponent:willStart",
-        "ErrorBoundary:rendered",
-        "ErrorComponent:willRender",
-        "ErrorComponent:rendered",
-        "ErrorComponent:mounted",
-        "boom",
-        "ErrorBoundary:willRender",
-        "ErrorBoundary:rendered",
-        "ErrorBoundary:mounted",
-        "Root:mounted",
-      ]
-    `);
+    expect([
+      "Root:setup",
+      "Root:willStart",
+      "Root:willRender",
+      "ErrorBoundary:setup",
+      "ErrorBoundary:willStart",
+      "Root:rendered",
+      "ErrorBoundary:willRender",
+      "ErrorComponent:setup",
+      "ErrorComponent:willStart",
+      "ErrorBoundary:rendered",
+      "ErrorComponent:willRender",
+      "ErrorComponent:rendered",
+      "ErrorComponent:mounted",
+      "boom",
+      "ErrorBoundary:willRender",
+      "ErrorBoundary:rendered",
+      "ErrorBoundary:mounted",
+      "Root:mounted",
+    ]).toBeLogged();
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleWarn).toBeCalledTimes(0);
   });
@@ -1001,23 +1000,21 @@ describe("can catch errors", () => {
     }
     await mount(Root, fixture);
     expect(fixture.innerHTML).toBe("<div>Error handled</div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Root:setup",
-        "Root:willStart",
-        "Root:willRender",
-        "ErrorComponent:setup",
-        "ErrorComponent:willStart",
-        "Root:rendered",
-        "ErrorComponent:willRender",
-        "ErrorComponent:rendered",
-        "ErrorComponent:mounted",
-        "boom",
-        "Root:willRender",
-        "Root:rendered",
-        "Root:mounted",
-      ]
-    `);
+    expect([
+      "Root:setup",
+      "Root:willStart",
+      "Root:willRender",
+      "ErrorComponent:setup",
+      "ErrorComponent:willStart",
+      "Root:rendered",
+      "ErrorComponent:willRender",
+      "ErrorComponent:rendered",
+      "ErrorComponent:mounted",
+      "boom",
+      "Root:willRender",
+      "Root:rendered",
+      "Root:mounted",
+    ]).toBeLogged();
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleWarn).toBeCalledTimes(0);
   });
@@ -1064,33 +1061,31 @@ describe("can catch errors", () => {
     }
     await mount(A, fixture);
     expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "A:setup",
-        "A:willStart",
-        "A:willRender",
-        "B:setup",
-        "B:willStart",
-        "A:rendered",
-        "B:willRender",
-        "C:setup",
-        "C:willStart",
-        "B:rendered",
-        "C:willRender",
-        "Boom:setup",
-        "Boom:willStart",
-        "C:rendered",
-        "Boom:willRender",
-        "Boom:rendered",
-        "Boom:mounted",
-        "boom",
-        "C:willRender",
-        "C:rendered",
-        "C:mounted",
-        "B:mounted",
-        "A:mounted",
-      ]
-    `);
+    expect([
+      "A:setup",
+      "A:willStart",
+      "A:willRender",
+      "B:setup",
+      "B:willStart",
+      "A:rendered",
+      "B:willRender",
+      "C:setup",
+      "C:willStart",
+      "B:rendered",
+      "C:willRender",
+      "Boom:setup",
+      "Boom:willStart",
+      "C:rendered",
+      "Boom:willRender",
+      "Boom:rendered",
+      "Boom:mounted",
+      "boom",
+      "C:willRender",
+      "C:rendered",
+      "C:mounted",
+      "B:mounted",
+      "A:mounted",
+    ]).toBeLogged();
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleWarn).toBeCalledTimes(0);
   });
@@ -1137,33 +1132,31 @@ describe("can catch errors", () => {
     }
     await mount(Root, fixture);
     expect(fixture.innerHTML).toBe("<div>OK<div>Error handled</div></div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Root:setup",
-        "Root:willStart",
-        "Root:willRender",
-        "OK:setup",
-        "OK:willStart",
-        "ErrorBoundary:setup",
-        "ErrorBoundary:willStart",
-        "Root:rendered",
-        "OK:willRender",
-        "OK:rendered",
-        "ErrorBoundary:willRender",
-        "ErrorComponent:setup",
-        "ErrorComponent:willStart",
-        "ErrorBoundary:rendered",
-        "ErrorComponent:willRender",
-        "ErrorComponent:rendered",
-        "ErrorComponent:mounted",
-        "boom",
-        "ErrorBoundary:willRender",
-        "ErrorBoundary:rendered",
-        "ErrorBoundary:mounted",
-        "OK:mounted",
-        "Root:mounted",
-      ]
-    `);
+    expect([
+      "Root:setup",
+      "Root:willStart",
+      "Root:willRender",
+      "OK:setup",
+      "OK:willStart",
+      "ErrorBoundary:setup",
+      "ErrorBoundary:willStart",
+      "Root:rendered",
+      "OK:willRender",
+      "OK:rendered",
+      "ErrorBoundary:willRender",
+      "ErrorComponent:setup",
+      "ErrorComponent:willStart",
+      "ErrorBoundary:rendered",
+      "ErrorComponent:willRender",
+      "ErrorComponent:rendered",
+      "ErrorComponent:mounted",
+      "boom",
+      "ErrorBoundary:willRender",
+      "ErrorBoundary:rendered",
+      "ErrorBoundary:mounted",
+      "OK:mounted",
+      "Root:mounted",
+    ]).toBeLogged();
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleWarn).toBeCalledTimes(0);
   });
@@ -1490,39 +1483,35 @@ describe("can catch errors", () => {
 
     const parent = await mount(Parent, fixture);
     expect(fixture.innerHTML).toBe("1<div>abc</div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Parent:rendered",
-        "Child:willRender",
-        "Child:rendered",
-        "Child:mounted",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
     parent.state.hasChild = false;
     await nextTick();
     await nextTick();
     await nextTick();
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:willPatch",
-        "Child:willUnmount",
-        "Child:willDestroy",
-        "Parent:patched",
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:willPatch",
-        "Parent:patched",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Child:willUnmount",
+      "Child:willDestroy",
+      "Parent:patched",
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Parent:patched",
+    ]).toBeLogged();
     expect(fixture.innerHTML).toBe("2");
   });
 
@@ -1555,15 +1544,13 @@ describe("can catch errors", () => {
     const parent = await mount(Parent, fixture);
     expect(fixture.innerHTML).toBe("1");
 
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:setup",
-        "Parent:willStart",
-        "Parent:willRender",
-        "Parent:rendered",
-        "Parent:mounted",
-      ]
-    `);
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:mounted",
+    ]).toBeLogged();
 
     parent.state.hasChild = true;
     await nextMicroTick();
@@ -1571,35 +1558,26 @@ describe("can catch errors", () => {
     await nextMicroTick();
     await nextMicroTick();
     await nextMicroTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Child:setup",
-        "Child:willStart",
-        "Parent:rendered",
-        "Child:willRender",
-        "Child:rendered",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+    ]).toBeLogged();
     parent.state.hasChild = false;
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willRender",
-        "Parent:rendered",
-        "Child:willDestroy",
-        "Parent:willRender",
-        "Parent:rendered",
-      ]
-    `);
+    expect([
+      "Parent:willRender",
+      "Parent:rendered",
+      "Child:willDestroy",
+      "Parent:willRender",
+      "Parent:rendered",
+    ]).toBeLogged();
     expect(fixture.innerHTML).toBe("1");
     await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Parent:willPatch",
-        "Parent:patched",
-      ]
-    `);
+    expect(["Parent:willPatch", "Parent:patched"]).toBeLogged();
     expect(fixture.innerHTML).toBe("2");
   });
 });

tests/components/hooks.test.ts

@@ -641,56 +641,6 @@ describe("hooks", () => {
       ]);
     });
 
-    test("effect types are inferred from dependencies", async () => {
-      // @ts-ignore (declared but never used)
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      class MyComponent extends Component {
-        static template = xml`<div/>`;
-
-        setup() {
-          useEffect(
-            (a, b) => {
-              expectType<number>(a);
-              expectType<string>(b);
-            },
-            () => [3, "hello"]
-          );
-        }
-      }
-    });
-
-    test("effect type allows an effect with partial dependencies parameters", async () => {
-      // @ts-ignore (declared but never used)
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      class MyComponent extends Component {
-        static template = xml`<div/>`;
-
-        setup() {
-          useEffect(
-            (a) => {
-              expectType<number>(a);
-            },
-            () => [3, "hello"]
-          );
-        }
-      }
-    });
-
-    test("effect type allows an effect with no dependency parameter", async () => {
-      // @ts-ignore (declared but never used)
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      class MyComponent extends Component {
-        static template = xml`<div/>`;
-
-        setup() {
-          useEffect(
-            () => {},
-            () => [3, "hello"]
-          );
-        }
-      }
-    });
-
     test("properly behaves when the effect function throws", async () => {
       let originalconsoleError = console.error;
       let originalconsoleWarn = console.warn;
@@ -723,5 +673,3 @@ describe("hooks", () => {
     });
   });
 });
-
-function expectType<T>(t: T) {}