[FIX] portal: correctly mount portal content in target created by mount

Previously, blah blah blah
[FIX] blockdom: correctly reorder children in heterogeneous t-foreach
2025-10-06 19:59:41 +07:00 · 2022-10-19 14:50:13 +02:00 · 2022-10-19 13:13:49 +02:00 · 2022-10-10 20:33:18 +02:00 · 2022-10-10 13:53:11 +02:00 · 2022-10-07 15:27:58 +02:00
93 changed files with 4006 additions and 6180 deletions
@@ -124,5 +124,5 @@ npm install @odoo/owl
 If you want to use a simple `<script>` tag, the last release can be downloaded here:
- [owl-1.4.10](https://github.com/odoo/owl/releases/tag/v1.4.10)
+- [owl](https://github.com/odoo/owl/releases/latest)
@@ -770,10 +770,11 @@ For reference, here is the final code:
    <meta charset="UTF-8" />
    <title>OWL Todo App</title>
    <link rel="stylesheet" href="app.css" />
  </head>
  <body>
    <script src="owl.js"></script>
    <script src="app.js"></script>
-  </head>
+  </body>
  <body></body>
 </html>
 ```
@@ -234,7 +234,8 @@ are defined by a function instead of just the dependencies.
 The `useEffect` hook takes two function: the effect function and the dependency
 function. The effect function perform some task and return (optionally) a cleanup
-function. The dependency function returns a list of dependencies. If any of these
+function. The dependency function returns a list of dependencies, these dependencies
 are passed as parameters in the effect function . If any of these
 dependencies changes, then the current effect will be cleaned up and reexecuted.
 Here is an example without any dependencies:
@@ -1,9 +1,8 @@
 {
  "name": "@odoo/owl",
-  "version": "2.0.0-beta-12",
+  "version": "2.0.0",
  "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": [
@@ -1,28 +1,9 @@
 # 🦉 OWL Roadmap 🦉
- Current version: 1.4.10
+- Current version: 2.X
 - Status: stable
-This roadmap is only an attempt at predicting Owl's future.  Everything may
+Owl is currently stable. No (large) improvements is expected in the near future.
 change!
 ### 1.x
 - add chrome and firefox devtools,
 - fix every bugs,
 - improve documentation,
 - small backward compatible improvements.
 ### 2.x (2020? 2021? 2022?)
 - stop support for `t-set` directive to define the content of a slot
 Maybe:
 - reimplement vdom to use *block* system, like Vue 3, which should make Owl
  much faster
 - refactor `QWeb` to use an intermediate representation (some kind of AST) to
  allow additional optimisations.
 Note that we intend to keep maintaining owl, and as such, improvements and/or
 breaking changes may require a version bump in the future.
@@ -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('esm', addSuffix(ES_FILENAME,  'runtime'), outro),
-      getConfigForFormat('cjs', addSuffix(pkg.main,  'runtime'), outro),
+      getConfigForFormat('cjs', addSuffix(CJS_FILENAME,  'runtime'), outro),
-      getConfigForFormat('iife', addSuffix(pkg.browser,  'runtime'), outro),
+      getConfigForFormat('iife', addSuffix(IIFE_FILENAME,  'runtime'), outro),
-      getConfigForFormat('iife', addSuffix(pkg.browser,  'runtime'), outro, true),
+      getConfigForFormat('iife', addSuffix(IIFE_FILENAME,  'runtime'), outro, true),
    ]
    break;
  default:
    input = "src/index.ts",
    output = [
-      getConfigForFormat('esm', pkg.module, outro),
+      getConfigForFormat('esm', ES_FILENAME, outro),
-      getConfigForFormat('cjs', pkg.main, outro),
+      getConfigForFormat('cjs', CJS_FILENAME, outro),
-      getConfigForFormat('iife', pkg.browser, outro),
+      getConfigForFormat('iife', IIFE_FILENAME, outro),
-      getConfigForFormat('iife', pkg.browser, outro, true),
+      getConfigForFormat('iife', IIFE_FILENAME, outro, true),
    ]
  }
@@ -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";
@@ -212,6 +214,14 @@ class CodeTarget {
    result.push(`}`);
    return result.join("\n  ");
  }
  currentKey(ctx: Context) {
    let key = this.loopLevel ? `key${this.loopLevel}` : "key";
    if (ctx.tKeyExpr) {
      key = `${ctx.tKeyExpr} + ${key}`;
    }
    return key;
  }
 }
 const TRANSLATABLE_ATTRS = ["label", "title", "placeholder", "alt"];
@@ -230,6 +240,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) {
@@ -362,19 +373,15 @@ export class CodeGenerator {
  insertBlock(expression: string, block: BlockDescription, ctx: Context): void {
    let blockExpr = block.generateExpr(expression);
    const tKeyExpr = ctx.tKeyExpr;
    if (block.parentVar) {
-      let keyArg = `key${this.target.loopLevel}`;
+      let key = this.target.currentKey(ctx);
      if (tKeyExpr) {
        keyArg = `${tKeyExpr} + ${keyArg}`;
      }
      this.helpers.add("withKey");
-      this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${keyArg});`);
+      this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${key});`);
      return;
    }
-    if (tKeyExpr) {
+    if (ctx.tKeyExpr) {
-      blockExpr = `toggler(${tKeyExpr}, ${blockExpr})`;
+      blockExpr = `toggler(${ctx.tKeyExpr}, ${blockExpr})`;
    }
    if (block.isRoot && !ctx.preventRoot) {
@@ -421,78 +428,66 @@ export class CodeGenerator {
      .join("");
  }
-  compileAST(ast: AST, ctx: Context) {
+  /**
   * @returns the newly created block name, if any
   */
  compileAST(ast: AST, ctx: Context): string | null {
    switch (ast.type) {
      case ASTType.Comment:
-        this.compileComment(ast, ctx);
+        return this.compileComment(ast, ctx);
        break;
      case ASTType.Text:
-        this.compileText(ast, ctx);
+        return this.compileText(ast, ctx);
        break;
      case ASTType.DomNode:
-        this.compileTDomNode(ast, ctx);
+        return this.compileTDomNode(ast, ctx);
        break;
      case ASTType.TEsc:
-        this.compileTEsc(ast, ctx);
+        return this.compileTEsc(ast, ctx);
        break;
      case ASTType.TOut:
-        this.compileTOut(ast, ctx);
+        return this.compileTOut(ast, ctx);
        break;
      case ASTType.TIf:
-        this.compileTIf(ast, ctx);
+        return this.compileTIf(ast, ctx);
        break;
      case ASTType.TForEach:
-        this.compileTForeach(ast, ctx);
+        return this.compileTForeach(ast, ctx);
        break;
      case ASTType.TKey:
-        this.compileTKey(ast, ctx);
+        return this.compileTKey(ast, ctx);
        break;
      case ASTType.Multi:
-        this.compileMulti(ast, ctx);
+        return this.compileMulti(ast, ctx);
        break;
      case ASTType.TCall:
-        this.compileTCall(ast, ctx);
+        return this.compileTCall(ast, ctx);
        break;
      case ASTType.TCallBlock:
-        this.compileTCallBlock(ast, ctx);
+        return this.compileTCallBlock(ast, ctx);
        break;
      case ASTType.TSet:
-        this.compileTSet(ast, ctx);
+        return this.compileTSet(ast, ctx);
        break;
      case ASTType.TComponent:
-        this.compileComponent(ast, ctx);
+        return this.compileComponent(ast, ctx);
        break;
      case ASTType.TDebug:
-        this.compileDebug(ast, ctx);
+        return this.compileDebug(ast, ctx);
        break;
      case ASTType.TLog:
-        this.compileLog(ast, ctx);
+        return this.compileLog(ast, ctx);
        break;
      case ASTType.TSlot:
-        this.compileTSlot(ast, ctx);
+        return this.compileTSlot(ast, ctx);
        break;
      case ASTType.TTranslation:
-        this.compileTTranslation(ast, ctx);
+        return this.compileTTranslation(ast, ctx);
        break;
      case ASTType.TPortal:
-        this.compileTPortal(ast, ctx);
+        return this.compileTPortal(ast, ctx);
    }
  }
-  compileDebug(ast: ASTDebug, ctx: Context) {
+  compileDebug(ast: ASTDebug, ctx: Context): string | null {
    this.addLine(`debugger;`);
    if (ast.content) {
-      this.compileAST(ast.content, ctx);
+      return this.compileAST(ast.content, ctx);
    }
    return null;
  }
-  compileLog(ast: ASTLog, ctx: Context) {
+  compileLog(ast: ASTLog, ctx: Context): string | null {
    this.addLine(`console.log(${compileExpr(ast.expr)});`);
    if (ast.content) {
-      this.compileAST(ast.content, ctx);
+      return this.compileAST(ast.content, ctx);
    }
    return null;
  }
-  compileComment(ast: ASTComment, ctx: Context) {
+  compileComment(ast: ASTComment, ctx: Context): string {
    let { block, forceNewBlock } = ctx;
    const isNewBlock = !block || forceNewBlock;
    if (isNewBlock) {
@@ -505,9 +500,10 @@ export class CodeGenerator {
      const text = xmlDoc.createComment(ast.value);
      block!.insert(text);
    }
    return block!.varName;
  }
-  compileText(ast: ASTText, ctx: Context) {
+  compileText(ast: ASTText, ctx: Context): string {
    let { block, forceNewBlock } = ctx;
    let value = ast.value;
@@ -526,6 +522,7 @@ export class CodeGenerator {
      const createFn = ast.type === ASTType.Text ? xmlDoc.createTextNode : xmlDoc.createComment;
      block.insert(createFn.call(xmlDoc, value));
    }
    return block.varName;
  }
  generateHandlerCode(rawEvent: string, handler: string): string {
@@ -534,7 +531,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}"`;
      });
@@ -545,7 +542,7 @@ export class CodeGenerator {
    return `[${modifiersCode}${this.captureExpression(handler)}, ctx]`;
  }
-  compileTDomNode(ast: ASTDomNode, ctx: Context) {
+  compileTDomNode(ast: ASTDomNode, ctx: Context): string {
    let { block, forceNewBlock } = ctx;
    const isNewBlock = !block || forceNewBlock || ast.dynamicTag !== null || ast.ns;
    let codeIdx = this.target.code.length;
@@ -578,13 +575,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]);
@@ -723,9 +729,10 @@ export class CodeGenerator {
        this.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
      }
    }
    return block!.varName;
  }
