[REL] v2.0.0-beta-19

# v2.0.0-beta-19

- fix: events: correctly call handlers in iframes

package.json

@@ -1,9 +1,8 @@
 {
   "name": "@odoo/owl",
-  "version": "2.0.0-beta-12",
+  "version": "2.0.0-beta-19",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
-  "browser": "dist/owl.iife.js",
   "module": "dist/owl.es.js",
   "types": "dist/types/owl.d.ts",
   "files": [

rollup.config.js

@@ -6,6 +6,14 @@ import dts from "rollup-plugin-dts";
 
 let input, output;
 
+const IIFE_FILENAME = "dist/owl.iife.js";
+const CJS_FILENAME = "dist/owl.cjs.js";
+const ES_FILENAME = "dist/owl.es.js";
+
+if (pkg.module !== ES_FILENAME || pkg.main !== CJS_FILENAME) {
+  throw new Error("package.json has been modified. Build script should be updated accordingly");
+}  
+
 const outro = `
 __info__.version = '${pkg.version}';
 __info__.date = '${new Date().toISOString()}';
@@ -23,19 +31,19 @@ switch (process.argv[4]) {
   case "runtime":
     input = "src/runtime/index.ts";
     output = [
-      getConfigForFormat('esm', addSuffix(pkg.module,  'runtime'), outro),
-      getConfigForFormat('cjs', addSuffix(pkg.main,  'runtime'), outro),
-      getConfigForFormat('iife', addSuffix(pkg.browser,  'runtime'), outro),
-      getConfigForFormat('iife', addSuffix(pkg.browser,  'runtime'), outro, true),
+      getConfigForFormat('esm', addSuffix(ES_FILENAME,  'runtime'), outro),
+      getConfigForFormat('cjs', addSuffix(CJS_FILENAME,  'runtime'), outro),
+      getConfigForFormat('iife', addSuffix(IIFE_FILENAME,  'runtime'), outro),
+      getConfigForFormat('iife', addSuffix(IIFE_FILENAME,  'runtime'), outro, true),
     ]
     break;
   default:
     input = "src/index.ts",
     output = [
-      getConfigForFormat('esm', pkg.module, outro),
-      getConfigForFormat('cjs', pkg.main, outro),
-      getConfigForFormat('iife', pkg.browser, outro),
-      getConfigForFormat('iife', pkg.browser, outro, true),
+      getConfigForFormat('esm', ES_FILENAME, outro),
+      getConfigForFormat('cjs', CJS_FILENAME, outro),
+      getConfigForFormat('iife', IIFE_FILENAME, outro),
+      getConfigForFormat('iife', IIFE_FILENAME, outro, true),
     ]
   }
 

src/compiler/code_generator.ts

@@ -1,3 +1,4 @@
+import { isProp } from "../runtime/blockdom/attributes";
 import {
   compileExpr,
   compileExprToArray,
@@ -22,13 +23,14 @@ import {
   ASTTif,
   ASTTKey,
   ASTTOut,
-  ASTTSet,
-  ASTTranslation,
-  ASTType,
   ASTTPortal,
-  EventHandlers,
+  ASTTranslation,
+  ASTTSet,
+  ASTType,
   Attrs,
+  EventHandlers,
 } from "./parser";
+import { OwlError } from "../runtime/error_handling";
 
 type BlockType = "block" | "text" | "multi" | "list" | "html" | "comment";
 
@@ -230,6 +232,7 @@ export class CodeGenerator {
   translatableAttributes: string[] = TRANSLATABLE_ATTRS;
   ast: AST;
   staticDefs: { id: string; expr: string }[] = [];
+  slotNames: Set<String> = new Set();
   helpers: Set<string> = new Set();
 
   constructor(ast: AST, options: CodeGenOptions) {
@@ -534,7 +537,7 @@ export class CodeGenerator {
       .slice(1)
       .map((m) => {
         if (!MODS.has(m)) {
-          throw new Error(`Unknown event modifier: '${m}'`);
+          throw new OwlError(`Unknown event modifier: '${m}'`);
         }
         return `"${m}"`;
       });
@@ -578,13 +581,22 @@ export class CodeGenerator {
         attrName = key.slice(7);
         attrs["block-attribute-" + idx] = attrName;
       } else if (key.startsWith("t-att")) {
+        attrName = key === "t-att" ? null : key.slice(6);
         expr = compileExpr(ast.attrs[key]);
+        if (attrName && isProp(ast.tag, attrName)) {
+          // we force a new string or new boolean to bypass the equality check in blockdom when patching same value
+          if (attrName === "value") {
+            // When the expression is falsy, fall back to an empty string
+            expr = `new String((${expr}) || "")`;
+          } else {
+            expr = `new Boolean(${expr})`;
+          }
+        }
         const idx = block!.insertData(expr, "attr");
         if (key === "t-att") {
           attrs[`block-attributes`] = String(idx);
         } else {
-          attrName = key.slice(6);
-          attrs[`block-attribute-${idx}`] = attrName;
+          attrs[`block-attribute-${idx}`] = attrName!;
         }
       } else if (this.translatableAttributes.includes(key)) {
         attrs[key] = this.translateFn(ast.attrs[key]);
@@ -865,8 +877,9 @@ export class CodeGenerator {
     this.define(`key${this.target.loopLevel}`, ast.key ? compileExpr(ast.key) : loopVar);
     if (this.dev) {
       // Throw error on duplicate keys in dev mode
+      this.helpers.add("OwlError");
       this.addLine(
-        `if (keys${block.id}.has(key${this.target.loopLevel})) { throw new Error(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`
+        `if (keys${block.id}.has(key${this.target.loopLevel})) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`
       );
       this.addLine(`keys${block.id}.add(key${this.target.loopLevel});`);
     }
@@ -1088,7 +1101,7 @@ export class CodeGenerator {
         name = _name;
         value = `bind(ctx, ${value || undefined})`;
       } else {
-        throw new Error("Invalid prop suffix");
+        throw new OwlError("Invalid prop suffix");
       }
     }
     name = /^[a-z_]+$/i.test(name) ? name : `'${name}'`;
@@ -1233,28 +1246,37 @@ export class CodeGenerator {
     let blockString: string;
     let slotName;
     let dynamic = false;
+    let isMultiple = false;
     if (ast.name.match(INTERP_REGEXP)) {
       dynamic = true;
+      isMultiple = true;
       slotName = interpolate(ast.name);
     } else {
       slotName = "'" + ast.name + "'";
+      isMultiple = isMultiple || this.slotNames.has(ast.name);
+      this.slotNames.add(ast.name);
     }
     const dynProps = ast.attrs ? ast.attrs["t-props"] : null;
     if (ast.attrs) {
       delete ast.attrs["t-props"];
     }
+    let key = this.target.loopLevel ? `key${this.target.loopLevel}` : "key";
+    if (isMultiple) {
+      key = `${key} + \`${this.generateComponentKey()}\``;
+    }
+
     const props = ast.attrs ? this.formatPropObject(ast.attrs) : [];
     const scope = this.getPropString(props, dynProps);
     if (ast.defaultContent) {
       const name = this.compileInNewTarget("defaultContent", ast.defaultContent, ctx);
-      blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope}, ${name})`;
+      blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope}, ${name})`;
     } else {
       if (dynamic) {
         let name = generateId("slot");
         this.define(name, slotName);
-        blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}, ${dynamic}, ${scope}))`;
+        blockString = `toggler(${name}, callSlot(ctx, node, ${key}, ${name}, ${dynamic}, ${scope}))`;
       } else {
-        blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope})`;
+        blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope})`;
       }
     }
     // event handling

src/compiler/inline_expressions.ts

@@ -1,3 +1,5 @@
+import { OwlError } from "../runtime/error_handling";
+
 /**
  * Owl QWeb Expression Parser
  *
@@ -106,14 +108,14 @@ let tokenizeString: Tokenizer = function (expr) {
       i++;
       cur = expr[i];
       if (!cur) {
-        throw new Error("Invalid expression");
+        throw new OwlError("Invalid expression");
       }
       s += cur;
     }
     i++;
   }
   if (expr[i] !== start) {
-    throw new Error("Invalid expression");
+    throw new OwlError("Invalid expression");
   }
   s += start;
   if (start === "`") {
@@ -223,7 +225,7 @@ export function tokenize(expr: string): Token[] {
     error = e; // Silence all errors and throw a generic error below
   }
   if (current.length || error) {
-    throw new Error(`Tokenizer error: could not tokenize \`${expr}\``);
+    throw new OwlError(`Tokenizer error: could not tokenize \`${expr}\``);
   }
   return result;
 }

src/compiler/parser.ts

@@ -1,3 +1,5 @@
+import { OwlError } from "../runtime/error_handling";
+
 // -----------------------------------------------------------------------------
 // AST Type definition
 // -----------------------------------------------------------------------------