-  compileTEsc(ast: ASTTEsc, ctx: Context) {
+  compileTEsc(ast: ASTTEsc, ctx: Context): string {
    let { block, forceNewBlock } = ctx;
    let expr: string;
    if (ast.expr === "0") {
@@ -746,9 +753,10 @@ export class CodeGenerator {
      const text = xmlDoc.createElement(`block-text-${idx}`);
      block.insert(text);
    }
    return block.varName;
  }
-  compileTOut(ast: ASTTOut, ctx: Context) {
+  compileTOut(ast: ASTTOut, ctx: Context): string {
    let { block } = ctx;
    if (block) {
      this.insertAnchor(block);
@@ -770,6 +778,7 @@ export class CodeGenerator {
      blockStr = `safeOutput(${compileExpr(ast.expr)})`;
    }
    this.insertBlock(blockStr, block, ctx);
    return block.varName;
  }
  compileTIfBranch(content: AST, block: BlockDescription, ctx: Context) {
@@ -783,7 +792,7 @@ export class CodeGenerator {
    this.target.indentLevel--;
  }
-  compileTIf(ast: ASTTif, ctx: Context, nextNode?: ASTDomNode) {
+  compileTIf(ast: ASTTif, ctx: Context, nextNode?: ASTDomNode): string {
    let { block, forceNewBlock } = ctx;
    const codeIdx = this.target.code.length;
    const isNewBlock = !block || (block.type !== "multi" && forceNewBlock);
@@ -826,9 +835,10 @@ export class CodeGenerator {
      const args = block!.children.map((c) => c.varName).join(", ");
      this.insertBlock(`multi([${args}])`, block!, ctx)!;
    }
    return block.varName;
  }
-  compileTForeach(ast: ASTTForEach, ctx: Context) {
+  compileTForeach(ast: ASTTForEach, ctx: Context): string {
    let { block } = ctx;
    if (block) {
      this.insertAnchor(block);
@@ -865,10 +875,11 @@ 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(String(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});`);
+      this.addLine(`keys${block.id}.add(String(key${this.target.loopLevel}));`);
    }
    let id: string;
    if (ast.memo) {
@@ -905,9 +916,10 @@ export class CodeGenerator {
      this.addLine(`ctx = ctx.__proto__;`);
    }
    this.insertBlock("l", block, ctx);
    return block.varName;
  }
-  compileTKey(ast: ASTTKey, ctx: Context) {
+  compileTKey(ast: ASTTKey, ctx: Context): string | null {
    const tKeyExpr = generateId("tKey_");
    this.define(tKeyExpr, compileExpr(ast.expr));
    ctx = createContext(ctx, {
@@ -915,20 +927,22 @@ export class CodeGenerator {
      block: ctx.block,
      index: ctx.index,
    });
-    this.compileAST(ast.content, ctx);
+    return this.compileAST(ast.content, ctx);
  }
-  compileMulti(ast: ASTMulti, ctx: Context) {
+  compileMulti(ast: ASTMulti, ctx: Context): string | null {
    let { block, forceNewBlock } = ctx;
    const isNewBlock = !block || forceNewBlock;
    let codeIdx = this.target.code.length;
    if (isNewBlock) {
      const n = ast.content.filter((c) => c.type !== ASTType.TSet).length;
      let result: string | null = null;
      if (n <= 1) {
        for (let child of ast.content) {
-          this.compileAST(child, ctx);
+          const blockName = this.compileAST(child, ctx);
          result = result || blockName;
        }
-        return;
+        return result;
      }
      block = this.createBlock(block, "multi", ctx);
    }
@@ -968,9 +982,10 @@ export class CodeGenerator {
      const args = block!.children.map((c) => c.varName).join(", ");
      this.insertBlock(`multi([${args}])`, block!, ctx)!;
    }
    return block!.varName;
  }
-  compileTCall(ast: ASTTCall, ctx: Context) {
+  compileTCall(ast: ASTTCall, ctx: Context): string {
    let { block, forceNewBlock } = ctx;
    let ctxVar = ctx.ctxVar || "ctx";
    if (ast.context) {
@@ -981,12 +996,11 @@ export class CodeGenerator {
      this.addLine(`${ctxVar} = Object.create(${ctxVar});`);
      this.addLine(`${ctxVar}[isBoundary] = 1;`);
      this.helpers.add("isBoundary");
      const nextId = BlockDescription.nextBlockId;
      const subCtx = createContext(ctx, { preventRoot: true, ctxVar });
-      this.compileAST({ type: ASTType.Multi, content: ast.body }, subCtx);
+      const bl = this.compileMulti({ type: ASTType.Multi, content: ast.body }, subCtx);
-      if (nextId !== BlockDescription.nextBlockId) {
+      if (bl) {
        this.helpers.add("zero");
-        this.addLine(`${ctxVar}[zero] = b${nextId};`);
+        this.addLine(`${ctxVar}[zero] = ${bl};`);
      }
    }
    const isDynamic = INTERP_REGEXP.test(ast.name);
@@ -1020,9 +1034,10 @@ export class CodeGenerator {
    if (ast.body && !ctx.isLast) {
      this.addLine(`${ctxVar} = ${ctxVar}.__proto__;`);
    }
    return block.varName;
  }
-  compileTCallBlock(ast: ASTTCallBlock, ctx: Context) {
+  compileTCallBlock(ast: ASTTCallBlock, ctx: Context): string {
    let { block, forceNewBlock } = ctx;
    if (block) {
      if (!forceNewBlock) {
@@ -1031,9 +1046,10 @@ export class CodeGenerator {
    }
    block = this.createBlock(block, "multi", ctx);
    this.insertBlock(compileExpr(ast.name), block, { ...ctx, forceNewBlock: !block });
    return block.varName;
  }
-  compileTSet(ast: ASTTSet, ctx: Context) {
+  compileTSet(ast: ASTTSet, ctx: Context): null {
    this.target.shouldProtectScope = true;
    this.helpers.add("isBoundary").add("withDefault");
    const expr = ast.value ? compileExpr(ast.value || "") : "null";
@@ -1041,7 +1057,8 @@ export class CodeGenerator {
      this.helpers.add("LazyValue");
      const bodyAst: AST = { type: ASTType.Multi, content: ast.body };
      const name = this.compileInNewTarget("value", bodyAst, ctx);
-      let value = `new LazyValue(${name}, ctx, this, node)`;
+      let key = this.target.currentKey(ctx);
      let value = `new LazyValue(${name}, ctx, this, node, ${key})`;
      value = ast.value ? (value ? `withDefault(${expr}, ${value})` : expr) : value;
      this.addLine(`ctx[\`${ast.name}\`] = ${value};`);
    } else {
@@ -1058,6 +1075,7 @@ export class CodeGenerator {
      this.helpers.add("setContextValue");
      this.addLine(`setContextValue(${ctx.ctxVar || "ctx"}, "${ast.name}", ${value});`);
    }
    return null;
  }
  generateComponentKey() {
@@ -1088,7 +1106,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}'`;
@@ -1109,7 +1127,7 @@ export class CodeGenerator {
    return propString;
  }
-  compileComponent(ast: ASTComponent, ctx: Context) {
+  compileComponent(ast: ASTComponent, ctx: Context): string {
    let { block } = ctx;
    // props
    const hasSlotsProp = "slots" in (ast.props || {});
@@ -1175,7 +1193,7 @@ export class CodeGenerator {
    }
    if (this.dev) {
-      this.addLine(`helpers.validateProps(${expr}, ${propVar!}, ctx);`);
+      this.addLine(`helpers.validateProps(${expr}, ${propVar!}, this);`);
    }
    if (block && (ctx.forceNewBlock === false || ctx.tKeyExpr)) {
@@ -1209,6 +1227,7 @@ export class CodeGenerator {
    block = this.createBlock(block, "multi", ctx);
    this.insertBlock(blockExpr, block, ctx);
    return block.varName;
  }
  wrapWithEventCatcher(expr: string, on: EventHandlers): string {
@@ -1227,34 +1246,43 @@ export class CodeGenerator {
    return `${name}(${expr}, [${handlers.join(",")}])`;
  }
-  compileTSlot(ast: ASTSlot, ctx: Context) {
+  compileTSlot(ast: ASTSlot, ctx: Context): string {
    this.helpers.add("callSlot");
    let { block } = ctx;
    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
@@ -1267,14 +1295,16 @@ export class CodeGenerator {
    }
    block = this.createBlock(block, "multi", ctx);
    this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
    return block.varName;
  }
-  compileTTranslation(ast: ASTTranslation, ctx: Context) {
+  compileTTranslation(ast: ASTTranslation, ctx: Context): string | null {
    if (ast.content) {
-      this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
+      return this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
    }
    return null;
  }
-  compileTPortal(ast: ASTTPortal, ctx: Context) {
+  compileTPortal(ast: ASTTPortal, ctx: Context): string {
    if (!this.staticDefs.find((d) => d.id === "Portal")) {
      this.staticDefs.push({ id: "Portal", expr: `app.Portal` });
    }
@@ -1301,5 +1331,6 @@ export class CodeGenerator {
    }
    block = this.createBlock(block, "multi", ctx);
    this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
    return block.varName;
  }
 }
@@ -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;
 }
@@ -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}>)`
        );
      }
@@ -771,8 +781,9 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
    // default slot
    const defaultContent = parseChildNodes(clone, ctx);
-    if (defaultContent) {
+    slots = slots || {};
-      slots = slots || {};
+    // t-set-slot="default" has priority over content
    if (defaultContent && !slots.default) {
      slots.default = { content: defaultContent, on, attrs: null, scope: defaultSlotScope };
    }
  }
@@ -900,7 +911,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 +920,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 +953,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 +1007,7 @@ function parseXML(xml: string): XMLDocument {
        }
      }
    }
-    throw new Error(msg);
+    throw new OwlError(msg);
  }
  return doc;
@@ -1,11 +1,12 @@
 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";
 import { TemplateSet, TemplateSetConfig } from "./template_set";
 import { validateTarget } from "./utils";
 import { handleError } from "./error_handling";
 // reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f
@@ -94,9 +95,7 @@ export class App<
        nodeErrorHandlers.set(node, handlers);
      }
      handlers.unshift((e) => {
-        if (isResolved) {
+        if (!isResolved) {
          console.error(e);
        } else {
          reject(e);
        }
        throw e;
@@ -154,9 +153,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`
            );
          }
@@ -169,6 +168,10 @@ export class App<
      return node;
    };
  }
  handleError(...args: Parameters<typeof handleError>) {
    return handleError(...args);
  }
 }
 export async function mount<
@@ -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() : "";
  };
 }
@@ -1,3 +1,4 @@
 import { OwlError } from "../error_handling";
 import {
  attrsSetter,
  attrsUpdater,
@@ -156,6 +157,15 @@ function buildTree(
          : document.createElement(tagName);
      }
      if (el instanceof Element) {
        if (!domParentTree) {
          // some html elements may have side effects when setting their attributes.
          // For example, setting the src attribute of an <img/> will trigger a
          // request to get the corresponding image. This is something that we
          // don't want at compile time. We avoid that by putting the content of
          // the block in a <template/> element
          const fragment = document.createElement("template").content;
          fragment.appendChild(el);
        }
        for (let i = 0; i < attrs.length; i++) {
          const attrName = attrs[i].name;
          const attrValue = attrs[i].value;
@@ -245,7 +255,7 @@ function buildTree(
      };
    }
  }
-  throw new Error("boom");
+  throw new OwlError("boom");
 }
 function addRef(tree: IntermediateTree) {
@@ -507,9 +517,12 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
      return this.el!;
    }
-    moveBefore(other: Block | null, afterNode: Node | null) {
+    moveBeforeDOMNode(node: Node | null) {
-      const target = other ? other.el! : afterNode;
+      nodeInsertBefore.call(this.parentEl, this.el!, node);
-      nodeInsertBefore.call(this.parentEl, this.el!, target);
+    }
    moveBeforeVNode(other: Block | null, afterNode: Node | null) {
      nodeInsertBefore.call(this.parentEl, this.el!, other ? other.el! : afterNode);
    }
    toString() {
@@ -56,8 +56,17 @@ export function createCatcher(eventsSpec: EventsSpec): Catcher {
      }
    }
-    moveBefore(other: VCatcher | null, afterNode: Node | null) {
+    moveBeforeDOMNode(node: Node | null) {
-      this.child.moveBefore(other ? other.child : null, afterNode);
+      this.child.moveBeforeDOMNode(node);
      this.parentEl!.insertBefore(this.afterNode!, node);
    }
    moveBeforeVNode(other: VCatcher | null, afterNode: Node | null) {
      if (other) {
        // check this with @ged-odoo for use in foreach
        afterNode = other.firstNode() || afterNode;
      }
      this.child.moveBeforeVNode(other ? other.child : null, afterNode);
      this.parentEl!.insertBefore(this.afterNode!, afterNode);
    }
@@ -27,8 +27,8 @@ function createElementHandler(evName: string, capture: boolean = false): EventHa
  }
  function listener(ev: Event) {
-    const currentTarget = ev.currentTarget;
+    const currentTarget = ev.currentTarget as HTMLElement;
-    if (!currentTarget || !document.contains(currentTarget as HTMLElement)) return;
+    if (!currentTarget || !currentTarget.ownerDocument.contains(currentTarget)) return;
    const data = (currentTarget as any)[eventKey];
    if (!data) return;
    config.mainEventHandler(data, ev, currentTarget);
@@ -29,14 +29,18 @@ class VHtml {
    }
  }
-  moveBefore(other: VHtml | null, afterNode: Node | null) {
+  moveBeforeDOMNode(node: Node | null) {
    const target = other ? other.content[0] : afterNode;
    const parent = this.parentEl;
    for (let elem of this.content) {
-      nodeInsertBefore.call(parent, elem, target);
+      nodeInsertBefore.call(parent, elem, node);
    }
  }
  moveBeforeVNode(other: VHtml | null, afterNode: Node | null) {
    const target = other ? other.content[0] : afterNode;
    this.moveBeforeDOMNode(target);
  }
  patch(other: VHtml) {
    if (this === other) {
      return;
@@ -10,7 +10,8 @@ export { createCatcher } from "./event_catcher";
 export interface VNode<T = any> {
  mount(parent: HTMLElement, afterNode: Node | null): void;
-  moveBefore(other: T | null, afterNode: Node | null): void;
+  moveBeforeDOMNode(node: Node | null): void;
  moveBeforeVNode(other: T | null, afterNode: Node | null): void;
  patch(other: T, withBeforeRemove: boolean): void;
  beforeRemove(): void;
  remove(): void;
@@ -38,14 +38,22 @@ class VList {
    this.parentEl = parent;
  }
-  moveBefore(other: VList | null, afterNode: Node | null) {
+  moveBeforeDOMNode(node: Node | null) {
    const children = this.children;
    for (let i = 0, l = children.length; i < l; i++) {
      children[i].moveBeforeDOMNode(node);
    }
    this.parentEl!.insertBefore(this.anchor!, node);
  }
  moveBeforeVNode(other: VList | null, afterNode: Node | null) {
    if (other) {
      const next = other!.children[0];
      afterNode = (next ? next.firstNode() : other!.anchor) || null;
    }
    const children = this.children;
    for (let i = 0, l = children.length; i < l; i++) {
-      children[i].moveBefore(null, afterNode);
+      children[i].moveBeforeVNode(null, afterNode);
    }
    this.parentEl!.insertBefore(this.anchor!, afterNode);
  }
@@ -66,7 +74,7 @@ class VList {
      patch: cPatch,
      remove: cRemove,
      beforeRemove,
-      moveBefore: cMoveBefore,
+      moveBeforeVNode: cMoveBefore,
      firstNode: cFirstNode,
    } = proto;
@@ -38,7 +38,22 @@ export class VMulti {
    this.parentEl = parent;
  }
-  moveBefore(other: VMulti | null, afterNode: Node | null) {
+  moveBeforeDOMNode(node: Node | null) {
    const children = this.children;
    const parent = this.parentEl;
    const anchors = this.anchors;
    for (let i = 0, l = children.length; i < l; i++) {
      let child = children[i];
      if (child) {
        child.moveBeforeDOMNode(node);
      } else {
        const anchor = anchors![i];
        nodeInsertBefore.call(parent, anchor, node);
      }
    }
  }
  moveBeforeVNode(other: VMulti | null, afterNode: Node | null) {
    if (other) {
      const next = other!.children[0];
      afterNode = (next ? next.firstNode() : other!.anchors![0]) || null;
@@ -49,7 +64,7 @@ export class VMulti {
    for (let i = 0, l = children.length; i < l; i++) {
      let child = children[i];
      if (child) {
-        child.moveBefore(null, afterNode);
+        child.moveBeforeVNode(null, afterNode);
      } else {
        const anchor = anchors![i];
        nodeInsertBefore.call(parent, anchor, afterNode);
@@ -23,9 +23,12 @@ abstract class VSimpleNode {
    this.el = node;
  }
-  moveBefore(other: VText | null, afterNode: Node | null) {
+  moveBeforeDOMNode(node: Node | null) {
-    const target = other ? other.el! : afterNode;
+    nodeInsertBefore.call(this.parentEl, this.el!, node);
-    nodeInsertBefore.call(this.parentEl, this.el!, target);
+  }
  moveBeforeVNode(other: VText | null, afterNode: Node | null) {
    nodeInsertBefore.call(this.parentEl, this.el!, other ? other.el! : afterNode);
  }
  beforeRemove() {}
@@ -20,8 +20,12 @@ class VToggler {
    this.child.mount(parent, afterNode);
  }
-  moveBefore(other: VToggler | null, afterNode: Node | null) {
+  moveBeforeDOMNode(node: Node | null) {
-    this.child.moveBefore(other ? other.child : null, afterNode);
+    this.child.moveBeforeDOMNode(node);
  }
  moveBeforeVNode(other: VToggler | null, afterNode: Node | null) {
    this.moveBeforeDOMNode((other && other.firstNode()) || afterNode);
  }
  patch(other: VToggler, withBeforeRemove: boolean) {
@@ -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, 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) {
@@ -143,7 +141,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
    try {
      await Promise.all(this.willStart.map((f) => f.call(component)));
    } catch (e) {
-      handleError({ node: this, error: e });
+      this.app.handleError({ node: this, error: e });
      return;
    }
    if (this.status === STATUS.NEW && this.fiber === fiber) {
@@ -221,7 +219,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
          cb.call(component);
        }
      } catch (e) {
-        handleError({ error: e, node: this });
+        this.app.handleError({ error: e, node: this });
      }
    }
    this.status = STATUS.DESTROYED;
@@ -308,8 +306,12 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
    this.fiber = null;
  }
-  moveBefore(other: ComponentNode | null, afterNode: Node | null) {
+  moveBeforeDOMNode(node: Node | null): void {
-    this.bdom!.moveBefore(other ? other.bdom : null, afterNode);
+    this.bdom!.moveBeforeDOMNode(node);
  }
  moveBeforeVNode(other: ComponentNode<P, E> | null, afterNode: Node | null) {
    this.bdom!.moveBeforeVNode(other ? other.bdom : null, afterNode);
  }
  patch() {
@@ -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!;
@@ -59,5 +71,6 @@ export function handleError(params: ErrorParams) {
    } catch (e) {
      console.error(e);
    }
    throw error;
  }
 }
@@ -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) {
@@ -1,6 +1,6 @@
 import { BDom, mount } from "./blockdom";
 import type { ComponentNode } from "./component_node";
-import { fibersInError, handleError } from "./error_handling";
+import { fibersInError, 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");
 }
 /**
@@ -130,7 +130,7 @@ export class Fiber {
        (this.bdom as any) = true;
        this.bdom = node.renderFn();
      } catch (e) {
-        handleError({ node, error: e });
+        node.app.handleError({ node, error: e });
      }
      root.setCounter(root.counter - 1);
    }
@@ -195,7 +195,7 @@ export class RootFiber extends Fiber {
      }
    } catch (e) {
      this.locked = false;
-      handleError({ fiber: current || this, error: e });
+      node.app.handleError({ fiber: current || this, error: e });
    }
  }
@@ -259,7 +259,7 @@ export class MountFiber extends RootFiber {
        }
      }
    } catch (e) {
-      handleError({ fiber: current as Fiber, error: e });
+      this.node.app.handleError({ fiber: current as Fiber, error: e });
    }
  }
 }
@@ -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__ = {};
@@ -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) => {
+        return result.catch(onError);
          error.cause = cause;
          if (cause instanceof Error) {
            error.message += `"${cause.message}"`;
          }
          throw error;
        });
      }
      return result;
    } catch (cause) {
-      if (cause instanceof Error) {
+      onError(cause);
        error.message += `"${cause.message}"`;
      }
      throw error;
    }
  };
 }
@@ -1,64 +1,56 @@
-import { onWillUnmount } from "./lifecycle_hooks";
+import { onMounted, onWillUnmount } from "./lifecycle_hooks";
 import { BDom, text, VNode } from "./blockdom";
 import { Component } from "./component";
 import { OwlError } from "./error_handling";
 const VText: any = text("").constructor;
 class VPortal extends VText implements Partial<VNode<VPortal>> {
-  //   selector: string;
+  content: BDom | null;
-  realBDom: BDom | null;
+  selector: string;
  target: HTMLElement | null = null;
-  constructor(selector: string, realBDom: BDom) {
+  constructor(selector: string, content: BDom) {
    super("");
    this.selector = selector;
-    this.realBDom = realBDom;
+    this.content = content;
  }
  mount(parent: HTMLElement, anchor: ChildNode) {
    super.mount(parent, anchor);
    this.target = document.querySelector(this.selector) as any;
-    if (!this.target) {
+    if (this.target) {
-      let el: any = this.el;
+      this.content!.mount(this.target!, null);
      while (el && el.parentElement instanceof HTMLElement) {
        el = el.parentElement;
      }
      this.target = el && el.querySelector(this.selector);
      if (!this.target) {
        throw new Error("invalid portal target");
      }
    }
    this.realBDom!.mount(this.target!, null);
  }
  beforeRemove() {
-    this.realBDom!.beforeRemove();
+    // this.target not being null means content is mounted
-  }
+    if (this.target) {
-  remove() {
+      this.content!.beforeRemove();
-    if (this.realBDom) {
+      this.content!.remove();
      super.remove();
      this.realBDom!.remove();
      this.realBDom = null;
    }
    this.content = null;
  }
  patch(other: VPortal) {
    super.patch(other);
-    if (this.realBDom) {
+    if (this.content) {
-      this.realBDom.patch(other.realBDom!, true);
+      this.content.patch(other.content!, true);
    } else {
-      this.realBDom = other.realBDom;
+      this.content = other.content;
-      this.realBDom!.mount(this.target!, null);
+      this.content!.mount(this.target!, null);
    }
  }
 }
 /**
- * <t t-slot="default"/>
+ * kind of similar to <t t-slot="default"/>, but it wraps it around a VPortal
 */
 export function portalTemplate(app: any, bdom: any, helpers: any) {
  let { callSlot } = helpers;
-  return function template(ctx: any, node: any, key = "") {
+  return function template(ctx: any, node: any, key = ""): any {
-    return callSlot(ctx, node, key, "default", false, null);
+    return new VPortal(ctx.props.target, callSlot(ctx, node, key, "default", false, null));
  };
 }
@@ -72,13 +64,23 @@ export class Portal extends Component {
  };
  setup() {
-    const node = this.__owl__;
+    const node: any = this.__owl__;
-    const renderFn = node.renderFn;
+
-    node.renderFn = () => new VPortal(this.props.target, renderFn());
+    onMounted(() => {
-    onWillUnmount(() => {
+      const portal: VPortal = node.bdom;
-      if (node.bdom) {
+      if (!portal.target) {
-        node.bdom.remove();
+        portal.target = document.querySelector(this.props.target);
        if (portal.target) {
          portal.content!.mount(portal.target, null);
        } else {
          throw new OwlError("invalid portal target");
        }
      }
    });
    onWillUnmount(() => {
      const portal: VPortal = node.bdom;
      portal.beforeRemove();
    });
  }
 }
@@ -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>;
@@ -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)];
@@ -110,15 +111,18 @@ class LazyValue {
  ctx: any;
  component: any;
  node: any;
-  constructor(fn: any, ctx: any, component: any, node: any) {
+  key: any;
  constructor(fn: any, ctx: any, component: any, node: any, key: any) {
    this.fn = fn;
    this.ctx = capture(ctx);
    this.component = component;
    this.node = node;
    this.key = key;
  }
  evaluate(): any {
-    return this.fn.call(this.component, this.ctx, this.node);
+    return this.fn.call(this.component, this.ctx, this.node, this.key);
  }
  toString() {
@@ -191,7 +195,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) {
@@ -206,11 +210,11 @@ function multiRefSetter(refs: RefMap, name: string): RefSetter {
 * visit recursively the props and all the children to check if they are valid.
 * This is why it is only done in 'dev' mode.
 */
-export function validateProps<P>(name: string | ComponentConstructor<P>, props: P, parent?: any) {
+export function validateProps<P>(name: string | ComponentConstructor<P>, props: P, comp?: any) {
  const ComponentClass =
    typeof name !== "string"
      ? name
-      : (parent.constructor.components[name] as ComponentConstructor<P> | undefined);
+      : (comp.constructor.components[name] as ComponentConstructor<P> | undefined);
  if (!ComponentClass) {
    // this is an error, wrong component. We silently return here instead so the
@@ -220,7 +224,7 @@ export function validateProps<P>(name: string | ComponentConstructor<P>, props:
  const schema = ComponentClass.props;
  if (!schema) {
-    if (parent.__owl__.app.warnIfNoStaticProps) {
+    if (comp.__owl__.app.warnIfNoStaticProps) {
      console.warn(`Component '${ComponentClass.name}' does not have a static props description`);
    }
    return;
@@ -233,7 +237,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 +246,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 +270,5 @@ export const helpers = {
  bind,
  createCatcher,
  markRaw,
  OwlError,
 };
@@ -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 {
@@ -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)) {
+  // Get the document and HTMLElement corresponding to the target to allow mounting in iframes
-    throw new Error("Cannot mount component: the target is not a valid DOM element");
+  const document = target && target.ownerDocument;
-  }
+  if (document) {
-  if (!document.body.contains(target)) {
+    const HTMLElement = document.defaultView!.HTMLElement;
-    throw new Error("Cannot mount a component on a detached dom node");
+    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();
 }
@@ -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(", "));
  }
 }
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/> Total: <block-text-0/> Count: <block-text-1/></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']));;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Object.keys(ctx['state']));;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`id\`] = v_block4[i1];
+      ctx[\`id\`] = v_block2[i1];
      const key1 = ctx['id'];
-      const b6 = text(\`
+      c_block2[i1] = withKey(comp1({id: ctx['id']}, key + \`__1__\${key1}\`, node, this, null), key1);
 \`);
      const b7 = comp1({id: ctx['id']}, key + \`__1__\${key1}\`, node, this, null);
      const b8 = text(\`
 \`);
      c_block4[i1] = withKey(multi([b6, b7, b8]), 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 block1([txt1, txt2], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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
 ) {
@@ -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");
  });
 });
@@ -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>
+  let block1 = createBlock(\`<div><span block-attribute-0=\\"class\\"/></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 block1([attr1]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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 block1([attr1]);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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 block1([attr1, attr2, attr3]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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\\">
+  let block1 = createBlock(\`<select block-attribute-0=\\"value\\"><option value=\\"potato\\">Potato</option><option value=\\"tomato\\">Tomato</option><option value=\\"onion\\">Onion</option></select>\`);
 <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 = new String((ctx['value']) || \\"\\");
- \`);
+    return block1([attr1]);
    let attr1 = ctx['value'];
    const b3 = block3([attr1]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  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>\`);
 <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(\`
+    return block1();
 \`);
    const b3 = block3();
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
- <block-child-0/><block-child-1/>
+  let block2 = createBlock(\`<span>true</span>\`);
- </div>\`);
+  let block3 = createBlock(\`<span>owl</span>\`);
  let block4 = createBlock(\`<span>true</span>\`);
  let block5 = createBlock(\`<span>owl</span>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3;
 \`);
    let b4,b5;
    if (true) {
-      b4 = block4();
+      b2 = block2();
    } else {
-      b5 = block5();
+      b3 = block3();
    }
-    const b3 = block3([], [b4, b5]);
+    return block1([], [b2, b3]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
- <block-child-0/>
+  let block3 = createBlock(\`<li><a block-handler-0=\\"click\\">link</a></li>\`);
 </ul>\`);
  let block5 = 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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['someval']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`action\`] = v_block4[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 b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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 block1([hdlr1, hdlr2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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]);;
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1]);;
-    for (let i1 = 0; i1 < l_block3; i1++) {
+    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`value\`] = v_block3[i1];
+      ctx[\`value\`] = v_block1[i1];
      const key1 = ctx['value'];
      const b5 = text(\`
 \`);
      let hdlr1 = [ctx['add'], ctx];
-      const b6 = block6([hdlr1]);
+      c_block1[i1] = withKey(block2([hdlr1]), key1);
      const b7 = text(\`
 \`);
      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
    }
-    const b3 = list(c_block3);
+    return list(c_block1);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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]);;
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1]);;
-    for (let i1 = 0; i1 < l_block3; i1++) {
+    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`value\`] = v_block3[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(\`
+      c_block1[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
 \`);
      const b6 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
      const b7 = text(\`
 \`);
      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
    }
-    const b3 = list(c_block3);
+    return list(c_block1);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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\\">
+  let block1 = createBlock(\`<div class=\\"myClass\\" block-handler-0=\\"click\\"><button block-handler-1=\\"click\\">Button</button></div>\`);
 <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\\">
+  let block1 = createBlock(\`<div block-handler-0=\\"click.capture\\"><button block-handler-1=\\"click\\">Button</button></div>\`);
 <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>
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent\\">Button</button></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>
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent.self\\"><span>Button</span></button></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>
+  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>\`);
 <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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- <block-child-0/>
+  let block3 = createBlock(\`<a href=\\"#\\" block-handler-0=\\"click.prevent\\"> Edit <block-text-1/></a>\`);
 </div>\`);
  let block5 = 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]);
+      c_block2[i1] = withKey(block3([hdlr1, txt1]), key1);
      const b6 = text(\`
 \`);
      c_block2[i1] = withKey(multi([b4, b5, b6]), 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>
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click.self.prevent\\"><span>Button</span></button></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>
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><span>Button</span></button><button block-handler-1=\\"click.self\\"><span>Button</span></button></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\\">
+  let block1 = createBlock(\`<div block-handler-0=\\"click.synthetic\\"><button block-handler-1=\\"click.synthetic\\">Button</button></div>\`);
 <button block-handler-1=\\"click.synthetic\\">Button</button>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
    let hdlr1 = [\\"synthetic\\", ctx['divClicked'], ctx];
@@ -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\\">
+  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>\`);
- <div block-attribute-1=\\"class\\">
+  let block2 = createBlock(\`<i class=\\"fa fa-exclamation-triangle\\"/>\`);
- <div class=\\"batch_header\\">
+  let block3 = createBlock(\`<span><i class=\\"fa fa-cog fa-spin fa-fw\\"/> preparing</span>\`);
- <a block-attribute-2=\\"href\\" block-attribute-3=\\"class\\" title=\\"View Batch\\">
+  let block7 = createBlock(\`<div class=\\"slot_filler\\"/>\`);
- <block-text-4/>
+  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>\`);
- <block-child-0/>
+  let block10 = createBlock(\`<i class=\\"fa fa-fw fa-hashtag\\" title=\\"This commit is a new head\\"/>\`);
- <i class=\\"arrow fa fa-window-maximize\\"/>
+  let block11 = createBlock(\`<i class=\\"fa fa-fw fa-link\\" title=\\"This commit is an existing head from bundle branches\\"/>\`);
- </a>
+  let block12 = createBlock(\`<i class=\\"fa fa-fw fa-code-fork\\" title=\\"This commit is matched from a base batch with matching merge_base\\"/>\`);
- </div>
+  let block13 = createBlock(\`<i class=\\"fa fa-fw fa-clock-o\\" title=\\"This commit is the head of a base branch\\"/>\`);
 <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\\"/>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3,b4,b6,b8;
 \`);
    let b4,b5,b9,b14,b16;
    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(\`
+      b3 = block3();
 \`);
      const b7 = block7();
      const b8 = text(\`
 \`);
      b5 = multi([b6, b7, b8]);
    }
    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])));;
+    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_block9; i1++) {
+    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`slot\`] = v_block9[i1];
+      ctx[\`slot\`] = v_block4[i1];
      const key1 = ctx['slot'].id;
-      const b11 = text(\`
+      c_block4[i1] = withKey(comp1({class: ctx['slot_container'],slot: ctx['slot']}, key + \`__1__\${key1}\`, node, this, null), key1);
 \`);
      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);
    }
    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]);;
+    const [k_block6, v_block6, l_block6, c_block6] = prepareList([1,2,3,4]);;
-    for (let i1 = 0; i1 < l_block14; i1++) {
+    for (let i1 = 0; i1 < l_block6; i1++) {
-      ctx[\`x\`] = v_block14[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']);;
+    const [k_block8, v_block8, l_block8, c_block8] = prepareList(ctx['commit_links']);;
-    for (let i1 = 0; i1 < l_block16; i1++) {
+    for (let i1 = 0; i1 < l_block8; i1++) {
-      ctx[\`commit_link\`] = v_block16[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__;
+    b8 = list(c_block8);
-    b16 = list(c_block16);
+    return block1([attr1, attr2, attr3, attr4, txt1], [b2, b3, b4, b6, b8]);
    const b3 = block3([attr1, attr2, attr3, attr4, txt1], [b4, b5, b9, b14, b16]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
- <block-child-0/>
+  let block4 = createBlock(\`<span><block-text-0/></span>\`);
 <block-child-1/>
 </div>\`);
  let block7 = 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]);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([4,5,6]);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`value\`] = v_block4[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 b4 = block4([txt1]);
      const b8 = text(\`
 \`);
      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 b6 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
 \`);
      const b11 = multi([b12, b13]);
      ctx[zero] = b11;
      const b14 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
      ctx = ctx.__proto__;
-      const b15 = text(\`
+      const b7 = callTemplate_2.call(this, ctx, node, key + \`__2__\${key1}\`);
 \`);
      const b16 = callTemplate_2.call(this, ctx, node, key + \`__2__\${key1}\`);
      const b17 = text(\`
 \`);
      setContextValue(ctx, \\"foo\\", 'bbb');
-      const b18 = text(\`
+      const b8 = callTemplate_3.call(this, ctx, node, key + \`__3__\${key1}\`);
- \`);
+      const b5 = multi([b6, b7, b8]);
-      const b19 = callTemplate_3.call(this, ctx, node, key + \`__3__\${key1}\`);
+      ctx[zero] = b5;
-      const b20 = text(\`
+      const b9 = callTemplate_4.call(this, ctx, node, key + \`__4__\${key1}\`);
 \`);
      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}\`);
      ctx = ctx.__proto__;
-      const b22 = text(\`
+      c_block2[i1] = withKey(multi([b4, b9]), key1);
 \`);
      c_block4[i1] = withKey(multi([b6, b7, b8, b21, b22]), key1);
    }
    ctx = ctx.__proto__;
-    const b4 = list(c_block4);
+    const b2 = list(c_block2);
-    const b23 = callTemplate_5.call(this, ctx, node, key + \`__5\`);
+    const b10 = callTemplate_5.call(this, ctx, node, key + \`__5\`);
-    const b3 = block3([], [b4, b23]);
+    return block1([], [b2, b10]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  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\\">
 <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--><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>\`);
- <div class=\\"form-group col-md-6\\">
+  let block3 = createBlock(\`<li class=\\"nav-item\\"><a class=\\"nav-link\\" href=\\"#\\" block-handler-0=\\"click\\"><block-text-1/></a></li>\`);
- <h5>Triggers</h5>
+  let block5 = createBlock(\`<li class=\\"nav-item dropdown\\"><b><a class=\\"nav-link\\" block-attribute-0=\\"href\\">Login</a></b></li>\`);
- <block-child-3/>
+  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>\`);
- </div>
+  let block9 = createBlock(\`<li class=\\"nav-item divider\\"/>\`);
- </div>
+  let block11 = createBlock(\`<li class=\\"nav-item\\"><a href=\\"/runbot/errors\\" class=\\"nav-link\\" title=\\"Random Bugs\\"><i class=\\"fa fa-bug\\"/></a></li>\`);
- </div>
+  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>\`);
- <div class=\\"container-fluid frontend\\">
+  let block14 = createBlock(\`<select class=\\"custom-select\\" name=\\"category\\" id=\\"category\\"><block-child-0/></select>\`);
- <div class=\\"row\\">
+  let block16 = createBlock(\`<option block-attribute-0=\\"value\\" block-attribute-1=\\"selected\\"><block-text-2/></option>\`);
- <div class=\\"col-md-12\\">
+  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>\`);
- <block-child-4/>
+  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>\`);
- </div>
+  let block23 = createBlock(\`<div class=\\"alert alert-warning\\" role=\\"alert\\"><block-text-0/> <!-- todo fixme--></div>\`);
- <div class=\\"col-md-12\\">
+  let block24 = createBlock(\`<div class=\\"mb32\\"><h1>No project</h1></div>\`);
- <block-child-5/>
+  let block25 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
 <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>\`);
  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 b2,b4,b14,b17,b22,b23,b24,b25;
 \`);
    let b4,b6,b30,b33,b43,b44,b45,b46;
    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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['projects']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`project\`] = v_block4[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;
+      let b5,b6;
      b7 = text(\`
 \`);
      if (ctx['user'].public) {
        const b9 = text(\`
 \`);
        let attr2 = \`/web/login?redirect=/\`;
-        const b10 = block10([attr2]);
+        b5 = block5([attr2]);
        const b11 = text(\`
 \`);
        b8 = multi([b9, b10, b11]);
      } else {
-        let b13,b14,b20,b26,b27,b28;
+        let b7,b10,b13;
        b13 = text(\`
 \`);
        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 b8 = block8([attr3, txt3]);
-          const b17 = text(\`
+          const b9 = block9();
- \`);
+          b7 = multi([b8, b9]);
          const b18 = block18();
          const b19 = text(\`
 \`);
          b14 = multi([b15, b16, b17, b18, b19]);
        } else if (ctx['nb_build_errors']&&ctx['nb_build_errors']>0) {
-          const b21 = text(\`
+          const b11 = block11();
- \`);
+          const b12 = block12();
-          const b22 = block22();
+          b10 = multi([b11, b12]);
          const b23 = text(\`
 \`);
          const b24 = block24();
          const b25 = text(\`
 \`);
          b20 = multi([b21, b22, b23, b24, b25]);
        }
        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]);
+        b13 = block13([txt4, attr4, attr5]);
-        b28 = text(\`
+        b6 = multi([b7, b10, b13]);
 \`);
        b12 = multi([b13, b14, b20, b26, b27, b28]);
      }
-      b29 = text(\`
+      b4 = multi([b5, b6]);
 \`);
      b6 = multi([b7, b8, b12, b29]);
    }
    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']);;
+      const [k_block15, v_block15, l_block15, c_block15] = prepareList(ctx['categories']);;
-      for (let i1 = 0; i1 < l_block31; i1++) {
+      for (let i1 = 0; i1 < l_block15; i1++) {
-        ctx[\`category\`] = v_block31[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);
+      const b15 = list(c_block15);
-      b30 = block30([], [b31]);
+      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']);;
+      const [k_block18, v_block18, l_block18, c_block18] = prepareList(ctx['triggers']);;
-      for (let i1 = 0; i1 < l_block35; i1++) {
+      for (let i1 = 0; i1 < l_block18; i1++) {
-        ctx[\`trigger\`] = v_block35[i1];
+        ctx[\`trigger\`] = v_block18[i1];
        const key1 = ctx['trigger'].id;
-        let b37,b38,b39;
+        let b20;
        b37 = text(\`
 \`);
        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_block18[i1] = withKey(multi([b20]), key1);
 \`);
        c_block35[i1] = withKey(multi([b37, b38, b39]), key1);
      }
      ctx = ctx.__proto__;
-      const b35 = list(c_block35);
+      const b18 = list(c_block18);
      const b40 = text(\`
 \`);
      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 b21 = block21([hdlr8, hdlr9, hdlr10, hdlr11]);
-      const b42 = text(\`
+      b17 = multi([b18, b21]);
 \`);
      b33 = multi([b34, b35, b40, b41, b42]);
    }
    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 b26 = 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);
+      const b27 = comp2({bundles: ctx['bundles'].dev,search: ctx['search']}, key + \`__3\`, node, this, null);
-      b46 = block46([], [b47, b48]);
+      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 block1([attr1, txt1, hdlr2, hdlr3, attr8, hdlr4, hdlr5, ref1, hdlr6, ref2], [b2, b4, b14, b17, b22, b23, b24, b25]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-text-0/><block-text-1/>Loading<block-text-2/></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 block1([txt1, txt2, txt3]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- <block-child-0/>
+  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>\`);
- </div>\`);
+  let block3 = createBlock(\`<path block-ns=\\"http://www.w3.org/2000/svg\\"/>\`);
  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\\"/>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b3;
 \`);
    let b5;
    if (ctx['hasPath']) {
-      b5 = block5();
+      b3 = block3();
    }
-    const b4 = block4([], [b5]);
+    const b2 = block2([], [b3]);
-    const b3 = block3([], [b4]);
+    return block1([], [b2]);
    const b6 = text(\`
 \`);
    return multi([b2, b3, b6]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- <block-child-0/>
+  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>\`);
 </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>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    const b2 = block2();
- \`);
+    return block1([], [b2]);
    const b4 = block4();
    const b3 = block3([], [b4]);
    const b5 = text(\`
 \`);
    return multi([b2, b3, b5]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div/>\`);
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
@@ -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>
+  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>\`);
 <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 block1([txt1, txt2, txt3, txt4, txt5]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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 b2 = text(ctx['v1']);
- \`);
+    const b3 = text(\`:\`);
-    const b3 = text(ctx['v1']);
+    const b4 = text(ctx['v2']);
-    const b4 = text(\`:\`);
+    const b5 = text(\`:\`);
-    const b5 = text(ctx['v2']);
+    const b6 = text(ctx['v3']);
-    const b6 = text(\`:\`);
+    const b7 = text(\`:\`);
-    const b7 = text(ctx['v3']);
+    const b8 = text(ctx['v4']);
-    const b8 = text(\`:\`);
+    const b9 = text(\`:\`);
-    const b9 = text(ctx['v4']);
+    const b10 = text(ctx['v5']);
-    const b10 = text(\`:\`);
+    return multi([b2, b3, b4, b5, b6, b7, b8, b9, b10]);
    const b11 = text(ctx['v5']);
    return multi([b2, b3, b4, b5, b6, b7, b8, b9, b10, b11]);
  }
 }"
 `;
@@ -137,7 +126,7 @@ exports[`t-esc t-esc is escaped 1`] = `
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    ctx[\`var\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node, key);
    let txt1 = ctx['var'];
    return block1([txt1]);
  }
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></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]);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1]);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block4[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 b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- <block-child-0/>
+  let block3 = createBlock(\`<span><block-text-0/></span>\`);
 </div>\`);
  let block5 = 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]);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1,2]);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block4[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 b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></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]);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block4[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 b4 = text(\` [\`);
- [\`);
+      const b5 = text(ctx['item_index']);
-      const b7 = text(ctx['item_index']);
+      const b6 = text(\`: \`);
-      const b8 = text(\`: \`);
+      const b7 = text(ctx['item']);
-      const b9 = text(ctx['item']);
+      const b8 = text(\` \`);
-      const b10 = text(\` \`);
+      const b9 = text(ctx['item_value']);
-      const b11 = text(ctx['item_value']);
+      const b10 = text(\`] \`);
-      const b12 = text(\`]
+      c_block2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9, b10]), key1);
 \`);
      c_block4[i1] = withKey(multi([b6, b7, b8, b9, b10, b11, b12]), key1);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['value']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block4[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 b4 = text(\` [\`);
- [\`);
+      const b5 = text(ctx['item_index']);
-      const b7 = text(ctx['item_index']);
+      const b6 = text(\`: \`);
-      const b8 = text(\`: \`);
+      const b7 = text(ctx['item']);
-      const b9 = text(ctx['item']);
+      const b8 = text(\` \`);
-      const b10 = text(\` \`);
+      const b9 = text(ctx['item_value']);
-      const b11 = text(ctx['item_value']);
+      const b10 = text(\`] \`);
-      const b12 = text(\`]
+      c_block2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9, b10]), key1);
 \`);
      c_block4[i1] = withKey(multi([b6, b7, b8, b9, b10, b11, b12]), key1);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></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));;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(5));;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`elem\`] = v_block4[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;
+      let b4,b5,b6,b7,b8,b9;
-      b6 = text(\`
+      b4 = text(\` -\`);
 -\`);
      if (ctx['elem_first']) {
-        b7 = text(\` first\`);
+        b5 = text(\` first\`);
      }
      if (ctx['elem_last']) {
-        b8 = text(\` last\`);
+        b6 = text(\` last\`);
      }
-      b9 = text(\` (\`);
+      b7 = text(\` (\`);
-      b10 = text(ctx['elem_index']);
+      b8 = text(ctx['elem_index']);
-      b11 = text(\`)
+      b9 = text(\`) \`);
- \`);
+      c_block2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9]), key1);
      c_block4[i1] = withKey(multi([b6, b7, b8, b9, b10, b11]), key1);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></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]);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block4[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 b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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 block3 = createBlock(\`<span>a<block-text-0/></span>\`);
-  let block8 = createBlock(\`<span>b<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]);;
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList([3,2,1]);;
-    for (let i1 = 0; i1 < l_block3; i1++) {
+    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = v_block3[i1];
+      ctx[\`item\`] = v_block1[i1];
      const key1 = ctx['item'];
      const b5 = text(\`
 \`);
      let txt1 = ctx['item'];
-      const b6 = block6([txt1]);
+      const b3 = block3([txt1]);
      const b7 = text(\`
 \`);
      let txt2 = ctx['item'];
-      const b8 = block8([txt2]);
+      const b4 = block4([txt2]);
-      const b9 = text(\`
+      c_block1[i1] = withKey(multi([b3, b4]), key1);
 \`);
      c_block3[i1] = withKey(multi([b5, b6, b7, b8, b9]), key1);
    }
-    const b3 = list(c_block3);
+    return list(c_block1);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/><span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span></div>\`);
- <block-child-0/>
+  let block6 = createBlock(\`<span><block-text-0/></span>\`);
 <span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span>
 </div>\`);
  let block16 = 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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`a\`] = v_block4[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']);;
+      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['letters']);;
-      for (let i2 = 0; i2 < l_block7; i2++) {
+      for (let i2 = 0; i2 < l_block4; i2++) {
-        ctx[\`b\`] = v_block7[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(\`
+        c_block4[i2] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`), key2);
 \`);
        const b10 = multi([b11, b12]);
        ctx[zero] = b10;
        const b13 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}__\${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 b4 = list(c_block4);
      const b15 = text(\`
 \`);
      let txt1 = ctx['c'];
-      const b16 = block16([txt1]);
+      const b6 = block6([txt1]);
-      const b17 = text(\`
+      c_block2[i1] = withKey(multi([b4, b6]), key1);
 \`);
      c_block4[i1] = withKey(multi([b6, b7, b15, b16, b17]), 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 block1([txt2, txt3, txt4], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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 b2 = text(\` [\`);
- \`);
+    const b3 = text(ctx['a']);
-    const b3 = text(\`
+    const b4 = text(\`] [\`);
- [\`);
+    const b5 = text(ctx['b']);
-    const b4 = text(ctx['a']);
+    const b6 = text(\`] [\`);
-    const b5 = text(\`]
+    const b7 = text(ctx['c']);
- [\`);
+    const b8 = text(\`] \`);
-    const b6 = text(ctx['b']);
+    return multi([b2, b3, b4, b5, b6, b7, b8]);
    const b7 = text(\`]
 [\`);
    const b8 = text(ctx['c']);
    const b9 = text(\`]
 \`);
    return multi([b2, b3, b4, b5, b6, b7, b8, b9]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/><span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span></div>\`);
- <block-child-0/>
+  let block6 = createBlock(\`<span><block-text-0/></span>\`);
 <span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span>
 </div>\`);
  let block13 = 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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`a\`] = v_block4[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']);;
+      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['letters']);;
-      for (let i2 = 0; i2 < l_block7; i2++) {
+      for (let i2 = 0; i2 < l_block4; i2++) {
-        ctx[\`b\`] = v_block7[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(\`
+        c_block4[i2] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`), key2);
 \`);
        const b10 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`);
        const b11 = text(\`
 \`);
        c_block7[i2] = withKey(multi([b9, b10, b11]), key2);
      }
      ctx = ctx.__proto__;
-      const b7 = list(c_block7);
+      const b4 = list(c_block4);
      const b12 = text(\`
 \`);
      let txt1 = ctx['c'];
-      const b13 = block13([txt1]);
+      const b6 = block6([txt1]);
-      const b14 = text(\`
+      c_block2[i1] = withKey(multi([b4, b6]), key1);
 \`);
      c_block4[i1] = withKey(multi([b6, b7, b12, b13, b14]), 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 block1([txt2, txt3, txt4], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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 b2 = text(\` [\`);
- [\`);
+    const b3 = text(ctx['a']);
-    const b5 = text(ctx['a']);
+    const b4 = text(\`] [\`);
-    const b6 = text(\`]
+    const b5 = text(ctx['b']);
- [\`);
+    const b6 = text(\`] [\`);
-    const b7 = text(ctx['b']);
+    const b7 = text(ctx['c']);
-    const b8 = text(\`]
+    const b8 = text(\`] \`);
- [\`);
+    return multi([b2, b3, b4, b5, b6, b7, b8]);
    const b9 = text(ctx['c']);
    const b10 = text(\`]
 \`);
    return multi([b2, b3, b4, b5, b6, b7, b8, b9, b10]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`number\`] = v_block4[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']);;
+      const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['letters']);;
-      for (let i2 = 0; i2 < l_block7; i2++) {
+      for (let i2 = 0; i2 < l_block3; i2++) {
-        ctx[\`letter\`] = v_block7[i2];
+        ctx[\`letter\`] = v_block3[i2];
        const key2 = ctx['letter'];
-        const b9 = text(\`
+        const b5 = text(\` [\`);
- [\`);
+        const b6 = text(ctx['number']);
-        const b10 = text(ctx['number']);
+        const b7 = text(ctx['letter']);
-        const b11 = text(ctx['letter']);
+        const b8 = text(\`] \`);
-        const b12 = text(\`]
+        c_block3[i2] = withKey(multi([b5, b6, b7, b8]), key2);
 \`);
        c_block7[i2] = withKey(multi([b9, b10, b11, b12]), key2);
      }
      ctx = ctx.__proto__;
-      const b7 = list(c_block7);
+      c_block2[i1] = withKey(list(c_block3), key1);
      const b13 = text(\`
 \`);
      c_block4[i1] = withKey(multi([b6, b7, b13]), key1);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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']);;
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['elems']);;
-    for (let i1 = 0; i1 < l_block3; i1++) {
+    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`elem\`] = v_block3[i1];
+      ctx[\`elem\`] = v_block1[i1];
      const key1 = ctx['elem'].id;
-      let b5,b6,b7;
+      let b3;
      b5 = text(\`
 \`);
      if (ctx['elem'].id<3) {
        let txt1 = ctx['elem'].text;
-        b6 = block6([txt1]);
+        b3 = block3([txt1]);
      }
-      b7 = text(\`
+      c_block1[i1] = withKey(multi([b3]), key1);
 \`);
      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
    }
-    const b3 = list(c_block3);
+    return list(c_block1);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- <block-child-0/>
+  let block4 = createBlock(\`<span><block-text-0/></span>\`);
 </div>\`);
  let block7 = 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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['elems']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`elem\`] = v_block4[i1];
+      ctx[\`elem\`] = v_block2[i1];
      const key1 = ctx['elem'].id;
-      let b6,b7,b8;
+      let b4;
      b6 = text(\`
 \`);
      if (ctx['elem'].id<3) {
        let txt1 = ctx['elem'].text;
-        b7 = block7([txt1]);
+        b4 = block4([txt1]);
      }
-      b8 = text(\`
+      c_block2[i1] = withKey(multi([b4]), key1);
 \`);
      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- <block-child-0/>
+  let block3 = createBlock(\`<span/>\`);
 </div>\`);
  let block7 = 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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['things']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`thing\`] = v_block4[i1];
+      ctx[\`thing\`] = v_block2[i1];
      const key1 = ctx['thing'];
-      const b6 = text(\`
+      c_block2[i1] = withKey(block3(), key1);
 \`);
      const b7 = block7();
      const b8 = text(\`
 \`);
      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- <block-child-0/>
+  let block3 = createBlock(\`<p><block-text-0/><block-text-1/></p>\`);
 </div>\`);
  let block5 = 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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block4[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);
+      c_block2[i1] = withKey(block3([txt1, txt2]), key1);
-      nextCache[key1] = Object.assign(c_block4[i1], {memo: memo1});
+      nextCache[key1] = Object.assign(c_block2[i1], {memo: memo1});
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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;
+    let b2,b3,b4,b5;
    b2 = text(\`
 \`);
    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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-2/><block-child-3/></div>\`);
 <block-child-0/><block-child-1/><block-child-2/><block-child-3/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3,b4,b5;
 \`);
    let b4,b5,b6,b7;
    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 block1([], [b2, b3, b4, b5]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><span>begin</span><block-child-0/><block-child-1/><span>end</span></div>\`);
 <span>begin</span>
 <block-child-0/><block-child-1/>
 <span>end</span>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3;
 \`);
    let b4,b5;
    if (ctx['condition']) {
-      b4 = text(\`ok\`);
+      b2 = text(\`ok\`);
    } else {
-      b5 = text(\`ok-else\`);
+      b3 = text(\`ok-else\`);
    }
-    const b3 = block3([], [b4, b5]);
+    return block1([], [b2, b3]);
    return multi([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 b2,b3;
 \`);
    let b4,b5;
    if (ctx['condition']) {
-      b4 = text(\`fail\`);
+      b2 = text(\`fail\`);
    } else {
-      b5 = text(\`fail-else\`);
+      b3 = text(\`fail-else\`);
    }
-    const b3 = block3([], [b4, b5]);
+    return block1([], [b2, b3]);
    return multi([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>
+  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>\`);
 <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 b2,b3,b4,b5,b6,b7,b8,b9;
 \`);
    let b4,b5,b6,b7,b8,b9,b10,b11;
    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 block1([], [b2, b3, b4, b5, b6, b7, b8, b9]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
 <block-child-0/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    const b2 = text(\`
+    let b2;
 \`);
    let b4;
    setContextValue(ctx, \\"title\\", 'test');
    if (ctx['title']) {
-      b4 = text(ctx['title']);
+      b2 = text(ctx['title']);
    }
-    const b3 = block3([], [b4]);
+    return block1([], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- 
+  let block2 = createBlock(\`<span>COUCOU</span>\`);
 <block-child-0/>
 </div>\`);
  let block4 = createBlock(\`<span>COUCOU</span>\`);
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    const b2 = text(\`
+    let b2;
 \`);
    let b4;
    setContextValue(ctx, \\"y\\", true);
    setContextValue(ctx, \\"x\\", ctx['y']);
    if (ctx['x']) {
-      b4 = block4();
+      b2 = block2();
    }
-    const b3 = block3([], [b4]);
+    return block1([], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
- 
+  let block2 = createBlock(\`<span>AAA</span>\`);
- 
+  let block3 = createBlock(\`<span>BBB</span>\`);
 <block-child-0/><block-child-1/>
 </div>\`);
  let block4 = createBlock(\`<span>AAA</span>\`);
  let block5 = createBlock(\`<span>BBB</span>\`);
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    const b2 = text(\`
+    let b2,b3;
 \`);
    let b4,b5;
    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 block1([], [b2, b3]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<ul><block-child-0/></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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
- <block-child-0/>
+  let block2 = createBlock(\`<span/>\`);
- <block-child-1/>
+  let block3 = createBlock(\`<div><h1/></div>\`);
 </div>\`);
  let block4 = createBlock(\`<span/>\`);
  let block5 = createBlock(\`<div><h1/></div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3;
 \`);
    let b4,b5;
    if (ctx['hasSpan']) {
-      b4 = block4();
+      b2 = block2();
    }
    const tKey_1 = ctx['key'];
-    b5 = toggler(tKey_1, block5());
+    b3 = toggler(tKey_1, block3());
-    const b3 = block3([], [b4, b5]);
+    return block1([], [b2, b3]);
    const b6 = text(\`
 \`);
    return multi([b2, b3, b6]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- <block-child-0/>
+  let block2 = createBlock(\`<span>coucou</span>\`);
 </div>\`);
  let block6 = createBlock(\`<span>coucou</span>\`);
  return function template(ctx, node, key = \\"\\") {
    const b2 = text(\`
 \`);
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1;
-    const b5 = text(\`
+    const b2 = block2();
- \`);
+    ctx[zero] = b2;
-    const b6 = block6();
+    const b3 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    const b7 = text(\`
+    return block1([], [b3]);
 \`);
    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]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/><div>Greeter</div><block-child-1/></div>\`);
 <block-child-0/>
 <div>Greeter</div>
 <block-child-1/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    const b2 = ctx[zero];
- \`);
+    const b3 = ctx[zero];
-    const b4 = ctx[zero];
+    return block1([], [b2, b3]);
    const b5 = ctx[zero];
    const b3 = block3([], [b4, b5]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -179,7 +161,7 @@ exports[`t-out t-out bdom 1`] = `
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    ctx[\`var\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node, key);
    const b3 = safeOutput(ctx['var']);
    return block1([], [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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></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);
+    ctx[\`bdom\`] = new LazyValue(value1, ctx, this, node, key);
    if (ctx['hasBdom']) {
-      const b4 = text(\`
+      const b4 = safeOutput(ctx['bdom']);
- \`);
+      b3 = block3([], [b4]);
      const b6 = safeOutput(ctx['bdom']);
      const b5 = block5([], [b6]);
      const b7 = text(\`
 \`);
      b3 = multi([b4, b5, b7]);
    } else {
-      const b9 = text(\`
+      const b6 = safeOutput(ctx['var']);
- \`);
+      b5 = block5([], [b6]);
      const b11 = safeOutput(ctx['var']);
      const b10 = block10([], [b11]);
      const b12 = text(\`
 \`);
      b8 = multi([b9, b10, b12]);
    }
-    return block1([], [b3, b8]);
+    return block1([], [b3, b5]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- <block-child-0/>
+  let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
 </div>\`);
  let block6 = 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 b2;
 \`);
    let b4;
    if (ctx['condition']) {
-      const b5 = text(\`
+      b2 = block2([ref1]);
 \`);
      const b6 = block6([ref1]);
      const b7 = text(\`
 \`);
      b4 = multi([b5, b6, b7]);
    }
-    const b3 = block3([], [b4]);
+    return block1([], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- <block-child-0/>
+  let block3 = createBlock(\`<div block-ref=\\"0\\"><block-text-1/></div>\`);
 </div>\`);
  let block5 = 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]));
+      c_block2[i1] = withKey(block3([ref1, txt1]), tKey_1 + key1);
      const b6 = text(\`
 \`);
      c_block2[i1] = withKey(multi([b4, b5, b6]), 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>
+  let block1 = createBlock(\`<div><block-child-0/><p block-ref=\\"0\\"/></div>\`);
- <block-child-0/>
+  let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
 <p block-ref=\\"0\\"/>
 </div>\`);
  let block6 = 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 b2;
 \`);
    let b4;
    if (ctx['condition']) {
-      const b5 = text(\`
+      b2 = block2([ref1]);
 \`);
      const b6 = block6([ref1]);
      const b7 = text(\`
 \`);
      b4 = multi([b5, b6, b7]);
    }
-    const b3 = block3([ref2], [b4]);
+    return block1([ref2], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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;
+    let b2,b3;
    b5 = text(\`
 \`);
    if (ctx['condition']) {
-      b6 = text(\`true\`);
+      b2 = text(\`true\`);
    } else {
-      b7 = text(\`false\`);
+      b3 = text(\`false\`);
    }
-    b8 = text(\`
+    return multi([b2, b3]);
 \`);
    return multi([b5, b6, b7, b8]);
  }
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    const b2 = text(\`
+    ctx[\`value\`] = new LazyValue(value1, ctx, this, node, key);
- \`);
+    return text(ctx['value']);
    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]);
  }
 }"
 `;
@@ -155,7 +142,7 @@ exports[`t-set set from body lookup 1`] = `
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    ctx[\`stuff\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`stuff\`] = new LazyValue(value1, ctx, this, node, key);
    let txt1 = ctx['stuff'];
    return block1([txt1]);
  }
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
 <block-child-0/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    const b2 = text(\`
+    let b2;
 \`);
    let b4;
    setContextValue(ctx, \\"v\\", ctx['value']);
    if (ctx['v']==='ok') {
-      b4 = text(\`grimbergen\`);
+      b2 = text(\`grimbergen\`);
    }
-    const b3 = block3([], [b4]);
+    return block1([], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- 
+  let block2 = createBlock(\`<span><block-text-0/></span>\`);
 <block-child-0/>
 </div>\`);
  let block6 = createBlock(\`<span><block-text-0/></span>\`);
  function value1(ctx, node, key = \\"\\") {
    const b5 = text(\`
 \`);
    let txt1 = ctx['v1'];
-    const b6 = block6([txt1]);
+    return block2([txt1]);
    const b7 = text(\`
 \`);
    return multi([b5, b6, b7]);
  }
  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);
+    ctx[\`v2\`] = new LazyValue(value1, ctx, this, node, key);
    setContextValue(ctx, \\"v1\\", 'after');
-    const b8 = safeOutput(ctx['v2']);
+    const b3 = safeOutput(ctx['v2']);
-    const b3 = block3([], [b8]);
+    return block1([], [b3]);
    return multi([b2, 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>
+  let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></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]);
+    return block1([txt1, txt2], [b2]);
    const b5 = text(\`
 \`);
    return multi([b2, b3, b5]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></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 b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
 \`);
    const b4 = multi([b5, b6]);
    ctx[zero] = b4;
    const b7 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
    ctx = ctx.__proto__;
    let txt2 = ctx['iter'];
-    const b3 = block3([txt1, txt2], [b7]);
+    return block1([txt1, txt2], [b2]);
    const b8 = text(\`
 \`);
    return multi([b2, b3, b8]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-text-0/><block-text-1/></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 block1([txt1, txt2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/><p>EndLoop: <block-text-0/></p></div>\`);
- 
+  let block3 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
 <block-child-0/>
 <p>EndLoop: <block-text-0/></p>
 </div>\`);
  let block7 = 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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block4[i1];
+      ctx[\`val\`] = v_block2[i1];
      const key1 = ctx['val'];
      const b6 = text(\`
 \`);
      let txt1 = ctx['iter'];
-      const b7 = block7([txt1]);
+      c_block2[i1] = withKey(block3([txt1]), key1);
      const b8 = text(\`
 \`);
      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]);
+    return block1([txt2], [b2]);
    const b10 = text(\`
 \`);
    return multi([b2, b3, b10]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/><p>EndLoop: <block-text-0/></p></div>\`);
- 
+  let block3 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
 <block-child-0/>
 <p>EndLoop: <block-text-0/></p>
 </div>\`);
  let block7 = 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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block4[i1];
+      ctx[\`val\`] = v_block2[i1];
      const key1 = ctx['val'];
      const b6 = text(\`
 \`);
      let txt1 = ctx['iter'];
-      const b7 = block7([txt1]);
+      c_block2[i1] = withKey(block3([txt1]), key1);
      const b8 = text(\`
 \`);
      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]);
+    return block1([txt2], [b2]);
    const b10 = text(\`
 \`);
    return multi([b2, b3, b10]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/><p>EndLoop: <block-text-0/></p></div>\`);
- 
+  let block3 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
 <block-child-0/>
 <p>EndLoop: <block-text-0/></p>
 </div>\`);
  let block7 = 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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block4[i1];
+      ctx[\`val\`] = v_block2[i1];
      const key1 = ctx['val'];
      const b6 = text(\`
 \`);
      let txt1 = ctx['iter'];
-      const b7 = block7([txt1]);
+      c_block2[i1] = withKey(block3([txt1]), key1);
      const b8 = text(\`
 \`);
      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]);
+    return block1([txt2], [b2]);
    const b10 = text(\`
 \`);
    return multi([b2, b3, b10]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- 
+  let block3 = createBlock(\`<div><span>v<block-text-0/></span></div>\`);
 <block-child-0/>
 </div>\`);
  let block5 = 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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['list']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`elem\`] = v_block4[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 b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
 <block-text-0/>
 </div>\`);
  function value1(ctx, node, key = \\"\\") {
-    const b5 = text(ctx['beep']);
+    const b3 = text(ctx['beep']);
-    const b6 = text(\` boop\`);
+    const b4 = text(\` boop\`);
-    return multi([b5, b6]);
+    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, key);
 \`);
    ctx[\`setvar\`] = new LazyValue(value1, ctx, this, node);
    let txt1 = ctx['setvar'];
-    const b3 = block3([txt1]);
+    return block1([txt1]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- 
+  let block2 = createBlock(\`<span><block-text-0/></span>\`);
 <block-child-0/>
 </div>\`);
  let block6 = createBlock(\`<span><block-text-0/></span>\`);
  function value1(ctx, node, key = \\"\\") {
    const b5 = text(\`
 \`);
    let txt1 = ctx['v1'];
-    const b6 = block6([txt1]);
+    return block2([txt1]);
    const b7 = text(\`
 \`);
    return multi([b5, b6, b7]);
  }
  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));
+    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node, key));
    setContextValue(ctx, \\"v1\\", 'after');
    setContextValue(ctx, \\"v3\\", true);
-    const b8 = safeOutput(ctx['v2']);
+    const b3 = safeOutput(ctx['v2']);
-    const b3 = block3([], [b8]);
+    return block1([], [b3]);
    return multi([b2, 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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- 
+  let block2 = createBlock(\`<span><block-text-0/></span>\`);
 <block-child-0/>
 </div>\`);
  let block6 = createBlock(\`<span><block-text-0/></span>\`);
  function value1(ctx, node, key = \\"\\") {
    const b5 = text(\`
 \`);
    let txt1 = ctx['v1'];
-    const b6 = block6([txt1]);
+    return block2([txt1]);
    const b7 = text(\`
 \`);
    return multi([b5, b6, b7]);
  }
  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));
+    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node, key));
    setContextValue(ctx, \\"v1\\", 'after');
    setContextValue(ctx, \\"v3\\", false);
-    const b8 = safeOutput(ctx['v2']);
+    const b3 = safeOutput(ctx['v2']);
-    const b3 = block3([], [b8]);
+    return block1([], [b3]);
    return multi([b2, 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>
+  let block1 = createBlock(\`<p><div><span>First div</span></div><div><block-child-0/></div></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 b2;
 \`);
    let b4;
    if (ctx['flag']) {
      setContextValue(ctx, \\"bouh\\", 2);
    }
    if (!ctx['flag']) {
-      b4 = text(\`Second\`);
+      b2 = text(\`Second\`);
    }
-    const b3 = block3([], [b4]);
+    return block1([], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-text-0/></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 block1([txt1]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-text-0/></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 block1([txt1]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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;
+    let b2;
    b2 = text(\`
 \`);
    if (ctx['flag']) {
      setContextValue(ctx, \\"ourvar\\", 1);
    } else {
      setContextValue(ctx, \\"ourvar\\", \`0\`);
    }
-    b3 = text(\`
+    b2 = text(ctx['ourvar']);
- \`);
+    return multi([b2]);
    b4 = text(ctx['ourvar']);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -824,7 +638,7 @@ exports[`t-set value priority (with non text body 1`] = `
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    ctx[\`value\`] = withDefault(1, new LazyValue(value1, ctx, this, node));
+    ctx[\`value\`] = withDefault(1, new LazyValue(value1, ctx, this, node, key));
    let txt1 = ctx['value'];
    return block1([txt1]);
  }
@@ -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'}>
+  let block1 = tag => createBlock(\`<\${tag || 't'}> pear <span>apple</span> strawberry </\${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 toggler(tag1, block1(tag1)());
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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(\`
+    return block1();
 \`);
    const b3 = block3();
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><span>mot</span><span>word</span></div>\`);
 <span>mot</span>
 <span>word</span>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    return block1();
 \`);
    const b3 = block3();
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  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>\`);
 <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(\`
+    return block1();
 \`);
    const b3 = block3();
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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(\`
+    return block1();
 \`);
    const b3 = block3();
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><pre>SomeText</pre></div>\`);
 </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>
+  let block1 = createBlock(\`<div><span>abc</span></div>\`);
 <span>abc</span>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
    return block1();
@@ -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 });
@@ -479,4 +479,21 @@ describe("t-call (template calling)", () => {
      "<span>123lucas</span>"
    );
  });
  test("nested t-calls with magic variable 0", () => {
    const context = new TestContext();
    context.addTemplate("grandchild", `grandchild<t t-out="0"/>`);
    context.addTemplate("child", `<t t-out="0"/>`);
    context.addTemplate(
      "main",
      `
        <t t-call="child">
            <t t-call="grandchild">
                <p>Some content...</p>
            </t>
        </t>`
    );
    expect(context.renderToString("main")).toBe("grandchild<p>Some content...</p>");
  });
 });
@@ -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 block1([txt1, hdlr1]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- <block-child-0/>
+  let block3 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
 </div>\`);
  let block5 = 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);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].blips);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`blip\`] = v_block4[i1];
+      ctx[\`blip\`] = v_block2[i1];
      const key1 = ctx['blip'].id;
-      const b6 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
+      const b4 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
-      const b7 = comp2({}, key + \`__2__\${key1}\`, node, this, null);
+      const b5 = comp2({}, key + \`__2__\${key1}\`, node, this, null);
-      c_block4[i1] = withKey(block5([], [b6, b7]), key1);
+      c_block2[i1] = withKey(block3([], [b4, b5]), key1);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
 <block-child-0/>
 <block-child-1/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
 \`);
    const b4 = 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 = toggler(tKey_1, comp2({}, tKey_1 + key + \`__2\`, node, this, null));
-    const b3 = block3([], [b4, b5]);
+    return block1([], [b2, b3]);
    const b6 = text(\`
 \`);
    return multi([b2, b3, b6]);
  }
 }"
 `;
@@ -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 block1([txt1, hdlr1]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><div><block-child-0/></div><div><block-child-1/></div></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 = toggler(tKey_2, comp2({blip: '2'}, tKey_2 + key + \`__2\`, node, this, null));
-    const b3 = block3([], [b4, b5]);
+    return block1([], [b2, b3]);
    return multi([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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><span><block-child-2/></span><block-child-3/></div>\`);
- <block-child-0/><block-child-1/>
+  let block2 = createBlock(\`<h1>hey</h1>\`);
- <span><block-child-2/></span>
+  let block3 = createBlock(\`<h2>noo</h2>\`);
- <block-child-3/>
+  let block5 = createBlock(\`<span>test</span>\`);
 </div>\`);
  let block4 = createBlock(\`<h1>hey</h1>\`);
  let block5 = createBlock(\`<h2>noo</h2>\`);
  let block7 = createBlock(\`<span>test</span>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3,b4,b5;
 \`);
    let b4,b5,b6,b7;
    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);
+    return block1([], [b2, b3, b4, b5]);
    if (ctx['state'].flag) {
      b7 = block7();
    }
    const b3 = block3([], [b4, b5, b6, b7]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
- <block-child-0/><block-child-1/>
+  let block2 = createBlock(\`<div>somediv</div>\`);
 </div>\`);
  let block4 = createBlock(\`<div>somediv</div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3;
 \`);
    let b4,b5;
    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 block1([], [b2, b3]);
    return multi([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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
- <block-child-0/><block-child-1/>
+  let block2 = createBlock(\`<div>somediv</div>\`);
 </div>\`);
  let block4 = createBlock(\`<div>somediv</div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3;
 \`);
    let b4,b5;
    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 block1([], [b2, b3]);
    return multi([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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
- <block-child-0/><block-child-1/>
+  let block2 = createBlock(\`<div>somediv</div>\`);
 </div>\`);
  let block4 = createBlock(\`<div>somediv</div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3;
 \`);
    let b4,b5;
    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 block1([], [b2, b3]);
    return multi([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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-child-1/></div>\`);
 <block-child-0/><block-child-0/>
 <block-child-1/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3;
 \`);
    let b4,b5;
    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);
+    b3 = comp2({}, key + \`__2\`, node, this, null);
-    const b3 = block3([], [b4, b5]);
+    return block1([], [b2, b3]);
    return multi([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>
+  let block1 = createBlock(\`<div><block-child-0/><span><block-text-0/></span></div>\`);
 <block-child-0/>
 <span><block-text-0/></span>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2;
 \`);
    let b4;
    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 block1([txt1], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></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 b2 = toggler(tKey_1, comp1(Object.assign({}, ctx['childProps']), tKey_1 + key + \`__1\`, node, this, null));
-    const b3 = block3([], [b4]);
+    return block1([], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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 toggler(tKey_1, comp1({key: ctx['props'].key,subKey: ctx['props'].subKey}, tKey_1 + key + \`__1\`, node, this, null));
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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\\">
+  let block1 = createBlock(\`<div class=\\"widget-subkey\\"><block-text-0/>__<block-text-1/></div>\`);
 <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 block1([txt1, txt2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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']);;
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['items']);;
-    for (let i1 = 0; i1 < l_block3; i1++) {
+    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = v_block3[i1];
+      ctx[\`item\`] = v_block1[i1];
      const key1 = ctx['item'];
-      const b5 = text(\`
+      c_block1[i1] = withKey(text(ctx['item']), key1);
 \`);
      const b6 = text(ctx['item']);
      const b7 = text(\`
 \`);
      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
    }
-    const b3 = list(c_block3);
+    return list(c_block1);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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\\">
+  let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
 <block-child-0/>
 </svg>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
- \`);
+    return block1([], [b2]);
    const b4 = comp1({}, key + \`__1\`, node, this, null);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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\\">
+  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>\`);
 <circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/>
 </g>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    return block1();
 \`);
    const b3 = block3();
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></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);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].items);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block4[i1];
+      ctx[\`item\`] = v_block2[i1];
      const key1 = ctx['item'];
-      const b6 = text(\`
+      const b4 = text(ctx['item']);
- \`);
+      const b5 = safeOutput(ctx['item']);
-      const b7 = text(ctx['item']);
+      c_block2[i1] = withKey(multi([b4, b5]), key1);
      const b8 = text(\`
 \`);
      const b9 = safeOutput(ctx['item']);
      const b10 = text(\`
 \`);
      c_block4[i1] = withKey(multi([b6, b7, b8, b9, b10]), key1);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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 b2 = safeOutput(ctx['state'].a);
- \`);
+    const b3 = safeOutput(ctx['state'].b);
-    const b3 = safeOutput(ctx['state'].a);
+    return multi([b2, b3]);
    const b4 = text(\`
 \`);
    const b5 = safeOutput(ctx['state'].b);
    const b6 = text(\`
 \`);
    return multi([b2, b3, b4, b5, b6]);
  }
 }"
 `;
@@ -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']);;
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['state']);;
-    for (let i1 = 0; i1 < l_block3; i1++) {
+    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`elem\`] = v_block3[i1];
+      ctx[\`elem\`] = v_block1[i1];
      const key1 = ctx['elem'].id;
-      const b5 = text(\`
+      c_block1[i1] = withKey(comp1({id: ctx['elem'].id}, key + \`__1__\${key1}\`, node, this, null), key1);
 \`);
      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);
    }
-    const b3 = list(c_block3);
+    return list(c_block1);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -151,16 +143,11 @@ exports[`calling render in destroy 3`] = `
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let block3 = createBlock(\`<div>
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
 <block-text-0/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
    const b2 = text(\`
 \`);
    let txt1 = ctx['props'].fromA;
-    const b3 = block3([txt1]);
+    return block1([txt1]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-text-0/><block-child-0/><block-child-1/></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 b2 = comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, this, null);
-    const b5 = comp2({fromA: ctx['state'].fromA}, key + \`__2\`, node, this, null);
+    const b3 = comp2({fromA: ctx['state'].fromA}, key + \`__2\`, node, this, null);
-    const b3 = block3([txt1], [b4, b5]);
+    return block1([txt1], [b2, b3]);
    return multi([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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
 <block-child-0/>
 <block-child-1/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3;
- \`);
+    b2 = comp1({}, key + \`__1\`, node, this, null);
    let b4,b5;
    b4 = 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 block1([], [b2, b3]);
    return multi([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>
+  let block1 = createBlock(\`<p><span><block-text-0/></span><span><block-text-1/></span><span><block-text-2/></span></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 block1([txt1, txt2, txt3]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -902,20 +869,13 @@ exports[`concurrent renderings scenario 15 3`] = `
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let block3 = createBlock(\`<p>
+  let block1 = createBlock(\`<p><span><block-text-0/></span><span><block-text-1/></span><span><block-text-2/></span></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 block1([txt1, txt2, txt3]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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;
+    let b2,b3,b4,b5,b6,b7,b8;
-    b2 = text(\`
+    b2 = text(ctx['props'].fromA);
- \`);
+    b3 = text(\`:\`);
-    b3 = text(ctx['props'].fromA);
+    b4 = text(ctx['props'].fromB);
-    b4 = text(\`:\`);
+    b5 = text(\`:\`);
-    b5 = text(ctx['props'].fromB);
+    b6 = text(ctx['state'].fromC);
-    b6 = text(\`:\`);
+    b7 = text(\`: \`);
    b7 = text(ctx['state'].fromC);
    b8 = 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;
+    let b2,b3;
    b2 = text(\`
 \`);
    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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
 <block-child-0/>
 <block-child-1/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3;
- \`);
+    b2 = comp1({val: ctx['state'].valA}, key + \`__1\`, node, this, null);
    let b4,b5;
    b4 = 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 block1([], [b2, b3]);
    return multi([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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
 <block-child-0/>
 <block-child-1/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3;
- \`);
+    b2 = comp1({val: ctx['state'].valA}, key + \`__1\`, node, this, null);
    let b4,b5;
    b4 = 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 block1([], [b2, b3]);
    return multi([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(\`
+    b2 = text(\` A \`);
 A
 \`);
    if (ctx['state'].flag) {
-      const b4 = text(\`
+      const b4 = comp1({value: ctx['state'].valueB}, key + \`__1\`, node, this, null);
- \`);
+      const b5 = comp2({value: ctx['state'].valueC}, key + \`__2\`, node, this, null);
-      const b5 = comp1({value: ctx['state'].valueB}, key + \`__1\`, node, this, null);
+      b3 = multi([b4, b5]);
      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]);
    }
    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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
 <block-child-0/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2;
 \`);
    let b4;
    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 block1([], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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 b2;
 \`);
    let b4;
    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 block1([], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click\\">Click</button><block-child-0/></div>\`);
 <button block-handler-0=\\"click\\">Click</button>
 <block-child-0/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2;
 \`);
    let b4;
    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 block1([hdlr1], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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;
+      let b3;
      b3 = text(\`
 \`);
      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]), key1);
 \`);
      c_block1[i1] = withKey(multi([b3, b4, b5]), key1);
    }
    return list(c_block1);
  }
@@ -20,7 +20,7 @@ exports[`basics display a nice error if it cannot find component (in dev mode) 1
  return function template(ctx, node, key = \\"\\") {
    const props1 = {};
-    helpers.validateProps(\`SomeMispelledComponent\`, props1, ctx);
+    helpers.validateProps(\`SomeMispelledComponent\`, props1, this);
    return comp1(props1, key + \`__1\`, node, this, null);
  }
 }"
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
 <block-child-0/><block-child-1/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3;
 \`);
    let b4,b5;
    if (ctx['error']) {
-      b4 = text(\`Error\`);
+      b2 = text(\`Error\`);
    } else {
-      const b6 = text(\`
+      b3 = comp1({}, key + \`__1\`, node, this, null);
 \`);
      const b7 = comp1({}, key + \`__1\`, node, this, null);
      const b8 = text(\`
 \`);
      b5 = multi([b6, b7, b8]);
    }
-    const b3 = block3([], [b4, b5]);
+    return block1([], [b2, b3]);
    return multi([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;
+    let b2,b3;
-    b2 = text(\`
+    b2 = text(ctx['state'].value);
 \`);
    b3 = text(ctx['state'].value);
    b4 = text(\`
 \`);
    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;
+    let b2,b3;
-    b2 = text(\`
+    b2 = text(ctx['state'].value);
 \`);
    b3 = text(ctx['state'].value);
    b4 = text(\`
 \`);
    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>
+  let block1 = createBlock(\`<div><block-child-0/></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 b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
- \`);
+    return block1([], [b3]);
    const b5 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
    const b3 = block3([], [b5]);
    return multi([b2, 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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
 <block-child-0/><block-child-1/><block-child-1/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3;
 \`);
    let b4,b5;
    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 block1([], [b2, b3]);
    return multi([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>
+  let block1 = createBlock(\`<div><block-child-0/></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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></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>
+  let block1 = createBlock(\`<div><block-child-0/></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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></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>
+  let block1 = createBlock(\`<div><block-child-0/></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 b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
- \`);
+    return block1([], [b3]);
    const b5 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
    const b3 = block3([], [b5]);
    return multi([b2, 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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
 <block-child-0/><block-child-1/><block-child-1/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3;
 \`);
    let b4,b5;
    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 block1([], [b2, b3]);
    return multi([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>
+  let block1 = createBlock(\`<div><block-child-0/></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 b3;
 \`);
    let b5;
    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 block1([], [b3]);
    return multi([b2, 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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
 <block-child-0/><block-child-1/><block-child-1/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3;
 \`);
    let b4,b5;
    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 block1([], [b2, b3]);
    return multi([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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></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>
+  let block1 = createBlock(\`<div><block-child-0/></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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></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>
+  let block1 = createBlock(\`<div><span><block-text-0/></span><block-child-0/></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 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
-    const b3 = block3([txt1], [b5]);
+    return block1([txt1], [b3]);
    return multi([b2, 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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
 <block-child-0/><block-child-1/><block-child-1/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3;
 \`);
    let b4,b5;
    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 block1([], [b2, b3]);
    return multi([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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
 <block-child-0/><block-child-1/><block-child-1/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3;
 \`);
    let b4,b5;
    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 block1([], [b2, b3]);
    return multi([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>
+  let block1 = createBlock(\`<div><block-child-0/></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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
 <block-child-0/><block-child-1/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3;
 \`);
    let b4,b5;
    if (ctx['error']) {
-      b4 = text(\`Error\`);
+      b2 = text(\`Error\`);
    } else {
-      const b6 = text(\`
+      b3 = comp1({}, key + \`__1\`, node, this, null);
 \`);
      const b7 = comp1({}, key + \`__1\`, node, this, null);
      const b8 = text(\`
 \`);
      b5 = multi([b6, b7, b8]);
    }
-    const b3 = block3([], [b4, b5]);
+    return block1([], [b2, b3]);
    return multi([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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
 <block-child-0/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
- \`);
+    return block1([], [b2]);
    const b4 = comp1({}, key + \`__1\`, node, this, null);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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));
+    return toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
    const b9 = text(\`
 \`);
    return multi([b7, b8, b9]);
  }
  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));;
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(Object.values(ctx['state'].cps));;
-    for (let i1 = 0; i1 < l_block3; i1++) {
+    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`cp\`] = v_block3[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);
+      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 b11 = text(\`
 \`);
      c_block3[i1] = withKey(multi([b5, b10, b11]), key1);
    }
-    const b3 = list(c_block3);
+    return list(c_block1);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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));
+    return toggler(Comp1, comp1({id: ctx['elem'][0]}, key + \`__1\`, node, this, Comp1));
    const b9 = text(\`
 \`);
    return multi([b7, b8, b9]);
  }
  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));;
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(Object.entries(this.elements));;
-    for (let i1 = 0; i1 < l_block3; i1++) {
+    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`elem\`] = v_block3[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);
+      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);
      const b11 = text(\`
 \`);
      c_block3[i1] = withKey(multi([b5, b10, b11]), key1);
    }
-    ctx = ctx.__proto__;
+    return list(c_block1);
    const b3 = list(c_block3);
    const b12 = text(\`
 \`);
    return multi([b2, b3, b12]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></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(\`
+      b2 = text(this.will.crash);
 \`);
      const b4 = text(this.will.crash);
      const b5 = text(\`
 \`);
      b2 = multi([b3, b4, b5]);
    } else {
-      const b7 = text(\`
+      b3 = text(ctx['state'].error);
 \`);
      const b8 = text(ctx['state'].error);
      const b9 = text(\`
 \`);
      b6 = multi([b7, b8, b9]);
    }
-    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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></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(\`
+      b2 = text(this.will.crash);
 \`);
      const b4 = text(this.will.crash);
      const b5 = text(\`
 \`);
      b2 = multi([b3, b4, b5]);
    } else {
-      const b7 = text(\`
+      b3 = text(ctx['state'].error);
 \`);
      const b8 = text(ctx['state'].error);
      const b9 = text(\`
 \`);
      b6 = multi([b7, b8, b9]);
    }
-    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();
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/><textarea/></div>\`);
 <block-child-0/>
 <textarea/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2;
 \`);
    let b4;
    if (ctx['state'].cond) {
-      b4 = comp1({}, key + \`__1\`, node, this, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
    }
-    const b3 = block3([], [b4]);
+    return block1([], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- <block-child-0/>
+  let block3 = createBlock(\`<div class=\\"item\\" block-handler-0=\\"click\\"/>\`);
 </div>\`);
  let block7 = 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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block4[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]);
+      c_block2[i1] = withKey(block3([hdlr1]), key1);
      const b8 = text(\`
 \`);
      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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 block1([txt1, hdlr1]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- <block-child-0/>
+  let block3 = createBlock(\`<div class=\\"item\\" block-handler-0=\\"click\\"/>\`);
 </div>\`);
  let block7 = 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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block4[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]);
+      c_block2[i1] = withKey(block3([hdlr1]), key1);
      const b8 = text(\`
 \`);
      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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;
+    let b2,b3;
    b2 = text(\`
 \`);
    b3 = text(\`
 \`);
    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(\`
+    return multi([b2, b3]);
 \`);
    b8 = text(\`
 \`);
    return multi([b2, b3, b4, b5, b6, b7, b8]);
  }
 }"
 `;
@@ -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;
+    let b2,b3;
    b2 = text(\`
 \`);
    b3 = text(\`
 \`);
    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(\`
+    return multi([b2, b3]);
 \`);
    b8 = text(\`
 \`);
    return multi([b2, b3, b4, b5, b6, b7, b8]);
  }
 }"
 `;
@@ -155,17 +135,12 @@ exports[`basics sub widget is interactive 2`] = `
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let block3 = createBlock(\`<span>
+  let block1 = createBlock(\`<span><button block-handler-0=\\"click\\">click</button>child<block-text-1/></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 block1([hdlr1, txt1]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><input block-ref=\\"0\\"/><block-child-0/></div>\`);
- <input block-ref=\\"0\\"/>
+  let block2 = createBlock(\`<input block-ref=\\"0\\"/>\`);
 <block-child-0/>
 </div>\`);
  let block4 = 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 b2;
 \`);
    let b4;
    if (ctx['state'].flag) {
-      b4 = block4([ref2]);
+      b2 = block2([ref2]);
    }
-    const b3 = block3([ref1], [b4]);
+    return block1([ref1], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -32,19 +26,13 @@ exports[`hooks autofocus hook simple input 1`] = `
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let block3 = createBlock(\`<div>
+  let block1 = createBlock(\`<div><input block-ref=\\"0\\"/><input block-ref=\\"1\\"/></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(\`
+    return block1([ref1, ref2]);
 \`);
    const b3 = block3([ref1, ref2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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;
+    let b2;
    b2 = text(\`
 \`);
    if (ctx['state'].value) {
-      const b4 = text(\`
+      b2 = block2([ref1]);
 \`);
      const b5 = block5([ref1]);
      const b6 = text(\`
 \`);
      b3 = multi([b4, b5, b6]);
    }
-    return multi([b2, b3]);
+    return multi([b2]);
  }
 }"
 `;
@@ -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/>
+  let block1 = createBlock(\`<div>C<block-child-0/><block-child-1/><block-child-2/></div>\`);
 <block-child-1/><block-child-2/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3,b4;
- \`);
+    b2 = comp1({}, key + \`__1\`, node, this, null);
    let b4,b5,b6;
    b4 = 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 block1([], [b2, b3, b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block2 = createBlock(\`<div><block-child-0/></div>\`);
 <block-child-0/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b5;
+    let b2;
    b2 = text(\`
 \`);
    if (ctx['state'].flag) {
-      const b4 = comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
+      const b3 = comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
-      b3 = block3([], [b4]);
+      b2 = block2([], [b3]);
    }
-    b5 = text(\`
+    return multi([b2]);
 \`);
    return multi([b2, b3, b5]);
  }
 }"
 `;
@@ -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(\`
+    return comp1({someValue: ctx['state'].value}, key + \`__1\`, node, this, null);
 \`);
    const b3 = comp1({someValue: ctx['state'].value}, key + \`__1\`, node, this, null);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -718,7 +704,7 @@ exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 1`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {prop: ctx['state'].prop};
-    helpers.validateProps(\`Child\`, props1, ctx);
+    helpers.validateProps(\`Child\`, props1, this);
    return comp1(props1, 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 b2 = comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
- \`);
+    return block1([], [b2]);
    const b4 = comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
    const b3 = block3([], [b4]);
    const b5 = text(\`
 \`);
    return multi([b2, b3, b5]);
  }
 }"
 `;
@@ -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 b2 = comp1({n: ctx['props'].n}, key + \`__1\`, node, this, null);
- \`);
+    return block1([], [b2]);
    const b4 = comp1({n: ctx['props'].n}, key + \`__1\`, node, this, null);
    const b3 = block3([], [b4]);
    const b5 = text(\`
 \`);
    return multi([b2, b3, b5]);
  }
 }"
 `;
@@ -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]);
+    return block1([txt1]);
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
- <block-child-0/><block-child-1/>
+  let block3 = createBlock(\`<div/>\`);
 </div>\`);
  let block10 = createBlock(\`<div/>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3;
 \`);
    let b4,b8;
    if (ctx['state'].ok) {
-      const b5 = text(\`
+      b2 = comp1({}, key + \`__1\`, node, this, null);
 \`);
      const b6 = comp1({}, key + \`__1\`, node, this, null);
      const b7 = text(\`
 \`);
      b4 = multi([b5, b6, b7]);
    } else {
-      const b9 = text(\`
+      b3 = block3();
 \`);
      const b10 = block10();
      const b11 = text(\`
 \`);
      b8 = multi([b9, b10, b11]);
    }
-    const b3 = block3([], [b4, b8]);
+    return block1([], [b2, b3]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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']);;
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['items']);;
-    for (let i1 = 0; i1 < l_block3; i1++) {
+    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = v_block3[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);
+      c_block1[i1] = withKey(comp1({onClick: _ev=>v1(v2.val,_ev)}, key + \`__1__\${key1}\`, node, this, null), key1);
      const b7 = text(\`
 \`);
      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
    }
-    ctx = ctx.__proto__;
+    return list(c_block1);
    const b3 = list(c_block3);
    const b8 = text(\`
 \`);
    return multi([b2, b3, b8]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- 
+  let block2 = createBlock(\`<p>43</p>\`);
 <block-child-0/>
 </div>\`);
  let block4 = 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, key);
- \`);
+    const b3 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
-    ctx[\`abc\`] = new LazyValue(value1, ctx, this, node);
+    return block1([], [b3]);
    const b5 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
    const b3 = block3([], [b5]);
    return multi([b2, 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>
+  let block1 = createBlock(\`<span><block-text-0/><block-child-0/></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 b2 = safeOutput(ctx['props'].val);
-    const b3 = block3([txt1], [b4]);
+    return block1([txt1], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></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 b2 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
-    const b3 = block3([], [b4]);
+    return block1([], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></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 b2 = comp1({val: ctx['val']}, key + \`__1\`, node, this, null);
-    const b3 = block3([], [b4]);
+    return block1([], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -8,7 +8,7 @@ exports[`default props a default prop cannot be defined on a mandatory prop 1`]
  return function template(ctx, node, key = \\"\\") {
    const props1 = {};
-    helpers.validateProps(\`Child\`, props1, ctx);
+    helpers.validateProps(\`Child\`, props1, this);
    return comp1(props1, key + \`__1\`, node, this, null);
  }
 }"
@@ -24,7 +24,7 @@ exports[`default props can set default boolean values 1`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -61,7 +61,7 @@ exports[`default props can set default values 1`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -92,7 +92,7 @@ exports[`default props default values are also set whenever component is updated
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['state'].p};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -121,7 +121,7 @@ exports[`props validation can specify that additional props are allowed (array)
  return function template(ctx, node, key = \\"\\") {
    const props1 = {message: 'm',otherProp: 'o'};
-    helpers.validateProps(\`Child\`, props1, ctx);
+    helpers.validateProps(\`Child\`, props1, this);
    return comp1(props1, key + \`__1\`, node, this, null);
  }
 }"
@@ -148,7 +148,7 @@ exports[`props validation can specify that additional props are allowed (object)
  return function template(ctx, node, key = \\"\\") {
    const props1 = {message: 'm',otherProp: 'o'};
-    helpers.validateProps(\`Child\`, props1, ctx);
+    helpers.validateProps(\`Child\`, props1, this);
    return comp1(props1, key + \`__1\`, node, this, null);
  }
 }"
@@ -177,7 +177,7 @@ exports[`props validation can validate a prop with multiple types 1`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -207,7 +207,7 @@ exports[`props validation can validate a prop with multiple types 3`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -237,7 +237,7 @@ exports[`props validation can validate a prop with multiple types 5`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -254,7 +254,7 @@ exports[`props validation can validate an array with given primitive type 1`] =
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -284,7 +284,7 @@ exports[`props validation can validate an array with given primitive type 3`] =
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -314,7 +314,7 @@ exports[`props validation can validate an array with given primitive type 5`] =
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -331,7 +331,7 @@ exports[`props validation can validate an array with given primitive type 6`] =
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -348,7 +348,7 @@ exports[`props validation can validate an array with multiple sub element types
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -378,7 +378,7 @@ exports[`props validation can validate an array with multiple sub element types
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -408,7 +408,7 @@ exports[`props validation can validate an array with multiple sub element types
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -438,7 +438,7 @@ exports[`props validation can validate an array with multiple sub element types
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -455,7 +455,7 @@ exports[`props validation can validate an object with simple shape 1`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -485,7 +485,7 @@ exports[`props validation can validate an object with simple shape 3`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -502,7 +502,7 @@ exports[`props validation can validate an object with simple shape 4`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -519,7 +519,7 @@ exports[`props validation can validate an object with simple shape 5`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -536,7 +536,7 @@ exports[`props validation can validate an optional props 1`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -566,7 +566,7 @@ exports[`props validation can validate an optional props 3`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -596,7 +596,7 @@ exports[`props validation can validate an optional props 5`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -613,7 +613,7 @@ exports[`props validation can validate recursively complicated prop def 1`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -643,7 +643,7 @@ exports[`props validation can validate recursively complicated prop def 3`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -673,13 +673,47 @@ exports[`props validation can validate recursively complicated prop def 5`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
 }"
 `;
 exports[`props validation can validate through slots 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { markRaw } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
  const comp2 = app.createComponent(\`Wrapper\`, true, true, false, true);
  function slot1(ctx, node, key = \\"\\") {
    const props1 = {};
    helpers.validateProps(\`Child\`, props1, this);
    return comp1(props1, key + \`__1\`, node, this, null);
  }
  return function template(ctx, node, key = \\"\\") {
    const props2 = {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})};
    helpers.validateProps(\`Wrapper\`, props2, this);
    return comp2(props2, key + \`__2\`, node, this, null);
  }
 }"
 `;
 exports[`props validation can validate through slots 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { callSlot } = helpers;
  return function template(ctx, node, key = \\"\\") {
    return callSlot(ctx, node, key, 'default', false, {});
  }
 }"
 `;
 exports[`props validation default values are applied before validating props at update 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -690,7 +724,7 @@ exports[`props validation default values are applied before validating props at
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['state'].p};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -721,7 +755,7 @@ exports[`props validation missing required boolean prop causes an error 1`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -738,7 +772,7 @@ exports[`props validation mix of optional and mandatory 1`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {};
-    helpers.validateProps(\`Child\`, props1, ctx);
+    helpers.validateProps(\`Child\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -755,7 +789,7 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
  return function template(ctx, node, key = \\"\\") {
    const props1 = {message: 1};
-    helpers.validateProps(\`Child\`, props1, ctx);
+    helpers.validateProps(\`Child\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -786,7 +820,7 @@ exports[`props validation props are validated whenever component is updated 1`]
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['state'].p};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -817,7 +851,7 @@ exports[`props validation props: list of strings 1`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -834,7 +868,7 @@ exports[`props validation validate simple types 1`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -851,7 +885,7 @@ exports[`props validation validate simple types 2`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -881,7 +915,7 @@ exports[`props validation validate simple types 4`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -898,7 +932,7 @@ exports[`props validation validate simple types 5`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -915,7 +949,7 @@ exports[`props validation validate simple types 6`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -945,7 +979,7 @@ exports[`props validation validate simple types 8`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -962,7 +996,7 @@ exports[`props validation validate simple types 9`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -979,7 +1013,7 @@ exports[`props validation validate simple types 10`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1009,7 +1043,7 @@ exports[`props validation validate simple types 12`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1026,7 +1060,7 @@ exports[`props validation validate simple types 13`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1043,7 +1077,7 @@ exports[`props validation validate simple types 14`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1073,7 +1107,7 @@ exports[`props validation validate simple types 16`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1090,7 +1124,7 @@ exports[`props validation validate simple types 17`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1107,7 +1141,7 @@ exports[`props validation validate simple types 18`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1137,7 +1171,7 @@ exports[`props validation validate simple types 20`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1154,7 +1188,7 @@ exports[`props validation validate simple types 21`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1171,7 +1205,7 @@ exports[`props validation validate simple types 22`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1201,7 +1235,7 @@ exports[`props validation validate simple types 24`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1218,7 +1252,7 @@ exports[`props validation validate simple types, alternate form 1`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1235,7 +1269,7 @@ exports[`props validation validate simple types, alternate form 2`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1265,7 +1299,7 @@ exports[`props validation validate simple types, alternate form 4`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1282,7 +1316,7 @@ exports[`props validation validate simple types, alternate form 5`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1299,7 +1333,7 @@ exports[`props validation validate simple types, alternate form 6`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1329,7 +1363,7 @@ exports[`props validation validate simple types, alternate form 8`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1346,7 +1380,7 @@ exports[`props validation validate simple types, alternate form 9`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1363,7 +1397,7 @@ exports[`props validation validate simple types, alternate form 10`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1393,7 +1427,7 @@ exports[`props validation validate simple types, alternate form 12`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1410,7 +1444,7 @@ exports[`props validation validate simple types, alternate form 13`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1427,7 +1461,7 @@ exports[`props validation validate simple types, alternate form 14`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1457,7 +1491,7 @@ exports[`props validation validate simple types, alternate form 16`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1474,7 +1508,7 @@ exports[`props validation validate simple types, alternate form 17`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1491,7 +1525,7 @@ exports[`props validation validate simple types, alternate form 18`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1521,7 +1555,7 @@ exports[`props validation validate simple types, alternate form 20`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1538,7 +1572,7 @@ exports[`props validation validate simple types, alternate form 21`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1555,7 +1589,7 @@ exports[`props validation validate simple types, alternate form 22`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1585,7 +1619,7 @@ exports[`props validation validate simple types, alternate form 24`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1602,7 +1636,7 @@ exports[`props validation validation is only done in dev mode 1`] = `
  return function template(ctx, node, key = \\"\\") {
    const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -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]);
+    return block1([txt1]);
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
 <block-child-0/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2;
 \`);
    let b4;
    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 block1([], [b2]);
    const b5 = text(\`
 \`);
    return multi([b2, b3, b5]);
  }
 }"
 `;
@@ -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]);
+    return block1([txt1, txt2]);
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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 block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
-  let block9 = createBlock(\`<span 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;
+    let b2,b3;
    b2 = text(\`
 \`);
    if (ctx['state'].value) {
-      const b4 = text(\`
+      b2 = block2([ref1]);
 \`);
      const b5 = block5([ref1]);
      const b6 = text(\`
 \`);
      b3 = multi([b4, b5, b6]);
    } else {
-      const b8 = text(\`
+      b3 = block3([ref1]);
 \`);
      const b9 = block9([ref1]);
      const b10 = text(\`
 \`);
      b7 = multi([b8, b9, b10]);
    }
-    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\\">
+  let block1 = createBlock(\`<p block-ref=\\"0\\"><block-text-1/><block-child-0/></p>\`);
 <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 b2;
 \`);
    let b4;
    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 block1([ref1, txt1], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><span class=\\"counter\\"><block-text-0/></span><block-child-0/></div>\`);
- <span class=\\"counter\\"><block-text-0/></span>
+  let block2 = createBlock(\`<button block-handler-0=\\"click\\" block-ref=\\"1\\">do something</button>\`);
 <block-child-0/>
 </div>\`);
  let block4 = 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]);
+    return block2([hdlr1, ref1]);
  }
  function slot2(ctx, node, key = \\"\\") {
    const b6 = text(\`
 \`);
    const b7 = text(\`
 \`);
    return multi([b6, b7]);
  }
  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 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
-    const b3 = block3([txt1], [b8]);
+    return block1([txt1], [b3]);
    const b9 = text(\`
 \`);
    return multi([b2, b3, b9]);
  }
 }"
 `;
@@ -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 block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
-  let block5 = createBlock(\`<span 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(\`
+    return multi([b2, b3]);
 \`);
    const b5 = block5([ref1]);
    return multi([b2, b3, b4, b5]);
  }
 }"
 `;
@@ -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 b2 = text(ctx['state'].value);
- \`);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
-    const b3 = text(ctx['state'].value);
+    return multi([b2, b3]);
    const b4 = text(\`
 \`);
    const b5 = comp1({}, key + \`__1\`, node, this, null);
    const b6 = text(\`
 \`);
    return multi([b2, b3, b4, b5, b6]);
  }
 }"
 `;
@@ -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 b2 = text(ctx['state'].value);
- \`);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
-    const b3 = text(ctx['state'].value);
+    return multi([b2, b3]);
    const b4 = text(\`
 \`);
    const b5 = comp1({}, key + \`__1\`, node, this, null);
    const b6 = text(\`
 \`);
    return multi([b2, b3, b4, b5, b6]);
  }
 }"
 `;
@@ -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 b2 = text(ctx['state'].value);
- \`);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
-    const b3 = text(ctx['state'].value);
+    return multi([b2, b3]);
    const b4 = text(\`
 \`);
    const b5 = comp1({}, key + \`__1\`, node, this, null);
    const b6 = text(\`
 \`);
    return multi([b2, b3, b4, b5, b6]);
  }
 }"
 `;
@@ -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(\`
+    return comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
 \`);
    const b3 = comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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(\`
+    return comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
 \`);
    const b3 = comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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 b2 = text(ctx['state'].value);
- \`);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
-    const b3 = text(ctx['state'].value);
+    return multi([b2, b3]);
    const b4 = text(\`
 \`);
    const b5 = comp1({}, key + \`__1\`, node, this, null);
    const b6 = text(\`
 \`);
    return multi([b2, b3, b4, b5, b6]);
  }
 }"
 `;
@@ -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(\`
+    return comp1(Object.assign({}, ctx['state']), key + \`__1\`, node, this, null);
 \`);
    const b3 = comp1(Object.assign({}, ctx['state']), key + \`__1\`, node, this, null);
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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(\`
+    return block1();
 \`);
    const b3 = block3();
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
 <block-child-0/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    const b2 = comp1({class: {b:ctx['state'].b}}, key + \`__1\`, node, this, null);
- \`);
+    return block1([], [b2]);
    const b4 = comp1({class: {b:ctx['state'].b}}, key + \`__1\`, node, this, null);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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(\`
+    const b1 = text(\` owl \`);
- owl
+    ctx[zero] = b1;
 \`);
    ctx[zero] = b3;
    const template1 = (ctx['current'].template);
-    const b4 = call(this, template1, ctx, node, key + \`__1\`);
+    return call(this, template1, ctx, node, key + \`__1\`);
    return multi([b2, b4]);
  }
 }"
 `;
@@ -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 block1([txt1], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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 b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
 \`);
    const b4 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
    let txt1 = ctx['counter'];
-    const b3 = block3([txt1], [b4]);
+    return block1([txt1], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    ctx = ctx.__proto__;
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    const b5 = text(\`
 \`);
    return multi([b2, b3, b5]);
  }
 }"
 `;
@@ -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;
+    let b2;
    b2 = text(\`
 \`);
    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 b3 = block3([hdlr1, txt1]);
      const b6 = text(\`
 \`);
      ctx = Object.create(ctx);
      ctx[isBoundary] = 1;
      const b8 = text(\`
 \`);
      setContextValue(ctx, \\"level\\", ctx['level']+1);
-      const b9 = text(\`
+      const b4 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
 \`);
      const b7 = multi([b8, b9]);
      ctx[zero] = b7;
      const b10 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
      ctx = ctx.__proto__;
-      const b11 = text(\`
+      b2 = multi([b3, b4]);
 \`);
      b3 = multi([b4, b5, b6, b10, b11]);
    }
-    b12 = text(\`
+    return multi([b2]);
 \`);
    return multi([b2, b3, b12]);
  }
 }"
 `;
@@ -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;
+    let b2,b3;
    b2 = text(\`
 \`);
    if (ctx['state'].val===1) {
-      const b4 = text(\`
+      b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
 \`);
      const b5 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
      const b6 = text(\`
 \`);
      b3 = multi([b4, b5, b6]);
    } else {
-      const b8 = callTemplate_2.call(this, ctx, node, key + \`__2\`);
+      const b4 = callTemplate_2.call(this, ctx, node, key + \`__2\`);
-      b7 = block7([], [b8]);
+      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>
+  let block1 = createBlock(\`<div><block-child-0/></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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b','c']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block4[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(\`
+      c_block2[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
 \`);
      const b7 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
      const b8 = text(\`
 \`);
      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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 callTemplate_1.call(this, ctx1, node, key + \`__1\`);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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 b2 = comp1({name: ctx['aab']}, key + \`__1\`, node, this, null);
- \`);
+    const b3 = comp2({name: ctx['lpe']}, key + \`__2\`, node, this, null);
-    const b3 = comp1({name: ctx['aab']}, key + \`__1\`, node, this, null);
+    return multi([b2, b3]);
    const b4 = text(\`
 \`);
    const b5 = comp2({name: ctx['lpe']}, key + \`__2\`, node, this, null);
    const b6 = text(\`
 \`);
    return multi([b2, b3, b4, b5, b6]);
  }
 }"
 `;
@@ -504,6 +444,51 @@ exports[`t-call t-call with t-call-context and subcomponent 3`] = `
 }"
 `;
 exports[`t-call t-call with t-call-context and subcomponent, in dev mode 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`someTemplate\`);
  return function template(ctx, node, key = \\"\\") {
    let ctx1 = ctx['subctx'];
    return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
  }
 }"
 `;
 exports[`t-call t-call with t-call-context and subcomponent, in dev mode 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
  const comp2 = app.createComponent(\`Child\`, true, false, false, false);
  return function template(ctx, node, key = \\"\\") {
    const props1 = {name: ctx['aab']};
    helpers.validateProps(\`Child\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    const props2 = {name: ctx['lpe']};
    helpers.validateProps(\`Child\`, props2, this);
    const b3 = comp2(props2, key + \`__2\`, node, this, null);
    return multi([b2, b3]);
  }
 }"
 `;
 exports[`t-call t-call with t-call-context and subcomponent, in dev mode 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
    const b2 = text(\`child\`);
    const b3 = text(ctx['props'].name);
    return multi([b2, b3]);
  }
 }"
 `;
 exports[`t-call t-call with t-call-context, simple use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -511,11 +496,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 callTemplate_1.call(this, ctx1, node, key + \`__1\`);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></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 b2 = toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
-    const b3 = block3([], [b4]);
+    return block1([], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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 block1([txt1, hdlr1]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><ul><block-child-0/></ul></div>\`);
- <ul>
+  let block3 = createBlock(\`<li><block-child-0/></li>\`);
 <block-child-0/>
 </ul>
 </div>\`);
  let block7 = 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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block4[i1];
+      ctx[\`item\`] = v_block2[i1];
      const key1 = 'li_'+ctx['item'];
-      const b6 = text(\`
+      const b4 = comp1({item: ctx['item']}, key + \`__1__\${key1}\`, node, this, null);
- \`);
+      c_block2[i1] = withKey(block3([], [b4]), key1);
      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);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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 [k_block1, v_block1, l_block1, c_block1] = prepareList([1,2]);;
-    const keys3 = new Set();
+    const keys1 = new Set();
-    for (let i1 = 0; i1 < l_block3; i1++) {
+    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = v_block3[i1];
+      ctx[\`item\`] = v_block1[i1];
      const key1 = 'child';
-      if (keys3.has(key1)) { throw new Error(\`Got duplicate key in t-foreach: \${key1}\`)}
+      if (keys1.has(String(key1))) { throw new OwlError(\`Got duplicate key in t-foreach: \${key1}\`)}
-      keys3.add(key1);
+      keys1.add(String(key1));
      const b5 = text(\`
 \`);
      const props1 = {};
-      helpers.validateProps(\`Child\`, props1, ctx);
+      helpers.validateProps(\`Child\`, props1, this);
-      const b6 = comp1(props1, key + \`__1__\${key1}\`, node, this, null);
+      c_block1[i1] = withKey(comp1(props1, key + \`__1__\${key1}\`, node, this, null), key1);
      const b7 = text(\`
 \`);
      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
    }
-    ctx = ctx.__proto__;
+    return list(c_block1);
    const b3 = list(c_block3);
    const b8 = text(\`
 \`);
    return multi([b2, b3, b8]);
  }
 }"
 `;
@@ -101,6 +75,42 @@ exports[`list of components crash on duplicate key in dev mode 2`] = `
 }"
 `;
 exports[`list of components crash when using object as keys that serialize to the same string 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, OwlError, withKey } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList([{},{}]);;
    const keys1 = new Set();
    for (let i1 = 0; i1 < l_block1; i1++) {
      ctx[\`item\`] = v_block1[i1];
      const key1 = ctx['item'];
      if (keys1.has(String(key1))) { throw new OwlError(\`Got duplicate key in t-foreach: \${key1}\`)}
      keys1.add(String(key1));
      const props1 = {};
      helpers.validateProps(\`Child\`, props1, this);
      c_block1[i1] = withKey(comp1(props1, key + \`__1__\${key1}\`, node, this, null), key1);
    }
    return list(c_block1);
  }
 }"
 `;
 exports[`list of components crash when using object as keys that serialize to the same string 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
    return text(\`\`);
  }
 }"
 `;
 exports[`list of components list of sub components inside other nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -108,28 +118,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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- <block-child-0/>
+  let block3 = createBlock(\`<div><block-child-0/></div>\`);
 </div>\`);
  let block5 = 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);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].blips);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`blip\`] = v_block4[i1];
+      ctx[\`blip\`] = v_block2[i1];
      const key1 = ctx['blip'].id;
-      const b6 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
+      const b4 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
-      c_block4[i1] = withKey(block5([], [b6]), key1);
+      c_block2[i1] = withKey(block3([], [b4]), key1);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -147,6 +149,58 @@ exports[`list of components list of sub components inside other nodes 2`] = `
 }"
 `;
 exports[`list of components order is correct when slots are not of same type 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { capture, markRaw } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
  let block2 = createBlock(\`<div>A</div>\`);
  function slot1(ctx, node, key = \\"\\") {
    let b2;
    if (!ctx['state'].active) {
      b2 = block2();
    }
    return multi([b2]);
  }
  function slot2(ctx, node, key = \\"\\") {
    return text(\`B\`);
  }
  function slot3(ctx, node, key = \\"\\") {
    return text(\`C\`);
  }
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
    return comp1({slots: markRaw({'a': {__render: slot1, __ctx: ctx1, active: !ctx['state'].active}, 'b': {__render: slot2, __ctx: ctx1, active: true}, 'c': {__render: slot3, __ctx: ctx1, active: ctx['state'].active}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
 exports[`list of components order is correct when slots are not of same type 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, callSlot, withKey } = helpers;
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['slotNames']);;
    for (let i1 = 0; i1 < l_block1; i1++) {
      ctx[\`slotName\`] = v_block1[i1];
      const key1 = ctx['slotName'];
      const slot1 = (ctx['slotName']);
      c_block1[i1] = withKey(toggler(slot1, callSlot(ctx, node, key1 + \`__1__\${key1}\`, slot1, true, {})), key1);
    }
    return list(c_block1);
  }
 }"
 `;
 exports[`list of components reconciliation alg works for t-foreach in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -154,44 +208,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>
+  let block1 = createBlock(\`<div><block-child-0/></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);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].s);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`section\`] = v_block4[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);;
+      const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['section'].blips);;
-      for (let i2 = 0; i2 < l_block7; i2++) {
+      for (let i2 = 0; i2 < l_block3; i2++) {
-        ctx[\`blip\`] = v_block7[i2];
+        ctx[\`blip\`] = v_block3[i2];
        ctx[\`blip_index\`] = i2;
        const key2 = ctx['blip_index'];
-        const b9 = text(\`
+        c_block3[i2] = withKey(comp1({blip: ctx['blip']}, key + \`__1__\${key1}__\${key2}\`, node, this, null), key2);
 \`);
        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);
      }
      ctx = ctx.__proto__;
-      const b7 = list(c_block7);
+      c_block2[i1] = withKey(list(c_block3), key1);
      const b12 = text(\`
 \`);
      c_block4[i1] = withKey(multi([b6, b7, b12]), key1);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -217,40 +255,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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- <block-child-0/>
+  let block3 = createBlock(\`<p><block-child-0/></p>\`);
- </div>\`);
+  let block5 = createBlock(\`<p><block-child-0/></p>\`);
  let block5 = createBlock(\`<p>
 <block-child-0/>
 </p>\`);
  let block7 = 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);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].rows);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`row\`] = v_block4[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);;
+      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].cols);;
-      for (let i2 = 0; i2 < l_block6; i2++) {
+      for (let i2 = 0; i2 < l_block4; i2++) {
-        ctx[\`col\`] = v_block6[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);
+        const b6 = comp1({row: ctx['row'],col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, this, null);
-        c_block6[i2] = withKey(block7([], [b8]), key2);
+        c_block4[i2] = withKey(block5([], [b6]), key2);
      }
      ctx = ctx.__proto__;
-      const b6 = list(c_block6);
+      const b4 = list(c_block4);
-      c_block4[i1] = withKey(block5([], [b6]), key1);
+      c_block2[i1] = withKey(block3([], [b4]), key1);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -277,22 +305,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);;
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['state'].elems);;
-    for (let i1 = 0; i1 < l_block3; i1++) {
+    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`elem\`] = v_block3[i1];
+      ctx[\`elem\`] = v_block1[i1];
      const key1 = ctx['elem'].id;
-      const b5 = text(\`
+      c_block1[i1] = withKey(comp1({value: ctx['elem'].value}, key + \`__1__\${key1}\`, node, this, null), key1);
 \`);
      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);
    }
-    const b3 = list(c_block3);
+    return list(c_block1);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -318,29 +338,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>
+  let block1 = createBlock(\`<div><block-child-0/></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);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].numbers);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`number\`] = v_block4[i1];
+      ctx[\`number\`] = v_block2[i1];
      const key1 = ctx['number'];
-      const b6 = text(\`
+      c_block2[i1] = withKey(comp1({n: ctx['number']}, key + \`__1__\${key1}\`, node, this, null), key1);
 \`);
      const b7 = comp1({n: ctx['number']}, key + \`__1__\${key1}\`, node, this, null);
      const b8 = text(\`
 \`);
      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -366,29 +375,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>
+  let block1 = createBlock(\`<div><block-child-0/></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);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].numbers);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`number\`] = v_block4[i1];
+      ctx[\`number\`] = v_block2[i1];
      const key1 = ctx['number'];
-      const b6 = text(\`
+      c_block2[i1] = withKey(comp1({}, key + \`__1__\${key1}\`, node, this, null), key1);
 \`);
      const b7 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
      const b8 = text(\`
 \`);
      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -414,9 +412,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>
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
 <block-child-0/>
 </span>\`);
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
@@ -424,14 +420,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(\`
+      c_block2[i1] = withKey(comp1({key: ctx['c']}, key + \`__1__\${key1}\`, node, this, null), key1);
 \`);
      const b5 = comp1({key: ctx['c']}, key + \`__1__\${key1}\`, node, this, null);
      const b6 = text(\`
 \`);
      c_block2[i1] = withKey(multi([b4, b5, b6]), key1);
    }
    ctx = ctx.__proto__;
    const b2 = list(c_block2);
    return block1([], [b2]);
  }
@@ -459,30 +449,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>
+  let block1 = createBlock(\`<div><block-child-0/></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));;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(2));;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`n\`] = v_block4[i1];
+      ctx[\`n\`] = v_block2[i1];
      ctx[\`n_index\`] = i1;
      const key1 = ctx['n_index'];
-      const b6 = text(\`
+      c_block2[i1] = withKey(comp1({val: ctx['n_index']}, key + \`__1__\${key1}\`, node, this, null), key1);
 \`);
      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);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -492,18 +471,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>
+  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></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 block1([txt1, txt2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<span><block-child-0/></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));
+      c_block2[i1] = withKey(comp1({key: ctx['c']+ctx['key1']}, tKey_1 + key + \`__1__\${key1}\`, node, this, null), tKey_1 + key1);
      const b6 = text(\`
 \`);
      c_block2[i1] = withKey(multi([b4, b5, b6]), 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>
+  let block1 = createBlock(\`<span><block-child-0/><block-child-1/></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>
+  let block1 = createBlock(\`<span><block-child-0/><block-child-1/></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));
+    return toggler(tKey_1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, this, null));
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<span><block-child-0/></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 b3 = toggler(tKey_2, comp2({key: ctx['key2']}, tKey_2 + key + \`__2\`, node, this, null));
-    const b5 = text(\`
+    return multi([b2, b3]);
 \`);
    return multi([b2, b3, b4, b5]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"change\\"/><span><block-text-2/></span></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]);
+    return block1([attr1, hdlr1, txt1]);
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></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]);
+    return block1([attr1, hdlr1, txt1]);
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></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]);
+    return block1([attr1, hdlr1, txt1]);
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></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 block1([attr1, hdlr1, txt1]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></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 block1([attr1, hdlr1, txt1]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></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>
+  let block1 = createBlock(\`<div><input block-handler-0=\\"input\\" block-attribute-1=\\"value\\" block-handler-2=\\"input\\"/></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]);
+    return block1([hdlr1, attr1, hdlr2]);
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  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>\`);
 <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]);
+    return block1([hdlr1, attr1, hdlr2, hdlr3, attr2, hdlr4, hdlr5, attr3, hdlr6]);
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/></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]);
+    return block1([attr1, hdlr1]);
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- <block-child-0/>
+  let block3 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\" block-handler-1=\\"input\\"/>\`);
 </div>\`);
  let block7 = 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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`thing\`] = v_block4[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]);
+      c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
      const b8 = text(\`
 \`);
      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    const b9 = text(\`
 \`);
    return multi([b2, b3, b9]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- <block-child-0/>
+  let block3 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
 </div>\`);
  let block7 = 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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`thing\`] = v_block4[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]);
+      c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
      const b8 = text(\`
 \`);
      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    const b9 = text(\`
 \`);
    return multi([b2, b3, b9]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- <block-child-0/>
+  let block3 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
 </div>\`);
  let block7 = 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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['names']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`name\`] = v_block4[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]);
+      c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
      const b8 = text(\`
 \`);
      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    const b9 = text(\`
 \`);
    return multi([b2, b3, b9]);
  }
 }"
 `;
@@ -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>
+  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>\`);
 <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>
+  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>\`);
 <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]);
+    return block1([attr1, hdlr1]);
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></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]);
+    return block1([attr1, hdlr1, txt1]);
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  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>\`);
 <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>
+  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>\`);
 <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>
+  let block1 = createBlock(\`<div><input type=\\"checkbox\\" block-attribute-0=\\"checked\\" block-handler-1=\\"input\\"/><span><block-child-0/><block-child-1/></span></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>
+  let block1 = createBlock(\`<div><textarea block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></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>
+  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>\`);
 <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]);
+    return block1([attr1, hdlr1, txt1, txt2, txt3]);
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  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>\`);
 <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]);
+    return block1([hdlr1, attr1, attr2, txt1, attr3, attr4, txt2]);
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  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>\`);
 <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]);
+    return block1([hdlr1, attr1, attr2, txt1, attr3, txt2]);
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  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>\`);
 <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]);
+    return block1([hdlr1, attr1, attr2, txt1, attr3, attr4, txt2]);
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><select block-handler-0=\\"change\\"><block-child-0/></select></div>\`);
- <select block-handler-0=\\"change\\">
+  let block3 = createBlock(\`<option block-attribute-0=\\"value\\" block-attribute-1=\\"selected\\"><block-text-2/></option>\`);
 <block-child-0/>
 </select>
 </div>\`);
  let block7 = 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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['options']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`v\`] = v_block4[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]);
+      c_block2[i1] = withKey(block3([attr1, attr2, txt1]), key1);
      const b8 = text(\`
 \`);
      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
    }
-    ctx = ctx.__proto__;
+    const b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([hdlr1], [b2]);
    const b3 = block3([hdlr1], [b4]);
    const b9 = text(\`
 \`);
    return multi([b2, b3, b9]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
- <block-child-0/>
+  let block2 = createBlock(\`<input class=\\"a\\" block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
- <block-child-1/>
+  let block3 = createBlock(\`<input class=\\"b\\" block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
 </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\\"/>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    let b2,b3;
 \`);
    let b4,b5;
    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]);
+    return block1([], [b2, b3]);
    const b6 = text(\`
 \`);
    return multi([b2, b3, b6]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></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]);
+    return block1([attr1, hdlr1, txt1]);
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- 
+  let block3 = createBlock(\`<div><button block-handler-0=\\"click\\">expr</button></div>\`);
 <block-child-0/>
 </div>\`);
  let block5 = 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']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['arr']);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block4[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 b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    const b6 = text(\`
 \`);
    return multi([b2, b3, b6]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- <block-child-0/>
+  let block3 = createBlock(\`<div><block-text-0/>: <block-text-1/><button block-handler-2=\\"click\\">Expr</button></div>\`);
 </div>\`);
  let block5 = 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);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block4[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 b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    const b6 = text(\`
 \`);
    return multi([b2, b3, b6]);
  }
 }"
 `;
@@ -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>
+  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>\`);
 <block-child-0/>
 </div>\`);
  let block5 = 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);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block4[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 b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    const b6 = text(\`
 \`);
    return multi([b2, b3, b6]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
- <block-child-0/>
+  let block3 = createBlock(\`<div><block-text-0/>: <block-text-1/><button block-handler-2=\\"click\\">meth call</button></div>\`);
 </div>\`);
  let block5 = 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);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
-    for (let i1 = 0; i1 < l_block4; i1++) {
+    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block4[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 b2 = list(c_block2);
-    const b4 = list(c_block4);
+    return block1([], [b2]);
    const b3 = block3([], [b4]);
    const b6 = text(\`
 \`);
    return multi([b2, b3, b6]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/><p block-handler-0=\\"click\\">dec</p></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 block1([hdlr2], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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']);;
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(['John','Raoul','Gérald']);;
-    for (let i1 = 0; i1 < l_block3; i1++) {
+    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`name\`] = v_block3[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]);
+      c_block1[i1] = withKey(catcher1(comp1({value: ctx['name']}, key + \`__1__\${key1}\`, node, this, null), [hdlr1]), key1);
      const b7 = text(\`
 \`);
      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
    }
-    const b3 = list(c_block3);
+    return list(c_block1);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><span/><block-child-0/><p/></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 b2 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
-    const b3 = block3([], [b4]);
+    return block1([], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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 catcher1(comp1({value: ctx['name']}, key + \`__1\`, node, this, null), [hdlr1]);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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(\`
+    return block1();
 \`);
    const b5 = block5();
    const b6 = text(\`
 \`);
    return multi([b4, b5, b6]);
  }
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
 \`);
    const b7 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
    return multi([b2, b7]);
  }
 }"
 `;
@@ -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 block6 = createBlock(\`<p>something</p>\`);
-  let block9 = createBlock(\`<p>paragraph</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]);
+    return catcher1(multi([b6, b7]), [hdlr1]);
  }
  function slot2(ctx, node, key = \\"\\") {
    const b12 = text(\`
 \`);
    const b13 = text(\`
 \`);
    return multi([b12, b13]);
  }
  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);
+    const b8 = comp1({slots: markRaw({'myslot': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
-    return multi([b2, b3, b4, b14]);
+    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(\`
+    return block1();
 \`);
    const b5 = block5();
    const b6 = text(\`
 \`);
    return multi([b4, b5, b6]);
  }
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
 \`);
    const b7 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
    return multi([b2, b7]);
  }
 }"
 `;
@@ -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]);
@@ -0,0 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 exports[`components in t-out simple list 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, isBoundary, withDefault, LazyValue, safeOutput, withKey } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
  function value1(ctx, node, key = \\"\\") {
    return comp1({}, key + \`__1\`, node, this, null);
  }
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
    ctx = Object.create(ctx);
    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1,2]);;
    for (let i1 = 0; i1 < l_block1; i1++) {
      ctx[\`n\`] = v_block1[i1];
      const key1 = ctx['n'];
      ctx[\`blabla\`] = new LazyValue(value1, ctx, this, node, key1);
      c_block1[i1] = withKey(safeOutput(ctx['blabla']), key1);
    }
    return list(c_block1);
  }
 }"
 `;
 exports[`components in t-out simple list 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
    return text(\`child\`);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
 <block-child-0/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    const b2 = comp1(Object.assign({}, ctx['some'].obj), key + \`__1\`, node, this, null);
- \`);
+    return block1([], [b2]);
    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]);
  }
 }"
 `;
@@ -27,18 +20,11 @@ exports[`t-props basic use 2`] = `
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let block3 = createBlock(\`<span>
+  let block1 = createBlock(\`<span><block-text-0/></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]);
+    return block1([txt1]);
    const b4 = text(\`
 \`);
    return multi([b2, b3, b4]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
 <block-child-0/>
 </div>\`);
  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`
+    const b2 = comp1(Object.assign({}, ctx['childProps'], {a: 1,b: 2}), key + \`__1\`, node, this, null);
- \`);
+    return block1([], [b2]);
    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]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></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 text('');
 \`);
    return multi([b5, b6]);
  }
  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 block1([txt1, txt2], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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, key);
- \`);
+    const b3 = text(\` in slot \`);
-    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
+    const b4 = safeOutput(ctx['v']);
-    const b9 = text(\`
+    return multi([b3, b4]);
 in slot
 \`);
    const b10 = safeOutput(ctx['v']);
    const b11 = text(\`
 \`);
    return multi([b4, b9, b10, b11]);
  }
  function value1(ctx, node, key = \\"\\") {
-    const b6 = text(\`
+    return comp1({}, key + \`__1\`, node, this, null);
 \`);
    const b7 = comp1({}, key + \`__1\`, node, this, null);
    const b8 = text(\`
 \`);
    return multi([b6, b7, b8]);
  }
  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 comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
    return multi([b2, b12]);
  }
 }"
 `;
@@ -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, key);
- \`);
+    const b5 = text(\` tea \`);
-    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
+    const b6 = safeOutput(ctx['v']);
-    const b11 = text(\`
+    return multi([b5, b6]);
 tea
 \`);
    const b12 = safeOutput(ctx['v']);
    const b13 = text(\`
 \`);
    return multi([b4, b11, b12, b13]);
  }
  function value1(ctx, node, key = \\"\\") {
-    const b6 = text(\`
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
- \`);
+    const b4 = block4();
-    const b7 = comp1({}, key + \`__1\`, node, this, null);
+    return multi([b3, b4]);
    const b8 = text(\`
 \`);
    const b9 = block9();
    const b10 = text(\`
 \`);
    return multi([b6, b7, b8, b9, b10]);
  }
  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 comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
    return multi([b2, b14]);
  }
 }"
 `;
@@ -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, key);
- \`);
+    return text(\` in slot \`);
    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
    const b9 = text(\`
 in slot
 \`);
    return multi([b4, b9]);
  }
  function value1(ctx, node, key = \\"\\") {
-    const b6 = text(\`
+    return comp1({}, key + \`__1\`, node, this, null);
 \`);
    const b7 = comp1({}, key + \`__1\`, node, this, null);
    const b8 = text(\`
 \`);
    return multi([b6, b7, b8]);
  }
  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 comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
    return multi([b2, b10]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><p><block-text-0/></p><p><block-text-1/></p></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 block1([txt1, txt2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><p><block-text-0/></p><p><block-text-1/></p></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 block1([txt1, txt2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><p><block-text-0/></p></div>\`);
 <block-child-0/><block-child-1/><block-child-2/>
 <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 block1([txt1]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></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 block1([txt1, txt2], [b2]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><p><block-text-0/></p></div>\`);
 <block-child-0/><block-child-1/><block-child-2/>
 <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 block1([txt1]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -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>
+  let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
 <div><block-child-0/></div>
 </div>\`);
  function value1(ctx, node, key = \\"\\") {
-    const b5 = text(\`
+    return comp1({}, key + \`__1\`, node, this, null);
 \`);
    const b6 = comp1({}, key + \`__1\`, node, this, null);
    const b7 = text(\`
 \`);
    return multi([b5, b6, b7]);
  }
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    const b2 = text(\`
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
- \`);
+    const b3 = safeOutput(ctx['v']);
-    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
+    return block1([], [b3]);
    const b8 = safeOutput(ctx['v']);
    const b3 = block3([], [b8]);
    return multi([b2, 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>
+  let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
- 
+  let block2 = createBlock(\`<p>coucou</p>\`);
 <div><block-child-0/></div>
 </div>\`);
  let block6 = createBlock(\`<p>coucou</p>\`);
  function value1(ctx, node, key = \\"\\") {
-    const b5 = text(\`
+    return block2();
 \`);
    const b6 = block6();
    const b7 = text(\`
 \`);
    return multi([b5, b6, b7]);
  }
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    const b2 = text(\`
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
- \`);
+    const b3 = safeOutput(ctx['v']);
-    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
+    return block1([], [b3]);
    const b8 = safeOutput(ctx['v']);
    const b3 = block3([], [b8]);
    return multi([b2, b3]);
  }
 }"
 `;
@@ -1,5 +1,12 @@
 import { App, Component, mount, status, toRaw, useState, xml } from "../../src";
-import { elem, makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
+import {
  elem,
  makeTestFixture,
  nextAppError,
  nextTick,
  snapshotEverything,
  useLogLifecycle,
 } from "../helpers";
 import { markup } from "../../src/runtime/utils";
 let fixture: HTMLElement;
@@ -208,14 +215,14 @@ describe("basics", () => {
      static template = xml`<div/>`;
    }
    let error: Error;
-    const prom = mount(Test, fixture);
+    const app = new App(Test);
    const prom = app.mount(fixture);
    await Promise.resolve();
    fixture.remove();
-    try {
+    prom.catch((e: Error) => (error = e));
-      await prom;
+    await expect(nextAppError(app)).resolves.toThrow(
-    } catch (e) {
+      "Cannot mount a component on a detached dom node"
-      error = e as Error;
+    );
    }
    expect(error!).toBeDefined();
    expect(error!.message).toBe("Cannot mount a component on a detached dom node");
    expect(console.warn).toBeCalledTimes(1);
@@ -1,4 +1,4 @@
-import { Component, mount, onWillDestroy } from "../../src";
+import { App, Component, mount, onWillDestroy } from "../../src";
 import {
  onError,
  onMounted,
@@ -18,7 +18,9 @@ import {
  nextMicroTick,
  snapshotEverything,
  useLogLifecycle,
  nextAppError,
 } from "../helpers";
 import { OwlError } from "../../src/runtime/error_handling";
 let fixture: HTMLElement;
@@ -58,9 +60,10 @@ describe("basics", () => {
    parent.state.flag = true;
    parent.render();
-    await nextTick();
+    await expect(nextAppError(parent.__owl__.app)).resolves.toThrow(
      "An error occured in the owl lifecycle"
    );
    expect(fixture.innerHTML).toBe("");
    expect(mockConsoleError).toBeCalledTimes(1);
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });
@@ -70,12 +73,13 @@ describe("basics", () => {
      static template = xml`<SomeMispelledComponent />`;
      static components = { SomeComponent };
    }
    const app = new App(Parent);
    let error: Error;
-    try {
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      await mount(Parent, fixture);
+    await expect(nextAppError(app)).resolves.toThrow(
-    } catch (e) {
+      'Cannot find the definition of component "SomeMispelledComponent"'
-      error = e as Error;
+    );
-    }
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe('Cannot find the definition of component "SomeMispelledComponent"');
    expect(console.error).toBeCalledTimes(0);
@@ -89,12 +93,13 @@ describe("basics", () => {
      static template = xml`<SomeMispelledComponent />`;
      static components = { SomeComponent };
    }
    const app = new App(Parent, { test: true });
    let error: Error;
-    try {
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      await mount(Parent, fixture, { test: true });
+    await expect(nextAppError(app)).resolves.toThrow(
-    } catch (e) {
+      'Cannot find the definition of component "SomeMispelledComponent"'
-      error = e as Error;
+    );
-    }
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe('Cannot find the definition of component "SomeMispelledComponent"');
    expect(console.error).toBeCalledTimes(0);
@@ -108,13 +113,13 @@ describe("basics", () => {
      static template = xml`<SomeComponent />`;
      static components = { SomeComponent: notAComponentConstructor };
    }
    const app = new App(Parent as typeof Component);
    let error: Error;
-    try {
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      // @ts-expect-error
+    await expect(nextAppError(app)).resolves.toThrow(
-      await mount(Parent, fixture);
+      '"SomeComponent" is not a Component. It must inherit from the Component class'
-    } catch (e) {
+    );
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      '"SomeComponent" is not a Component. It must inherit from the Component class'
@@ -155,26 +160,26 @@ describe("basics", () => {
 describe("errors and promises", () => {
  test("a rendering error will reject the mount promise", async () => {
    // we do not catch error in willPatch anymore
-    class App extends Component {
+    class Root extends Component {
      static template = xml`<div><t t-esc="this.will.crash"/></div>`;
    }
-    let error: Error;
+    const app = new App(Root);
-    try {
+    let error: OwlError;
-      await mount(App, fixture);
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-      error = e as Error;
+    await mountProm;
    }
    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);
  });
  test("an error in mounted call will reject the mount promise", async () => {
-    class App extends Component {
+    class Root extends Component {
      static template = xml`<div>abc</div>`;
      setup() {
        onMounted(() => {
@@ -183,21 +188,21 @@ describe("errors and promises", () => {
      }
    }
-    let error: Error;
+    const app = new App(Root);
-    try {
+    let error: OwlError;
-      await mount(App, fixture);
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-      error = e as Error;
+    await mountProm;
    }
    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);
  });
  test("an error in onMounted callback will have the component's setup in its stack trace", async () => {
-    class App extends Component {
+    class Root extends Component {
      static template = xml`<div>abc</div>`;
      setup() {
        onMounted(() => {
@@ -206,14 +211,13 @@ describe("errors and promises", () => {
      }
    }
-    let error: Error;
+    const app = new App(Root, { test: true });
-    try {
+    let error: OwlError;
-      await mount(App, fixture, { test: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
-    expect(error!.stack).toContain("App.setup");
+    expect(error!.stack).toContain("Root.setup");
    expect(error!.stack).toContain("error_handling.test.ts");
    expect(fixture.innerHTML).toBe("");
    expect(mockConsoleError).toBeCalledTimes(0);
@@ -221,7 +225,7 @@ describe("errors and promises", () => {
  });
  test("errors in onWillRender/onRender aren't wrapped more than once", async () => {
-    class App extends Component {
+    class Root extends Component {
      static template = xml`<div>abc</div>`;
      setup() {
        onWillRender(() => {
@@ -233,12 +237,11 @@ describe("errors and promises", () => {
      }
    }
-    let error: Error;
+    const app = new App(Root, { test: true });
-    try {
+    let error: OwlError;
-      await mount(App, fixture, { test: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillRender");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      `The following error occurred in onWillRender: "boom in onWillRender"`
@@ -264,6 +267,29 @@ 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");
        });
      }
    }
    const app = new App(Root, { test: true });
    let error: OwlError;
    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
    await mountProm;
    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>`;
@@ -315,21 +341,21 @@ describe("errors and promises", () => {
    class Child extends Component {
      static template = xml`<div><t t-esc="this.will.crash"/></div>`;
    }
-    class App extends Component {
+    class Parent extends Component {
      static template = xml`<div><Child/></div>`;
      static components = { Child };
    }
-    let error: Error;
+    const app = new App(Parent);
-    try {
+    let error: OwlError;
-      await mount(App, fixture);
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-      error = e as Error;
+    await mountProm;
    }
    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 +365,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 +392,16 @@ describe("errors and promises", () => {
      static components = { Child };
    }
-    let error: Error;
+    const app = new App(Parent);
-    try {
+    let error: OwlError;
-      await mount(Parent, fixture);
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-      error = e as Error;
+    await mountProm;
    }
    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);
  });
@@ -396,13 +422,12 @@ describe("errors and promises", () => {
      }
    }
-    try {
+    const app = new App(Example, { test: true });
-      await mount(Example, fixture, { test: true });
+    let error: OwlError;
-    } catch (e) {
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      expect((e as Error).message).toBe(
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
-        `The following error occurred in onMounted: "Error in mounted"`
+    await mountProm;
-      );
+    expect(error!.message).toBe(`The following error occurred in onMounted: "Error in mounted"`);
    }
    // 1 additional error is logged because the destruction of the app causes
    // the onWillUnmount hook to be called and to fail
    expect(mockConsoleError).toBeCalledTimes(1);
@@ -419,9 +444,10 @@ describe("errors and promises", () => {
    root.state = "boom";
    root.render();
-    await nextTick();
+    await expect(nextAppError(root.__owl__.app)).resolves.toThrow(
      "error occured in the owl lifecycle"
    );
    expect(fixture.innerHTML).toBe("");
    expect(mockConsoleError).toBeCalledTimes(1);
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });
 });
@@ -471,17 +497,150 @@ describe("can catch errors", () => {
        });
      }
    }
-    let e: Error;
+    const app = new App(Root, { test: true });
-    try {
+    let error: OwlError;
-      await mount(Root, fixture, { test: true });
+    const crashProm = expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
-    } catch (error) {
+    await app.mount(fixture).catch((e: Error) => (error = e));
-      e = error as Error;
+    await crashProm;
-    }
+    expect(error!.message).toBe(
    expect(e!.message).toBe(
      `The following error occurred in onWillStart: "No active component (a hook function should only be called in 'setup')"`
    );
  });
  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;
        });
      }
    }
    const app = new App(Root, { test: true });
    let error: OwlError;
    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
    await mountProm;
    expect(error!.message).toBe(`The following error occurred in onMounted: "test error"`);
    expect(error!.cause).toBe(err);
  });
  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;
        });
      }
    }
    const app = new App(Root, { test: true });
    let error: OwlError;
    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
    await mountProm;
    expect(error!.message).toBe(`The following error occurred in onWillStart: "test error"`);
    expect(error!.cause).toBe(err);
  });
  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;
        });
      }
    }
    const app = new App(Root);
    let error: OwlError;
    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
    await mountProm;
    expect(error!.message).toBe(
      `An error occured in the owl lifecycle (see this Error's "cause" property)`
    );
    expect(error!.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;
        });
      }
    }
    const app = new App(Root);
    let error: OwlError;
    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
    await mountProm;
    expect(error!.message).toBe(
      `An error occured in the owl lifecycle (see this Error's "cause" property)`
    );
    expect(error!.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";
        });
      }
    }
    const app = new App(Root, { test: true });
    let error: OwlError;
    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
    await expect(nextAppError(app)).resolves.toThrow("not an Error was thrown in onMounted");
    await mountProm;
    expect(error!.message).toBe(
      `Something that is not an Error was thrown in onMounted (see this Error's "cause" property)`
    );
    expect(error!.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";
        });
      }
    }
    const app = new App(Root);
    let error: OwlError;
    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
    await mountProm;
    expect(error!.message).toBe(
      `An error occured in the owl lifecycle (see this Error's "cause" property)`
    );
    expect(error!.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 +1339,8 @@ describe("can catch errors", () => {
    class Catch extends Component {
      static template = xml`<t t-slot="default" />`;
      setup() {
-        onError((error) => {
+        onError(({ cause }) => {
-          this.props.onError(error);
+          this.props.onError(cause);
        });
      }
    }
@@ -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);
  });
 });
@@ -17,8 +17,16 @@ import {
  useChildSubEnv,
  useSubEnv,
  xml,
  OwlError,
 } from "../../src/index";
-import { elem, logStep, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import {
  elem,
  logStep,
  makeTestFixture,
  nextAppError,
  nextTick,
  snapshotEverything,
 } from "../helpers";
 let fixture: HTMLElement;
@@ -650,11 +658,12 @@ describe("hooks", () => {
        }
      }
-      try {
+      let error: OwlError;
-        await mount(MyComponent, fixture);
+      const app = new App(MyComponent);
-      } catch (e: any) {
+      const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-        expect(e.message).toBe("Intentional error");
+      await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-      }
+      await mountProm;
      expect(error!.cause.message).toBe("Intentional error");
      // no console.error because the error has been caught in this test
      expect(console.error).toHaveBeenCalledTimes(0);
      console.error = originalconsoleError;
@@ -1,6 +1,6 @@
-import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
-import { Component, onError, xml, mount } from "../../src";
+import { Component, onError, xml, mount, OwlError } from "../../src";
-import { DEV_MSG } from "../../src/runtime/app";
+import { App, DEV_MSG } from "../../src/runtime/app";
 import { validateProps } from "../../src/runtime/template_helpers";
 import { Schema } from "../../src/runtime/validation";
@@ -48,13 +48,14 @@ describe("props validation", () => {
      static components = { SubComp };
      static template = xml`<div><SubComp /></div>`;
    }
    let error: Error | undefined;
-    try {
+    const app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    let error: OwlError | undefined;
-    } catch (e) {
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      error = e as Error;
+    await expect(nextAppError(app)).resolves.toThrow(
-    }
+      "Invalid props for component 'SubComp': 'message' is missing"
    );
    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe("Invalid props for component 'SubComp': 'message' is missing");
    error = undefined;
@@ -77,12 +78,13 @@ describe("props validation", () => {
      static template = xml`<div><SubComp /></div>`;
    }
-    let error: Error;
+    const app = new App(Parent, { test: true });
-    try {
+    let error: OwlError | undefined;
-      await mount(Parent, fixture, { dev: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow(
-      error = e as Error;
+      "Invalid props for component 'SubComp': 'message' is missing"
-    }
+    );
    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe("Invalid props for component 'SubComp': 'message' is missing");
  });
@@ -126,14 +128,12 @@ describe("props validation", () => {
      };
      (Parent as any).components = { SubComp };
      let error: Error | undefined;
      props = {};
-
+      let app = new App(Parent, { test: true });
-      try {
+      let error: OwlError | undefined;
-        await mount(Parent, fixture, { dev: true });
+      let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      } catch (e) {
+      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
-        error = e as Error;
+      await mountProm;
      }
      expect(error!).toBeDefined();
      expect(error!.message).toBe(
        `Invalid props for component '_a': 'p' is undefined (should be a ${test.type.name.toLowerCase()})`
@@ -147,11 +147,10 @@ describe("props validation", () => {
      }
      expect(error!).toBeUndefined();
      props = { p: test.ko };
-      try {
+      app = new App(Parent, { test: true });
-        await mount(Parent, fixture, { dev: true });
+      mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      } catch (e) {
+      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
-        error = e as Error;
+      await mountProm;
      }
      expect(error!).toBeDefined();
      expect(error!.message).toBe(
        `Invalid props for component '_a': 'p' is not a ${test.type.name.toLowerCase()}`
@@ -181,13 +180,12 @@ describe("props validation", () => {
        static template = xml`<div>hey</div>`;
      };
      (Parent as any).components = { SubComp };
      let error: Error | undefined;
      props = {};
-      try {
+      let app = new App(Parent, { test: true });
-        await mount(Parent, fixture, { dev: true });
+      let error: OwlError | undefined;
-      } catch (e) {
+      let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-        error = e as Error;
+      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
-      }
+      await mountProm;
      expect(error!).toBeDefined();
      expect(error!.message).toBe(
        `Invalid props for component '_a': 'p' is undefined (should be a ${test.type.name.toLowerCase()})`
@@ -201,11 +199,10 @@ describe("props validation", () => {
      }
      expect(error!).toBeUndefined();
      props = { p: test.ko };
-      try {
+      app = new App(Parent, { test: true });
-        await mount(Parent, fixture, { dev: true });
+      mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      } catch (e) {
+      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
-        error = e as Error;
+      await mountProm;
      }
      expect(error!).toBeDefined();
      expect(error!.message).toBe(
        `Invalid props for component '_a': 'p' is not a ${test.type.name.toLowerCase()}`
@@ -227,26 +224,25 @@ describe("props validation", () => {
    }
    let error: Error;
    let props: { p?: any };
    props = { p: "string" };
    try {
      props = { p: "string" };
      await mount(Parent, fixture, { dev: true });
    } catch (e) {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
    props = { p: true };
    try {
      props = { p: true };
      await mount(Parent, fixture, { dev: true });
    } catch (e) {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
-    try {
+    props = { p: 1 };
-      props = { p: 1 };
+    const app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'SubComp': 'p' is not a string or boolean"
@@ -267,26 +263,25 @@ describe("props validation", () => {
    }
    let error: Error;
    let props: { p?: any };
    props = { p: "key" };
    try {
      props = { p: "key" };
      await mount(Parent, fixture, { dev: true });
    } catch (e) {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
    props = {};
    try {
      props = {};
      await mount(Parent, fixture, { dev: true });
    } catch (e) {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
-    try {
+    props = { p: 1 };
-      props = { p: 1 };
+    const app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    expect(error!.message).toBe("Invalid props for component 'SubComp': 'p' is not a string");
  });
@@ -319,20 +314,18 @@ describe("props validation", () => {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
-    try {
+    props = { p: [1] };
-      props = { p: [1] };
+    let app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    error = undefined;
-    try {
+    app = new App(Parent, { test: true });
-      props = { p: ["string", 1] };
+    mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      await mount(Parent, fixture, { dev: true });
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
-    } catch (e) {
+    await mountProm;
-      error = e as Error;
+    expect(error!).toBeDefined();
    }
  });
  test("can validate an array with multiple sub element types", async () => {
@@ -370,12 +363,11 @@ describe("props validation", () => {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
-    try {
+    props = { p: [true, 1] };
-      props = { p: [true, 1] };
+    const app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'SubComp': 'p[1]' is not a string or boolean"
@@ -405,33 +397,30 @@ describe("props validation", () => {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
-    try {
+    props = { p: { id: 1, url: "url", extra: true } };
-      props = { p: { id: 1, url: "url", extra: true } };
+    let app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'SubComp': 'p' has not the correct shape (unknown key 'extra')"
    );
-    try {
+    props = { p: { id: "1", url: "url" } };
-      props = { p: { id: "1", url: "url" } };
+    app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'SubComp': 'p' has not the correct shape ('id' is not a number)"
    );
    error = undefined;
-    try {
+    props = { p: { id: 1 } };
-      props = { p: { id: 1 } };
+    app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'SubComp': 'p' has not the correct shape ('url' is missing (should be a string))"
@@ -474,12 +463,11 @@ describe("props validation", () => {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
-    try {
+    props = { p: { id: 1, url: [12, true] } };
-      props = { p: { id: 1, url: [12, true] } };
+    const app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'SubComp': 'p' has not the correct shape ('url' is not a boolean or list of numbers)"
@@ -686,11 +674,10 @@ describe("props validation", () => {
      static components = { SubComp };
    }
    let error: Error;
-    try {
+    const app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    expect(error!.message).toBe("Invalid props for component 'SubComp': 'p' is missing");
  });
@@ -754,11 +741,10 @@ describe("props validation", () => {
      static template = xml`<div><Child/></div>`;
    }
    let error: Error;
-    try {
+    const app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'Child'");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'Child': 'mandatory' is missing (should be a number)"
@@ -794,6 +780,32 @@ describe("props validation", () => {
    // we just check that it doesn't throw
    await expect(mount(Parent, fixture, { dev: true })).resolves.toEqual(expect.anything());
  });
  test("can validate through slots", async () => {
    class Child extends Component {
      static props = ["message"];
      static template = xml`<div>hey</div>`;
    }
    class Wrapper extends Component {
      static template = xml`<t t-slot="default"/>`;
    }
    class Parent extends Component {
      static components = { Child, Wrapper };
      static template = xml`<Wrapper><Child /></Wrapper>`;
    }
    const app = new App(Parent, { test: true });
    let error: OwlError | undefined;
    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
    await expect(nextAppError(app)).resolves.toThrow(
      "Invalid props for component 'Child': 'message' is missing"
    );
    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe("Invalid props for component 'Child': 'message' is missing");
  });
 });
 //------------------------------------------------------------------------------
@@ -859,11 +871,12 @@ describe("default props", () => {
      static template = xml`<Child/>`;
    }
    let error: Error;
-    try {
+    const app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow(
-      error = e as Error;
+      "default value cannot be defined for a mandatory prop"
-    }
+    );
    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "A default value cannot be defined for a mandatory prop (name: 'mandatory', component: Child)"
@@ -1,5 +1,5 @@
-import { Component, mount, onMounted, useRef, useState } from "../../src/index";
+import { App, Component, mount, onMounted, useRef, useState } from "../../src/index";
-import { logStep, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { logStep, makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
 import { xml } from "../../src/index";
 snapshotEverything();
@@ -94,9 +94,14 @@ describe("refs", () => {
      ref = useRef("coucou");
    }
-    await expect(async () => {
+    const app = new App(Test, { test: true });
-      await mount(Test, fixture);
+    const mountProm = expect(app.mount(fixture)).rejects.toThrowError(
-    }).rejects.toThrowError("Cannot have 2 elements with same ref name at the same time");
+      "Cannot have 2 elements with same ref name at the same time"
    );
    await expect(nextAppError(app)).resolves.toThrow(
      "Cannot have 2 elements with same ref name at the same time"
    );
    await mountProm;
    expect(console.warn).toBeCalledTimes(1);
    console.warn = consoleWarn;
  });
@@ -1,5 +1,5 @@
 import { App, Component, mount, onMounted, useState, xml } from "../../src/index";
-import { children, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { children, makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
 snapshotEverything();
 let originalconsoleWarn = console.warn;
@@ -45,6 +45,23 @@ describe("slots", () => {
    expect(fixture.innerHTML).toBe("some text");
  });
  test("t-set-slot=default has priority over rest of the content", async () => {
    class Child extends Component {
      static template = xml`<t t-slot="default"/>`;
    }
    class Parent extends Component {
      static template = xml`<Child>
        some text
        <t t-set-slot="default">some other text</t>
      </Child>`;
      static components = { Child };
    }
    await mount(Parent, fixture);
    expect(fixture.innerHTML).toBe("some other text");
  });
  test("simple slot with slot scope", async () => {
    let child: any;
    class Child extends Component {
@@ -204,13 +221,12 @@ describe("slots", () => {
      static components = { Child };
    }
-    let error = null;
+    let error: Error;
-    try {
+    const app = new App(Parent);
-      await mount(Parent, fixture);
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-      error = e;
+    await mountProm;
-    }
+    expect(error!).not.toBeNull();
    expect(error).not.toBeNull();
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });
@@ -1819,4 +1835,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>"
    );
  });
 });
@@ -1,5 +1,6 @@
-import { Component, mount, onMounted, useState, xml } from "../../src";
+import { OwlError } from "../../src/runtime/error_handling";
-import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { App, Component, mount, onMounted, useState, xml } from "../../src";
 import { makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
 snapshotEverything();
 let fixture: HTMLElement;
@@ -342,20 +343,20 @@ describe("style and class handling", () => {
    class Child extends Component {
      static template = xml`<div t-att-class="props.class" t-esc="this.will.crash"/>`;
    }
-    class ParentWidget extends Component {
+    class Parent extends Component {
      static template = xml`<Child class="'a'"/>`;
      static components = { Child };
    }
-    let error: Error;
+    let error: OwlError;
-    try {
+    const app = new App(Parent);
-      await mount(ParentWidget, fixture);
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-      error = e as Error;
+    await mountProm;
    }
    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);
  });
@@ -287,4 +287,32 @@ describe("t-call", () => {
    });
    expect(fixture.innerHTML).toBe("childaaronchildlucas");
  });
  test("t-call with t-call-context and subcomponent, in dev mode", async () => {
    class Child extends Component {
      static template = xml`child<t t-esc="props.name"/>`;
      static props = ["name"];
    }
    class Root extends Component {
      static template = xml`
          <t t-call="someTemplate" t-call-context="subctx"/>`;
      static components = { Child };
      subctx = { aab: "aaron", lpe: "lucas" };
    }
    await mount(Root, fixture, {
      dev: true,
      templates: `
        <templates>
          <t t-name="someTemplate">
            <Child name="aab"/>
            <Child name="lpe"/>
          </t>
        </templates>`,
    });
    expect(fixture.innerHTML).toBe("childaaronchildlucas");
  });
 });
@@ -1,5 +1,11 @@
-import { Component, mount, onMounted, useState, xml } from "../../src/index";
+import { App, Component, mount, onMounted, useState, xml } from "../../src/index";
-import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
+import {
  makeTestFixture,
  nextAppError,
  nextTick,
  snapshotEverything,
  useLogLifecycle,
 } from "../helpers";
 snapshotEverything();
@@ -315,10 +321,73 @@ describe("list of components", () => {
      `;
      static components = { Child };
    }
-    await expect(async () => {
+
-      await mount(Parent, fixture, { dev: true });
+    const app = new App(Parent, { test: true });
-    }).rejects.toThrowError("Got duplicate key in t-foreach: child");
+    const mountProm = expect(app.mount(fixture)).rejects.toThrow(
      "Got duplicate key in t-foreach: child"
    );
    await expect(nextAppError(app)).resolves.toThrow("Got duplicate key in t-foreach: child");
    await mountProm;
    console.info = consoleInfo;
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });
  test("crash when using object as keys that serialize to the same string", async () => {
    const consoleInfo = console.info;
    console.info = jest.fn();
    class Child extends Component {
      static template = xml``;
    }
    class Parent extends Component {
      static template = xml`
        <t t-foreach="[{}, {}]" t-as="item" t-key="item">
          <Child/>
        </t>
      `;
      static components = { Child };
    }
    const app = new App(Parent, { test: true });
    const mountProm = expect(app.mount(fixture)).rejects.toThrow(
      "Got duplicate key in t-foreach: [object Object]"
    );
    await expect(nextAppError(app)).resolves.toThrow(
      "Got duplicate key in t-foreach: [object Object]"
    );
    await mountProm;
    console.info = consoleInfo;
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });
  test("order is correct when slots are not of same type", async () => {
    class Child extends Component {
      static template = xml`
          <t t-slot="{{ slotName }}" t-foreach="slotNames" t-as="slotName" t-key="slotName"/>
      `;
      get slotNames() {
        return Object.entries(this.props.slots)
          .filter((entry: any) => entry[1].active)
          .map((entry) => entry[0]);
      }
    }
    class Parent extends Component {
      static template = xml`
        <Child>
          <t t-set-slot="a" active="!state.active"><div t-if="!state.active">A</div></t>
          <t t-set-slot="b" active="true">B</t>
          <t t-set-slot="c" active="state.active">C</t>
        </Child>
      `;
      static components = { Child };
      state = useState({ active: false });
    }
    const parent = await mount(Parent, fixture);
    expect(fixture.textContent).toBe("AB");
    parent.state.active = true;
    await nextTick();
    expect(fixture.textContent).toBe("BC");
  });
 });
@@ -0,0 +1,36 @@
 import { Component, mount, xml } from "../../src/index";
 import { makeTestFixture, snapshotEverything } from "../helpers";
 snapshotEverything();
 // -----------------------------------------------------------------------------
 // t-out
 // -----------------------------------------------------------------------------
 describe("components in t-out", () => {
  let fixture: HTMLElement;
  beforeEach(() => {
    fixture = makeTestFixture();
  });
  test("simple list", async () => {
    class Child extends Component {
      static template = xml`child`;
    }
    class Parent extends Component {
      static template = xml`
                <t t-foreach="[1,2]" t-as="n" t-key="n">
                  <t t-set="blabla">
                    <Child />
                  </t>
                  <t t-out="blabla"/>
                </t>`;
      static components = { Child };
    }
    await mount(Parent, fixture);
    expect(fixture.innerHTML).toBe("childchild");
  });
 });
@@ -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!");
  }
 });
@@ -260,6 +261,20 @@ expect.extend({
  },
 });
 export function nextAppError(app: any) {
  const { handleError } = app;
  return new Promise((resolve) => {
    app.handleError = (...args: Parameters<typeof handleError>) => {
      try {
        handleError.call(app, ...args);
      } catch (e: any) {
        app.handleError = handleError;
        resolve(e);
      }
    };
  });
 }
 declare global {
  namespace jest {
    interface Matchers<R> {
@@ -1,3 +1,4 @@
 import { OwlError } from "../../src/runtime/error_handling";
 import {
  App,
  Component,
@@ -11,7 +12,7 @@ import {
 } from "../../src";
 import { xml } from "../../src/";
 import { DEV_MSG } from "../../src/runtime/app";
-import { elem, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { elem, makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
 let fixture: HTMLElement;
 let originalconsoleWarn = console.warn;
@@ -268,15 +269,14 @@ describe("Portal", () => {
    }
    let error: Error;
-    try {
+    const app = new App(Parent);
-      await mount(Parent, fixture);
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("invalid portal target");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    expect(error!.message).toBe("invalid portal target");
-    expect(fixture.innerHTML).toBe(`<div></div>`);
+    expect(fixture.innerHTML).toBe(``);
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });
@@ -499,7 +499,7 @@ describe("Portal", () => {
        </div>`;
      state = { error: false };
      setup() {
-        onError((e) => (error = e));
+        onError(({ cause }) => (error = cause));
      }
    }
    addOutsideDiv(fixture);
@@ -874,6 +874,48 @@ describe("Portal", () => {
    await nextTick();
    expect(fixture.innerHTML).toBe('<div id="outside"></div><div></div>');
  });
  test("Child and Portal", async () => {
    class Child extends Component {
      static template = xml`
        <span>child</span>
        <t t-portal="'.portal'"><span>portal</span></t>`;
    }
    class Parent extends Component {
      static template = xml`
        <t>
          <Child/>
          <div class="portal"></div>
        </t>`;
      static components = { Child };
    }
    await mount(Parent, fixture);
    expect(fixture.innerHTML).toBe(
      '<span>child</span><div class="portal"><span>portal</span></div>'
    );
  });
  test("portal and Child", async () => {
    class Child extends Component {
      static template = xml`
        <span>child</span>
        <t t-portal="'.portal'"><span>portal</span></t>`;
    }
    class Parent extends Component {
      static template = xml`
        <t>
          <div class="portal"></div>
          <Child/>
        </t>`;
      static components = { Child };
    }
    await mount(Parent, fixture);
    expect(fixture.innerHTML).toBe(
      '<div class="portal"><span>portal</span></div><span>child</span>'
    );
  });
 });
 describe("Portal: UI/UX", () => {
@@ -958,14 +1000,14 @@ describe("Portal: Props validation", () => {
          </t>
        </div>`;
    }
-    let error: Error;
+    let error: OwlError;
-    try {
+    const app = new App(Parent);
-      await mount(Parent, fixture, { dev: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-      error = e as Error;
+    await mountProm;
    }
    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 () => {
@@ -978,11 +1020,10 @@ describe("Portal: Props validation", () => {
        </div>`;
    }
    let error: Error;
-    try {
+    const app = new App(Parent);
-      await mount(Parent, fixture, { dev: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("invalid portal target");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    expect(error!.message).toBe(`invalid portal target`);
  });
@@ -72,10 +72,8 @@ async function startRelease() {
  }
  // ---------------------------------------------------------------------------
-  log(`Step 3/${STEPS}: updating package.json, readme.md and roadmap.md...`);
+  log(`Step 3/${STEPS}: updating package.json...`);
  await replaceInFile("./package.json", current, next);
  await replaceInFile("./README.md", current, next);
  await replaceInFile("./roadmap.md", current, next);
  // ---------------------------------------------------------------------------
  log(`Step 4/${STEPS}: creating git commit...`);
Author	SHA1	Message	Date
Samuel Degueldre	545d40b211	[FIX] portal: correctly mount portal content in target created by mount Previously, blah blah blah	2022-10-19 14:50:13 +02:00
Samuel Degueldre	2c244aa31a	[FIX] blockdom: correctly reorder children in heterogeneous t-foreach Currently, the `moveBefore` method on VNodes assumes that the `other` VNode it receives is of the same type, and that the entire VNode tree below that other VNode has the exact same structure. While this is correct in most cases, it breaks down when there is a VToggler somewhere in the VNode tree, as the structure below a VToggler can be very different from the structure below another VToggler that was created from the same compiled code. For example, two iterations of a t-foreach that contains a <t t-component="..."/> may spawn different components, and different components obviously have different structures. One way to fix this is to remove the assumption that the structure of the `this` block tree in moveBefore is the same as the structure of the `other` block tree, and instead, always give the concrete DOM node before which we want to move the current VNode instead of giving it a VNode and an afterNode as a fallback. One problem with this solution is that it degrades performance in the "standard" case, where a t-foreach contains no VToggler anywhere in its block tree, as retrieving the first concrete DOM node requires calling firstNode() which recursively traverses the entire tree. To avoid this performance penalty in the standard case, we opt to only go down this route whenever we encounter a VToggler when calling `moveBefore`. This requires that we maintain two separate methods, one to move a VNode before another VNode of assumed similar structure, which is basically the current implementation of `moveBefore` for all VNode types except VToggler, and one implementation that moves a VNode before a concrete DOM node. This method needs to be implemented for all VNode types, as all VNode types can be descendants of a VToggler. This method will only be called from one place: the `moveBeforeVNode` method of the toggler, which is the point where we realize that the assumption of identical structure breaks down. Co-authored-by: Bruno Boi <boi@odoo.com>	2022-10-19 13:13:49 +02:00
Samuel Degueldre	ba1a270c93	[FIX] parser: give t-set-slot="default" priority over the content Currently, if a component has a default slot defined with t-set-slot, and also content that compiles to something (eg, text or even a comment node), the content takes priority over the t-set-slot. As t-set-slot is more explicity, it should have priority.	2022-10-10 20:33:18 +02:00
Samuel Degueldre	d546244fc3	[FIX] runtime: correctly throw an error for duplicate object keys Currently when checking for duplicate keys, we insert the value of the key as is in a set then check for unicity against those. When the key is an object, we check for duplicates based on object identity, whereas the keys are used by owl as strings, and so using objects can cause duplicate key errors that do not throw correctly but crash in the owl internals. This commit fixes that by making the duplicate checking code serialize the key to string before insertion and when comparing against existing keys.	2022-10-10 13:53:11 +02:00
Géry Debongnie	a1f22829c1	[REL] v2.0.0 # v2.0.0 Finally the official v2.0.0 release is ready. There are no feature nor fixes since last beta release, because it is stable. Thank you to everyone who contributed. ## Changelog Owl 2.0 is a large improvement over 1.0. It brings a lot of new features, improvements, and better APIs. The most important changes are: - a completely overhauled slot API (in particular slot scopes, ...) - a new reactivity system, similar to Vue. In particular, if props are equals, then a sub component is not updated. - new rendering engine, based on blockdom. This makes Owl much faster - support for fragments: a template can have an arbitrary number of roots A detailed changelog can be found [here](CHANGELOG.md).	2022-10-07 15:27:58 +02:00
Géry Debongnie	64bad25762	[REL] v2.0.0-beta-22 # v2.0.0-beta-22 - fix: t-call: nested t-call with magic variable 0 - fix: prevent crash in case with t-foreach, t-out and components	2022-09-29 09:17:06 +02:00
Géry Debongnie	7ab34c5ca5	[FIX] prevent crash in case with t-foreach and t-out with components The t-out directive is compiled internally into a LazyValue, which represents a value that may or may not be created sometimes in the future. It can also be reused more than once, and this is where there may be an issue: if a component is contained in the lazyvalue, it needs a unique key (coming from the t-foreach) to be properly indexed in the parent children map. However, the LazyValue does not keep the key information, so it is not able to provide it to its content. The fix is then quite clear: the LazyValue class should store the key information, and provides it to its content. This allows the LazyValue to be used multiple times, in any place in a template. closes #1270	2022-09-29 08:28:38 +02:00
Géry Debongnie	669fd622ec	[FIX] t-call: nested t-call with magic variable 0 Before this commit, the template compiler would guess the next block id that will be generated when compiling the body of a tcall. This is correct IF there are not nested t-call, but otherwise wrong, because the next block id could be mixed up: the first t-call would save the next block id (let's say n), then the inner t-call would also save the same block id (so, n), will then generate its own block (n+1), then the outer t-call would use the block n index instead of n+1 The best fix, in my opinion, is to make sure we get the next block var name, so we do not have to guess. To do that, each compile block type function needs to properly return the information. closes #1267	2022-09-28 09:31:41 +02:00
Géry Debongnie	ab72cdddde	[REL] v2.0.0-beta-21 # v2.0.0-beta-21 - fix: prevent side effects at template compilation - fix: props validation: does not crash with t-call-context - fix: make t-portal work in all cases - fix: make props validation work through slots	2022-09-26 15:44:11 +02:00
Géry Debongnie	17fb33475c	[FIX] props validation: make it work through slots A recent commit fixes the props validation code to make it work regardless of the rendering context (important with the recent t-call-context directive). Unfortunately, it then breaks props validation through slots, because it assumed that the parent node in the virtual node was the parent of the component, but it is not necessarily true. To fix this, we can use a simple property of the template functions: they are bound to the current instance of the component, so we can simply use "this"	2022-09-26 15:17:58 +02:00
Géry Debongnie	ab29b896eb	[FIX] portal: make it work in all cases Before this commit, the portal wouldn't work when its target is created after the portal content, since it wouldn't be able to mount the dom at the correct location. With this commit, we work around the issue by mounting the portal content at the portal location, then when the Portal component is mounted, moving it to its correct location. The big downside with that approach is that the portal content is (sometimes) rendered and mounted at a location, THEN mounted in another location. I think that it is most of the time not an issue, but one could argue that it is inconsistent: some specific code could work at one point, then fail in a different very similar situation (for example, iframes don't support very well being moved around). On the flip side, having the portal work as expected is very useful, and may be worth the tradeoff. closes #1250	2022-09-26 12:01:12 +02:00
Géry Debongnie	d5ed25cd19	[FIX] props validation: does not crash with t-call-context The code for props validation assumed that the rendering context was a component. This was actually true when it was written, but is no longer true since t-call-context was introduced. Because of that, it would crash when trying to access the internals of the component, such as the static components object. The fix is simple: instead of passing the context to the props validation code, which can now be anything, we pass the component node, which is guaranteed to give a reference to the component (and also to the app). This also make the code slightly simpler. closes #1261	2022-09-24 08:34:22 +02:00
Géry Debongnie	c4f0f17b9b	[FIX] blockdom: prevent side effects at block compilation When creating the template node for a block, we create htmlelements and set their (static) attributes. But this can have side effects. For example, setting the src attribute for an img element will trigger a request to fetch the image. We avoid that issue by simply setting the html element template node inside a <template/> element. Note that I don't really see how to test this fix in jest: we don't have a real browser, and no real way to check for this side effect. closes #1257	2022-09-21 13:59:13 +02:00
Florent Dardenne - dafl@odoo	d27455e9f2	[IMP] doc: explicit `useEffect` first parameter The `useEffect` has two parameters: * The `effect` function * The `computeDependencies` function The `effect` function always take as parameters the result of the `computeDependencies` function. Expliciting this allows to better understand the `useEffect` behaviour and the following example in the doc: ``` useEffect( (el) => el && el.focus(), () => [ref.el] ); ```	2022-09-09 20:24:56 +02:00
Géry Debongnie	6ef38676c4	[DOC] doc: fix broken link and update roadmap	2022-09-09 09:45:05 +02:00
Géry Debongnie	b51756f356	[REL] v2.0.0-beta-20 # v2.0.0-beta-20 - app: properly rethrow unhandled errors	2022-09-09 09:26:12 +02:00
Samuel Degueldre	cfdf7caa50	[IMP] app: rethrow errors that were not handled This commit makes it so that when an error occurs in an owl app and none of the registered error handlers are able to handle it, we rethrow the error instead of just logging it to the console and swallowing it. This allows users of owl to handle errors that happen in owl applications by using event listeners for error and unhandledrejection events on the window.	2022-09-09 09:23:32 +02:00
Florent Dardenne - dafl@odoo	a5a6a592c1	[FIX] tutorial_todoapp: fix the final code mount issue In app.js, `mount(Root, document.body, { dev: true, env });` crash because `body` is not available yet. Therefore, moving the script into the body fix the issue.	2022-09-08 13:30:38 +02:00
Géry Debongnie	d0d7482b0f	[REL] v2.0.0-beta-19 # v2.0.0-beta-19 - fix: events: correctly call handlers in iframes	2022-09-06 12:13:25 +02:00
Samuel Degueldre	8fe4c0c76e	[FIX] events: correctly call handlers in iframes Previously, event handlers would not work when an app was mounted in an iframe, this is caused by a guard in the event handler that checks that the target element is still in the document, but it doesn't check against the correct document in the case of an iframe. This commit changes the check to check against the target's ownerDocument.	2022-09-06 12:06:59 +02:00
Géry Debongnie	c1afaeb92a	[REL] v2.0.0-beta-18 # v2.0.0-beta-18 - fix: allow multiple occurrences of same slot in different locations	2022-09-02 14:57:18 +02:00
Géry Debongnie	3883cec079	[FIX] slots: prevent crash when using same slot in different locations Before this commit, a crash could occur when a component with no props is defined in a slot, and that slot is conditionally displayed in multiple locations. The reason for that is that the key provided to the callSlot function was identical, so from the perspective of the component function, it was not possible to make the difference between a component located in either places. With this commit, we make sure that a unique key is used when a slot is reused in a template (or if it is dynamic, because in that case, we have no idea at compile time if it will be unique or not) closes #1246	2022-09-02 12:12:00 +02:00
Géry Debongnie	9cb74d619b	[REL] v2.0.0-beta-17 # v2.0.0-beta-17 - imp: types: expose ComponentConstructor for typing purpose - fix: compiler: fix falsy values for properties not keeping input empty - fix: app: allow mounting owl apps in iframe	2022-09-01 15:41:33 +02:00
Samuel Degueldre	a93f015795	[FIX] app: allow mounting owl apps in iframe Previously, attempting to mount an app in an iframe would crash, saying that the target is not a valid DOM element, this is because instanceof checks do not work cross-frame as global objects do not have the same identity in frames as with the main window. This commit fixes that by making sure the target is an instance of HTMLElement of the corresponding window, and checks that the corresponding document body contains it.	2022-08-17 10:05:46 +02:00
Samuel Degueldre	02a187d80b	[FIX] compiler: fix falsy values for properties not keeping input empty Recently, we made it so that when a component is rendered, it always updates the property values for computed properties. This was done by wrapping the value in a String or Boolean object. One issue with this is that wrapping a falsy value in a String doesn't yield an empty string, but a string containing the value as text (eg new String(undefined) -> "undefined"), which causes the value to not remain empty as per the spec. This commit fixes that by adding a fallback to the empty string for falsy values before converting to a String object. closes: #1236	2022-08-05 09:50:38 +02:00
Rémi Rahir	d3b0d1971e	[IMP] types: expose ComponentConstructor for typing purpose We have been using this type in o-spreadsheet since https://github.com/odoo/o-spreadsheet/pull/1187 but the new typing file (https://github.com/odoo/owl/pull/1207) does not include it. It would be useful to allow us to bump or version of owl witouht having to resort to long aboslute paths (i.e. import from `@odoo/owl`and not `@odoo/owl/dist/types/runtime/component@ everywhere).	2022-07-25 14:34:14 +02:00
Géry Debongnie	b90aa0e23a	[REL] v2.0.0-beta-16 # v2.0.0-beta-16 Notes - fix: components: fix cause left unset when thrown object is not Error	2022-07-22 09:43:43 +02:00
Samuel Degueldre	163366997c	[FIX] components: fix cause left unset when thrown object is not Error Previously, when wrapping errors in wrapError, if the error was not an actual error object, we wouldn't set the cause property on the wrapping error correctly. The "instanceof Error" check is simply there so that we can know whether we can add the original errors message to the wrapping error, but the line that sets the error's cause was mistakenly moved into that condition. This commit also fixes the wrapping error's message in the case of non-Error objects, to avoid having "the following error occurred in hookname:" with nothing after the colon which is confusing/misleading.	2022-07-22 09:21:19 +02:00
Géry Debongnie	588b655c11	[REL] v2.0.0-beta-15 # v2.0.0-beta-15 Notes - fix: lifecyle_hooks: correctly wrap errors in async code - imp: use a custom error class for all errors thrown by owl - fix: package.json: remove browser value - ref: component_node: slightly simplify code	2022-07-20 10:02:24 +02:00
Géry Debongnie	f5d5273c25	[REF] component_node: slightly simplify code	2022-07-20 09:57:27 +02:00
Géry Debongnie	9fd662fdce	[FIX] package.json: remove browser value As far as I can tell, the browser value overrides the main value in many cases. But then, we don't want to use the iife format, since it don't work well with bundlers. This commit fixes the issue by simply removing the key, so the main entry will be used instead. maybe fixes #1181	2022-07-20 09:56:39 +02:00
Samuel Degueldre	7786077921	[IMP] *: use a custom error class for all errors thrown by owl This commit makes all errors thrown in owl use a custom error class. The main point of this is to always wrap user-code errors that happen during the owl lifecycle so that they can be treated uniformly in onError by checking the cause property, and also allows user code to differenciate owl errors from non-owl errors reliably at runtime.	2022-07-18 15:40:14 +02:00
Aaron Bohy	30bc605c84	[FIX] lifecyle_hooks: correctly wrap errors in async code Before this commit, wrapping an error occurring in async code would result in an unhandledpromise exception, because we created another promise, that would be rejected and that we didn't catch.	2022-07-18 15:40:14 +02:00
Géry Debongnie	d1118455aa	[REL] v2.0.0-beta-14 # v2.0.0-beta-14 Yes, there is no beta-13 release... ## Fixes: - [FIX] compiler: better handle update of properties with same value	2022-07-08 16:11:45 +02:00
Géry Debongnie	f8073cb153	[FIX] compiler: better handle update of properties with same value Before this commit, owl would incorrectly skip patching html properties when the new value is the same as the value used in the previous render. However, this is incorrect, since the user may have changed the value by clicking on a checkbox, or changing some text in an input. So, to be more correct, owl has to force the update whenever it encounters a prop. This is however hard to do without impacting the main update loop, so we kind of work around the problem by using String and Boolean instance, instead of primitive values.	2022-07-08 15:58:49 +02:00
`@@ -124,5 +124,5 @@ npm install @odoo/owl`

	If you want to use a simple `<script>` tag, the last release can be downloaded here:	If you want to use a simple `<script>` tag, the last release can be downloaded here:

	`- [owl-1.4.10](https://github.com/odoo/owl/releases/tag/v1.4.10)`	`- [owl](https://github.com/odoo/owl/releases/latest)`