@@ -258,12 +260,16 @@ function parseTNode(node: Element, ctx: ParsingContext): AST | null {
 // -----------------------------------------------------------------------------
 // Text and Comment Nodes
 // -----------------------------------------------------------------------------
-const whitespaceRE = /[^\S\r\n]+/g;
+const lineBreakRE = /[\r\n]/;
+const whitespaceRE = /\s+/g;
 
 function parseTextCommentNode(node: Node, ctx: ParsingContext): AST | null {
   if (node.nodeType === Node.TEXT_NODE) {
     let value = node.textContent || "";
     if (!ctx.inPreTag) {
+      if (lineBreakRE.test(value) && !value.trim()) {
+        return null;
+      }
       value = value.replace(whitespaceRE, " ");
     }
 
@@ -315,7 +321,7 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
     return null;
   }
   if (tagName.startsWith("block-")) {
-    throw new Error(`Invalid tag name: '${tagName}'`);
+    throw new OwlError(`Invalid tag name: '${tagName}'`);
   }
   ctx = Object.assign({}, ctx);
   if (tagName === "pre") {
@@ -336,13 +342,15 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
     const value = node.getAttribute(attr)!;
     if (attr.startsWith("t-on")) {
       if (attr === "t-on") {
-        throw new Error("Missing event name with t-on directive");
+        throw new OwlError("Missing event name with t-on directive");
       }
       on = on || {};
       on[attr.slice(5)] = value;
     } else if (attr.startsWith("t-model")) {
       if (!["input", "select", "textarea"].includes(tagName)) {
-        throw new Error("The t-model directive only works with <input>, <textarea> and <select>");
+        throw new OwlError(
+          "The t-model directive only works with <input>, <textarea> and <select>"
+        );
       }
 
       let baseExpr, expr;
@@ -355,7 +363,7 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
         baseExpr = value.slice(0, index);
         expr = value.slice(index + 1, -1);
       } else {
-        throw new Error(`Invalid t-model expression: "${value}" (it should be assignable)`);
+        throw new OwlError(`Invalid t-model expression: "${value}" (it should be assignable)`);
       }
 
       const typeAttr = node.getAttribute("type");
@@ -386,10 +394,10 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
         ctx.tModelInfo = model;
       }
     } else if (attr.startsWith("block-")) {
-      throw new Error(`Invalid attribute: '${attr}'`);
+      throw new OwlError(`Invalid attribute: '${attr}'`);
     } else if (attr !== "t-name") {
       if (attr.startsWith("t-") && !attr.startsWith("t-att")) {
-        throw new Error(`Unknown QWeb directive: '${attr}'`);
+        throw new OwlError(`Unknown QWeb directive: '${attr}'`);
       }
       const tModel = ctx.tModelInfo;
       if (tModel && ["t-att-value", "t-attf-value"].includes(attr)) {
@@ -443,7 +451,7 @@ function parseTEscNode(node: Element, ctx: ParsingContext): AST | null {
     };
   }
   if (ast.type === ASTType.TComponent) {
-    throw new Error("t-esc is not supported on Component nodes");
+    throw new OwlError("t-esc is not supported on Component nodes");
   }
   return tesc;
 }
@@ -499,7 +507,7 @@ function parseTForEach(node: Element, ctx: ParsingContext): AST | null {
   node.removeAttribute("t-as");
   const key = node.getAttribute("t-key");
   if (!key) {
-    throw new Error(
+    throw new OwlError(
       `"Directive t-foreach should always be used with a t-key!" (expression: t-foreach="${collection}" t-as="${elem}")`
     );
   }
@@ -682,7 +690,9 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
   let isDynamic = node.hasAttribute("t-component");
 
   if (isDynamic && name !== "t") {
-    throw new Error(`Directive 't-component' can only be used on <t> nodes (used on a <${name}>)`);
+    throw new OwlError(
+      `Directive 't-component' can only be used on <t> nodes (used on a <${name}>)`
+    );
   }
 
   if (!(firstLetter === firstLetter.toUpperCase() || isDynamic)) {
@@ -709,7 +719,7 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
         on[name.slice(5)] = value;
       } else {
         const message = directiveErrorMap.get(name.split("-").slice(0, 2).join("-"));
-        throw new Error(message || `unsupported directive on Component: ${name}`);
+        throw new OwlError(message || `unsupported directive on Component: ${name}`);
       }
     } else {
       props = props || {};
@@ -725,7 +735,7 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
     const slotNodes = Array.from(clone.querySelectorAll("[t-set-slot]"));
     for (let slotNode of slotNodes) {
       if (slotNode.tagName !== "t") {
-        throw new Error(
+        throw new OwlError(
           `Directive 't-set-slot' can only be used on <t> nodes (used on a <${slotNode.tagName}>)`
         );
       }
@@ -900,7 +910,7 @@ function normalizeTIf(el: Element) {
     let nattr = (name: string) => +!!node.getAttribute(name);
     if (prevElem && (pattr("t-if") || pattr("t-elif"))) {
       if (pattr("t-foreach")) {
-        throw new Error(
+        throw new OwlError(
           "t-if cannot stay at the same level as t-foreach when using t-elif or t-else"
         );
       }
@@ -909,19 +919,19 @@ function normalizeTIf(el: Element) {
           return a + b;
         }) > 1
       ) {
-        throw new Error("Only one conditional branching directive is allowed per node");
+        throw new OwlError("Only one conditional branching directive is allowed per node");
       }
       // All text (with only spaces) and comment nodes (nodeType 8) between
       // branch nodes are removed
       let textNode;
       while ((textNode = node.previousSibling) !== prevElem) {
         if (textNode!.nodeValue!.trim().length && textNode!.nodeType !== 8) {
-          throw new Error("text is not allowed between branching directives");
+          throw new OwlError("text is not allowed between branching directives");
         }
         textNode!.remove();
       }
     } else {
-      throw new Error(
+      throw new OwlError(
         "t-elif and t-else directives must be preceded by a t-if or t-elif directive"
       );
     }
@@ -942,7 +952,7 @@ function normalizeTEsc(el: Element) {
   );
   for (const el of elements) {
     if (el.childNodes.length) {
-      throw new Error("Cannot have t-esc on a component that already has content");
+      throw new OwlError("Cannot have t-esc on a component that already has content");
     }
     const value = el.getAttribute("t-esc");
     el.removeAttribute("t-esc");
@@ -996,7 +1006,7 @@ function parseXML(xml: string): XMLDocument {
         }
       }
     }
-    throw new Error(msg);
+    throw new OwlError(msg);
   }
 
   return doc;

src/runtime/app.ts

@@ -1,6 +1,6 @@
 import { Component, ComponentConstructor, Props } from "./component";
 import { ComponentNode } from "./component_node";
-import { nodeErrorHandlers } from "./error_handling";
+import { nodeErrorHandlers, OwlError } from "./error_handling";
 import { Fiber, MountOptions } from "./fibers";
 import { Scheduler } from "./scheduler";
 import { validateProps } from "./template_helpers";
@@ -154,9 +154,9 @@ export class App<
         if (isStatic) {
           C = parent.constructor.components[name as any];
           if (!C) {
-            throw new Error(`Cannot find the definition of component "${name}"`);
+            throw new OwlError(`Cannot find the definition of component "${name}"`);
           } else if (!(C.prototype instanceof Component)) {
-            throw new Error(
+            throw new OwlError(
               `"${name}" is not a Component. It must inherit from the Component class`
             );
           }

src/runtime/blockdom/attributes.ts

@@ -144,7 +144,7 @@ export function updateClass(this: HTMLElement, val: any, oldVal: any) {
 export function makePropSetter(name: string): Setter<HTMLElement> {
   return function setProp(this: HTMLElement, value: any) {
     // support 0, fallback to empty string for other falsy values
-    (this as any)[name] = value === 0 ? 0 : value || "";
+    (this as any)[name] = value === 0 ? 0 : value ? value.valueOf() : "";
   };
 }
 

src/runtime/blockdom/block_compiler.ts

@@ -1,3 +1,4 @@
+import { OwlError } from "../error_handling";
 import {
   attrsSetter,
   attrsUpdater,
@@ -245,7 +246,7 @@ function buildTree(
       };
     }
   }
-  throw new Error("boom");
+  throw new OwlError("boom");
 }
 
 function addRef(tree: IntermediateTree) {

src/runtime/blockdom/events.ts

@@ -27,8 +27,8 @@ function createElementHandler(evName: string, capture: boolean = false): EventHa
   }
 
   function listener(ev: Event) {
-    const currentTarget = ev.currentTarget;
-    if (!currentTarget || !document.contains(currentTarget as HTMLElement)) return;
+    const currentTarget = ev.currentTarget as HTMLElement;
+    if (!currentTarget || !currentTarget.ownerDocument.contains(currentTarget)) return;
     const data = (currentTarget as any)[eventKey];
     if (!data) return;
     config.mainEventHandler(data, ev, currentTarget);

src/runtime/component_node.ts

@@ -1,7 +1,7 @@
 import type { App, Env } from "./app";
 import { BDom, VNode } from "./blockdom";
 import { Component, ComponentConstructor, Props } from "./component";
-import { fibersInError, handleError } from "./error_handling";
+import { fibersInError, handleError, OwlError } from "./error_handling";
 import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
 import {
   clearReactivesForCallback,
@@ -18,7 +18,7 @@ let currentNode: ComponentNode | null = null;
 
 export function getCurrent(): ComponentNode {
   if (!currentNode) {
-    throw new Error("No active component (a hook function should only be called in 'setup')");
+    throw new OwlError("No active component (a hook function should only be called in 'setup')");
   }
   return currentNode;
 }
@@ -83,7 +83,6 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
 
   renderFn: Function;
   parent: ComponentNode | null;
-  level: number;
   childEnv: Env;
   children: { [key: string]: ComponentNode } = Object.create(null);
   refs: any = {};
@@ -108,7 +107,6 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     this.parent = parent;
     this.props = props;
     this.parentKey = parentKey;
-    this.level = parent ? parent.level + 1 : 0;
     const defaultProps = C.defaultProps;
     props = Object.assign({}, props);
     if (defaultProps) {

src/runtime/error_handling.ts

@@ -1,6 +1,11 @@
 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();
@@ -37,7 +42,14 @@ function _handleError(node: ComponentNode | null, error: any): boolean {
 
 type ErrorParams = { error: any } & ({ node: ComponentNode } | { fiber: Fiber });
 export function handleError(params: ErrorParams) {
-  const error = params.error;
+  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!;
 

src/runtime/event_handling.ts

@@ -1,5 +1,6 @@
 import { filterOutModifiersFromData } from "./blockdom/config";
 import { STATUS } from "./status";
+import { OwlError } from "./error_handling";
 
 export const mainEventHandler = (data: any, ev: Event, currentTarget?: EventTarget | null) => {
   const { data: _data, modifiers } = filterOutModifiersFromData(data);
@@ -33,7 +34,7 @@ export const mainEventHandler = (data: any, ev: Event, currentTarget?: EventTarg
   if (Object.hasOwnProperty.call(data, 0)) {
     const handler = data[0];
     if (typeof handler !== "function") {
-      throw new Error(`Invalid handler (expected a function, received: '${handler}')`);
+      throw new OwlError(`Invalid handler (expected a function, received: '${handler}')`);
     }
     let node = data[1] ? data[1].__owl__ : null;
     if (node ? node.status === STATUS.MOUNTED : true) {

src/runtime/fibers.ts

@@ -1,6 +1,6 @@
 import { BDom, mount } from "./blockdom";
 import type { ComponentNode } from "./component_node";
-import { fibersInError, handleError } from "./error_handling";
+import { fibersInError, handleError, OwlError } from "./error_handling";
 import { STATUS } from "./status";
 
 export function makeChildFiber(node: ComponentNode, parent: Fiber): Fiber {
@@ -43,7 +43,7 @@ export function makeRootFiber(node: ComponentNode): Fiber {
 }
 
 function throwOnRender() {
-  throw new Error("Attempted to render cancelled fiber");
+  throw new OwlError("Attempted to render cancelled fiber");
 }
 
 /**

src/runtime/index.ts

@@ -36,6 +36,7 @@ export const blockDom = {
 export { App, mount } from "./app";
 export { xml } from "./template_set";
 export { Component } from "./component";
+export type { ComponentConstructor } from "./component";
 export { useComponent, useState } from "./component_node";
 export { status } from "./status";
 export { reactive, markRaw, toRaw } from "./reactivity";
@@ -54,5 +55,6 @@ export {
   onError,
 } from "./lifecycle_hooks";
 export { validate } from "./validation";
+export { OwlError } from "./error_handling";
 
 export const __info__ = {};

src/runtime/lifecycle_hooks.ts

@@ -1,21 +1,30 @@
 import { getCurrent } from "./component_node";
-import { nodeErrorHandlers } from "./error_handling";
+import { nodeErrorHandlers, OwlError } from "./error_handling";
 
 const TIMEOUT = Symbol("timeout");
 function wrapError(fn: (...args: any[]) => any, hookName: string) {
-  const error = new Error(`The following error occurred in ${hookName}: `) as Error & {
+  const error = new OwlError(`The following error occurred in ${hookName}: `) as Error & {
     cause: any;
   };
-  const timeoutError = new Error(`${hookName}'s promise hasn't resolved after 3 seconds`);
+  const timeoutError = new OwlError(`${hookName}'s promise hasn't resolved after 3 seconds`);
   const node = getCurrent();
   return (...args: any[]) => {
+    const onError = (cause: any) => {
+      error.cause = cause;
+      if (cause instanceof Error) {
+        error.message += `"${cause.message}"`;
+      } else {
+        error.message = `Something that is not an Error was thrown in ${hookName} (see this Error's "cause" property)`;
+      }
+      throw error;
+    };
     try {
       const result = fn(...args);
       if (result instanceof Promise) {
         if (hookName === "onWillStart" || hookName === "onWillUpdateProps") {
           const fiber = node.fiber;
           Promise.race([
-            result,
+            result.catch(() => {}),
             new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
           ]).then((res) => {
             if (res === TIMEOUT && node.fiber === fiber) {
@@ -23,20 +32,11 @@ function wrapError(fn: (...args: any[]) => any, hookName: string) {
             }
           });
         }
-        return result.catch((cause) => {
-          error.cause = cause;
-          if (cause instanceof Error) {
-            error.message += `"${cause.message}"`;
-          }
-          throw error;
-        });
+        return result.catch(onError);
       }
       return result;
     } catch (cause) {
-      if (cause instanceof Error) {
-        error.message += `"${cause.message}"`;
-      }
-      throw error;
+      onError(cause);
     }
   };
 }

src/runtime/portal.ts

@@ -1,6 +1,7 @@
 import { onWillUnmount } from "./lifecycle_hooks";
 import { BDom, text, VNode } from "./blockdom";
 import { Component } from "./component";
+import { OwlError } from "./error_handling";
 
 const VText: any = text("").constructor;
 
@@ -24,7 +25,7 @@ class VPortal extends VText implements Partial<VNode<VPortal>> {
       }
       this.target = el && el.querySelector(this.selector);
       if (!this.target) {
-        throw new Error("invalid portal target");
+        throw new OwlError("invalid portal target");
       }
     }
     this.realBDom!.mount(this.target!, null);

src/runtime/reactivity.ts

@@ -1,4 +1,5 @@
 import { Callback } from "./utils";
+import { OwlError } from "./error_handling";
 
 // Allows to get the target of a Reactive (used for making a new Reactive from the underlying object)
 export const TARGET = Symbol("Target");
@@ -197,7 +198,7 @@ export function reactive<T extends Target>(
   callback: Callback = () => {}
 ): Reactive<T> | NonReactive<T> {
   if (!canBeMadeReactive(target)) {
-    throw new Error(`Cannot make the given value reactive`);
+    throw new OwlError(`Cannot make the given value reactive`);
   }
   if (SKIP in target) {
     return target as NonReactive<T>;

src/runtime/template_helpers.ts

@@ -4,6 +4,7 @@ import { html } from "./blockdom/index";
 import { isOptional, validateSchema } from "./validation";
 import type { ComponentConstructor } from "./component";
 import { markRaw } from "./reactivity";
+import { OwlError } from "./error_handling";
 
 const ObjectCreate = Object.create;
 /**
@@ -70,7 +71,7 @@ function prepareList(collection: any): [any[], any[], number, any[]] {
     values = Object.keys(collection);
     keys = Object.values(collection);
   } else {
-    throw new Error("Invalid loop expression");
+    throw new OwlError("Invalid loop expression");
   }
   const n = values.length;
   return [keys, values, n, new Array(n)];
@@ -191,7 +192,7 @@ function multiRefSetter(refs: RefMap, name: string): RefSetter {
     if (el) {
       count++;
       if (count > 1) {
-        throw new Error("Cannot have 2 elements with same ref name at the same time");
+        throw new OwlError("Cannot have 2 elements with same ref name at the same time");
       }
     }
     if (count === 0 || el) {
@@ -233,7 +234,7 @@ export function validateProps<P>(name: string | ComponentConstructor<P>, props:
         : name in schema && !("*" in schema) && !isOptional(schema[name]);
     for (let p in defaultProps) {
       if (isMandatory(p)) {
-        throw new Error(
+        throw new OwlError(
           `A default value cannot be defined for a mandatory prop (name: '${p}', component: ${ComponentClass.name})`
         );
       }
@@ -242,7 +243,9 @@ export function validateProps<P>(name: string | ComponentConstructor<P>, props:
 
   const errors = validateSchema(props, schema);
   if (errors.length) {
-    throw new Error(`Invalid props for component '${ComponentClass.name}': ` + errors.join(", "));
+    throw new OwlError(
+      `Invalid props for component '${ComponentClass.name}': ` + errors.join(", ")
+    );
   }
 }
 
@@ -264,4 +267,5 @@ export const helpers = {
   bind,
   createCatcher,
   markRaw,
+  OwlError,
 };

src/runtime/template_set.ts

@@ -3,6 +3,7 @@ import { comment, createBlock, html, list, multi, text, toggler } from "./blockd
 import { getCurrent } from "./component_node";
 import { Portal, portalTemplate } from "./portal";
 import { helpers } from "./template_helpers";
+import { OwlError } from "./error_handling";
 
 const bdom = { text, createBlock, list, multi, html, toggler, comment };
 
@@ -31,7 +32,7 @@ function parseXML(xml: string): Document {
         }
       }
     }
-    throw new Error(msg);
+    throw new OwlError(msg);
   }
   return doc;
 }
@@ -76,7 +77,7 @@ export class TemplateSet {
       if (currentAsString === newAsString) {
         return;
       }
-      throw new Error(`Template ${name} already defined with different content`);
+      throw new OwlError(`Template ${name} already defined with different content`);
     }
     this.rawTemplates[name] = template;
   }
@@ -102,7 +103,7 @@ export class TemplateSet {
           const componentName = getCurrent().component.constructor.name;
           extraInfo = ` (for component "${componentName}")`;
         } catch {}
-        throw new Error(`Missing template: "${name}"${extraInfo}`);
+        throw new OwlError(`Missing template: "${name}"${extraInfo}`);
       }
       const isFn = typeof rawTemplate === "function" && !(rawTemplate instanceof Element);
       const templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate);
@@ -119,7 +120,7 @@ export class TemplateSet {
   }
 
   _compileTemplate(name: string, template: string | Element): ReturnType<typeof compile> {
-    throw new Error(`Unable to compile a template. Please use owl full build instead`);
+    throw new OwlError(`Unable to compile a template. Please use owl full build instead`);
   }
 
   callTemplate(owner: any, subTemplate: string, ctx: any, parent: any, key: any): any {

src/runtime/utils.ts

@@ -1,3 +1,4 @@
+import { OwlError } from "./error_handling";
 export type Callback = () => void;
 
 /**
@@ -27,12 +28,18 @@ export function batched(callback: Callback): Callback {
 }
 
 export function validateTarget(target: HTMLElement) {
-  if (!(target instanceof HTMLElement)) {
-    throw new Error("Cannot mount component: the target is not a valid DOM element");
-  }
-  if (!document.body.contains(target)) {
-    throw new Error("Cannot mount a component on a detached dom node");
+  // Get the document and HTMLElement corresponding to the target to allow mounting in iframes
+  const document = target && target.ownerDocument;
+  if (document) {
+    const HTMLElement = document.defaultView!.HTMLElement;
+    if (target instanceof HTMLElement) {
+      if (!document.body.contains(target)) {
+        throw new OwlError("Cannot mount a component on a detached dom node");
+      }
+      return;
+    }
   }
+  throw new OwlError("Cannot mount component: the target is not a valid DOM element");
 }
 
 export class EventBus extends EventTarget {
@@ -54,7 +61,7 @@ export function whenReady(fn?: any): Promise<void> {
 export async function loadFile(url: string): Promise<string> {
   const result = await fetch(url);
   if (!result.ok) {
-    throw new Error("Error while fetching xml templates");
+    throw new OwlError("Error while fetching xml templates");
   }
   return await result.text();
 }

src/runtime/validation.ts

@@ -1,3 +1,5 @@
+import { OwlError } from "./error_handling";
+
 type BaseType =
   | typeof String
   | typeof Boolean
@@ -70,7 +72,7 @@ function toSchema(spec: SimplifiedSchema): NormalizedSchema {
 export function validate(obj: { [key: string]: any }, spec: Schema) {
   let errors = validateSchema(obj, spec);
   if (errors.length) {
-    throw new Error("Invalid object: " + errors.join(", "));
+    throw new OwlError("Invalid object: " + errors.join(", "));
   }
 }
 

tests/__snapshots__/reactivity.test.ts.snap

@@ -347,33 +347,21 @@ exports[`Reactivity: useState useless atoms should be deleted 1`] = `
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Quantity\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- Total: <block-text-0/>
- Count: <block-text-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/> Total: <block-text-0/> Count: <block-text-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(Object.keys(ctx['state']));;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`id\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Object.keys(ctx['state']));;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`id\`] = v_block2[i1];
       const key1 = ctx['id'];
-      const b6 = text(\`
- \`);
-      const b7 = comp1({id: ctx['id']}, key + \`__1__\${key1}\`, node, this, null);
-      const b8 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
+      c_block2[i1] = withKey(comp1({id: ctx['id']}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     ctx = ctx.__proto__;
-    const b4 = list(c_block4);
+    const b2 = list(c_block2);
     let txt1 = ctx['total'];
     let txt2 = Object.keys(ctx['state']).length;
-    const b3 = block3([txt1, txt2], [b4]);
-    return multi([b2, b3]);
+    return block1([txt1, txt2], [b2]);
   }
 }"
 `;

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

@@ -29,6 +29,19 @@ exports[`app can configure an app with props 1`] = `
 }"
 `;
 
+exports[`app can mount app in an iframe 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div class=\\"my-div\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`app destroy remove the widget from the DOM 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/app/app.test.ts

@@ -76,4 +76,22 @@ describe("app", () => {
       "Component 'Root' does not have a static props description"
     );
   });
+
+  test("can mount app in an iframe", async () => {
+    class SomeComponent extends Component {
+      static template = xml`<div class="my-div"/>`;
+    }
+
+    const iframe = document.createElement("iframe");
+    fixture.appendChild(iframe);
+    const app = new App(SomeComponent);
+    const iframeDoc = iframe.contentDocument!;
+    const comp = await app.mount(iframeDoc.body);
+    const div = iframeDoc.querySelector(".my-div");
+    expect(div).not.toBe(null);
+    expect(iframeDoc.contains(div)).toBe(true);
+    app.destroy();
+    expect(iframeDoc.contains(div)).toBe(false);
+    expect(status(comp)).toBe("destroyed");
+  });
 });

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

@@ -342,20 +342,14 @@ exports[`attributes from object variables set previously 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block3 = createBlock(\`<div>
- 
- <span block-attribute-0=\\"class\\"/>
- </div>\`);
+  let block1 = createBlock(\`<div><span block-attribute-0=\\"class\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"o\\", {a:'b'});
     let attr1 = ctx['o'].a;
-    const b3 = block3([attr1]);
-    return multi([b2, b3]);
+    return block1([attr1]);
   }
 }"
 `;
@@ -366,19 +360,14 @@ exports[`attributes from variables set previously (no external node) 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block4 = createBlock(\`<span block-attribute-0=\\"class\\"/>\`);
+  let block1 = createBlock(\`<span block-attribute-0=\\"class\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"abc\\", 'def');
-    const b3 = text(\`
- \`);
     let attr1 = ctx['abc'];
-    const b4 = block4([attr1]);
-    return multi([b2, b3, b4]);
+    return block1([attr1]);
   }
 }"
 `;
@@ -719,21 +708,32 @@ exports[`attributes updating classes (with obj notation) 1`] = `
 }"
 `;
 
+exports[`attributes updating property with falsy value 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = new String((ctx['v']) || \\"\\");
+    return block1([attr1]);
+  }
+}"
+`;
+
 exports[`attributes various escapes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div foo=\\"&lt;foo\\" block-attribute-0=\\"bar\\" block-attribute-1=\\"baz\\" block-attributes=\\"2\\"/>\`);
+  let block1 = createBlock(\`<div foo=\\"&lt;foo\\" block-attribute-0=\\"bar\\" block-attribute-1=\\"baz\\" block-attributes=\\"2\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let attr1 = ctx['bar'];
     let attr2 = \`<\${ctx['baz']}>\`;
     let attr3 = ctx['qux'];
-    const b3 = block3([attr1, attr2, attr3]);
-    return multi([b2, b3]);
+    return block1([attr1, attr2, attr3]);
   }
 }"
 `;
@@ -759,7 +759,7 @@ exports[`special cases for some specific html attributes/properties input of typ
   let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"indeterminate\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let attr1 = ctx['v'];
+    let attr1 = new Boolean(ctx['v']);
     return block1([attr1]);
   }
 }"
@@ -773,7 +773,21 @@ exports[`special cases for some specific html attributes/properties input type=
   let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let attr1 = ctx['flag'];
+    let attr1 = new Boolean(ctx['flag']);
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`special cases for some specific html attributes/properties input with t-att-value (patching with same value 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = new String((ctx['v']) || \\"\\");
     return block1([attr1]);
   }
 }"
@@ -787,7 +801,21 @@ exports[`special cases for some specific html attributes/properties input with t
   let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let attr1 = ctx['v'];
+    let attr1 = new String((ctx['v']) || \\"\\");
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`special cases for some specific html attributes/properties input, type checkbox, with t-att-checked (patching with same value 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = new Boolean(ctx['v']);
     return block1([attr1]);
   }
 }"
@@ -798,18 +826,11 @@ exports[`special cases for some specific html attributes/properties select with
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<select block-attribute-0=\\"value\\">
- <option value=\\"potato\\">Potato</option>
- <option value=\\"tomato\\">Tomato</option>
- <option value=\\"onion\\">Onion</option>
- </select>\`);
+  let block1 = createBlock(\`<select block-attribute-0=\\"value\\"><option value=\\"potato\\">Potato</option><option value=\\"tomato\\">Tomato</option><option value=\\"onion\\">Onion</option></select>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let attr1 = ctx['value'];
-    const b3 = block3([attr1]);
-    return multi([b2, b3]);
+    let attr1 = new String((ctx['value']) || \\"\\");
+    return block1([attr1]);
   }
 }"
 `;
@@ -822,7 +843,7 @@ exports[`special cases for some specific html attributes/properties textarea wit
   let block1 = createBlock(\`<textarea block-attribute-0=\\"value\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let attr1 = ctx['v'];
+    let attr1 = new String((ctx['v']) || \\"\\");
     return block1([attr1]);
   }
 }"
@@ -833,23 +854,10 @@ exports[`special cases for some specific html attributes/properties various bool
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div>
- <input type=\\"checkbox\\" checked=\\"checked\\"/>
- <input checked=\\"checked\\"/>
- <div checked=\\"checked\\"/>
- <div selected=\\"selected\\"/>
- <option selected=\\"selected\\" other=\\"1\\"/>
- <input readonly=\\"readonly\\"/>
- <button disabled=\\"disabled\\"/>
- </div>\`);
+  let block1 = createBlock(\`<div><input type=\\"checkbox\\" checked=\\"checked\\"/><input checked=\\"checked\\"/><div checked=\\"checked\\"/><div selected=\\"selected\\"/><option selected=\\"selected\\" other=\\"1\\"/><input readonly=\\"readonly\\"/><button disabled=\\"disabled\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = block3();
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1();
   }
 }"
 `;

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

@@ -29,23 +29,18 @@ exports[`comments properly handle comments between t-if/t-else 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/><block-child-1/>
- </div>\`);
-  let block4 = createBlock(\`<span>true</span>\`);
-  let block5 = createBlock(\`<span>owl</span>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block2 = createBlock(\`<span>true</span>\`);
+  let block3 = createBlock(\`<span>owl</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5;
+    let b2,b3;
     if (true) {
-      b4 = block4();
+      b2 = block2();
     } else {
-      b5 = block5();
+      b3 = block3();
     }
-    const b3 = block3([], [b4, b5]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3]);
   }
 }"
 `;

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

@@ -65,31 +65,23 @@ exports[`t-on can bind handlers with empty object (with non empty inner string)
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<ul>
- <block-child-0/>
- </ul>\`);
-  let block5 = createBlock(\`<li>
- <a block-handler-0=\\"click\\">link</a>
- </li>\`);
+  let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
+  let block3 = createBlock(\`<li><a block-handler-0=\\"click\\">link</a></li>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(['someval']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`action\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['someval']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`action\`] = v_block2[i1];
       ctx[\`action_index\`] = i1;
       const key1 = ctx['action_index'];
       const v1 = ctx['activate'];
       const v2 = ctx['action'];
       let hdlr1 = [()=>v1(v2), ctx];
-      c_block4[i1] = withKey(block5([hdlr1]), key1);
+      c_block2[i1] = withKey(block3([hdlr1]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -114,15 +106,12 @@ exports[`t-on can bind two event handlers 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<button block-handler-0=\\"click\\" block-handler-1=\\"dblclick\\">Click</button>\`);
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\" block-handler-1=\\"dblclick\\">Click</button>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let hdlr1 = [ctx['handleClick'], ctx];
     let hdlr2 = [ctx['handleDblClick'], ctx];
-    const b3 = block3([hdlr1, hdlr2]);
-    return multi([b2, b3]);
+    return block1([hdlr1, hdlr2]);
   }
 }"
 `;
@@ -147,26 +136,18 @@ exports[`t-on handler is bound to proper owner, part 2 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block6 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  let block2 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block3, v_block3, l_block3, c_block3] = prepareList([1]);;
-    for (let i1 = 0; i1 < l_block3; i1++) {
-      ctx[\`value\`] = v_block3[i1];
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1]);;
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`value\`] = v_block1[i1];
       const key1 = ctx['value'];
-      const b5 = text(\`
- \`);
       let hdlr1 = [ctx['add'], ctx];
-      const b6 = block6([hdlr1]);
-      const b7 = text(\`
- \`);
-      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
+      c_block1[i1] = withKey(block2([hdlr1]), key1);
     }
-    const b3 = list(c_block3);
-    return multi([b2, b3]);
+    return list(c_block1);
   }
 }"
 `;
@@ -205,26 +186,18 @@ exports[`t-on handler is bound to proper owner, part 4 1`] = `
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block3, v_block3, l_block3, c_block3] = prepareList([1]);;
-    for (let i1 = 0; i1 < l_block3; i1++) {
-      ctx[\`value\`] = v_block3[i1];
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1]);;
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`value\`] = v_block1[i1];
       ctx[\`value_first\`] = i1 === 0;
-      ctx[\`value_last\`] = i1 === v_block3.length - 1;
+      ctx[\`value_last\`] = i1 === v_block1.length - 1;
       ctx[\`value_index\`] = i1;
-      ctx[\`value_value\`] = k_block3[i1];
+      ctx[\`value_value\`] = k_block1[i1];
       const key1 = ctx['value'];
-      const b5 = text(\`
- \`);
-      const b6 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
-      const b7 = text(\`
- \`);
-      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
+      c_block1[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
     }
-    const b3 = list(c_block3);
-    return multi([b2, b3]);
+    return list(c_block1);
   }
 }"
 `;
@@ -262,9 +235,7 @@ exports[`t-on t-on modifiers (native listener) basic support for native listener
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div class=\\"myClass\\" block-handler-0=\\"click\\">
- <button block-handler-1=\\"click\\">Button</button>
- </div>\`);
+  let block1 = createBlock(\`<div class=\\"myClass\\" block-handler-0=\\"click\\"><button block-handler-1=\\"click\\">Button</button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['divClicked'], ctx];
@@ -310,9 +281,7 @@ exports[`t-on t-on modifiers (native listener) t-on with .capture modifier 1`] =
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div block-handler-0=\\"click.capture\\">
- <button block-handler-1=\\"click\\">Button</button>
- </div>\`);
+  let block1 = createBlock(\`<div block-handler-0=\\"click.capture\\"><button block-handler-1=\\"click\\">Button</button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [\\"capture\\", ctx['onCapture'], ctx];
@@ -327,9 +296,7 @@ exports[`t-on t-on modifiers (native listener) t-on with empty handler (only mod
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div>
- <button block-handler-0=\\"click.prevent\\">Button</button>
- </div>\`);
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent\\">Button</button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [\\"prevent\\", , ctx];
@@ -343,9 +310,7 @@ exports[`t-on t-on modifiers (native listener) t-on with prevent and self modifi
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div>
- <button block-handler-0=\\"click.prevent.self\\"><span>Button</span></button>
- </div>\`);
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent.self\\"><span>Button</span></button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [\\"prevent\\",\\"self\\", ctx['onClick'], ctx];
@@ -359,11 +324,7 @@ exports[`t-on t-on modifiers (native listener) t-on with prevent and/or stop mod
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div>
- <button block-handler-0=\\"click.prevent\\">Button 1</button>
- <button block-handler-1=\\"click.stop\\">Button 2</button>
- <button block-handler-2=\\"click.prevent.stop\\">Button 3</button>
- </div>\`);
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent\\">Button 1</button><button block-handler-1=\\"click.stop\\">Button 2</button><button block-handler-2=\\"click.prevent.stop\\">Button 3</button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [\\"prevent\\", ctx['onClickPrevented'], ctx];
@@ -380,12 +341,8 @@ exports[`t-on t-on modifiers (native listener) t-on with prevent modifier in t-f
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block5 = createBlock(\`<a href=\\"#\\" block-handler-0=\\"click.prevent\\">
- Edit <block-text-1/>
- </a>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<a href=\\"#\\" block-handler-0=\\"click.prevent\\"> Edit <block-text-1/></a>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -393,18 +350,12 @@ exports[`t-on t-on modifiers (native listener) t-on with prevent modifier in t-f
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`project\`] = v_block2[i1];
       const key1 = ctx['project'];
-      const b4 = text(\`
- \`);
       const v1 = ctx['onEdit'];
       const v2 = ctx['project'];
       let hdlr1 = [\\"prevent\\", _ev=>v1(v2.id,_ev), ctx];
       let txt1 = ctx['project'].name;
-      const b5 = block5([hdlr1, txt1]);
-      const b6 = text(\`
- \`);
-      c_block2[i1] = withKey(multi([b4, b5, b6]), key1);
+      c_block2[i1] = withKey(block3([hdlr1, txt1]), key1);
     }
-    ctx = ctx.__proto__;
     const b2 = list(c_block2);
     return block1([], [b2]);
   }
@@ -416,9 +367,7 @@ exports[`t-on t-on modifiers (native listener) t-on with self and prevent modifi
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div>
- <button block-handler-0=\\"click.self.prevent\\"><span>Button</span></button>
- </div>\`);
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click.self.prevent\\"><span>Button</span></button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [\\"self\\",\\"prevent\\", ctx['onClick'], ctx];
@@ -432,10 +381,7 @@ exports[`t-on t-on modifiers (native listener) t-on with self modifier 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div>
- <button block-handler-0=\\"click\\"><span>Button</span></button>
- <button block-handler-1=\\"click.self\\"><span>Button</span></button>
- </div>\`);
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><span>Button</span></button><button block-handler-1=\\"click.self\\"><span>Button</span></button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['onClick'], ctx];
@@ -450,9 +396,7 @@ exports[`t-on t-on modifiers (synthetic listener) basic support for synthetic 1`
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div block-handler-0=\\"click.synthetic\\">
- <button block-handler-1=\\"click.synthetic\\">Button</button>
- </div>\`);
+  let block1 = createBlock(\`<div block-handler-0=\\"click.synthetic\\"><button block-handler-1=\\"click.synthetic\\">Button</button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [\\"synthetic\\", ctx['divClicked'], ctx];

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

@@ -7,116 +7,74 @@ exports[`misc complex template 1`] = `
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`SlotButton\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div block-attribute-0=\\"class\\">
- <div block-attribute-1=\\"class\\">
- <div class=\\"batch_header\\">
- <a block-attribute-2=\\"href\\" block-attribute-3=\\"class\\" title=\\"View Batch\\">
- <block-text-4/>
- <block-child-0/>
- <i class=\\"arrow fa fa-window-maximize\\"/>
- </a>
- </div>
- <block-child-1/>
- <div class=\\"batch_slots\\">
- <block-child-2/>
- <block-child-3/>
- </div>
- <div class=\\"batch_commits\\">
- <block-child-4/>
- </div>
- </div>
- </div>\`);
-  let block4 = createBlock(\`<i class=\\"fa fa-exclamation-triangle\\"/>\`);
-  let block7 = createBlock(\`<span><i class=\\"fa fa-cog fa-spin fa-fw\\"/> preparing</span>\`);
-  let block15 = createBlock(\`<div class=\\"slot_filler\\"/>\`);
-  let block17 = createBlock(\`<div class=\\"one_line\\">
- <a block-attribute-0=\\"href\\" block-attribute-1=\\"class\\">
- <block-child-0/>
- <block-child-1/>
- <block-child-2/>
- <block-child-3/>
- <block-text-2/>
- </a>
- <a block-attribute-3=\\"href\\" class=\\"badge badge-light\\" title=\\"View Commit on Github\\"><i class=\\"fa fa-github\\"/></a>
- <span><block-text-4/></span>
- </div>\`);
-  let block18 = createBlock(\`<i class=\\"fa fa-fw fa-hashtag\\" title=\\"This commit is a new head\\"/>\`);
-  let block19 = createBlock(\`<i class=\\"fa fa-fw fa-link\\" title=\\"This commit is an existing head from bundle branches\\"/>\`);
-  let block20 = createBlock(\`<i class=\\"fa fa-fw fa-code-fork\\" title=\\"This commit is matched from a base batch with matching merge_base\\"/>\`);
-  let block21 = createBlock(\`<i class=\\"fa fa-fw fa-clock-o\\" title=\\"This commit is the head of a base branch\\"/>\`);
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"><div block-attribute-1=\\"class\\"><div class=\\"batch_header\\"><a block-attribute-2=\\"href\\" block-attribute-3=\\"class\\" title=\\"View Batch\\"><block-text-4/><block-child-0/><i class=\\"arrow fa fa-window-maximize\\"/></a></div><block-child-1/><div class=\\"batch_slots\\"><block-child-2/><block-child-3/></div><div class=\\"batch_commits\\"><block-child-4/></div></div></div>\`);
+  let block2 = createBlock(\`<i class=\\"fa fa-exclamation-triangle\\"/>\`);
+  let block3 = createBlock(\`<span><i class=\\"fa fa-cog fa-spin fa-fw\\"/> preparing</span>\`);
+  let block7 = createBlock(\`<div class=\\"slot_filler\\"/>\`);
+  let block9 = createBlock(\`<div class=\\"one_line\\"><a block-attribute-0=\\"href\\" block-attribute-1=\\"class\\"><block-child-0/><block-child-1/><block-child-2/><block-child-3/><block-text-2/></a><a block-attribute-3=\\"href\\" class=\\"badge badge-light\\" title=\\"View Commit on Github\\"><i class=\\"fa fa-github\\"/></a><span><block-text-4/></span></div>\`);
+  let block10 = createBlock(\`<i class=\\"fa fa-fw fa-hashtag\\" title=\\"This commit is a new head\\"/>\`);
+  let block11 = createBlock(\`<i class=\\"fa fa-fw fa-link\\" title=\\"This commit is an existing head from bundle branches\\"/>\`);
+  let block12 = createBlock(\`<i class=\\"fa fa-fw fa-code-fork\\" title=\\"This commit is matched from a base batch with matching merge_base\\"/>\`);
+  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 = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5,b9,b14,b16;
+    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}\`;
     let attr4 = \`badge badge-\${ctx['batch'].has_warning?'warning':'light'}\`;
     let txt1 = ctx['batch'].formated_age;
     if (ctx['batch'].has_warning) {
-      b4 = block4();
+      b2 = block2();
     }
     if (ctx['batch'].state=='preparing') {
-      const b6 = text(\`
- \`);
-      const b7 = block7();
-      const b8 = text(\`
- \`);
-      b5 = multi([b6, b7, b8]);
+      b3 = block3();
     }
     ctx = Object.create(ctx);
-    const [k_block9, v_block9, l_block9, c_block9] = 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_block9; i1++) {
-      ctx[\`slot\`] = v_block9[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['batch'].slot_ids.filter(_slot=>_slot.build_id.id&&!_slot.trigger_id.manual&&(ctx['options'].trigger_display[_slot.trigger_id.id])));;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`slot\`] = v_block4[i1];
       const key1 = ctx['slot'].id;
-      const b11 = text(\`
- \`);
-      const b12 = comp1({class: ctx['slot_container'],slot: ctx['slot']}, key + \`__1__\${key1}\`, node, this, null);
-      const b13 = text(\`
- \`);
-      c_block9[i1] = withKey(multi([b11, b12, b13]), key1);
+      c_block4[i1] = withKey(comp1({class: ctx['slot_container'],slot: ctx['slot']}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     ctx = ctx.__proto__;
-    b9 = list(c_block9);
+    b4 = list(c_block4);
     ctx = Object.create(ctx);
-    const [k_block14, v_block14, l_block14, c_block14] = prepareList([1,2,3,4]);;
-    for (let i1 = 0; i1 < l_block14; i1++) {
-      ctx[\`x\`] = v_block14[i1];
+    const [k_block6, v_block6, l_block6, c_block6] = prepareList([1,2,3,4]);;
+    for (let i1 = 0; i1 < l_block6; i1++) {
+      ctx[\`x\`] = v_block6[i1];
       const key1 = ctx['x'];
-      c_block14[i1] = withKey(block15(), key1);
+      c_block6[i1] = withKey(block7(), key1);
     }
     ctx = ctx.__proto__;
-    b14 = list(c_block14);
+    b6 = list(c_block6);
     ctx = Object.create(ctx);
-    const [k_block16, v_block16, l_block16, c_block16] = prepareList(ctx['commit_links']);;
-    for (let i1 = 0; i1 < l_block16; i1++) {
-      ctx[\`commit_link\`] = v_block16[i1];
+    const [k_block8, v_block8, l_block8, c_block8] = prepareList(ctx['commit_links']);;
+    for (let i1 = 0; i1 < l_block8; i1++) {
+      ctx[\`commit_link\`] = v_block8[i1];
       const key1 = ctx['commit_link'].id;
-      let b18,b19,b20,b21;
+      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') {
-        b18 = block18();
+        b10 = block10();
       }
       if (ctx['commit_link'].match_type=='head') {
-        b19 = block19();
+        b11 = block11();
       }
       if (ctx['commit_link'].match_type=='base_match') {
-        b20 = block20();
+        b12 = block12();
       }
       if (ctx['commit_link'].match_type=='base_head') {
-        b21 = block21();
+        b13 = block13();
       }
       let txt2 = ctx['commit_link'].commit_dname;
       let attr7 = 'https://%s/commit/%s'%(ctx['commit_link'].commit_remote_url,ctx['commit_link'].commit_name);
       let txt3 = ctx['commit_link'].commit_subject;
-      c_block16[i1] = withKey(block17([attr5, attr6, txt2, attr7, txt3], [b18, b19, b20, b21]), key1);
+      c_block8[i1] = withKey(block9([attr5, attr6, txt2, attr7, txt3], [b10, b11, b12, b13]), key1);
     }
-    ctx = ctx.__proto__;
-    b16 = list(c_block16);
-    const b3 = block3([attr1, attr2, attr3, attr4, txt1], [b4, b5, b9, b14, b16]);
-    return multi([b2, b3]);
+    b8 = list(c_block8);
+    return block1([attr1, attr2, attr3, attr4, txt1], [b2, b3, b4, b6, b8]);
   }
 }"
 `;
@@ -132,71 +90,43 @@ exports[`misc global 1`] = `
   const callTemplate_4 = app.getTemplate(\`_callee-asc\`);
   const callTemplate_5 = app.getTemplate(\`_callee-asc-toto\`);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- <block-child-1/>
- </div>\`);
-  let block7 = createBlock(\`<span><block-text-0/></span>\`);
+  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 = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList([4,5,6]);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`value\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([4,5,6]);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`value\`] = v_block2[i1];
       ctx[\`value_first\`] = i1 === 0;
-      ctx[\`value_last\`] = i1 === v_block4.length - 1;
+      ctx[\`value_last\`] = i1 === v_block2.length - 1;
       ctx[\`value_index\`] = i1;
-      ctx[\`value_value\`] = k_block4[i1];
+      ctx[\`value_value\`] = k_block2[i1];
       const key1 = ctx['value'];
-      const b6 = text(\`
- \`);
       let txt1 = ctx['value'];
-      const b7 = block7([txt1]);
-      const b8 = text(\`
- \`);
+      const b4 = block4([txt1]);
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
-      const b10 = text(\`
- \`);
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
-      const b12 = text(\`
- \`);
       setContextValue(ctx, \\"foo\\", 'aaa');
-      const b13 = text(\`
- \`);
-      const b11 = multi([b12, b13]);
-      ctx[zero] = b11;
-      const b14 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
+      const b6 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
       ctx = ctx.__proto__;
-      const b15 = text(\`
- \`);
-      const b16 = callTemplate_2.call(this, ctx, node, key + \`__2__\${key1}\`);
-      const b17 = text(\`
- \`);
+      const b7 = callTemplate_2.call(this, ctx, node, key + \`__2__\${key1}\`);
       setContextValue(ctx, \\"foo\\", 'bbb');
-      const b18 = text(\`
- \`);
-      const b19 = callTemplate_3.call(this, ctx, node, key + \`__3__\${key1}\`);
-      const b20 = text(\`
- \`);
-      const b9 = multi([b10, b14, b15, b16, b17, b18, b19, b20]);
-      ctx[zero] = b9;
-      const b21 = 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__;
-      const b22 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8, b21, b22]), key1);
+      c_block2[i1] = withKey(multi([b4, b9]), key1);
     }
     ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b23 = callTemplate_5.call(this, ctx, node, key + \`__5\`);
-    const b3 = block3([], [b4, b23]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    const b10 = callTemplate_5.call(this, ctx, node, key + \`__5\`);
+    return block1([], [b2, b10]);
   }
 }"
 `;
@@ -257,48 +187,7 @@ exports[`misc other complex template 1`] = `
   const comp1 = app.createComponent(\`BundlesList\`, true, false, false, false);
   const comp2 = app.createComponent(\`BundlesList\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div>
- <header>
- <nav class=\\"navbar navbar-expand-md navbar-light bg-light\\">
- <a block-attribute-0=\\"href\\">
- <b style=\\"color:#777;\\">
- <block-text-1/>
- </b>
- </a>
- <button type=\\"button\\" class=\\"navbar-toggler\\" data-toggle=\\"collapse\\" data-target=\\"#top_menu_collapse\\">
- <span class=\\"navbar-toggler-icon\\"/>
- </button>
- <div class=\\"collapse navbar-collapse\\" id=\\"top_menu_collapse\\" aria-expanded=\\"false\\">
- <ul class=\\"nav navbar-nav ml-auto text-right\\" id=\\"top_menu\\">
- <block-child-0/>
- 
- <li class=\\"nav-item divider\\"/>
- <block-child-1/>
- </ul>
- 
- <div>
- <div class=\\"input-group input-group-sm\\">
- <div class=\\"input-group-prepend input-group-sm\\">
- <button class=\\"btn btn-default fa fa-cog\\" title=\\"Settings\\" block-handler-2=\\"click\\"/>
- <button class=\\"btn btn-default\\" block-handler-3=\\"click\\">
- More
- </button>
- <block-child-2/>
- </div>
- 
- <input class=\\"form-control\\" type=\\"text\\" placeholder=\\"Search\\" aria-label=\\"Search\\" name=\\"search\\" block-attribute-4=\\"value\\" block-handler-5=\\"keyup\\" block-handler-6=\\"change\\" block-ref=\\"7\\"/>
- <div class=\\"input-group-append\\">
- <button class=\\"btn btn-default fa fa-eraser\\" block-handler-8=\\"click\\"/>
- </div>
- </div>
- </div>
- </div>
- </nav>
- </header>
- 
- <div class=\\"container-fluid\\" block-ref=\\"9\\">
- <div class=\\"row\\">
- <!--div class=\\"form-group col-md-6\\">
+  let block1 = createBlock(\`<div><header><nav class=\\"navbar navbar-expand-md navbar-light bg-light\\"><a block-attribute-0=\\"href\\"><b style=\\"color:#777;\\"><block-text-1/></b></a><button type=\\"button\\" class=\\"navbar-toggler\\" data-toggle=\\"collapse\\" data-target=\\"#top_menu_collapse\\"><span class=\\"navbar-toggler-icon\\"/></button><div class=\\"collapse navbar-collapse\\" id=\\"top_menu_collapse\\" aria-expanded=\\"false\\"><ul class=\\"nav navbar-nav ml-auto text-right\\" id=\\"top_menu\\"><block-child-0/><li class=\\"nav-item divider\\"/><block-child-1/></ul><div><div class=\\"input-group input-group-sm\\"><div class=\\"input-group-prepend input-group-sm\\"><button class=\\"btn btn-default fa fa-cog\\" title=\\"Settings\\" block-handler-2=\\"click\\"/><button class=\\"btn btn-default\\" block-handler-3=\\"click\\"> More </button><block-child-2/></div><input class=\\"form-control\\" type=\\"text\\" placeholder=\\"Search\\" aria-label=\\"Search\\" name=\\"search\\" block-attribute-4=\\"value\\" block-handler-5=\\"keyup\\" block-handler-6=\\"change\\" block-ref=\\"7\\"/><div class=\\"input-group-append\\"><button class=\\"btn btn-default fa fa-eraser\\" block-handler-8=\\"click\\"/></div></div></div></div></nav></header><div class=\\"container-fluid\\" block-ref=\\"9\\"><div class=\\"row\\"><!--div class=\\"form-group col-md-6\\">
                       <h5>Search options</h5>
                       <input class=\\"form-control\\" type=\\"text\\" name=\\"default_search\\" id=\\"default_search\\" t-att-checked=\\"default_search\\" placeholder=\\"Default search\\"/>
       
@@ -311,230 +200,130 @@ exports[`misc other complex template 1`] = `
                           <input class=\\"form-check-input\\" type=\\"checkbox\\" name=\\"display_dev\\"/>
                           <label class=\\"form-check-label\\" for=\\"display_dev\\">Display dev</label>
                       </div>
-                  </div-->
- <div class=\\"form-group col-md-6\\">
- <h5>Triggers</h5>
- <block-child-3/>
- </div>
- </div>
- </div>
- 
- <div class=\\"container-fluid frontend\\">
- <div class=\\"row\\">
- <div class=\\"col-md-12\\">
- <block-child-4/>
- </div>
- <div class=\\"col-md-12\\">
- <block-child-5/>
- <block-child-6/><block-child-7/>
- </div>
- </div>
- </div>
- </div>\`);
-  let block5 = createBlock(\`<li class=\\"nav-item\\">
- <a class=\\"nav-link\\" href=\\"#\\" block-handler-0=\\"click\\">
- <block-text-1/>
- </a>
- </li>\`);
-  let block10 = createBlock(\`<li class=\\"nav-item dropdown\\">
- <b>
- <a class=\\"nav-link\\" block-attribute-0=\\"href\\">Login</a>
- </b>
- </li>\`);
-  let block16 = createBlock(\`<li class=\\"nav-item\\">
- <a href=\\"/runbot/errors\\" class=\\"nav-link text-danger\\" block-attribute-0=\\"title\\">
- <i class=\\"fa fa-bug\\"/><block-text-1/>
- </a>
- </li>\`);
-  let block18 = createBlock(\`<li class=\\"nav-item divider\\"/>\`);
-  let block22 = createBlock(\`<li class=\\"nav-item\\">
- <a href=\\"/runbot/errors\\" class=\\"nav-link\\" title=\\"Random Bugs\\"><i class=\\"fa fa-bug\\"/></a>
- </li>\`);
-  let block24 = createBlock(\`<li class=\\"nav-item divider\\"/>\`);
-  let block27 = createBlock(\`<li class=\\"nav-item dropdown\\">
- <a href=\\"#\\" class=\\"nav-link dropdown-toggle\\" data-toggle=\\"dropdown\\">
- <b>
- <span><block-text-0/></span>
- </b>
- </a>
- <div class=\\"dropdown-menu js_usermenu\\" role=\\"menu\\">
- <a class=\\"dropdown-item\\" id=\\"o_logout\\" role=\\"menuitem\\" block-attribute-1=\\"href\\">Logout</a>
- <a class=\\"dropdown-item\\" role=\\"menuitem\\" block-attribute-2=\\"href\\">Web</a>
- </div>
- </li>\`);
-  let block30 = createBlock(\`<select class=\\"custom-select\\" name=\\"category\\" id=\\"category\\">
- <block-child-0/>
- </select>\`);
-  let block32 = createBlock(\`<option block-attribute-0=\\"value\\" block-attribute-1=\\"selected\\"><block-text-2/></option>\`);
-  let block38 = createBlock(\`<div class=\\"form-check\\">
- <input class=\\"form-check-input\\" type=\\"checkbox\\" block-attribute-0=\\"name\\" block-attribute-1=\\"id\\" block-attribute-2=\\"checked\\" block-attribute-3=\\"data-trigger_id\\" block-handler-4=\\"change\\"/>
- <label class=\\"form-check-label\\" block-attribute-5=\\"for\\"><block-text-6/></label>
- </div>\`);
-  let block41 = createBlock(\`<div>
- <button class=\\"btn btn-sm btn-default\\" block-handler-0=\\"click\\">All</button>
- <button class=\\"btn btn-sm btn-default\\" block-handler-1=\\"click\\">None</button>
- <button class=\\"btn btn-sm btn-info\\" block-handler-2=\\"click\\">Default</button>
- <button class=\\"btn btn-sm btn-default\\" block-handler-3=\\"click\\">Close</button>
- </div>\`);
-  let block44 = createBlock(\`<div class=\\"alert alert-warning\\" role=\\"alert\\">
- <block-text-0/> <!-- todo fixme-->
- </div>\`);
-  let block45 = createBlock(\`<div class=\\"mb32\\">
- <h1>No project</h1>
- </div>\`);
-  let block46 = createBlock(\`<div>
- <block-child-0/>
- <block-child-1/>
- </div>\`);
+                  </div--><div class=\\"form-group col-md-6\\"><h5>Triggers</h5><block-child-3/></div></div></div><div class=\\"container-fluid frontend\\"><div class=\\"row\\"><div class=\\"col-md-12\\"><block-child-4/></div><div class=\\"col-md-12\\"><block-child-5/><block-child-6/><block-child-7/></div></div></div></div>\`);
+  let block3 = createBlock(\`<li class=\\"nav-item\\"><a class=\\"nav-link\\" href=\\"#\\" block-handler-0=\\"click\\"><block-text-1/></a></li>\`);
+  let block5 = createBlock(\`<li class=\\"nav-item dropdown\\"><b><a class=\\"nav-link\\" block-attribute-0=\\"href\\">Login</a></b></li>\`);
+  let block8 = createBlock(\`<li class=\\"nav-item\\"><a href=\\"/runbot/errors\\" class=\\"nav-link text-danger\\" block-attribute-0=\\"title\\"><i class=\\"fa fa-bug\\"/><block-text-1/></a></li>\`);
+  let block9 = createBlock(\`<li class=\\"nav-item divider\\"/>\`);
+  let block11 = createBlock(\`<li class=\\"nav-item\\"><a href=\\"/runbot/errors\\" class=\\"nav-link\\" title=\\"Random Bugs\\"><i class=\\"fa fa-bug\\"/></a></li>\`);
+  let block12 = createBlock(\`<li class=\\"nav-item divider\\"/>\`);
+  let block13 = createBlock(\`<li class=\\"nav-item dropdown\\"><a href=\\"#\\" class=\\"nav-link dropdown-toggle\\" data-toggle=\\"dropdown\\"><b><span><block-text-0/></span></b></a><div class=\\"dropdown-menu js_usermenu\\" role=\\"menu\\"><a class=\\"dropdown-item\\" id=\\"o_logout\\" role=\\"menuitem\\" block-attribute-1=\\"href\\">Logout</a><a class=\\"dropdown-item\\" role=\\"menuitem\\" block-attribute-2=\\"href\\">Web</a></div></li>\`);
+  let block14 = createBlock(\`<select class=\\"custom-select\\" name=\\"category\\" id=\\"category\\"><block-child-0/></select>\`);
+  let block16 = createBlock(\`<option block-attribute-0=\\"value\\" block-attribute-1=\\"selected\\"><block-text-2/></option>\`);
+  let block20 = createBlock(\`<div class=\\"form-check\\"><input class=\\"form-check-input\\" type=\\"checkbox\\" block-attribute-0=\\"name\\" block-attribute-1=\\"id\\" block-attribute-2=\\"checked\\" block-attribute-3=\\"data-trigger_id\\" block-handler-4=\\"change\\"/><label class=\\"form-check-label\\" block-attribute-5=\\"for\\"><block-text-6/></label></div>\`);
+  let block21 = createBlock(\`<div><button class=\\"btn btn-sm btn-default\\" block-handler-0=\\"click\\">All</button><button class=\\"btn btn-sm btn-default\\" block-handler-1=\\"click\\">None</button><button class=\\"btn btn-sm btn-info\\" block-handler-2=\\"click\\">Default</button><button class=\\"btn btn-sm btn-default\\" block-handler-3=\\"click\\">Close</button></div>\`);
+  let block23 = createBlock(\`<div class=\\"alert alert-warning\\" role=\\"alert\\"><block-text-0/> <!-- todo fixme--></div>\`);
+  let block24 = createBlock(\`<div class=\\"mb32\\"><h1>No project</h1></div>\`);
+  let block25 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`search_input\`] = el;
     const ref2 = (el) => refs[\`settings_menu\`] = el;
-    const b2 = text(\`
- \`);
-    let b4,b6,b30,b33,b43,b44,b45,b46;
+    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_block4, v_block4, l_block4, c_block4] = prepareList(ctx['projects']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`project\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['projects']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`project\`] = v_block2[i1];
       const key1 = ctx['project'].id;
       let hdlr1 = [ctx['selectProject'](ctx['project']), ctx];
       let txt2 = ctx['project'].name;
-      c_block4[i1] = withKey(block5([hdlr1, txt2]), key1);
+      c_block2[i1] = withKey(block3([hdlr1, txt2]), key1);
     }
     ctx = ctx.__proto__;
-    b4 = list(c_block4);
+    b2 = list(c_block2);
     if (ctx['user']) {
-      let b7,b8,b12,b29;
-      b7 = text(\`
- \`);
+      let b5,b6;
       if (ctx['user'].public) {
-        const b9 = text(\`
- \`);
         let attr2 = \`/web/login?redirect=/\`;
-        const b10 = block10([attr2]);
-        const b11 = text(\`
- \`);
-        b8 = multi([b9, b10, b11]);
+        b5 = block5([attr2]);
       } else {
-        let b13,b14,b20,b26,b27,b28;
-        b13 = text(\`
- \`);
+        let b7,b10,b13;
         if (ctx['nb_assigned_errors']&&ctx['nb_assigned_errors']>0) {
-          const b15 = text(\`
- \`);
           let attr3 = \`You have \${ctx['nb_assigned_errors']} random bug assigned\`;
           let txt3 = ctx['nb_assigned_errors'];
-          const b16 = block16([attr3, txt3]);
-          const b17 = text(\`
- \`);
-          const b18 = block18();
-          const b19 = text(\`
- \`);
-          b14 = multi([b15, b16, b17, b18, b19]);
+          const b8 = block8([attr3, txt3]);
+          const b9 = block9();
+          b7 = multi([b8, b9]);
         } else if (ctx['nb_build_errors']&&ctx['nb_build_errors']>0) {
-          const b21 = text(\`
- \`);
-          const b22 = block22();
-          const b23 = text(\`
- \`);
-          const b24 = block24();
-          const b25 = text(\`
- \`);
-          b20 = multi([b21, b22, b23, b24, b25]);
+          const b11 = block11();
+          const b12 = block12();
+          b10 = multi([b11, b12]);
         }
-        b26 = text(\`
- \`);
         let txt4 = ctx['user'].name.length>25?ctx['user'].namesubstring(0,23)+'...':ctx['user'].name;
         let attr4 = \`/web/session/logout?redirect=/\`;
         let attr5 = \`/web\`;
-        b27 = block27([txt4, attr4, attr5]);
-        b28 = text(\`
- \`);
-        b12 = multi([b13, b14, b20, b26, b27, b28]);
+        b13 = block13([txt4, attr4, attr5]);
+        b6 = multi([b7, b10, b13]);
       }
-      b29 = text(\`
- \`);
-      b6 = multi([b7, b8, b12, b29]);
+      b4 = multi([b5, b6]);
     }
     let hdlr2 = [ctx['toggleSettingsMenu'], ctx];
     let hdlr3 = [ctx['toggleMore'], ctx];
     if (ctx['categories']&&ctx['categories'].length>1) {
       ctx = Object.create(ctx);
-      const [k_block31, v_block31, l_block31, c_block31] = prepareList(ctx['categories']);;
-      for (let i1 = 0; i1 < l_block31; i1++) {
-        ctx[\`category\`] = v_block31[i1];
+      const [k_block15, v_block15, l_block15, c_block15] = prepareList(ctx['categories']);;
+      for (let i1 = 0; i1 < l_block15; i1++) {
+        ctx[\`category\`] = v_block15[i1];
         const key1 = ctx['category'].id;
         let attr6 = ctx['category'].id;
-        let attr7 = ctx['category'].id==ctx['options'].active_category_id;
+        let attr7 = new Boolean(ctx['category'].id==ctx['options'].active_category_id);
         let txt5 = ctx['category'].name;
-        c_block31[i1] = withKey(block32([attr6, attr7, txt5]), key1);
+        c_block15[i1] = withKey(block16([attr6, attr7, txt5]), key1);
       }
       ctx = ctx.__proto__;
-      const b31 = list(c_block31);
-      b30 = block30([], [b31]);
+      const b15 = list(c_block15);
+      b14 = block14([], [b15]);
     }
-    let attr8 = ctx['search'].value;
+    let attr8 = new String((ctx['search'].value) || \\"\\");
     let hdlr4 = [ctx['updateFilter'], ctx];
     let hdlr5 = [ctx['updateFilter'], ctx];
     let hdlr6 = [ctx['clearSearch'], ctx];
     if (ctx['triggers']) {
-      const b34 = text(\`
- \`);
       ctx = Object.create(ctx);
-      const [k_block35, v_block35, l_block35, c_block35] = prepareList(ctx['triggers']);;
-      for (let i1 = 0; i1 < l_block35; i1++) {
-        ctx[\`trigger\`] = v_block35[i1];
+      const [k_block18, v_block18, l_block18, c_block18] = prepareList(ctx['triggers']);;
+      for (let i1 = 0; i1 < l_block18; i1++) {
+        ctx[\`trigger\`] = v_block18[i1];
         const key1 = ctx['trigger'].id;
-        let b37,b38,b39;
-        b37 = text(\`
- \`);
+        let b20;
         if (!ctx['trigger'].manual&&ctx['trigger'].project_id===ctx['project'].id&&ctx['trigger'].category_id===ctx['options'].active_category_id) {
           let attr9 = \`trigger_\${ctx['trigger'].id}\`;
           let attr10 = \`trigger_\${ctx['trigger'].id}\`;
-          let attr11 = ctx['options'].trigger_display[ctx['trigger'].id];
+          let attr11 = new Boolean(ctx['options'].trigger_display[ctx['trigger'].id]);
           let attr12 = ctx['trigger'].id;
           let hdlr7 = [ctx['updateTriggerDisplay'], ctx];
           let attr13 = \`trigger_\${ctx['trigger'].id}\`;
           let txt6 = ctx['trigger'].name;
-          b38 = block38([attr9, attr10, attr11, attr12, hdlr7, attr13, txt6]);
+          b20 = block20([attr9, attr10, attr11, attr12, hdlr7, attr13, txt6]);
         }
-        b39 = text(\`
- \`);
-        c_block35[i1] = withKey(multi([b37, b38, b39]), key1);
+        c_block18[i1] = withKey(multi([b20]), key1);
       }
       ctx = ctx.__proto__;
-      const b35 = list(c_block35);
-      const b40 = text(\`
- \`);
+      const b18 = list(c_block18);
       let hdlr8 = [ctx['triggerAll'], ctx];
       let hdlr9 = [ctx['triggerNone'], ctx];
       let hdlr10 = [ctx['triggerDefault'], ctx];
       let hdlr11 = [ctx['toggleSettingsMenu'], ctx];
-      const b41 = block41([hdlr8, hdlr9, hdlr10, hdlr11]);
-      const b42 = text(\`
- \`);
-      b33 = multi([b34, b35, b40, b41, b42]);
+      const b21 = block21([hdlr8, hdlr9, hdlr10, hdlr11]);
+      b17 = multi([b18, b21]);
     }
     if (ctx['load_infos']) {
-      b43 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+      b22 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     }
     if (ctx['message']) {
       let txt7 = ctx['message'];
-      b44 = block44([txt7]);
+      b23 = block23([txt7]);
     }
     if (!ctx['project']) {
-      b45 = block45();
+      b24 = block24();
     } else {
-      const b47 = comp1({bundles: ctx['bundles'].sticky,category_custom_views: ctx['category_custom_views'],search: ctx['search']}, key + \`__2\`, node, this, null);
-      const b48 = comp2({bundles: ctx['bundles'].dev,search: ctx['search']}, key + \`__3\`, node, this, null);
-      b46 = block46([], [b47, b48]);
+      const b26 = comp1({bundles: ctx['bundles'].sticky,category_custom_views: ctx['category_custom_views'],search: ctx['search']}, key + \`__2\`, node, this, null);
+      const b27 = comp2({bundles: ctx['bundles'].dev,search: ctx['search']}, key + \`__3\`, node, this, null);
+      b25 = block25([], [b26, b27]);
     }
-    const b3 = block3([attr1, txt1, hdlr2, hdlr3, attr8, hdlr4, hdlr5, ref1, hdlr6, ref2], [b4, b6, b30, b33, b43, b44, b45, b46]);
-    return multi([b2, b3]);
+    return block1([attr1, txt1, hdlr2, hdlr3, attr8, hdlr4, hdlr5, ref1, hdlr6, ref2], [b2, b4, b14, b17, b22, b23, b24, b25]);
   }
 }"
 `;

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

@@ -313,22 +313,13 @@ exports[`simple templates, mostly static template with multiple t tag with multi
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div>
- <block-text-0/>
- 
- <block-text-1/>
- Loading<block-text-2/>
- 
- </div>\`);
+  let block1 = createBlock(\`<div><block-text-0/><block-text-1/>Loading<block-text-2/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let txt1 = ctx['a'];
     let txt2 = ctx['b'];
     let txt3 = ctx['c'];
-    const b3 = block3([txt1, txt2, txt3]);
-    return multi([b2, b3]);
+    return block1([txt1, txt2, txt3]);
   }
 }"
 `;

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

@@ -57,27 +57,17 @@ exports[`properly support svg svg creates new block if it is within html -- 2 1`
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block4 = 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 block5 = createBlock(\`<path block-ns=\\"http://www.w3.org/2000/svg\\"/>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><polygon fill=\\"#000000\\" points=\\"0 0 4 4 8 0\\" transform=\\"translate(5 7)\\"/><block-child-0/></svg>\`);
+  let block3 = createBlock(\`<path block-ns=\\"http://www.w3.org/2000/svg\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b5;
+    let b3;
     if (ctx['hasPath']) {
-      b5 = block5();
+      b3 = block3();
     }
-    const b4 = block4([], [b5]);
-    const b3 = block3([], [b4]);
-    const b6 = text(\`
- \`);
-    return multi([b2, b3, b6]);
+    const b2 = block2([], [b3]);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -87,21 +77,12 @@ exports[`properly support svg svg creates new block if it is within html 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block4 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\">
- <polygon fill=\\"#000000\\" points=\\"0 0 4 4 8 0\\" transform=\\"translate(5 7)\\"/>
- </svg>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><polygon fill=\\"#000000\\" points=\\"0 0 4 4 8 0\\" transform=\\"translate(5 7)\\"/></svg>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b4 = block4();
-    const b3 = block3([], [b4]);
-    const b5 = text(\`
- \`);
-    return multi([b2, b3, b5]);
+    const b2 = block2();
+    return block1([], [b2]);
   }
 }"
 `;

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

@@ -60,30 +60,20 @@ exports[`t-call (template calling) call with several sub nodes on same line 1`]
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block6 = createBlock(\`<span>hey</span>\`);
-  let block8 = createBlock(\`<span>yay</span>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<span>hey</span>\`);
+  let block5 = createBlock(\`<span>yay</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b5 = text(\`
- \`);
-    const b6 = block6();
-    const b7 = text(\` \`);
-    const b8 = block8();
-    const b9 = text(\`
- \`);
-    const b4 = multi([b5, b6, b7, b8, b9]);
-    ctx[zero] = b4;
-    const b10 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    ctx = ctx.__proto__;
-    const b3 = block3([], [b10]);
-    return multi([b2, b3]);
+    const b3 = block3();
+    const b4 = text(\` \`);
+    const b5 = block5();
+    const b2 = multi([b3, b4, b5]);
+    ctx[zero] = b2;
+    const b6 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b6]);
   }
 }"
 `;
@@ -94,16 +84,11 @@ exports[`t-call (template calling) call with several sub nodes on same line 2`]
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b4 = ctx[zero];
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = ctx[zero];
+    return block1([], [b2]);
   }
 }"
 `;
@@ -115,30 +100,20 @@ exports[`t-call (template calling) cascading t-call t-out='0' 1`] = `
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`subTemplate\`);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block6 = createBlock(\`<span>hey</span>\`);
-  let block8 = createBlock(\`<span>yay</span>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<span>hey</span>\`);
+  let block5 = createBlock(\`<span>yay</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b5 = text(\`
- \`);
-    const b6 = block6();
-    const b7 = text(\` \`);
-    const b8 = block8();
-    const b9 = text(\`
- \`);
-    const b4 = multi([b5, b6, b7, b8, b9]);
-    ctx[zero] = b4;
-    const b10 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    ctx = ctx.__proto__;
-    const b3 = block3([], [b10]);
-    return multi([b2, b3]);
+    const b3 = block3();
+    const b4 = text(\` \`);
+    const b5 = block5();
+    const b2 = multi([b3, b4, b5]);
+    ctx[zero] = b2;
+    const b6 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b6]);
   }
 }"
 `;
@@ -150,30 +125,18 @@ exports[`t-call (template calling) cascading t-call t-out='0' 2`] = `
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`subSubTemplate\`);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block6 = createBlock(\`<span>cascade 0</span>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<span>cascade 0</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b5 = text(\`
- \`);
-    const b6 = block6();
-    const b7 = text(\`
- \`);
-    const b8 = ctx[zero];
-    const b9 = text(\`
- \`);
-    const b4 = multi([b5, b6, b7, b8, b9]);
-    ctx[zero] = b4;
-    const b10 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    ctx = ctx.__proto__;
-    const b3 = block3([], [b10]);
-    return multi([b2, b3]);
+    const b3 = block3();
+    const b4 = ctx[zero];
+    const b2 = multi([b3, b4]);
+    ctx[zero] = b2;
+    const b5 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b5]);
   }
 }"
 `;
@@ -185,30 +148,18 @@ exports[`t-call (template calling) cascading t-call t-out='0' 3`] = `
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`finalTemplate\`);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block6 = createBlock(\`<span>cascade 1</span>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<span>cascade 1</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b5 = text(\`
- \`);
-    const b6 = block6();
-    const b7 = text(\`
- \`);
-    const b8 = ctx[zero];
-    const b9 = text(\`
- \`);
-    const b4 = multi([b5, b6, b7, b8, b9]);
-    ctx[zero] = b4;
-    const b10 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    ctx = ctx.__proto__;
-    const b3 = block3([], [b10]);
-    return multi([b2, b3]);
+    const b3 = block3();
+    const b4 = ctx[zero];
+    const b2 = multi([b3, b4]);
+    ctx[zero] = b2;
+    const b5 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b5]);
   }
 }"
 `;
@@ -219,17 +170,11 @@ exports[`t-call (template calling) cascading t-call t-out='0' 4`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
-  let block3 = createBlock(\`<div>
- <span>cascade 2</span>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><span>cascade 2</span><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b4 = ctx[zero];
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = ctx[zero];
+    return block1([], [b2]);
   }
 }"
 `;
@@ -241,25 +186,18 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`subTemplate\`);
   
-  let block5 = createBlock(\`<span>hey</span>\`);
-  let block7 = createBlock(\`<span>yay</span>\`);
+  let block2 = createBlock(\`<span>hey</span>\`);
+  let block4 = createBlock(\`<span>yay</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b4 = text(\`
- \`);
-    const b5 = block5();
-    const b6 = text(\` \`);
-    const b7 = block7();
-    const b8 = text(\`
- \`);
-    const b3 = multi([b4, b5, b6, b7, b8]);
-    ctx[zero] = b3;
-    const b9 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    return multi([b2, b9]);
+    const b2 = block2();
+    const b3 = text(\` \`);
+    const b4 = block4();
+    const b1 = multi([b2, b3, b4]);
+    ctx[zero] = b1;
+    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
   }
 }"
 `;
@@ -271,25 +209,16 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`subSubTemplate\`);
   
-  let block5 = createBlock(\`<span>cascade 0</span>\`);
+  let block2 = createBlock(\`<span>cascade 0</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b4 = text(\`
- \`);
-    const b5 = block5();
-    const b6 = text(\`
- \`);
-    const b7 = ctx[zero];
-    const b8 = text(\`
- \`);
-    const b3 = multi([b4, b5, b6, b7, b8]);
-    ctx[zero] = b3;
-    const b9 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    return multi([b2, b9]);
+    const b2 = block2();
+    const b3 = ctx[zero];
+    const b1 = multi([b2, b3]);
+    ctx[zero] = b1;
+    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
   }
 }"
 `;
@@ -301,25 +230,16 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`finalTemplate\`);
   
-  let block5 = createBlock(\`<span>cascade 1</span>\`);
+  let block2 = createBlock(\`<span>cascade 1</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b4 = text(\`
- \`);
-    const b5 = block5();
-    const b6 = text(\`
- \`);
-    const b7 = ctx[zero];
-    const b8 = text(\`
- \`);
-    const b3 = multi([b4, b5, b6, b7, b8]);
-    ctx[zero] = b3;
-    const b9 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    return multi([b2, b9]);
+    const b2 = block2();
+    const b3 = ctx[zero];
+    const b1 = multi([b2, b3]);
+    ctx[zero] = b1;
+    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
   }
 }"
 `;
@@ -330,16 +250,12 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
-  let block3 = createBlock(\`<span>cascade 2</span>\`);
+  let block2 = createBlock(\`<span>cascade 2</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = block3();
-    const b4 = text(\`
- \`);
-    const b5 = ctx[zero];
-    return multi([b2, b3, b4, b5]);
+    const b2 = block2();
+    const b3 = ctx[zero];
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -424,25 +340,14 @@ exports[`t-call (template calling) recursive template, part 1 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`recursive\`);
   
-  let block3 = createBlock(\`<div>
- <span>hey</span>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><span>hey</span><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4;
+    let b2;
     if (false) {
-      const b5 = text(\`
- \`);
-      const b6 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-      const b7 = text(\`
- \`);
-      b4 = multi([b5, b6, b7]);
+      b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     }
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -451,31 +356,19 @@ exports[`t-call (template calling) recursive template, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, zero } = helpers;
+  let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b5 = text(\`
- \`);
     setContextValue(ctx, \\"node\\", ctx['root']);
-    const b6 = text(\`
- \`);
-    const b4 = multi([b5, b6]);
-    ctx[zero] = b4;
-    const b7 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    ctx = ctx.__proto__;
-    const b3 = block3([], [b7]);
-    return multi([b2, b3]);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -484,50 +377,32 @@ exports[`t-call (template calling) recursive template, part 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, isBoundary, withDefault, setContextValue, zero, withKey } = helpers;
+  let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
   
-  let block3 = createBlock(\`<div>
- <p><block-text-0/></p>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     let txt1 = ctx['node'].val;
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['node'].children||[]);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`subtree\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['node'].children||[]);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`subtree\`] = v_block2[i1];
       ctx[\`subtree_first\`] = i1 === 0;
-      ctx[\`subtree_last\`] = i1 === v_block4.length - 1;
+      ctx[\`subtree_last\`] = i1 === v_block2.length - 1;
       ctx[\`subtree_index\`] = i1;
-      ctx[\`subtree_value\`] = k_block4[i1];
+      ctx[\`subtree_value\`] = k_block2[i1];
       const key1 = ctx['subtree_index'];
-      const b6 = text(\`
- \`);
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
-      const b8 = text(\`
- \`);
       setContextValue(ctx, \\"node\\", ctx['subtree']);
-      const b9 = text(\`
- \`);
-      const b7 = multi([b8, b9]);
-      ctx[zero] = b7;
-      const b10 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
+      c_block2[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
       ctx = ctx.__proto__;
-      const b11 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b10, b11]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([txt1], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([txt1], [b2]);
   }
 }"
 `;
@@ -536,31 +411,19 @@ exports[`t-call (template calling) recursive template, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, zero } = helpers;
+  let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b5 = text(\`
- \`);
     setContextValue(ctx, \\"node\\", ctx['root']);
-    const b6 = text(\`
- \`);
-    const b4 = multi([b5, b6]);
-    ctx[zero] = b4;
-    const b7 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    ctx = ctx.__proto__;
-    const b3 = block3([], [b7]);
-    return multi([b2, b3]);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -569,50 +432,32 @@ exports[`t-call (template calling) recursive template, part 3 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, isBoundary, withDefault, setContextValue, zero, withKey } = helpers;
+  let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
   
-  let block3 = createBlock(\`<div>
- <p><block-text-0/></p>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     let txt1 = ctx['node'].val;
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['node'].children||[]);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`subtree\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['node'].children||[]);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`subtree\`] = v_block2[i1];
       ctx[\`subtree_first\`] = i1 === 0;
-      ctx[\`subtree_last\`] = i1 === v_block4.length - 1;
+      ctx[\`subtree_last\`] = i1 === v_block2.length - 1;
       ctx[\`subtree_index\`] = i1;
-      ctx[\`subtree_value\`] = k_block4[i1];
+      ctx[\`subtree_value\`] = k_block2[i1];
       const key1 = ctx['subtree_index'];
-      const b6 = text(\`
- \`);
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
-      const b8 = text(\`
- \`);
       setContextValue(ctx, \\"node\\", ctx['subtree']);
-      const b9 = text(\`
- \`);
-      const b7 = multi([b8, b9]);
-      ctx[zero] = b7;
-      const b10 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
+      c_block2[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
       ctx = ctx.__proto__;
-      const b11 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b10, b11]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([txt1], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([txt1], [b2]);
   }
 }"
 `;
@@ -621,34 +466,20 @@ exports[`t-call (template calling) recursive template, part 4: with t-set recurs
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, zero } = helpers;
+  let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b5 = text(\`
- \`);
     setContextValue(ctx, \\"recursive_idx\\", 1);
-    const b6 = text(\`
- \`);
     setContextValue(ctx, \\"node\\", ctx['root']);
-    const b7 = text(\`
- \`);
-    const b4 = multi([b5, b6, b7]);
-    ctx[zero] = b4;
-    const b8 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    ctx = ctx.__proto__;
-    const b3 = block3([], [b8]);
-    return multi([b2, b3]);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -657,53 +488,34 @@ exports[`t-call (template calling) recursive template, part 4: with t-set recurs
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, prepareList, zero, withKey } = helpers;
+  let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
   
-  let block3 = createBlock(\`<div>
- 
- <p><block-text-0/> <block-text-1/></p>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><p><block-text-0/> <block-text-1/></p><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"recursive_idx\\", ctx['recursive_idx']+1);
     let txt1 = ctx['node'].val;
     let txt2 = ctx['recursive_idx'];
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['node'].children||[]);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`subtree\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['node'].children||[]);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`subtree\`] = v_block2[i1];
       ctx[\`subtree_first\`] = i1 === 0;
-      ctx[\`subtree_last\`] = i1 === v_block4.length - 1;
+      ctx[\`subtree_last\`] = i1 === v_block2.length - 1;
       ctx[\`subtree_index\`] = i1;
-      ctx[\`subtree_value\`] = k_block4[i1];
+      ctx[\`subtree_value\`] = k_block2[i1];
       const key1 = ctx['subtree_index'];
-      const b6 = text(\`
- \`);
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
-      const b8 = text(\`
- \`);
       setContextValue(ctx, \\"node\\", ctx['subtree']);
-      const b9 = text(\`
- \`);
-      const b7 = multi([b8, b9]);
-      ctx[zero] = b7;
-      const b10 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
+      c_block2[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
       ctx = ctx.__proto__;
-      const b11 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b10, b11]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([txt1, txt2], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([txt1, txt2], [b2]);
   }
 }"
 `;
@@ -712,33 +524,21 @@ exports[`t-call (template calling) scoped parameters 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, zero } = helpers;
+  let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- <block-text-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b5 = text(\`
- \`);
     setContextValue(ctx, \\"foo\\", 42);
-    const b6 = text(\`
- \`);
-    const b4 = multi([b5, b6]);
-    ctx[zero] = b4;
-    const b7 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     ctx = ctx.__proto__;
     let txt1 = ctx['foo'];
-    const b3 = block3([txt1], [b7]);
-    return multi([b2, b3]);
+    return block1([txt1], [b2]);
   }
 }"
 `;
@@ -758,35 +558,22 @@ exports[`t-call (template calling) scoped parameters, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, zero } = helpers;
+  let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block3 = createBlock(\`<div>
- 
- <block-child-0/>
- <block-text-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"foo\\", 11);
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b5 = text(\`
- \`);
     setContextValue(ctx, \\"foo\\", 42);
-    const b6 = text(\`
- \`);
-    const b4 = multi([b5, b6]);
-    ctx[zero] = b4;
-    const b7 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     ctx = ctx.__proto__;
     let txt1 = ctx['foo'];
-    const b3 = block3([txt1], [b7]);
-    return multi([b2, b3]);
+    return block1([txt1], [b2]);
   }
 }"
 `;
@@ -929,31 +716,19 @@ exports[`t-call (template calling) t-call with t-set inside and body text conten
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, zero } = helpers;
+  let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b5 = text(\`
- \`);
     setContextValue(ctx, \\"val\\", \`yip yip\`);
-    const b6 = text(\`
- \`);
-    const b4 = multi([b5, b6]);
-    ctx[zero] = b4;
-    const b7 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    ctx = ctx.__proto__;
-    const b3 = block3([], [b7]);
-    return multi([b2, b3]);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -976,51 +751,32 @@ exports[`t-call (template calling) t-call with t-set inside and outside 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, isBoundary, withDefault, setContextValue, zero, withKey } = helpers;
+  let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['list']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`v\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['list']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`v\`] = v_block2[i1];
       ctx[\`v_first\`] = i1 === 0;
-      ctx[\`v_last\`] = i1 === v_block4.length - 1;
+      ctx[\`v_last\`] = i1 === v_block2.length - 1;
       ctx[\`v_index\`] = i1;
-      ctx[\`v_value\`] = k_block4[i1];
+      ctx[\`v_value\`] = k_block2[i1];
       const key1 = ctx['v_index'];
-      const b6 = text(\`
- \`);
       setContextValue(ctx, \\"val\\", ctx['v'].val);
-      const b7 = text(\`
- \`);
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
-      const b9 = text(\`
- \`);
       setContextValue(ctx, \\"val3\\", ctx['val']*3);
-      const b10 = text(\`
- \`);
-      const b8 = multi([b9, b10]);
-      ctx[zero] = b8;
-      const b11 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
+      c_block2[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
       ctx = ctx.__proto__;
-      const b12 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b11, b12]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -1030,18 +786,11 @@ exports[`t-call (template calling) t-call with t-set inside and outside 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block4 = createBlock(\`<span><block-text-0/></span>\`);
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = text(\`
- \`);
     let txt1 = ctx['val3'];
-    const b4 = block4([txt1]);
-    const b5 = text(\`
- \`);
-    return multi([b2, b3, b4, b5]);
+    return block1([txt1]);
   }
 }"
 `;
@@ -1069,51 +818,32 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 2`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, isBoundary, withDefault, setContextValue, zero, withKey } = helpers;
+  let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['list']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`v\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['list']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`v\`] = v_block2[i1];
       ctx[\`v_first\`] = i1 === 0;
-      ctx[\`v_last\`] = i1 === v_block4.length - 1;
+      ctx[\`v_last\`] = i1 === v_block2.length - 1;
       ctx[\`v_index\`] = i1;
-      ctx[\`v_value\`] = k_block4[i1];
+      ctx[\`v_value\`] = k_block2[i1];
       const key1 = ctx['v_index'];
-      const b6 = text(\`
- \`);
       setContextValue(ctx, \\"val\\", ctx['v'].val);
-      const b7 = text(\`
- \`);
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
-      const b9 = text(\`
- \`);
       setContextValue(ctx, \\"val3\\", ctx['val']*3);
-      const b10 = text(\`
- \`);
-      const b8 = multi([b9, b10]);
-      ctx[zero] = b8;
-      const b11 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
+      c_block2[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
       ctx = ctx.__proto__;
-      const b12 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b11, b12]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -1123,21 +853,13 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 3`] =
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block4 = createBlock(\`<span><block-text-0/></span>\`);
+  let block2 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = text(\`
- \`);
     let txt1 = ctx['val3'];
-    const b4 = block4([txt1]);
-    const b5 = text(\`
- \`);
-    const b6 = text(ctx['w']);
-    const b7 = text(\`
- \`);
-    return multi([b2, b3, b4, b5, b6, b7]);
+    const b2 = block2([txt1]);
+    const b3 = text(ctx['w']);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -1146,39 +868,27 @@ exports[`t-call (template calling) t-call, conditional and t-set in t-call body
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, zero } = helpers;
+  let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`callee1\`);
   const callTemplate_2 = app.getTemplate(\`callee2\`);
   
-  let block3 = createBlock(\`<div>
- 
- <block-child-0/><block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
-    let b4,b8;
+    let b2,b3;
     setContextValue(ctx, \\"v1\\", 'elif');
     if (ctx['v1']==='if') {
-      b4 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+      b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     } else if (ctx['v1']==='elif') {
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
-      const b6 = text(\`
- \`);
       setContextValue(ctx, \\"v\\", 'success');
-      const b7 = text(\`
- \`);
-      const b5 = multi([b6, b7]);
-      ctx[zero] = b5;
-      b8 = callTemplate_2.call(this, ctx, node, key + \`__2\`);
+      b3 = callTemplate_2.call(this, ctx, node, key + \`__2\`);
       ctx = ctx.__proto__;
     }
-    const b3 = block3([], [b4, b8]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -1241,26 +951,17 @@ exports[`t-call (template calling) t-call-context and value in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, zero } = helpers;
+  let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     let ctx1 = ctx['obj'];
     ctx1 = Object.create(ctx1);
     ctx1[isBoundary] = 1;
-    const b4 = text(\`
- \`);
-    setContextValue(ctx, \\"value2\\", ctx['aaron']);
-    const b5 = text(\`
- \`);
-    const b3 = multi([b4, b5]);
-    ctx1[zero] = b3;
-    const b6 = callTemplate_1.call(this, ctx1, node, key + \`__1\`);
-    return multi([b2, b6]);
+    setContextValue(ctx1, \\"value2\\", ctx['aaron']);
+    return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
   }
 }"
 `;

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

@@ -55,10 +55,7 @@ exports[`debugging t-log 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div>
- 
- 
- </div>\`);
+  let block1 = createBlock(\`<div/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);

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

@@ -5,24 +5,15 @@ exports[`t-esc div with falsy values 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div>
- <p><block-text-0/></p>
- <p><block-text-1/></p>
- <p><block-text-2/></p>
- <p><block-text-3/></p>
- <p><block-text-4/></p>
- </div>\`);
+  let block1 = createBlock(\`<div><p><block-text-0/></p><p><block-text-1/></p><p><block-text-2/></p><p><block-text-3/></p><p><block-text-4/></p></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let txt1 = ctx['v1'];
     let txt2 = ctx['v2'];
     let txt3 = ctx['v3'];
     let txt4 = ctx['v4'];
     let txt5 = ctx['v5'];
-    const b3 = block3([txt1, txt2, txt3, txt4, txt5]);
-    return multi([b2, b3]);
+    return block1([txt1, txt2, txt3, txt4, txt5]);
   }
 }"
 `;
@@ -91,18 +82,16 @@ exports[`t-esc falsy values in text nodes 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = text(ctx['v1']);
-    const b4 = text(\`:\`);
-    const b5 = text(ctx['v2']);
-    const b6 = text(\`:\`);
-    const b7 = text(ctx['v3']);
-    const b8 = text(\`:\`);
-    const b9 = text(ctx['v4']);
-    const b10 = text(\`:\`);
-    const b11 = text(ctx['v5']);
-    return multi([b2, b3, b4, b5, b6, b7, b8, b9, b10, b11]);
+    const b2 = text(ctx['v1']);
+    const b3 = text(\`:\`);
+    const b4 = text(ctx['v2']);
+    const b5 = text(\`:\`);
+    const b6 = text(ctx['v3']);
+    const b7 = text(\`:\`);
+    const b8 = text(ctx['v4']);
+    const b9 = text(\`:\`);
+    const b10 = text(ctx['v5']);
+    return multi([b2, b3, b4, b5, b6, b7, b8, b9, b10]);
   }
 }"
 `;

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

@@ -6,24 +6,18 @@ exports[`t-foreach does not pollute the rendering context 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList([1]);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`item\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1]);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`item\`] = v_block2[i1];
       const key1 = ctx['item'];
-      c_block4[i1] = withKey(text(ctx['item']), key1);
+      c_block2[i1] = withKey(text(ctx['item']), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -34,26 +28,20 @@ exports[`t-foreach iterate on items (on a element node) 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block5 = createBlock(\`<span><block-text-0/></span>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList([1,2]);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`item\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1,2]);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`item\`] = v_block2[i1];
       const key1 = ctx['item'];
       let txt1 = ctx['item'];
-      c_block4[i1] = withKey(block5([txt1]), key1);
+      c_block2[i1] = withKey(block3([txt1]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -64,35 +52,27 @@ exports[`t-foreach iterate on items 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList([3,2,1]);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`item\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`item\`] = v_block2[i1];
       ctx[\`item_index\`] = i1;
-      ctx[\`item_value\`] = k_block4[i1];
+      ctx[\`item_value\`] = k_block2[i1];
       const key1 = ctx['item'];
-      const b6 = text(\`
- [\`);
-      const b7 = text(ctx['item_index']);
-      const b8 = text(\`: \`);
-      const b9 = text(ctx['item']);
-      const b10 = text(\` \`);
-      const b11 = text(ctx['item_value']);
-      const b12 = text(\`]
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8, b9, b10, b11, b12]), key1);
+      const b4 = text(\` [\`);
+      const b5 = text(ctx['item_index']);
+      const b6 = text(\`: \`);
+      const b7 = text(ctx['item']);
+      const b8 = text(\` \`);
+      const b9 = text(ctx['item_value']);
+      const b10 = text(\`] \`);
+      c_block2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9, b10]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -103,35 +83,27 @@ exports[`t-foreach iterate, dict param 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['value']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`item\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['value']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`item\`] = v_block2[i1];
       ctx[\`item_index\`] = i1;
-      ctx[\`item_value\`] = k_block4[i1];
+      ctx[\`item_value\`] = k_block2[i1];
       const key1 = ctx['item_index'];
-      const b6 = text(\`
- [\`);
-      const b7 = text(ctx['item_index']);
-      const b8 = text(\`: \`);
-      const b9 = text(ctx['item']);
-      const b10 = text(\` \`);
-      const b11 = text(ctx['item_value']);
-      const b12 = text(\`]
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8, b9, b10, b11, b12]), key1);
+      const b4 = text(\` [\`);
+      const b5 = text(ctx['item_index']);
+      const b6 = text(\`: \`);
+      const b7 = text(ctx['item']);
+      const b8 = text(\` \`);
+      const b9 = text(ctx['item_value']);
+      const b10 = text(\`] \`);
+      c_block2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9, b10]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -142,40 +114,32 @@ exports[`t-foreach iterate, position 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(Array(5));;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`elem\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(5));;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`elem\`] = v_block2[i1];
       ctx[\`elem_first\`] = i1 === 0;
-      ctx[\`elem_last\`] = i1 === v_block4.length - 1;
+      ctx[\`elem_last\`] = i1 === v_block2.length - 1;
       ctx[\`elem_index\`] = i1;
       const key1 = ctx['elem'];
-      let b6,b7,b8,b9,b10,b11;
-      b6 = text(\`
- -\`);
+      let b4,b5,b6,b7,b8,b9;
+      b4 = text(\` -\`);
       if (ctx['elem_first']) {
-        b7 = text(\` first\`);
+        b5 = text(\` first\`);
       }
       if (ctx['elem_last']) {
-        b8 = text(\` last\`);
+        b6 = text(\` last\`);
       }
-      b9 = text(\` (\`);
-      b10 = text(ctx['elem_index']);
-      b11 = text(\`)
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8, b9, b10, b11]), key1);
+      b7 = text(\` (\`);
+      b8 = text(ctx['elem_index']);
+      b9 = text(\`) \`);
+      c_block2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -186,24 +150,18 @@ exports[`t-foreach simple iteration (in a node) 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList([3,2,1]);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`item\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`item\`] = v_block2[i1];
       const key1 = ctx['item'];
-      c_block4[i1] = withKey(text(ctx['item']), key1);
+      c_block2[i1] = withKey(text(ctx['item']), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -233,31 +191,22 @@ exports[`t-foreach simple iteration with two nodes inside 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block6 = createBlock(\`<span>a<block-text-0/></span>\`);
-  let block8 = createBlock(\`<span>b<block-text-0/></span>\`);
+  let block3 = createBlock(\`<span>a<block-text-0/></span>\`);
+  let block4 = createBlock(\`<span>b<block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block3, v_block3, l_block3, c_block3] = prepareList([3,2,1]);;
-    for (let i1 = 0; i1 < l_block3; i1++) {
-      ctx[\`item\`] = v_block3[i1];
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList([3,2,1]);;
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`item\`] = v_block1[i1];
       const key1 = ctx['item'];
-      const b5 = text(\`
- \`);
       let txt1 = ctx['item'];
-      const b6 = block6([txt1]);
-      const b7 = text(\`
- \`);
+      const b3 = block3([txt1]);
       let txt2 = ctx['item'];
-      const b8 = block8([txt2]);
-      const b9 = text(\`
- \`);
-      c_block3[i1] = withKey(multi([b5, b6, b7, b8, b9]), key1);
+      const b4 = block4([txt2]);
+      c_block1[i1] = withKey(multi([b3, b4]), key1);
     }
-    const b3 = list(c_block3);
-    return multi([b2, b3]);
+    return list(c_block1);
   }
 }"
 `;
@@ -266,74 +215,51 @@ exports[`t-foreach t-call with body in t-foreach in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, isBoundary, withDefault, setContextValue, zero, withKey } = helpers;
+  let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- <span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span>
- </div>\`);
-  let block16 = createBlock(\`<span><block-text-0/></span>\`);
+  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 = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['numbers']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`a\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`a\`] = v_block2[i1];
       ctx[\`a_first\`] = i1 === 0;
-      ctx[\`a_last\`] = i1 === v_block4.length - 1;
+      ctx[\`a_last\`] = i1 === v_block2.length - 1;
       ctx[\`a_index\`] = i1;
-      ctx[\`a_value\`] = k_block4[i1];
+      ctx[\`a_value\`] = k_block2[i1];
       const key1 = ctx['a'];
-      const b6 = text(\`
- \`);
       ctx = Object.create(ctx);
-      const [k_block7, v_block7, l_block7, c_block7] = prepareList(ctx['letters']);;
-      for (let i2 = 0; i2 < l_block7; i2++) {
-        ctx[\`b\`] = v_block7[i2];
+      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['letters']);;
+      for (let i2 = 0; i2 < l_block4; i2++) {
+        ctx[\`b\`] = v_block4[i2];
         ctx[\`b_first\`] = i2 === 0;
-        ctx[\`b_last\`] = i2 === v_block7.length - 1;
+        ctx[\`b_last\`] = i2 === v_block4.length - 1;
         ctx[\`b_index\`] = i2;
-        ctx[\`b_value\`] = k_block7[i2];
+        ctx[\`b_value\`] = k_block4[i2];
         const key2 = ctx['b'];
-        const b9 = text(\`
- \`);
         ctx = Object.create(ctx);
         ctx[isBoundary] = 1;
-        const b11 = text(\`
- \`);
         setContextValue(ctx, \\"c\\", 'x'+'_'+ctx['a']+'_'+ctx['b']);
-        const b12 = text(\`
- \`);
-        const b10 = multi([b11, b12]);
-        ctx[zero] = b10;
-        const b13 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`);
+        c_block4[i2] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`), key2);
         ctx = ctx.__proto__;
-        const b14 = text(\`
- \`);
-        c_block7[i2] = withKey(multi([b9, b13, b14]), key2);
       }
       ctx = ctx.__proto__;
-      const b7 = list(c_block7);
-      const b15 = text(\`
- \`);
+      const b4 = list(c_block4);
       let txt1 = ctx['c'];
-      const b16 = block16([txt1]);
-      const b17 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b15, b16, b17]), key1);
+      const b6 = block6([txt1]);
+      c_block2[i1] = withKey(multi([b4, b6]), key1);
     }
     ctx = ctx.__proto__;
-    const b4 = list(c_block4);
+    const b2 = list(c_block2);
     let txt2 = ctx['a'];
     let txt3 = ctx['b'];
     let txt4 = ctx['c'];
-    const b3 = block3([txt2, txt3, txt4], [b4]);
-    return multi([b2, b3]);
+    return block1([txt2, txt3, txt4], [b2]);
   }
 }"
 `;
@@ -344,20 +270,14 @@ exports[`t-foreach t-call with body in t-foreach in t-foreach 2`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = text(\`
- [\`);
-    const b4 = text(ctx['a']);
-    const b5 = text(\`]
- [\`);
-    const b6 = text(ctx['b']);
-    const b7 = text(\`]
- [\`);
-    const b8 = text(ctx['c']);
-    const b9 = text(\`]
- \`);
-    return multi([b2, b3, b4, b5, b6, b7, b8, b9]);
+    const b2 = text(\` [\`);
+    const b3 = text(ctx['a']);
+    const b4 = text(\`] [\`);
+    const b5 = text(ctx['b']);
+    const b6 = text(\`] [\`);
+    const b7 = text(ctx['c']);
+    const b8 = text(\`] \`);
+    return multi([b2, b3, b4, b5, b6, b7, b8]);
   }
 }"
 `;
@@ -369,59 +289,42 @@ exports[`t-foreach t-call without body in t-foreach in t-foreach 1`] = `
   let { prepareList, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- <span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span>
- </div>\`);
-  let block13 = createBlock(\`<span><block-text-0/></span>\`);
+  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 = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['numbers']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`a\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`a\`] = v_block2[i1];
       ctx[\`a_first\`] = i1 === 0;
-      ctx[\`a_last\`] = i1 === v_block4.length - 1;
+      ctx[\`a_last\`] = i1 === v_block2.length - 1;
       ctx[\`a_index\`] = i1;
-      ctx[\`a_value\`] = k_block4[i1];
+      ctx[\`a_value\`] = k_block2[i1];
       const key1 = ctx['a'];
-      const b6 = text(\`
- \`);
       ctx = Object.create(ctx);
-      const [k_block7, v_block7, l_block7, c_block7] = prepareList(ctx['letters']);;
-      for (let i2 = 0; i2 < l_block7; i2++) {
-        ctx[\`b\`] = v_block7[i2];
+      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['letters']);;
+      for (let i2 = 0; i2 < l_block4; i2++) {
+        ctx[\`b\`] = v_block4[i2];
         ctx[\`b_first\`] = i2 === 0;
-        ctx[\`b_last\`] = i2 === v_block7.length - 1;
+        ctx[\`b_last\`] = i2 === v_block4.length - 1;
         ctx[\`b_index\`] = i2;
-        ctx[\`b_value\`] = k_block7[i2];
+        ctx[\`b_value\`] = k_block4[i2];
         const key2 = ctx['b'];
-        const b9 = text(\`
- \`);
-        const b10 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`);
-        const b11 = text(\`
- \`);
-        c_block7[i2] = withKey(multi([b9, b10, b11]), key2);
+        c_block4[i2] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`), key2);
       }
       ctx = ctx.__proto__;
-      const b7 = list(c_block7);
-      const b12 = text(\`
- \`);
+      const b4 = list(c_block4);
       let txt1 = ctx['c'];
-      const b13 = block13([txt1]);
-      const b14 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b12, b13, b14]), key1);
+      const b6 = block6([txt1]);
+      c_block2[i1] = withKey(multi([b4, b6]), key1);
     }
     ctx = ctx.__proto__;
-    const b4 = list(c_block4);
+    const b2 = list(c_block2);
     let txt2 = ctx['a'];
     let txt3 = ctx['b'];
     let txt4 = ctx['c'];
-    const b3 = block3([txt2, txt3, txt4], [b4]);
-    return multi([b2, b3]);
+    return block1([txt2, txt3, txt4], [b2]);
   }
 }"
 `;
@@ -435,23 +338,15 @@ exports[`t-foreach t-call without body in t-foreach in t-foreach 2`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
-    const b3 = text(\`
- \`);
     setContextValue(ctx, \\"c\\", 'x'+'_'+ctx['a']+'_'+ctx['b']);
-    const b4 = text(\`
- [\`);
-    const b5 = text(ctx['a']);
-    const b6 = text(\`]
- [\`);
-    const b7 = text(ctx['b']);
-    const b8 = text(\`]
- [\`);
-    const b9 = text(ctx['c']);
-    const b10 = text(\`]
- \`);
-    return multi([b2, b3, b4, b5, b6, b7, b8, b9, b10]);
+    const b2 = text(\` [\`);
+    const b3 = text(ctx['a']);
+    const b4 = text(\`] [\`);
+    const b5 = text(ctx['b']);
+    const b6 = text(\`] [\`);
+    const b7 = text(ctx['c']);
+    const b8 = text(\`] \`);
+    return multi([b2, b3, b4, b5, b6, b7, b8]);
   }
 }"
 `;
@@ -462,43 +357,30 @@ exports[`t-foreach t-foreach in t-foreach 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['numbers']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`number\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`number\`] = v_block2[i1];
       const key1 = ctx['number'];
-      const b6 = text(\`
- \`);
       ctx = Object.create(ctx);
-      const [k_block7, v_block7, l_block7, c_block7] = prepareList(ctx['letters']);;
-      for (let i2 = 0; i2 < l_block7; i2++) {
-        ctx[\`letter\`] = v_block7[i2];
+      const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['letters']);;
+      for (let i2 = 0; i2 < l_block3; i2++) {
+        ctx[\`letter\`] = v_block3[i2];
         const key2 = ctx['letter'];
-        const b9 = text(\`
- [\`);
-        const b10 = text(ctx['number']);
-        const b11 = text(ctx['letter']);
-        const b12 = text(\`]
- \`);
-        c_block7[i2] = withKey(multi([b9, b10, b11, b12]), key2);
+        const b5 = text(\` [\`);
+        const b6 = text(ctx['number']);
+        const b7 = text(ctx['letter']);
+        const b8 = text(\`] \`);
+        c_block3[i2] = withKey(multi([b5, b6, b7, b8]), key2);
       }
       ctx = ctx.__proto__;
-      const b7 = list(c_block7);
-      const b13 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b13]), key1);
+      c_block2[i1] = withKey(list(c_block3), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -509,29 +391,22 @@ exports[`t-foreach t-foreach with t-if inside (no external node) 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block6 = createBlock(\`<span><block-text-0/></span>\`);
+  let block3 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['elems']);;
-    for (let i1 = 0; i1 < l_block3; i1++) {
-      ctx[\`elem\`] = v_block3[i1];
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['elems']);;
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`elem\`] = v_block1[i1];
       const key1 = ctx['elem'].id;
-      let b5,b6,b7;
-      b5 = text(\`
- \`);
+      let b3;
       if (ctx['elem'].id<3) {
         let txt1 = ctx['elem'].text;
-        b6 = block6([txt1]);
+        b3 = block3([txt1]);
       }
-      b7 = text(\`
- \`);
-      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
+      c_block1[i1] = withKey(multi([b3]), key1);
     }
-    const b3 = list(c_block3);
-    return multi([b2, b3]);
+    return list(c_block1);
   }
 }"
 `;
@@ -542,34 +417,24 @@ exports[`t-foreach t-foreach with t-if inside 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block7 = createBlock(\`<span><block-text-0/></span>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block4 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['elems']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`elem\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['elems']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`elem\`] = v_block2[i1];
       const key1 = ctx['elem'].id;
-      let b6,b7,b8;
-      b6 = text(\`
- \`);
+      let b4;
       if (ctx['elem'].id<3) {
         let txt1 = ctx['elem'].text;
-        b7 = block7([txt1]);
+        b4 = block4([txt1]);
       }
-      b8 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
+      c_block2[i1] = withKey(multi([b4]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -580,30 +445,19 @@ exports[`t-foreach t-key on t-foreach 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block7 = createBlock(\`<span/>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<span/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['things']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`thing\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['things']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`thing\`] = v_block2[i1];
       const key1 = ctx['thing'];
-      const b6 = text(\`
- \`);
-      const b7 = block7();
-      const b8 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
+      c_block2[i1] = withKey(block3(), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -639,42 +493,33 @@ exports[`t-foreach with t-memo 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block5 = createBlock(\`<p>
- <block-text-0/>
- <block-text-1/>
- </p>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<p><block-text-0/><block-text-1/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let cache = ctx.cache || {};
     let nextCache = ctx.cache = {};
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['items']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`item\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`item\`] = v_block2[i1];
       const key1 = ctx['item'].id;
       const memo1 = [ctx['item'].x];
       const vnode1 = cache[key1];;
       if (vnode1) {
         if (shallowEqual(vnode1.memo, memo1)) {
-          c_block4[i1] = vnode1;
+          c_block2[i1] = vnode1;
           nextCache[key1] = vnode1;
           continue;
         }
       }
       let txt1 = ctx['item'].x;
       let txt2 = ctx['item'].y;
-      c_block4[i1] = withKey(block5([txt1, txt2]), key1);
-      nextCache[key1] = Object.assign(c_block4[i1], {memo: memo1});
+      c_block2[i1] = withKey(block3([txt1, txt2]), key1);
+      nextCache[key1] = Object.assign(c_block2[i1], {memo: memo1});
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;

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

@@ -44,19 +44,17 @@ 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,b6;
-    b2 = text(\`
- \`);
+    let b2,b3,b4,b5;
     if (ctx['color']=='black') {
-      b3 = text(\`black pearl\`);
+      b2 = text(\`black pearl\`);
     } else if (ctx['color']=='yellow') {
-      b4 = text(\`yellow submarine\`);
+      b3 = text(\`yellow submarine\`);
     } else if (ctx['color']=='red') {
-      b5 = text(\`red is dead\`);
+      b4 = text(\`red is dead\`);
     } else {
-      b6 = text(\`beer\`);
+      b5 = text(\`beer\`);
     }
-    return multi([b2, b3, b4, b5, b6]);
+    return multi([b2, b3, b4, b5]);
   }
 }"
 `;
@@ -66,25 +64,20 @@ exports[`t-if boolean value condition elif 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/><block-child-1/><block-child-2/><block-child-3/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-2/><block-child-3/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5,b6,b7;
+    let b2,b3,b4,b5;
     if (ctx['color']=='black') {
-      b4 = text(\`black pearl\`);
+      b2 = text(\`black pearl\`);
     } else if (ctx['color']=='yellow') {
-      b5 = text(\`yellow submarine\`);
+      b3 = text(\`yellow submarine\`);
     } else if (ctx['color']=='red') {
-      b6 = text(\`red is dead\`);
+      b4 = text(\`red is dead\`);
     } else {
-      b7 = text(\`beer\`);
+      b5 = text(\`beer\`);
     }
-    const b3 = block3([], [b4, b5, b6, b7]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3, b4, b5]);
   }
 }"
 `;
@@ -94,23 +87,16 @@ exports[`t-if boolean value condition else 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div>
- <span>begin</span>
- <block-child-0/><block-child-1/>
- <span>end</span>
- </div>\`);
+  let block1 = createBlock(\`<div><span>begin</span><block-child-0/><block-child-1/><span>end</span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5;
+    let b2,b3;
     if (ctx['condition']) {
-      b4 = text(\`ok\`);
+      b2 = text(\`ok\`);
     } else {
-      b5 = text(\`ok-else\`);
+      b3 = text(\`ok-else\`);
     }
-    const b3 = block3([], [b4, b5]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -120,19 +106,16 @@ exports[`t-if boolean value condition false else 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div><span>begin</span><block-child-0/><block-child-1/><span>end</span></div>\`);
+  let block1 = createBlock(\`<div><span>begin</span><block-child-0/><block-child-1/><span>end</span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5;
+    let b2,b3;
     if (ctx['condition']) {
-      b4 = text(\`fail\`);
+      b2 = text(\`fail\`);
     } else {
-      b5 = text(\`fail-else\`);
+      b3 = text(\`fail-else\`);
     }
-    const b3 = block3([], [b4, b5]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -159,47 +142,35 @@ exports[`t-if can use some boolean operators in expressions 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = 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>\`);
+  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 = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5,b6,b7,b8,b9,b10,b11;
+    let b2,b3,b4,b5,b6,b7,b8,b9;
     if (ctx['cond1']&&ctx['cond2']) {
-      b4 = text(\`and\`);
+      b2 = text(\`and\`);
     }
     if (ctx['cond1']&&ctx['cond3']) {
-      b5 = text(\`nope\`);
+      b3 = text(\`nope\`);
     }
     if (ctx['cond1']||ctx['cond3']) {
-      b6 = text(\`or\`);
+      b4 = text(\`or\`);
     }
     if (ctx['cond3']||ctx['cond4']) {
-      b7 = text(\`nope\`);
+      b5 = text(\`nope\`);
     }
     if (ctx['m']>3) {
-      b8 = text(\`mgt\`);
+      b6 = text(\`mgt\`);
     }
     if (ctx['n']>3) {
-      b9 = text(\`ngt\`);
+      b7 = text(\`ngt\`);
     }
     if (ctx['m']<3) {
-      b10 = text(\`mlt\`);
+      b8 = text(\`mlt\`);
     }
     if (ctx['n']<3) {
-      b11 = text(\`nlt\`);
+      b9 = text(\`nlt\`);
     }
-    const b3 = block3([], [b4, b5, b6, b7, b8, b9, b10, b11]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3, b4, b5, b6, b7, b8, b9]);
   }
 }"
 `;
@@ -436,23 +407,17 @@ exports[`t-if t-set, then t-if 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block3 = createBlock(\`<div>
- 
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
-    let b4;
+    let b2;
     setContextValue(ctx, \\"title\\", 'test');
     if (ctx['title']) {
-      b4 = text(ctx['title']);
+      b2 = text(ctx['title']);
     }
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -463,26 +428,19 @@ exports[`t-if t-set, then t-if, part 2 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block3 = createBlock(\`<div>
- 
- 
- <block-child-0/>
- </div>\`);
-  let block4 = createBlock(\`<span>COUCOU</span>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<span>COUCOU</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
-    let b4;
+    let b2;
     setContextValue(ctx, \\"y\\", true);
     setContextValue(ctx, \\"x\\", ctx['y']);
     if (ctx['x']) {
-      b4 = block4();
+      b2 = block2();
     }
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -493,29 +451,22 @@ exports[`t-if t-set, then t-if, part 3 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block3 = createBlock(\`<div>
- 
- 
- <block-child-0/><block-child-1/>
- </div>\`);
-  let block4 = createBlock(\`<span>AAA</span>\`);
-  let block5 = createBlock(\`<span>BBB</span>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block2 = createBlock(\`<span>AAA</span>\`);
+  let block3 = createBlock(\`<span>BBB</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
-    let b4,b5;
+    let b2,b3;
     setContextValue(ctx, \\"y\\", false);
     setContextValue(ctx, \\"x\\", ctx['y']);
     if (ctx['x']) {
-      b4 = block4();
+      b2 = block2();
     } else if (!ctx['x']) {
-      b5 = block5();
+      b3 = block3();
     }
-    const b3 = block3([], [b4, b5]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3]);
   }
 }"
 `;

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

@@ -51,9 +51,7 @@ exports[`t-key t-key directive in a list 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<ul>
- <block-child-0/>
- </ul>\`);
+  let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
   let block3 = createBlock(\`<li><block-text-0/></li>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -65,7 +63,6 @@ exports[`t-key t-key directive in a list 1`] = `
       let txt1 = ctx['beer'].name;
       c_block2[i1] = withKey(block3([txt1]), key1);
     }
-    ctx = ctx.__proto__;
     const b2 = list(c_block2);
     return block1([], [b2]);
   }
@@ -77,26 +74,18 @@ exports[`t-key t-key on sub dom node pushes a child block in its parent 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- <block-child-1/>
- </div>\`);
-  let block4 = createBlock(\`<span/>\`);
-  let block5 = createBlock(\`<div><h1/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block2 = createBlock(\`<span/>\`);
+  let block3 = createBlock(\`<div><h1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5;
+    let b2,b3;
     if (ctx['hasSpan']) {
-      b4 = block4();
+      b2 = block2();
     }
     const tKey_1 = ctx['key'];
-    b5 = toggler(tKey_1, block5());
-    const b3 = block3([], [b4, b5]);
-    const b6 = text(\`
- \`);
-    return multi([b2, b3, b6]);
+    b3 = toggler(tKey_1, block3());
+    return block1([], [b2, b3]);
   }
 }"
 `;

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

@@ -34,27 +34,16 @@ exports[`t-out multiple calls to t-out 1`] = `
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block6 = createBlock(\`<span>coucou</span>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<span>coucou</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b5 = text(\`
- \`);
-    const b6 = block6();
-    const b7 = text(\`
- \`);
-    const b4 = multi([b5, b6, b7]);
-    ctx[zero] = b4;
-    const b8 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    ctx = ctx.__proto__;
-    const b3 = block3([], [b8]);
-    return multi([b2, b3]);
+    const b2 = block2();
+    ctx[zero] = b2;
+    const b3 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b3]);
   }
 }"
 `;
@@ -65,19 +54,12 @@ exports[`t-out multiple calls to t-out 2`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- <div>Greeter</div>
- <block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><div>Greeter</div><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b4 = ctx[zero];
-    const b5 = ctx[zero];
-    const b3 = block3([], [b4, b5]);
-    return multi([b2, b3]);
+    const b2 = ctx[zero];
+    const b3 = ctx[zero];
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -315,13 +297,10 @@ exports[`t-out t-out switch markup on bdom 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
   
-  let block1 = createBlock(\`<div>
- 
- <block-child-0/><block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   let block2 = createBlock(\`<ol>set</ol>\`);
+  let block3 = createBlock(\`<span><block-child-0/></span>\`);
   let block5 = createBlock(\`<span><block-child-0/></span>\`);
-  let block10 = createBlock(\`<span><block-child-0/></span>\`);
   
   function value1(ctx, node, key = \\"\\") {
     return block2();
@@ -330,26 +309,16 @@ 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,b8;
+    let b3,b5;
     ctx[\`bdom\`] = new LazyValue(value1, ctx, this, node);
     if (ctx['hasBdom']) {
-      const b4 = text(\`
- \`);
-      const b6 = safeOutput(ctx['bdom']);
-      const b5 = block5([], [b6]);
-      const b7 = text(\`
- \`);
-      b3 = multi([b4, b5, b7]);
+      const b4 = safeOutput(ctx['bdom']);
+      b3 = block3([], [b4]);
     } else {
-      const b9 = text(\`
- \`);
-      const b11 = safeOutput(ctx['var']);
-      const b10 = block10([], [b11]);
-      const b12 = text(\`
- \`);
-      b8 = multi([b9, b10, b12]);
+      const b6 = safeOutput(ctx['var']);
+      b5 = block5([], [b6]);
     }
-    return block1([], [b3, b8]);
+    return block1([], [b3, b5]);
   }
 }"
 `;

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

@@ -82,27 +82,17 @@ exports[`t-ref ref in a t-if 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block6 = createBlock(\`<span block-ref=\\"0\\"/>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`name\`] = el;
-    const b2 = text(\`
- \`);
-    let b4;
+    let b2;
     if (ctx['condition']) {
-      const b5 = text(\`
- \`);
-      const b6 = block6([ref1]);
-      const b7 = text(\`
- \`);
-      b4 = multi([b5, b6, b7]);
+      b2 = block2([ref1]);
     }
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -113,10 +103,8 @@ exports[`t-ref refs in a loop 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block5 = createBlock(\`<div block-ref=\\"0\\"><block-text-1/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div block-ref=\\"0\\"><block-text-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
@@ -125,18 +113,12 @@ exports[`t-ref refs in a loop 1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`item\`] = v_block2[i1];
       const key1 = ctx['item'];
-      const b4 = text(\`
- \`);
       const tKey_1 = ctx['item'];
       const v1 = ctx['item'];
       let ref1 = (el) => refs[(v1)] = el;
       let txt1 = ctx['item'];
-      const b5 = toggler(tKey_1, block5([ref1, txt1]));
-      const b6 = text(\`
- \`);
-      c_block2[i1] = withKey(multi([b4, b5, b6]), key1);
+      c_block2[i1] = withKey(block3([ref1, txt1]), tKey_1 + key1);
     }
-    ctx = ctx.__proto__;
     const b2 = list(c_block2);
     return block1([], [b2]);
   }
@@ -148,29 +130,18 @@ exports[`t-ref two refs, one in a t-if 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- <p block-ref=\\"0\\"/>
- </div>\`);
-  let block6 = createBlock(\`<span block-ref=\\"0\\"/>\`);
+  let block1 = createBlock(\`<div><block-child-0/><p block-ref=\\"0\\"/></div>\`);
+  let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`name\`] = el;
     const ref2 = (el) => refs[\`p\`] = el;
-    const b2 = text(\`
- \`);
-    let b4;
+    let b2;
     if (ctx['condition']) {
-      const b5 = text(\`
- \`);
-      const b6 = block6([ref1]);
-      const b7 = text(\`
- \`);
-      b4 = multi([b5, b6, b7]);
+      b2 = block2([ref1]);
     }
-    const b3 = block3([ref2], [b4]);
-    return multi([b2, b3]);
+    return block1([ref2], [b2]);
   }
 }"
 `;

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

@@ -94,33 +94,20 @@ exports[`t-set set from body literal (with t-if/t-else 1`] = `
   let { isBoundary, withDefault, LazyValue } = helpers;
   
   function value1(ctx, node, key = \\"\\") {
-    let b5,b6,b7,b8;
-    b5 = text(\`
- \`);
+    let b2,b3;
     if (ctx['condition']) {
-      b6 = text(\`true\`);
+      b2 = text(\`true\`);
     } else {
-      b7 = text(\`false\`);
+      b3 = text(\`false\`);
     }
-    b8 = text(\`
- \`);
-    return multi([b5, b6, b7, b8]);
+    return multi([b2, b3]);
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
-    const b3 = text(\`
- \`);
     ctx[\`value\`] = new LazyValue(value1, ctx, this, node);
-    const b9 = text(\`
- \`);
-    const b10 = text(ctx['value']);
-    const b11 = text(\`
- \`);
-    return multi([b2, b3, b9, b10, b11]);
+    return text(ctx['value']);
   }
 }"
 `;
@@ -186,23 +173,17 @@ exports[`t-set t-set and t-if 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block3 = createBlock(\`<div>
- 
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
-    let b4;
+    let b2;
     setContextValue(ctx, \\"v\\", ctx['value']);
     if (ctx['v']==='ok') {
-      b4 = text(\`grimbergen\`);
+      b2 = text(\`grimbergen\`);
     }
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -213,35 +194,22 @@ exports[`t-set t-set body is evaluated immediately 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, LazyValue, safeOutput } = helpers;
   
-  let block3 = createBlock(\`<div>
- 
- 
- 
- <block-child-0/>
- </div>\`);
-  let block6 = createBlock(\`<span><block-text-0/></span>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<span><block-text-0/></span>\`);
   
   function value1(ctx, node, key = \\"\\") {
-    const b5 = text(\`
- \`);
     let txt1 = ctx['v1'];
-    const b6 = block6([txt1]);
-    const b7 = text(\`
- \`);
-    return multi([b5, b6, b7]);
+    return block2([txt1]);
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"v1\\", 'before');
     ctx[\`v2\`] = new LazyValue(value1, ctx, this, node);
     setContextValue(ctx, \\"v1\\", 'after');
-    const b8 = safeOutput(ctx['v2']);
-    const b3 = block3([], [b8]);
-    return multi([b2, b3]);
+    const b3 = safeOutput(ctx['v2']);
+    return block1([], [b3]);
   }
 }"
 `;
@@ -253,26 +221,16 @@ exports[`t-set t-set can't alter from within callee 1`] = `
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block3 = createBlock(\`<div>
- 
- <p><block-text-0/></p>
- <block-child-0/>
- <p><block-text-1/></p>
- </div>\`);
+  let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"iter\\", 'source');
     let txt1 = ctx['iter'];
-    const b4 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     let txt2 = ctx['iter'];
-    const b3 = block3([txt1, txt2], [b4]);
-    const b5 = text(\`
- \`);
-    return multi([b2, b3, b5]);
+    return block1([txt1, txt2], [b2]);
   }
 }"
 `;
@@ -300,39 +258,23 @@ exports[`t-set t-set can't alter in t-call body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, zero } = helpers;
+  let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block3 = createBlock(\`<div>
- 
- <p><block-text-0/></p>
- <block-child-0/>
- <p><block-text-1/></p>
- </div>\`);
+  let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"iter\\", 'source');
     let txt1 = ctx['iter'];
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b5 = text(\`
- \`);
     setContextValue(ctx, \\"iter\\", 'inCall');
-    const b6 = text(\`
- \`);
-    const b4 = multi([b5, b6]);
-    ctx[zero] = b4;
-    const b7 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     ctx = ctx.__proto__;
     let txt2 = ctx['iter'];
-    const b3 = block3([txt1, txt2], [b7]);
-    const b8 = text(\`
- \`);
-    return multi([b2, b3, b8]);
+    return block1([txt1, txt2], [b2]);
   }
 }"
 `;
@@ -380,22 +322,15 @@ exports[`t-set t-set evaluates an expression only once 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block3 = createBlock(\`<div>
- 
- <block-text-0/>
- <block-text-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"v\\", ctx['value']+' artois');
     let txt1 = ctx['v'];
     let txt2 = ctx['v'];
-    const b3 = block3([txt1, txt2]);
-    return multi([b2, b3]);
+    return block1([txt1, txt2]);
   }
 }"
 `;
@@ -406,42 +341,26 @@ exports[`t-set t-set outside modified in t-foreach 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<div>
- 
- <block-child-0/>
- <p>EndLoop: <block-text-0/></p>
- </div>\`);
-  let block7 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
+  let block1 = createBlock(\`<div><block-child-0/><p>EndLoop: <block-text-0/></p></div>\`);
+  let block3 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"iter\\", 0);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(['a','b']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`val\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`val\`] = v_block2[i1];
       const key1 = ctx['val'];
-      const b6 = text(\`
- \`);
       let txt1 = ctx['iter'];
-      const b7 = block7([txt1]);
-      const b8 = text(\`
- \`);
+      c_block2[i1] = withKey(block3([txt1]), key1);
       setContextValue(ctx, \\"iter\\", ctx['iter']+1);
-      const b9 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8, b9]), key1);
     }
     ctx = ctx.__proto__;
-    const b4 = list(c_block4);
+    const b2 = list(c_block2);
     let txt2 = ctx['iter'];
-    const b3 = block3([txt2], [b4]);
-    const b10 = text(\`
- \`);
-    return multi([b2, b3, b10]);
+    return block1([txt2], [b2]);
   }
 }"
 `;
@@ -452,42 +371,26 @@ exports[`t-set t-set outside modified in t-foreach increment-after operator 1`]
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<div>
- 
- <block-child-0/>
- <p>EndLoop: <block-text-0/></p>
- </div>\`);
-  let block7 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
+  let block1 = createBlock(\`<div><block-child-0/><p>EndLoop: <block-text-0/></p></div>\`);
+  let block3 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"iter\\", 0);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(['a','b']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`val\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`val\`] = v_block2[i1];
       const key1 = ctx['val'];
-      const b6 = text(\`
- \`);
       let txt1 = ctx['iter'];
-      const b7 = block7([txt1]);
-      const b8 = text(\`
- \`);
+      c_block2[i1] = withKey(block3([txt1]), key1);
       setContextValue(ctx, \\"iter\\", ctx['iter']++);
-      const b9 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8, b9]), key1);
     }
     ctx = ctx.__proto__;
-    const b4 = list(c_block4);
+    const b2 = list(c_block2);
     let txt2 = ctx['iter'];
-    const b3 = block3([txt2], [b4]);
-    const b10 = text(\`
- \`);
-    return multi([b2, b3, b10]);
+    return block1([txt2], [b2]);
   }
 }"
 `;
@@ -498,42 +401,26 @@ exports[`t-set t-set outside modified in t-foreach increment-before operator 1`]
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<div>
- 
- <block-child-0/>
- <p>EndLoop: <block-text-0/></p>
- </div>\`);
-  let block7 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
+  let block1 = createBlock(\`<div><block-child-0/><p>EndLoop: <block-text-0/></p></div>\`);
+  let block3 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"iter\\", 0);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(['a','b']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`val\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`val\`] = v_block2[i1];
       const key1 = ctx['val'];
-      const b6 = text(\`
- \`);
       let txt1 = ctx['iter'];
-      const b7 = block7([txt1]);
-      const b8 = text(\`
- \`);
+      c_block2[i1] = withKey(block3([txt1]), key1);
       setContextValue(ctx, \\"iter\\", ++ctx['iter']);
-      const b9 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8, b9]), key1);
     }
     ctx = ctx.__proto__;
-    const b4 = list(c_block4);
+    const b2 = list(c_block2);
     let txt2 = ctx['iter'];
-    const b3 = block3([txt2], [b4]);
-    const b10 = text(\`
- \`);
-    return multi([b2, b3, b10]);
+    return block1([txt2], [b2]);
   }
 }"
 `;
@@ -544,35 +431,25 @@ exports[`t-set t-set should reuse variable if possible 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<div>
- 
- <block-child-0/>
- </div>\`);
-  let block5 = createBlock(\`<div>
- <span>v<block-text-0/></span>
- 
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div><span>v<block-text-0/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"v\\", 1);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['list']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`elem\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['list']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`elem\`] = v_block2[i1];
       ctx[\`elem_index\`] = i1;
       const key1 = ctx['elem_index'];
       let txt1 = ctx['v'];
       setContextValue(ctx, \\"v\\", ctx['elem']);
-      c_block4[i1] = withKey(block5([txt1]), key1);
+      c_block2[i1] = withKey(block3([txt1]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -583,26 +460,20 @@ exports[`t-set t-set with content and sub t-esc 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
   
-  let block3 = createBlock(\`<div>
- 
- <block-text-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   function value1(ctx, node, key = \\"\\") {
-    const b5 = text(ctx['beep']);
-    const b6 = text(\` boop\`);
-    return multi([b5, b6]);
+    const b3 = text(ctx['beep']);
+    const b4 = text(\` boop\`);
+    return multi([b3, b4]);
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     ctx[\`setvar\`] = new LazyValue(value1, ctx, this, node);
     let txt1 = ctx['setvar'];
-    const b3 = block3([txt1]);
-    return multi([b2, b3]);
+    return block1([txt1]);
   }
 }"
 `;
@@ -613,39 +484,24 @@ exports[`t-set t-set with t-value (falsy) and body 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, LazyValue, safeOutput } = helpers;
   
-  let block3 = createBlock(\`<div>
- 
- 
- 
- 
- 
- <block-child-0/>
- </div>\`);
-  let block6 = createBlock(\`<span><block-text-0/></span>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<span><block-text-0/></span>\`);
   
   function value1(ctx, node, key = \\"\\") {
-    const b5 = text(\`
- \`);
     let txt1 = ctx['v1'];
-    const b6 = block6([txt1]);
-    const b7 = text(\`
- \`);
-    return multi([b5, b6, b7]);
+    return block2([txt1]);
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"v3\\", false);
     setContextValue(ctx, \\"v1\\", 'before');
     ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node));
     setContextValue(ctx, \\"v1\\", 'after');
     setContextValue(ctx, \\"v3\\", true);
-    const b8 = safeOutput(ctx['v2']);
-    const b3 = block3([], [b8]);
-    return multi([b2, b3]);
+    const b3 = safeOutput(ctx['v2']);
+    return block1([], [b3]);
   }
 }"
 `;
@@ -656,39 +512,24 @@ exports[`t-set t-set with t-value (truthy) and body 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, LazyValue, safeOutput } = helpers;
   
-  let block3 = createBlock(\`<div>
- 
- 
- 
- 
- 
- <block-child-0/>
- </div>\`);
-  let block6 = createBlock(\`<span><block-text-0/></span>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<span><block-text-0/></span>\`);
   
   function value1(ctx, node, key = \\"\\") {
-    const b5 = text(\`
- \`);
     let txt1 = ctx['v1'];
-    const b6 = block6([txt1]);
-    const b7 = text(\`
- \`);
-    return multi([b5, b6, b7]);
+    return block2([txt1]);
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"v3\\", 'Truthy');
     setContextValue(ctx, \\"v1\\", 'before');
     ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node));
     setContextValue(ctx, \\"v1\\", 'after');
     setContextValue(ctx, \\"v3\\", false);
-    const b8 = safeOutput(ctx['v2']);
-    const b3 = block3([], [b8]);
-    return multi([b2, b3]);
+    const b3 = safeOutput(ctx['v2']);
+    return block1([], [b3]);
   }
 }"
 `;
@@ -699,30 +540,19 @@ exports[`t-set t-set, multiple t-ifs, and a specific configuration 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block3 = createBlock(\`<p>
- <div>
- 
- <span>First div</span>
- </div>
- <div>
- <block-child-0/>
- </div>
- </p>\`);
+  let block1 = createBlock(\`<p><div><span>First div</span></div><div><block-child-0/></div></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
-    let b4;
+    let b2;
     if (ctx['flag']) {
       setContextValue(ctx, \\"bouh\\", 2);
     }
     if (!ctx['flag']) {
-      b4 = text(\`Second\`);
+      b2 = text(\`Second\`);
     }
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -733,24 +563,18 @@ exports[`t-set t-set, t-if, and mix of expression/body lookup, 1 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block3 = createBlock(\`<div>
- 
- <block-text-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     if (ctx['flag']) {
       setContextValue(ctx, \\"ourvar\\", \`1\`);
     } else {
       setContextValue(ctx, \\"ourvar\\", 0);
     }
     let txt1 = ctx['ourvar'];
-    const b3 = block3([txt1]);
-    return multi([b2, b3]);
+    return block1([txt1]);
   }
 }"
 `;
@@ -761,24 +585,18 @@ exports[`t-set t-set, t-if, and mix of expression/body lookup, 2 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block3 = createBlock(\`<div>
- 
- <block-text-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     if (ctx['flag']) {
       setContextValue(ctx, \\"ourvar\\", 1);
     } else {
       setContextValue(ctx, \\"ourvar\\", \`0\`);
     }
     let txt1 = ctx['ourvar'];
-    const b3 = block3([txt1]);
-    return multi([b2, b3]);
+    return block1([txt1]);
   }
 }"
 `;
@@ -792,18 +610,14 @@ exports[`t-set t-set, t-if, and mix of expression/body lookup, 3 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    let b2,b3,b4;
-    b2 = text(\`
- \`);
+    let b2;
     if (ctx['flag']) {
       setContextValue(ctx, \\"ourvar\\", 1);
     } else {
       setContextValue(ctx, \\"ourvar\\", \`0\`);
     }
-    b3 = text(\`
- \`);
-    b4 = text(ctx['ourvar']);
-    return multi([b2, b3, b4]);
+    b2 = text(ctx['ourvar']);
+    return multi([b2]);
   }
 }"
 `;

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

@@ -75,18 +75,11 @@ exports[`qweb t-tag with multiple child nodes 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = tag => createBlock(\`<\${tag || 't'}>
- pear
- <span>apple</span>
- strawberry
- </\${tag || 't'}>\`);
+  let block1 = tag => createBlock(\`<\${tag || 't'}> pear <span>apple</span> strawberry </\${tag || 't'}>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     const tag1 = ctx['tag'];
-    const b3 = toggler(tag1, block3(tag1)());
-    return multi([b2, b3]);
+    return toggler(tag1, block1(tag1)());
   }
 }"
 `;

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

@@ -5,15 +5,10 @@ exports[`translation support can set and remove translatable attributes 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div tomato=\\"word\\" potato=\\"mot\\" title=\\"mot\\" label=\\"word\\">text</div>\`);
+  let block1 = createBlock(\`<div tomato=\\"word\\" potato=\\"mot\\" title=\\"mot\\" label=\\"word\\">text</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = block3();
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1();
   }
 }"
 `;
@@ -36,18 +31,10 @@ exports[`translation support does not translate node content if disabled 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div>
- <span>mot</span>
- <span>word</span>
- </div>\`);
+  let block1 = createBlock(\`<div><span>mot</span><span>word</span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = block3();
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1();
   }
 }"
 `;
@@ -57,21 +44,10 @@ exports[`translation support some attributes are translated 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = 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>\`);
+  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 = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = block3();
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1();
   }
 }"
 `;
@@ -81,15 +57,10 @@ exports[`translation support translation is done on the trimmed text, with extra
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div> mot </div>\`);
+  let block1 = createBlock(\`<div> mot </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = block3();
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1();
   }
 }"
 `;

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

@@ -61,8 +61,7 @@ exports[`white space handling pre inside a div with a new line 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><pre>SomeText</pre>
-</div>\`);
+  let block1 = createBlock(\`<div><pre>SomeText</pre></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     return block1();
@@ -88,9 +87,7 @@ exports[`white space handling whitespace only text nodes with newlines are remov
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div>
- <span>abc</span>
- </div>\`);
+  let block1 = createBlock(\`<div><span>abc</span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     return block1();

tests/compiler/attributes.test.ts

@@ -329,6 +329,35 @@ describe("attributes", () => {
     expect(fixture.innerHTML).toBe('<div value=""></div>');
   });
 
+  test("updating property with falsy value", async () => {
+    // render input with initial value
+    const template = `<input t-att-value="v"></input>`;
+    const bnode1 = renderToBdom(template, { v: false });
+    const fixture = makeTestFixture();
+    mount(bnode1, fixture);
+
+    const input = fixture.querySelector("input")!;
+    expect(input.value).toBe("");
+
+    patch(bnode1, renderToBdom(template, { v: "owl" }));
+    expect(input.value).toBe("owl");
+
+    patch(bnode1, renderToBdom(template, { v: false }));
+    expect(input.value).toBe("");
+
+    patch(bnode1, renderToBdom(template, { v: "owl" }));
+    expect(input.value).toBe("owl");
+
+    patch(bnode1, renderToBdom(template, { v: undefined }));
+    expect(input.value).toBe("");
+
+    patch(bnode1, renderToBdom(template, { v: "owl" }));
+    expect(input.value).toBe("owl");
+
+    patch(bnode1, renderToBdom(template, { v: null }));
+    expect(input.value).toBe("");
+  });
+
   test("changing a class with t-att-class", () => {
     // render input with initial value
     const template = `<div t-att-class="v"/>`;
@@ -429,6 +458,42 @@ describe("special cases for some specific html attributes/properties", () => {
     expect(input.value).toBe("potato");
   });
 
+  test("input with t-att-value (patching with same value", () => {
+    // render input with initial value
+    const template = `<input t-att-value="v"/>`;
+    const bnode1 = renderToBdom(template, { v: "zucchini" });
+    const fixture = makeTestFixture();
+    mount(bnode1, fixture);
+    const input = fixture.querySelector("input")!;
+    expect(input.value).toBe("zucchini");
+
+    // change value manually in input, to simulate user input
+    input.value = "tomato";
+    expect(input.value).toBe("tomato");
+
+    const bnode2 = renderToBdom(template, { v: "zucchini" });
+    patch(bnode1, bnode2);
+    expect(input.value).toBe("zucchini");
+  });
+
+  test("input, type checkbox, with t-att-checked (patching with same value", () => {
+    // render input with initial value
+    const template = `<input type="checkbox" t-att-checked="v"/>`;
+    const bnode1 = renderToBdom(template, { v: true });
+    const fixture = makeTestFixture();
+    mount(bnode1, fixture);
+    const input = fixture.querySelector("input")!;
+    expect(input.checked).toBe(true);
+
+    // change checked manually in input, to simulate user input
+    input.checked = false;
+    expect(input.checked).toBe(false);
+
+    const bnode2 = renderToBdom(template, { v: true });
+    patch(bnode1, bnode2);
+    expect(input.checked).toBe(true);
+  });
+
   test("input of type checkbox with t-att-indeterminate", () => {
     const template = `<input type="checkbox" t-att-indeterminate="v"/>`;
     const bnode1 = renderToBdom(template, { v: true });

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

@@ -130,16 +130,13 @@ exports[`basics can be clicked on and updated 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
+  let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let txt1 = ctx['state'].counter;
     const v1 = ctx['state'];
     let hdlr1 = [()=>v1.counter++, ctx];
-    const b3 = block3([txt1, hdlr1]);
-    return multi([b2, b3]);
+    return block1([txt1, hdlr1]);
   }
 }"
 `;
@@ -488,30 +485,21 @@ exports[`basics list of two sub components inside other nodes 1`] = `
   const comp1 = app.createComponent(\`SubWidget\`, true, false, false, true);
   const comp2 = app.createComponent(\`SubWidget\`, true, false, false, true);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block5 = createBlock(\`<div>
- <block-child-0/>
- <block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].blips);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`blip\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].blips);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`blip\`] = v_block2[i1];
       const key1 = ctx['blip'].id;
-      const b6 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
-      const b7 = comp2({}, key + \`__2__\${key1}\`, node, this, null);
-      c_block4[i1] = withKey(block5([], [b6, b7]), key1);
+      const b4 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
+      const b5 = comp2({}, key + \`__2__\${key1}\`, node, this, null);
+      c_block2[i1] = withKey(block3([], [b4, b5]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -612,21 +600,13 @@ exports[`basics reconciliation alg is not confused in some specific situation 1`
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   const comp2 = app.createComponent(\`Child\`, true, false, false, true);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- <block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b4 = comp1({}, key + \`__1\`, node, this, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     const tKey_1 = 4;
-    const b5 = toggler(tKey_1, comp2({}, tKey_1 + key + \`__2\`, node, this, null));
-    const b3 = block3([], [b4, b5]);
-    const b6 = text(\`
- \`);
-    return multi([b2, b3, b6]);
+    const b3 = toggler(tKey_1, comp2({}, tKey_1 + key + \`__2\`, node, this, null));
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -661,16 +641,13 @@ exports[`basics rerendering a widget with a sub widget 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
+  let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let txt1 = ctx['state'].counter;
     const v1 = ctx['state'];
     let hdlr1 = [()=>v1.counter++, ctx];
-    const b3 = block3([txt1, hdlr1]);
-    return multi([b2, b3]);
+    return block1([txt1, hdlr1]);
   }
 }"
 `;
@@ -682,20 +659,14 @@ exports[`basics same t-keys in two different places 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   const comp2 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div>
- <div><block-child-0/></div>
- <div><block-child-1/></div>
- </div>\`);
+  let block1 = createBlock(\`<div><div><block-child-0/></div><div><block-child-1/></div></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     const tKey_1 = 1;
-    const b4 = toggler(tKey_1, comp1({blip: '1'}, tKey_1 + key + \`__1\`, node, this, null));
+    const b2 = toggler(tKey_1, comp1({blip: '1'}, tKey_1 + key + \`__1\`, node, this, null));
     const tKey_2 = 1;
-    const b5 = toggler(tKey_2, comp2({blip: '2'}, tKey_2 + key + \`__2\`, node, this, null));
-    const b3 = block3([], [b4, b5]);
-    return multi([b2, b3]);
+    const b3 = toggler(tKey_2, comp2({blip: '2'}, tKey_2 + key + \`__2\`, node, this, null));
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -761,30 +732,23 @@ exports[`basics sub components between t-ifs 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/><block-child-1/>
- <span><block-child-2/></span>
- <block-child-3/>
- </div>\`);
-  let block4 = createBlock(\`<h1>hey</h1>\`);
-  let block5 = createBlock(\`<h2>noo</h2>\`);
-  let block7 = createBlock(\`<span>test</span>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><span><block-child-2/></span><block-child-3/></div>\`);
+  let block2 = createBlock(\`<h1>hey</h1>\`);
+  let block3 = createBlock(\`<h2>noo</h2>\`);
+  let block5 = createBlock(\`<span>test</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5,b6,b7;
+    let b2,b3,b4,b5;
     if (ctx['state'].flag) {
-      b4 = block4();
+      b2 = block2();
     } else {
+      b3 = block3();
+    }
+    b4 = comp1({}, key + \`__1\`, node, this, null);
+    if (ctx['state'].flag) {
       b5 = block5();
     }
-    b6 = comp1({}, key + \`__1\`, node, this, null);
-    if (ctx['state'].flag) {
-      b7 = block7();
-    }
-    const b3 = block3([], [b4, b5, b6, b7]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3, b4, b5]);
   }
 }"
 `;
@@ -808,22 +772,17 @@ exports[`basics t-elif works with t-component 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/><block-child-1/>
- </div>\`);
-  let block4 = createBlock(\`<div>somediv</div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block2 = createBlock(\`<div>somediv</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5;
+    let b2,b3;
     if (ctx['state'].flag) {
-      b4 = block4();
+      b2 = block2();
     } else if (!ctx['state'].flag) {
-      b5 = comp1({}, key + \`__1\`, node, this, null);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
     }
-    const b3 = block3([], [b4, b5]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -847,22 +806,17 @@ exports[`basics t-else with empty string works with t-component 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/><block-child-1/>
- </div>\`);
-  let block4 = createBlock(\`<div>somediv</div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block2 = createBlock(\`<div>somediv</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5;
+    let b2,b3;
     if (ctx['state'].flag) {
-      b4 = block4();
+      b2 = block2();
     } else {
-      b5 = comp1({}, key + \`__1\`, node, this, null);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
     }
-    const b3 = block3([], [b4, b5]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -886,22 +840,17 @@ exports[`basics t-else works with t-component 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/><block-child-1/>
- </div>\`);
-  let block4 = createBlock(\`<div>somediv</div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block2 = createBlock(\`<div>somediv</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5;
+    let b2,b3;
     if (ctx['state'].flag) {
-      b4 = block4();
+      b2 = block2();
     } else {
-      b5 = comp1({}, key + \`__1\`, node, this, null);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
     }
-    const b3 = block3([], [b4, b5]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -957,22 +906,16 @@ exports[`basics t-key on a component with t-if, and a sibling component 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   const comp2 = app.createComponent(\`Child\`, true, false, false, true);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/><block-child-0/>
- <block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5;
+    let b2,b3;
     if (false) {
       const tKey_1 = 'str';
-      b4 = toggler(tKey_1, comp1({}, tKey_1 + key + \`__1\`, node, this, null));
+      b2 = toggler(tKey_1, comp1({}, tKey_1 + key + \`__1\`, node, this, null));
     }
-    b5 = comp2({}, key + \`__2\`, node, this, null);
-    const b3 = block3([], [b4, b5]);
-    return multi([b2, b3]);
+    b3 = comp2({}, key + \`__2\`, node, this, null);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -996,21 +939,15 @@ exports[`basics text after a conditional component 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- <span><block-text-0/></span>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><span><block-text-0/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4;
+    let b2;
     if (ctx['state'].hasChild) {
-      b4 = comp1({}, key + \`__1\`, node, this, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     let txt1 = ctx['state'].text;
-    const b3 = block3([txt1], [b4]);
-    return multi([b2, b3]);
+    return block1([txt1], [b2]);
   }
 }"
 `;
@@ -1099,17 +1036,12 @@ exports[`basics update props of component without concrete own node 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, true, false);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     const tKey_1 = ctx['childProps'].key;
-    const b4 = toggler(tKey_1, comp1(Object.assign({}, ctx['childProps']), tKey_1 + key + \`__1\`, node, this, null));
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = toggler(tKey_1, comp1(Object.assign({}, ctx['childProps']), tKey_1 + key + \`__1\`, node, this, null));
+    return block1([], [b2]);
   }
 }"
 `;
@@ -1121,11 +1053,8 @@ exports[`basics update props of component without concrete own node 2`] = `
   const comp1 = app.createComponent(\`Custom\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     const tKey_1 = ctx['props'].subKey;
-    const b3 = toggler(tKey_1, comp1({key: ctx['props'].key,subKey: ctx['props'].subKey}, tKey_1 + key + \`__1\`, node, this, null));
-    return multi([b2, b3]);
+    return toggler(tKey_1, comp1({key: ctx['props'].key,subKey: ctx['props'].subKey}, tKey_1 + key + \`__1\`, node, this, null));
   }
 }"
 `;
@@ -1135,17 +1064,12 @@ exports[`basics update props of component without concrete own node 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div class=\\"widget-subkey\\">
- <block-text-0/>__<block-text-1/>
- </div>\`);
+  let block1 = createBlock(\`<div class=\\"widget-subkey\\"><block-text-0/>__<block-text-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let txt1 = ctx['props'].key;
     let txt2 = ctx['props'].subKey;
-    const b3 = block3([txt1, txt2]);
-    return multi([b2, b3]);
+    return block1([txt1, txt2]);
   }
 }"
 `;
@@ -1157,22 +1081,14 @@ exports[`basics updating a component with t-foreach as root 1`] = `
   let { prepareList, withKey } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['items']);;
-    for (let i1 = 0; i1 < l_block3; i1++) {
-      ctx[\`item\`] = v_block3[i1];
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['items']);;
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`item\`] = v_block1[i1];
       const key1 = ctx['item'];
-      const b5 = text(\`
- \`);
-      const b6 = text(ctx['item']);
-      const b7 = text(\`
- \`);
-      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
+      c_block1[i1] = withKey(text(ctx['item']), key1);
     }
-    const b3 = list(c_block3);
-    return multi([b2, b3]);
+    return list(c_block1);
   }
 }"
 `;
@@ -1332,16 +1248,11 @@ exports[`support svg components add proper namespace to svg 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`GComp\`, true, false, false, true);
   
-  let block3 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\">
- <block-child-0/>
- </svg>\`);
+  let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b4 = comp1({}, key + \`__1\`, node, this, null);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -1351,15 +1262,10 @@ exports[`support svg components add proper namespace to svg 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<g block-ns=\\"http://www.w3.org/2000/svg\\">
- <circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/>
- </g>\`);
+  let block1 = createBlock(\`<g 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 = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = block3();
-    return multi([b2, b3]);
+    return block1();
   }
 }"
 `;
@@ -1370,32 +1276,20 @@ exports[`t-out in components can render list of t-out  1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, safeOutput, withKey } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].items);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`item\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].items);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`item\`] = v_block2[i1];
       const key1 = ctx['item'];
-      const b6 = text(\`
- \`);
-      const b7 = text(ctx['item']);
-      const b8 = text(\`
- \`);
-      const b9 = safeOutput(ctx['item']);
-      const b10 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8, b9, b10]), key1);
+      const b4 = text(ctx['item']);
+      const b5 = safeOutput(ctx['item']);
+      c_block2[i1] = withKey(multi([b4, b5]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -1407,15 +1301,9 @@ exports[`t-out in components can switch the contents of two t-out repeatedly 1`]
   let { safeOutput } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = safeOutput(ctx['state'].a);
-    const b4 = text(\`
- \`);
-    const b5 = safeOutput(ctx['state'].b);
-    const b6 = text(\`
- \`);
-    return multi([b2, b3, b4, b5, b6]);
+    const b2 = safeOutput(ctx['state'].a);
+    const b3 = safeOutput(ctx['state'].b);
+    return multi([b2, b3]);
   }
 }"
 `;

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

@@ -31,22 +31,14 @@ exports[`Cascading renders after microtaskTick 2`] = `
   const comp1 = app.createComponent(\`Element\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['state']);;
-    for (let i1 = 0; i1 < l_block3; i1++) {
-      ctx[\`elem\`] = v_block3[i1];
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['state']);;
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`elem\`] = v_block1[i1];
       const key1 = ctx['elem'].id;
-      const b5 = text(\`
- \`);
-      const b6 = comp1({id: ctx['elem'].id}, key + \`__1__\${key1}\`, node, this, null);
-      const b7 = text(\`
- \`);
-      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
+      c_block1[i1] = withKey(comp1({id: ctx['elem'].id}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
-    const b3 = list(c_block3);
-    return multi([b2, b3]);
+    return list(c_block1);
   }
 }"
 `;
@@ -151,16 +143,11 @@ exports[`calling render in destroy 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div>
- <block-text-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let txt1 = ctx['props'].fromA;
-    const b3 = block3([txt1]);
-    return multi([b2, b3]);
+    return block1([txt1]);
   }
 }"
 `;
@@ -606,20 +593,13 @@ exports[`concurrent renderings scenario 9 1`] = `
   const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   const comp2 = app.createComponent(\`ComponentC\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div>
- <block-text-0/>
- <block-child-0/>
- <block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-text-0/><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let txt1 = ctx['state'].fromA;
-    const b4 = comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, this, null);
-    const b5 = comp2({fromA: ctx['state'].fromA}, key + \`__2\`, node, this, null);
-    const b3 = block3([txt1], [b4, b5]);
-    return multi([b2, b3]);
+    const b2 = comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, this, null);
+    const b3 = comp2({fromA: ctx['state'].fromA}, key + \`__2\`, node, this, null);
+    return block1([txt1], [b2, b3]);
   }
 }"
 `;
@@ -781,21 +761,15 @@ exports[`concurrent renderings scenario 13 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   const comp2 = app.createComponent(\`Child\`, true, false, false, true);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- <block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5;
-    b4 = comp1({}, key + \`__1\`, node, this, null);
+    let b2,b3;
+    b2 = comp1({}, key + \`__1\`, node, this, null);
     if (ctx['state'].bool) {
-      b5 = comp2({}, key + \`__2\`, node, this, null);
+      b3 = comp2({}, key + \`__2\`, node, this, null);
     }
-    const b3 = block3([], [b4, b5]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -849,20 +823,13 @@ exports[`concurrent renderings scenario 14 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<p>
- <span><block-text-0/></span>
- <span><block-text-1/></span>
- <span><block-text-2/></span>
- </p>\`);
+  let block1 = createBlock(\`<p><span><block-text-0/></span><span><block-text-1/></span><span><block-text-2/></span></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let txt1 = ctx['props'].fromA;
     let txt2 = ctx['props'].fromB;
     let txt3 = ctx['state'].fromC;
-    const b3 = block3([txt1, txt2, txt3]);
-    return multi([b2, b3]);
+    return block1([txt1, txt2, txt3]);
   }
 }"
 `;
@@ -902,20 +869,13 @@ exports[`concurrent renderings scenario 15 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<p>
- <span><block-text-0/></span>
- <span><block-text-1/></span>
- <span><block-text-2/></span>
- </p>\`);
+  let block1 = createBlock(\`<p><span><block-text-0/></span><span><block-text-1/></span><span><block-text-2/></span></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let txt1 = ctx['props'].fromA;
     let txt2 = ctx['props'].fromB;
     let txt3 = ctx['state'].fromC;
-    const b3 = block3([txt1, txt2, txt3]);
-    return multi([b2, b3]);
+    return block1([txt1, txt2, txt3]);
   }
 }"
 `;
@@ -951,20 +911,17 @@ exports[`concurrent renderings scenario 16 3`] = `
   const comp1 = app.createComponent(\`D\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4,b5,b6,b7,b8,b9;
-    b2 = text(\`
- \`);
-    b3 = text(ctx['props'].fromA);
-    b4 = text(\`:\`);
-    b5 = text(ctx['props'].fromB);
-    b6 = text(\`:\`);
-    b7 = text(ctx['state'].fromC);
-    b8 = text(\`:
- \`);
+    let b2,b3,b4,b5,b6,b7,b8;
+    b2 = text(ctx['props'].fromA);
+    b3 = text(\`:\`);
+    b4 = text(ctx['props'].fromB);
+    b5 = text(\`:\`);
+    b6 = text(ctx['state'].fromC);
+    b7 = text(\`: \`);
     if (ctx['state'].fromC===13) {
-      b9 = comp1({}, key + \`__1\`, node, this, null);
+      b8 = comp1({}, key + \`__1\`, node, this, null);
     }
-    return multi([b2, b3, b4, b5, b6, b7, b8, b9]);
+    return multi([b2, b3, b4, b5, b6, b7, b8]);
   }
 }"
 `;
@@ -988,18 +945,14 @@ exports[`creating two async components, scenario 1 1`] = `
   const comp2 = app.createComponent(\`ChildB\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4,b5;
-    b2 = text(\`
- \`);
+    let b2,b3;
     if (ctx['state'].flagA) {
-      b3 = comp1({}, key + \`__1\`, node, this, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
-    b4 = text(\`
- \`);
     if (ctx['state'].flagB) {
-      b5 = comp2({}, key + \`__2\`, node, this, null);
+      b3 = comp2({}, key + \`__2\`, node, this, null);
     }
-    return multi([b2, b3, b4, b5]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -1038,21 +991,15 @@ exports[`creating two async components, scenario 2 1`] = `
   const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
   const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- <block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5;
-    b4 = comp1({val: ctx['state'].valA}, key + \`__1\`, node, this, null);
+    let b2,b3;
+    b2 = comp1({val: ctx['state'].valA}, key + \`__1\`, node, this, null);
     if (ctx['state'].flagB) {
-      b5 = comp2({val: ctx['state'].valB}, key + \`__2\`, node, this, null);
+      b3 = comp2({val: ctx['state'].valB}, key + \`__2\`, node, this, null);
     }
-    const b3 = block3([], [b4, b5]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -1092,21 +1039,15 @@ exports[`creating two async components, scenario 3 (patching in the same frame)
   const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
   const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- <block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5;
-    b4 = comp1({val: ctx['state'].valA}, key + \`__1\`, node, this, null);
+    let b2,b3;
+    b2 = comp1({val: ctx['state'].valA}, key + \`__1\`, node, this, null);
     if (ctx['state'].flagB) {
-      b5 = comp2({val: ctx['state'].valB}, key + \`__2\`, node, this, null);
+      b3 = comp2({val: ctx['state'].valB}, key + \`__2\`, node, this, null);
     }
-    const b3 = block3([], [b4, b5]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -1534,19 +1475,11 @@ exports[`destroyed component causes other soon to be destroyed component to rere
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
-    b2 = text(\`
- A
- \`);
+    b2 = text(\` A \`);
     if (ctx['state'].flag) {
-      const b4 = text(\`
- \`);
-      const b5 = comp1({value: ctx['state'].valueB}, key + \`__1\`, node, this, null);
-      const b6 = text(\`
- \`);
-      const b7 = comp2({value: ctx['state'].valueC}, key + \`__2\`, node, this, null);
-      const b8 = text(\`
- \`);
-      b3 = multi([b4, b5, b6, b7, b8]);
+      const b4 = comp1({value: ctx['state'].valueB}, key + \`__1\`, node, this, null);
+      const b5 = comp2({value: ctx['state'].valueC}, key + \`__2\`, node, this, null);
+      b3 = multi([b4, b5]);
     }
     return multi([b2, b3]);
   }
@@ -1609,19 +1542,14 @@ exports[`destroying/recreating a subwidget with different props (if start is not
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4;
+    let b2;
     if (ctx['state'].val>1) {
-      b4 = comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
+      b2 = comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
     }
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -1669,17 +1597,14 @@ exports[`properly behave when destroyed/unmounted while rendering  1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4;
+    let b2;
     if (ctx['state'].flag) {
-      b4 = comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
+      b2 = comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
     }
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -1718,21 +1643,15 @@ exports[`rendering component again in next microtick 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
-  let block3 = createBlock(\`<div>
- <button block-handler-0=\\"click\\">Click</button>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click\\">Click</button><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4;
+    let b2;
     let hdlr1 = [ctx['onClick'], ctx];
     if (ctx['env'].config.flag) {
-      b4 = comp1({}, key + \`__1\`, node, this, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
-    const b3 = block3([hdlr1], [b4]);
-    return multi([b2, b3]);
+    return block1([hdlr1], [b2]);
   }
 }"
 `;
@@ -1854,16 +1773,12 @@ exports[`t-foreach with dynamic async component 1`] = `
       ctx[\`arr\`] = v_block1[i1];
       ctx[\`arr_index\`] = i1;
       const key1 = ctx['arr_index'];
-      let b3,b4,b5;
-      b3 = text(\`
- \`);
+      let b3;
       if (ctx['arr']) {
         const Comp1 = ctx['myComp'];
-        b4 = toggler(Comp1, comp1({key: ctx['arr'][0]}, key + \`__1__\${key1}\`, node, this, Comp1));
+        b3 = toggler(Comp1, comp1({key: ctx['arr'][0]}, key + \`__1__\${key1}\`, node, this, Comp1));
       }
-      b5 = text(\`
- \`);
-      c_block1[i1] = withKey(multi([b3, b4, b5]), key1);
+      c_block1[i1] = withKey(multi([b3]), key1);
     }
     return list(c_block1);
   }

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

@@ -73,26 +73,16 @@ exports[`basics simple catchError 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/><block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5;
+    let b2,b3;
     if (ctx['error']) {
-      b4 = text(\`Error\`);
+      b2 = text(\`Error\`);
     } else {
-      const b6 = text(\`
- \`);
-      const b7 = comp1({}, key + \`__1\`, node, this, null);
-      const b8 = text(\`
- \`);
-      b5 = multi([b6, b7, b8]);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
     }
-    const b3 = block3([], [b4, b5]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -111,6 +101,72 @@ exports[`basics simple catchError 2`] = `
 }"
 `;
 
+exports[`can catch errors Errors have the right cause 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['state'].value);
+  }
+}"
+`;
+
+exports[`can catch errors Errors in owl lifecycle are wrapped in dev mode: async hook 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['state'].value);
+  }
+}"
+`;
+
+exports[`can catch errors Errors in owl lifecycle are wrapped out of dev mode: async hook 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['state'].value);
+  }
+}"
+`;
+
+exports[`can catch errors Errors in owl lifecycle are wrapped outside dev mode: sync hook 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['state'].value);
+  }
+}"
+`;
+
+exports[`can catch errors Thrown values that are not errors are wrapped in dev mode 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['state'].value);
+  }
+}"
+`;
+
+exports[`can catch errors Thrown values that are not errors are wrapped outside dev mode 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['state'].value);
+  }
+}"
+`;
+
 exports[`can catch errors an error in onWillDestroy 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -118,16 +174,12 @@ exports[`can catch errors an error in onWillDestroy 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4,b5;
-    b2 = text(\`
- \`);
-    b3 = text(ctx['state'].value);
-    b4 = text(\`
- \`);
+    let b2,b3;
+    b2 = text(ctx['state'].value);
     if (ctx['state'].hasChild) {
-      b5 = comp1({}, key + \`__1\`, node, this, null);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
     }
-    return multi([b2, b3, b4, b5]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -152,16 +204,12 @@ exports[`can catch errors an error in onWillDestroy, variation 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4,b5;
-    b2 = text(\`
- \`);
-    b3 = text(ctx['state'].value);
-    b4 = text(\`
- \`);
+    let b2,b3;
+    b2 = text(ctx['state'].value);
     if (ctx['state'].hasChild) {
-      b5 = comp1({}, key + \`__1\`, node, this, null);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
     }
-    return multi([b2, b3, b4, b5]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -198,20 +246,15 @@ exports[`can catch errors can catch an error in a component render function 1`]
   const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, false);
   const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
     return comp1({flag: ctx['state'].flag}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b5 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
-    const b3 = block3([], [b5]);
-    return multi([b2, b3]);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return block1([], [b3]);
   }
 }"
 `;
@@ -222,21 +265,16 @@ exports[`can catch errors can catch an error in a component render function 2`]
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/><block-child-1/><block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5;
+    let b2,b3;
     if (ctx['state'].error) {
-      b4 = text(\`Error handled\`);
+      b2 = text(\`Error handled\`);
     } else {
-      b5 = callSlot(ctx, node, key, 'default', false, {});
+      b3 = callSlot(ctx, node, key, 'default', false, {});
     }
-    const b3 = block3([], [b4, b5]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -263,9 +301,7 @@ exports[`can catch errors can catch an error in the constructor call of a compon
   const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
   const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
   
-  let block1 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -284,9 +320,7 @@ exports[`can catch errors can catch an error in the constructor call of a compon
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<div>
- <block-child-0/><block-child-1/><block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -309,9 +343,7 @@ exports[`can catch errors can catch an error in the constructor call of a compon
   const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
   const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
   
-  let block1 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
     const b3 = comp1({}, key + \`__1\`, node, this, null);
@@ -332,9 +364,7 @@ exports[`can catch errors can catch an error in the constructor call of a compon
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<div>
- <block-child-0/><block-child-1/><block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -395,20 +425,15 @@ exports[`can catch errors can catch an error in the initial call of a component
   const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
   const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b5 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
-    const b3 = block3([], [b5]);
-    return multi([b2, b3]);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return block1([], [b3]);
   }
 }"
 `;
@@ -419,21 +444,16 @@ exports[`can catch errors can catch an error in the initial call of a component
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/><block-child-1/><block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5;
+    let b2,b3;
     if (ctx['state'].error) {
-      b4 = text(\`Error handled\`);
+      b2 = text(\`Error handled\`);
     } else {
-      b5 = callSlot(ctx, node, key, 'default', false, {});
+      b3 = callSlot(ctx, node, key, 'default', false, {});
     }
-    const b3 = block3([], [b4, b5]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -460,23 +480,18 @@ exports[`can catch errors can catch an error in the initial call of a component
   const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
   const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b5;
+    let b3;
     if (ctx['state'].flag) {
-      b5 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+      b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     }
-    const b3 = block3([], [b5]);
-    return multi([b2, b3]);
+    return block1([], [b3]);
   }
 }"
 `;
@@ -487,21 +502,16 @@ exports[`can catch errors can catch an error in the initial call of a component
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/><block-child-1/><block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5;
+    let b2,b3;
     if (ctx['state'].error) {
-      b4 = text(\`Error handled\`);
+      b2 = text(\`Error handled\`);
     } else {
-      b5 = callSlot(ctx, node, key, 'default', false, {});
+      b3 = callSlot(ctx, node, key, 'default', false, {});
     }
-    const b3 = block3([], [b4, b5]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -553,9 +563,7 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
   
-  let block1 = createBlock(\`<div>
- <block-child-0/><block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -588,9 +596,7 @@ exports[`can catch errors can catch an error in the mounted call (in root compon
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
   
-  let block1 = createBlock(\`<div>
- <block-child-0/><block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -625,9 +631,7 @@ exports[`can catch errors can catch an error in the mounted call 1`] = `
   const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
   const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
   
-  let block1 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -646,9 +650,7 @@ exports[`can catch errors can catch an error in the mounted call 2`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<div>
- <block-child-0/><block-child-1/><block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -683,22 +685,16 @@ exports[`can catch errors can catch an error in the willPatch call 1`] = `
   const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, false);
   const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
   
-  let block3 = createBlock(\`<div>
- <span><block-text-0/></span>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><span><block-text-0/></span><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
     return comp1({message: ctx['state'].message}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let txt1 = ctx['state'].message;
-    const b5 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
-    const b3 = block3([txt1], [b5]);
-    return multi([b2, b3]);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return block1([txt1], [b3]);
   }
 }"
 `;
@@ -709,21 +705,16 @@ exports[`can catch errors can catch an error in the willPatch call 2`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/><block-child-1/><block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5;
+    let b2,b3;
     if (ctx['state'].error) {
-      b4 = text(\`Error handled\`);
+      b2 = text(\`Error handled\`);
     } else {
-      b5 = callSlot(ctx, node, key, 'default', false, {});
+      b3 = callSlot(ctx, node, key, 'default', false, {});
     }
-    const b3 = block3([], [b4, b5]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -769,21 +760,16 @@ exports[`can catch errors can catch an error in the willStart call 2`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/><block-child-1/><block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5;
+    let b2,b3;
     if (ctx['state'].error) {
-      b4 = text(\`Error handled\`);
+      b2 = text(\`Error handled\`);
     } else {
-      b5 = callSlot(ctx, node, key, 'default', false, {});
+      b3 = callSlot(ctx, node, key, 'default', false, {});
     }
-    const b3 = block3([], [b4, b5]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -810,9 +796,7 @@ exports[`can catch errors can catch an error origination from a child's willStar
   const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
   const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
   
-  let block1 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
     const b3 = comp1({}, key + \`__1\`, node, this, null);
@@ -833,9 +817,7 @@ exports[`can catch errors can catch an error origination from a child's willStar
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<div>
- <block-child-0/><block-child-1/><block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -881,26 +863,16 @@ exports[`can catch errors catchError in catchError 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/><block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5;
+    let b2,b3;
     if (ctx['error']) {
-      b4 = text(\`Error\`);
+      b2 = text(\`Error\`);
     } else {
-      const b6 = text(\`
- \`);
-      const b7 = comp1({}, key + \`__1\`, node, this, null);
-      const b8 = text(\`
- \`);
-      b5 = multi([b6, b7, b8]);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
     }
-    const b3 = block3([], [b4, b5]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -911,16 +883,11 @@ exports[`can catch errors catchError in catchError 2`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b4 = comp1({}, key + \`__1\`, node, this, null);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -948,34 +915,21 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
   const comp2 = app.createComponent(\`ErrorHandler\`, true, true, false, false);
   
   function slot1(ctx, node, key = \\"\\") {
-    const b7 = text(\`
- \`);
     const Comp1 = ctx['cp'].Comp;
-    const b8 = toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
-    const b9 = text(\`
- \`);
-    return multi([b7, b8, b9]);
+    return toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block3, v_block3, l_block3, c_block3] = prepareList(Object.values(ctx['state'].cps));;
-    for (let i1 = 0; i1 < l_block3; i1++) {
-      ctx[\`cp\`] = v_block3[i1];
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(Object.values(ctx['state'].cps));;
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`cp\`] = v_block1[i1];
       const key1 = ctx['cp'].id;
-      const b5 = text(\`
- \`);
       const v1 = ctx['cp'];
       const ctx1 = capture(ctx);
-      const b10 = comp2({onError: ()=>this.cleanUp(v1.id),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null);
-      const b11 = text(\`
- \`);
-      c_block3[i1] = withKey(multi([b5, b10, b11]), key1);
+      c_block1[i1] = withKey(comp2({onError: ()=>this.cleanUp(v1.id),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1);
     }
-    const b3 = list(c_block3);
-    return multi([b2, b3]);
+    return list(c_block1);
   }
 }"
 `;
@@ -1039,37 +993,21 @@ exports[`can catch errors catching in child makes parent render 1`] = `
   const comp2 = app.createComponent(\`Catch\`, true, true, false, false);
   
   function slot1(ctx, node, key = \\"\\") {
-    const b7 = text(\`
- \`);
     const Comp1 = ctx['elem'][1];
-    const b8 = toggler(Comp1, comp1({id: ctx['elem'][0]}, key + \`__1\`, node, this, Comp1));
-    const b9 = text(\`
- \`);
-    return multi([b7, b8, b9]);
+    return toggler(Comp1, comp1({id: ctx['elem'][0]}, key + \`__1\`, node, this, Comp1));
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block3, v_block3, l_block3, c_block3] = prepareList(Object.entries(this.elements));;
-    for (let i1 = 0; i1 < l_block3; i1++) {
-      ctx[\`elem\`] = v_block3[i1];
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(Object.entries(this.elements));;
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`elem\`] = v_block1[i1];
       const key1 = ctx['elem'][0];
-      const b5 = text(\`
- \`);
       const v1 = ctx['elem'];
       const ctx1 = capture(ctx);
-      const b10 = comp2({onError: (_error)=>this.onError(v1[0],_error),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null);
-      const b11 = text(\`
- \`);
-      c_block3[i1] = withKey(multi([b5, b10, b11]), key1);
+      c_block1[i1] = withKey(comp2({onError: (_error)=>this.onError(v1[0],_error),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1);
     }
-    ctx = ctx.__proto__;
-    const b3 = list(c_block3);
-    const b12 = text(\`
- \`);
-    return multi([b2, b3, b12]);
+    return list(c_block1);
   }
 }"
 `;
@@ -1122,10 +1060,7 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
   const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
   const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
   
-  let block1 = createBlock(\`<div>
- <block-child-0/>
- <block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
     return comp2({}, key + \`__2\`, node, this, null);
@@ -1156,9 +1091,7 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<div>
- <block-child-0/><block-child-1/><block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -1202,28 +1135,16 @@ exports[`can catch errors onError in class inheritance is called if rethrown 2`]
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div>
- <block-child-0/><block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b6;
+    let b2,b3;
     if (!ctx['state'].error) {
-      const b3 = text(\`
- \`);
-      const b4 = text(this.will.crash);
-      const b5 = text(\`
- \`);
-      b2 = multi([b3, b4, b5]);
+      b2 = text(this.will.crash);
     } else {
-      const b7 = text(\`
- \`);
-      const b8 = text(ctx['state'].error);
-      const b9 = text(\`
- \`);
-      b6 = multi([b7, b8, b9]);
+      b3 = text(ctx['state'].error);
     }
-    return block1([], [b2, b6]);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -1245,28 +1166,16 @@ exports[`can catch errors onError in class inheritance is not called if no rethr
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div>
- <block-child-0/><block-child-1/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b6;
+    let b2,b3;
     if (!ctx['state'].error) {
-      const b3 = text(\`
- \`);
-      const b4 = text(this.will.crash);
-      const b5 = text(\`
- \`);
-      b2 = multi([b3, b4, b5]);
+      b2 = text(this.will.crash);
     } else {
-      const b7 = text(\`
- \`);
-      const b8 = text(ctx['state'].error);
-      const b9 = text(\`
- \`);
-      b6 = multi([b7, b8, b9]);
+      b3 = text(ctx['state'].error);
     }
-    return block1([], [b2, b6]);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -1453,3 +1362,16 @@ exports[`errors and promises errors in rerender 1`] = `
   }
 }"
 `;
+
+exports[`errors and promises wrapped errors in async code are correctly caught 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>abc</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;

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

@@ -58,26 +58,34 @@ exports[`event handling handler receive the event as argument 2`] = `
 }"
 `;
 
+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;
+  
+  let block1 = createBlock(\`<span block-handler-0=\\"click\\">click me</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['inc'], ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
 exports[`event handling input blur event is not called if component is destroyed 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- <textarea/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><textarea/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4;
+    let b2;
     if (ctx['state'].cond) {
-      b4 = comp1({}, key + \`__1\`, node, this, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -102,33 +110,22 @@ 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;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block7 = createBlock(\`<div class=\\"item\\" block-handler-0=\\"click\\"/>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div class=\\"item\\" block-handler-0=\\"click\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['items']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`item\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`item\`] = v_block2[i1];
       const key1 = ctx['item'];
-      const b6 = text(\`
- \`);
       const v1 = ctx['onClick'];
       const v2 = ctx['item'];
       let hdlr1 = [_ev=>v1(v2.val,_ev), ctx];
-      const b7 = block7([hdlr1]);
-      const b8 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
+      c_block2[i1] = withKey(block3([hdlr1]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -138,15 +135,12 @@ exports[`event handling support for callable expression in event handler 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div><block-text-0/><input type=\\"text\\" block-handler-1=\\"input\\"/></div>\`);
+  let block1 = createBlock(\`<div><block-text-0/><input type=\\"text\\" block-handler-1=\\"input\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let txt1 = ctx['state'].value;
     let hdlr1 = [ctx['obj'].onInput, ctx];
-    const b3 = block3([txt1, hdlr1]);
-    return multi([b2, b3]);
+    return block1([txt1, hdlr1]);
   }
 }"
 `;
@@ -157,33 +151,22 @@ 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;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block7 = createBlock(\`<div class=\\"item\\" block-handler-0=\\"click\\"/>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div class=\\"item\\" block-handler-0=\\"click\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['items']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`item\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`item\`] = v_block2[i1];
       const key1 = ctx['item'];
-      const b6 = text(\`
- \`);
       const v1 = ctx['onClick'];
       const v2 = ctx['item'];
       let hdlr1 = [_ev=>v1(v2,_ev), ctx];
-      const b7 = block7([hdlr1]);
-      const b8 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
+      c_block2[i1] = withKey(block3([hdlr1]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;

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

@@ -34,24 +34,14 @@ exports[`basics can select a sub widget  1`] = `
   const comp2 = app.createComponent(\`OtherChild\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4,b5,b6,b7,b8;
-    b2 = text(\`
- \`);
-    b3 = text(\`
- \`);
+    let b2,b3;
     if (ctx['env'].options.flag) {
-      b4 = comp1({}, key + \`__1\`, node, this, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
-    b5 = text(\`
- \`);
     if (!ctx['env'].options.flag) {
-      b6 = comp2({}, key + \`__2\`, node, this, null);
+      b3 = comp2({}, key + \`__2\`, node, this, null);
     }
-    b7 = text(\`
- \`);
-    b8 = text(\`
- \`);
-    return multi([b2, b3, b4, b5, b6, b7, b8]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -90,24 +80,14 @@ exports[`basics can select a sub widget, part 2 1`] = `
   const comp2 = app.createComponent(\`OtherChild\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4,b5,b6,b7,b8;
-    b2 = text(\`
- \`);
-    b3 = text(\`
- \`);
+    let b2,b3;
     if (ctx['state'].flag) {
-      b4 = comp1({}, key + \`__1\`, node, this, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
-    b5 = text(\`
- \`);
     if (!ctx['state'].flag) {
-      b6 = comp2({}, key + \`__2\`, node, this, null);
+      b3 = comp2({}, key + \`__2\`, node, this, null);
     }
-    b7 = text(\`
- \`);
-    b8 = text(\`
- \`);
-    return multi([b2, b3, b4, b5, b6, b7, b8]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -155,17 +135,12 @@ exports[`basics sub widget is interactive 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<span>
- <button block-handler-0=\\"click\\">click</button>child<block-text-1/>
- </span>\`);
+  let block1 = createBlock(\`<span><button block-handler-0=\\"click\\">click</button>child<block-text-1/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let hdlr1 = [ctx['inc'], ctx];
     let txt1 = ctx['state'].val;
-    const b3 = block3([hdlr1, txt1]);
-    return multi([b2, b3]);
+    return block1([hdlr1, txt1]);
   }
 }"
 `;

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

@@ -5,24 +5,18 @@ exports[`hooks autofocus hook input in a t-if 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div>
- <input block-ref=\\"0\\"/>
- <block-child-0/>
- </div>\`);
-  let block4 = createBlock(\`<input block-ref=\\"0\\"/>\`);
+  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 = \\"\\") {
     const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`input1\`] = el;
     const ref2 = (el) => refs[\`input2\`] = el;
-    const b2 = text(\`
- \`);
-    let b4;
+    let b2;
     if (ctx['state'].flag) {
-      b4 = block4([ref2]);
+      b2 = block2([ref2]);
     }
-    const b3 = block3([ref1], [b4]);
-    return multi([b2, b3]);
+    return block1([ref1], [b2]);
   }
 }"
 `;
@@ -32,19 +26,13 @@ exports[`hooks autofocus hook simple input 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div>
- <input block-ref=\\"0\\"/>
- <input block-ref=\\"1\\"/>
- </div>\`);
+  let block1 = createBlock(\`<div><input block-ref=\\"0\\"/><input block-ref=\\"1\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`input1\`] = el;
     const ref2 = (el) => refs[\`input2\`] = el;
-    const b2 = text(\`
- \`);
-    const b3 = block3([ref1, ref2]);
-    return multi([b2, b3]);
+    return block1([ref1, ref2]);
   }
 }"
 `;
@@ -277,23 +265,16 @@ exports[`hooks useEffect hook effect can depend on stuff in dom 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block5 = createBlock(\`<div block-ref=\\"0\\"/>\`);
+  let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`div\`] = el;
-    let b2,b3;
-    b2 = text(\`
- \`);
+    let b2;
     if (ctx['state'].value) {
-      const b4 = text(\`
- \`);
-      const b5 = block5([ref1]);
-      const b6 = text(\`
- \`);
-      b3 = multi([b4, b5, b6]);
+      b2 = block2([ref1]);
     }
-    return multi([b2, b3]);
+    return multi([b2]);
   }
 }"
 `;

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

@@ -51,22 +51,17 @@ exports[`lifecycle hooks component semantics 3`] = `
   const comp2 = app.createComponent(\`E\`, true, false, false, true);
   const comp3 = app.createComponent(\`F\`, true, false, false, true);
   
-  let block3 = createBlock(\`<div>C<block-child-0/>
- <block-child-1/><block-child-2/>
- </div>\`);
+  let block1 = createBlock(\`<div>C<block-child-0/><block-child-1/><block-child-2/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5,b6;
-    b4 = comp1({}, key + \`__1\`, node, this, null);
+    let b2,b3,b4;
+    b2 = comp1({}, key + \`__1\`, node, this, null);
     if (ctx['state'].flag) {
-      b5 = comp2({}, key + \`__2\`, node, this, null);
+      b3 = comp2({}, key + \`__2\`, node, this, null);
     } else {
-      b6 = comp3({}, key + \`__3\`, node, this, null);
+      b4 = comp3({}, key + \`__3\`, node, this, null);
     }
-    const b3 = block3([], [b4, b5, b6]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3, b4]);
   }
 }"
 `;
@@ -116,21 +111,15 @@ exports[`lifecycle hooks components are unmounted and destroyed if no longer in
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block2 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b5;
-    b2 = text(\`
- \`);
+    let b2;
     if (ctx['state'].flag) {
-      const b4 = comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
-      b3 = block3([], [b4]);
+      const b3 = comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
+      b2 = block2([], [b3]);
     }
-    b5 = text(\`
- \`);
-    return multi([b2, b3, b5]);
+    return multi([b2]);
   }
 }"
 `;
@@ -561,10 +550,7 @@ exports[`lifecycle hooks onWillRender 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = comp1({someValue: ctx['state'].value}, key + \`__1\`, node, this, null);
-    return multi([b2, b3]);
+    return comp1({someValue: ctx['state'].value}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -741,16 +727,11 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b4 = comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
-    const b3 = block3([], [b4]);
-    const b5 = text(\`
- \`);
-    return multi([b2, b3, b5]);
+    const b2 = comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -761,16 +742,11 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ChildChild\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b4 = comp1({n: ctx['props'].n}, key + \`__1\`, node, this, null);
-    const b3 = block3([], [b4]);
-    const b5 = text(\`
- \`);
-    return multi([b2, b3, b5]);
+    const b2 = comp1({n: ctx['props'].n}, key + \`__1\`, node, this, null);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -780,16 +756,11 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div><block-text-0/></div>\`);
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let txt1 = ctx['props'].n;
-    const b3 = block3([txt1]);
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1([txt1]);
   }
 }"
 `;
@@ -851,32 +822,17 @@ exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/><block-child-1/>
- </div>\`);
-  let block10 = createBlock(\`<div/>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block3 = createBlock(\`<div/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b8;
+    let b2,b3;
     if (ctx['state'].ok) {
-      const b5 = text(\`
- \`);
-      const b6 = comp1({}, key + \`__1\`, node, this, null);
-      const b7 = text(\`
- \`);
-      b4 = multi([b5, b6, b7]);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     } else {
-      const b9 = text(\`
- \`);
-      const b10 = block10();
-      const b11 = text(\`
- \`);
-      b8 = multi([b9, b10, b11]);
+      b3 = block3();
     }
-    const b3 = block3([], [b4, b8]);
-    return multi([b2, b3]);
+    return block1([], [b2, b3]);
   }
 }"
 `;

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

@@ -37,27 +37,16 @@ exports[`basics arrow functions as prop correctly capture their scope 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['items']);;
-    for (let i1 = 0; i1 < l_block3; i1++) {
-      ctx[\`item\`] = v_block3[i1];
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['items']);;
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`item\`] = v_block1[i1];
       const key1 = ctx['item'].val;
-      const b5 = text(\`
- \`);
       const v1 = ctx['onClick'];
       const v2 = ctx['item'];
-      const b6 = comp1({onClick: _ev=>v1(v2.val,_ev)}, key + \`__1__\${key1}\`, node, this, null);
-      const b7 = text(\`
- \`);
-      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
+      c_block1[i1] = withKey(comp1({onClick: _ev=>v1(v2.val,_ev)}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
-    ctx = ctx.__proto__;
-    const b3 = list(c_block3);
-    const b8 = text(\`
- \`);
-    return multi([b2, b3, b8]);
+    return list(c_block1);
   }
 }"
 `;
@@ -164,25 +153,19 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
   let { isBoundary, withDefault, LazyValue } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div>
- 
- <block-child-0/>
- </div>\`);
-  let block4 = createBlock(\`<p>43</p>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<p>43</p>\`);
   
   function value1(ctx, node, key = \\"\\") {
-    return block4();
+    return block2();
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     ctx[\`abc\`] = new LazyValue(value1, ctx, this, node);
-    const b5 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
-    const b3 = block3([], [b5]);
-    return multi([b2, b3]);
+    const b3 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
+    return block1([], [b3]);
   }
 }"
 `;
@@ -193,18 +176,12 @@ 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;
   
-  let block3 = createBlock(\`<span>
- <block-text-0/>
- <block-child-0/>
- </span>\`);
+  let block1 = createBlock(\`<span><block-text-0/><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let txt1 = ctx['props'].val;
-    const b4 = safeOutput(ctx['props'].val);
-    const b3 = block3([txt1], [b4]);
-    return multi([b2, b3]);
+    const b2 = safeOutput(ctx['props'].val);
+    return block1([txt1], [b2]);
   }
 }"
 `;
@@ -216,20 +193,14 @@ exports[`basics t-set with a body expression can be used as textual prop 1`] = `
   let { isBoundary, withDefault, setContextValue } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div>
- 
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"abc\\", \`42\`);
-    const b4 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -255,20 +226,14 @@ exports[`basics t-set works  1`] = `
   let { isBoundary, withDefault, setContextValue } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div>
- 
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"val\\", 42);
-    const b4 = comp1({val: ctx['val']}, key + \`__1\`, node, this, null);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = comp1({val: ctx['val']}, key + \`__1\`, node, this, null);
+    return block1([], [b2]);
   }
 }"
 `;

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

@@ -99,16 +99,11 @@ exports[`reactivity in lifecycle change state while mounting component 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div><block-text-0/></div>\`);
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let txt1 = ctx['state'].val;
-    const b3 = block3([txt1]);
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1([txt1]);
   }
 }"
 `;
@@ -119,21 +114,14 @@ exports[`reactivity in lifecycle state changes in willUnmount do not trigger rer
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4;
+    let b2;
     if (ctx['state'].flag) {
-      b4 = comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
+      b2 = comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
     }
-    const b3 = block3([], [b4]);
-    const b5 = text(\`
- \`);
-    return multi([b2, b3, b5]);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -143,17 +131,12 @@ exports[`reactivity in lifecycle state changes in willUnmount do not trigger rer
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
+  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let txt1 = ctx['props'].val;
     let txt2 = ctx['state'].n;
-    const b3 = block3([txt1, txt2]);
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1([txt1, txt2]);
   }
 }"
 `;

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

@@ -21,31 +21,19 @@ exports[`refs can use 2 refs with same name in a t-if/t-else situation 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { multiRefSetter } = helpers;
   
-  let block5 = createBlock(\`<div block-ref=\\"0\\"/>\`);
-  let block9 = createBlock(\`<span block-ref=\\"0\\"/>\`);
+  let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
+  let block3 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
     const ref1 = multiRefSetter(refs, \`coucou\`);
-    let b2,b3,b7;
-    b2 = text(\`
- \`);
+    let b2,b3;
     if (ctx['state'].value) {
-      const b4 = text(\`
- \`);
-      const b5 = block5([ref1]);
-      const b6 = text(\`
- \`);
-      b3 = multi([b4, b5, b6]);
+      b2 = block2([ref1]);
     } else {
-      const b8 = text(\`
- \`);
-      const b9 = block9([ref1]);
-      const b10 = text(\`
- \`);
-      b7 = multi([b8, b9, b10]);
+      b3 = block3([ref1]);
     }
-    return multi([b2, b3, b7]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -56,23 +44,17 @@ exports[`refs refs and recursive templates 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Test\`, true, false, false, false);
   
-  let block3 = createBlock(\`<p block-ref=\\"0\\">
- <block-text-1/>
- <block-child-0/>
- </p>\`);
+  let block1 = createBlock(\`<p block-ref=\\"0\\"><block-text-1/><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`root\`] = el;
-    const b2 = text(\`
- \`);
-    let b4;
+    let b2;
     let txt1 = ctx['props'].tree.value;
     if (ctx['props'].tree.child) {
-      b4 = comp1({tree: ctx['props'].tree.child}, key + \`__1\`, node, this, null);
+      b2 = comp1({tree: ctx['props'].tree.child}, key + \`__1\`, node, this, null);
     }
-    const b3 = block3([ref1, txt1], [b4]);
-    return multi([b2, b3]);
+    return block1([ref1, txt1], [b2]);
   }
 }"
 `;
@@ -84,37 +66,21 @@ exports[`refs refs are properly bound in slots 1`] = `
   let { capture, markRaw } = helpers;
   const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
-  let block3 = createBlock(\`<div>
- <span class=\\"counter\\"><block-text-0/></span>
- <block-child-0/>
- </div>\`);
-  let block4 = createBlock(\`<button block-handler-0=\\"click\\" block-ref=\\"1\\">do something</button>\`);
+  let block1 = createBlock(\`<div><span class=\\"counter\\"><block-text-0/></span><block-child-0/></div>\`);
+  let block2 = createBlock(\`<button block-handler-0=\\"click\\" block-ref=\\"1\\">do something</button>\`);
   
   function slot1(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`myButton\`] = el;
     let hdlr1 = [ctx['doSomething'], ctx];
-    return block4([hdlr1, ref1]);
-  }
-  
-  function slot2(ctx, node, key = \\"\\") {
-    const b6 = text(\`
- \`);
-    const b7 = text(\`
- \`);
-    return multi([b6, b7]);
+    return block2([hdlr1, ref1]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let txt1 = ctx['state'].val;
     const ctx1 = capture(ctx);
-    const b8 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
-    const b3 = block3([txt1], [b8]);
-    const b9 = text(\`
- \`);
-    return multi([b2, b3, b9]);
+    const b3 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    return block1([txt1], [b3]);
   }
 }"
 `;
@@ -140,19 +106,15 @@ exports[`refs throws if there are 2 same refs at the same time 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { multiRefSetter } = helpers;
   
-  let block3 = createBlock(\`<div block-ref=\\"0\\"/>\`);
-  let block5 = createBlock(\`<span block-ref=\\"0\\"/>\`);
+  let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
+  let block3 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
     const ref1 = multiRefSetter(refs, \`coucou\`);
-    const b2 = text(\`
- \`);
+    const b2 = block2([ref1]);
     const b3 = block3([ref1]);
-    const b4 = text(\`
- \`);
-    const b5 = block5([ref1]);
-    return multi([b2, b3, b4, b5]);
+    return multi([b2, b3]);
   }
 }"
 `;

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

@@ -7,15 +7,9 @@ exports[`children, default props and renderings 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = text(ctx['state'].value);
-    const b4 = text(\`
- \`);
-    const b5 = comp1({}, key + \`__1\`, node, this, null);
-    const b6 = text(\`
- \`);
-    return multi([b2, b3, b4, b5, b6]);
+    const b2 = text(ctx['state'].value);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -75,15 +69,9 @@ exports[`rendering semantics can force a render to update sub tree 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = text(ctx['state'].value);
-    const b4 = text(\`
- \`);
-    const b5 = comp1({}, key + \`__1\`, node, this, null);
-    const b6 = text(\`
- \`);
-    return multi([b2, b3, b4, b5, b6]);
+    const b2 = text(ctx['state'].value);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -106,15 +94,9 @@ exports[`rendering semantics can render a parent without rendering child 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = text(ctx['state'].value);
-    const b4 = text(\`
- \`);
-    const b5 = comp1({}, key + \`__1\`, node, this, null);
-    const b6 = text(\`
- \`);
-    return multi([b2, b3, b4, b5, b6]);
+    const b2 = text(ctx['state'].value);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -137,12 +119,7 @@ exports[`rendering semantics props are reactive (nested prop) 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -165,12 +142,7 @@ exports[`rendering semantics props are reactive 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -193,15 +165,9 @@ exports[`rendering semantics render need a boolean = true to be 'deep' 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = text(ctx['state'].value);
-    const b4 = text(\`
- \`);
-    const b5 = comp1({}, key + \`__1\`, node, this, null);
-    const b6 = text(\`
- \`);
-    return multi([b2, b3, b4, b5, b6]);
+    const b2 = text(ctx['state'].value);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -289,12 +255,7 @@ exports[`rendering semantics works as expected for dynamic number of props 1`] =
   const comp1 = app.createComponent(\`Child\`, true, false, true, false);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = comp1(Object.assign({}, ctx['state']), key + \`__1\`, node, this, null);
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return comp1(Object.assign({}, ctx['state']), key + \`__1\`, node, this, null);
   }
 }"
 `;

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

@@ -124,15 +124,10 @@ exports[`style and class handling can set style and class inside component 1`] =
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div style=\\"font-weight:bold;\\" class=\\"some-class\\">world</div>\`);
+  let block1 = createBlock(\`<div style=\\"font-weight:bold;\\" class=\\"some-class\\">world</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = block3();
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1();
   }
 }"
 `;
@@ -457,16 +452,11 @@ exports[`style and class handling t-att-class is properly added/removed on widge
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b4 = comp1({class: {b:ctx['state'].b}}, key + \`__1\`, node, this, null);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = comp1({class: {b:ctx['state'].b}}, key + \`__1\`, node, this, null);
+    return block1([], [b2]);
   }
 }"
 `;

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

@@ -8,17 +8,12 @@ exports[`t-call dynamic t-call 1`] = `
   const call = app.callTemplate.bind(app);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b3 = text(\`
- owl
- \`);
-    ctx[zero] = b3;
+    const b1 = text(\` owl \`);
+    ctx[zero] = b1;
     const template1 = (ctx['current'].template);
-    const b4 = call(this, template1, ctx, node, key + \`__1\`);
-    return multi([b2, b4]);
+    return call(this, template1, ctx, node, key + \`__1\`);
   }
 }"
 `;
@@ -95,16 +90,13 @@ exports[`t-call handlers are properly bound through a dynamic t-call 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const call = app.callTemplate.bind(app);
   
-  let block3 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     const template1 = ('__template__999');
-    const b4 = call(this, template1, ctx, node, key + \`__1\`);
+    const b2 = call(this, template1, ctx, node, key + \`__1\`);
     let txt1 = ctx['counter'];
-    const b3 = block3([txt1], [b4]);
-    return multi([b2, b3]);
+    return block1([txt1], [b2]);
   }
 }"
 `;
@@ -129,15 +121,12 @@ exports[`t-call handlers are properly bound through a t-call 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`__template__999\`);
   
-  let block3 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b4 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     let txt1 = ctx['counter'];
-    const b3 = block3([txt1], [b4]);
-    return multi([b2, b3]);
+    return block1([txt1], [b2]);
   }
 }"
 `;
@@ -270,22 +259,16 @@ exports[`t-call recursive t-call binding this -- static t-call 1`] = `
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`recursive\`);
   
-  let block3 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
     setContextValue(ctx, \\"level\\", 0);
-    const b4 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    ctx = ctx.__proto__;
-    const b3 = block3([], [b4]);
-    const b5 = text(\`
- \`);
-    return multi([b2, b3, b5]);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -294,43 +277,27 @@ exports[`t-call recursive t-call binding this -- static t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, zero } = helpers;
+  let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`recursive\`);
   
-  let block5 = createBlock(\`<div block-handler-0=\\"click.stop\\"><block-text-1/></div>\`);
+  let block3 = createBlock(\`<div block-handler-0=\\"click.stop\\"><block-text-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    let b2,b3,b12;
-    b2 = text(\`
- \`);
+    let b2;
     if (ctx['level']<2) {
-      const b4 = text(\`
- \`);
       let hdlr1 = [\\"stop\\", ctx['onClicked'].bind(this), ctx];
       let txt1 = ctx['level'];
-      const b5 = block5([hdlr1, txt1]);
-      const b6 = text(\`
- \`);
+      const b3 = block3([hdlr1, txt1]);
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
-      const b8 = text(\`
- \`);
       setContextValue(ctx, \\"level\\", ctx['level']+1);
-      const b9 = text(\`
- \`);
-      const b7 = multi([b8, b9]);
-      ctx[zero] = b7;
-      const b10 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+      const b4 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
       ctx = ctx.__proto__;
-      const b11 = text(\`
- \`);
-      b3 = multi([b4, b5, b6, b10, b11]);
+      b2 = multi([b3, b4]);
     }
-    b12 = text(\`
- \`);
-    return multi([b2, b3, b12]);
+    return multi([b2]);
   }
 }"
 `;
@@ -342,24 +309,17 @@ exports[`t-call sub components in two t-calls 1`] = `
   const callTemplate_1 = app.getTemplate(\`sub\`);
   const callTemplate_2 = app.getTemplate(\`sub\`);
   
-  let block7 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b7;
-    b2 = text(\`
- \`);
+    let b2,b3;
     if (ctx['state'].val===1) {
-      const b4 = text(\`
- \`);
-      const b5 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-      const b6 = text(\`
- \`);
-      b3 = multi([b4, b5, b6]);
+      b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     } else {
-      const b8 = callTemplate_2.call(this, ctx, node, key + \`__2\`);
-      b7 = block7([], [b8]);
+      const b4 = callTemplate_2.call(this, ctx, node, key + \`__2\`);
+      b3 = block3([], [b4]);
     }
-    return multi([b2, b3, b7]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -397,33 +357,22 @@ exports[`t-call t-call in t-foreach and children component 1`] = `
   let { prepareList, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`__template__999\`);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(['a','b','c']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`val\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b','c']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`val\`] = v_block2[i1];
       ctx[\`val_first\`] = i1 === 0;
-      ctx[\`val_last\`] = i1 === v_block4.length - 1;
+      ctx[\`val_last\`] = i1 === v_block2.length - 1;
       ctx[\`val_index\`] = i1;
-      ctx[\`val_value\`] = k_block4[i1];
+      ctx[\`val_value\`] = k_block2[i1];
       const key1 = ctx['val'];
-      const b6 = text(\`
- \`);
-      const b7 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
-      const b8 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
+      c_block2[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -461,11 +410,8 @@ exports[`t-call t-call with t-call-context and subcomponent 1`] = `
   const callTemplate_1 = app.getTemplate(\`someTemplate\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let ctx1 = ctx['subctx'];
-    const b3 = callTemplate_1.call(this, ctx1, node, key + \`__1\`);
-    return multi([b2, b3]);
+    return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
   }
 }"
 `;
@@ -478,15 +424,9 @@ exports[`t-call t-call with t-call-context and subcomponent 2`] = `
   const comp2 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b3 = comp1({name: ctx['aab']}, key + \`__1\`, node, this, null);
-    const b4 = text(\`
- \`);
-    const b5 = comp2({name: ctx['lpe']}, key + \`__2\`, node, this, null);
-    const b6 = text(\`
- \`);
-    return multi([b2, b3, b4, b5, b6]);
+    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]);
   }
 }"
 `;
@@ -511,11 +451,8 @@ exports[`t-call t-call with t-call-context, simple use 1`] = `
   const callTemplate_1 = app.getTemplate(\`someTemplate\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let ctx1 = ctx['subctx'];
-    const b3 = callTemplate_1.call(this, ctx1, node, key + \`__1\`);
-    return multi([b2, b3]);
+    return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
   }
 }"
 `;

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

@@ -6,17 +6,12 @@ exports[`t-component can switch between dynamic components without the need for
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(null, false, false, false, true);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     const Comp1 = ctx['constructor'].components[ctx['state'].child];
-    const b4 = toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
+    return block1([], [b2]);
   }
 }"
 `;
@@ -148,16 +143,13 @@ exports[`t-component modifying a sub widget 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
+  let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let txt1 = ctx['state'].counter;
     const v1 = ctx['state'];
     let hdlr1 = [()=>v1.counter++, ctx];
-    const b3 = block3([txt1, hdlr1]);
-    return multi([b2, b3]);
+    return block1([txt1, hdlr1]);
   }
 }"
 `;

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

@@ -7,35 +7,20 @@ exports[`list of components components in a node in a t-foreach  1`] = `
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div>
- <ul>
- <block-child-0/>
- </ul>
- </div>\`);
-  let block7 = createBlock(\`<li>
- <block-child-0/>
- </li>\`);
+  let block1 = createBlock(\`<div><ul><block-child-0/></ul></div>\`);
+  let block3 = createBlock(\`<li><block-child-0/></li>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['items']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`item\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`item\`] = v_block2[i1];
       const key1 = 'li_'+ctx['item'];
-      const b6 = text(\`
- \`);
-      const b8 = comp1({item: ctx['item']}, key + \`__1__\${key1}\`, node, this, null);
-      const b7 = block7([], [b8]);
-      const b9 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b9]), key1);
+      const b4 = comp1({item: ctx['item']}, key + \`__1__\${key1}\`, node, this, null);
+      c_block2[i1] = withKey(block3([], [b4]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -58,34 +43,23 @@ exports[`list of components crash on duplicate key in dev mode 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, withKey } = helpers;
+  let { prepareList, OwlError, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block3, v_block3, l_block3, c_block3] = prepareList([1,2]);;
-    const keys3 = new Set();
-    for (let i1 = 0; i1 < l_block3; i1++) {
-      ctx[\`item\`] = v_block3[i1];
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1,2]);;
+    const keys1 = new Set();
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`item\`] = v_block1[i1];
       const key1 = 'child';
-      if (keys3.has(key1)) { throw new Error(\`Got duplicate key in t-foreach: \${key1}\`)}
-      keys3.add(key1);
-      const b5 = text(\`
- \`);
+      if (keys1.has(key1)) { throw new OwlError(\`Got duplicate key in t-foreach: \${key1}\`)}
+      keys1.add(key1);
       const props1 = {};
       helpers.validateProps(\`Child\`, props1, ctx);
-      const b6 = comp1(props1, key + \`__1__\${key1}\`, node, this, null);
-      const b7 = text(\`
- \`);
-      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
+      c_block1[i1] = withKey(comp1(props1, key + \`__1__\${key1}\`, node, this, null), key1);
     }
-    ctx = ctx.__proto__;
-    const b3 = list(c_block3);
-    const b8 = text(\`
- \`);
-    return multi([b2, b3, b8]);
+    return list(c_block1);
   }
 }"
 `;
@@ -108,28 +82,20 @@ exports[`list of components list of sub components inside other nodes 1`] = `
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`SubComponent\`, true, false, false, true);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block5 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].blips);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`blip\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].blips);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`blip\`] = v_block2[i1];
       const key1 = ctx['blip'].id;
-      const b6 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
-      c_block4[i1] = withKey(block5([], [b6]), key1);
+      const b4 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
+      c_block2[i1] = withKey(block3([], [b4]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -154,44 +120,28 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].s);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`section\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].s);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`section\`] = v_block2[i1];
       ctx[\`section_index\`] = i1;
       const key1 = ctx['section_index'];
-      const b6 = text(\`
- \`);
       ctx = Object.create(ctx);
-      const [k_block7, v_block7, l_block7, c_block7] = prepareList(ctx['section'].blips);;
-      for (let i2 = 0; i2 < l_block7; i2++) {
-        ctx[\`blip\`] = v_block7[i2];
+      const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['section'].blips);;
+      for (let i2 = 0; i2 < l_block3; i2++) {
+        ctx[\`blip\`] = v_block3[i2];
         ctx[\`blip_index\`] = i2;
         const key2 = ctx['blip_index'];
-        const b9 = text(\`
- \`);
-        const b10 = comp1({blip: ctx['blip']}, key + \`__1__\${key1}__\${key2}\`, node, this, null);
-        const b11 = text(\`
- \`);
-        c_block7[i2] = withKey(multi([b9, b10, b11]), key2);
+        c_block3[i2] = withKey(comp1({blip: ctx['blip']}, key + \`__1__\${key1}__\${key2}\`, node, this, null), key2);
       }
       ctx = ctx.__proto__;
-      const b7 = list(c_block7);
-      const b12 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b12]), key1);
+      c_block2[i1] = withKey(list(c_block3), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -217,40 +167,30 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach,
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block5 = createBlock(\`<p>
- <block-child-0/>
- </p>\`);
-  let block7 = createBlock(\`<p>
- <block-child-0/>
- </p>\`);
+  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 = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].rows);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`row\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].rows);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`row\`] = v_block2[i1];
       const key1 = ctx['row'];
       ctx = Object.create(ctx);
-      const [k_block6, v_block6, l_block6, c_block6] = prepareList(ctx['state'].cols);;
-      for (let i2 = 0; i2 < l_block6; i2++) {
-        ctx[\`col\`] = v_block6[i2];
+      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].cols);;
+      for (let i2 = 0; i2 < l_block4; i2++) {
+        ctx[\`col\`] = v_block4[i2];
         const key2 = ctx['col'];
-        const b8 = comp1({row: ctx['row'],col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, this, null);
-        c_block6[i2] = withKey(block7([], [b8]), key2);
+        const b6 = comp1({row: ctx['row'],col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, this, null);
+        c_block4[i2] = withKey(block5([], [b6]), key2);
       }
       ctx = ctx.__proto__;
-      const b6 = list(c_block6);
-      c_block4[i1] = withKey(block5([], [b6]), key1);
+      const b4 = list(c_block4);
+      c_block2[i1] = withKey(block3([], [b4]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -277,22 +217,14 @@ exports[`list of components simple list 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['state'].elems);;
-    for (let i1 = 0; i1 < l_block3; i1++) {
-      ctx[\`elem\`] = v_block3[i1];
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['state'].elems);;
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`elem\`] = v_block1[i1];
       const key1 = ctx['elem'].id;
-      const b5 = text(\`
- \`);
-      const b6 = comp1({value: ctx['elem'].value}, key + \`__1__\${key1}\`, node, this, null);
-      const b7 = text(\`
- \`);
-      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
+      c_block1[i1] = withKey(comp1({value: ctx['elem'].value}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
-    const b3 = list(c_block3);
-    return multi([b2, b3]);
+    return list(c_block1);
   }
 }"
 `;
@@ -318,29 +250,18 @@ exports[`list of components sub components rendered in a loop 1`] = `
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].numbers);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`number\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].numbers);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`number\`] = v_block2[i1];
       const key1 = ctx['number'];
-      const b6 = text(\`
- \`);
-      const b7 = comp1({n: ctx['number']}, key + \`__1__\${key1}\`, node, this, null);
-      const b8 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
+      c_block2[i1] = withKey(comp1({n: ctx['number']}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -366,29 +287,18 @@ exports[`list of components sub components with some state rendered in a loop 1`
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].numbers);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`number\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].numbers);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`number\`] = v_block2[i1];
       const key1 = ctx['number'];
-      const b6 = text(\`
- \`);
-      const b7 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
-      const b8 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
+      c_block2[i1] = withKey(comp1({}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -414,9 +324,7 @@ exports[`list of components switch component position 1`] = `
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block1 = createBlock(\`<span>
- <block-child-0/>
- </span>\`);
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -424,14 +332,8 @@ exports[`list of components switch component position 1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`c\`] = v_block2[i1];
       const key1 = ctx['c'];
-      const b4 = text(\`
- \`);
-      const b5 = comp1({key: ctx['c']}, key + \`__1__\${key1}\`, node, this, null);
-      const b6 = text(\`
- \`);
-      c_block2[i1] = withKey(multi([b4, b5, b6]), key1);
+      c_block2[i1] = withKey(comp1({key: ctx['c']}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
-    ctx = ctx.__proto__;
     const b2 = list(c_block2);
     return block1([], [b2]);
   }
@@ -459,30 +361,19 @@ exports[`list of components t-foreach with t-component, and update 1`] = `
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(Array(2));;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`n\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(2));;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`n\`] = v_block2[i1];
       ctx[\`n_index\`] = i1;
       const key1 = ctx['n_index'];
-      const b6 = text(\`
- \`);
-      const b7 = comp1({val: ctx['n_index']}, key + \`__1__\${key1}\`, node, this, null);
-      const b8 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
+      c_block2[i1] = withKey(comp1({val: ctx['n_index']}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -492,18 +383,12 @@ exports[`list of components t-foreach with t-component, and update 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<span>
- <block-text-0/>
- <block-text-1/>
- </span>\`);
+  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let txt1 = ctx['state'].val;
     let txt2 = ctx['props'].val;
-    const b3 = block3([txt1, txt2]);
-    return multi([b2, b3]);
+    return block1([txt1, txt2]);
   }
 }"
 `;

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

@@ -7,9 +7,7 @@ exports[`t-key t-foreach with t-key switch component position 1`] = `
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block1 = createBlock(\`<span>
- <block-child-0/>
- </span>\`);
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -17,15 +15,9 @@ exports[`t-key t-foreach with t-key switch component position 1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`c\`] = v_block2[i1];
       const key1 = ctx['c'];
-      const b4 = text(\`
- \`);
       const tKey_1 = ctx['key1'];
-      const b5 = toggler(tKey_1, comp1({key: ctx['c']+ctx['key1']}, tKey_1 + key + \`__1__\${key1}\`, node, this, null));
-      const b6 = text(\`
- \`);
-      c_block2[i1] = withKey(multi([b4, b5, b6]), key1);
+      c_block2[i1] = withKey(comp1({key: ctx['c']+ctx['key1']}, tKey_1 + key + \`__1__\${key1}\`, node, this, null), tKey_1 + key1);
     }
-    ctx = ctx.__proto__;
     const b2 = list(c_block2);
     return block1([], [b2]);
   }
@@ -110,10 +102,7 @@ exports[`t-key t-key on multiple Components 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   const comp2 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block1 = createBlock(\`<span>
- <block-child-0/>
- <block-child-1/>
- </span>\`);
+  let block1 = createBlock(\`<span><block-child-0/><block-child-1/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key1'];
@@ -147,10 +136,7 @@ exports[`t-key t-key on multiple Components with t-call 1 1`] = `
   const callTemplate_1 = app.getTemplate(\`calledTemplate\`);
   const callTemplate_2 = app.getTemplate(\`calledTemplate\`);
   
-  let block1 = createBlock(\`<span>
- <block-child-0/>
- <block-child-1/>
- </span>\`);
+  let block1 = createBlock(\`<span><block-child-0/><block-child-1/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -164,7 +150,6 @@ exports[`t-key t-key on multiple Components with t-call 1 1`] = `
     ctx[isBoundary] = 1;
     setContextValue(ctx, \\"key\\", ctx['key2']);
     const b3 = callTemplate_2.call(this, ctx, node, key + \`__2\`);
-    ctx = ctx.__proto__;
     return block1([], [b2, b3]);
   }
 }"
@@ -177,13 +162,8 @@ exports[`t-key t-key on multiple Components with t-call 1 2`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     const tKey_1 = ctx['key'];
-    const b3 = toggler(tKey_1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, this, null));
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return toggler(tKey_1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, this, null));
   }
 }"
 `;
@@ -208,9 +188,7 @@ exports[`t-key t-key on multiple Components with t-call 2 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`calledTemplate\`);
   
-  let block1 = createBlock(\`<span>
- <block-child-0/>
- </span>\`);
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
@@ -227,15 +205,11 @@ exports[`t-key t-key on multiple Components with t-call 2 2`] = `
   const comp2 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     const tKey_1 = ctx['key1'];
-    const b3 = toggler(tKey_1, comp1({key: ctx['key1']}, tKey_1 + key + \`__1\`, node, this, null));
+    const b2 = toggler(tKey_1, comp1({key: ctx['key1']}, tKey_1 + key + \`__1\`, node, this, null));
     const tKey_2 = ctx['key2'];
-    const b4 = toggler(tKey_2, comp2({key: ctx['key2']}, tKey_2 + key + \`__2\`, node, this, null));
-    const b5 = text(\`
- \`);
-    return multi([b2, b3, b4, b5]);
+    const b3 = toggler(tKey_2, comp2({key: ctx['key2']}, tKey_2 + key + \`__2\`, node, this, null));
+    return multi([b2, b3]);
   }
 }"
 `;

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

@@ -6,23 +6,15 @@ exports[`t-model directive .lazy modifier 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block3 = createBlock(\`<div>
- <input block-attribute-0=\\"value\\" block-handler-1=\\"change\\"/>
- <span><block-text-2/></span>
- </div>\`);
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"change\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].text;
-    const b3 = block3([attr1, hdlr1, txt1]);
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1([attr1, hdlr1, txt1]);
   }
 }"
 `;
@@ -33,23 +25,15 @@ exports[`t-model directive .number modifier 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block3 = createBlock(\`<div>
- <input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
- <span><block-text-2/></span>
- </div>\`);
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     const bExpr1 = ctx['state'];
     const expr1 = 'number';
     let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = toNumber(ev.target.value); }];
     let txt1 = ctx['state'].number;
-    const b3 = block3([attr1, hdlr1, txt1]);
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1([attr1, hdlr1, txt1]);
   }
 }"
 `;
@@ -60,23 +44,15 @@ exports[`t-model directive .trim modifier 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block3 = createBlock(\`<div>
- <input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
- <span><block-text-2/></span>
- </div>\`);
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value.trim(); }];
     let txt1 = ctx['state'].text;
-    const b3 = block3([attr1, hdlr1, txt1]);
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1([attr1, hdlr1, txt1]);
   }
 }"
 `;
@@ -87,21 +63,15 @@ exports[`t-model directive basic use, on an input 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block3 = createBlock(\`<div>
- <input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
- <span><block-text-2/></span>
- </div>\`);
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].text;
-    const b3 = block3([attr1, hdlr1, txt1]);
-    return multi([b2, b3]);
+    return block1([attr1, hdlr1, txt1]);
   }
 }"
 `;
@@ -112,21 +82,15 @@ 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;
   
-  let block3 = createBlock(\`<div>
- <input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
- <span><block-text-2/></span>
- </div>\`);
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].text;
-    const b3 = block3([attr1, hdlr1, txt1]);
-    return multi([b2, b3]);
+    return block1([attr1, hdlr1, txt1]);
   }
 }"
 `;
@@ -137,10 +101,7 @@ exports[`t-model directive basic use, on another key in component 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div>
- <input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
- <span><block-text-2/></span>
- </div>\`);
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['some'];
@@ -159,22 +120,15 @@ 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;
   
-  let block3 = createBlock(\`<div>
- <input block-handler-0=\\"input\\" block-attribute-1=\\"value\\" block-handler-2=\\"input\\"/>
- </div>\`);
+  let block1 = createBlock(\`<div><input block-handler-0=\\"input\\" block-attribute-1=\\"value\\" block-handler-2=\\"input\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let hdlr1 = [ctx['onInput'], ctx];
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let attr1 = bExpr1[expr1];
     let hdlr2 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    const b3 = block3([hdlr1, attr1, hdlr2]);
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1([hdlr1, attr1, hdlr2]);
   }
 }"
 `;
@@ -185,15 +139,9 @@ 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;
   
-  let block3 = createBlock(\`<div>
- <input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-handler-0=\\"click\\" block-attribute-1=\\"checked\\" block-handler-2=\\"click\\"/>
- <input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-handler-3=\\"click\\" block-attribute-4=\\"checked\\" block-handler-5=\\"click\\"/>
- <input type=\\"radio\\" id=\\"three\\" value=\\"Three\\" block-handler-6=\\"click\\" block-attribute-7=\\"checked\\" block-handler-8=\\"click\\"/>
- </div>\`);
+  let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-handler-0=\\"click\\" block-attribute-1=\\"checked\\" block-handler-2=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-handler-3=\\"click\\" block-attribute-4=\\"checked\\" block-handler-5=\\"click\\"/><input type=\\"radio\\" id=\\"three\\" value=\\"Three\\" block-handler-6=\\"click\\" block-attribute-7=\\"checked\\" block-handler-8=\\"click\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let hdlr1 = [ctx['onClick'], ctx];
     const bExpr1 = ctx['state'];
     const expr1 = 'choice';
@@ -209,10 +157,7 @@ exports[`t-model directive can also define t-on directive on same event, part 2
     const expr3 = 'choice';
     let attr3 = bExpr3[expr3] === 'Three';
     let hdlr6 = [(ev) => { bExpr3[expr3] = ev.target.value; }];
-    const b3 = block3([hdlr1, attr1, hdlr2, hdlr3, attr2, hdlr4, hdlr5, attr3, hdlr6]);
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1([hdlr1, attr1, hdlr2, hdlr3, attr2, hdlr4, hdlr5, attr3, hdlr6]);
   }
 }"
 `;
@@ -223,25 +168,17 @@ 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;
   
-  let block3 = createBlock(\`<div>
- 
- <input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
- </div>\`);
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"admiral\\", 'Bruno');
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    const b3 = block3([attr1, hdlr1]);
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1([attr1, hdlr1]);
   }
 }"
 `;
@@ -252,36 +189,23 @@ exports[`t-model directive in a t-foreach 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, toNumber, withKey } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block7 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\" block-handler-1=\\"input\\"/>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\" block-handler-1=\\"input\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`thing\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`thing\`] = v_block2[i1];
       const key1 = ctx['thing'].id;
-      const b6 = text(\`
- \`);
       const bExpr1 = ctx['thing'];
       const expr1 = 'f';
       let attr1 = bExpr1[expr1];
       let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.checked; }];
-      const b7 = block7([attr1, hdlr1]);
-      const b8 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
+      c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    const b9 = text(\`
- \`);
-    return multi([b2, b3, b9]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -292,37 +216,24 @@ 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;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block7 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`thing\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`thing\`] = v_block2[i1];
       ctx[\`thing_index\`] = i1;
       const key1 = ctx['thing_index'];
-      const b6 = text(\`
- \`);
       const bExpr1 = ctx['state'];
       const expr1 = ctx['thing_index'];
       let attr1 = bExpr1[expr1];
       let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-      const b7 = block7([attr1, hdlr1]);
-      const b8 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
+      c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    const b9 = text(\`
- \`);
-    return multi([b2, b3, b9]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -333,37 +244,24 @@ 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;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block7 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['names']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`name\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['names']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`name\`] = v_block2[i1];
       ctx[\`name_index\`] = i1;
       const key1 = ctx['name_index'];
-      const b6 = text(\`
- \`);
       const bExpr1 = ctx['state'].values;
       const expr1 = ctx['name'];
       let attr1 = bExpr1[expr1];
       let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-      const b7 = block7([attr1, hdlr1]);
-      const b8 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
+      c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    const b9 = text(\`
- \`);
-    return multi([b2, b3, b9]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -374,14 +272,7 @@ exports[`t-model directive on a select 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div>
- <select block-attribute-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>\`);
+  let block1 = createBlock(\`<div><select block-attribute-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 = \\"\\") {
     const bExpr1 = ctx['state'];
@@ -400,25 +291,14 @@ exports[`t-model directive on a select, initial state 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block3 = createBlock(\`<div>
- <select block-attribute-0=\\"value\\" block-handler-1=\\"change\\">
- <option value=\\"\\">Please select one</option>
- <option value=\\"red\\">Red</option>
- <option value=\\"blue\\">Blue</option>
- </select>
- </div>\`);
+  let block1 = createBlock(\`<div><select block-attribute-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 = \\"\\") {
-    const b2 = text(\`
- \`);
     const bExpr1 = ctx['state'];
     const expr1 = 'color';
     let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    const b3 = block3([attr1, hdlr1]);
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1([attr1, hdlr1]);
   }
 }"
 `;
@@ -429,23 +309,15 @@ exports[`t-model directive on a sub state key 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block3 = createBlock(\`<div>
- <input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
- <span><block-text-2/></span>
- </div>\`);
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     const bExpr1 = ctx['state'].something;
     const expr1 = 'text';
     let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].something.text;
-    const b3 = block3([attr1, hdlr1, txt1]);
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1([attr1, hdlr1, txt1]);
   }
 }"
 `;
@@ -456,11 +328,7 @@ exports[`t-model directive on an input type=radio 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div>
- <input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\"/>
- <input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/>
- <span>Choice: <block-text-4/></span>
- </div>\`);
+  let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/><span>Choice: <block-text-4/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
@@ -483,10 +351,7 @@ 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;
   
-  let block1 = createBlock(\`<div>
- <input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\"/>
- <input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/>
- </div>\`);
+  let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
@@ -508,12 +373,7 @@ exports[`t-model directive on an input, type=checkbox 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div>
- <input type=\\"checkbox\\" block-attribute-0=\\"checked\\" block-handler-1=\\"input\\"/>
- <span>
- <block-child-0/><block-child-1/>
- </span>
- </div>\`);
+  let block1 = createBlock(\`<div><input type=\\"checkbox\\" block-attribute-0=\\"checked\\" block-handler-1=\\"input\\"/><span><block-child-0/><block-child-1/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -537,10 +397,7 @@ exports[`t-model directive on an textarea 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div>
- <textarea block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
- <span><block-text-2/></span>
- </div>\`);
+  let block1 = createBlock(\`<div><textarea block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
@@ -577,17 +434,9 @@ exports[`t-model directive t-model on select with static options 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block3 = createBlock(\`<div>
- <select block-attribute-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>\`);
+  let block1 = createBlock(\`<div><select block-attribute-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 = \\"\\") {
-    const b2 = text(\`
- \`);
     const bExpr1 = ctx['state'];
     const expr1 = 'model';
     let attr1 = bExpr1[expr1];
@@ -595,10 +444,7 @@ exports[`t-model directive t-model on select with static options 1`] = `
     let txt1 = 'a';
     let txt2 = 'b';
     let txt3 = 'c';
-    const b3 = block3([attr1, hdlr1, txt1, txt2, txt3]);
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1([attr1, hdlr1, txt1, txt2, txt3]);
   }
 }"
 `;
@@ -609,16 +455,9 @@ 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;
   
-  let block3 = 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>\`);
+  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 = \\"\\") {
-    const b2 = text(\`
- \`);
     const bExpr1 = ctx['state'];
     const expr1 = 'model';
     const bValue1 = bExpr1[expr1];
@@ -629,10 +468,7 @@ exports[`t-model directive t-model with dynamic values on select options -- 2 1`
     let attr3 = (ctx['options'][1]);
     let attr4 = bValue1 === (ctx['options'][1]);
     let txt2 = ctx['options'][1];
-    const b3 = block3([hdlr1, attr1, attr2, txt1, attr3, attr4, txt2]);
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1([hdlr1, attr1, attr2, txt1, attr3, attr4, txt2]);
   }
 }"
 `;
@@ -643,16 +479,9 @@ 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;
   
-  let block3 = 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>\`);
+  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 = \\"\\") {
-    const b2 = text(\`
- \`);
     const bExpr1 = ctx['state'];
     const expr1 = 'model';
     const bValue1 = bExpr1[expr1];
@@ -662,10 +491,7 @@ exports[`t-model directive t-model with dynamic values on select options -- 3 1`
     let txt1 = ctx['options'][0];
     let attr3 = bValue1 === \\"b\\";
     let txt2 = ctx['options'][1];
-    const b3 = block3([hdlr1, attr1, attr2, txt1, attr3, txt2]);
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1([hdlr1, attr1, attr2, txt1, attr3, txt2]);
   }
 }"
 `;
@@ -676,16 +502,9 @@ 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;
   
-  let block3 = 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>\`);
+  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 = \\"\\") {
-    const b2 = text(\`
- \`);
     const bExpr1 = ctx['state'];
     const expr1 = 'model';
     const bValue1 = bExpr1[expr1];
@@ -696,10 +515,7 @@ exports[`t-model directive t-model with dynamic values on select options 1`] = `
     let attr3 = ctx['options'][1];
     let attr4 = bValue1 === ctx['options'][1];
     let txt2 = ctx['options'][1];
-    const b3 = block3([hdlr1, attr1, attr2, txt1, attr3, attr4, txt2]);
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1([hdlr1, attr1, attr2, txt1, attr3, attr4, txt2]);
   }
 }"
 `;
@@ -710,41 +526,26 @@ 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;
   
-  let block3 = createBlock(\`<div>
- <select block-handler-0=\\"change\\">
- <block-child-0/>
- </select>
- </div>\`);
-  let block7 = createBlock(\`<option block-attribute-0=\\"value\\" block-attribute-1=\\"selected\\"><block-text-2/></option>\`);
+  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 = \\"\\") {
-    const b2 = text(\`
- \`);
     const bExpr1 = ctx['state'];
     const expr1 = 'model';
     const bValue1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['options']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`v\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['options']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`v\`] = v_block2[i1];
       const key1 = ctx['v'];
-      const b6 = text(\`
- \`);
       let attr1 = ctx['v'];
       let attr2 = bValue1 === ctx['v'];
       let txt1 = ctx['v'];
-      const b7 = block7([attr1, attr2, txt1]);
-      const b8 = text(\`
- \`);
-      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
+      c_block2[i1] = withKey(block3([attr1, attr2, txt1]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([hdlr1], [b4]);
-    const b9 = text(\`
- \`);
-    return multi([b2, b3, b9]);
+    const b2 = list(c_block2);
+    return block1([hdlr1], [b2]);
   }
 }"
 `;
@@ -755,35 +556,27 @@ 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;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- <block-child-1/>
- </div>\`);
-  let block4 = createBlock(\`<input class=\\"a\\" block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
-  let block5 = createBlock(\`<input class=\\"b\\" block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block2 = createBlock(\`<input class=\\"a\\" block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
+  let block3 = createBlock(\`<input class=\\"b\\" block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    let b4,b5;
+    let b2,b3;
     if (ctx['state'].flag) {
       const bExpr1 = ctx['state'];
       const expr1 = 'text1';
       let attr1 = bExpr1[expr1];
       let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-      b4 = block4([attr1, hdlr1]);
+      b2 = block2([attr1, hdlr1]);
     }
     if (!ctx['state'].flag) {
       const bExpr2 = ctx['state'];
       const expr2 = 'text2';
       let attr2 = bExpr2[expr2];
       let hdlr2 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
-      b5 = block5([attr2, hdlr2]);
+      b3 = block3([attr2, hdlr2]);
     }
-    const b3 = block3([], [b4, b5]);
-    const b6 = text(\`
- \`);
-    return multi([b2, b3, b6]);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -794,23 +587,15 @@ exports[`t-model directive with expression having a changing key 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block3 = createBlock(\`<div>
- <input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
- <span><block-text-2/></span>
- </div>\`);
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     const bExpr1 = ctx['state'].something;
     const expr1 = ctx['text'].key;
     let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].something[ctx['text'].key];
-    const b3 = block3([attr1, hdlr1, txt1]);
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1([attr1, hdlr1, txt1]);
   }
 }"
 `;

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

@@ -6,38 +6,26 @@ 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;
   
-  let block3 = createBlock(\`<div>
- 
- <block-child-0/>
- </div>\`);
-  let block5 = createBlock(\`<div>
- <button block-handler-0=\\"click\\">expr</button>
- 
- </div>\`);
+  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 = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"iter\\", 0);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['arr']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`val\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['arr']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`val\`] = v_block2[i1];
       const key1 = ctx['val'];
       const v1 = ctx['otherState'];
       const v2 = ctx['iter'];
       let hdlr1 = [()=>v1.vals.push(v2+'_'+v2), ctx];
       setContextValue(ctx, \\"iter\\", ctx['iter']+1);
-      c_block4[i1] = withKey(block5([hdlr1]), key1);
+      c_block2[i1] = withKey(block3([hdlr1]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    const b6 = text(\`
- \`);
-    return multi([b2, b3, b6]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -48,21 +36,14 @@ exports[`t-on t-on expression in t-foreach 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block5 = createBlock(\`<div>
- <block-text-0/>: <block-text-1/>
- <button block-handler-2=\\"click\\">Expr</button>
- </div>\`);
+  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 = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].values);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`val\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`val\`] = v_block2[i1];
       ctx[\`val_index\`] = i1;
       const key1 = ctx['val'];
       let txt1 = ctx['val_index'];
@@ -70,14 +51,10 @@ exports[`t-on t-on expression in t-foreach 1`] = `
       const v1 = ctx['otherState'];
       const v2 = ctx['val'];
       let hdlr1 = [()=>v1.vals.push(v2), ctx];
-      c_block4[i1] = withKey(block5([txt1, txt2, hdlr1]), key1);
+      c_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    const b6 = text(\`
- \`);
-    return multi([b2, b3, b6]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -88,26 +65,17 @@ 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;
   
-  let block3 = createBlock(\`<div>
- 
- <block-child-0/>
- </div>\`);
-  let block5 = createBlock(\`<div>
- 
- <block-text-0/>: <block-text-1/>
- <button block-handler-2=\\"click\\">Expr</button>
- </div>\`);
+  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 = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"bossa\\", 'nova');
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].values);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`val\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`val\`] = v_block2[i1];
       ctx[\`val_index\`] = i1;
       const key1 = ctx['val'];
       setContextValue(ctx, \\"bossa\\", ctx['bossa']+'_'+ctx['val_index']);
@@ -117,14 +85,10 @@ exports[`t-on t-on expression in t-foreach with t-set 1`] = `
       const v2 = ctx['val'];
       const v3 = ctx['bossa'];
       let hdlr1 = [()=>v1.vals.push(v2+'_'+v3), ctx];
-      c_block4[i1] = withKey(block5([txt1, txt2, hdlr1]), key1);
+      c_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    const b6 = text(\`
- \`);
-    return multi([b2, b3, b6]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -135,35 +99,24 @@ exports[`t-on t-on method call in t-foreach 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
-  let block5 = createBlock(\`<div>
- <block-text-0/>: <block-text-1/>
- <button block-handler-2=\\"click\\">meth call</button>
- </div>\`);
+  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 = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].values);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`val\`] = v_block4[i1];
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`val\`] = v_block2[i1];
       ctx[\`val_index\`] = i1;
       const key1 = ctx['val'];
       let txt1 = ctx['val_index'];
       let txt2 = ctx['val']+'';
       const v1 = ctx['val'];
       let hdlr1 = [()=>this.addVal(v1), ctx];
-      c_block4[i1] = withKey(block5([txt1, txt2, hdlr1]), key1);
+      c_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
     }
-    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
-    const b3 = block3([], [b4]);
-    const b6 = text(\`
- \`);
-    return multi([b2, b3, b6]);
+    const b2 = list(c_block2);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -176,19 +129,13 @@ exports[`t-on t-on on component next to t-on on div 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   const catcher1 = createCatcher({\\"click\\":0});
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- <p block-handler-0=\\"click\\">dec</p>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><p block-handler-0=\\"click\\">dec</p></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     const hdlr1 = [ctx['increment'], ctx];
-    const b4 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
+    const b2 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
     let hdlr2 = [ctx['decrement'], ctx];
-    const b3 = block3([hdlr2], [b4]);
-    return multi([b2, b3]);
+    return block1([hdlr2], [b2]);
   }
 }"
 `;
@@ -245,24 +192,16 @@ exports[`t-on t-on on components and t-foreach 1`] = `
   const catcher1 = createCatcher({\\"click\\":0});
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     ctx = Object.create(ctx);
-    const [k_block3, v_block3, l_block3, c_block3] = prepareList(['John','Raoul','Gérald']);;
-    for (let i1 = 0; i1 < l_block3; i1++) {
-      ctx[\`name\`] = v_block3[i1];
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(['John','Raoul','Gérald']);;
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`name\`] = v_block1[i1];
       const key1 = ctx['name'];
-      const b5 = text(\`
- \`);
       const v1 = ctx['name'];
       const hdlr1 = [()=>this.log(v1), ctx];
-      const b6 = catcher1(comp1({value: ctx['name']}, key + \`__1__\${key1}\`, node, this, null), [hdlr1]);
-      const b7 = text(\`
- \`);
-      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
+      c_block1[i1] = withKey(catcher1(comp1({value: ctx['name']}, key + \`__1__\${key1}\`, node, this, null), [hdlr1]), key1);
     }
-    const b3 = list(c_block3);
-    return multi([b2, b3]);
+    return list(c_block1);
   }
 }"
 `;
@@ -289,19 +228,12 @@ exports[`t-on t-on on components, variation 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   const catcher1 = createCatcher({\\"click\\":0});
   
-  let block3 = createBlock(\`<div>
- <span/>
- <block-child-0/>
- <p/>
- </div>\`);
+  let block1 = createBlock(\`<div><span/><block-child-0/><p/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     const hdlr1 = [ctx['increment'], ctx];
-    const b4 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
-    const b3 = block3([], [b4]);
-    return multi([b2, b3]);
+    const b2 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -360,15 +292,10 @@ exports[`t-on t-on on components, with a handler update 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"name\\", ctx['state'].name);
-    const b3 = text(\`
- \`);
     const v1 = ctx['name'];
     const hdlr1 = [()=>this.log(v1), ctx];
-    const b4 = catcher1(comp1({value: ctx['name']}, key + \`__1\`, node, this, null), [hdlr1]);
-    return multi([b2, b3, b4]);
+    return catcher1(comp1({value: ctx['name']}, key + \`__1\`, node, this, null), [hdlr1]);
   }
 }"
 `;
@@ -426,22 +353,14 @@ exports[`t-on t-on on slot, with 'prevent' modifier 1`] = `
   let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
-  let block5 = createBlock(\`<button>button</button>\`);
+  let block1 = createBlock(\`<button>button</button>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    const b4 = text(\`
- \`);
-    const b5 = block5();
-    const b6 = text(\`
- \`);
-    return multi([b4, b5, b6]);
+    return block1();
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b7 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
-    return multi([b2, b7]);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -468,39 +387,23 @@ exports[`t-on t-on on t-set-slots 1`] = `
   const catcher1 = createCatcher({\\"click\\":0});
   const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
-  let block7 = createBlock(\`<p>something</p>\`);
-  let block9 = createBlock(\`<p>paragraph</p>\`);
+  let block6 = createBlock(\`<p>something</p>\`);
+  let block7 = createBlock(\`<p>paragraph</p>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    const b6 = text(\`
- \`);
+    const b6 = block6();
     const b7 = block7();
-    const b8 = text(\`
- \`);
-    const b9 = block9();
-    const b10 = text(\`
- \`);
     const hdlr1 = [()=>this.state.count++, ctx];
-    return catcher1(multi([b6, b7, b8, b9, b10]), [hdlr1]);
-  }
-  
-  function slot2(ctx, node, key = \\"\\") {
-    const b12 = text(\`
- \`);
-    const b13 = text(\`
- \`);
-    return multi([b12, b13]);
+    return catcher1(multi([b6, b7]), [hdlr1]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- [\`);
+    const b2 = text(\` [\`);
     const b3 = text(ctx['state'].count);
-    const b4 = text(\`]
- \`);
+    const b4 = text(\`] \`);
     const ctx1 = capture(ctx);
-    const b14 = comp1({slots: markRaw({'myslot': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
-    return multi([b2, b3, b4, b14]);
+    const b8 = comp1({slots: markRaw({'myslot': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    return multi([b2, b3, b4, b8]);
   }
 }"
 `;
@@ -524,22 +427,14 @@ exports[`t-on t-on on t-slots 1`] = `
   let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
-  let block5 = createBlock(\`<p>something</p>\`);
+  let block1 = createBlock(\`<p>something</p>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    const b4 = text(\`
- \`);
-    const b5 = block5();
-    const b6 = text(\`
- \`);
-    return multi([b4, b5, b6]);
+    return block1();
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b7 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
-    return multi([b2, b7]);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -552,11 +447,9 @@ exports[`t-on t-on on t-slots 2`] = `
   const catcher1 = createCatcher({\\"click\\":0});
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- [\`);
+    const b2 = text(\` [\`);
     const b3 = text(ctx['state'].count);
-    const b4 = text(\`]
- \`);
+    const b4 = text(\`] \`);
     const hdlr1 = [()=>this.state.count++, ctx];
     const b5 = catcher1(callSlot(ctx, node, key, 'default', false, {}), [hdlr1]);
     return multi([b2, b3, b4, b5]);

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

@@ -6,18 +6,11 @@ exports[`t-props basic use 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, true, false);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b4 = comp1(Object.assign({}, ctx['some'].obj), key + \`__1\`, node, this, null);
-    const b3 = block3([], [b4]);
-    const b5 = text(\`
- \`);
-    return multi([b2, b3, b5]);
+    const b2 = comp1(Object.assign({}, ctx['some'].obj), key + \`__1\`, node, this, null);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -27,18 +20,11 @@ exports[`t-props basic use 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<span>
- <block-text-0/>
- </span>\`);
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     let txt1 = ctx['props'].a+ctx['props'].b;
-    const b3 = block3([txt1]);
-    const b4 = text(\`
- \`);
-    return multi([b2, b3, b4]);
+    return block1([txt1]);
   }
 }"
 `;
@@ -133,18 +119,11 @@ exports[`t-props t-props with props 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, true, false);
   
-  let block3 = createBlock(\`<div>
- <block-child-0/>
- </div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
-    const b4 = comp1(Object.assign({}, ctx['childProps'], {a: 1,b: 2}), key + \`__1\`, node, this, null);
-    const b3 = block3([], [b4]);
-    const b5 = text(\`
- \`);
-    return multi([b2, b3, b5]);
+    const b2 = comp1(Object.assign({}, ctx['childProps'], {a: 1,b: 2}), key + \`__1\`, node, this, null);
+    return block1([], [b2]);
   }
 }"
 `;

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

@@ -7,36 +7,24 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 1`] = `
   let { isBoundary, withDefault, setContextValue, capture, markRaw } = helpers;
   const comp1 = app.createComponent(\`Childcomp\`, true, true, false, true);
   
-  let block3 = createBlock(\`<div>
- 
- <p><block-text-0/></p>
- <block-child-0/>
- <p><block-text-1/></p>
- </div>\`);
+  let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b5 = text(\`
- \`);
     setContextValue(ctx, \\"iter\\", 'inCall');
-    const b6 = text(\`
- \`);
-    return multi([b5, b6]);
+  return text('');
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"iter\\", 'source');
     let txt1 = ctx['iter'];
     const ctx1 = capture(ctx);
-    const b7 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b2 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     let txt2 = ctx['iter'];
-    const b3 = block3([txt1, txt2], [b7]);
-    return multi([b2, b3]);
+    return block1([txt1, txt2], [b2]);
   }
 }"
 `;
@@ -71,33 +59,19 @@ exports[`t-set slots with a t-set with a component in body 1`] = `
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b4 = text(\`
- \`);
     ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
-    const b9 = text(\`
- in slot
- \`);
-    const b10 = safeOutput(ctx['v']);
-    const b11 = text(\`
- \`);
-    return multi([b4, b9, b10, b11]);
+    const b3 = text(\` in slot \`);
+    const b4 = safeOutput(ctx['v']);
+    return multi([b3, b4]);
   }
   
   function value1(ctx, node, key = \\"\\") {
-    const b6 = text(\`
- \`);
-    const b7 = comp1({}, key + \`__1\`, node, this, null);
-    const b8 = text(\`
- \`);
-    return multi([b6, b7, b8]);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     const ctx1 = capture(ctx);
-    const b12 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
-    return multi([b2, b12]);
+    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -135,41 +109,26 @@ exports[`t-set slots with an t-set with a component in body 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   const comp2 = app.createComponent(\`Blorg\`, true, true, false, true);
   
-  let block9 = createBlock(\`<div>coffee</div>\`);
+  let block4 = createBlock(\`<div>coffee</div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b4 = text(\`
- \`);
     ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
-    const b11 = text(\`
- tea
- \`);
-    const b12 = safeOutput(ctx['v']);
-    const b13 = text(\`
- \`);
-    return multi([b4, b11, b12, b13]);
+    const b5 = text(\` tea \`);
+    const b6 = safeOutput(ctx['v']);
+    return multi([b5, b6]);
   }
   
   function value1(ctx, node, key = \\"\\") {
-    const b6 = text(\`
- \`);
-    const b7 = comp1({}, key + \`__1\`, node, this, null);
-    const b8 = text(\`
- \`);
-    const b9 = block9();
-    const b10 = text(\`
- \`);
-    return multi([b6, b7, b8, b9, b10]);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
+    const b4 = block4();
+    return multi([b3, b4]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     const ctx1 = capture(ctx);
-    const b14 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
-    return multi([b2, b14]);
+    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -210,30 +169,17 @@ exports[`t-set slots with an unused t-set with a component in body 1`] = `
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b4 = text(\`
- \`);
     ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
-    const b9 = text(\`
- in slot
- \`);
-    return multi([b4, b9]);
+    return text(\` in slot \`);
   }
   
   function value1(ctx, node, key = \\"\\") {
-    const b6 = text(\`
- \`);
-    const b7 = comp1({}, key + \`__1\`, node, this, null);
-    const b8 = text(\`
- \`);
-    return multi([b6, b7, b8]);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
- \`);
     const ctx1 = capture(ctx);
-    const b10 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
-    return multi([b2, b10]);
+    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -258,22 +204,15 @@ 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;
   
-  let block3 = createBlock(\`<div>
- <p><block-text-0/></p>
- 
- <p><block-text-1/></p>
- </div>\`);
+  let block1 = createBlock(\`<div><p><block-text-0/></p><p><block-text-1/></p></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     let txt1 = ctx['iter'];
     setContextValue(ctx, \\"iter\\", 5);
     let txt2 = ctx['iter'];
-    const b3 = block3([txt1, txt2]);
-    return multi([b2, b3]);
+    return block1([txt1, txt2]);
   }
 }"
 `;
@@ -284,22 +223,15 @@ 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;
   
-  let block3 = createBlock(\`<div>
- <p><block-text-0/></p>
- 
- <p><block-text-1/></p>
- </div>\`);
+  let block1 = createBlock(\`<div><p><block-text-0/></p><p><block-text-1/></p></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     let txt1 = ctx['iter'];
     setContextValue(ctx, \\"iter\\", 5);
     let txt2 = ctx['iter'];
-    const b3 = block3([txt1, txt2]);
-    return multi([b2, b3]);
+    return block1([txt1, txt2]);
   }
 }"
 `;
@@ -310,44 +242,21 @@ exports[`t-set t-set in t-if 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block3 = createBlock(\`<div>
- 
- <block-child-0/><block-child-1/><block-child-2/>
- <p><block-text-0/></p>
- </div>\`);
+  let block1 = createBlock(\`<div><p><block-text-0/></p></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
-    let b4,b7,b10;
     setContextValue(ctx, \\"flag\\", ctx['state'].flag);
     if (ctx['flag']==='if') {
-      const b5 = text(\`
- \`);
       setContextValue(ctx, \\"iter\\", 2);
-      const b6 = text(\`
- \`);
-      b4 = multi([b5, b6]);
     } else if (ctx['flag']==='elif') {
-      const b8 = text(\`
- \`);
       setContextValue(ctx, \\"iter\\", 3);
-      const b9 = text(\`
- \`);
-      b7 = multi([b8, b9]);
     } else {
-      const b11 = text(\`
- \`);
       setContextValue(ctx, \\"iter\\", 4);
-      const b12 = text(\`
- \`);
-      b10 = multi([b11, b12]);
     }
     let txt1 = ctx['iter'];
-    const b3 = block3([txt1], [b4, b7, b10]);
-    return multi([b2, b3]);
+    return block1([txt1]);
   }
 }"
 `;
@@ -359,24 +268,16 @@ exports[`t-set t-set not altered by child comp 1`] = `
   let { isBoundary, withDefault, setContextValue } = helpers;
   const comp1 = app.createComponent(\`Childcomp\`, true, false, false, true);
   
-  let block3 = createBlock(\`<div>
- 
- <p><block-text-0/></p>
- <block-child-0/>
- <p><block-text-1/></p>
- </div>\`);
+  let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     setContextValue(ctx, \\"iter\\", 'source');
     let txt1 = ctx['iter'];
-    const b4 = comp1({}, key + \`__1\`, node, this, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     let txt2 = ctx['iter'];
-    const b3 = block3([txt1, txt2], [b4]);
-    return multi([b2, b3]);
+    return block1([txt1, txt2], [b2]);
   }
 }"
 `;
@@ -406,46 +307,22 @@ 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;
   
-  let block3 = createBlock(\`<div>
- 
- 
- <block-child-0/><block-child-1/><block-child-2/>
- <p><block-text-0/></p>
- </div>\`);
+  let block1 = createBlock(\`<div><p><block-text-0/></p></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
-    let b4,b7,b10;
     setContextValue(ctx, \\"iter\\", 0);
     setContextValue(ctx, \\"flag\\", ctx['state'].flag);
     if (ctx['flag']==='if') {
-      const b5 = text(\`
- \`);
       setContextValue(ctx, \\"iter\\", 2);
-      const b6 = text(\`
- \`);
-      b4 = multi([b5, b6]);
     } else if (ctx['flag']==='elif') {
-      const b8 = text(\`
- \`);
       setContextValue(ctx, \\"iter\\", 3);
-      const b9 = text(\`
- \`);
-      b7 = multi([b8, b9]);
     } else {
-      const b11 = text(\`
- \`);
       setContextValue(ctx, \\"iter\\", 4);
-      const b12 = text(\`
- \`);
-      b10 = multi([b11, b12]);
     }
     let txt1 = ctx['iter'];
-    const b3 = block3([txt1], [b4, b7, b10]);
-    return multi([b2, b3]);
+    return block1([txt1]);
   }
 }"
 `;
@@ -457,29 +334,18 @@ exports[`t-set t-set with a component in body 1`] = `
   let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
-  let block3 = createBlock(\`<div>
- 
- <div><block-child-0/></div>
- </div>\`);
+  let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
   
   function value1(ctx, node, key = \\"\\") {
-    const b5 = text(\`
- \`);
-    const b6 = comp1({}, key + \`__1\`, node, this, null);
-    const b7 = text(\`
- \`);
-    return multi([b5, b6, b7]);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
-    const b8 = safeOutput(ctx['v']);
-    const b3 = block3([], [b8]);
-    return multi([b2, b3]);
+    const b3 = safeOutput(ctx['v']);
+    return block1([], [b3]);
   }
 }"
 `;
@@ -501,30 +367,19 @@ 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;
   
-  let block3 = createBlock(\`<div>
- 
- <div><block-child-0/></div>
- </div>\`);
-  let block6 = createBlock(\`<p>coucou</p>\`);
+  let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
+  let block2 = createBlock(\`<p>coucou</p>\`);
   
   function value1(ctx, node, key = \\"\\") {
-    const b5 = text(\`
- \`);
-    const b6 = block6();
-    const b7 = text(\`
- \`);
-    return multi([b5, b6, b7]);
+    return block2();
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    const b2 = text(\`
- \`);
     ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
-    const b8 = safeOutput(ctx['v']);
-    const b3 = block3([], [b8]);
-    return multi([b2, b3]);
+    const b3 = safeOutput(ctx['v']);
+    return block1([], [b3]);
   }
 }"
 `;

tests/components/error_handling.test.ts

@@ -19,6 +19,7 @@ import {
   snapshotEverything,
   useLogLifecycle,
 } from "../helpers";
+import { OwlError } from "../../src/runtime/error_handling";
 
 let fixture: HTMLElement;
 
@@ -159,16 +160,17 @@ describe("errors and promises", () => {
       static template = xml`<div><t t-esc="this.will.crash"/></div>`;
     }
 
-    let error: Error;
+    let error: OwlError;
     try {
       await mount(App, fixture);
     } catch (e) {
-      error = e as Error;
+      error = e as OwlError;
     }
     expect(error!).toBeDefined();
+    expect(error!.cause).toBeDefined();
     const regexp =
       /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
-    expect(error!.message).toMatch(regexp);
+    expect(error!.cause.message).toMatch(regexp);
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleError).toBeCalledTimes(0);
   });
@@ -183,14 +185,15 @@ describe("errors and promises", () => {
       }
     }
 
-    let error: Error;
+    let error: OwlError;
     try {
       await mount(App, fixture);
     } catch (e) {
-      error = e as Error;
+      error = e as OwlError;
     }
     expect(error!).toBeDefined();
-    expect(error!.message).toBe("boom");
+    expect(error!.cause).toBeDefined();
+    expect(error!.cause.message).toBe("boom");
     expect(fixture.innerHTML).toBe("");
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleWarn).toBeCalledTimes(1);
@@ -264,6 +267,30 @@ describe("errors and promises", () => {
     expect(error!.message).toBe("Tokenizer error: could not tokenize `{ 'invalid: 5 }`");
   });
 
+  test("wrapped errors in async code are correctly caught", async () => {
+    class Root extends Component {
+      static template = xml`<div>abc</div>`;
+      setup() {
+        onWillStart(async () => {
+          await Promise.resolve();
+          throw new Error("boom in onWillStart");
+        });
+      }
+    }
+
+    let error: any;
+    try {
+      await mount(Root, fixture, { test: true });
+    } catch (e) {
+      error = e;
+    }
+    expect(error!).toBeDefined();
+    expect(error!.message).toBe(
+      `The following error occurred in onWillStart: "boom in onWillStart"`
+    );
+    await new Promise((r) => setTimeout(r, 0)); // wait for the rejection event to bubble
+  });
+
   test("an error in willPatch call will reject the render promise", async () => {
     class Root extends Component {
       static template = xml`<div><t t-esc="val"/></div>`;
@@ -320,16 +347,17 @@ describe("errors and promises", () => {
       static components = { Child };
     }
 
-    let error: Error;
+    let error: OwlError;
     try {
       await mount(App, fixture);
     } catch (e) {
-      error = e as Error;
+      error = e as OwlError;
     }
     expect(error!).toBeDefined();
+    expect(error!.cause).toBeDefined();
     const regexp =
       /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
-    expect(error!.message).toMatch(regexp);
+    expect(error!.cause.message).toMatch(regexp);
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
@@ -339,7 +367,7 @@ describe("errors and promises", () => {
       static template = xml`<div><t t-if="flag" t-esc="this.will.crash"/></div>`;
       flag = false;
       setup() {
-        onError((e) => (error = e));
+        onError(({ cause }) => (error = cause));
       }
     }
 
@@ -366,16 +394,17 @@ describe("errors and promises", () => {
       static components = { Child };
     }
 
-    let error: Error;
+    let error: OwlError;
     try {
       await mount(Parent, fixture);
     } catch (e) {
-      error = e as Error;
+      error = e as OwlError;
     }
     expect(error!).toBeDefined();
+    expect(error!.cause).toBeDefined();
     const regexp =
       /Cannot read properties of undefined \(reading 'y'\)|Cannot read property 'y' of undefined/g;
-    expect(error!.message).toMatch(regexp);
+    expect(error!.cause.message).toMatch(regexp);
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
@@ -482,6 +511,146 @@ describe("can catch errors", () => {
     );
   });
 
+  test("Errors have the right cause", async () => {
+    const err = new Error("test error");
+    class Root extends Component {
+      static template = xml`<t t-esc="state.value"/>`;
+      state = useState({ value: 1 });
+
+      setup() {
+        onMounted(() => {
+          throw err;
+        });
+      }
+    }
+    let e: OwlError;
+    try {
+      await mount(Root, fixture, { test: true });
+    } catch (error) {
+      e = error as OwlError;
+    }
+    expect(e!.message).toBe(`The following error occurred in onMounted: "test error"`);
+    expect(e!.cause).toBe(err);
+  });
+
+  test("Errors in owl lifecycle are wrapped in dev mode: async hook", async () => {
+    const err = new Error("test error");
+    class Root extends Component {
+      static template = xml`<t t-esc="state.value"/>`;
+      state = useState({ value: 1 });
+
+      setup() {
+        onWillStart(async () => {
+          await nextMicroTick();
+          throw err;
+        });
+      }
+    }
+    let e: OwlError;
+    try {
+      await mount(Root, fixture, { test: true });
+    } catch (error) {
+      e = error as OwlError;
+    }
+    expect(e!.message).toBe(`The following error occurred in onWillStart: "test error"`);
+    expect(e!.cause).toBe(err);
+  });
+
+  test("Errors in owl lifecycle are wrapped outside dev mode: sync hook", async () => {
+    const err = new Error("test error");
+    class Root extends Component {
+      static template = xml`<t t-esc="state.value"/>`;
+      state = useState({ value: 1 });
+
+      setup() {
+        onMounted(() => {
+          throw err;
+        });
+      }
+    }
+    let e: OwlError;
+    try {
+      await mount(Root, fixture);
+    } catch (error) {
+      e = error as OwlError;
+    }
+    expect(e!.message).toBe(
+      `An error occured in the owl lifecycle (see this Error's "cause" property)`
+    );
+    expect(e!.cause).toBe(err);
+  });
+
+  test("Errors in owl lifecycle are wrapped out of dev mode: async hook", async () => {
+    const err = new Error("test error");
+    class Root extends Component {
+      static template = xml`<t t-esc="state.value"/>`;
+      state = useState({ value: 1 });
+
+      setup() {
+        onWillStart(async () => {
+          await nextMicroTick();
+          throw err;
+        });
+      }
+    }
+    let e: OwlError;
+    try {
+      await mount(Root, fixture);
+    } catch (error) {
+      e = error as OwlError;
+    }
+    expect(e!.message).toBe(
+      `An error occured in the owl lifecycle (see this Error's "cause" property)`
+    );
+    expect(e!.cause).toBe(err);
+  });
+
+  test("Thrown values that are not errors are wrapped in dev mode", async () => {
+    class Root extends Component {
+      static template = xml`<t t-esc="state.value"/>`;
+      state = useState({ value: 1 });
+
+      setup() {
+        onMounted(() => {
+          throw "This is not an error";
+        });
+      }
+    }
+    let e: OwlError;
+    try {
+      await mount(Root, fixture, { test: true });
+    } catch (error) {
+      e = error as OwlError;
+    }
+    expect(e!.message).toBe(
+      `Something that is not an Error was thrown in onMounted (see this Error's "cause" property)`
+    );
+    expect(e!.cause).toBe("This is not an error");
+  });
+
+  test("Thrown values that are not errors are wrapped outside dev mode", async () => {
+    class Root extends Component {
+      static template = xml`<t t-esc="state.value"/>`;
+      state = useState({ value: 1 });
+
+      setup() {
+        onMounted(() => {
+          throw "This is not an error";
+        });
+      }
+    }
+    let e: OwlError;
+    try {
+      await mount(Root, fixture);
+    } catch (error) {
+      e = error as OwlError;
+    }
+    expect(e!.message).toBe(
+      `An error occured in the owl lifecycle (see this Error's "cause" property)`
+    );
+    expect(e!.cause).toBe("This is not an error");
+  });
+
   test("can catch an error in the initial call of a component render function (parent mounted)", async () => {
     class ErrorComponent extends Component {
       static template = xml`<div>hey<t t-esc="state.this.will.crash"/></div>`;
@@ -1180,8 +1349,8 @@ describe("can catch errors", () => {
     class Catch extends Component {
       static template = xml`<t t-slot="default" />`;
       setup() {
-        onError((error) => {
-          this.props.onError(error);
+        onError(({ cause }) => {
+          this.props.onError(cause);
         });
       }
     }

tests/components/event_handling.test.ts

@@ -171,4 +171,22 @@ describe("event handling", () => {
     // input is removed when component is destroyed => nothing should happen
     expect([]).toBeLogged();
   });
+
+  test("handler works when app is mounted in an iframe", async () => {
+    let clickCount = 0;
+
+    class Parent extends Component {
+      static template = xml`<span t-on-click="inc">click me</span>`;
+      inc() {
+        clickCount++;
+      }
+    }
+    const iframe = document.createElement("iframe");
+    fixture.appendChild(iframe);
+    const iframeDoc = iframe.contentDocument!;
+    await mount(Parent, iframeDoc.body);
+    expect(clickCount).toBe(0);
+    iframeDoc.querySelector("span")!.click();
+    expect(clickCount).toBe(1);
+  });
 });

tests/components/hooks.test.ts

@@ -653,7 +653,7 @@ describe("hooks", () => {
       try {
         await mount(MyComponent, fixture);
       } catch (e: any) {
-        expect(e.message).toBe("Intentional error");
+        expect(e.cause.message).toBe("Intentional error");
       }
       // no console.error because the error has been caught in this test
       expect(console.error).toHaveBeenCalledTimes(0);

tests/components/slots.test.ts

@@ -1819,4 +1819,102 @@ describe("slots", () => {
     await nextTick();
     expect(fixture.innerHTML).toBe("<button>inc</button>[B][C][A][sub1] [sub2334]");
   });
+
+  test("slot in multiple locations", async () => {
+    class Child extends Component {
+      static template = xml`<div>child</div>`;
+    }
+
+    class Slotter extends Component {
+      static components = { Child };
+      static template = xml`
+          <t t-if="props.location === 1">
+            <p><t t-slot="default"/></p>
+          </t>
+          <t t-if="props.location === 2">
+            <t t-slot="default"/>
+          </t>
+      `;
+    }
+
+    class Parent extends Component {
+      static components = { Child, Slotter };
+      static template = xml`
+         <Slotter location="state.location">
+          hello <Child/>
+         </Slotter>`;
+      state = useState({ location: 1 });
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<p> hello <div>child</div></p>");
+    parent.state.location = 2;
+    await nextTick();
+    expect(fixture.innerHTML).toBe(" hello <div>child</div>");
+  });
+
+  test("dynamic slot in multiple locations", async () => {
+    class Child extends Component {
+      static template = xml`<div>child</div>`;
+    }
+
+    class Slotter extends Component {
+      static components = { Child };
+      static template = xml`
+          <t t-if="props.location === 1">
+            <p><t t-slot="{{'coffee'}}"/></p>
+          </t>
+          <t t-if="props.location === 2">
+            <t t-slot="{{'coffee'}}"/>
+          </t>
+      `;
+    }
+
+    class Parent extends Component {
+      static components = { Child, Slotter };
+      static template = xml`
+         <Slotter location="state.location">
+          <t t-set-slot="coffee">hello <Child/></t>
+         </Slotter>`;
+      state = useState({ location: 1 });
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<p>hello <div>child</div></p>");
+    parent.state.location = 2;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("hello <div>child</div>");
+  });
+
+  test("slot in t-foreach locations", async () => {
+    class Child extends Component {
+      static template = xml`<div>child</div>`;
+    }
+
+    class Slotter extends Component {
+      static components = { Child };
+      static template = xml`
+          <t t-foreach="props.list" t-as="elem" t-key="elem_index">
+            <p><t t-esc="elem"/><t t-slot="default"/></p>
+          </t>
+      `;
+    }
+
+    class Parent extends Component {
+      static components = { Child, Slotter };
+      static template = xml`
+         <Slotter list="state.list">
+          hello <Child/>
+         </Slotter>`;
+      state = useState({ list: [1] });
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<p>1 hello <div>child</div></p>");
+    parent.state.list.push(2);
+    await nextTick();
+    expect(fixture.innerHTML).toBe(
+      "<p>1 hello <div>child</div></p><p>2 hello <div>child</div></p>"
+    );
+  });
 });

tests/components/style_class.test.ts

@@ -1,3 +1,4 @@
+import { OwlError } from "../../src/runtime/error_handling";
 import { Component, mount, onMounted, useState, xml } from "../../src";
 import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 
@@ -346,16 +347,17 @@ describe("style and class handling", () => {
       static template = xml`<Child class="'a'"/>`;
       static components = { Child };
     }
-    let error: Error;
+    let error: OwlError;
     try {
       await mount(ParentWidget, fixture);
     } catch (e) {
-      error = e as Error;
+      error = e as OwlError;
     }
     expect(error!).toBeDefined();
+    expect(error!.cause).toBeDefined();
     const regexp =
       /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
-    expect(error!.message).toMatch(regexp);
+    expect(error!.cause.message).toMatch(regexp);
     expect(fixture.innerHTML).toBe("");
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });

tests/helpers.ts

@@ -19,6 +19,7 @@ import { helpers } from "../src/runtime/template_helpers";
 import { TemplateSet, globalTemplates } from "../src/runtime/template_set";
 import { BDom } from "../src/runtime/blockdom";
 import { compile } from "../src/compiler";
+import { OwlError } from "../src/runtime/error_handling";
 
 const mount = blockDom.mount;
 
@@ -221,7 +222,7 @@ export async function editInput(input: HTMLInputElement | HTMLTextAreaElement, v
 afterEach(() => {
   if (steps.length) {
     steps.splice(0);
-    throw new Error("Remaining steps! Should be checked by a .toBeLogged() assertion!");
+    throw new OwlError("Remaining steps! Should be checked by a .toBeLogged() assertion!");
   }
 });
 

tests/misc/portal.test.ts

@@ -1,3 +1,4 @@
+import { OwlError } from "../../src/runtime/error_handling";
 import {
   App,
   Component,
@@ -499,7 +500,7 @@ describe("Portal", () => {
         </div>`;
       state = { error: false };
       setup() {
-        onError((e) => (error = e));
+        onError(({ cause }) => (error = cause));
       }
     }
     addOutsideDiv(fixture);
@@ -958,14 +959,15 @@ describe("Portal: Props validation", () => {
           </t>
         </div>`;
     }
-    let error: Error;
+    let error: OwlError;
     try {
       await mount(Parent, fixture, { dev: true });
     } catch (e) {
-      error = e as Error;
+      error = e as OwlError;
     }
     expect(error!).toBeDefined();
-    expect(error!.message).toBe(`' ' is not a valid selector`);
+    expect(error!.cause).toBeDefined();
+    expect(error!.cause.message).toBe(`' ' is not a valid selector`);
   });
 
   test("target must be a valid selector 2", async () => {