wip [FIX] parser: account for CR/LF text nodes

# v2.0.0-beta-12

- fix: compiler: properly handle t-set in t-if with no content

doc/reference/props.md

@@ -159,6 +159,7 @@ For each key, a `prop` definition is either a boolean, a constructor, a list of
 - a boolean: indicate that the props exists, and is mandatory.
 - a constructor: this should describe the type, for example: `id: Number` describe
   the props `id` as a number
+- an object describing a value as type. This is done by using the `value` key. For example, `{value: false}` specifies that the corresponding value should be equal to false.
 - a list of constructors. In that case, this means that we allow more than one
   type. For example, `id: [Number, String]` means that `id` can be either a string
   or a number.
@@ -240,6 +241,7 @@ class ComponentB extends owl.Component {
     size: {
       validate:  e => ["small", "medium", "large"].includes(e)
     },
+    someId: [Number, {value: false}], // either a number or false
   };
 ```
 

doc/reference/templates.md

@@ -540,6 +540,15 @@ This can be used to define variables scoped to a sub template:
 <!-- "var" does not exist here -->
 ```
 
+Note: by default, the rendering context for a sub template is simply the current
+rendering context (so, the current component). However, it may be useful to be
+able to specify a specific object as context. This can be done by using the
+`t-call-context` directive:
+
+```xml
+<t t-call="other-template" t-call-context="obj"/>
+```
+
 ### Dynamic sub templates
 
 The `t-call` directive can also be used to dynamically call a sub template,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.0.0-beta-9",
+  "version": "2.0.0-beta-12",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "browser": "dist/owl.iife.js",

src/compiler/code_generator.ts

@@ -140,9 +140,10 @@ interface Context {
   tKeyExpr: string | null;
   nameSpace?: string;
   tModelSelectedExpr?: string;
+  ctxVar?: string;
 }
 
-function createContext(parentCtx: Context, params?: Partial<Context>) {
+function createContext(parentCtx: Context, params?: Partial<Context>): Context {
   return Object.assign(
     {
       block: null,
@@ -264,9 +265,7 @@ export class CodeGenerator {
       tKeyExpr: null,
     });
     // define blocks and utility functions
-    let mainCode = [
-      `  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;`,
-    ];
+    let mainCode = [`  let { text, createBlock, list, multi, html, toggler, comment } = bdom;`];
     if (this.helpers.size) {
       mainCode.push(`let { ${[...this.helpers].join(", ")} } = helpers;`);
     }
@@ -284,6 +283,7 @@ export class CodeGenerator {
       for (let block of this.blocks) {
         if (block.dom) {
           let xmlString = block.asXmlString();
+          xmlString = xmlString.replace(/`/g, "\\`");
           if (block.dynamicTagName) {
             xmlString = xmlString.replace(/^<\w+/, `<\${tag || '${block.dom.nodeName}'}`);
             xmlString = xmlString.replace(/\w+>$/, `\${tag || '${block.dom.nodeName}'}>`);
@@ -334,8 +334,8 @@ export class CodeGenerator {
     this.addLine(`const ${varName} = ${expr};`);
   }
 
-  insertAnchor(block: BlockDescription) {
-    const tag = `block-child-${block.children.length}`;
+  insertAnchor(block: BlockDescription, index: number = block.children.length) {
+    const tag = `block-child-${index}`;
     const anchor = xmlDoc.createElement(tag);
     block.insert(anchor);
   }
@@ -692,7 +692,7 @@ export class CodeGenerator {
       const children = ast.content;
       for (let i = 0; i < children.length; i++) {
         const child = ast.content[i];
-        const subCtx: Context = createContext(ctx, {
+        const subCtx = createContext(ctx, {
           block,
           index: block!.childNumber,
           forceNewBlock: false,
@@ -754,21 +754,37 @@ export class CodeGenerator {
       this.insertAnchor(block);
     }
     block = this.createBlock(block, "html", ctx);
-    this.helpers.add(ast.expr === "0" ? "zero" : "safeOutput");
-    let expr = ast.expr === "0" ? "ctx[zero]" : `safeOutput(${compileExpr(ast.expr)})`;
-    if (ast.body) {
-      const nextId = BlockDescription.nextBlockId;
-      const subCtx: Context = createContext(ctx);
+    let blockStr;
+    if (ast.expr === "0") {
+      this.helpers.add("zero");
+      blockStr = `ctx[zero]`;
+    } else if (ast.body) {
+      let bodyValue = null;
+      bodyValue = BlockDescription.nextBlockId;
+      const subCtx = createContext(ctx);
       this.compileAST({ type: ASTType.Multi, content: ast.body }, subCtx);
-      this.helpers.add("withDefault");
-      expr = `withDefault(${expr}, b${nextId})`;
+      this.helpers.add("safeOutput");
+      blockStr = `safeOutput(${compileExpr(ast.expr)}, b${bodyValue})`;
+    } else {
+      this.helpers.add("safeOutput");
+      blockStr = `safeOutput(${compileExpr(ast.expr)})`;
     }
-    this.insertBlock(`${expr}`, block, ctx);
+    this.insertBlock(blockStr, block, ctx);
+  }
+
+  compileTIfBranch(content: AST, block: BlockDescription, ctx: Context) {
+    this.target.indentLevel++;
+    let childN = block.children.length;
+    this.compileAST(content, createContext(ctx, { block, index: ctx.index }));
+    if (block.children.length > childN) {
+      // we have some content => need to insert an anchor at correct index
+      this.insertAnchor(block!, childN);
+    }
+    this.target.indentLevel--;
   }
 
   compileTIf(ast: ASTTif, ctx: Context, nextNode?: ASTDomNode) {
-    let { block, forceNewBlock, index } = ctx;
-    let currentIndex = index;
+    let { block, forceNewBlock } = ctx;
     const codeIdx = this.target.code.length;
     const isNewBlock = !block || (block.type !== "multi" && forceNewBlock);
     if (block) {
@@ -778,28 +794,16 @@ export class CodeGenerator {
       block = this.createBlock(block, "multi", ctx);
     }
     this.addLine(`if (${compileExpr(ast.condition)}) {`);
-    this.target.indentLevel++;
-    this.insertAnchor(block!);
-    const subCtx: Context = createContext(ctx, { block, index: currentIndex });
-    this.compileAST(ast.content, subCtx);
-    this.target.indentLevel--;
+    this.compileTIfBranch(ast.content, block, ctx);
     if (ast.tElif) {
       for (let clause of ast.tElif) {
         this.addLine(`} else if (${compileExpr(clause.condition)}) {`);
-        this.target.indentLevel++;
-        this.insertAnchor(block);
-        const subCtx: Context = createContext(ctx, { block, index: currentIndex });
-        this.compileAST(clause.content, subCtx);
-        this.target.indentLevel--;
+        this.compileTIfBranch(clause.content, block, ctx);
       }
     }
     if (ast.tElse) {
       this.addLine(`} else {`);
-      this.target.indentLevel++;
-      this.insertAnchor(block);
-      const subCtx: Context = createContext(ctx, { block, index: currentIndex });
-      this.compileAST(ast.tElse, subCtx);
-      this.target.indentLevel--;
+      this.compileTIfBranch(ast.tElse, block, ctx);
     }
     this.addLine("}");
     if (isNewBlock) {
@@ -885,7 +889,7 @@ export class CodeGenerator {
       this.addLine("}");
     }
 
-    const subCtx: Context = createContext(ctx, { block, index: loopVar });
+    const subCtx = createContext(ctx, { block, index: loopVar });
     this.compileAST(ast.body, subCtx);
     if (ast.memo) {
       this.addLine(
@@ -932,7 +936,7 @@ export class CodeGenerator {
     for (let i = 0, l = ast.content.length; i < l; i++) {
       const child = ast.content[i];
       const isTSet = child.type === ASTType.TSet;
-      const subCtx: Context = createContext(ctx, {
+      const subCtx = createContext(ctx, {
         block,
         index,
         forceNewBlock: !isTSet,
@@ -968,16 +972,21 @@ export class CodeGenerator {
 
   compileTCall(ast: ASTTCall, ctx: Context) {
     let { block, forceNewBlock } = ctx;
+    let ctxVar = ctx.ctxVar || "ctx";
+    if (ast.context) {
+      ctxVar = generateId("ctx");
+      this.addLine(`let ${ctxVar} = ${compileExpr(ast.context)};`);
+    }
     if (ast.body) {
-      this.addLine(`ctx = Object.create(ctx);`);
-      this.addLine(`ctx[isBoundary] = 1;`);
+      this.addLine(`${ctxVar} = Object.create(${ctxVar});`);
+      this.addLine(`${ctxVar}[isBoundary] = 1;`);
       this.helpers.add("isBoundary");
       const nextId = BlockDescription.nextBlockId;
-      const subCtx: Context = createContext(ctx, { preventRoot: true });
+      const subCtx = createContext(ctx, { preventRoot: true, ctxVar });
       this.compileAST({ type: ASTType.Multi, content: ast.body }, subCtx);
       if (nextId !== BlockDescription.nextBlockId) {
         this.helpers.add("zero");
-        this.addLine(`ctx[zero] = b${nextId};`);
+        this.addLine(`${ctxVar}[zero] = b${nextId};`);
       }
     }
     const isDynamic = INTERP_REGEXP.test(ast.name);
@@ -995,7 +1004,7 @@ export class CodeGenerator {
       }
       this.define(templateVar, subTemplate);
       block = this.createBlock(block, "multi", ctx);
-      this.insertBlock(`call(this, ${templateVar}, ctx, node, ${key})`, block!, {
+      this.insertBlock(`call(this, ${templateVar}, ${ctxVar}, node, ${key})`, block!, {
         ...ctx,
         forceNewBlock: !block,
       });
@@ -1003,13 +1012,13 @@ export class CodeGenerator {
       const id = generateId(`callTemplate_`);
       this.staticDefs.push({ id, expr: `app.getTemplate(${subTemplate})` });
       block = this.createBlock(block, "multi", ctx);
-      this.insertBlock(`${id}.call(this, ctx, node, ${key})`, block!, {
+      this.insertBlock(`${id}.call(this, ${ctxVar}, node, ${key})`, block!, {
         ...ctx,
         forceNewBlock: !block,
       });
     }
     if (ast.body && !ctx.isLast) {
-      this.addLine(`ctx = ctx.__proto__;`);
+      this.addLine(`${ctxVar} = ${ctxVar}.__proto__;`);
     }
   }
 
@@ -1032,7 +1041,7 @@ 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, node)`;
+      let value = `new LazyValue(${name}, ctx, this, node)`;
       value = ast.value ? (value ? `withDefault(${expr}, ${value})` : expr) : value;
       this.addLine(`ctx[\`${ast.name}\`] = ${value};`);
     } else {
@@ -1047,7 +1056,7 @@ export class CodeGenerator {
         value = expr;
       }
       this.helpers.add("setContextValue");
-      this.addLine(`setContextValue(ctx, "${ast.name}", ${value});`);
+      this.addLine(`setContextValue(${ctx.ctxVar || "ctx"}, "${ast.name}", ${value});`);
     }
   }
 
@@ -1178,8 +1187,17 @@ export class CodeGenerator {
     if (ctx.tKeyExpr) {
       keyArg = `${ctx.tKeyExpr} + ${keyArg}`;
     }
-    const blockArgs = `${expr}, ${propString}, ${keyArg}, node, ctx`;
-    let blockExpr = `component(${blockArgs})`;
+    let id = generateId("comp");
+    this.staticDefs.push({
+      id,
+      expr: `app.createComponent(${
+        ast.isDynamic ? null : expr
+      }, ${!ast.isDynamic}, ${!!ast.slots}, ${!!ast.dynamicProps}, ${
+        !ast.props && !ast.dynamicProps
+      })`,
+    });
+
+    let blockExpr = `${id}(${propString}, ${keyArg}, node, this, ${ast.isDynamic ? expr : null})`;
     if (ast.isDynamic) {
       blockExpr = `toggler(${expr}, ${blockExpr})`;
     }
@@ -1268,10 +1286,16 @@ export class CodeGenerator {
     if (this.target.loopLevel || !this.hasSafeContext) {
       ctxStr = generateId("ctx");
       this.helpers.add("capture");
-      this.define(ctxStr, `capture(ctx);`);
+      this.define(ctxStr, `capture(ctx)`);
     }
+    let id = generateId("comp");
+    this.staticDefs.push({
+      id,
+      expr: `app.createComponent(null, false, true, false, false)`,
+    });
+
     const target = compileExpr(ast.target);
-    const blockString = `component(Portal, {target: ${target},slots: {'default': {__render: ${name}, __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx)`;
+    const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}, __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`;
     if (block) {
       this.insertAnchor(block);
     }

src/compiler/inline_expressions.ts

@@ -86,9 +86,8 @@ const STATIC_TOKEN_MAP: { [key: string]: TKind } = Object.assign(Object.create(n
 
 // note that the space after typeof is relevant. It makes sure that the formatted
 // expression has a space after typeof. Currently we don't support delete and void
-const OPERATORS = "...,.,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=,;,in ,new ".split(
-  ","
-);
+const OPERATORS =
+  "...,.,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=,;,in ,new ,|,&,^,~".split(",");
 
 type Tokenizer = (expr: string) => Token | false;
 

src/compiler/parser.ts

@@ -115,6 +115,7 @@ export interface ASTTCall {
   type: ASTType.TCall;
   name: string;
   body: AST[] | null;
+  context: string | null;
 }
 
 interface SlotDefinition {
@@ -257,16 +258,12 @@ function parseTNode(node: Element, ctx: ParsingContext): AST | null {
 // -----------------------------------------------------------------------------
 // Text and Comment Nodes
 // -----------------------------------------------------------------------------
-const lineBreakRE = /[\r\n]/;
-const whitespaceRE = /\s+/g;
+const whitespaceRE = /[^\S\r\n]+/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, " ");
     }
 
@@ -557,11 +554,13 @@ function parseTCall(node: Element, ctx: ParsingContext): AST | null {
     return null;
   }
   const subTemplate = node.getAttribute("t-call")!;
-
+  const context = node.getAttribute("t-call-context");
   node.removeAttribute("t-call");
+  node.removeAttribute("t-call-context");
+
   if (node.tagName !== "t") {
     const ast = parseNode(node, ctx);
-    const tcall: AST = { type: ASTType.TCall, name: subTemplate, body: null };
+    const tcall: AST = { type: ASTType.TCall, name: subTemplate, body: null, context };
     if (ast && ast.type === ASTType.DomNode) {
       ast.content = [tcall];
       return ast;
@@ -579,6 +578,7 @@ function parseTCall(node: Element, ctx: ParsingContext): AST | null {
     type: ASTType.TCall,
     name: subTemplate,
     body: body.length ? body : null,
+    context,
   };
 }
 

src/runtime/app.ts

@@ -1,11 +1,11 @@
-import { Component, ComponentConstructor } from "./component";
+import { Component, ComponentConstructor, Props } from "./component";
 import { ComponentNode } from "./component_node";
-import { MountOptions } from "./fibers";
-import { Scheduler } from "./scheduler";
-import { TemplateSet, TemplateSetConfig } from "./template_set";
 import { nodeErrorHandlers } from "./error_handling";
-import { validateTarget } from "./utils";
+import { Fiber, MountOptions } from "./fibers";
+import { Scheduler } from "./scheduler";
 import { validateProps } from "./template_helpers";
+import { TemplateSet, TemplateSetConfig } from "./template_set";
+import { validateTarget } from "./utils";
 
 // reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f
 
@@ -112,6 +112,63 @@ export class App<
       this.root.destroy();
     }
   }
+
+  createComponent<P extends Props>(
+    name: string | null,
+    isStatic: boolean,
+    hasSlotsProp: boolean,
+    hasDynamicPropList: boolean,
+    hasNoProp: boolean
+  ) {
+    const isDynamic = !isStatic;
+    function _arePropsDifferent(props1: Props, props2: Props): boolean {
+      for (let k in props1) {
+        if (props1[k] !== props2[k]) {
+          return true;
+        }
+      }
+      return hasDynamicPropList && Object.keys(props1).length !== Object.keys(props2).length;
+    }
+    const arePropsDifferent = hasSlotsProp
+      ? (_1: any, _2: any) => true
+      : hasNoProp
+      ? (_1: any, _2: any) => false
+      : _arePropsDifferent;
+    const updateAndRender = ComponentNode.prototype.updateAndRender;
+    const initiateRender = ComponentNode.prototype.initiateRender;
+
+    return (props: P, key: string, ctx: ComponentNode, parent: any, C: any) => {
+      let children = ctx.children;
+      let node: any = children[key];
+      if (isDynamic && node && node.component.constructor !== C) {
+        node = undefined;
+      }
+      const parentFiber = ctx.fiber!;
+      if (node) {
+        if (arePropsDifferent(node.props, props) || parentFiber.deep || node.forceNextRender) {
+          node.forceNextRender = false;
+          updateAndRender.call(node, props, parentFiber);
+        }
+      } else {
+        // new component
+        if (isStatic) {
+          C = parent.constructor.components[name as any];
+          if (!C) {
+            throw new Error(`Cannot find the definition of component "${name}"`);
+          } else if (!(C.prototype instanceof Component)) {
+            throw new Error(
+              `"${name}" is not a Component. It must inherit from the Component class`
+            );
+          }
+        }
+        node = new ComponentNode(C, props, this, ctx, key);
+        children[key] = node;
+        initiateRender.call(node, new Fiber(node, parentFiber));
+      }
+      parentFiber.childrenMap[key] = node;
+      return node;
+    };
+  }
 }
 
 export async function mount<

src/runtime/blockdom/attributes.ts

@@ -93,6 +93,10 @@ function toClassObj(expr: string | number | { [c: string]: any }) {
       for (let key in expr as any) {
         const value = (expr as any)[key];
         if (value) {
+          key = trim.call(key);
+          if (!key) {
+            continue;
+          }
           const words = split.call(key, wordRegexp);
           for (let word of words) {
             result[word] = value;

src/runtime/component.ts

@@ -5,7 +5,7 @@ import type { ComponentNode } from "./component_node";
 //  Component Class
 // -----------------------------------------------------------------------------
 
-type Props = { [key: string]: any };
+export type Props = { [key: string]: any };
 
 interface StaticComponentProperties {
   template: string;

src/runtime/component_node.ts

@@ -1,19 +1,18 @@
 import type { App, Env } from "./app";
 import { BDom, VNode } from "./blockdom";
+import { Component, ComponentConstructor, Props } from "./component";
+import { fibersInError, handleError } from "./error_handling";
+import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
 import {
   clearReactivesForCallback,
   getSubscriptions,
   NonReactive,
   Reactive,
   reactive,
-  toRaw,
   TARGET,
 } from "./reactivity";
-import { batched, Callback } from "./utils";
-import { Component, ComponentConstructor } from "./component";
-import { fibersInError, handleError } from "./error_handling";
-import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
 import { STATUS } from "./status";
+import { batched, Callback } from "./utils";
 
 let currentNode: ComponentNode | null = null;
 
@@ -31,14 +30,12 @@ export function useComponent(): Component {
 /**
  * Apply default props (only top level).
  */
-function applyDefaultProps<P extends object>(props: P, defaultProps: Partial<P>): P {
-  const result = Object.assign({} as any, props);
+function applyDefaultProps<P extends object>(props: P, defaultProps: Partial<P>) {
   for (let propName in defaultProps) {
     if (props[propName] === undefined) {
-      result[propName] = defaultProps[propName];
+      (props as any)[propName] = defaultProps[propName];
     }
   }
-  return result;
 }
 // -----------------------------------------------------------------------------
 // Integration with reactivity system (useState)
@@ -67,72 +64,6 @@ export function useState<T extends object>(state: T): Reactive<T> | NonReactive<
   return reactive(state, render);
 }
 
-// -----------------------------------------------------------------------------
-// component function (used in compiled template code)
-// -----------------------------------------------------------------------------
-type Props = { [key: string]: any };
-
-function arePropsDifferent(props1: Props, props2: Props): boolean {
-  for (let k in props1) {
-    const prop1 = props1[k] && typeof props1[k] === "object" ? toRaw(props1[k]) : props1[k];
-    const prop2 = props2[k] && typeof props2[k] === "object" ? toRaw(props2[k]) : props2[k];
-    if (prop1 !== prop2) {
-      return true;
-    }
-  }
-  return Object.keys(props1).length !== Object.keys(props2).length;
-}
-
-export function component<P extends Props>(
-  name: string | ComponentConstructor<P>,
-  props: P,
-  key: string,
-  ctx: ComponentNode,
-  parent: any
-): ComponentNode<P> {
-  let node: any = ctx.children[key];
-  let isDynamic = typeof name !== "string";
-
-  if (node && node.status === STATUS.DESTROYED) {
-    node = undefined;
-  }
-  if (isDynamic && node && node.component.constructor !== name) {
-    node = undefined;
-  }
-
-  const parentFiber = ctx.fiber!;
-  if (node) {
-    let shouldRender = node.forceNextRender;
-    if (shouldRender) {
-      node.forceNextRender = false;
-    } else {
-      const currentProps = node.props;
-      shouldRender = parentFiber.deep || arePropsDifferent(currentProps, props);
-    }
-    if (shouldRender) {
-      node.updateAndRender(props, parentFiber);
-    }
-  } else {
-    // new component
-    let C;
-    if (isDynamic) {
-      C = name;
-    } else {
-      C = parent.constructor.components[name as any];
-      if (!C) {
-        throw new Error(`Cannot find the definition of component "${name}"`);
-      } else if (!(C.prototype instanceof Component)) {
-        throw new Error(`"${name}" is not a Component. It must inherit from the Component class`);
-      }
-    }
-    node = new ComponentNode(C, props, ctx.app, ctx, key);
-    ctx.children[key] = node;
-    node.initiateRender(new Fiber(node, parentFiber));
-  }
-  parentFiber.childrenMap[key] = node;
-  return node;
-}
-
 // -----------------------------------------------------------------------------
 //  Component VNode class
 // -----------------------------------------------------------------------------
@@ -179,8 +110,9 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     this.parentKey = parentKey;
     this.level = parent ? parent.level + 1 : 0;
     const defaultProps = C.defaultProps;
+    props = Object.assign({}, props);
     if (defaultProps) {
-      props = applyDefaultProps(props, defaultProps);
+      applyDefaultProps(props, defaultProps);
     }
     const env = (parent && parent.childEnv) || app.env;
     this.childEnv = env;
@@ -297,13 +229,14 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
 
   async updateAndRender(props: P, parentFiber: Fiber) {
     const rawProps = props;
+    props = Object.assign({}, props);
     // update
     const fiber = makeChildFiber(this, parentFiber);
     this.fiber = fiber;
     const component = this.component;
     const defaultProps = (component.constructor as any).defaultProps;
     if (defaultProps) {
-      props = applyDefaultProps(props, defaultProps);
+      applyDefaultProps(props, defaultProps);
     }
 
     currentNode = this;
@@ -388,10 +321,15 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     }
   }
   _patch() {
-    const hasChildren = Object.keys(this.children).length > 0;
-    this.children = this.fiber!.childrenMap;
-    this.bdom!.patch(this!.fiber!.bdom!, hasChildren);
-    this.fiber!.appliedToDom = true;
+    let hasChildren = false;
+    for (let _k in this.children) {
+      hasChildren = true;
+      break;
+    }
+    const fiber = this.fiber!;
+    this.children = fiber.childrenMap;
+    this.bdom!.patch(fiber.bdom!, hasChildren);
+    fiber.appliedToDom = true;
     this.fiber = null;
   }
 

src/runtime/fibers.ts

@@ -56,6 +56,7 @@ function cancelFibers(fibers: Fiber[]): number {
     fiber.render = throwOnRender;
     if (node.status === STATUS.NEW) {
       node.destroy();
+      delete node.parent!.children[node.parentKey!];
     }
     node.fiber = null;
     if (fiber.bdom) {

src/runtime/template_helpers.ts

@@ -5,6 +5,7 @@ import { isOptional, validateSchema } from "./validation";
 import type { ComponentConstructor } from "./component";
 import { markRaw } from "./reactivity";
 
+const ObjectCreate = Object.create;
 /**
  * This file contains utility functions that will be injected in each template,
  * to perform various useful tasks in the compiled code.
@@ -26,7 +27,7 @@ function callSlot(
   key = key + "__slot_" + name;
   const slots = ctx.props.slots || {};
   const { __render, __ctx, __scope } = slots[name] || {};
-  const slotScope = Object.create(__ctx || {});
+  const slotScope = ObjectCreate(__ctx || {});
   if (__scope) {
     slotScope[__scope] = extra;
   }
@@ -46,7 +47,7 @@ function callSlot(
 
 function capture(ctx: any): any {
   const component = ctx.__owl__.component;
-  const result = Object.create(component);
+  const result = ObjectCreate(component);
   for (let k in ctx) {
     result[k] = ctx[k];
   }
@@ -107,15 +108,17 @@ function shallowEqual(l1: any[], l2: any[]): boolean {
 class LazyValue {
   fn: any;
   ctx: any;
+  component: any;
   node: any;
-  constructor(fn: any, ctx: any, node: any) {
+  constructor(fn: any, ctx: any, component: any, node: any) {
     this.fn = fn;
     this.ctx = capture(ctx);
+    this.component = component;
     this.node = node;
   }
 
   evaluate(): any {
-    return this.fn(this.ctx, this.node);
+    return this.fn.call(this.component, this.ctx, this.node);
   }
 
   toString() {
@@ -126,9 +129,9 @@ class LazyValue {
 /*
  * Safely outputs `value` as a block depending on the nature of `value`
  */
-export function safeOutput(value: any): ReturnType<typeof toggler> {
-  if (!value) {
-    return value;
+export function safeOutput(value: any, defaultValue?: any): ReturnType<typeof toggler> {
+  if (value === undefined) {
+    return defaultValue ? toggler("default", defaultValue) : toggler("undefined", text(""));
   }
   let safeKey;
   let block;
@@ -161,18 +164,20 @@ export function safeOutput(value: any): ReturnType<typeof toggler> {
 }
 
 let boundFunctions = new WeakMap();
+const WeakMapGet = WeakMap.prototype.get;
+const WeakMapSet = WeakMap.prototype.set;
 
 function bind(ctx: any, fn: Function): Function {
   let component = ctx.__owl__.component;
-  let boundFnMap = boundFunctions.get(component);
+  let boundFnMap = WeakMapGet.call(boundFunctions, component);
   if (!boundFnMap) {
     boundFnMap = new WeakMap();
-    boundFunctions.set(component, boundFnMap);
+    WeakMapSet.call(boundFunctions, component, boundFnMap);
   }
-  let boundFn = boundFnMap.get(fn);
+  let boundFn = WeakMapGet.call(boundFnMap, fn);
   if (!boundFn) {
     boundFn = fn.bind(component);
-    boundFnMap.set(fn, boundFn);
+    WeakMapSet.call(boundFnMap, fn, boundFn);
   }
   return boundFn;
 }

src/runtime/template_set.ts

@@ -1,10 +1,10 @@
-import { createBlock, html, list, multi, text, toggler, comment } from "./blockdom";
 import { compile, Template, TemplateFunction } from "../compiler";
+import { comment, createBlock, html, list, multi, text, toggler } from "./blockdom";
+import { getCurrent } from "./component_node";
 import { Portal, portalTemplate } from "./portal";
-import { component, getCurrent } from "./component_node";
 import { helpers } from "./template_helpers";
 
-const bdom = { text, createBlock, list, multi, html, toggler, component, comment };
+const bdom = { text, createBlock, list, multi, html, toggler, comment };
 
 function parseXML(xml: string): Document {
   const parser = new DOMParser();

src/runtime/validation.ts

@@ -8,9 +8,6 @@ type BaseType =
   | true
   | "*";
 
-type UnionType = (TypeInfo | BaseType)[];
-type TypeDescription = BaseType | UnionType | TypeInfo;
-
 interface TypeInfo {
   type?: TypeDescription;
   optional?: boolean;
@@ -19,6 +16,9 @@ interface TypeInfo {
   element?: TypeDescription;
 }
 
+type ValueType = { value: any };
+
+type TypeDescription = BaseType | TypeInfo | ValueType | TypeDescription[];
 type SimplifiedSchema = string[];
 type NormalizedSchema = { [key: string]: TypeDescription };
 export type Schema = SimplifiedSchema | NormalizedSchema;
@@ -26,8 +26,10 @@ export type Schema = SimplifiedSchema | NormalizedSchema;
 // -----------------------------------------------------------------------------
 // helpers
 // -----------------------------------------------------------------------------
-const isUnionType = (t: TypeDescription): t is UnionType => Array.isArray(t);
+const isUnionType = (t: TypeDescription): t is TypeDescription[] => Array.isArray(t);
 const isBaseType = (t: TypeDescription): t is BaseType => typeof t !== "object";
+const isValueType = (t: TypeDescription): t is ValueType =>
+  typeof t === "object" && t && "value" in t;
 
 export function isOptional(t: TypeDescription): Boolean {
   return typeof t === "object" && "optional" in t ? t.optional || false : false;
@@ -42,6 +44,8 @@ function describe(info: TypeDescription): string {
     return describeType(info);
   } else if (isUnionType(info)) {
     return info.map(describe).join(" or ");
+  } else if (isValueType(info)) {
+    return String(info.value);
   }
   if ("element" in info) {
     return `list of ${describe({ type: info.element, optional: false })}s`;
@@ -134,6 +138,8 @@ function validateType(key: string, value: any, descr: TypeDescription): string |
     return isOptional(descr) ? null : `'${key}' is undefined (should be a ${describe(descr)})`;
   } else if (isBaseType(descr)) {
     return validateBaseType(key, value, descr);
+  } else if (isValueType(descr)) {
+    return value === descr.value ? null : `'${key}' is not equal to '${descr.value}'`;
   } else if (isUnionType(descr)) {
     let validDescr = descr.find((p) => !validateType(key, value, p));
     return validDescr ? null : `'${key}' is not a ${describe(descr)}`;

tests/__snapshots__/reactivity.test.ts.snap

@@ -49,14 +49,15 @@ exports[`Reactivity: useState concurrent renderings 3`] = `
 exports[`Reactivity: useState destroyed component before being mounted is inactive 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2]);
   }
@@ -66,7 +67,7 @@ exports[`Reactivity: useState destroyed component before being mounted is inacti
 exports[`Reactivity: useState destroyed component before being mounted is inactive 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -80,14 +81,15 @@ exports[`Reactivity: useState destroyed component before being mounted is inacti
 exports[`Reactivity: useState destroyed component is inactive 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2]);
   }
@@ -97,7 +99,7 @@ exports[`Reactivity: useState destroyed component is inactive 1`] = `
 exports[`Reactivity: useState destroyed component is inactive 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -111,7 +113,7 @@ exports[`Reactivity: useState destroyed component is inactive 2`] = `
 exports[`Reactivity: useState one components can subscribe twice to same context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
   
@@ -126,12 +128,13 @@ exports[`Reactivity: useState one components can subscribe twice to same context
 exports[`Reactivity: useState parent and children subscribed to same context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     let txt1 = ctx['contextObj'].b;
     return block1([txt1], [b2]);
   }
@@ -141,7 +144,7 @@ exports[`Reactivity: useState parent and children subscribed to same context 1`]
 exports[`Reactivity: useState parent and children subscribed to same context 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -218,13 +221,15 @@ exports[`Reactivity: useState several nodes on different level use same context
 exports[`Reactivity: useState two components are updated in parallel 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    const b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    const b3 = comp2({}, key + \`__2\`, node, this, null);
     return block1([], [b2, b3]);
   }
 }"
@@ -233,7 +238,7 @@ exports[`Reactivity: useState two components are updated in parallel 1`] = `
 exports[`Reactivity: useState two components are updated in parallel 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -247,13 +252,15 @@ exports[`Reactivity: useState two components are updated in parallel 2`] = `
 exports[`Reactivity: useState two components can subscribe to same context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    const b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    const b3 = comp2({}, key + \`__2\`, node, this, null);
     return block1([], [b2, b3]);
   }
 }"
@@ -262,7 +269,7 @@ exports[`Reactivity: useState two components can subscribe to same context 1`] =
 exports[`Reactivity: useState two components can subscribe to same context 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -276,13 +283,15 @@ exports[`Reactivity: useState two components can subscribe to same context 2`] =
 exports[`Reactivity: useState two independent components on different levels are updated in parallel 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(\`Parent\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    const b3 = component(\`Parent\`, {}, key + \`__2\`, node, ctx);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    const b3 = comp2({}, key + \`__2\`, node, this, null);
     return block1([], [b2, b3]);
   }
 }"
@@ -291,7 +300,7 @@ exports[`Reactivity: useState two independent components on different levels are
 exports[`Reactivity: useState two independent components on different levels are updated in parallel 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -305,12 +314,13 @@ exports[`Reactivity: useState two independent components on different levels are
 exports[`Reactivity: useState two independent components on different levels are updated in parallel 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -319,7 +329,7 @@ exports[`Reactivity: useState two independent components on different levels are
 exports[`Reactivity: useState useContext=useState hook is reactive, for one component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -333,24 +343,37 @@ exports[`Reactivity: useState useContext=useState hook is reactive, for one comp
 exports[`Reactivity: useState useless atoms should be deleted 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  const comp1 = app.createComponent(\`Quantity\`, true, false, false, false);
   
-  let block1 = createBlock(\`<div><block-child-0/> Total: <block-text-0/> Count: <block-text-1/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ Total: <block-text-0/>
+ Count: <block-text-1/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Object.keys(ctx['state']));;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`id\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(Object.keys(ctx['state']));;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`id\`] = v_block4[i1];
       const key1 = ctx['id'];
-      c_block2[i1] = withKey(component(\`Quantity\`, {id: ctx['id']}, key + \`__1__\${key1}\`, node, ctx), key1);
+      const b6 = text(\`
+ \`);
+      const b7 = comp1({id: ctx['id']}, key + \`__1__\${key1}\`, node, this, null);
+      const b8 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
     }
     ctx = ctx.__proto__;
-    const b2 = list(c_block2);
+    const b4 = list(c_block4);
     let txt1 = ctx['total'];
     let txt2 = Object.keys(ctx['state']).length;
-    return block1([txt1, txt2], [b2]);
+    const b3 = block3([txt1, txt2], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -358,7 +381,7 @@ exports[`Reactivity: useState useless atoms should be deleted 1`] = `
 exports[`Reactivity: useState useless atoms should be deleted 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -372,7 +395,7 @@ exports[`Reactivity: useState useless atoms should be deleted 2`] = `
 exports[`Reactivity: useState very simple use, with initial value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   

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

@@ -3,7 +3,7 @@
 exports[`app App supports env with getters/setters 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/> <block-text-1/></div>\`);
   
@@ -18,7 +18,7 @@ exports[`app App supports env with getters/setters 1`] = `
 exports[`app can configure an app with props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -32,7 +32,7 @@ exports[`app can configure an app with props 1`] = `
 exports[`app destroy remove the widget from the DOM 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -45,7 +45,7 @@ exports[`app destroy remove the widget from the DOM 1`] = `
 exports[`app warnIfNoStaticProps works as expected 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   

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

@@ -3,7 +3,7 @@
 exports[`attributes changing a class with t-att-class (preexisting class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"hoy\\" block-attribute-0=\\"class\\"/>\`);
   
@@ -17,7 +17,7 @@ exports[`attributes changing a class with t-att-class (preexisting class 1`] = `
 exports[`attributes changing a class with t-att-class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
@@ -31,7 +31,7 @@ exports[`attributes changing a class with t-att-class 1`] = `
 exports[`attributes changing an attribute with t-att- 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"value\\"/>\`);
   
@@ -45,7 +45,7 @@ exports[`attributes changing an attribute with t-att- 1`] = `
 exports[`attributes class and t-att-class should combine together 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\" class=\\"hello\\"/>\`);
   
@@ -59,7 +59,7 @@ exports[`attributes class and t-att-class should combine together 1`] = `
 exports[`attributes class and t-attf-class with ternary operation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"hello\\" block-attribute-0=\\"class\\"/>\`);
   
@@ -73,7 +73,7 @@ exports[`attributes class and t-attf-class with ternary operation 1`] = `
 exports[`attributes dynamic attribute evaluating to 0 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
   
@@ -87,7 +87,7 @@ exports[`attributes dynamic attribute evaluating to 0 1`] = `
 exports[`attributes dynamic attribute falsy variable  1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
   
@@ -101,7 +101,7 @@ exports[`attributes dynamic attribute falsy variable  1`] = `
 exports[`attributes dynamic attribute with a dash 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"data-action-id\\"/>\`);
   
@@ -115,7 +115,7 @@ exports[`attributes dynamic attribute with a dash 1`] = `
 exports[`attributes dynamic attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
   
@@ -126,10 +126,24 @@ exports[`attributes dynamic attributes 1`] = `
 }"
 `;
 
+exports[`attributes dynamic attributes with backticks 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = \`bar\`;
+    return block1([attr1]);
+  }
+}"
+`;
+
 exports[`attributes dynamic class attribute 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
@@ -143,7 +157,7 @@ exports[`attributes dynamic class attribute 1`] = `
 exports[`attributes dynamic class attribute evaluating to 0 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
@@ -154,10 +168,52 @@ exports[`attributes dynamic class attribute evaluating to 0 1`] = `
 }"
 `;
 
+exports[`attributes dynamic class attribute that starts and ends with a space 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['c'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic class attribute which is only a space 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['c'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic class attribute with multiple consecutive spaces 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['c'];
+    return block1([attr1]);
+  }
+}"
+`;
+
 exports[`attributes dynamic empty class attribute 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
@@ -171,7 +227,7 @@ exports[`attributes dynamic empty class attribute 1`] = `
 exports[`attributes dynamic formatted attributes with a dash 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"aria-label\\"/>\`);
   
@@ -185,7 +241,7 @@ exports[`attributes dynamic formatted attributes with a dash 1`] = `
 exports[`attributes dynamic undefined class attribute 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
@@ -199,7 +255,7 @@ exports[`attributes dynamic undefined class attribute 1`] = `
 exports[`attributes dynamic undefined generic attribute 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"thing\\"/>\`);
   
@@ -213,7 +269,7 @@ exports[`attributes dynamic undefined generic attribute 1`] = `
 exports[`attributes fixed variable 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
   
@@ -227,7 +283,7 @@ exports[`attributes fixed variable 1`] = `
 exports[`attributes format expression 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
   
@@ -241,7 +297,7 @@ exports[`attributes format expression 1`] = `
 exports[`attributes format literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
   
@@ -255,7 +311,7 @@ exports[`attributes format literal 1`] = `
 exports[`attributes format multiple 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
   
@@ -269,7 +325,7 @@ exports[`attributes format multiple 1`] = `
 exports[`attributes format value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
   
@@ -283,17 +339,23 @@ exports[`attributes format value 1`] = `
 exports[`attributes from object variables set previously 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><span block-attribute-0=\\"class\\"/></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <span block-attribute-0=\\"class\\"/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     setContextValue(ctx, \\"o\\", {a:'b'});
     let attr1 = ctx['o'].a;
-    return block1([attr1]);
+    const b3 = block3([attr1]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -301,17 +363,22 @@ exports[`attributes from object variables set previously 1`] = `
 exports[`attributes from variables set previously (no external node) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<span block-attribute-0=\\"class\\"/>\`);
+  let block4 = 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'];
-    return block1([attr1]);
+    const b4 = block4([attr1]);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -319,7 +386,7 @@ exports[`attributes from variables set previously (no external node) 1`] = `
 exports[`attributes from variables set previously 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
   let block1 = createBlock(\`<div><span block-attribute-0=\\"class\\"/></div>\`);
@@ -337,7 +404,7 @@ exports[`attributes from variables set previously 1`] = `
 exports[`attributes object 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attributes=\\"0\\"/>\`);
   
@@ -351,7 +418,7 @@ exports[`attributes object 1`] = `
 exports[`attributes static attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div foo=\\"a\\" bar=\\"b\\" baz=\\"c\\"/>\`);
   
@@ -364,7 +431,7 @@ exports[`attributes static attributes 1`] = `
 exports[`attributes static attributes on void elements 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<img src=\\"/test.skip.jpg\\" alt=\\"Test\\"/>\`);
   
@@ -374,10 +441,23 @@ exports[`attributes static attributes on void elements 1`] = `
 }"
 `;
 
+exports[`attributes static attributes with backticks 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div foo=\\"\\\\\`bar\\\\\`\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`attributes static attributes with dashes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div aria-label=\\"Close\\"/>\`);
   
@@ -390,7 +470,7 @@ exports[`attributes static attributes with dashes 1`] = `
 exports[`attributes string interpolation, alternate syntax 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
   
@@ -404,7 +484,7 @@ exports[`attributes string interpolation, alternate syntax 1`] = `
 exports[`attributes t-att-class and class should combine together 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"hello\\" block-attribute-0=\\"class\\"/>\`);
   
@@ -418,7 +498,7 @@ exports[`attributes t-att-class and class should combine together 1`] = `
 exports[`attributes t-att-class with multiple classes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
@@ -432,7 +512,7 @@ exports[`attributes t-att-class with multiple classes 1`] = `
 exports[`attributes t-att-class with multiple classes 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
@@ -443,10 +523,24 @@ exports[`attributes t-att-class with multiple classes 2`] = `
 }"
 `;
 
+exports[`attributes t-att-class with multiple classes 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = {'a  b  c':ctx['value']};
+    return block1([attr1]);
+  }
+}"
+`;
+
 exports[`attributes t-att-class with multiple classes, some of which are duplicate 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
@@ -460,7 +554,7 @@ exports[`attributes t-att-class with multiple classes, some of which are duplica
 exports[`attributes t-att-class with object 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"static\\" block-attribute-0=\\"class\\"/>\`);
   
@@ -471,10 +565,38 @@ exports[`attributes t-att-class with object 1`] = `
 }"
 `;
 
+exports[`attributes t-att-class with object 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = {' a ':ctx['value']};
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes t-att-class with object 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = {' ':ctx['value']};
+    return block1([attr1]);
+  }
+}"
+`;
+
 exports[`attributes t-attf-class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
@@ -488,7 +610,7 @@ exports[`attributes t-attf-class 1`] = `
 exports[`attributes t-attf-class should combine with class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"hello\\" block-attribute-0=\\"class\\"/>\`);
   
@@ -502,7 +624,7 @@ exports[`attributes t-attf-class should combine with class 1`] = `
 exports[`attributes t-attf-class with multiple classes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
@@ -516,7 +638,7 @@ exports[`attributes t-attf-class with multiple classes 1`] = `
 exports[`attributes t-attf-class with multiple classes separated by multiple spaces 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
@@ -530,7 +652,7 @@ exports[`attributes t-attf-class with multiple classes separated by multiple spa
 exports[`attributes tuple literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attributes=\\"0\\"/>\`);
   
@@ -544,7 +666,7 @@ exports[`attributes tuple literal 1`] = `
 exports[`attributes tuple variable 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attributes=\\"0\\"/>\`);
   
@@ -558,7 +680,7 @@ exports[`attributes tuple variable 1`] = `
 exports[`attributes two classes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"a b\\"/>\`);
   
@@ -571,7 +693,7 @@ exports[`attributes two classes 1`] = `
 exports[`attributes two dynamic attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\" block-attribute-1=\\"bar\\"/>\`);
   
@@ -586,7 +708,7 @@ exports[`attributes two dynamic attributes 1`] = `
 exports[`attributes updating classes (with obj notation) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"hoy\\" block-attribute-0=\\"class\\"/>\`);
   
@@ -600,15 +722,18 @@ exports[`attributes updating classes (with obj notation) 1`] = `
 exports[`attributes various escapes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div foo=\\"&lt;foo\\" block-attribute-0=\\"bar\\" block-attribute-1=\\"baz\\" block-attributes=\\"2\\"/>\`);
+  let block3 = 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'];
-    return block1([attr1, attr2, attr3]);
+    const b3 = block3([attr1, attr2, attr3]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -616,7 +741,7 @@ exports[`attributes various escapes 1`] = `
 exports[`attributes various escapes 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div> &lt; </div>\`);
   
@@ -629,7 +754,7 @@ exports[`attributes various escapes 2 1`] = `
 exports[`special cases for some specific html attributes/properties input of type checkbox with t-att-indeterminate 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"indeterminate\\"/>\`);
   
@@ -643,7 +768,7 @@ exports[`special cases for some specific html attributes/properties input of typ
 exports[`special cases for some specific html attributes/properties input type= checkbox, with t-att-checked 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\"/>\`);
   
@@ -657,7 +782,7 @@ exports[`special cases for some specific html attributes/properties input type=
 exports[`special cases for some specific html attributes/properties input with t-att-value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
   
@@ -671,13 +796,20 @@ exports[`special cases for some specific html attributes/properties input with t
 exports[`special cases for some specific html attributes/properties select with t-att-value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<select block-attribute-0=\\"value\\"><option value=\\"potato\\">Potato</option><option value=\\"tomato\\">Tomato</option><option value=\\"onion\\">Onion</option></select>\`);
+  let block3 = createBlock(\`<select block-attribute-0=\\"value\\">
+ <option value=\\"potato\\">Potato</option>
+ <option value=\\"tomato\\">Tomato</option>
+ <option value=\\"onion\\">Onion</option>
+ </select>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     let attr1 = ctx['value'];
-    return block1([attr1]);
+    const b3 = block3([attr1]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -685,7 +817,7 @@ exports[`special cases for some specific html attributes/properties select with
 exports[`special cases for some specific html attributes/properties textarea with t-att-value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<textarea block-attribute-0=\\"value\\"/>\`);
   
@@ -699,12 +831,25 @@ exports[`special cases for some specific html attributes/properties textarea wit
 exports[`special cases for some specific html attributes/properties various boolean html attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  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>\`);
+  let block3 = createBlock(\`<div>
+ <input type=\\"checkbox\\" checked=\\"checked\\"/>
+ <input checked=\\"checked\\"/>
+ <div checked=\\"checked\\"/>
+ <div selected=\\"selected\\"/>
+ <option selected=\\"selected\\" other=\\"1\\"/>
+ <input readonly=\\"readonly\\"/>
+ <button disabled=\\"disabled\\"/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    const b2 = text(\`
+ \`);
+    const b3 = block3();
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;

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

@@ -3,7 +3,7 @@
 exports[`comments only a comment 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return comment(\` comment\`);
@@ -14,7 +14,7 @@ exports[`comments only a comment 1`] = `
 exports[`comments properly handle comments 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>hello <!-- comment-->owl</div>\`);
   
@@ -27,20 +27,25 @@ exports[`comments properly handle comments 1`] = `
 exports[`comments properly handle comments between t-if/t-else 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
-  let block2 = createBlock(\`<span>true</span>\`);
-  let block3 = createBlock(\`<span>owl</span>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/><block-child-1/>
+ </div>\`);
+  let block4 = createBlock(\`<span>true</span>\`);
+  let block5 = createBlock(\`<span>owl</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    const b2 = text(\`
+ \`);
+    let b4,b5;
     if (true) {
-      b2 = block2();
+      b4 = block4();
     } else {
-      b3 = block3();
+      b5 = block5();
     }
-    return block1([], [b2, b3]);
+    const b3 = block3([], [b4, b5]);
+    return multi([b2, b3]);
   }
 }"
 `;

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

@@ -3,7 +3,7 @@
 exports[`t-on can bind event handler 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
@@ -17,7 +17,7 @@ exports[`t-on can bind event handler 1`] = `
 exports[`t-on can bind handlers with arguments 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
@@ -32,7 +32,7 @@ exports[`t-on can bind handlers with arguments 1`] = `
 exports[`t-on can bind handlers with empty  object 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
@@ -47,7 +47,7 @@ exports[`t-on can bind handlers with empty  object 1`] = `
 exports[`t-on can bind handlers with empty object (with non empty inner string) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
@@ -62,26 +62,34 @@ exports[`t-on can bind handlers with empty object (with non empty inner string)
 exports[`t-on can bind handlers with empty object (with non empty inner string) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
-  let block3 = createBlock(\`<li><a block-handler-0=\\"click\\">link</a></li>\`);
+  let block3 = createBlock(\`<ul>
+ <block-child-0/>
+ </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_block2, v_block2, l_block2, c_block2] = prepareList(['someval']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`action\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(['someval']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`action\`] = v_block4[i1];
       ctx[\`action_index\`] = i1;
       const key1 = ctx['action_index'];
       const v1 = ctx['activate'];
       const v2 = ctx['action'];
       let hdlr1 = [()=>v1(v2), ctx];
-      c_block2[i1] = withKey(block3([hdlr1]), key1);
+      c_block4[i1] = withKey(block5([hdlr1]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -89,7 +97,7 @@ exports[`t-on can bind handlers with empty object (with non empty inner string)
 exports[`t-on can bind handlers with object arguments 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
@@ -104,14 +112,17 @@ exports[`t-on can bind handlers with object arguments 1`] = `
 exports[`t-on can bind two event handlers 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<button block-handler-0=\\"click\\" block-handler-1=\\"dblclick\\">Click</button>\`);
+  let block3 = 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];
-    return block1([hdlr1, hdlr2]);
+    const b3 = block3([hdlr1, hdlr2]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -119,7 +130,7 @@ exports[`t-on can bind two event handlers 1`] = `
 exports[`t-on handler is bound to proper owner 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
@@ -133,21 +144,29 @@ exports[`t-on handler is bound to proper owner 1`] = `
 exports[`t-on handler is bound to proper owner, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block2 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  let block6 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1]);;
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`value\`] = v_block1[i1];
+    const [k_block3, v_block3, l_block3, c_block3] = prepareList([1]);;
+    for (let i1 = 0; i1 < l_block3; i1++) {
+      ctx[\`value\`] = v_block3[i1];
       const key1 = ctx['value'];
+      const b5 = text(\`
+ \`);
       let hdlr1 = [ctx['add'], ctx];
-      c_block1[i1] = withKey(block2([hdlr1]), key1);
+      const b6 = block6([hdlr1]);
+      const b7 = text(\`
+ \`);
+      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
     }
-    return list(c_block1);
+    const b3 = list(c_block3);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -155,7 +174,7 @@ exports[`t-on handler is bound to proper owner, part 2 1`] = `
 exports[`t-on handler is bound to proper owner, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -167,7 +186,7 @@ exports[`t-on handler is bound to proper owner, part 3 1`] = `
 exports[`t-on handler is bound to proper owner, part 3 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
@@ -181,23 +200,31 @@ exports[`t-on handler is bound to proper owner, part 3 2`] = `
 exports[`t-on handler is bound to proper owner, part 4 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1]);;
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`value\`] = v_block1[i1];
+    const [k_block3, v_block3, l_block3, c_block3] = prepareList([1]);;
+    for (let i1 = 0; i1 < l_block3; i1++) {
+      ctx[\`value\`] = v_block3[i1];
       ctx[\`value_first\`] = i1 === 0;
-      ctx[\`value_last\`] = i1 === v_block1.length - 1;
+      ctx[\`value_last\`] = i1 === v_block3.length - 1;
       ctx[\`value_index\`] = i1;
-      ctx[\`value_value\`] = k_block1[i1];
+      ctx[\`value_value\`] = k_block3[i1];
       const key1 = ctx['value'];
-      c_block1[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
+      const b5 = text(\`
+ \`);
+      const b6 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
+      const b7 = text(\`
+ \`);
+      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
     }
-    return list(c_block1);
+    const b3 = list(c_block3);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -205,7 +232,7 @@ exports[`t-on handler is bound to proper owner, part 4 1`] = `
 exports[`t-on handler is bound to proper owner, part 4 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
@@ -219,7 +246,7 @@ exports[`t-on handler is bound to proper owner, part 4 2`] = `
 exports[`t-on receive event in first argument 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
@@ -233,9 +260,11 @@ exports[`t-on receive event in first argument 1`] = `
 exports[`t-on t-on modifiers (native listener) basic support for native listener 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div class=\\"myClass\\" block-handler-0=\\"click\\"><button block-handler-1=\\"click\\">Button</button></div>\`);
+  let block1 = createBlock(\`<div class=\\"myClass\\" block-handler-0=\\"click\\">
+ <button block-handler-1=\\"click\\">Button</button>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['divClicked'], ctx];
@@ -248,7 +277,7 @@ exports[`t-on t-on modifiers (native listener) basic support for native listener
 exports[`t-on t-on modifiers (native listener) t-on combined with t-esc 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><block-text-1/></button></div>\`);
   
@@ -263,7 +292,7 @@ exports[`t-on t-on modifiers (native listener) t-on combined with t-esc 1`] = `
 exports[`t-on t-on modifiers (native listener) t-on combined with t-out 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><block-child-0/></button></div>\`);
@@ -279,9 +308,11 @@ exports[`t-on t-on modifiers (native listener) t-on combined with t-out 1`] = `
 exports[`t-on t-on modifiers (native listener) t-on with .capture modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div block-handler-0=\\"click.capture\\"><button block-handler-1=\\"click\\">Button</button></div>\`);
+  let block1 = createBlock(\`<div block-handler-0=\\"click.capture\\">
+ <button block-handler-1=\\"click\\">Button</button>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [\\"capture\\", ctx['onCapture'], ctx];
@@ -294,9 +325,11 @@ exports[`t-on t-on modifiers (native listener) t-on with .capture modifier 1`] =
 exports[`t-on t-on modifiers (native listener) t-on with empty handler (only modifiers) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent\\">Button</button></div>\`);
+  let block1 = createBlock(\`<div>
+ <button block-handler-0=\\"click.prevent\\">Button</button>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [\\"prevent\\", , ctx];
@@ -308,9 +341,11 @@ exports[`t-on t-on modifiers (native listener) t-on with empty handler (only mod
 exports[`t-on t-on modifiers (native listener) t-on with prevent and self modifiers (order matters) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent.self\\"><span>Button</span></button></div>\`);
+  let block1 = createBlock(\`<div>
+ <button block-handler-0=\\"click.prevent.self\\"><span>Button</span></button>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [\\"prevent\\",\\"self\\", ctx['onClick'], ctx];
@@ -322,9 +357,13 @@ exports[`t-on t-on modifiers (native listener) t-on with prevent and self modifi
 exports[`t-on t-on modifiers (native listener) t-on with prevent and/or stop modifiers 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent\\">Button 1</button><button block-handler-1=\\"click.stop\\">Button 2</button><button block-handler-2=\\"click.prevent.stop\\">Button 3</button></div>\`);
+  let block1 = createBlock(\`<div>
+ <button block-handler-0=\\"click.prevent\\">Button 1</button>
+ <button block-handler-1=\\"click.stop\\">Button 2</button>
+ <button block-handler-2=\\"click.prevent.stop\\">Button 3</button>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [\\"prevent\\", ctx['onClickPrevented'], ctx];
@@ -338,11 +377,15 @@ exports[`t-on t-on modifiers (native listener) t-on with prevent and/or stop mod
 exports[`t-on t-on modifiers (native listener) t-on with prevent modifier in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<a href=\\"#\\" block-handler-0=\\"click.prevent\\"> Edit <block-text-1/></a>\`);
+  let block1 = createBlock(\`<div>
+ <block-child-0/>
+ </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);
@@ -350,12 +393,18 @@ 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;
-      c_block2[i1] = withKey(block3([hdlr1, txt1]), key1);
+      const b5 = block5([hdlr1, txt1]);
+      const b6 = text(\`
+ \`);
+      c_block2[i1] = withKey(multi([b4, b5, b6]), key1);
     }
+    ctx = ctx.__proto__;
     const b2 = list(c_block2);
     return block1([], [b2]);
   }
@@ -365,9 +414,11 @@ exports[`t-on t-on modifiers (native listener) t-on with prevent modifier in t-f
 exports[`t-on t-on modifiers (native listener) t-on with self and prevent modifiers (order matters) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><button block-handler-0=\\"click.self.prevent\\"><span>Button</span></button></div>\`);
+  let block1 = createBlock(\`<div>
+ <button block-handler-0=\\"click.self.prevent\\"><span>Button</span></button>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [\\"self\\",\\"prevent\\", ctx['onClick'], ctx];
@@ -379,9 +430,12 @@ exports[`t-on t-on modifiers (native listener) t-on with self and prevent modifi
 exports[`t-on t-on modifiers (native listener) t-on with self modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><span>Button</span></button><button block-handler-1=\\"click.self\\"><span>Button</span></button></div>\`);
+  let block1 = createBlock(\`<div>
+ <button block-handler-0=\\"click\\"><span>Button</span></button>
+ <button block-handler-1=\\"click.self\\"><span>Button</span></button>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['onClick'], ctx];
@@ -394,9 +448,11 @@ exports[`t-on t-on modifiers (native listener) t-on with self modifier 1`] = `
 exports[`t-on t-on modifiers (synthetic listener) basic support for synthetic 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div block-handler-0=\\"click.synthetic\\"><button block-handler-1=\\"click.synthetic\\">Button</button></div>\`);
+  let block1 = createBlock(\`<div block-handler-0=\\"click.synthetic\\">
+ <button block-handler-1=\\"click.synthetic\\">Button</button>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [\\"synthetic\\", ctx['divClicked'], ctx];
@@ -409,7 +465,7 @@ exports[`t-on t-on modifiers (synthetic listener) basic support for synthetic 1`
 exports[`t-on t-on with inline statement (function call) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
@@ -424,7 +480,7 @@ exports[`t-on t-on with inline statement (function call) 1`] = `
 exports[`t-on t-on with inline statement 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
@@ -439,7 +495,7 @@ exports[`t-on t-on with inline statement 1`] = `
 exports[`t-on t-on with inline statement, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Toggle</button>\`);
   
@@ -454,7 +510,7 @@ exports[`t-on t-on with inline statement, part 2 1`] = `
 exports[`t-on t-on with inline statement, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Toggle</button>\`);
   
@@ -470,7 +526,7 @@ exports[`t-on t-on with inline statement, part 3 1`] = `
 exports[`t-on t-on with t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -485,7 +541,7 @@ exports[`t-on t-on with t-call 1`] = `
 exports[`t-on t-on with t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
   
@@ -499,7 +555,7 @@ exports[`t-on t-on with t-call 2`] = `
 exports[`t-on t-on, with arguments and t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -514,7 +570,7 @@ exports[`t-on t-on, with arguments and t-call 1`] = `
 exports[`t-on t-on, with arguments and t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
   

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

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

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

@@ -3,7 +3,7 @@
 exports[`memory t-foreach does not leak stuff in global scope 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
   let block1 = createBlock(\`<p><block-child-0/></p>\`);

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

@@ -3,7 +3,7 @@
 exports[`simple templates, mostly static can render a table row 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<tr><td>cell</td></tr>\`);
   
@@ -16,7 +16,7 @@ exports[`simple templates, mostly static can render a table row 1`] = `
 exports[`simple templates, mostly static div with a class attribute 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"abc\\">foo</div>\`);
   
@@ -29,7 +29,7 @@ exports[`simple templates, mostly static div with a class attribute 1`] = `
 exports[`simple templates, mostly static div with a class attribute with a quote 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"a'bc\\">word</div>\`);
   
@@ -42,7 +42,7 @@ exports[`simple templates, mostly static div with a class attribute with a quote
 exports[`simple templates, mostly static div with a span child node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><span>word</span></div>\`);
   
@@ -55,7 +55,7 @@ exports[`simple templates, mostly static div with a span child node 1`] = `
 exports[`simple templates, mostly static div with an arbitrary attribute with a quote 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div abc=\\"a'bc\\">word</div>\`);
   
@@ -68,7 +68,7 @@ exports[`simple templates, mostly static div with an arbitrary attribute with a
 exports[`simple templates, mostly static div with an empty class attribute 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>word</div>\`);
   
@@ -81,7 +81,7 @@ exports[`simple templates, mostly static div with an empty class attribute 1`] =
 exports[`simple templates, mostly static div with content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>foo</div>\`);
   
@@ -94,7 +94,7 @@ exports[`simple templates, mostly static div with content 1`] = `
 exports[`simple templates, mostly static dom node with t-esc 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -108,7 +108,7 @@ exports[`simple templates, mostly static dom node with t-esc 1`] = `
 exports[`simple templates, mostly static dom node with t-esc 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -122,7 +122,7 @@ exports[`simple templates, mostly static dom node with t-esc 2`] = `
 exports[`simple templates, mostly static dynamic text value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(ctx['text']);
@@ -133,7 +133,7 @@ exports[`simple templates, mostly static dynamic text value 1`] = `
 exports[`simple templates, mostly static empty div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -146,7 +146,7 @@ exports[`simple templates, mostly static empty div 1`] = `
 exports[`simple templates, mostly static empty string 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`\`);
@@ -157,7 +157,7 @@ exports[`simple templates, mostly static empty string 1`] = `
 exports[`simple templates, mostly static empty string in a template set 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`\`);
@@ -168,7 +168,7 @@ exports[`simple templates, mostly static empty string in a template set 1`] = `
 exports[`simple templates, mostly static inline template string in t-esc 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`text\`);
@@ -179,7 +179,7 @@ exports[`simple templates, mostly static inline template string in t-esc 1`] = `
 exports[`simple templates, mostly static inline template string with content in t-esc 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
@@ -194,7 +194,7 @@ exports[`simple templates, mostly static inline template string with content in
 exports[`simple templates, mostly static inline template string with variable in context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`text \${ctx['v']}\`);
@@ -205,7 +205,7 @@ exports[`simple templates, mostly static inline template string with variable in
 exports[`simple templates, mostly static multiple root nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = createBlock(\`<div>foo</div>\`);
   let block3 = createBlock(\`<span>hey</span>\`);
@@ -221,7 +221,7 @@ exports[`simple templates, mostly static multiple root nodes 1`] = `
 exports[`simple templates, mostly static simple string 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`hello vdom\`);
@@ -232,7 +232,7 @@ exports[`simple templates, mostly static simple string 1`] = `
 exports[`simple templates, mostly static simple string in t tag 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`hello vdom\`);
@@ -243,7 +243,7 @@ exports[`simple templates, mostly static simple string in t tag 1`] = `
 exports[`simple templates, mostly static static text and dynamic text (no t tag) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(\`hello \`);
@@ -256,7 +256,7 @@ exports[`simple templates, mostly static static text and dynamic text (no t tag)
 exports[`simple templates, mostly static static text and dynamic text 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(\`hello \`);
@@ -269,7 +269,7 @@ exports[`simple templates, mostly static static text and dynamic text 1`] = `
 exports[`simple templates, mostly static t-esc in dom node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -283,7 +283,7 @@ exports[`simple templates, mostly static t-esc in dom node 1`] = `
 exports[`simple templates, mostly static t-esc in dom node, variations 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>hello <block-text-0/></div>\`);
   
@@ -297,7 +297,7 @@ exports[`simple templates, mostly static t-esc in dom node, variations 1`] = `
 exports[`simple templates, mostly static t-esc in dom node, variations 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>hello <block-text-0/> world</div>\`);
   
@@ -311,15 +311,24 @@ exports[`simple templates, mostly static t-esc in dom node, variations 2`] = `
 exports[`simple templates, mostly static template with multiple t tag with multiple content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/><block-text-1/>Loading<block-text-2/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-text-0/>
+ 
+ <block-text-1/>
+ Loading<block-text-2/>
+ 
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     let txt1 = ctx['a'];
     let txt2 = ctx['b'];
     let txt3 = ctx['c'];
-    return block1([txt1, txt2, txt3]);
+    const b3 = block3([txt1, txt2, txt3]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -327,7 +336,7 @@ exports[`simple templates, mostly static template with multiple t tag with multi
 exports[`simple templates, mostly static template with t tag with multiple content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>Loading<block-child-0/></div>\`);
   
@@ -344,7 +353,7 @@ exports[`simple templates, mostly static template with t tag with multiple conte
 exports[`simple templates, mostly static two t-escs next to each other 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['text1']);
@@ -357,7 +366,7 @@ exports[`simple templates, mostly static two t-escs next to each other 1`] = `
 exports[`simple templates, mostly static two t-escs next to each other 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['text1']);
@@ -370,7 +379,7 @@ exports[`simple templates, mostly static two t-escs next to each other 2`] = `
 exports[`simple templates, mostly static two t-escs next to each other, in a div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
   

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

@@ -3,7 +3,7 @@
 exports[`properly support svg add proper namespace to g tags 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   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>\`);
   
@@ -16,7 +16,7 @@ exports[`properly support svg add proper namespace to g tags 1`] = `
 exports[`properly support svg add proper namespace to svg 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\" width=\\"100px\\" height=\\"90px\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/> </svg>\`);
   
@@ -29,7 +29,7 @@ exports[`properly support svg add proper namespace to svg 1`] = `
 exports[`properly support svg namespace to g tags not added if already in svg namespace 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><g/></svg>\`);
   
@@ -42,7 +42,7 @@ exports[`properly support svg namespace to g tags not added if already in svg na
 exports[`properly support svg namespace to svg tags added even if already in svg namespace 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><svg/></svg>\`);
   
@@ -55,19 +55,29 @@ exports[`properly support svg namespace to svg tags added even if already in svg
 exports[`properly support svg svg creates new block if it is within html -- 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block2 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><polygon fill=\\"#000000\\" points=\\"0 0 4 4 8 0\\" transform=\\"translate(5 7)\\"/><block-child-0/></svg>\`);
-  let block3 = createBlock(\`<path block-ns=\\"http://www.w3.org/2000/svg\\"/>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
+  let block4 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\">
+ <polygon fill=\\"#000000\\" points=\\"0 0 4 4 8 0\\" transform=\\"translate(5 7)\\"/>
+ <block-child-0/>
+ </svg>\`);
+  let block5 = createBlock(\`<path block-ns=\\"http://www.w3.org/2000/svg\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b3;
+    const b2 = text(\`
+ \`);
+    let b5;
     if (ctx['hasPath']) {
-      b3 = block3();
+      b5 = block5();
     }
-    const b2 = block2([], [b3]);
-    return block1([], [b2]);
+    const b4 = block4([], [b5]);
+    const b3 = block3([], [b4]);
+    const b6 = text(\`
+ \`);
+    return multi([b2, b3, b6]);
   }
 }"
 `;
@@ -75,14 +85,23 @@ exports[`properly support svg svg creates new block if it is within html -- 2 1`
 exports[`properly support svg svg creates new block if it is within html 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block2 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><polygon fill=\\"#000000\\" points=\\"0 0 4 4 8 0\\" transform=\\"translate(5 7)\\"/></svg>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
+  let block4 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\">
+ <polygon fill=\\"#000000\\" points=\\"0 0 4 4 8 0\\" transform=\\"translate(5 7)\\"/>
+ </svg>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = block2();
-    return block1([], [b2]);
+    const b2 = text(\`
+ \`);
+    const b4 = block4();
+    const b3 = block3([], [b4]);
+    const b5 = text(\`
+ \`);
+    return multi([b2, b3, b5]);
   }
 }"
 `;
@@ -90,7 +109,7 @@ exports[`properly support svg svg creates new block if it is within html 1`] = `
 exports[`properly support svg svg namespace added to sub templates if root tag is path 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`path\`);
   
   let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
@@ -105,7 +124,7 @@ exports[`properly support svg svg namespace added to sub templates if root tag i
 exports[`properly support svg svg namespace added to sub templates if root tag is path 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<path block-ns=\\"http://www.w3.org/2000/svg\\"/>\`);
   
@@ -118,7 +137,7 @@ exports[`properly support svg svg namespace added to sub templates if root tag i
 exports[`properly support svg svg namespace added to sub-blocks 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
   let block2 = createBlock(\`<path block-ns=\\"http://www.w3.org/2000/svg\\"/>\`);

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

@@ -3,7 +3,7 @@
 exports[`debugging t-debug 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<span>hey</span>\`);
@@ -23,7 +23,7 @@ exports[`debugging t-debug 1`] = `
 exports[`debugging t-debug on sub template 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p>coucou</p>\`);
   
@@ -37,7 +37,7 @@ exports[`debugging t-debug on sub template 1`] = `
 exports[`debugging t-debug on sub template 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -52,10 +52,13 @@ exports[`debugging t-debug on sub template 2`] = `
 exports[`debugging t-log 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  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);

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

@@ -3,17 +3,26 @@
 exports[`t-esc div with falsy values 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  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>\`);
+  let block3 = createBlock(\`<div>
+ <p><block-text-0/></p>
+ <p><block-text-1/></p>
+ <p><block-text-2/></p>
+ <p><block-text-3/></p>
+ <p><block-text-4/></p>
+ </div>\`);
   
   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'];
-    return block1([txt1, txt2, txt3, txt4, txt5]);
+    const b3 = block3([txt1, txt2, txt3, txt4, txt5]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -21,7 +30,7 @@ exports[`t-esc div with falsy values 1`] = `
 exports[`t-esc escaping 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -35,7 +44,7 @@ exports[`t-esc escaping 1`] = `
 exports[`t-esc escaping on a node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -49,7 +58,7 @@ exports[`t-esc escaping on a node 1`] = `
 exports[`t-esc escaping on a node with a body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { withDefault } = helpers;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -64,7 +73,7 @@ exports[`t-esc escaping on a node with a body 1`] = `
 exports[`t-esc escaping on a node with a body, as a default 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { withDefault } = helpers;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -79,19 +88,21 @@ exports[`t-esc escaping on a node with a body, as a default 1`] = `
 exports[`t-esc falsy values in text nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(ctx['v1']);
-    const b3 = text(\`:\`);
-    const b4 = text(ctx['v2']);
-    const b5 = text(\`:\`);
-    const b6 = text(ctx['v3']);
-    const b7 = text(\`:\`);
-    const b8 = text(ctx['v4']);
-    const b9 = text(\`:\`);
-    const b10 = text(ctx['v5']);
-    return multi([b2, b3, b4, b5, b6, b7, b8, b9, b10]);
+    const b2 = text(\`
+ \`);
+    const b3 = text(ctx['v1']);
+    const b4 = text(\`:\`);
+    const b5 = text(ctx['v2']);
+    const b6 = text(\`:\`);
+    const b7 = text(ctx['v3']);
+    const b8 = text(\`:\`);
+    const b9 = text(ctx['v4']);
+    const b10 = text(\`:\`);
+    const b11 = text(ctx['v5']);
+    return multi([b2, b3, b4, b5, b6, b7, b8, b9, b10, b11]);
   }
 }"
 `;
@@ -99,7 +110,7 @@ exports[`t-esc falsy values in text nodes 1`] = `
 exports[`t-esc literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -113,7 +124,7 @@ exports[`t-esc literal 1`] = `
 exports[`t-esc t-esc is escaped 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -126,7 +137,32 @@ 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, node);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node);
+    let txt1 = ctx['var'];
+    return block1([txt1]);
+  }
+}"
+`;
+
+exports[`t-esc t-esc with the 0 number 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['var']);
+  }
+}"
+`;
+
+exports[`t-esc t-esc with the 0 number, in a p 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<p><block-text-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['var'];
     return block1([txt1]);
   }
@@ -136,7 +172,7 @@ exports[`t-esc t-esc is escaped 1`] = `
 exports[`t-esc t-esc work with spread operator 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -150,7 +186,7 @@ exports[`t-esc t-esc work with spread operator 1`] = `
 exports[`t-esc t-esc=0 is escaped 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
@@ -171,7 +207,7 @@ exports[`t-esc t-esc=0 is escaped 1`] = `
 exports[`t-esc t-esc=0 is escaped 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -183,10 +219,21 @@ exports[`t-esc t-esc=0 is escaped 2`] = `
 }"
 `;
 
+exports[`t-esc top level t-esc with undefined 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['var']);
+  }
+}"
+`;
+
 exports[`t-esc variable 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   

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

@@ -3,21 +3,27 @@
 exports[`t-foreach does not pollute the rendering context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1]);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList([1]);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`item\`] = v_block4[i1];
       const key1 = ctx['item'];
-      c_block2[i1] = withKey(text(ctx['item']), key1);
+      c_block4[i1] = withKey(text(ctx['item']), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -25,23 +31,29 @@ exports[`t-foreach does not pollute the rendering context 1`] = `
 exports[`t-foreach iterate on items (on a element node) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<span><block-text-0/></span>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
+  let block5 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1,2]);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList([1,2]);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`item\`] = v_block4[i1];
       const key1 = ctx['item'];
       let txt1 = ctx['item'];
-      c_block2[i1] = withKey(block3([txt1]), key1);
+      c_block4[i1] = withKey(block5([txt1]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -49,30 +61,38 @@ exports[`t-foreach iterate on items (on a element node) 1`] = `
 exports[`t-foreach iterate on items 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList([3,2,1]);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`item\`] = v_block4[i1];
       ctx[\`item_index\`] = i1;
-      ctx[\`item_value\`] = k_block2[i1];
+      ctx[\`item_value\`] = k_block4[i1];
       const key1 = ctx['item'];
-      const b4 = text(\` [\`);
-      const b5 = text(ctx['item_index']);
-      const b6 = text(\`: \`);
-      const b7 = text(ctx['item']);
-      const b8 = text(\` \`);
-      const b9 = text(ctx['item_value']);
-      const b10 = text(\`] \`);
-      c_block2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9, b10]), key1);
+      const b6 = text(\`
+ [\`);
+      const b7 = text(ctx['item_index']);
+      const b8 = text(\`: \`);
+      const b9 = text(ctx['item']);
+      const b10 = text(\` \`);
+      const b11 = text(ctx['item_value']);
+      const b12 = text(\`]
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8, b9, b10, b11, b12]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -80,30 +100,38 @@ exports[`t-foreach iterate on items 1`] = `
 exports[`t-foreach iterate, dict param 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['value']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['value']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`item\`] = v_block4[i1];
       ctx[\`item_index\`] = i1;
-      ctx[\`item_value\`] = k_block2[i1];
+      ctx[\`item_value\`] = k_block4[i1];
       const key1 = ctx['item_index'];
-      const b4 = text(\` [\`);
-      const b5 = text(ctx['item_index']);
-      const b6 = text(\`: \`);
-      const b7 = text(ctx['item']);
-      const b8 = text(\` \`);
-      const b9 = text(ctx['item_value']);
-      const b10 = text(\`] \`);
-      c_block2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9, b10]), key1);
+      const b6 = text(\`
+ [\`);
+      const b7 = text(ctx['item_index']);
+      const b8 = text(\`: \`);
+      const b9 = text(ctx['item']);
+      const b10 = text(\` \`);
+      const b11 = text(ctx['item_value']);
+      const b12 = text(\`]
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8, b9, b10, b11, b12]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -111,35 +139,43 @@ exports[`t-foreach iterate, dict param 1`] = `
 exports[`t-foreach iterate, position 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(5));;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`elem\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(Array(5));;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`elem\`] = v_block4[i1];
       ctx[\`elem_first\`] = i1 === 0;
-      ctx[\`elem_last\`] = i1 === v_block2.length - 1;
+      ctx[\`elem_last\`] = i1 === v_block4.length - 1;
       ctx[\`elem_index\`] = i1;
       const key1 = ctx['elem'];
-      let b4,b5,b6,b7,b8,b9;
-      b4 = text(\` -\`);
+      let b6,b7,b8,b9,b10,b11;
+      b6 = text(\`
+ -\`);
       if (ctx['elem_first']) {
-        b5 = text(\` first\`);
+        b7 = text(\` first\`);
       }
       if (ctx['elem_last']) {
-        b6 = text(\` last\`);
+        b8 = text(\` last\`);
       }
-      b7 = text(\` (\`);
-      b8 = text(ctx['elem_index']);
-      b9 = text(\`) \`);
-      c_block2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9]), key1);
+      b9 = text(\` (\`);
+      b10 = text(ctx['elem_index']);
+      b11 = text(\`)
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8, b9, b10, b11]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -147,21 +183,27 @@ exports[`t-foreach iterate, position 1`] = `
 exports[`t-foreach simple iteration (in a node) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList([3,2,1]);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`item\`] = v_block4[i1];
       const key1 = ctx['item'];
-      c_block2[i1] = withKey(text(ctx['item']), key1);
+      c_block4[i1] = withKey(text(ctx['item']), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -169,7 +211,7 @@ exports[`t-foreach simple iteration (in a node) 1`] = `
 exports[`t-foreach simple iteration 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
@@ -188,25 +230,34 @@ exports[`t-foreach simple iteration 1`] = `
 exports[`t-foreach simple iteration with two nodes inside 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<span>a<block-text-0/></span>\`);
-  let block4 = createBlock(\`<span>b<block-text-0/></span>\`);
+  let block6 = createBlock(\`<span>a<block-text-0/></span>\`);
+  let block8 = createBlock(\`<span>b<block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList([3,2,1]);;
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = v_block1[i1];
+    const [k_block3, v_block3, l_block3, c_block3] = prepareList([3,2,1]);;
+    for (let i1 = 0; i1 < l_block3; i1++) {
+      ctx[\`item\`] = v_block3[i1];
       const key1 = ctx['item'];
+      const b5 = text(\`
+ \`);
       let txt1 = ctx['item'];
-      const b3 = block3([txt1]);
+      const b6 = block6([txt1]);
+      const b7 = text(\`
+ \`);
       let txt2 = ctx['item'];
-      const b4 = block4([txt2]);
-      c_block1[i1] = withKey(multi([b3, b4]), key1);
+      const b8 = block8([txt2]);
+      const b9 = text(\`
+ \`);
+      c_block3[i1] = withKey(multi([b5, b6, b7, b8, b9]), key1);
     }
-    return list(c_block1);
+    const b3 = list(c_block3);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -214,52 +265,75 @@ exports[`t-foreach simple iteration with two nodes inside 1`] = `
 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, component, comment } = bdom;
-  let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, isBoundary, withDefault, setContextValue, zero, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block1 = createBlock(\`<div><block-child-0/><span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span></div>\`);
-  let block6 = createBlock(\`<span><block-text-0/></span>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ <span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span>
+ </div>\`);
+  let block16 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`a\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['numbers']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`a\`] = v_block4[i1];
       ctx[\`a_first\`] = i1 === 0;
-      ctx[\`a_last\`] = i1 === v_block2.length - 1;
+      ctx[\`a_last\`] = i1 === v_block4.length - 1;
       ctx[\`a_index\`] = i1;
-      ctx[\`a_value\`] = k_block2[i1];
+      ctx[\`a_value\`] = k_block4[i1];
       const key1 = ctx['a'];
+      const b6 = text(\`
+ \`);
       ctx = Object.create(ctx);
-      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['letters']);;
-      for (let i2 = 0; i2 < l_block4; i2++) {
-        ctx[\`b\`] = v_block4[i2];
+      const [k_block7, v_block7, l_block7, c_block7] = prepareList(ctx['letters']);;
+      for (let i2 = 0; i2 < l_block7; i2++) {
+        ctx[\`b\`] = v_block7[i2];
         ctx[\`b_first\`] = i2 === 0;
-        ctx[\`b_last\`] = i2 === v_block4.length - 1;
+        ctx[\`b_last\`] = i2 === v_block7.length - 1;
         ctx[\`b_index\`] = i2;
-        ctx[\`b_value\`] = k_block4[i2];
+        ctx[\`b_value\`] = k_block7[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']);
-        c_block4[i2] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`), key2);
+        const b12 = text(\`
+ \`);
+        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 b4 = list(c_block4);
+      const b7 = list(c_block7);
+      const b15 = text(\`
+ \`);
       let txt1 = ctx['c'];
-      const b6 = block6([txt1]);
-      c_block2[i1] = withKey(multi([b4, b6]), key1);
+      const b16 = block16([txt1]);
+      const b17 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b15, b16, b17]), key1);
     }
     ctx = ctx.__proto__;
-    const b2 = list(c_block2);
+    const b4 = list(c_block4);
     let txt2 = ctx['a'];
     let txt3 = ctx['b'];
     let txt4 = ctx['c'];
-    return block1([txt2, txt3, txt4], [b2]);
+    const b3 = block3([txt2, txt3, txt4], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -267,17 +341,23 @@ exports[`t-foreach t-call with body in t-foreach in t-foreach 1`] = `
 exports[`t-foreach t-call with body in t-foreach in t-foreach 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\` [\`);
-    const b3 = text(ctx['a']);
-    const b4 = text(\`] [\`);
-    const b5 = text(ctx['b']);
-    const b6 = text(\`] [\`);
-    const b7 = text(ctx['c']);
-    const b8 = text(\`] \`);
-    return multi([b2, b3, b4, b5, b6, b7, b8]);
+    const b2 = text(\`
+ \`);
+    const b3 = text(\`
+ [\`);
+    const b4 = text(ctx['a']);
+    const b5 = text(\`]
+ [\`);
+    const b6 = text(ctx['b']);
+    const b7 = text(\`]
+ [\`);
+    const b8 = text(ctx['c']);
+    const b9 = text(\`]
+ \`);
+    return multi([b2, b3, b4, b5, b6, b7, b8, b9]);
   }
 }"
 `;
@@ -285,46 +365,63 @@ exports[`t-foreach t-call with body in t-foreach in t-foreach 2`] = `
 exports[`t-foreach t-call without body in t-foreach in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block1 = createBlock(\`<div><block-child-0/><span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span></div>\`);
-  let block6 = createBlock(\`<span><block-text-0/></span>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ <span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span>
+ </div>\`);
+  let block13 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`a\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['numbers']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`a\`] = v_block4[i1];
       ctx[\`a_first\`] = i1 === 0;
-      ctx[\`a_last\`] = i1 === v_block2.length - 1;
+      ctx[\`a_last\`] = i1 === v_block4.length - 1;
       ctx[\`a_index\`] = i1;
-      ctx[\`a_value\`] = k_block2[i1];
+      ctx[\`a_value\`] = k_block4[i1];
       const key1 = ctx['a'];
+      const b6 = text(\`
+ \`);
       ctx = Object.create(ctx);
-      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['letters']);;
-      for (let i2 = 0; i2 < l_block4; i2++) {
-        ctx[\`b\`] = v_block4[i2];
+      const [k_block7, v_block7, l_block7, c_block7] = prepareList(ctx['letters']);;
+      for (let i2 = 0; i2 < l_block7; i2++) {
+        ctx[\`b\`] = v_block7[i2];
         ctx[\`b_first\`] = i2 === 0;
-        ctx[\`b_last\`] = i2 === v_block4.length - 1;
+        ctx[\`b_last\`] = i2 === v_block7.length - 1;
         ctx[\`b_index\`] = i2;
-        ctx[\`b_value\`] = k_block4[i2];
+        ctx[\`b_value\`] = k_block7[i2];
         const key2 = ctx['b'];
-        c_block4[i2] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`), key2);
+        const b9 = text(\`
+ \`);
+        const b10 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`);
+        const b11 = text(\`
+ \`);
+        c_block7[i2] = withKey(multi([b9, b10, b11]), key2);
       }
       ctx = ctx.__proto__;
-      const b4 = list(c_block4);
+      const b7 = list(c_block7);
+      const b12 = text(\`
+ \`);
       let txt1 = ctx['c'];
-      const b6 = block6([txt1]);
-      c_block2[i1] = withKey(multi([b4, b6]), key1);
+      const b13 = block13([txt1]);
+      const b14 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b12, b13, b14]), key1);
     }
     ctx = ctx.__proto__;
-    const b2 = list(c_block2);
+    const b4 = list(c_block4);
     let txt2 = ctx['a'];
     let txt3 = ctx['b'];
     let txt4 = ctx['c'];
-    return block1([txt2, txt3, txt4], [b2]);
+    const b3 = block3([txt2, txt3, txt4], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -332,21 +429,29 @@ exports[`t-foreach t-call without body in t-foreach in t-foreach 1`] = `
 exports[`t-foreach t-call without body in t-foreach in t-foreach 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
   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 b2 = text(\` [\`);
-    const b3 = text(ctx['a']);
-    const b4 = text(\`] [\`);
-    const b5 = text(ctx['b']);
-    const b6 = text(\`] [\`);
-    const b7 = text(ctx['c']);
-    const b8 = text(\`] \`);
-    return multi([b2, b3, b4, b5, b6, b7, b8]);
+    const b4 = text(\`
+ [\`);
+    const b5 = text(ctx['a']);
+    const b6 = text(\`]
+ [\`);
+    const b7 = text(ctx['b']);
+    const b8 = text(\`]
+ [\`);
+    const b9 = text(ctx['c']);
+    const b10 = text(\`]
+ \`);
+    return multi([b2, b3, b4, b5, b6, b7, b8, b9, b10]);
   }
 }"
 `;
@@ -354,33 +459,46 @@ exports[`t-foreach t-call without body in t-foreach in t-foreach 2`] = `
 exports[`t-foreach t-foreach in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`number\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['numbers']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`number\`] = v_block4[i1];
       const key1 = ctx['number'];
+      const b6 = text(\`
+ \`);
       ctx = Object.create(ctx);
-      const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['letters']);;
-      for (let i2 = 0; i2 < l_block3; i2++) {
-        ctx[\`letter\`] = v_block3[i2];
+      const [k_block7, v_block7, l_block7, c_block7] = prepareList(ctx['letters']);;
+      for (let i2 = 0; i2 < l_block7; i2++) {
+        ctx[\`letter\`] = v_block7[i2];
         const key2 = ctx['letter'];
-        const b5 = text(\` [\`);
-        const b6 = text(ctx['number']);
-        const b7 = text(ctx['letter']);
-        const b8 = text(\`] \`);
-        c_block3[i2] = withKey(multi([b5, b6, b7, b8]), key2);
+        const b9 = text(\`
+ [\`);
+        const b10 = text(ctx['number']);
+        const b11 = text(ctx['letter']);
+        const b12 = text(\`]
+ \`);
+        c_block7[i2] = withKey(multi([b9, b10, b11, b12]), key2);
       }
       ctx = ctx.__proto__;
-      c_block2[i1] = withKey(list(c_block3), key1);
+      const b7 = list(c_block7);
+      const b13 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b13]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -388,25 +506,32 @@ exports[`t-foreach t-foreach in t-foreach 1`] = `
 exports[`t-foreach t-foreach with t-if inside (no external node) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<span><block-text-0/></span>\`);
+  let block6 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['elems']);;
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`elem\`] = v_block1[i1];
+    const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['elems']);;
+    for (let i1 = 0; i1 < l_block3; i1++) {
+      ctx[\`elem\`] = v_block3[i1];
       const key1 = ctx['elem'].id;
-      let b3;
+      let b5,b6,b7;
+      b5 = text(\`
+ \`);
       if (ctx['elem'].id<3) {
         let txt1 = ctx['elem'].text;
-        b3 = block3([txt1]);
+        b6 = block6([txt1]);
       }
-      c_block1[i1] = withKey(multi([b3]), key1);
+      b7 = text(\`
+ \`);
+      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
     }
-    return list(c_block1);
+    const b3 = list(c_block3);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -414,27 +539,37 @@ exports[`t-foreach t-foreach with t-if inside (no external node) 1`] = `
 exports[`t-foreach t-foreach with t-if inside 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block4 = createBlock(\`<span><block-text-0/></span>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
+  let block7 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['elems']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`elem\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['elems']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`elem\`] = v_block4[i1];
       const key1 = ctx['elem'].id;
-      let b4;
+      let b6,b7,b8;
+      b6 = text(\`
+ \`);
       if (ctx['elem'].id<3) {
         let txt1 = ctx['elem'].text;
-        b4 = block4([txt1]);
+        b7 = block7([txt1]);
       }
-      c_block2[i1] = withKey(multi([b4]), key1);
+      b8 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -442,22 +577,33 @@ exports[`t-foreach t-foreach with t-if inside 1`] = `
 exports[`t-foreach t-key on t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<span/>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
+  let block7 = createBlock(\`<span/>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['things']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`thing\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['things']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`thing\`] = v_block4[i1];
       const key1 = ctx['thing'];
-      c_block2[i1] = withKey(block3(), key1);
+      const b6 = text(\`
+ \`);
+      const b7 = block7();
+      const b8 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -465,7 +611,7 @@ exports[`t-foreach t-key on t-foreach 1`] = `
 exports[`t-foreach throws error if invalid loop expression 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -490,36 +636,45 @@ exports[`t-foreach throws error if invalid loop expression 1`] = `
 exports[`t-foreach with t-memo 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<p><block-text-0/><block-text-1/></p>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </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_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['items']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`item\`] = v_block4[i1];
       const key1 = ctx['item'].id;
       const memo1 = [ctx['item'].x];
       const vnode1 = cache[key1];;
       if (vnode1) {
         if (shallowEqual(vnode1.memo, memo1)) {
-          c_block2[i1] = vnode1;
+          c_block4[i1] = vnode1;
           nextCache[key1] = vnode1;
           continue;
         }
       }
       let txt1 = ctx['item'].x;
       let txt2 = ctx['item'].y;
-      c_block2[i1] = withKey(block3([txt1, txt2]), key1);
-      nextCache[key1] = Object.assign(c_block2[i1], {memo: memo1});
+      c_block4[i1] = withKey(block5([txt1, txt2]), key1);
+      nextCache[key1] = Object.assign(c_block4[i1], {memo: memo1});
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;

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

@@ -3,7 +3,7 @@
 exports[`t-if a t-if next to a div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = createBlock(\`<div>foo</div>\`);
   
@@ -21,7 +21,7 @@ exports[`t-if a t-if next to a div 1`] = `
 exports[`t-if a t-if with two inner nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block3 = createBlock(\`<span>yip</span>\`);
   let block4 = createBlock(\`<div>yip</div>\`);
@@ -41,20 +41,22 @@ exports[`t-if a t-if with two inner nodes 1`] = `
 exports[`t-if boolean value condition elif (no outside node) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4,b5;
+    let b2,b3,b4,b5,b6;
+    b2 = text(\`
+ \`);
     if (ctx['color']=='black') {
-      b2 = text(\`black pearl\`);
+      b3 = text(\`black pearl\`);
     } else if (ctx['color']=='yellow') {
-      b3 = text(\`yellow submarine\`);
+      b4 = text(\`yellow submarine\`);
     } else if (ctx['color']=='red') {
-      b4 = text(\`red is dead\`);
+      b5 = text(\`red is dead\`);
     } else {
-      b5 = text(\`beer\`);
+      b6 = text(\`beer\`);
     }
-    return multi([b2, b3, b4, b5]);
+    return multi([b2, b3, b4, b5, b6]);
   }
 }"
 `;
@@ -62,22 +64,27 @@ exports[`t-if boolean value condition elif (no outside node) 1`] = `
 exports[`t-if boolean value condition elif 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-2/><block-child-3/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/><block-child-1/><block-child-2/><block-child-3/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4,b5;
+    const b2 = text(\`
+ \`);
+    let b4,b5,b6,b7;
     if (ctx['color']=='black') {
-      b2 = text(\`black pearl\`);
+      b4 = text(\`black pearl\`);
     } else if (ctx['color']=='yellow') {
-      b3 = text(\`yellow submarine\`);
+      b5 = text(\`yellow submarine\`);
     } else if (ctx['color']=='red') {
-      b4 = text(\`red is dead\`);
+      b6 = text(\`red is dead\`);
     } else {
-      b5 = text(\`beer\`);
+      b7 = text(\`beer\`);
     }
-    return block1([], [b2, b3, b4, b5]);
+    const b3 = block3([], [b4, b5, b6, b7]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -85,18 +92,25 @@ exports[`t-if boolean value condition elif 1`] = `
 exports[`t-if boolean value condition else 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><span>begin</span><block-child-0/><block-child-1/><span>end</span></div>\`);
+  let block3 = createBlock(\`<div>
+ <span>begin</span>
+ <block-child-0/><block-child-1/>
+ <span>end</span>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    const b2 = text(\`
+ \`);
+    let b4,b5;
     if (ctx['condition']) {
-      b2 = text(\`ok\`);
+      b4 = text(\`ok\`);
     } else {
-      b3 = text(\`ok-else\`);
+      b5 = text(\`ok-else\`);
     }
-    return block1([], [b2, b3]);
+    const b3 = block3([], [b4, b5]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -104,18 +118,21 @@ exports[`t-if boolean value condition else 1`] = `
 exports[`t-if boolean value condition false else 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><span>begin</span><block-child-0/><block-child-1/><span>end</span></div>\`);
+  let block3 = createBlock(\`<div><span>begin</span><block-child-0/><block-child-1/><span>end</span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    const b2 = text(\`
+ \`);
+    let b4,b5;
     if (ctx['condition']) {
-      b2 = text(\`fail\`);
+      b4 = text(\`fail\`);
     } else {
-      b3 = text(\`fail-else\`);
+      b5 = text(\`fail-else\`);
     }
-    return block1([], [b2, b3]);
+    const b3 = block3([], [b4, b5]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -123,7 +140,7 @@ exports[`t-if boolean value condition false else 1`] = `
 exports[`t-if boolean value condition missing 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
@@ -140,37 +157,49 @@ exports[`t-if boolean value condition missing 1`] = `
 exports[`t-if can use some boolean operators in expressions 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  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>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ <block-child-1/>
+ <block-child-2/>
+ <block-child-3/>
+ <block-child-4/>
+ <block-child-5/>
+ <block-child-6/>
+ <block-child-7/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4,b5,b6,b7,b8,b9;
+    const b2 = text(\`
+ \`);
+    let b4,b5,b6,b7,b8,b9,b10,b11;
     if (ctx['cond1']&&ctx['cond2']) {
-      b2 = text(\`and\`);
+      b4 = text(\`and\`);
     }
     if (ctx['cond1']&&ctx['cond3']) {
-      b3 = text(\`nope\`);
-    }
-    if (ctx['cond1']||ctx['cond3']) {
-      b4 = text(\`or\`);
-    }
-    if (ctx['cond3']||ctx['cond4']) {
       b5 = text(\`nope\`);
     }
+    if (ctx['cond1']||ctx['cond3']) {
+      b6 = text(\`or\`);
+    }
+    if (ctx['cond3']||ctx['cond4']) {
+      b7 = text(\`nope\`);
+    }
     if (ctx['m']>3) {
-      b6 = text(\`mgt\`);
+      b8 = text(\`mgt\`);
     }
     if (ctx['n']>3) {
-      b7 = text(\`ngt\`);
+      b9 = text(\`ngt\`);
     }
     if (ctx['m']<3) {
-      b8 = text(\`mlt\`);
+      b10 = text(\`mlt\`);
     }
     if (ctx['n']<3) {
-      b9 = text(\`nlt\`);
+      b11 = text(\`nlt\`);
     }
-    return block1([], [b2, b3, b4, b5, b6, b7, b8, b9]);
+    const b3 = block3([], [b4, b5, b6, b7, b8, b9, b10, b11]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -178,7 +207,7 @@ exports[`t-if can use some boolean operators in expressions 1`] = `
 exports[`t-if div containing a t-if with two inner nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<span>yip</span>\`);
@@ -199,7 +228,7 @@ exports[`t-if div containing a t-if with two inner nodes 1`] = `
 exports[`t-if dynamic content after t-if with two children nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   let block3 = createBlock(\`<p>1</p>\`);
@@ -221,7 +250,7 @@ exports[`t-if dynamic content after t-if with two children nodes 1`] = `
 exports[`t-if just a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
@@ -236,7 +265,7 @@ exports[`t-if just a t-if 1`] = `
 exports[`t-if simple t-if/t-else 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -253,7 +282,7 @@ exports[`t-if simple t-if/t-else 1`] = `
 exports[`t-if simple t-if/t-else in a div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -272,7 +301,7 @@ exports[`t-if simple t-if/t-else in a div 1`] = `
 exports[`t-if t-esc with t-elif 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -291,7 +320,7 @@ exports[`t-if t-esc with t-elif 1`] = `
 exports[`t-if t-esc with t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -308,7 +337,7 @@ exports[`t-if t-esc with t-if 1`] = `
 exports[`t-if t-if and t-else with two nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block4 = createBlock(\`<span>a</span>\`);
   let block5 = createBlock(\`<span>b</span>\`);
@@ -330,7 +359,7 @@ exports[`t-if t-if and t-else with two nodes 1`] = `
 exports[`t-if t-if in a div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -347,7 +376,7 @@ exports[`t-if t-if in a div 1`] = `
 exports[`t-if t-if in a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<span>1<block-child-0/></span>\`);
@@ -369,7 +398,7 @@ exports[`t-if t-if in a t-if 1`] = `
 exports[`t-if t-if with empty content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -385,7 +414,7 @@ exports[`t-if t-if with empty content 1`] = `
 exports[`t-if t-if/t-else with more content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -404,20 +433,26 @@ exports[`t-if t-if/t-else with more content 1`] = `
 exports[`t-if t-set, then t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    let b2;
+    const b2 = text(\`
+ \`);
+    let b4;
     setContextValue(ctx, \\"title\\", 'test');
     if (ctx['title']) {
-      b2 = text(ctx['title']);
+      b4 = text(ctx['title']);
     }
-    return block1([], [b2]);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -425,22 +460,29 @@ exports[`t-if t-set, then t-if 1`] = `
 exports[`t-if t-set, then t-if, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block2 = createBlock(\`<span>COUCOU</span>\`);
+  let block3 = createBlock(\`<div>
+ 
+ 
+ <block-child-0/>
+ </div>\`);
+  let block4 = createBlock(\`<span>COUCOU</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    let b2;
+    const b2 = text(\`
+ \`);
+    let b4;
     setContextValue(ctx, \\"y\\", true);
     setContextValue(ctx, \\"x\\", ctx['y']);
     if (ctx['x']) {
-      b2 = block2();
+      b4 = block4();
     }
-    return block1([], [b2]);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -448,25 +490,32 @@ exports[`t-if t-set, then t-if, part 2 1`] = `
 exports[`t-if t-set, then t-if, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
-  let block2 = createBlock(\`<span>AAA</span>\`);
-  let block3 = createBlock(\`<span>BBB</span>\`);
+  let block3 = createBlock(\`<div>
+ 
+ 
+ <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
-    let b2,b3;
+    const b2 = text(\`
+ \`);
+    let b4,b5;
     setContextValue(ctx, \\"y\\", false);
     setContextValue(ctx, \\"x\\", ctx['y']);
     if (ctx['x']) {
-      b2 = block2();
+      b4 = block4();
     } else if (!ctx['x']) {
-      b3 = block3();
+      b5 = block5();
     }
-    return block1([], [b2, b3]);
+    const b3 = block3([], [b4, b5]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -474,7 +523,7 @@ exports[`t-if t-set, then t-if, part 3 1`] = `
 exports[`t-if two consecutive t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -492,7 +541,7 @@ exports[`t-if two consecutive t-if 1`] = `
 exports[`t-if two consecutive t-if in a div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -512,7 +561,7 @@ exports[`t-if two consecutive t-if in a div 1`] = `
 exports[`t-if two t-ifs next to each other 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   let block2 = createBlock(\`<span><block-text-0/></span>\`);

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

@@ -3,7 +3,7 @@
 exports[`t-key can use t-key directive on a node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -18,7 +18,7 @@ exports[`t-key can use t-key directive on a node 1`] = `
 exports[`t-key can use t-key directive on a node 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -33,7 +33,7 @@ exports[`t-key can use t-key directive on a node 2 1`] = `
 exports[`t-key can use t-key directive on a node as a function 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -48,10 +48,12 @@ exports[`t-key can use t-key directive on a node as a function 1`] = `
 exports[`t-key t-key directive in a list 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
+  let block1 = createBlock(\`<ul>
+ <block-child-0/>
+ </ul>\`);
   let block3 = createBlock(\`<li><block-text-0/></li>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -63,6 +65,7 @@ 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]);
   }
@@ -72,20 +75,28 @@ exports[`t-key t-key directive in a list 1`] = `
 exports[`t-key t-key on sub dom node pushes a child block in its parent 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
-  let block2 = createBlock(\`<span/>\`);
-  let block3 = createBlock(\`<div><h1/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ <block-child-1/>
+ </div>\`);
+  let block4 = createBlock(\`<span/>\`);
+  let block5 = createBlock(\`<div><h1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    const b2 = text(\`
+ \`);
+    let b4,b5;
     if (ctx['hasSpan']) {
-      b2 = block2();
+      b4 = block4();
     }
     const tKey_1 = ctx['key'];
-    b3 = toggler(tKey_1, block3());
-    return block1([], [b2, b3]);
+    b5 = toggler(tKey_1, block5());
+    const b3 = block3([], [b4, b5]);
+    const b6 = text(\`
+ \`);
+    return multi([b2, b3, b6]);
   }
 }"
 `;
@@ -93,7 +104,7 @@ exports[`t-key t-key on sub dom node pushes a child block in its parent 1`] = `
 exports[`t-key t-key on sub dom node pushes a child block in its parent 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><h1/></div>\`);
   

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

@@ -3,7 +3,7 @@
 exports[`t-out literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
@@ -18,7 +18,7 @@ exports[`t-out literal 1`] = `
 exports[`t-out literal, no outside html element 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
@@ -30,20 +30,31 @@ exports[`t-out literal, no outside html element 1`] = `
 exports[`t-out multiple calls to t-out 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block2 = createBlock(\`<span>coucou</span>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
+  let block6 = createBlock(\`<span>coucou</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b2 = block2();
-    ctx[zero] = b2;
-    const b3 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    return block1([], [b3]);
+    const b5 = text(\`
+ \`);
+    const b6 = block6();
+    const b7 = text(\`
+ \`);
+    const b4 = multi([b5, b6, b7]);
+    ctx[zero] = b4;
+    const b8 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    ctx = ctx.__proto__;
+    const b3 = block3([], [b8]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -51,15 +62,22 @@ exports[`t-out multiple calls to t-out 1`] = `
 exports[`t-out multiple calls to t-out 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><div>Greeter</div><block-child-1/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ <div>Greeter</div>
+ <block-child-1/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = ctx[zero];
-    const b3 = ctx[zero];
-    return block1([], [b2, b3]);
+    const b2 = text(\`
+ \`);
+    const b4 = ctx[zero];
+    const b5 = ctx[zero];
+    const b3 = block3([], [b4, b5]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -67,7 +85,7 @@ exports[`t-out multiple calls to t-out 2`] = `
 exports[`t-out not escaping 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -82,7 +100,7 @@ exports[`t-out not escaping 1`] = `
 exports[`t-out number literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
@@ -97,7 +115,7 @@ exports[`t-out number literal 1`] = `
 exports[`t-out t-out 0 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`_basic-callee\`);
   
@@ -118,7 +136,7 @@ exports[`t-out t-out 0 1`] = `
 exports[`t-out t-out 0 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -133,7 +151,7 @@ exports[`t-out t-out 0 2`] = `
 exports[`t-out t-out and another sibling node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<span><span>hello</span><block-child-0/></span>\`);
@@ -148,7 +166,7 @@ exports[`t-out t-out and another sibling node 1`] = `
 exports[`t-out t-out bdom 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
   
   let block1 = createBlock(\`<div><span><block-child-0/></span></div>\`);
@@ -161,7 +179,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, node);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node);
     const b3 = safeOutput(ctx['var']);
     return block1([], [b3]);
   }
@@ -171,7 +189,7 @@ exports[`t-out t-out bdom 1`] = `
 exports[`t-out t-out block 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
@@ -186,7 +204,7 @@ exports[`t-out t-out block 1`] = `
 exports[`t-out t-out escaped 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
@@ -201,7 +219,7 @@ exports[`t-out t-out escaped 1`] = `
 exports[`t-out t-out markedup 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
@@ -216,14 +234,14 @@ exports[`t-out t-out markedup 1`] = `
 exports[`t-out t-out on a node with a body, as a default 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { safeOutput, withDefault } = helpers;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const b3 = text(\`nope\`);
-    const b2 = withDefault(safeOutput(ctx['var']), b3);
+    const b2 = safeOutput(ctx['var'], b3);
     return block1([], [b2]);
   }
 }"
@@ -232,15 +250,15 @@ exports[`t-out t-out on a node with a body, as a default 1`] = `
 exports[`t-out t-out on a node with a dom node in body, as a default 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { safeOutput, withDefault } = helpers;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   let block3 = createBlock(\`<div>nope</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const b3 = block3();
-    const b2 = withDefault(safeOutput(ctx['var']), b3);
+    const b2 = safeOutput(ctx['var'], b3);
     return block1([], [b2]);
   }
 }"
@@ -249,7 +267,7 @@ exports[`t-out t-out on a node with a dom node in body, as a default 1`] = `
 exports[`t-out t-out switch escaped 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
@@ -264,7 +282,7 @@ exports[`t-out t-out switch escaped 1`] = `
 exports[`t-out t-out switch escaped on markup 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
@@ -279,7 +297,7 @@ exports[`t-out t-out switch escaped on markup 1`] = `
 exports[`t-out t-out switch markup 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
@@ -294,13 +312,16 @@ exports[`t-out t-out switch markup 1`] = `
 exports[`t-out t-out switch markup on bdom 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block1 = createBlock(\`<div>
+ 
+ <block-child-0/><block-child-1/>
+ </div>\`);
   let block2 = createBlock(\`<ol>set</ol>\`);
-  let block3 = createBlock(\`<span><block-child-0/></span>\`);
   let block5 = createBlock(\`<span><block-child-0/></span>\`);
+  let block10 = createBlock(\`<span><block-child-0/></span>\`);
   
   function value1(ctx, node, key = \\"\\") {
     return block2();
@@ -309,16 +330,26 @@ exports[`t-out t-out switch markup on bdom 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    let b3,b5;
-    ctx[\`bdom\`] = new LazyValue(value1, ctx, node);
+    let b3,b8;
+    ctx[\`bdom\`] = new LazyValue(value1, ctx, this, node);
     if (ctx['hasBdom']) {
-      const b4 = safeOutput(ctx['bdom']);
-      b3 = block3([], [b4]);
+      const b4 = text(\`
+ \`);
+      const b6 = safeOutput(ctx['bdom']);
+      const b5 = block5([], [b6]);
+      const b7 = text(\`
+ \`);
+      b3 = multi([b4, b5, b7]);
     } else {
-      const b6 = safeOutput(ctx['var']);
-      b5 = block5([], [b6]);
+      const b9 = text(\`
+ \`);
+      const b11 = safeOutput(ctx['var']);
+      const b10 = block10([], [b11]);
+      const b12 = text(\`
+ \`);
+      b8 = multi([b9, b10, b12]);
     }
-    return block1([], [b3, b5]);
+    return block1([], [b3, b8]);
   }
 }"
 `;
@@ -326,7 +357,7 @@ exports[`t-out t-out switch markup on bdom 1`] = `
 exports[`t-out t-out switch markup on escaped 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
@@ -341,7 +372,7 @@ exports[`t-out t-out switch markup on escaped 1`] = `
 exports[`t-out t-out with a <t/> in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
@@ -353,7 +384,7 @@ exports[`t-out t-out with a <t/> in body 1`] = `
 exports[`t-out t-out with arbitrary object 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -368,7 +399,7 @@ exports[`t-out t-out with arbitrary object 1`] = `
 exports[`t-out t-out with arbitrary object 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -383,7 +414,7 @@ exports[`t-out t-out with arbitrary object 2 1`] = `
 exports[`t-out t-out with comment 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
@@ -398,7 +429,46 @@ exports[`t-out t-out with comment 1`] = `
 exports[`t-out t-out with just a t-set t-value in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { safeOutput } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return safeOutput(ctx['var']);
+  }
+}"
+`;
+
+exports[`t-out t-out with the 0 number 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { safeOutput } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return safeOutput(ctx['var']);
+  }
+}"
+`;
+
+exports[`t-out t-out with the 0 number, in a p 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { safeOutput } = helpers;
+  
+  let block1 = createBlock(\`<p><block-child-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = safeOutput(ctx['var']);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-out top level t-out with undefined 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
@@ -410,7 +480,7 @@ exports[`t-out t-out with just a t-set t-value in body 1`] = `
 exports[`t-out variable 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
@@ -425,7 +495,7 @@ exports[`t-out variable 1`] = `
 exports[`t-out with a String class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
@@ -440,7 +510,7 @@ exports[`t-out with a String class 1`] = `
 exports[`t-out with an extended String class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
@@ -455,7 +525,7 @@ exports[`t-out with an extended String class 1`] = `
 exports[`t-raw is deprecated should warn 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -470,7 +540,7 @@ exports[`t-raw is deprecated should warn 1`] = `
 exports[`t-raw is deprecated t-out is actually called in t-raw's place 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);

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

@@ -3,7 +3,7 @@
 exports[`t-ref can get a dynamic ref on a node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
   
@@ -19,7 +19,7 @@ exports[`t-ref can get a dynamic ref on a node 1`] = `
 exports[`t-ref can get a dynamic ref on a node, alternate syntax 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
   
@@ -35,7 +35,7 @@ exports[`t-ref can get a dynamic ref on a node, alternate syntax 1`] = `
 exports[`t-ref can get a ref on a node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
   
@@ -50,7 +50,7 @@ exports[`t-ref can get a ref on a node 1`] = `
 exports[`t-ref ref in a t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -65,7 +65,7 @@ exports[`t-ref ref in a t-call 1`] = `
 exports[`t-ref ref in a t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>1<span block-ref=\\"0\\"/>2</div>\`);
   
@@ -80,19 +80,29 @@ exports[`t-ref ref in a t-call 2`] = `
 exports[`t-ref ref in a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-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;
-    let b2;
+    const b2 = text(\`
+ \`);
+    let b4;
     if (ctx['condition']) {
-      b2 = block2([ref1]);
+      const b5 = text(\`
+ \`);
+      const b6 = block6([ref1]);
+      const b7 = text(\`
+ \`);
+      b4 = multi([b5, b6, b7]);
     }
-    return block1([], [b2]);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -100,11 +110,13 @@ exports[`t-ref ref in a t-if 1`] = `
 exports[`t-ref refs in a loop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<div block-ref=\\"0\\"><block-text-1/></div>\`);
+  let block1 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
+  let block5 = createBlock(\`<div block-ref=\\"0\\"><block-text-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
@@ -113,12 +125,18 @@ 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'];
-      c_block2[i1] = withKey(block3([ref1, txt1]), tKey_1 + key1);
+      const b5 = toggler(tKey_1, block5([ref1, txt1]));
+      const b6 = text(\`
+ \`);
+      c_block2[i1] = withKey(multi([b4, b5, b6]), key1);
     }
+    ctx = ctx.__proto__;
     const b2 = list(c_block2);
     return block1([], [b2]);
   }
@@ -128,20 +146,31 @@ exports[`t-ref refs in a loop 1`] = `
 exports[`t-ref two refs, one in a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/><p block-ref=\\"0\\"/></div>\`);
-  let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-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;
-    let b2;
+    const b2 = text(\`
+ \`);
+    let b4;
     if (ctx['condition']) {
-      b2 = block2([ref1]);
+      const b5 = text(\`
+ \`);
+      const b6 = block6([ref1]);
+      const b7 = text(\`
+ \`);
+      b4 = multi([b5, b6, b7]);
     }
-    return block1([ref2], [b2]);
+    const b3 = block3([ref2], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;

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

@@ -3,7 +3,7 @@
 exports[`t-set evaluate value expression 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -21,7 +21,7 @@ exports[`t-set evaluate value expression 1`] = `
 exports[`t-set evaluate value expression, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -39,7 +39,7 @@ exports[`t-set evaluate value expression, part 2 1`] = `
 exports[`t-set set from attribute literal (no outside div) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
@@ -54,7 +54,7 @@ exports[`t-set set from attribute literal (no outside div) 1`] = `
 exports[`t-set set from attribute literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -72,7 +72,7 @@ exports[`t-set set from attribute literal 1`] = `
 exports[`t-set set from attribute lookup 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -90,24 +90,37 @@ exports[`t-set set from attribute lookup 1`] = `
 exports[`t-set set from body literal (with t-if/t-else 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
   
   function value1(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b5,b6,b7,b8;
+    b5 = text(\`
+ \`);
     if (ctx['condition']) {
-      b2 = text(\`true\`);
+      b6 = text(\`true\`);
     } else {
-      b3 = text(\`false\`);
+      b7 = text(\`false\`);
     }
-    return multi([b2, b3]);
+    b8 = text(\`
+ \`);
+    return multi([b5, b6, b7, b8]);
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`value\`] = new LazyValue(value1, ctx, node);
-    return text(ctx['value']);
+    const b2 = text(\`
+ \`);
+    const b3 = text(\`
+ \`);
+    ctx[\`value\`] = new LazyValue(value1, ctx, this, node);
+    const b9 = text(\`
+ \`);
+    const b10 = text(ctx['value']);
+    const b11 = text(\`
+ \`);
+    return multi([b2, b3, b9, b10, b11]);
   }
 }"
 `;
@@ -115,7 +128,7 @@ exports[`t-set set from body literal (with t-if/t-else 1`] = `
 exports[`t-set set from body literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
@@ -130,7 +143,7 @@ exports[`t-set set from body literal 1`] = `
 exports[`t-set set from body lookup 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -142,7 +155,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, node);
+    ctx[\`stuff\`] = new LazyValue(value1, ctx, this, node);
     let txt1 = ctx['stuff'];
     return block1([txt1]);
   }
@@ -152,7 +165,7 @@ exports[`t-set set from body lookup 1`] = `
 exports[`t-set set from empty body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -170,20 +183,26 @@ exports[`t-set set from empty body 1`] = `
 exports[`t-set t-set and t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    let b2;
+    const b2 = text(\`
+ \`);
+    let b4;
     setContextValue(ctx, \\"v\\", ctx['value']);
     if (ctx['v']==='ok') {
-      b2 = text(\`grimbergen\`);
+      b4 = text(\`grimbergen\`);
     }
-    return block1([], [b2]);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -191,25 +210,38 @@ exports[`t-set t-set and t-if 1`] = `
 exports[`t-set t-set body is evaluated immediately 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, LazyValue, safeOutput } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block2 = createBlock(\`<span><block-text-0/></span>\`);
+  let block3 = createBlock(\`<div>
+ 
+ 
+ 
+ <block-child-0/>
+ </div>\`);
+  let block6 = createBlock(\`<span><block-text-0/></span>\`);
   
   function value1(ctx, node, key = \\"\\") {
+    const b5 = text(\`
+ \`);
     let txt1 = ctx['v1'];
-    return block2([txt1]);
+    const b6 = block6([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, node);
+    ctx[\`v2\`] = new LazyValue(value1, ctx, this, node);
     setContextValue(ctx, \\"v1\\", 'after');
-    const b3 = safeOutput(ctx['v2']);
-    return block1([], [b3]);
+    const b8 = safeOutput(ctx['v2']);
+    const b3 = block3([], [b8]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -217,20 +249,30 @@ exports[`t-set t-set body is evaluated immediately 1`] = `
 exports[`t-set t-set can't alter from within callee 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <p><block-text-0/></p>
+ <block-child-0/>
+ <p><block-text-1/></p>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     setContextValue(ctx, \\"iter\\", 'source');
     let txt1 = ctx['iter'];
-    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b4 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     let txt2 = ctx['iter'];
-    return block1([txt1, txt2], [b2]);
+    const b3 = block3([txt1, txt2], [b4]);
+    const b5 = text(\`
+ \`);
+    return multi([b2, b3, b5]);
   }
 }"
 `;
@@ -238,7 +280,7 @@ exports[`t-set t-set can't alter from within callee 1`] = `
 exports[`t-set t-set can't alter from within callee 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
   let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
@@ -257,24 +299,40 @@ exports[`t-set t-set can't alter from within callee 2`] = `
 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, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue } = helpers;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <p><block-text-0/></p>
+ <block-child-0/>
+ <p><block-text-1/></p>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     setContextValue(ctx, \\"iter\\", 'source');
     let txt1 = ctx['iter'];
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
+    const b5 = text(\`
+ \`);
     setContextValue(ctx, \\"iter\\", 'inCall');
-    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b6 = text(\`
+ \`);
+    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'];
-    return block1([txt1, txt2], [b2]);
+    const b3 = block3([txt1, txt2], [b7]);
+    const b8 = text(\`
+ \`);
+    return multi([b2, b3, b8]);
   }
 }"
 `;
@@ -282,7 +340,7 @@ exports[`t-set t-set can't alter in t-call body 1`] = `
 exports[`t-set t-set can't alter in t-call body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
   let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
@@ -301,7 +359,7 @@ exports[`t-set t-set can't alter in t-call body 2`] = `
 exports[`t-set t-set does not modify render context existing key values 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -319,18 +377,25 @@ exports[`t-set t-set does not modify render context existing key values 1`] = `
 exports[`t-set t-set evaluates an expression only once 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <block-text-0/>
+ <block-text-1/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     setContextValue(ctx, \\"v\\", ctx['value']+' artois');
     let txt1 = ctx['v'];
     let txt2 = ctx['v'];
-    return block1([txt1, txt2]);
+    const b3 = block3([txt1, txt2]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -338,29 +403,45 @@ exports[`t-set t-set evaluates an expression only once 1`] = `
 exports[`t-set t-set outside modified in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><p>EndLoop: <block-text-0/></p></div>\`);
-  let block3 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <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_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(['a','b']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`val\`] = v_block4[i1];
       const key1 = ctx['val'];
+      const b6 = text(\`
+ \`);
       let txt1 = ctx['iter'];
-      c_block2[i1] = withKey(block3([txt1]), key1);
+      const b7 = block7([txt1]);
+      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 b2 = list(c_block2);
+    const b4 = list(c_block4);
     let txt2 = ctx['iter'];
-    return block1([txt2], [b2]);
+    const b3 = block3([txt2], [b4]);
+    const b10 = text(\`
+ \`);
+    return multi([b2, b3, b10]);
   }
 }"
 `;
@@ -368,29 +449,45 @@ exports[`t-set t-set outside modified in t-foreach 1`] = `
 exports[`t-set t-set outside modified in t-foreach increment-after operator 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><p>EndLoop: <block-text-0/></p></div>\`);
-  let block3 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <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_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(['a','b']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`val\`] = v_block4[i1];
       const key1 = ctx['val'];
+      const b6 = text(\`
+ \`);
       let txt1 = ctx['iter'];
-      c_block2[i1] = withKey(block3([txt1]), key1);
+      const b7 = block7([txt1]);
+      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 b2 = list(c_block2);
+    const b4 = list(c_block4);
     let txt2 = ctx['iter'];
-    return block1([txt2], [b2]);
+    const b3 = block3([txt2], [b4]);
+    const b10 = text(\`
+ \`);
+    return multi([b2, b3, b10]);
   }
 }"
 `;
@@ -398,29 +495,45 @@ exports[`t-set t-set outside modified in t-foreach increment-after operator 1`]
 exports[`t-set t-set outside modified in t-foreach increment-before operator 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><p>EndLoop: <block-text-0/></p></div>\`);
-  let block3 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <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_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(['a','b']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`val\`] = v_block4[i1];
       const key1 = ctx['val'];
+      const b6 = text(\`
+ \`);
       let txt1 = ctx['iter'];
-      c_block2[i1] = withKey(block3([txt1]), key1);
+      const b7 = block7([txt1]);
+      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 b2 = list(c_block2);
+    const b4 = list(c_block4);
     let txt2 = ctx['iter'];
-    return block1([txt2], [b2]);
+    const b3 = block3([txt2], [b4]);
+    const b10 = text(\`
+ \`);
+    return multi([b2, b3, b10]);
   }
 }"
 `;
@@ -428,28 +541,38 @@ exports[`t-set t-set outside modified in t-foreach increment-before operator 1`]
 exports[`t-set t-set should reuse variable if possible 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<div><span>v<block-text-0/></span></div>\`);
+  let block3 = createBlock(\`<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_block2, v_block2, l_block2, c_block2] = prepareList(ctx['list']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`elem\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['list']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`elem\`] = v_block4[i1];
       ctx[\`elem_index\`] = i1;
       const key1 = ctx['elem_index'];
       let txt1 = ctx['v'];
       setContextValue(ctx, \\"v\\", ctx['elem']);
-      c_block2[i1] = withKey(block3([txt1]), key1);
+      c_block4[i1] = withKey(block5([txt1]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -457,23 +580,29 @@ exports[`t-set t-set should reuse variable if possible 1`] = `
 exports[`t-set t-set with content and sub t-esc 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <block-text-0/>
+ </div>\`);
   
   function value1(ctx, node, key = \\"\\") {
-    const b3 = text(ctx['beep']);
-    const b4 = text(\` boop\`);
-    return multi([b3, b4]);
+    const b5 = text(ctx['beep']);
+    const b6 = text(\` boop\`);
+    return multi([b5, b6]);
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`setvar\`] = new LazyValue(value1, ctx, node);
+    const b2 = text(\`
+ \`);
+    ctx[\`setvar\`] = new LazyValue(value1, ctx, this, node);
     let txt1 = ctx['setvar'];
-    return block1([txt1]);
+    const b3 = block3([txt1]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -481,27 +610,42 @@ exports[`t-set t-set with content and sub t-esc 1`] = `
 exports[`t-set t-set with t-value (falsy) and body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, LazyValue, safeOutput } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block2 = createBlock(\`<span><block-text-0/></span>\`);
+  let block3 = createBlock(\`<div>
+ 
+ 
+ 
+ 
+ 
+ <block-child-0/>
+ </div>\`);
+  let block6 = createBlock(\`<span><block-text-0/></span>\`);
   
   function value1(ctx, node, key = \\"\\") {
+    const b5 = text(\`
+ \`);
     let txt1 = ctx['v1'];
-    return block2([txt1]);
+    const b6 = block6([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, node));
+    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node));
     setContextValue(ctx, \\"v1\\", 'after');
     setContextValue(ctx, \\"v3\\", true);
-    const b3 = safeOutput(ctx['v2']);
-    return block1([], [b3]);
+    const b8 = safeOutput(ctx['v2']);
+    const b3 = block3([], [b8]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -509,27 +653,76 @@ exports[`t-set t-set with t-value (falsy) and body 1`] = `
 exports[`t-set t-set with t-value (truthy) and body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, LazyValue, safeOutput } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block2 = createBlock(\`<span><block-text-0/></span>\`);
+  let block3 = createBlock(\`<div>
+ 
+ 
+ 
+ 
+ 
+ <block-child-0/>
+ </div>\`);
+  let block6 = createBlock(\`<span><block-text-0/></span>\`);
   
   function value1(ctx, node, key = \\"\\") {
+    const b5 = text(\`
+ \`);
     let txt1 = ctx['v1'];
-    return block2([txt1]);
+    const b6 = block6([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, node));
+    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node));
     setContextValue(ctx, \\"v1\\", 'after');
     setContextValue(ctx, \\"v3\\", false);
-    const b3 = safeOutput(ctx['v2']);
-    return block1([], [b3]);
+    const b8 = safeOutput(ctx['v2']);
+    const b3 = block3([], [b8]);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`t-set t-set, multiple t-ifs, and a specific configuration 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  
+  let block3 = createBlock(\`<p>
+ <div>
+ 
+ <span>First div</span>
+ </div>
+ <div>
+ <block-child-0/>
+ </div>
+ </p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
+    let b4;
+    if (ctx['flag']) {
+      setContextValue(ctx, \\"bouh\\", 2);
+    }
+    if (!ctx['flag']) {
+      b4 = text(\`Second\`);
+    }
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -537,21 +730,27 @@ exports[`t-set t-set with t-value (truthy) and body 1`] = `
 exports[`t-set t-set, t-if, and mix of expression/body lookup, 1 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-text-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <block-text-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     if (ctx['flag']) {
       setContextValue(ctx, \\"ourvar\\", \`1\`);
     } else {
       setContextValue(ctx, \\"ourvar\\", 0);
     }
     let txt1 = ctx['ourvar'];
-    return block1([txt1]);
+    const b3 = block3([txt1]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -559,21 +758,27 @@ exports[`t-set t-set, t-if, and mix of expression/body lookup, 1 1`] = `
 exports[`t-set t-set, t-if, and mix of expression/body lookup, 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-text-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <block-text-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     if (ctx['flag']) {
       setContextValue(ctx, \\"ourvar\\", 1);
     } else {
       setContextValue(ctx, \\"ourvar\\", \`0\`);
     }
     let txt1 = ctx['ourvar'];
-    return block1([txt1]);
+    const b3 = block3([txt1]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -581,20 +786,24 @@ exports[`t-set t-set, t-if, and mix of expression/body lookup, 2 1`] = `
 exports[`t-set t-set, t-if, and mix of expression/body lookup, 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    let b2;
+    let b2,b3,b4;
+    b2 = text(\`
+ \`);
     if (ctx['flag']) {
       setContextValue(ctx, \\"ourvar\\", 1);
     } else {
       setContextValue(ctx, \\"ourvar\\", \`0\`);
     }
-    b2 = text(ctx['ourvar']);
-    return multi([b2]);
+    b3 = text(\`
+ \`);
+    b4 = text(ctx['ourvar']);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -602,7 +811,7 @@ exports[`t-set t-set, t-if, and mix of expression/body lookup, 3 1`] = `
 exports[`t-set value priority (with non text body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -615,7 +824,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, node));
+    ctx[\`value\`] = withDefault(1, new LazyValue(value1, ctx, this, node));
     let txt1 = ctx['value'];
     return block1([txt1]);
   }
@@ -625,7 +834,7 @@ exports[`t-set value priority (with non text body 1`] = `
 exports[`t-set value priority 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);

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

@@ -3,7 +3,7 @@
 exports[`qweb t-tag can fallback if falsy tag 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = tag => createBlock(\`<\${tag || 'fallback'}/>\`);
   
@@ -17,7 +17,7 @@ exports[`qweb t-tag can fallback if falsy tag 1`] = `
 exports[`qweb t-tag can update 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = tag => createBlock(\`<\${tag || 't'}/>\`);
   
@@ -31,7 +31,7 @@ exports[`qweb t-tag can update 1`] = `
 exports[`qweb t-tag simple usecases 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = tag => createBlock(\`<\${tag || 't'}/>\`);
   
@@ -45,7 +45,7 @@ exports[`qweb t-tag simple usecases 1`] = `
 exports[`qweb t-tag simple usecases 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = tag => createBlock(\`<\${tag || 't'}>text</\${tag || 't'}>\`);
   
@@ -59,7 +59,7 @@ exports[`qweb t-tag simple usecases 2`] = `
 exports[`qweb t-tag with multiple attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = tag => createBlock(\`<\${tag || 't'} class=\\"blueberry\\" taste=\\"raspberry\\">gooseberry</\${tag || 't'}>\`);
   
@@ -73,13 +73,20 @@ exports[`qweb t-tag with multiple attributes 1`] = `
 exports[`qweb t-tag with multiple child nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = tag => createBlock(\`<\${tag || 't'}> pear <span>apple</span> strawberry </\${tag || 't'}>\`);
+  let block3 = tag => createBlock(\`<\${tag || 't'}>
+ pear
+ <span>apple</span>
+ strawberry
+ </\${tag || 't'}>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     const tag1 = ctx['tag'];
-    return toggler(tag1, block1(tag1)());
+    const b3 = toggler(tag1, block3(tag1)());
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -87,7 +94,7 @@ exports[`qweb t-tag with multiple child nodes 1`] = `
 exports[`qweb t-tag with multiple t-tag in same template 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = tag => createBlock(\`<\${tag || 't'}><block-child-0/></\${tag || 't'}>\`);
   let block2 = tag => createBlock(\`<\${tag || 't'}>baz</\${tag || 't'}>\`);
@@ -104,7 +111,7 @@ exports[`qweb t-tag with multiple t-tag in same template 1`] = `
 exports[`qweb t-tag with multiple t-tag in same template, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = tag => createBlock(\`<\${tag || 't'}>bar</\${tag || 't'}>\`);
   let block3 = tag => createBlock(\`<\${tag || 't'}>baz</\${tag || 't'}>\`);

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

@@ -3,7 +3,7 @@
 exports[`loading templates addTemplates does not modify its xml document in place 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -17,7 +17,7 @@ exports[`loading templates addTemplates does not modify its xml document in plac
 exports[`loading templates can initialize qweb with a string 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>jupiler</div>\`);
   
@@ -30,7 +30,7 @@ exports[`loading templates can initialize qweb with a string 1`] = `
 exports[`loading templates can initialize qweb with an XMLDocument 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>jupiler</div>\`);
   
@@ -43,7 +43,7 @@ exports[`loading templates can initialize qweb with an XMLDocument 1`] = `
 exports[`loading templates can load a few templates from a xml string 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`items\`);
   
   let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
@@ -58,7 +58,7 @@ exports[`loading templates can load a few templates from a xml string 1`] = `
 exports[`loading templates can load a few templates from a xml string 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = createBlock(\`<li>ok</li>\`);
   let block3 = createBlock(\`<li>foo</li>\`);
@@ -74,7 +74,7 @@ exports[`loading templates can load a few templates from a xml string 2`] = `
 exports[`loading templates can load a few templates from an XMLDocument 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`items\`);
   
   let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
@@ -89,7 +89,7 @@ exports[`loading templates can load a few templates from an XMLDocument 1`] = `
 exports[`loading templates can load a few templates from an XMLDocument 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = createBlock(\`<li>ok</li>\`);
   let block3 = createBlock(\`<li>foo</li>\`);

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

@@ -3,12 +3,17 @@
 exports[`translation support can set and remove translatable attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div tomato=\\"word\\" potato=\\"mot\\" title=\\"mot\\" label=\\"word\\">text</div>\`);
+  let block3 = createBlock(\`<div tomato=\\"word\\" potato=\\"mot\\" title=\\"mot\\" label=\\"word\\">text</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    const b2 = text(\`
+ \`);
+    const b3 = block3();
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -16,7 +21,7 @@ exports[`translation support can set and remove translatable attributes 1`] = `
 exports[`translation support can translate node content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>mot</div>\`);
   
@@ -29,12 +34,20 @@ exports[`translation support can translate node content 1`] = `
 exports[`translation support does not translate node content if disabled 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><span>mot</span><span>word</span></div>\`);
+  let block3 = createBlock(\`<div>
+ <span>mot</span>
+ <span>word</span>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    const b2 = text(\`
+ \`);
+    const b3 = block3();
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -42,12 +55,23 @@ exports[`translation support does not translate node content if disabled 1`] = `
 exports[`translation support some attributes are translated 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  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>\`);
+  let block3 = createBlock(\`<div>
+ <p label=\\"mot\\">mot</p>
+ <p title=\\"mot\\">mot</p>
+ <p placeholder=\\"mot\\">mot</p>
+ <p alt=\\"mot\\">mot</p>
+ <p something=\\"word\\">mot</p>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    const b2 = text(\`
+ \`);
+    const b3 = block3();
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -55,12 +79,17 @@ exports[`translation support some attributes are translated 1`] = `
 exports[`translation support translation is done on the trimmed text, with extra spaces readded after 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div> mot </div>\`);
+  let block3 = createBlock(\`<div> mot </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    const b2 = text(\`
+ \`);
+    const b3 = block3();
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;

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

@@ -3,7 +3,7 @@
 exports[`white space handling consecutives whitespaces are condensed into a single space 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div> abc </div>\`);
   
@@ -16,7 +16,7 @@ exports[`white space handling consecutives whitespaces are condensed into a sing
 exports[`white space handling nothing is done in pre tags 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<pre>   </pre>\`);
   
@@ -29,7 +29,7 @@ exports[`white space handling nothing is done in pre tags 1`] = `
 exports[`white space handling nothing is done in pre tags 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<pre>
           some text
@@ -44,7 +44,7 @@ exports[`white space handling nothing is done in pre tags 2`] = `
 exports[`white space handling nothing is done in pre tags 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<pre>
           
@@ -59,9 +59,10 @@ exports[`white space handling nothing is done in pre tags 3`] = `
 exports[`white space handling pre inside a div with a new line 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><pre>SomeText</pre></div>\`);
+  let block1 = createBlock(\`<div><pre>SomeText</pre>
+</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     return block1();
@@ -72,7 +73,7 @@ exports[`white space handling pre inside a div with a new line 1`] = `
 exports[`white space handling white space only text nodes are condensed into a single space 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div> </div>\`);
   
@@ -85,9 +86,11 @@ exports[`white space handling white space only text nodes are condensed into a s
 exports[`white space handling whitespace only text nodes with newlines are removed 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><span>abc</span></div>\`);
+  let block1 = createBlock(\`<div>
+ <span>abc</span>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     return block1();

tests/compiler/attributes.test.ts

@@ -22,6 +22,12 @@ describe("attributes", () => {
     expect(renderToString(template)).toBe(`<div aria-label="Close"></div>`);
   });
 
+  test("static attributes with backticks", () => {
+    const template = '<div foo="`bar`"></div>';
+    const result = renderToString(template);
+    expect(result).toBe('<div foo="`bar`"></div>');
+  });
+
   test("static attributes on void elements", () => {
     const template = `<img src="/test.skip.jpg" alt="Test"/>`;
     expect(renderToString(template)).toBe(`<img src="/test.skip.jpg" alt="Test">`);
@@ -33,6 +39,12 @@ describe("attributes", () => {
     expect(result).toBe(`<div foo="bar"></div>`);
   });
 
+  test("dynamic attributes with backticks", () => {
+    const template = '<div t-att-foo="`bar`"/>';
+    const result = renderToString(template);
+    expect(result).toBe(`<div foo="bar"></div>`);
+  });
+
   test("two dynamic attributes", () => {
     const template = `<div t-att-foo="'bar'" t-att-bar="'foo'"/>`;
     const result = renderToString(template);
@@ -51,6 +63,24 @@ describe("attributes", () => {
     expect(result).toBe(`<div></div>`);
   });
 
+  test("dynamic class attribute which is only a space", () => {
+    const template = `<div t-att-class="c"/>`;
+    const result = renderToString(template, { c: " " });
+    expect(result).toBe(`<div></div>`);
+  });
+
+  test("dynamic class attribute with multiple consecutive spaces", () => {
+    const template = `<div t-att-class="c"/>`;
+    const result = renderToString(template, { c: "a  b" });
+    expect(result).toBe(`<div class="a b"></div>`);
+  });
+
+  test("dynamic class attribute that starts and ends with a space", () => {
+    const template = `<div t-att-class="c"/>`;
+    const result = renderToString(template, { c: " a " });
+    expect(result).toBe(`<div class="a"></div>`);
+  });
+
   test("dynamic undefined generic attribute", () => {
     const template = `<div t-att-thing="c"/>`;
     const result = renderToString(template, { c: undefined });
@@ -248,6 +278,14 @@ describe("attributes", () => {
     const template = `<div class="static" t-att-class="{a: b, c: d, e: f}"/>`;
     const result = renderToString(template, { b: true, d: false, f: true });
     expect(result).toBe(`<div class="static a e"></div>`);
+    // leading and trailing space in the key
+    expect(renderToString(`<div t-att-class="{' a ': value}" />`, { value: true })).toBe(
+      '<div class="a"></div>'
+    );
+    // whitespace only key
+    expect(renderToString(`<div t-att-class="{' ': value}" />`, { value: true })).toBe(
+      "<div></div>"
+    );
   });
 
   test("t-att-class with multiple classes", () => {
@@ -257,6 +295,10 @@ describe("attributes", () => {
     expect(renderToString(`<div t-att-class="{['a b c']: value}" />`, { value: true })).toBe(
       '<div class="a b c"></div>'
     );
+    // multiple spaces between classes
+    expect(renderToString(`<div t-att-class="{'a  b  c': value}" />`, { value: true })).toBe(
+      '<div class="a b c"></div>'
+    );
   });
 
   test("t-att-class with multiple classes, some of which are duplicate", () => {

tests/compiler/inline_expressions.test.ts

@@ -221,4 +221,11 @@ describe("expression evaluation", () => {
     expect(compileExpr("a.c in b")).toBe("ctx['a'].c in ctx['b']");
     expect(compileExpr("typeof val")).toBe("typeof ctx['val']");
   });
+
+  test("binary operators", () => {
+    expect(compileExpr("1 | 1")).toBe("1|1");
+    expect(compileExpr("1 & 1")).toBe("1&1");
+    expect(compileExpr("1 ^ 1")).toBe("1^1");
+    expect(compileExpr("~1")).toBe("~1");
+  });
 });

tests/compiler/parser.test.ts

@@ -1033,6 +1033,7 @@ describe("qweb parser", () => {
         type: ASTType.TCall,
         name: "blap",
         body: null,
+        context: null,
       },
       memo: "",
       hasNoFirst: false,
@@ -1070,6 +1071,7 @@ describe("qweb parser", () => {
       type: ASTType.TCall,
       name: "blabla",
       body: null,
+      context: null,
     });
   });
 
@@ -1077,10 +1079,20 @@ describe("qweb parser", () => {
     expect(parse(`<t t-call="sub">ok</t>`)).toEqual({
       type: ASTType.TCall,
       name: "sub",
+      context: null,
       body: [{ type: ASTType.Text, value: "ok" }],
     });
   });
 
+  test("t-call expression with t-call-context", async () => {
+    expect(parse(`<t t-call="blabla" t-call-context="someContext"/>`)).toEqual({
+      type: ASTType.TCall,
+      name: "blabla",
+      body: null,
+      context: "someContext",
+    });
+  });
+
   test("t-call on a div node", async () => {
     expect(parse(`<div t-call="blabla" />`)).toEqual({
       type: ASTType.DomNode,
@@ -1096,6 +1108,7 @@ describe("qweb parser", () => {
           type: ASTType.TCall,
           name: "blabla",
           body: null,
+          context: null,
         },
       ],
     });
@@ -1111,6 +1124,7 @@ describe("qweb parser", () => {
         type: ASTType.TCall,
         name: "blabla",
         body: null,
+        context: null,
       },
     });
   });
@@ -1547,7 +1561,7 @@ describe("qweb parser", () => {
       on: null,
       slots: {
         default: {
-          content: { body: null, name: "subTemplate", type: ASTType.TCall },
+          content: { body: null, name: "subTemplate", type: ASTType.TCall, context: null },
           attrs: null,
           scope: null,
           on: null,

tests/compiler/t_call.test.ts

@@ -445,4 +445,38 @@ describe("t-call (template calling)", () => {
     const expected2 = "<div><bar>quux</bar></div>";
     expect(context.renderToString("main", { template: "bar", val: "quux" })).toBe(expected2);
   });
+
+  test("t-call-context", () => {
+    const context = new TestContext();
+    context.addTemplate("sub", `<span><t t-esc="value"/></span>`);
+    context.addTemplate("main", `<t t-call="sub" t-call-context="obj"/>`);
+
+    expect(context.renderToString("main", { obj: { value: 123 } })).toBe("<span>123</span>");
+  });
+
+  test("t-call on a div with t-call-context", () => {
+    const context = new TestContext();
+    context.addTemplate("sub", `<span><t t-esc="value"/></span>`);
+    context.addTemplate("main", `<div t-call="sub" t-call-context="obj"/>`);
+
+    expect(context.renderToString("main", { obj: { value: 123 } })).toBe(
+      "<div><span>123</span></div>"
+    );
+  });
+
+  test("t-call-context and value in body", () => {
+    const context = new TestContext();
+    context.addTemplate("sub", `<span><t t-esc="value1"/><t t-esc="value2"/></span>`);
+    context.addTemplate(
+      "main",
+      `
+      <t t-call="sub" t-call-context="obj">
+        <t t-set="value2" t-value="aaron" />
+      </t>`
+    );
+
+    expect(context.renderToString("main", { obj: { value1: 123 }, aaron: "lucas" })).toBe(
+      "<span>123lucas</span>"
+    );
+  });
 });

tests/compiler/t_esc.test.ts

@@ -67,6 +67,21 @@ describe("t-esc", () => {
     );
   });
 
+  test("t-esc with the 0 number", () => {
+    const template = `<t t-esc="var"/>`;
+    expect(renderToString(template, { var: 0 })).toBe("0");
+  });
+
+  test("t-esc with the 0 number, in a p", () => {
+    const template = `<p><t t-esc="var"/></p>`;
+    expect(renderToString(template, { var: 0 })).toBe("<p>0</p>");
+  });
+
+  test("top level t-esc with undefined", () => {
+    const template = `<t t-esc="var"/>`;
+    expect(renderToString(template, { var: undefined })).toBe("");
+  });
+
   test("falsy values in text nodes", () => {
     const template = `
         <t t-esc="v1"/>:<t t-esc="v2"/>:<t t-esc="v3"/>:<t t-esc="v4"/>:<t t-esc="v5"/>`;

tests/compiler/t_out.test.ts

@@ -47,6 +47,21 @@ describe("t-out", () => {
     expect(renderToString(template, { var: new String("ok") })).toBe("<span>ok</span>");
   });
 
+  test("t-out with the 0 number", () => {
+    const template = `<t t-out="var"/>`;
+    expect(renderToString(template, { var: 0 })).toBe("0");
+  });
+
+  test("t-out with the 0 number, in a p", () => {
+    const template = `<p><t t-out="var"/></p>`;
+    expect(renderToString(template, { var: 0 })).toBe("<p>0</p>");
+  });
+
+  test("top level t-out with undefined", () => {
+    const template = `<t t-out="var"/>`;
+    expect(renderToString(template, { var: undefined })).toBe("");
+  });
+
   test("with an extended String class", () => {
     class LoveString extends String {
       valueOf(): string {

tests/compiler/t_set.test.ts

@@ -33,6 +33,22 @@ describe("t-set", () => {
     expect(renderToString(template, { value: "ok" })).toBe("<div>grimbergen</div>");
   });
 
+  test("t-set, multiple t-ifs, and a specific configuration", () => {
+    const template = `
+      <p>
+        <div>
+          <t t-if="flag" t-set="bouh" t-value="2"/>
+          <span>First div</span>
+        </div>
+        <div>
+          <t t-if="!flag">Second</t>
+        </div>
+      </p>`;
+    expect(renderToString(template)).toBe(
+      "<p><div><span>First div</span></div><div>Second</div></p>"
+    );
+  });
+
   test("set from body literal", () => {
     const template = `<t><t t-set="value">ok</t><t t-esc="value"/></t>`;
     expect(renderToString(template)).toBe("ok");

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

@@ -3,7 +3,7 @@
 exports[`event handling Invalid handler throws an error 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">click</button>\`);
   
@@ -17,7 +17,7 @@ exports[`event handling Invalid handler throws an error 1`] = `
 exports[`event handling handler is not called if component is destroyed 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span block-handler-0=\\"click\\"/>\`);
   
@@ -31,13 +31,14 @@ exports[`event handling handler is not called if component is destroyed 1`] = `
 exports[`event handling handler receive the event as argument 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<span block-handler-0=\\"click\\"><block-child-0/><block-text-1/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['inc'], ctx];
-    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     let txt1 = ctx['state'].value;
     return block1([hdlr1, txt1], [b2]);
   }
@@ -47,7 +48,7 @@ exports[`event handling handler receive the event as argument 1`] = `
 exports[`event handling handler receive the event as argument 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>simple vnode</div>\`);
   
@@ -60,16 +61,23 @@ exports[`event handling handler receive the event as argument 2`] = `
 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, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
-  let block1 = createBlock(\`<div><block-child-0/><textarea/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ <textarea/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2;
+    const b2 = text(\`
+ \`);
+    let b4;
     if (ctx['state'].cond) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b4 = comp1({}, key + \`__1\`, node, this, null);
     }
-    return block1([], [b2]);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -77,7 +85,7 @@ exports[`event handling input blur event is not called if component is destroyed
 exports[`event handling input blur event is not called if component is destroyed 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<input block-handler-0=\\"blur\\"/>\`);
   
@@ -91,25 +99,36 @@ exports[`event handling input blur event is not called if component is destroyed
 exports[`event handling objects from scope are properly captured by t-on 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<div class=\\"item\\" block-handler-0=\\"click\\"/>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </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_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['items']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`item\`] = v_block4[i1];
       const key1 = ctx['item'];
+      const b6 = text(\`
+ \`);
       const v1 = ctx['onClick'];
       const v2 = ctx['item'];
       let hdlr1 = [_ev=>v1(v2.val,_ev), ctx];
-      c_block2[i1] = withKey(block3([hdlr1]), key1);
+      const b7 = block7([hdlr1]);
+      const b8 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -117,14 +136,17 @@ exports[`event handling objects from scope are properly captured by t-on 1`] = `
 exports[`event handling support for callable expression in event handler 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/><input type=\\"text\\" block-handler-1=\\"input\\"/></div>\`);
+  let block3 = 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];
-    return block1([txt1, hdlr1]);
+    const b3 = block3([txt1, hdlr1]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -132,25 +154,36 @@ exports[`event handling support for callable expression in event handler 1`] = `
 exports[`event handling t-on with handler bound to dynamic argument on a t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<div class=\\"item\\" block-handler-0=\\"click\\"/>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </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_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['items']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`item\`] = v_block4[i1];
       const key1 = ctx['item'];
+      const b6 = text(\`
+ \`);
       const v1 = ctx['onClick'];
       const v2 = ctx['item'];
       let hdlr1 = [_ev=>v1(v2,_ev), ctx];
-      c_block2[i1] = withKey(block3([hdlr1]), key1);
+      const b7 = block7([hdlr1]);
+      const b8 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;

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

@@ -3,10 +3,11 @@
 exports[`basics basic use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {p: 1}, key + \`__1\`, node, ctx);
+    return comp1({p: 1}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -14,7 +15,7 @@ exports[`basics basic use 1`] = `
 exports[`basics basic use 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>child<block-text-0/></span>\`);
   
@@ -28,17 +29,29 @@ exports[`basics basic use 2`] = `
 exports[`basics can select a sub widget  1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(\`OtherChild\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2,b3,b4,b5,b6,b7,b8;
+    b2 = text(\`
+ \`);
+    b3 = text(\`
+ \`);
     if (ctx['env'].options.flag) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b4 = comp1({}, key + \`__1\`, node, this, null);
     }
+    b5 = text(\`
+ \`);
     if (!ctx['env'].options.flag) {
-      b3 = component(\`OtherChild\`, {}, key + \`__2\`, node, ctx);
+      b6 = comp2({}, key + \`__2\`, node, this, null);
     }
-    return multi([b2, b3]);
+    b7 = text(\`
+ \`);
+    b8 = text(\`
+ \`);
+    return multi([b2, b3, b4, b5, b6, b7, b8]);
   }
 }"
 `;
@@ -46,7 +59,7 @@ exports[`basics can select a sub widget  1`] = `
 exports[`basics can select a sub widget  2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>CHILD 1</span>\`);
   
@@ -59,7 +72,7 @@ exports[`basics can select a sub widget  2`] = `
 exports[`basics can select a sub widget  3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>CHILD 2</div>\`);
   
@@ -72,17 +85,29 @@ exports[`basics can select a sub widget  3`] = `
 exports[`basics can select a sub widget, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(\`OtherChild\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2,b3,b4,b5,b6,b7,b8;
+    b2 = text(\`
+ \`);
+    b3 = text(\`
+ \`);
     if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b4 = comp1({}, key + \`__1\`, node, this, null);
     }
+    b5 = text(\`
+ \`);
     if (!ctx['state'].flag) {
-      b3 = component(\`OtherChild\`, {}, key + \`__2\`, node, ctx);
+      b6 = comp2({}, key + \`__2\`, node, this, null);
     }
-    return multi([b2, b3]);
+    b7 = text(\`
+ \`);
+    b8 = text(\`
+ \`);
+    return multi([b2, b3, b4, b5, b6, b7, b8]);
   }
 }"
 `;
@@ -90,7 +115,7 @@ exports[`basics can select a sub widget, part 2 1`] = `
 exports[`basics can select a sub widget, part 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>CHILD 1</span>\`);
   
@@ -103,7 +128,7 @@ exports[`basics can select a sub widget, part 2 2`] = `
 exports[`basics can select a sub widget, part 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>CHILD 2</div>\`);
   
@@ -116,10 +141,11 @@ exports[`basics can select a sub widget, part 2 3`] = `
 exports[`basics sub widget is interactive 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {p: 1}, key + \`__1\`, node, ctx);
+    return comp1({p: 1}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -127,14 +153,19 @@ exports[`basics sub widget is interactive 1`] = `
 exports[`basics sub widget is interactive 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<span><button block-handler-0=\\"click\\">click</button>child<block-text-1/></span>\`);
+  let block3 = createBlock(\`<span>
+ <button block-handler-0=\\"click\\">click</button>child<block-text-1/>
+ </span>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     let hdlr1 = [ctx['inc'], ctx];
     let txt1 = ctx['state'].val;
-    return block1([hdlr1, txt1]);
+    const b3 = block3([hdlr1, txt1]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -142,12 +173,13 @@ exports[`basics sub widget is interactive 2`] = `
 exports[`basics top level sub widget with a parent 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`ComponentB\`, {}, key + \`__1\`, node, ctx);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -156,10 +188,11 @@ exports[`basics top level sub widget with a parent 1`] = `
 exports[`basics top level sub widget with a parent 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`ComponentC\`, {}, key + \`__1\`, node, ctx);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -167,7 +200,7 @@ exports[`basics top level sub widget with a parent 2`] = `
 exports[`basics top level sub widget with a parent 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>Hello</span>\`);
   

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

@@ -3,20 +3,26 @@
 exports[`hooks autofocus hook input in a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><input block-ref=\\"0\\"/><block-child-0/></div>\`);
-  let block2 = createBlock(\`<input block-ref=\\"0\\"/>\`);
+  let block3 = createBlock(\`<div>
+ <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;
-    let b2;
+    const b2 = text(\`
+ \`);
+    let b4;
     if (ctx['state'].flag) {
-      b2 = block2([ref2]);
+      b4 = block4([ref2]);
     }
-    return block1([ref1], [b2]);
+    const b3 = block3([ref1], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -24,15 +30,21 @@ exports[`hooks autofocus hook input in a t-if 1`] = `
 exports[`hooks autofocus hook simple input 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><input block-ref=\\"0\\"/><input block-ref=\\"1\\"/></div>\`);
+  let block3 = createBlock(\`<div>
+ <input block-ref=\\"0\\"/>
+ <input block-ref=\\"1\\"/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`input1\`] = el;
     const ref2 = (el) => refs[\`input2\`] = el;
-    return block1([ref1, ref2]);
+    const b2 = text(\`
+ \`);
+    const b3 = block3([ref1, ref2]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -40,10 +52,11 @@ exports[`hooks autofocus hook simple input 1`] = `
 exports[`hooks can use onWillStart, onWillUpdateProps 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`MyComponent\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`MyComponent\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+    return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -51,7 +64,7 @@ exports[`hooks can use onWillStart, onWillUpdateProps 1`] = `
 exports[`hooks can use onWillStart, onWillUpdateProps 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -65,7 +78,7 @@ exports[`hooks can use onWillStart, onWillUpdateProps 2`] = `
 exports[`hooks can use useComponent 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -78,7 +91,7 @@ exports[`hooks can use useComponent 1`] = `
 exports[`hooks can use useEnv 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -92,7 +105,7 @@ exports[`hooks can use useEnv 1`] = `
 exports[`hooks mounted callbacks should be called in reverse order from willUnmount callbacks 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
   
@@ -106,11 +119,12 @@ exports[`hooks mounted callbacks should be called in reverse order from willUnmo
 exports[`hooks parent and child env (with useChildSubEnv then useSubEnv) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['env'].val);
-    const b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
   }
 }"
@@ -119,7 +133,7 @@ exports[`hooks parent and child env (with useChildSubEnv then useSubEnv) 1`] = `
 exports[`hooks parent and child env (with useChildSubEnv then useSubEnv) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -137,11 +151,12 @@ exports[`hooks parent and child env (with useChildSubEnv then useSubEnv) 2`] = `
 exports[`hooks parent and child env (with useChildSubEnv) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['env'].val);
-    const b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
   }
 }"
@@ -150,7 +165,7 @@ exports[`hooks parent and child env (with useChildSubEnv) 1`] = `
 exports[`hooks parent and child env (with useChildSubEnv) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -164,11 +179,12 @@ exports[`hooks parent and child env (with useChildSubEnv) 2`] = `
 exports[`hooks parent and child env (with useSubEnv) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['env'].val);
-    const b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
   }
 }"
@@ -177,7 +193,7 @@ exports[`hooks parent and child env (with useSubEnv) 1`] = `
 exports[`hooks parent and child env (with useSubEnv) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -191,7 +207,7 @@ exports[`hooks parent and child env (with useSubEnv) 2`] = `
 exports[`hooks two different call to willPatch/patched should work 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
   
@@ -205,7 +221,7 @@ exports[`hooks two different call to willPatch/patched should work 1`] = `
 exports[`hooks useChildSubEnv does not pollute user env 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -219,10 +235,11 @@ exports[`hooks useChildSubEnv does not pollute user env 1`] = `
 exports[`hooks useChildSubEnv supports arbitrary descriptor 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -230,7 +247,7 @@ exports[`hooks useChildSubEnv supports arbitrary descriptor 1`] = `
 exports[`hooks useChildSubEnv supports arbitrary descriptor 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/> <block-text-1/></div>\`);
   
@@ -245,7 +262,7 @@ exports[`hooks useChildSubEnv supports arbitrary descriptor 2`] = `
 exports[`hooks useEffect hook dependencies prevent effects from rerunning when unchanged 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -258,18 +275,25 @@ exports[`hooks useEffect hook dependencies prevent effects from rerunning when u
 exports[`hooks useEffect hook effect can depend on stuff in dom 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
+  let block5 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`div\`] = el;
-    let b2;
+    let b2,b3;
+    b2 = text(\`
+ \`);
     if (ctx['state'].value) {
-      b2 = block2([ref1]);
+      const b4 = text(\`
+ \`);
+      const b5 = block5([ref1]);
+      const b6 = text(\`
+ \`);
+      b3 = multi([b4, b5, b6]);
     }
-    return multi([b2]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -277,7 +301,7 @@ exports[`hooks useEffect hook effect can depend on stuff in dom 1`] = `
 exports[`hooks useEffect hook effect runs on mount, is reapplied on patch, and is cleaned up on unmount and before reapplying 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -290,7 +314,7 @@ exports[`hooks useEffect hook effect runs on mount, is reapplied on patch, and i
 exports[`hooks useEffect hook effect with empty dependency list never reruns 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -304,7 +328,7 @@ exports[`hooks useEffect hook effect with empty dependency list never reruns 1`]
 exports[`hooks useEffect hook properly behaves when the effect function throws 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -317,12 +341,13 @@ exports[`hooks useEffect hook properly behaves when the effect function throws 1
 exports[`hooks useExternalListener 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`MyComponent\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = component(\`MyComponent\`, {}, key + \`__1\`, node, ctx);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -332,7 +357,7 @@ exports[`hooks useExternalListener 1`] = `
 exports[`hooks useExternalListener 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -346,7 +371,7 @@ exports[`hooks useExternalListener 2`] = `
 exports[`hooks useRef hook: basic use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><button block-ref=\\"0\\"><block-text-1/></button></div>\`);
   
@@ -362,7 +387,7 @@ exports[`hooks useRef hook: basic use 1`] = `
 exports[`hooks useSubEnv modifies user env 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -376,10 +401,11 @@ exports[`hooks useSubEnv modifies user env 1`] = `
 exports[`hooks useSubEnv supports arbitrary descriptor 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -387,7 +413,7 @@ exports[`hooks useSubEnv supports arbitrary descriptor 1`] = `
 exports[`hooks useSubEnv supports arbitrary descriptor 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/> <block-text-1/></div>\`);
   

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

@@ -3,7 +3,7 @@
 exports[`lifecycle hooks basic checks for a component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>test</span>\`);
   
@@ -16,13 +16,15 @@ exports[`lifecycle hooks basic checks for a component 1`] = `
 exports[`lifecycle hooks component semantics 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`B\`, true, false, false, true);
+  const comp2 = app.createComponent(\`C\`, true, false, false, true);
   
   let block1 = createBlock(\`<div>A<block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`B\`, {}, key + \`__1\`, node, ctx);
-    const b3 = component(\`C\`, {}, key + \`__2\`, node, ctx);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    const b3 = comp2({}, key + \`__2\`, node, this, null);
     return block1([], [b2, b3]);
   }
 }"
@@ -31,7 +33,7 @@ exports[`lifecycle hooks component semantics 1`] = `
 exports[`lifecycle hooks component semantics 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>B</div>\`);
   
@@ -44,19 +46,27 @@ exports[`lifecycle hooks component semantics 2`] = `
 exports[`lifecycle hooks component semantics 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`D\`, true, false, false, true);
+  const comp2 = app.createComponent(\`E\`, true, false, false, true);
+  const comp3 = app.createComponent(\`F\`, true, false, false, true);
   
-  let block1 = createBlock(\`<div>C<block-child-0/><block-child-1/><block-child-2/></div>\`);
+  let block3 = createBlock(\`<div>C<block-child-0/>
+ <block-child-1/><block-child-2/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4;
-    b2 = component(\`D\`, {}, key + \`__1\`, node, ctx);
+    const b2 = text(\`
+ \`);
+    let b4,b5,b6;
+    b4 = comp1({}, key + \`__1\`, node, this, null);
     if (ctx['state'].flag) {
-      b3 = component(\`E\`, {}, key + \`__2\`, node, ctx);
+      b5 = comp2({}, key + \`__2\`, node, this, null);
     } else {
-      b4 = component(\`F\`, {}, key + \`__3\`, node, ctx);
+      b6 = comp3({}, key + \`__3\`, node, this, null);
     }
-    return block1([], [b2, b3, b4]);
+    const b3 = block3([], [b4, b5, b6]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -64,7 +74,7 @@ exports[`lifecycle hooks component semantics 3`] = `
 exports[`lifecycle hooks component semantics 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>D</div>\`);
   
@@ -77,7 +87,7 @@ exports[`lifecycle hooks component semantics 4`] = `
 exports[`lifecycle hooks component semantics 5`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>E</div>\`);
   
@@ -90,7 +100,7 @@ exports[`lifecycle hooks component semantics 5`] = `
 exports[`lifecycle hooks component semantics 6`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>F</div>\`);
   
@@ -103,17 +113,24 @@ exports[`lifecycle hooks component semantics 6`] = `
 exports[`lifecycle hooks components are unmounted and destroyed if no longer in DOM, even after updateprops 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block2 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2;
+    let b2,b3,b5;
+    b2 = text(\`
+ \`);
     if (ctx['state'].flag) {
-      const b3 = component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
-      b2 = block2([], [b3]);
+      const b4 = comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
+      b3 = block3([], [b4]);
     }
-    return multi([b2]);
+    b5 = text(\`
+ \`);
+    return multi([b2, b3, b5]);
   }
 }"
 `;
@@ -121,7 +138,7 @@ exports[`lifecycle hooks components are unmounted and destroyed if no longer in
 exports[`lifecycle hooks components are unmounted and destroyed if no longer in DOM, even after updateprops 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -135,12 +152,13 @@ exports[`lifecycle hooks components are unmounted and destroyed if no longer in
 exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].ok) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -150,7 +168,7 @@ exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM
 exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -163,13 +181,14 @@ exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM
 exports[`lifecycle hooks destroy new children before being mountged 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3,b4;
     b2 = text(\`before\`);
     if (ctx['state'].flag) {
-      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
     }
     b4 = text(\`after\`);
     return multi([b2, b3, b4]);
@@ -180,7 +199,7 @@ exports[`lifecycle hooks destroy new children before being mountged 1`] = `
 exports[`lifecycle hooks destroy new children before being mountged 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`child\`);
@@ -191,12 +210,13 @@ exports[`lifecycle hooks destroy new children before being mountged 2`] = `
 exports[`lifecycle hooks hooks are called in proper order in widget creation/destruction 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -205,7 +225,7 @@ exports[`lifecycle hooks hooks are called in proper order in widget creation/des
 exports[`lifecycle hooks hooks are called in proper order in widget creation/destruction 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -218,10 +238,11 @@ exports[`lifecycle hooks hooks are called in proper order in widget creation/des
 exports[`lifecycle hooks lifecycle callbacks are bound to component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Test\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Test\`, {rev: ctx['rev']}, key + \`__1\`, node, ctx);
+    return comp1({rev: ctx['rev']}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -229,7 +250,7 @@ exports[`lifecycle hooks lifecycle callbacks are bound to component 1`] = `
 exports[`lifecycle hooks lifecycle callbacks are bound to component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(ctx['props'].rev);
@@ -240,12 +261,13 @@ exports[`lifecycle hooks lifecycle callbacks are bound to component 2`] = `
 exports[`lifecycle hooks lifecycle semantics 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, {a: ctx['state'].a}, key + \`__1\`, node, ctx);
+    const b2 = comp1({a: ctx['state'].a}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -254,7 +276,7 @@ exports[`lifecycle hooks lifecycle semantics 1`] = `
 exports[`lifecycle hooks lifecycle semantics 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -267,12 +289,13 @@ exports[`lifecycle hooks lifecycle semantics 2`] = `
 exports[`lifecycle hooks lifecycle semantics, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -282,10 +305,11 @@ exports[`lifecycle hooks lifecycle semantics, part 2 1`] = `
 exports[`lifecycle hooks lifecycle semantics, part 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -293,7 +317,7 @@ exports[`lifecycle hooks lifecycle semantics, part 2 2`] = `
 exports[`lifecycle hooks lifecycle semantics, part 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -306,12 +330,13 @@ exports[`lifecycle hooks lifecycle semantics, part 2 3`] = `
 exports[`lifecycle hooks lifecycle semantics, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -321,12 +346,13 @@ exports[`lifecycle hooks lifecycle semantics, part 3 1`] = `
 exports[`lifecycle hooks lifecycle semantics, part 4 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -336,10 +362,11 @@ exports[`lifecycle hooks lifecycle semantics, part 4 1`] = `
 exports[`lifecycle hooks lifecycle semantics, part 4 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -347,7 +374,7 @@ exports[`lifecycle hooks lifecycle semantics, part 4 2`] = `
 exports[`lifecycle hooks lifecycle semantics, part 4 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -360,12 +387,13 @@ exports[`lifecycle hooks lifecycle semantics, part 4 3`] = `
 exports[`lifecycle hooks lifecycle semantics, part 5 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -375,7 +403,7 @@ exports[`lifecycle hooks lifecycle semantics, part 5 1`] = `
 exports[`lifecycle hooks lifecycle semantics, part 5 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -388,10 +416,11 @@ exports[`lifecycle hooks lifecycle semantics, part 5 2`] = `
 exports[`lifecycle hooks lifecycle semantics, part 6 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+    return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -399,7 +428,7 @@ exports[`lifecycle hooks lifecycle semantics, part 6 1`] = `
 exports[`lifecycle hooks lifecycle semantics, part 6 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -412,7 +441,7 @@ exports[`lifecycle hooks lifecycle semantics, part 6 2`] = `
 exports[`lifecycle hooks mounted hook is called if mounted in DOM 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -425,12 +454,13 @@ exports[`lifecycle hooks mounted hook is called if mounted in DOM 1`] = `
 exports[`lifecycle hooks mounted hook is called on every mount, not just the first one 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -440,7 +470,7 @@ exports[`lifecycle hooks mounted hook is called on every mount, not just the fir
 exports[`lifecycle hooks mounted hook is called on every mount, not just the first one 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>child</div>\`);
   
@@ -453,12 +483,13 @@ exports[`lifecycle hooks mounted hook is called on every mount, not just the fir
 exports[`lifecycle hooks mounted hook is called on subcomponents, in proper order 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -467,7 +498,7 @@ exports[`lifecycle hooks mounted hook is called on subcomponents, in proper orde
 exports[`lifecycle hooks mounted hook is called on subcomponents, in proper order 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -480,14 +511,15 @@ exports[`lifecycle hooks mounted hook is called on subcomponents, in proper orde
 exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper order 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2]);
   }
@@ -497,12 +529,13 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
 exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper order 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`ChildChild\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`ChildChild\`, {}, key + \`__1\`, node, ctx);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -511,7 +544,7 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
 exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper order 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -524,10 +557,14 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
 exports[`lifecycle hooks onWillRender 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {someValue: ctx['state'].value}, key + \`__1\`, node, ctx);
+    const b2 = text(\`
+ \`);
+    const b3 = comp1({someValue: ctx['state'].value}, key + \`__1\`, node, this, null);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -535,7 +572,7 @@ exports[`lifecycle hooks onWillRender 1`] = `
 exports[`lifecycle hooks onWillRender 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
   
@@ -550,12 +587,13 @@ exports[`lifecycle hooks onWillRender 2`] = `
 exports[`lifecycle hooks patched hook is called after updateProps 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, {a: ctx['state'].a}, key + \`__1\`, node, ctx);
+    const b2 = comp1({a: ctx['state'].a}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -564,7 +602,7 @@ exports[`lifecycle hooks patched hook is called after updateProps 1`] = `
 exports[`lifecycle hooks patched hook is called after updateProps 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -577,7 +615,7 @@ exports[`lifecycle hooks patched hook is called after updateProps 2`] = `
 exports[`lifecycle hooks patched hook is called after updating State 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -591,7 +629,7 @@ exports[`lifecycle hooks patched hook is called after updating State 1`] = `
 exports[`lifecycle hooks render in mounted 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -605,7 +643,7 @@ exports[`lifecycle hooks render in mounted 1`] = `
 exports[`lifecycle hooks render in patched 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -619,7 +657,7 @@ exports[`lifecycle hooks render in patched 1`] = `
 exports[`lifecycle hooks render in willPatch 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -633,12 +671,13 @@ exports[`lifecycle hooks render in willPatch 1`] = `
 exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly called 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -648,7 +687,7 @@ exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly calle
 exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly called 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -661,7 +700,7 @@ exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly calle
 exports[`lifecycle hooks timeout in onWillStart emits a warning 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span/>\`);
   
@@ -674,12 +713,13 @@ exports[`lifecycle hooks timeout in onWillStart emits a warning 1`] = `
 exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {prop: ctx['state'].prop};
     helpers.validateProps(\`Child\`, props1, ctx);
-    return component(\`Child\`, props1, key + \`__1\`, node, ctx);
+    return comp1(props1, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -687,7 +727,7 @@ exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 1`] = `
 exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`\`);
@@ -698,13 +738,19 @@ exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 2`] = `
 exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents, in proper order 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
+    const b2 = text(\`
+ \`);
+    const b4 = comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
+    const b3 = block3([], [b4]);
+    const b5 = text(\`
+ \`);
+    return multi([b2, b3, b5]);
   }
 }"
 `;
@@ -712,13 +758,19 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
 exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents, in proper order 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`ChildChild\`, true, false, false, false);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`ChildChild\`, {n: ctx['props'].n}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
+    const b2 = text(\`
+ \`);
+    const b4 = comp1({n: ctx['props'].n}, key + \`__1\`, node, this, null);
+    const b3 = block3([], [b4]);
+    const b5 = text(\`
+ \`);
+    return multi([b2, b3, b5]);
   }
 }"
 `;
@@ -726,13 +778,18 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
 exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents, in proper order 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  let block3 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     let txt1 = ctx['props'].n;
-    return block1([txt1]);
+    const b3 = block3([txt1]);
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -740,10 +797,11 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
 exports[`lifecycle hooks willStart hook is called on sub component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -751,7 +809,7 @@ exports[`lifecycle hooks willStart hook is called on sub component 1`] = `
 exports[`lifecycle hooks willStart hook is called on sub component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -764,7 +822,7 @@ exports[`lifecycle hooks willStart hook is called on sub component 2`] = `
 exports[`lifecycle hooks willStart is called 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>simple vnode</span>\`);
   
@@ -777,7 +835,7 @@ exports[`lifecycle hooks willStart is called 1`] = `
 exports[`lifecycle hooks willStart is called with component as this 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>simple vnode</span>\`);
   
@@ -790,19 +848,35 @@ exports[`lifecycle hooks willStart is called with component as this 1`] = `
 exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is mounted in some other position 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
-  let block3 = createBlock(\`<div/>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/><block-child-1/>
+ </div>\`);
+  let block10 = createBlock(\`<div/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    const b2 = text(\`
+ \`);
+    let b4,b8;
     if (ctx['state'].ok) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      const b5 = text(\`
+ \`);
+      const b6 = comp1({}, key + \`__1\`, node, this, null);
+      const b7 = text(\`
+ \`);
+      b4 = multi([b5, b6, b7]);
     } else {
-      b3 = block3();
+      const b9 = text(\`
+ \`);
+      const b10 = block10();
+      const b11 = text(\`
+ \`);
+      b8 = multi([b9, b10, b11]);
     }
-    return block1([], [b2, b3]);
+    const b3 = block3([], [b4, b8]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -810,7 +884,7 @@ exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is
 exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is mounted in some other position 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -823,10 +897,11 @@ exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is
 exports[`lifecycle hooks willUpdateProps hook is called 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
+    return comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -834,7 +909,7 @@ exports[`lifecycle hooks willUpdateProps hook is called 1`] = `
 exports[`lifecycle hooks willUpdateProps hook is called 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   

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

@@ -3,12 +3,13 @@
 exports[`basics accept ES6-like syntax for props (with getters) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, {greetings: ctx['greetings']}, key + \`__1\`, node, ctx);
+    const b2 = comp1({greetings: ctx['greetings']}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -17,7 +18,7 @@ exports[`basics accept ES6-like syntax for props (with getters) 1`] = `
 exports[`basics accept ES6-like syntax for props (with getters) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -31,20 +32,32 @@ exports[`basics accept ES6-like syntax for props (with getters) 2`] = `
 exports[`basics arrow functions as prop correctly capture their scope 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['items']);;
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = v_block1[i1];
+    const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['items']);;
+    for (let i1 = 0; i1 < l_block3; i1++) {
+      ctx[\`item\`] = v_block3[i1];
       const key1 = ctx['item'].val;
+      const b5 = text(\`
+ \`);
       const v1 = ctx['onClick'];
       const v2 = ctx['item'];
-      c_block1[i1] = withKey(component(\`Child\`, {onClick: _ev=>v1(v2.val,_ev)}, key + \`__1__\${key1}\`, node, ctx), key1);
+      const b6 = comp1({onClick: _ev=>v1(v2.val,_ev)}, key + \`__1__\${key1}\`, node, this, null);
+      const b7 = text(\`
+ \`);
+      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
     }
-    return list(c_block1);
+    ctx = ctx.__proto__;
+    const b3 = list(c_block3);
+    const b8 = text(\`
+ \`);
+    return multi([b2, b3, b8]);
   }
 }"
 `;
@@ -52,7 +65,7 @@ exports[`basics arrow functions as prop correctly capture their scope 1`] = `
 exports[`basics arrow functions as prop correctly capture their scope 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"/>\`);
   
@@ -66,12 +79,13 @@ exports[`basics arrow functions as prop correctly capture their scope 2`] = `
 exports[`basics explicit object prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, {value: ctx['state'].val}, key + \`__1\`, node, ctx);
+    const b2 = comp1({value: ctx['state'].val}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -80,7 +94,7 @@ exports[`basics explicit object prop 1`] = `
 exports[`basics explicit object prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -94,10 +108,11 @@ exports[`basics explicit object prop 2`] = `
 exports[`basics prop names can contain - 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {'prop-name': 7}, key + \`__1\`, node, ctx);
+    return comp1({'prop-name': 7}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -105,7 +120,7 @@ exports[`basics prop names can contain - 1`] = `
 exports[`basics prop names can contain - 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -119,10 +134,11 @@ exports[`basics prop names can contain - 2`] = `
 exports[`basics support prop names that aren't valid bare object property names 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {'some-dashed-prop': 5}, key + \`__1\`, node, ctx);
+    return comp1({'some-dashed-prop': 5}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -130,7 +146,7 @@ exports[`basics support prop names that aren't valid bare object property names
 exports[`basics support prop names that aren't valid bare object property names 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"/>\`);
   
@@ -144,22 +160,29 @@ exports[`basics support prop names that aren't valid bare object property names
 exports[`basics t-set with a body expression can be passed in props, and then t-out 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block2 = createBlock(\`<p>43</p>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <block-child-0/>
+ </div>\`);
+  let block4 = createBlock(\`<p>43</p>\`);
   
   function value1(ctx, node, key = \\"\\") {
-    return block2();
+    return block4();
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`abc\`] = new LazyValue(value1, ctx, node);
-    const b3 = component(\`Child\`, {val: ctx['abc']}, key + \`__1\`, node, ctx);
-    return block1([], [b3]);
+    const b2 = text(\`
+ \`);
+    ctx[\`abc\`] = new LazyValue(value1, ctx, this, node);
+    const b5 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
+    const b3 = block3([], [b5]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -167,15 +190,21 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
 exports[`basics t-set with a body expression can be passed in props, and then t-out 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
-  let block1 = createBlock(\`<span><block-text-0/><block-child-0/></span>\`);
+  let block3 = createBlock(\`<span>
+ <block-text-0/>
+ <block-child-0/>
+ </span>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     let txt1 = ctx['props'].val;
-    const b2 = safeOutput(ctx['props'].val);
-    return block1([txt1], [b2]);
+    const b4 = safeOutput(ctx['props'].val);
+    const b3 = block3([txt1], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -183,17 +212,24 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
 exports[`basics t-set with a body expression can be used as textual prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     setContextValue(ctx, \\"abc\\", \`42\`);
-    const b2 = component(\`Child\`, {val: ctx['abc']}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
+    const b4 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -201,7 +237,7 @@ exports[`basics t-set with a body expression can be used as textual prop 1`] = `
 exports[`basics t-set with a body expression can be used as textual prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -215,17 +251,24 @@ exports[`basics t-set with a body expression can be used as textual prop 2`] = `
 exports[`basics t-set works  1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     setContextValue(ctx, \\"val\\", 42);
-    const b2 = component(\`Child\`, {val: ctx['val']}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
+    const b4 = comp1({val: ctx['val']}, key + \`__1\`, node, this, null);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -233,7 +276,7 @@ exports[`basics t-set works  1`] = `
 exports[`basics t-set works  2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -247,10 +290,11 @@ exports[`basics t-set works  2`] = `
 exports[`basics template string in prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {propName: \`1\${ctx['someVal']}3\`}, key + \`__1\`, node, ctx);
+    return comp1({propName: \`1\${ctx['someVal']}3\`}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -258,7 +302,7 @@ exports[`basics template string in prop 1`] = `
 exports[`basics template string in prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`\`);
@@ -269,11 +313,12 @@ exports[`basics template string in prop 2`] = `
 exports[`bound functions is referentially equal after update 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { bind } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {val: ctx['state'].val,fn: bind(ctx, ctx['someFunction'])}, key + \`__1\`, node, ctx);
+    return comp1({val: ctx['state'].val,fn: bind(ctx, ctx['someFunction'])}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -281,7 +326,7 @@ exports[`bound functions is referentially equal after update 1`] = `
 exports[`bound functions is referentially equal after update 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(ctx['props'].val);
@@ -292,11 +337,12 @@ exports[`bound functions is referentially equal after update 2`] = `
 exports[`can bind function prop with bind suffix 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { bind } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {doSomething: bind(ctx, ctx['doSomething'])}, key + \`__1\`, node, ctx);
+    return comp1({doSomething: bind(ctx, ctx['doSomething'])}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -304,7 +350,7 @@ exports[`can bind function prop with bind suffix 1`] = `
 exports[`can bind function prop with bind suffix 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`child\`);

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

@@ -3,12 +3,13 @@
 exports[`reactivity in lifecycle Child component doesn't render when state they depend on changes but their parent is about to unmount them 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].renderChild) {
-      b2 = component(\`Child\`, {state: ctx['state']}, key + \`__1\`, node, ctx);
+      b2 = comp1({state: ctx['state']}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -18,7 +19,7 @@ exports[`reactivity in lifecycle Child component doesn't render when state they
 exports[`reactivity in lifecycle Child component doesn't render when state they depend on changes but their parent is about to unmount them 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(ctx['props'].state.content.a);
@@ -29,10 +30,11 @@ exports[`reactivity in lifecycle Child component doesn't render when state they
 exports[`reactivity in lifecycle Component is automatically subscribed to reactive object received as prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {obj: ctx['obj'],reactiveObj: ctx['reactiveObj']}, key + \`__1\`, node, ctx);
+    return comp1({obj: ctx['obj'],reactiveObj: ctx['reactiveObj']}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -40,7 +42,7 @@ exports[`reactivity in lifecycle Component is automatically subscribed to reacti
 exports[`reactivity in lifecycle Component is automatically subscribed to reactive object received as prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['props'].obj.a);
@@ -53,7 +55,7 @@ exports[`reactivity in lifecycle Component is automatically subscribed to reacti
 exports[`reactivity in lifecycle can use a state hook 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -67,7 +69,7 @@ exports[`reactivity in lifecycle can use a state hook 1`] = `
 exports[`reactivity in lifecycle can use a state hook 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -81,7 +83,7 @@ exports[`reactivity in lifecycle can use a state hook 2 1`] = `
 exports[`reactivity in lifecycle can use a state hook on Map 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -95,13 +97,18 @@ exports[`reactivity in lifecycle can use a state hook on Map 1`] = `
 exports[`reactivity in lifecycle change state while mounting component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  let block3 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     let txt1 = ctx['state'].val;
-    return block1([txt1]);
+    const b3 = block3([txt1]);
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -109,16 +116,24 @@ exports[`reactivity in lifecycle change state while mounting component 1`] = `
 exports[`reactivity in lifecycle state changes in willUnmount do not trigger rerender 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2;
+    const b2 = text(\`
+ \`);
+    let b4;
     if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
+      b4 = comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
     }
-    return block1([], [b2]);
+    const b3 = block3([], [b4]);
+    const b5 = text(\`
+ \`);
+    return multi([b2, b3, b5]);
   }
 }"
 `;
@@ -126,14 +141,19 @@ exports[`reactivity in lifecycle state changes in willUnmount do not trigger rer
 exports[`reactivity in lifecycle state changes in willUnmount do not trigger rerender 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
+  let block3 = 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;
-    return block1([txt1, txt2]);
+    const b3 = block3([txt1, txt2]);
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;

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

@@ -3,7 +3,7 @@
 exports[`refs basic use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   
@@ -18,22 +18,34 @@ exports[`refs basic use 1`] = `
 exports[`refs can use 2 refs with same name in a t-if/t-else situation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { multiRefSetter } = helpers;
   
-  let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
-  let block3 = createBlock(\`<span block-ref=\\"0\\"/>\`);
+  let block5 = createBlock(\`<div block-ref=\\"0\\"/>\`);
+  let block9 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
     const ref1 = multiRefSetter(refs, \`coucou\`);
-    let b2,b3;
+    let b2,b3,b7;
+    b2 = text(\`
+ \`);
     if (ctx['state'].value) {
-      b2 = block2([ref1]);
+      const b4 = text(\`
+ \`);
+      const b5 = block5([ref1]);
+      const b6 = text(\`
+ \`);
+      b3 = multi([b4, b5, b6]);
     } else {
-      b3 = block3([ref1]);
+      const b8 = text(\`
+ \`);
+      const b9 = block9([ref1]);
+      const b10 = text(\`
+ \`);
+      b7 = multi([b8, b9, b10]);
     }
-    return multi([b2, b3]);
+    return multi([b2, b3, b7]);
   }
 }"
 `;
@@ -41,19 +53,26 @@ exports[`refs can use 2 refs with same name in a t-if/t-else situation 1`] = `
 exports[`refs refs and recursive templates 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Test\`, true, false, false, false);
   
-  let block1 = createBlock(\`<p block-ref=\\"0\\"><block-text-1/><block-child-0/></p>\`);
+  let block3 = createBlock(\`<p block-ref=\\"0\\">
+ <block-text-1/>
+ <block-child-0/>
+ </p>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`root\`] = el;
-    let b2;
+    const b2 = text(\`
+ \`);
+    let b4;
     let txt1 = ctx['props'].tree.value;
     if (ctx['props'].tree.child) {
-      b2 = component(\`Test\`, {tree: ctx['props'].tree.child}, key + \`__1\`, node, ctx);
+      b4 = comp1({tree: ctx['props'].tree.child}, key + \`__1\`, node, this, null);
     }
-    return block1([ref1, txt1], [b2]);
+    const b3 = block3([ref1, txt1], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -61,24 +80,41 @@ exports[`refs refs and recursive templates 1`] = `
 exports[`refs refs are properly bound in slots 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
-  let block1 = createBlock(\`<div><span class=\\"counter\\"><block-text-0/></span><block-child-0/></div>\`);
-  let block2 = createBlock(\`<button block-handler-0=\\"click\\" block-ref=\\"1\\">do something</button>\`);
+  let block3 = createBlock(\`<div>
+ <span class=\\"counter\\"><block-text-0/></span>
+ <block-child-0/>
+ </div>\`);
+  let block4 = createBlock(\`<button block-handler-0=\\"click\\" block-ref=\\"1\\">do something</button>\`);
   
   function slot1(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`myButton\`] = el;
     let hdlr1 = [ctx['doSomething'], ctx];
-    return block2([hdlr1, ref1]);
+    return block4([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 b3 = component(\`Dialog\`, {slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, ctx);
-    return block1([txt1], [b3]);
+    const b8 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = block3([txt1], [b8]);
+    const b9 = text(\`
+ \`);
+    return multi([b2, b3, b9]);
   }
 }"
 `;
@@ -86,7 +122,7 @@ exports[`refs refs are properly bound in slots 1`] = `
 exports[`refs refs are properly bound in slots 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
@@ -101,18 +137,22 @@ exports[`refs refs are properly bound in slots 2`] = `
 exports[`refs throws if there are 2 same refs at the same time 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { multiRefSetter } = helpers;
   
-  let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
-  let block3 = createBlock(\`<span block-ref=\\"0\\"/>\`);
+  let block3 = createBlock(\`<div block-ref=\\"0\\"/>\`);
+  let block5 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
     const ref1 = multiRefSetter(refs, \`coucou\`);
-    const b2 = block2([ref1]);
+    const b2 = text(\`
+ \`);
     const b3 = block3([ref1]);
-    return multi([b2, b3]);
+    const b4 = text(\`
+ \`);
+    const b5 = block5([ref1]);
+    return multi([b2, b3, b4, b5]);
   }
 }"
 `;

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

@@ -3,12 +3,19 @@
 exports[`children, default props and renderings 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(ctx['state'].value);
-    const b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    return multi([b2, b3]);
+    const b2 = text(\`
+ \`);
+    const b3 = text(ctx['state'].value);
+    const b4 = text(\`
+ \`);
+    const b5 = comp1({}, key + \`__1\`, node, this, null);
+    const b6 = text(\`
+ \`);
+    return multi([b2, b3, b4, b5, b6]);
   }
 }"
 `;
@@ -16,7 +23,7 @@ exports[`children, default props and renderings 1`] = `
 exports[`children, default props and renderings 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`child\`);
@@ -27,10 +34,11 @@ exports[`children, default props and renderings 2`] = `
 exports[`force render in case of existing render 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`B\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
+    return comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -38,10 +46,11 @@ exports[`force render in case of existing render 1`] = `
 exports[`force render in case of existing render 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`C\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`C\`, {}, key + \`__1\`, node, ctx);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     const b3 = text(ctx['props'].val);
     return multi([b2, b3]);
   }
@@ -51,7 +60,7 @@ exports[`force render in case of existing render 2`] = `
 exports[`force render in case of existing render 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`C\`);
@@ -62,12 +71,19 @@ exports[`force render in case of existing render 3`] = `
 exports[`rendering semantics can force a render to update sub tree 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(ctx['state'].value);
-    const b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    return multi([b2, b3]);
+    const b2 = text(\`
+ \`);
+    const b3 = text(ctx['state'].value);
+    const b4 = text(\`
+ \`);
+    const b5 = comp1({}, key + \`__1\`, node, this, null);
+    const b6 = text(\`
+ \`);
+    return multi([b2, b3, b4, b5, b6]);
   }
 }"
 `;
@@ -75,7 +91,7 @@ exports[`rendering semantics can force a render to update sub tree 1`] = `
 exports[`rendering semantics can force a render to update sub tree 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`child\`);
@@ -86,12 +102,19 @@ exports[`rendering semantics can force a render to update sub tree 2`] = `
 exports[`rendering semantics can render a parent without rendering child 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(ctx['state'].value);
-    const b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    return multi([b2, b3]);
+    const b2 = text(\`
+ \`);
+    const b3 = text(ctx['state'].value);
+    const b4 = text(\`
+ \`);
+    const b5 = comp1({}, key + \`__1\`, node, this, null);
+    const b6 = text(\`
+ \`);
+    return multi([b2, b3, b4, b5, b6]);
   }
 }"
 `;
@@ -99,7 +122,7 @@ exports[`rendering semantics can render a parent without rendering child 1`] = `
 exports[`rendering semantics can render a parent without rendering child 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`child\`);
@@ -110,10 +133,16 @@ exports[`rendering semantics can render a parent without rendering child 2`] = `
 exports[`rendering semantics props are reactive (nested prop) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {a: ctx['state']}, key + \`__1\`, node, ctx);
+    const b2 = text(\`
+ \`);
+    const b3 = comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -121,7 +150,7 @@ exports[`rendering semantics props are reactive (nested prop) 1`] = `
 exports[`rendering semantics props are reactive (nested prop) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(ctx['props'].a.b.c);
@@ -132,10 +161,16 @@ exports[`rendering semantics props are reactive (nested prop) 2`] = `
 exports[`rendering semantics props are reactive 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {a: ctx['state']}, key + \`__1\`, node, ctx);
+    const b2 = text(\`
+ \`);
+    const b3 = comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -143,7 +178,7 @@ exports[`rendering semantics props are reactive 1`] = `
 exports[`rendering semantics props are reactive 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(ctx['props'].a.b);
@@ -154,12 +189,19 @@ exports[`rendering semantics props are reactive 2`] = `
 exports[`rendering semantics render need a boolean = true to be 'deep' 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(ctx['state'].value);
-    const b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    return multi([b2, b3]);
+    const b2 = text(\`
+ \`);
+    const b3 = text(ctx['state'].value);
+    const b4 = text(\`
+ \`);
+    const b5 = comp1({}, key + \`__1\`, node, this, null);
+    const b6 = text(\`
+ \`);
+    return multi([b2, b3, b4, b5, b6]);
   }
 }"
 `;
@@ -167,7 +209,7 @@ exports[`rendering semantics render need a boolean = true to be 'deep' 1`] = `
 exports[`rendering semantics render need a boolean = true to be 'deep' 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`child\`);
@@ -178,12 +220,13 @@ exports[`rendering semantics render need a boolean = true to be 'deep' 2`] = `
 exports[`rendering semantics render with deep=true followed by render with deep=false work as expected 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(\`parent\`);
     const b3 = text(ctx['state'].value);
-    const b4 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b4 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3, b4]);
   }
 }"
@@ -192,7 +235,7 @@ exports[`rendering semantics render with deep=true followed by render with deep=
 exports[`rendering semantics render with deep=true followed by render with deep=false work as expected 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(\`child\`);
@@ -205,11 +248,12 @@ exports[`rendering semantics render with deep=true followed by render with deep=
 exports[`rendering semantics rendering is atomic (for one subtree) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['state'].obj.val);
-    const b3 = component(\`B\`, {obj: ctx['state'].obj}, key + \`__1\`, node, ctx);
+    const b3 = comp1({obj: ctx['state'].obj}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
   }
 }"
@@ -218,10 +262,11 @@ exports[`rendering semantics rendering is atomic (for one subtree) 1`] = `
 exports[`rendering semantics rendering is atomic (for one subtree) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`C\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`C\`, {obj: ctx['props'].obj}, key + \`__1\`, node, ctx);
+    return comp1({obj: ctx['props'].obj}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -229,7 +274,7 @@ exports[`rendering semantics rendering is atomic (for one subtree) 2`] = `
 exports[`rendering semantics rendering is atomic (for one subtree) 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(ctx['props'].obj.val);
@@ -240,10 +285,16 @@ exports[`rendering semantics rendering is atomic (for one subtree) 3`] = `
 exports[`rendering semantics works as expected for dynamic number of props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, true, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, Object.assign({}, ctx['state']), key + \`__1\`, node, ctx);
+    const b2 = text(\`
+ \`);
+    const b3 = comp1(Object.assign({}, ctx['state']), key + \`__1\`, node, this, null);
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -251,7 +302,7 @@ exports[`rendering semantics works as expected for dynamic number of props 1`] =
 exports[`rendering semantics works as expected for dynamic number of props 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(Object.keys(ctx['props']).length);

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

@@ -3,10 +3,11 @@
 exports[`style and class handling can set class on multi root component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'fromparent'}, key + \`__1\`, node, ctx);
+    return comp1({class: 'fromparent'}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -14,7 +15,7 @@ exports[`style and class handling can set class on multi root component 1`] = `
 exports[`style and class handling can set class on multi root component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = createBlock(\`<div>a</div>\`);
   let block3 = createBlock(\`<span block-attribute-0=\\"class\\">b</span>\`);
@@ -31,10 +32,11 @@ exports[`style and class handling can set class on multi root component 2`] = `
 exports[`style and class handling can set class on sub component, as prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'some-class'}, key + \`__1\`, node, ctx);
+    return comp1({class: 'some-class'}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -42,7 +44,7 @@ exports[`style and class handling can set class on sub component, as prop 1`] =
 exports[`style and class handling can set class on sub component, as prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
   
@@ -56,10 +58,11 @@ exports[`style and class handling can set class on sub component, as prop 2`] =
 exports[`style and class handling can set class on sub sub component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'fromparent'}, key + \`__1\`, node, ctx);
+    return comp1({class: 'fromparent'}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -67,10 +70,11 @@ exports[`style and class handling can set class on sub sub component 1`] = `
 exports[`style and class handling can set class on sub sub component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`ChildChild\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`ChildChild\`, {class: (ctx['props'].class||'')+' fromchild'}, key + \`__1\`, node, ctx);
+    return comp1({class: (ctx['props'].class||'')+' fromchild'}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -78,7 +82,7 @@ exports[`style and class handling can set class on sub sub component 2`] = `
 exports[`style and class handling can set class on sub sub component 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\">childchild</div>\`);
   
@@ -92,10 +96,11 @@ exports[`style and class handling can set class on sub sub component 3`] = `
 exports[`style and class handling can set more than one class on sub component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'a  b'}, key + \`__1\`, node, ctx);
+    return comp1({class: 'a  b'}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -103,7 +108,7 @@ exports[`style and class handling can set more than one class on sub component 1
 exports[`style and class handling can set more than one class on sub component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
   
@@ -117,12 +122,17 @@ exports[`style and class handling can set more than one class on sub component 2
 exports[`style and class handling can set style and class inside component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div style=\\"font-weight:bold;\\" class=\\"some-class\\">world</div>\`);
+  let block3 = createBlock(\`<div style=\\"font-weight:bold;\\" class=\\"some-class\\">world</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    const b2 = text(\`
+ \`);
+    const b3 = block3();
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -130,7 +140,7 @@ exports[`style and class handling can set style and class inside component 1`] =
 exports[`style and class handling class on components do not interfere with user defined classes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
@@ -144,10 +154,11 @@ exports[`style and class handling class on components do not interfere with user
 exports[`style and class handling class on sub component, which is switched to another 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'someclass',child: ctx['state'].child}, key + \`__1\`, node, ctx);
+    return comp1({class: 'someclass',child: ctx['state'].child}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -155,14 +166,16 @@ exports[`style and class handling class on sub component, which is switched to a
 exports[`style and class handling class on sub component, which is switched to another 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
+  const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     if (ctx['props'].child==='a') {
-      b2 = component(\`ChildA\`, {class: ctx['props'].class}, key + \`__1\`, node, ctx);
+      b2 = comp1({class: ctx['props'].class}, key + \`__1\`, node, this, null);
     } else {
-      b3 = component(\`ChildB\`, {class: ctx['props'].class}, key + \`__2\`, node, ctx);
+      b3 = comp2({class: ctx['props'].class}, key + \`__2\`, node, this, null);
     }
     return multi([b2, b3]);
   }
@@ -172,7 +185,7 @@ exports[`style and class handling class on sub component, which is switched to a
 exports[`style and class handling class on sub component, which is switched to another 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\">a</div>\`);
   
@@ -186,7 +199,7 @@ exports[`style and class handling class on sub component, which is switched to a
 exports[`style and class handling class on sub component, which is switched to another 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span block-attribute-0=\\"class\\">b</span>\`);
   
@@ -200,12 +213,13 @@ exports[`style and class handling class on sub component, which is switched to a
 exports[`style and class handling class with extra whitespaces (variation) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, {class: 'a  b c   d'}, key + \`__1\`, node, ctx);
+    const b2 = comp1({class: 'a  b c   d'}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -214,7 +228,7 @@ exports[`style and class handling class with extra whitespaces (variation) 1`] =
 exports[`style and class handling class with extra whitespaces (variation) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
@@ -228,10 +242,11 @@ exports[`style and class handling class with extra whitespaces (variation) 2`] =
 exports[`style and class handling class with extra whitespaces 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'a  b c   d'}, key + \`__1\`, node, ctx);
+    return comp1({class: 'a  b c   d'}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -239,7 +254,7 @@ exports[`style and class handling class with extra whitespaces 1`] = `
 exports[`style and class handling class with extra whitespaces 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
@@ -253,10 +268,11 @@ exports[`style and class handling class with extra whitespaces 2`] = `
 exports[`style and class handling component class and parent class combine together 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'from parent'}, key + \`__1\`, node, ctx);
+    return comp1({class: 'from parent'}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -264,7 +280,7 @@ exports[`style and class handling component class and parent class combine toget
 exports[`style and class handling component class and parent class combine together 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"child\\" block-attribute-0=\\"class\\">child</div>\`);
   
@@ -305,12 +321,13 @@ exports[`style and class handling dynamic t-att-style is properly added and upda
 exports[`style and class handling empty class attribute is not added on widget root el 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, {class: undefined}, key + \`__1\`, node, ctx);
+    const b2 = comp1({class: undefined}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -319,7 +336,7 @@ exports[`style and class handling empty class attribute is not added on widget r
 exports[`style and class handling empty class attribute is not added on widget root el 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span block-attribute-0=\\"class\\"/>\`);
   
@@ -333,10 +350,11 @@ exports[`style and class handling empty class attribute is not added on widget r
 exports[`style and class handling error in subcomponent with class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'a'}, key + \`__1\`, node, ctx);
+    return comp1({class: 'a'}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -344,7 +362,7 @@ exports[`style and class handling error in subcomponent with class 1`] = `
 exports[`style and class handling error in subcomponent with class 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"><block-text-1/></div>\`);
   
@@ -359,10 +377,11 @@ exports[`style and class handling error in subcomponent with class 2`] = `
 exports[`style and class handling no class is set is child ignores it 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'hey'}, key + \`__1\`, node, ctx);
+    return comp1({class: 'hey'}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -370,7 +389,7 @@ exports[`style and class handling no class is set is child ignores it 1`] = `
 exports[`style and class handling no class is set is child ignores it 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>child</div>\`);
   
@@ -383,10 +402,11 @@ exports[`style and class handling no class is set is child ignores it 2`] = `
 exports[`style and class handling no class is set is parent does not give it as prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -394,7 +414,7 @@ exports[`style and class handling no class is set is parent does not give it as
 exports[`style and class handling no class is set is parent does not give it as prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
   
@@ -408,10 +428,11 @@ exports[`style and class handling no class is set is parent does not give it as
 exports[`style and class handling style is properly added on widget root el 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {style: 'font-weight: bold;'}, key + \`__1\`, node, ctx);
+    return comp1({style: 'font-weight: bold;'}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -419,7 +440,7 @@ exports[`style and class handling style is properly added on widget root el 1`]
 exports[`style and class handling style is properly added on widget root el 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"style\\"/>\`);
   
@@ -433,13 +454,19 @@ exports[`style and class handling style is properly added on widget root el 2`]
 exports[`style and class handling t-att-class is properly added/removed on widget root el (v2) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, {class: {b:ctx['state'].b}}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
+    const b2 = text(\`
+ \`);
+    const b4 = comp1({class: {b:ctx['state'].b}}, key + \`__1\`, node, this, null);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -447,7 +474,7 @@ exports[`style and class handling t-att-class is properly added/removed on widge
 exports[`style and class handling t-att-class is properly added/removed on widget root el (v2) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span class=\\"c\\" block-attribute-0=\\"class\\"/>\`);
   
@@ -461,10 +488,11 @@ exports[`style and class handling t-att-class is properly added/removed on widge
 exports[`style and class handling t-att-class is properly added/removed on widget root el (v3) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: {a:true,b:ctx['state'].b}}, key + \`__1\`, node, ctx);
+    return comp1({class: {a:true,b:ctx['state'].b}}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -472,7 +500,7 @@ exports[`style and class handling t-att-class is properly added/removed on widge
 exports[`style and class handling t-att-class is properly added/removed on widget root el (v3) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span class=\\"c\\" block-attribute-0=\\"class\\"/>\`);
   

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

@@ -3,17 +3,22 @@
 exports[`t-call dynamic t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
   const call = app.callTemplate.bind(app);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b1 = text(\` owl \`);
-    ctx[zero] = b1;
+    const b3 = text(\`
+ owl
+ \`);
+    ctx[zero] = b3;
     const template1 = (ctx['current'].template);
-    return call(this, template1, ctx, node, key + \`__1\`);
+    const b4 = call(this, template1, ctx, node, key + \`__1\`);
+    return multi([b2, b4]);
   }
 }"
 `;
@@ -21,7 +26,7 @@ exports[`t-call dynamic t-call 1`] = `
 exports[`t-call dynamic t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>foo</div>\`);
   
@@ -34,7 +39,7 @@ exports[`t-call dynamic t-call 2`] = `
 exports[`t-call dynamic t-call 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`bar\`);
@@ -45,11 +50,12 @@ exports[`t-call dynamic t-call 3`] = `
 exports[`t-call dynamic t-call: key is propagated 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   const call = app.callTemplate.bind(app);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     const template1 = (ctx['sub']);
     const b3 = call(this, template1, ctx, node, key + \`__2\`);
     return multi([b2, b3]);
@@ -60,7 +66,7 @@ exports[`t-call dynamic t-call: key is propagated 1`] = `
 exports[`t-call dynamic t-call: key is propagated 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"id\\"/>\`);
   
@@ -74,10 +80,11 @@ exports[`t-call dynamic t-call: key is propagated 2`] = `
 exports[`t-call dynamic t-call: key is propagated 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -85,16 +92,19 @@ exports[`t-call dynamic t-call: key is propagated 3`] = `
 exports[`t-call handlers are properly bound through a dynamic t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const call = app.callTemplate.bind(app);
   
-  let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
+  let block3 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     const template1 = ('__template__999');
-    const b2 = call(this, template1, ctx, node, key + \`__1\`);
+    const b4 = call(this, template1, ctx, node, key + \`__1\`);
     let txt1 = ctx['counter'];
-    return block1([txt1], [b2]);
+    const b3 = block3([txt1], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -102,7 +112,7 @@ exports[`t-call handlers are properly bound through a dynamic t-call 1`] = `
 exports[`t-call handlers are properly bound through a dynamic t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
   
@@ -116,15 +126,18 @@ exports[`t-call handlers are properly bound through a dynamic t-call 2`] = `
 exports[`t-call handlers are properly bound through a t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`__template__999\`);
   
-  let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
+  let block3 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = text(\`
+ \`);
+    const b4 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     let txt1 = ctx['counter'];
-    return block1([txt1], [b2]);
+    const b3 = block3([txt1], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -132,7 +145,7 @@ exports[`t-call handlers are properly bound through a t-call 1`] = `
 exports[`t-call handlers are properly bound through a t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
   
@@ -146,7 +159,7 @@ exports[`t-call handlers are properly bound through a t-call 2`] = `
 exports[`t-call handlers with arguments are properly bound through a t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`__template__999\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -161,7 +174,7 @@ exports[`t-call handlers with arguments are properly bound through a t-call 1`]
 exports[`t-call handlers with arguments are properly bound through a t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
   
@@ -176,7 +189,7 @@ exports[`t-call handlers with arguments are properly bound through a t-call 2`]
 exports[`t-call parent is set within t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`__template__999\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -191,10 +204,11 @@ exports[`t-call parent is set within t-call 1`] = `
 exports[`t-call parent is set within t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -202,7 +216,7 @@ exports[`t-call parent is set within t-call 2`] = `
 exports[`t-call parent is set within t-call 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>lucas</span>\`);
   
@@ -215,7 +229,7 @@ exports[`t-call parent is set within t-call 3`] = `
 exports[`t-call parent is set within t-call with no parentNode 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`__template__999\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -227,10 +241,11 @@ exports[`t-call parent is set within t-call with no parentNode 1`] = `
 exports[`t-call parent is set within t-call with no parentNode 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -238,7 +253,7 @@ exports[`t-call parent is set within t-call with no parentNode 2`] = `
 exports[`t-call parent is set within t-call with no parentNode 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>lucas</span>\`);
   
@@ -251,20 +266,26 @@ exports[`t-call parent is set within t-call with no parentNode 3`] = `
 exports[`t-call recursive t-call binding this -- static t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`recursive\`);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = 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 b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    return block1([], [b2]);
+    const b4 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    ctx = ctx.__proto__;
+    const b3 = block3([], [b4]);
+    const b5 = text(\`
+ \`);
+    return multi([b2, b3, b5]);
   }
 }"
 `;
@@ -272,28 +293,44 @@ exports[`t-call recursive t-call binding this -- static t-call 1`] = `
 exports[`t-call recursive t-call binding this -- static t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue } = helpers;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`recursive\`);
   
-  let block3 = createBlock(\`<div block-handler-0=\\"click.stop\\"><block-text-1/></div>\`);
+  let block5 = 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;
+    let b2,b3,b12;
+    b2 = text(\`
+ \`);
     if (ctx['level']<2) {
+      const b4 = text(\`
+ \`);
       let hdlr1 = [\\"stop\\", ctx['onClicked'].bind(this), ctx];
       let txt1 = ctx['level'];
-      const b3 = block3([hdlr1, txt1]);
+      const b5 = block5([hdlr1, txt1]);
+      const b6 = text(\`
+ \`);
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
+      const b8 = text(\`
+ \`);
       setContextValue(ctx, \\"level\\", ctx['level']+1);
-      const b4 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+      const b9 = text(\`
+ \`);
+      const b7 = multi([b8, b9]);
+      ctx[zero] = b7;
+      const b10 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
       ctx = ctx.__proto__;
-      b2 = multi([b3, b4]);
+      const b11 = text(\`
+ \`);
+      b3 = multi([b4, b5, b6, b10, b11]);
     }
-    return multi([b2]);
+    b12 = text(\`
+ \`);
+    return multi([b2, b3, b12]);
   }
 }"
 `;
@@ -301,21 +338,28 @@ exports[`t-call recursive t-call binding this -- static t-call 2`] = `
 exports[`t-call sub components in two t-calls 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   const callTemplate_2 = app.getTemplate(\`sub\`);
   
-  let block3 = createBlock(\`<div><block-child-0/></div>\`);
+  let block7 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b2,b3,b7;
+    b2 = text(\`
+ \`);
     if (ctx['state'].val===1) {
-      b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+      const b4 = text(\`
+ \`);
+      const b5 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+      const b6 = text(\`
+ \`);
+      b3 = multi([b4, b5, b6]);
     } else {
-      const b4 = callTemplate_2.call(this, ctx, node, key + \`__2\`);
-      b3 = block3([], [b4]);
+      const b8 = callTemplate_2.call(this, ctx, node, key + \`__2\`);
+      b7 = block7([], [b8]);
     }
-    return multi([b2, b3]);
+    return multi([b2, b3, b7]);
   }
 }"
 `;
@@ -323,10 +367,11 @@ exports[`t-call sub components in two t-calls 1`] = `
 exports[`t-call sub components in two t-calls 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
+    return comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -334,7 +379,7 @@ exports[`t-call sub components in two t-calls 2`] = `
 exports[`t-call sub components in two t-calls 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -348,26 +393,37 @@ exports[`t-call sub components in two t-calls 3`] = `
 exports[`t-call t-call in t-foreach and children component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`__template__999\`);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b','c']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(['a','b','c']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`val\`] = v_block4[i1];
       ctx[\`val_first\`] = i1 === 0;
-      ctx[\`val_last\`] = i1 === v_block2.length - 1;
+      ctx[\`val_last\`] = i1 === v_block4.length - 1;
       ctx[\`val_index\`] = i1;
-      ctx[\`val_value\`] = k_block2[i1];
+      ctx[\`val_value\`] = k_block4[i1];
       const key1 = ctx['val'];
-      c_block2[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
+      const b6 = text(\`
+ \`);
+      const b7 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
+      const b8 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -375,10 +431,11 @@ exports[`t-call t-call in t-foreach and children component 1`] = `
 exports[`t-call t-call in t-foreach and children component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {val: ctx['val']}, key + \`__1\`, node, ctx);
+    return comp1({val: ctx['val']}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -386,7 +443,7 @@ exports[`t-call t-call in t-foreach and children component 2`] = `
 exports[`t-call t-call in t-foreach and children component 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -396,3 +453,82 @@ exports[`t-call t-call in t-foreach and children component 3`] = `
   }
 }"
 `;
+
+exports[`t-call t-call with t-call-context and subcomponent 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`someTemplate\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
+    let ctx1 = ctx['subctx'];
+    const b3 = callTemplate_1.call(this, ctx1, node, key + \`__1\`);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`t-call t-call with t-call-context and subcomponent 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  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 b2 = text(\`
+ \`);
+    const b3 = comp1({name: ctx['aab']}, key + \`__1\`, node, this, null);
+    const b4 = text(\`
+ \`);
+    const b5 = comp2({name: ctx['lpe']}, key + \`__2\`, node, this, null);
+    const b6 = text(\`
+ \`);
+    return multi([b2, b3, b4, b5, b6]);
+  }
+}"
+`;
+
+exports[`t-call t-call with t-call-context and subcomponent 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  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
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`someTemplate\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
+    let ctx1 = ctx['subctx'];
+    const b3 = callTemplate_1.call(this, ctx1, node, key + \`__1\`);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`t-call t-call with t-call-context, simple use 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(ctx['aab']);
+    const b3 = text(ctx['lpe']);
+    return multi([b2, b3]);
+  }
+}"
+`;

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

@@ -3,7 +3,7 @@
 exports[`t-call-block simple t-call-block with static text 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   

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

@@ -3,14 +3,20 @@
 exports[`t-component can switch between dynamic components without the need for a t-key 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(null, false, false, false, true);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     const Comp1 = ctx['constructor'].components[ctx['state'].child];
-    const b2 = toggler(Comp1, component(Comp1, {}, key + \`__1\`, node, ctx));
-    return block1([], [b2]);
+    const b4 = toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -18,7 +24,7 @@ exports[`t-component can switch between dynamic components without the need for
 exports[`t-component can switch between dynamic components without the need for a t-key 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>child a</span>\`);
   
@@ -31,7 +37,7 @@ exports[`t-component can switch between dynamic components without the need for
 exports[`t-component can switch between dynamic components without the need for a t-key 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>child b</span>\`);
   
@@ -44,12 +50,13 @@ exports[`t-component can switch between dynamic components without the need for
 exports[`t-component can use dynamic components (the class) if given (with different root tagname) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(null, false, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['state'].child;
     const Comp1 = ctx['myComponent'];
-    return toggler(tKey_1, toggler(Comp1, component(Comp1, {}, tKey_1 + key + \`__1\`, node, ctx)));
+    return toggler(tKey_1, toggler(Comp1, comp1({}, tKey_1 + key + \`__1\`, node, this, Comp1)));
   }
 }"
 `;
@@ -57,7 +64,7 @@ exports[`t-component can use dynamic components (the class) if given (with diffe
 exports[`t-component can use dynamic components (the class) if given (with different root tagname) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>child a</span>\`);
   
@@ -70,7 +77,7 @@ exports[`t-component can use dynamic components (the class) if given (with diffe
 exports[`t-component can use dynamic components (the class) if given (with different root tagname) 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>child b</div>\`);
   
@@ -83,12 +90,13 @@ exports[`t-component can use dynamic components (the class) if given (with diffe
 exports[`t-component can use dynamic components (the class) if given 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(null, false, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['state'].child;
     const Comp1 = ctx['myComponent'];
-    return toggler(tKey_1, toggler(Comp1, component(Comp1, {}, tKey_1 + key + \`__1\`, node, ctx)));
+    return toggler(tKey_1, toggler(Comp1, comp1({}, tKey_1 + key + \`__1\`, node, this, Comp1)));
   }
 }"
 `;
@@ -96,7 +104,7 @@ exports[`t-component can use dynamic components (the class) if given 1`] = `
 exports[`t-component can use dynamic components (the class) if given 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>child a</span>\`);
   
@@ -109,7 +117,7 @@ exports[`t-component can use dynamic components (the class) if given 2`] = `
 exports[`t-component can use dynamic components (the class) if given 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>child b</span>\`);
   
@@ -122,13 +130,14 @@ exports[`t-component can use dynamic components (the class) if given 3`] = `
 exports[`t-component modifying a sub widget 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(null, false, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const Comp1 = ctx['Counter'];
-    const b2 = toggler(Comp1, component(Comp1, {}, key + \`__1\`, node, ctx));
+    const b2 = toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
     return block1([], [b2]);
   }
 }"
@@ -137,15 +146,18 @@ exports[`t-component modifying a sub widget 1`] = `
 exports[`t-component modifying a sub widget 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
+  let block3 = 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];
-    return block1([txt1, hdlr1]);
+    const b3 = block3([txt1, hdlr1]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -153,11 +165,12 @@ exports[`t-component modifying a sub widget 2`] = `
 exports[`t-component switching dynamic component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(null, false, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const Comp1 = ctx['Child'];
-    return toggler(Comp1, component(Comp1, {}, key + \`__1\`, node, ctx));
+    return toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
   }
 }"
 `;
@@ -165,7 +178,7 @@ exports[`t-component switching dynamic component 1`] = `
 exports[`t-component switching dynamic component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>child a</div>\`);
   
@@ -178,7 +191,7 @@ exports[`t-component switching dynamic component 2`] = `
 exports[`t-component switching dynamic component 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`child b\`);
@@ -189,11 +202,12 @@ exports[`t-component switching dynamic component 3`] = `
 exports[`t-component t-component works in simple case 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(null, false, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const Comp1 = ctx['Child'];
-    return toggler(Comp1, component(Comp1, {}, key + \`__1\`, node, ctx));
+    return toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
   }
 }"
 `;
@@ -201,7 +215,7 @@ exports[`t-component t-component works in simple case 1`] = `
 exports[`t-component t-component works in simple case 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>child</div>\`);
   

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

@@ -3,23 +3,39 @@
 exports[`list of components components in a node in a t-foreach  1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block1 = createBlock(\`<div><ul><block-child-0/></ul></div>\`);
-  let block3 = createBlock(\`<li><block-child-0/></li>\`);
+  let block3 = createBlock(\`<div>
+ <ul>
+ <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_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['items']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`item\`] = v_block4[i1];
       const key1 = 'li_'+ctx['item'];
-      const b4 = component(\`Child\`, {item: ctx['item']}, key + \`__1__\${key1}\`, node, ctx);
-      c_block2[i1] = withKey(block3([], [b4]), key1);
+      const b6 = text(\`
+ \`);
+      const b8 = comp1({item: ctx['item']}, key + \`__1__\${key1}\`, node, this, null);
+      const b7 = block7([], [b8]);
+      const b9 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b9]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -27,7 +43,7 @@ exports[`list of components components in a node in a t-foreach  1`] = `
 exports[`list of components components in a node in a t-foreach  2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -41,23 +57,35 @@ exports[`list of components components in a node in a t-foreach  2`] = `
 exports[`list of components crash on duplicate key in dev mode 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, 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_block1, v_block1, l_block1, c_block1] = prepareList([1,2]);;
-    const keys1 = new Set();
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = v_block1[i1];
+    const [k_block3, v_block3, l_block3, c_block3] = prepareList([1,2]);;
+    const keys3 = new Set();
+    for (let i1 = 0; i1 < l_block3; i1++) {
+      ctx[\`item\`] = v_block3[i1];
       const key1 = 'child';
-      if (keys1.has(key1)) { throw new Error(\`Got duplicate key in t-foreach: \${key1}\`)}
-      keys1.add(key1);
+      if (keys3.has(key1)) { throw new Error(\`Got duplicate key in t-foreach: \${key1}\`)}
+      keys3.add(key1);
+      const b5 = text(\`
+ \`);
       const props1 = {};
       helpers.validateProps(\`Child\`, props1, ctx);
-      c_block1[i1] = withKey(component(\`Child\`, props1, key + \`__1__\${key1}\`, node, ctx), key1);
+      const b6 = comp1(props1, key + \`__1__\${key1}\`, node, this, null);
+      const b7 = text(\`
+ \`);
+      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
     }
-    return list(c_block1);
+    ctx = ctx.__proto__;
+    const b3 = list(c_block3);
+    const b8 = text(\`
+ \`);
+    return multi([b2, b3, b8]);
   }
 }"
 `;
@@ -65,7 +93,7 @@ exports[`list of components crash on duplicate key in dev mode 1`] = `
 exports[`list of components crash on duplicate key in dev mode 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`\`);
@@ -76,23 +104,32 @@ exports[`list of components crash on duplicate key in dev mode 2`] = `
 exports[`list of components list of sub components inside other nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  const comp1 = app.createComponent(\`SubComponent\`, true, false, false, true);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
+  let block5 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].blips);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`blip\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].blips);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`blip\`] = v_block4[i1];
       const key1 = ctx['blip'].id;
-      const b4 = component(\`SubComponent\`, {}, key + \`__1__\${key1}\`, node, ctx);
-      c_block2[i1] = withKey(block3([], [b4]), key1);
+      const b6 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
+      c_block4[i1] = withKey(block5([], [b6]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -100,7 +137,7 @@ exports[`list of components list of sub components inside other nodes 1`] = `
 exports[`list of components list of sub components inside other nodes 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>asdf</span>\`);
   
@@ -113,31 +150,48 @@ exports[`list of components list of sub components inside other nodes 2`] = `
 exports[`list of components reconciliation alg works for t-foreach in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].s);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`section\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].s);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`section\`] = v_block4[i1];
       ctx[\`section_index\`] = i1;
       const key1 = ctx['section_index'];
+      const b6 = text(\`
+ \`);
       ctx = Object.create(ctx);
-      const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['section'].blips);;
-      for (let i2 = 0; i2 < l_block3; i2++) {
-        ctx[\`blip\`] = v_block3[i2];
+      const [k_block7, v_block7, l_block7, c_block7] = prepareList(ctx['section'].blips);;
+      for (let i2 = 0; i2 < l_block7; i2++) {
+        ctx[\`blip\`] = v_block7[i2];
         ctx[\`blip_index\`] = i2;
         const key2 = ctx['blip_index'];
-        c_block3[i2] = withKey(component(\`Child\`, {blip: ctx['blip']}, key + \`__1__\${key1}__\${key2}\`, node, ctx), key2);
+        const b9 = text(\`
+ \`);
+        const b10 = comp1({blip: ctx['blip']}, key + \`__1__\${key1}__\${key2}\`, node, this, null);
+        const b11 = text(\`
+ \`);
+        c_block7[i2] = withKey(multi([b9, b10, b11]), key2);
       }
       ctx = ctx.__proto__;
-      c_block2[i1] = withKey(list(c_block3), key1);
+      const b7 = list(c_block7);
+      const b12 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b12]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -145,7 +199,7 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach
 exports[`list of components reconciliation alg works for t-foreach in t-foreach 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -159,33 +213,44 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach
 exports[`list of components reconciliation alg works for t-foreach in t-foreach, 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<p><block-child-0/></p>\`);
-  let block5 = createBlock(\`<p><block-child-0/></p>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
+  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_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].rows);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`row\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].rows);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`row\`] = v_block4[i1];
       const key1 = ctx['row'];
       ctx = Object.create(ctx);
-      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].cols);;
-      for (let i2 = 0; i2 < l_block4; i2++) {
-        ctx[\`col\`] = v_block4[i2];
+      const [k_block6, v_block6, l_block6, c_block6] = prepareList(ctx['state'].cols);;
+      for (let i2 = 0; i2 < l_block6; i2++) {
+        ctx[\`col\`] = v_block6[i2];
         const key2 = ctx['col'];
-        const b6 = component(\`Child\`, {row: ctx['row'],col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, ctx);
-        c_block4[i2] = withKey(block5([], [b6]), key2);
+        const b8 = comp1({row: ctx['row'],col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, this, null);
+        c_block6[i2] = withKey(block7([], [b8]), key2);
       }
       ctx = ctx.__proto__;
-      const b4 = list(c_block4);
-      c_block2[i1] = withKey(block3([], [b4]), key1);
+      const b6 = list(c_block6);
+      c_block4[i1] = withKey(block5([], [b6]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -193,7 +258,7 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach,
 exports[`list of components reconciliation alg works for t-foreach in t-foreach, 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -207,18 +272,27 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach,
 exports[`list of components simple list 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['state'].elems);;
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`elem\`] = v_block1[i1];
+    const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['state'].elems);;
+    for (let i1 = 0; i1 < l_block3; i1++) {
+      ctx[\`elem\`] = v_block3[i1];
       const key1 = ctx['elem'].id;
-      c_block1[i1] = withKey(component(\`Child\`, {value: ctx['elem'].value}, key + \`__1__\${key1}\`, node, ctx), key1);
+      const b5 = text(\`
+ \`);
+      const b6 = comp1({value: ctx['elem'].value}, key + \`__1__\${key1}\`, node, this, null);
+      const b7 = text(\`
+ \`);
+      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
     }
-    return list(c_block1);
+    const b3 = list(c_block3);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -226,7 +300,7 @@ exports[`list of components simple list 1`] = `
 exports[`list of components simple list 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -240,21 +314,33 @@ exports[`list of components simple list 2`] = `
 exports[`list of components sub components rendered in a loop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].numbers);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`number\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].numbers);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`number\`] = v_block4[i1];
       const key1 = ctx['number'];
-      c_block2[i1] = withKey(component(\`Child\`, {n: ctx['number']}, key + \`__1__\${key1}\`, node, ctx), key1);
+      const b6 = text(\`
+ \`);
+      const b7 = comp1({n: ctx['number']}, key + \`__1__\${key1}\`, node, this, null);
+      const b8 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -262,7 +348,7 @@ exports[`list of components sub components rendered in a loop 1`] = `
 exports[`list of components sub components rendered in a loop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p><block-text-0/></p>\`);
   
@@ -276,21 +362,33 @@ exports[`list of components sub components rendered in a loop 2`] = `
 exports[`list of components sub components with some state rendered in a loop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].numbers);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`number\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].numbers);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`number\`] = v_block4[i1];
       const key1 = ctx['number'];
-      c_block2[i1] = withKey(component(\`Child\`, {}, key + \`__1__\${key1}\`, node, ctx), key1);
+      const b6 = text(\`
+ \`);
+      const b7 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
+      const b8 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -298,7 +396,7 @@ exports[`list of components sub components with some state rendered in a loop 1`
 exports[`list of components sub components with some state rendered in a loop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p><block-text-0/></p>\`);
   
@@ -312,10 +410,13 @@ exports[`list of components sub components with some state rendered in a loop 2`
 exports[`list of components switch component position 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  let block1 = createBlock(\`<span>
+ <block-child-0/>
+ </span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -323,8 +424,14 @@ 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'];
-      c_block2[i1] = withKey(component(\`Child\`, {key: ctx['c']}, key + \`__1__\${key1}\`, node, ctx), key1);
+      const b4 = text(\`
+ \`);
+      const b5 = comp1({key: ctx['c']}, key + \`__1__\${key1}\`, node, this, null);
+      const b6 = text(\`
+ \`);
+      c_block2[i1] = withKey(multi([b4, b5, b6]), key1);
     }
+    ctx = ctx.__proto__;
     const b2 = list(c_block2);
     return block1([], [b2]);
   }
@@ -334,7 +441,7 @@ exports[`list of components switch component position 1`] = `
 exports[`list of components switch component position 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -348,22 +455,34 @@ exports[`list of components switch component position 2`] = `
 exports[`list of components t-foreach with t-component, and update 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(2));;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`n\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(Array(2));;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`n\`] = v_block4[i1];
       ctx[\`n_index\`] = i1;
       const key1 = ctx['n_index'];
-      c_block2[i1] = withKey(component(\`Child\`, {val: ctx['n_index']}, key + \`__1__\${key1}\`, node, ctx), key1);
+      const b6 = text(\`
+ \`);
+      const b7 = comp1({val: ctx['n_index']}, key + \`__1__\${key1}\`, node, this, null);
+      const b8 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -371,14 +490,20 @@ exports[`list of components t-foreach with t-component, and update 1`] = `
 exports[`list of components t-foreach with t-component, and update 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
+  let block3 = createBlock(\`<span>
+ <block-text-0/>
+ <block-text-1/>
+ </span>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     let txt1 = ctx['state'].val;
     let txt2 = ctx['props'].val;
-    return block1([txt1, txt2]);
+    const b3 = block3([txt1, txt2]);
+    return multi([b2, b3]);
   }
 }"
 `;

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

@@ -3,10 +3,13 @@
 exports[`t-key t-foreach with t-key switch component position 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  let block1 = createBlock(\`<span>
+ <block-child-0/>
+ </span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -14,9 +17,15 @@ 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'];
-      c_block2[i1] = withKey(component(\`Child\`, {key: ctx['c']+ctx['key1']}, tKey_1 + key + \`__1__\${key1}\`, node, ctx), tKey_1 + key1);
+      const b5 = toggler(tKey_1, comp1({key: ctx['c']+ctx['key1']}, tKey_1 + key + \`__1__\${key1}\`, node, this, null));
+      const b6 = text(\`
+ \`);
+      c_block2[i1] = withKey(multi([b4, b5, b6]), key1);
     }
+    ctx = ctx.__proto__;
     const b2 = list(c_block2);
     return block1([], [b2]);
   }
@@ -26,7 +35,7 @@ exports[`t-key t-foreach with t-key switch component position 1`] = `
 exports[`t-key t-foreach with t-key switch component position 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -40,11 +49,12 @@ exports[`t-key t-foreach with t-key switch component position 2`] = `
 exports[`t-key t-key on Component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
-    return toggler(tKey_1, component(\`Child\`, {key: ctx['key']}, tKey_1 + key + \`__1\`, node, ctx));
+    return toggler(tKey_1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, this, null));
   }
 }"
 `;
@@ -52,7 +62,7 @@ exports[`t-key t-key on Component 1`] = `
 exports[`t-key t-key on Component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -66,13 +76,14 @@ exports[`t-key t-key on Component 2`] = `
 exports[`t-key t-key on Component as a function 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
-    const b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key']}, tKey_1 + key + \`__1\`, node, ctx));
+    const b2 = toggler(tKey_1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, this, null));
     return block1([], [b2]);
   }
 }"
@@ -81,7 +92,7 @@ exports[`t-key t-key on Component as a function 1`] = `
 exports[`t-key t-key on Component as a function 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -95,15 +106,20 @@ exports[`t-key t-key on Component as a function 2`] = `
 exports[`t-key t-key on multiple Components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  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);
   
-  let block1 = createBlock(\`<span><block-child-0/><block-child-1/></span>\`);
+  let block1 = createBlock(\`<span>
+ <block-child-0/>
+ <block-child-1/>
+ </span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key1'];
-    const b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key1']}, tKey_1 + key + \`__1\`, node, ctx));
+    const b2 = toggler(tKey_1, comp1({key: ctx['key1']}, tKey_1 + key + \`__1\`, node, this, null));
     const tKey_2 = ctx['key2'];
-    const b3 = toggler(tKey_2, component(\`Child\`, {key: ctx['key2']}, tKey_2 + key + \`__2\`, node, ctx));
+    const b3 = toggler(tKey_2, comp2({key: ctx['key2']}, tKey_2 + key + \`__2\`, node, this, null));
     return block1([], [b2, b3]);
   }
 }"
@@ -112,7 +128,7 @@ exports[`t-key t-key on multiple Components 1`] = `
 exports[`t-key t-key on multiple Components 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -126,12 +142,15 @@ exports[`t-key t-key on multiple Components 2`] = `
 exports[`t-key t-key on multiple Components with t-call 1 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`calledTemplate\`);
   const callTemplate_2 = app.getTemplate(\`calledTemplate\`);
   
-  let block1 = createBlock(\`<span><block-child-0/><block-child-1/></span>\`);
+  let block1 = createBlock(\`<span>
+ <block-child-0/>
+ <block-child-1/>
+ </span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -145,6 +164,7 @@ 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]);
   }
 }"
@@ -153,11 +173,17 @@ exports[`t-key t-key on multiple Components with t-call 1 1`] = `
 exports[`t-key t-key on multiple Components with t-call 1 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     const tKey_1 = ctx['key'];
-    return toggler(tKey_1, component(\`Child\`, {key: ctx['key']}, tKey_1 + key + \`__1\`, node, ctx));
+    const b3 = toggler(tKey_1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, this, null));
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -165,7 +191,7 @@ exports[`t-key t-key on multiple Components with t-call 1 2`] = `
 exports[`t-key t-key on multiple Components with t-call 1 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -179,10 +205,12 @@ exports[`t-key t-key on multiple Components with t-call 1 3`] = `
 exports[`t-key t-key on multiple Components with t-call 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`calledTemplate\`);
   
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  let block1 = createBlock(\`<span>
+ <block-child-0/>
+ </span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
@@ -194,14 +222,20 @@ exports[`t-key t-key on multiple Components with t-call 2 1`] = `
 exports[`t-key t-key on multiple Components with t-call 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  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 b2 = text(\`
+ \`);
     const tKey_1 = ctx['key1'];
-    const b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key1']}, tKey_1 + key + \`__1\`, node, ctx));
+    const b3 = toggler(tKey_1, comp1({key: ctx['key1']}, tKey_1 + key + \`__1\`, node, this, null));
     const tKey_2 = ctx['key2'];
-    const b3 = toggler(tKey_2, component(\`Child\`, {key: ctx['key2']}, tKey_2 + key + \`__2\`, node, ctx));
-    return multi([b2, b3]);
+    const b4 = toggler(tKey_2, comp2({key: ctx['key2']}, tKey_2 + key + \`__2\`, node, this, null));
+    const b5 = text(\`
+ \`);
+    return multi([b2, b3, b4, b5]);
   }
 }"
 `;
@@ -209,7 +243,7 @@ exports[`t-key t-key on multiple Components with t-call 2 2`] = `
 exports[`t-key t-key on multiple Components with t-call 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   

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

@@ -3,18 +3,26 @@
 exports[`t-model directive .lazy modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"change\\"/><span><block-text-2/></span></div>\`);
+  let block3 = createBlock(\`<div>
+ <input block-attribute-0=\\"value\\" block-handler-1=\\"change\\"/>
+ <span><block-text-2/></span>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].text;
-    return block1([attr1, hdlr1, txt1]);
+    const b3 = block3([attr1, hdlr1, txt1]);
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -22,18 +30,26 @@ exports[`t-model directive .lazy modifier 1`] = `
 exports[`t-model directive .number modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block3 = createBlock(\`<div>
+ <input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
+ <span><block-text-2/></span>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     const bExpr1 = ctx['state'];
     const expr1 = 'number';
     let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = toNumber(ev.target.value); }];
     let txt1 = ctx['state'].number;
-    return block1([attr1, hdlr1, txt1]);
+    const b3 = block3([attr1, hdlr1, txt1]);
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -41,18 +57,26 @@ exports[`t-model directive .number modifier 1`] = `
 exports[`t-model directive .trim modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block3 = createBlock(\`<div>
+ <input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
+ <span><block-text-2/></span>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value.trim(); }];
     let txt1 = ctx['state'].text;
-    return block1([attr1, hdlr1, txt1]);
+    const b3 = block3([attr1, hdlr1, txt1]);
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -60,18 +84,24 @@ exports[`t-model directive .trim modifier 1`] = `
 exports[`t-model directive basic use, on an input 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block3 = createBlock(\`<div>
+ <input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
+ <span><block-text-2/></span>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].text;
-    return block1([attr1, hdlr1, txt1]);
+    const b3 = block3([attr1, hdlr1, txt1]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -79,18 +109,24 @@ exports[`t-model directive basic use, on an input 1`] = `
 exports[`t-model directive basic use, on an input with bracket expression 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block3 = createBlock(\`<div>
+ <input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
+ <span><block-text-2/></span>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].text;
-    return block1([attr1, hdlr1, txt1]);
+    const b3 = block3([attr1, hdlr1, txt1]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -98,10 +134,13 @@ exports[`t-model directive basic use, on an input with bracket expression 1`] =
 exports[`t-model directive basic use, on another key in component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div>
+ <input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
+ <span><block-text-2/></span>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['some'];
@@ -117,18 +156,25 @@ exports[`t-model directive basic use, on another key in component 1`] = `
 exports[`t-model directive can also define t-on directive on same event, part 1 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-handler-0=\\"input\\" block-attribute-1=\\"value\\" block-handler-2=\\"input\\"/></div>\`);
+  let block3 = createBlock(\`<div>
+ <input block-handler-0=\\"input\\" block-attribute-1=\\"value\\" block-handler-2=\\"input\\"/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     let hdlr1 = [ctx['onInput'], ctx];
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let attr1 = bExpr1[expr1];
     let hdlr2 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    return block1([hdlr1, attr1, hdlr2]);
+    const b3 = block3([hdlr1, attr1, hdlr2]);
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -136,12 +182,18 @@ exports[`t-model directive can also define t-on directive on same event, part 1
 exports[`t-model directive can also define t-on directive on same event, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  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>\`);
+  let block3 = createBlock(\`<div>
+ <input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-handler-0=\\"click\\" block-attribute-1=\\"checked\\" block-handler-2=\\"click\\"/>
+ <input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-handler-3=\\"click\\" block-attribute-4=\\"checked\\" block-handler-5=\\"click\\"/>
+ <input type=\\"radio\\" id=\\"three\\" value=\\"Three\\" block-handler-6=\\"click\\" block-attribute-7=\\"checked\\" block-handler-8=\\"click\\"/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     let hdlr1 = [ctx['onClick'], ctx];
     const bExpr1 = ctx['state'];
     const expr1 = 'choice';
@@ -157,7 +209,10 @@ 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; }];
-    return block1([hdlr1, attr1, hdlr2, hdlr3, attr2, hdlr4, hdlr5, attr3, hdlr6]);
+    const b3 = block3([hdlr1, attr1, hdlr2, hdlr3, attr2, hdlr4, hdlr5, attr3, hdlr6]);
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -165,20 +220,28 @@ exports[`t-model directive can also define t-on directive on same event, part 2
 exports[`t-model directive following a scope protecting directive (e.g. t-set) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     setContextValue(ctx, \\"admiral\\", 'Bruno');
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    return block1([attr1, hdlr1]);
+    const b3 = block3([attr1, hdlr1]);
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -186,26 +249,39 @@ exports[`t-model directive following a scope protecting directive (e.g. t-set) 1
 exports[`t-model directive in a t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, toNumber, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\" block-handler-1=\\"input\\"/>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </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_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`thing\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`thing\`] = v_block4[i1];
       const 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; }];
-      c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
+      const b7 = block7([attr1, hdlr1]);
+      const b8 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    const b9 = text(\`
+ \`);
+    return multi([b2, b3, b9]);
   }
 }"
 `;
@@ -213,27 +289,40 @@ exports[`t-model directive in a t-foreach 1`] = `
 exports[`t-model directive in a t-foreach, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, toNumber, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </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_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`thing\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`thing\`] = v_block4[i1];
       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; }];
-      c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
+      const b7 = block7([attr1, hdlr1]);
+      const b8 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    const b9 = text(\`
+ \`);
+    return multi([b2, b3, b9]);
   }
 }"
 `;
@@ -241,27 +330,40 @@ exports[`t-model directive in a t-foreach, part 2 1`] = `
 exports[`t-model directive in a t-foreach, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, toNumber, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </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_block2, v_block2, l_block2, c_block2] = prepareList(ctx['names']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`name\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['names']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`name\`] = v_block4[i1];
       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; }];
-      c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
+      const b7 = block7([attr1, hdlr1]);
+      const b8 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    const b9 = text(\`
+ \`);
+    return multi([b2, b3, b9]);
   }
 }"
 `;
@@ -269,10 +371,17 @@ exports[`t-model directive in a t-foreach, part 3 1`] = `
 exports[`t-model directive on a select 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><select block-attribute-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"\\">Please select one</option><option value=\\"red\\">Red</option><option value=\\"blue\\">Blue</option></select><span>Choice: <block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div>
+ <select block-attribute-0=\\"value\\" block-handler-1=\\"change\\">
+ <option value=\\"\\">Please select one</option>
+ <option value=\\"red\\">Red</option>
+ <option value=\\"blue\\">Blue</option>
+ </select>
+ <span>Choice: <block-text-2/></span>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
@@ -288,17 +397,28 @@ exports[`t-model directive on a select 1`] = `
 exports[`t-model directive on a select, initial state 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><select block-attribute-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"\\">Please select one</option><option value=\\"red\\">Red</option><option value=\\"blue\\">Blue</option></select></div>\`);
+  let block3 = createBlock(\`<div>
+ <select block-attribute-0=\\"value\\" block-handler-1=\\"change\\">
+ <option value=\\"\\">Please select one</option>
+ <option value=\\"red\\">Red</option>
+ <option value=\\"blue\\">Blue</option>
+ </select>
+ </div>\`);
   
   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; }];
-    return block1([attr1, hdlr1]);
+    const b3 = block3([attr1, hdlr1]);
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -306,18 +426,26 @@ exports[`t-model directive on a select, initial state 1`] = `
 exports[`t-model directive on a sub state key 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block3 = createBlock(\`<div>
+ <input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
+ <span><block-text-2/></span>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     const bExpr1 = ctx['state'].something;
     const expr1 = 'text';
     let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].something.text;
-    return block1([attr1, hdlr1, txt1]);
+    const b3 = block3([attr1, hdlr1, txt1]);
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -325,10 +453,14 @@ exports[`t-model directive on a sub state key 1`] = `
 exports[`t-model directive on an input type=radio 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/><span>Choice: <block-text-4/></span></div>\`);
+  let block1 = createBlock(\`<div>
+ <input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\"/>
+ <input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/>
+ <span>Choice: <block-text-4/></span>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
@@ -348,10 +480,13 @@ exports[`t-model directive on an input type=radio 1`] = `
 exports[`t-model directive on an input type=radio, with initial value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/></div>\`);
+  let block1 = createBlock(\`<div>
+ <input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\"/>
+ <input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
@@ -370,10 +505,15 @@ exports[`t-model directive on an input type=radio, with initial value 1`] = `
 exports[`t-model directive on an input, type=checkbox 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input type=\\"checkbox\\" block-attribute-0=\\"checked\\" block-handler-1=\\"input\\"/><span><block-child-0/><block-child-1/></span></div>\`);
+  let block1 = createBlock(\`<div>
+ <input type=\\"checkbox\\" block-attribute-0=\\"checked\\" block-handler-1=\\"input\\"/>
+ <span>
+ <block-child-0/><block-child-1/>
+ </span>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -394,10 +534,13 @@ exports[`t-model directive on an input, type=checkbox 1`] = `
 exports[`t-model directive on an textarea 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><textarea block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div>
+ <textarea block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
+ <span><block-text-2/></span>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
@@ -413,7 +556,7 @@ exports[`t-model directive on an textarea 1`] = `
 exports[`t-model directive t-model on an input with an undefined value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
   let block1 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
@@ -431,12 +574,20 @@ exports[`t-model directive t-model on an input with an undefined value 1`] = `
 exports[`t-model directive t-model on select with static options 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><select block-attribute-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"a\\"><block-text-2/></option><option value=\\"b\\"><block-text-3/></option><option value=\\"c\\"><block-text-4/></option></select></div>\`);
+  let block3 = createBlock(\`<div>
+ <select block-attribute-0=\\"value\\" block-handler-1=\\"change\\">
+ <option value=\\"a\\"><block-text-2/></option>
+ <option value=\\"b\\"><block-text-3/></option>
+ <option value=\\"c\\"><block-text-4/></option>
+ </select>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     const bExpr1 = ctx['state'];
     const expr1 = 'model';
     let attr1 = bExpr1[expr1];
@@ -444,7 +595,10 @@ exports[`t-model directive t-model on select with static options 1`] = `
     let txt1 = 'a';
     let txt2 = 'b';
     let txt3 = 'c';
-    return block1([attr1, hdlr1, txt1, txt2, txt3]);
+    const b3 = block3([attr1, hdlr1, txt1, txt2, txt3]);
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -452,12 +606,19 @@ exports[`t-model directive t-model on select with static options 1`] = `
 exports[`t-model directive t-model with dynamic values on select options -- 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  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>\`);
+  let block3 = createBlock(\`<div>
+ <select block-handler-0=\\"change\\">
+ <option block-attribute-1=\\"value\\" block-attribute-2=\\"selected\\"><block-text-3/></option>
+ <option block-attribute-4=\\"value\\" block-attribute-5=\\"selected\\"><block-text-6/></option>
+ </select>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     const bExpr1 = ctx['state'];
     const expr1 = 'model';
     const bValue1 = bExpr1[expr1];
@@ -468,7 +629,10 @@ 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];
-    return block1([hdlr1, attr1, attr2, txt1, attr3, attr4, txt2]);
+    const b3 = block3([hdlr1, attr1, attr2, txt1, attr3, attr4, txt2]);
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -476,12 +640,19 @@ exports[`t-model directive t-model with dynamic values on select options -- 2 1`
 exports[`t-model directive t-model with dynamic values on select options -- 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  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>\`);
+  let block3 = createBlock(\`<div>
+ <select block-handler-0=\\"change\\">
+ <option block-attribute-1=\\"value\\" block-attribute-2=\\"selected\\"><block-text-3/></option>
+ <option value=\\"b\\" block-attribute-4=\\"selected\\"><block-text-5/></option>
+ </select>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     const bExpr1 = ctx['state'];
     const expr1 = 'model';
     const bValue1 = bExpr1[expr1];
@@ -491,7 +662,10 @@ 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];
-    return block1([hdlr1, attr1, attr2, txt1, attr3, txt2]);
+    const b3 = block3([hdlr1, attr1, attr2, txt1, attr3, txt2]);
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -499,12 +673,19 @@ exports[`t-model directive t-model with dynamic values on select options -- 3 1`
 exports[`t-model directive t-model with dynamic values on select options 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  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>\`);
+  let block3 = createBlock(\`<div>
+ <select block-handler-0=\\"change\\">
+ <option block-attribute-1=\\"value\\" block-attribute-2=\\"selected\\"><block-text-3/></option>
+ <option block-attribute-4=\\"value\\" block-attribute-5=\\"selected\\"><block-text-6/></option>
+ </select>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     const bExpr1 = ctx['state'];
     const expr1 = 'model';
     const bValue1 = bExpr1[expr1];
@@ -515,7 +696,10 @@ 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];
-    return block1([hdlr1, attr1, attr2, txt1, attr3, attr4, txt2]);
+    const b3 = block3([hdlr1, attr1, attr2, txt1, attr3, attr4, txt2]);
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -523,29 +707,44 @@ exports[`t-model directive t-model with dynamic values on select options 1`] = `
 exports[`t-model directive t-model with dynamic values on select options in foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber, prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><select block-handler-0=\\"change\\"><block-child-0/></select></div>\`);
-  let block3 = createBlock(\`<option block-attribute-0=\\"value\\" block-attribute-1=\\"selected\\"><block-text-2/></option>\`);
+  let block3 = createBlock(\`<div>
+ <select block-handler-0=\\"change\\">
+ <block-child-0/>
+ </select>
+ </div>\`);
+  let block7 = createBlock(\`<option block-attribute-0=\\"value\\" block-attribute-1=\\"selected\\"><block-text-2/></option>\`);
   
   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_block2, v_block2, l_block2, c_block2] = prepareList(ctx['options']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`v\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['options']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`v\`] = v_block4[i1];
       const key1 = ctx['v'];
+      const b6 = text(\`
+ \`);
       let attr1 = ctx['v'];
       let attr2 = bValue1 === ctx['v'];
       let txt1 = ctx['v'];
-      c_block2[i1] = withKey(block3([attr1, attr2, txt1]), key1);
+      const b7 = block7([attr1, attr2, txt1]);
+      const b8 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([hdlr1], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([hdlr1], [b4]);
+    const b9 = text(\`
+ \`);
+    return multi([b2, b3, b9]);
   }
 }"
 `;
@@ -553,30 +752,38 @@ exports[`t-model directive t-model with dynamic values on select options in fore
 exports[`t-model directive two inputs in a div alternating with a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
-  let block2 = createBlock(\`<input class=\\"a\\" block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
-  let block3 = createBlock(\`<input class=\\"b\\" block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ <block-child-1/>
+ </div>\`);
+  let block4 = createBlock(\`<input class=\\"a\\" block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
+  let block5 = createBlock(\`<input class=\\"b\\" block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    const b2 = text(\`
+ \`);
+    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; }];
-      b2 = block2([attr1, hdlr1]);
+      b4 = block4([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; }];
-      b3 = block3([attr2, hdlr2]);
+      b5 = block5([attr2, hdlr2]);
     }
-    return block1([], [b2, b3]);
+    const b3 = block3([], [b4, b5]);
+    const b6 = text(\`
+ \`);
+    return multi([b2, b3, b6]);
   }
 }"
 `;
@@ -584,18 +791,26 @@ exports[`t-model directive two inputs in a div alternating with a t-if 1`] = `
 exports[`t-model directive with expression having a changing key 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block3 = createBlock(\`<div>
+ <input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>
+ <span><block-text-2/></span>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     const bExpr1 = ctx['state'].something;
     const expr1 = ctx['text'].key;
     let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].something[ctx['text'].key];
-    return block1([attr1, hdlr1, txt1]);
+    const b3 = block3([attr1, hdlr1, txt1]);
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;

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

@@ -3,29 +3,41 @@
 exports[`t-on t-on expression captured in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<div><button block-handler-0=\\"click\\">expr</button></div>\`);
+  let block3 = createBlock(\`<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_block2, v_block2, l_block2, c_block2] = prepareList(ctx['arr']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['arr']);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`val\`] = v_block4[i1];
       const 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_block2[i1] = withKey(block3([hdlr1]), key1);
+      c_block4[i1] = withKey(block5([hdlr1]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    const b6 = text(\`
+ \`);
+    return multi([b2, b3, b6]);
   }
 }"
 `;
@@ -33,17 +45,24 @@ exports[`t-on t-on expression captured in t-foreach 1`] = `
 exports[`t-on t-on expression in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  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>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
+  let block5 = createBlock(\`<div>
+ <block-text-0/>: <block-text-1/>
+ <button block-handler-2=\\"click\\">Expr</button>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].values);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`val\`] = v_block4[i1];
       ctx[\`val_index\`] = i1;
       const key1 = ctx['val'];
       let txt1 = ctx['val_index'];
@@ -51,10 +70,14 @@ 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_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
+      c_block4[i1] = withKey(block5([txt1, txt2, hdlr1]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    const b6 = text(\`
+ \`);
+    return multi([b2, b3, b6]);
   }
 }"
 `;
@@ -62,20 +85,29 @@ exports[`t-on t-on expression in t-foreach 1`] = `
 exports[`t-on t-on expression in t-foreach with t-set 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   
-  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>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <block-child-0/>
+ </div>\`);
+  let block5 = createBlock(\`<div>
+ 
+ <block-text-0/>: <block-text-1/>
+ <button block-handler-2=\\"click\\">Expr</button>
+ </div>\`);
   
   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_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].values);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`val\`] = v_block4[i1];
       ctx[\`val_index\`] = i1;
       const key1 = ctx['val'];
       setContextValue(ctx, \\"bossa\\", ctx['bossa']+'_'+ctx['val_index']);
@@ -85,10 +117,14 @@ 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_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
+      c_block4[i1] = withKey(block5([txt1, txt2, hdlr1]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    const b6 = text(\`
+ \`);
+    return multi([b2, b3, b6]);
   }
 }"
 `;
@@ -96,27 +132,38 @@ exports[`t-on t-on expression in t-foreach with t-set 1`] = `
 exports[`t-on t-on method call in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<div><block-text-0/>: <block-text-1/><button block-handler-2=\\"click\\">meth call</button></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
+  let block5 = createBlock(\`<div>
+ <block-text-0/>: <block-text-1/>
+ <button block-handler-2=\\"click\\">meth call</button>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`val\`] = v_block2[i1];
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].values);;
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`val\`] = v_block4[i1];
       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_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
+      c_block4[i1] = withKey(block5([txt1, txt2, hdlr1]), key1);
     }
-    const b2 = list(c_block2);
-    return block1([], [b2]);
+    ctx = ctx.__proto__;
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    const b6 = text(\`
+ \`);
+    return multi([b2, b3, b6]);
   }
 }"
 `;
@@ -124,17 +171,24 @@ exports[`t-on t-on method call in t-foreach 1`] = `
 exports[`t-on t-on on component next to t-on on div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { createCatcher } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   const catcher1 = createCatcher({\\"click\\":0});
   
-  let block1 = createBlock(\`<div><block-child-0/><p block-handler-0=\\"click\\">dec</p></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ <p block-handler-0=\\"click\\">dec</p>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     const hdlr1 = [ctx['increment'], ctx];
-    const b2 = catcher1(component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx), [hdlr1]);
+    const b4 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
     let hdlr2 = [ctx['decrement'], ctx];
-    return block1([hdlr2], [b2]);
+    const b3 = block3([hdlr2], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -142,7 +196,7 @@ exports[`t-on t-on on component next to t-on on div 1`] = `
 exports[`t-on t-on on component next to t-on on div 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button><block-text-0/></button>\`);
   
@@ -156,13 +210,14 @@ exports[`t-on t-on on component next to t-on on div 2`] = `
 exports[`t-on t-on on components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { createCatcher } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   const catcher1 = createCatcher({\\"click\\":0});
   
   return function template(ctx, node, key = \\"\\") {
     const hdlr1 = [ctx['increment'], ctx];
-    return catcher1(component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx), [hdlr1]);
+    return catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
   }
 }"
 `;
@@ -170,7 +225,7 @@ exports[`t-on t-on on components 1`] = `
 exports[`t-on t-on on components 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button><block-text-0/></button>\`);
   
@@ -184,21 +239,30 @@ exports[`t-on t-on on components 2`] = `
 exports[`t-on t-on on components and t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, createCatcher, withKey } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   const catcher1 = createCatcher({\\"click\\":0});
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(['John','Raoul','Gérald']);;
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`name\`] = v_block1[i1];
+    const [k_block3, v_block3, l_block3, c_block3] = prepareList(['John','Raoul','Gérald']);;
+    for (let i1 = 0; i1 < l_block3; i1++) {
+      ctx[\`name\`] = v_block3[i1];
       const key1 = ctx['name'];
+      const b5 = text(\`
+ \`);
       const v1 = ctx['name'];
       const hdlr1 = [()=>this.log(v1), ctx];
-      c_block1[i1] = withKey(catcher1(component(\`Child\`, {value: ctx['name']}, key + \`__1__\${key1}\`, node, ctx), [hdlr1]), key1);
+      const b6 = catcher1(comp1({value: ctx['name']}, key + \`__1__\${key1}\`, node, this, null), [hdlr1]);
+      const b7 = text(\`
+ \`);
+      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
     }
-    return list(c_block1);
+    const b3 = list(c_block3);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -206,7 +270,7 @@ exports[`t-on t-on on components and t-foreach 1`] = `
 exports[`t-on t-on on components and t-foreach 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -220,16 +284,24 @@ exports[`t-on t-on on components and t-foreach 2`] = `
 exports[`t-on t-on on components, variation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { createCatcher } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   const catcher1 = createCatcher({\\"click\\":0});
   
-  let block1 = createBlock(\`<div><span/><block-child-0/><p/></div>\`);
+  let block3 = createBlock(\`<div>
+ <span/>
+ <block-child-0/>
+ <p/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     const hdlr1 = [ctx['increment'], ctx];
-    const b2 = catcher1(component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx), [hdlr1]);
-    return block1([], [b2]);
+    const b4 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -237,7 +309,7 @@ exports[`t-on t-on on components, variation 1`] = `
 exports[`t-on t-on on components, variation 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button><block-text-0/></button>\`);
   
@@ -251,13 +323,14 @@ exports[`t-on t-on on components, variation 2`] = `
 exports[`t-on t-on on components, with 'prevent' modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { createCatcher } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   const catcher1 = createCatcher({\\"click.prevent\\":0});
   
   return function template(ctx, node, key = \\"\\") {
     const hdlr1 = [\\"prevent\\", ctx['increment'], ctx];
-    return catcher1(component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx), [hdlr1]);
+    return catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
   }
 }"
 `;
@@ -265,7 +338,7 @@ exports[`t-on t-on on components, with 'prevent' modifier 1`] = `
 exports[`t-on t-on on components, with 'prevent' modifier 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button><block-text-0/></button>\`);
   
@@ -279,17 +352,23 @@ exports[`t-on t-on on components, with 'prevent' modifier 2`] = `
 exports[`t-on t-on on components, with a handler update 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, createCatcher } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   const catcher1 = createCatcher({\\"click\\":0});
   
   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];
-    return catcher1(component(\`Child\`, {value: ctx['name']}, key + \`__1\`, node, ctx), [hdlr1]);
+    const b4 = catcher1(comp1({value: ctx['name']}, key + \`__1\`, node, this, null), [hdlr1]);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -297,7 +376,7 @@ exports[`t-on t-on on components, with a handler update 1`] = `
 exports[`t-on t-on on components, with a handler update 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -311,14 +390,15 @@ exports[`t-on t-on on components, with a handler update 2`] = `
 exports[`t-on t-on on destroyed components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2]);
   }
@@ -328,7 +408,7 @@ exports[`t-on t-on on destroyed components 1`] = `
 exports[`t-on t-on on destroyed components 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-handler-0=\\"click\\"/>\`);
   
@@ -342,17 +422,26 @@ exports[`t-on t-on on destroyed components 2`] = `
 exports[`t-on t-on on slot, with 'prevent' modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
-  let block1 = createBlock(\`<button>button</button>\`);
+  let block5 = createBlock(\`<button>button</button>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return block1();
+    const b4 = text(\`
+ \`);
+    const b5 = block5();
+    const b6 = text(\`
+ \`);
+    return multi([b4, b5, b6]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, ctx);
+    const b2 = text(\`
+ \`);
+    const b7 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return multi([b2, b7]);
   }
 }"
 `;
@@ -360,7 +449,7 @@ exports[`t-on t-on on slot, with 'prevent' modifier 1`] = `
 exports[`t-on t-on on slot, with 'prevent' modifier 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot, createCatcher } = helpers;
   const catcher1 = createCatcher({\\"click.prevent\\":0});
   
@@ -374,27 +463,44 @@ exports[`t-on t-on on slot, with 'prevent' modifier 2`] = `
 exports[`t-on t-on on t-set-slots 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, createCatcher, markRaw } = helpers;
   const catcher1 = createCatcher({\\"click\\":0});
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
-  let block6 = createBlock(\`<p>something</p>\`);
-  let block7 = createBlock(\`<p>paragraph</p>\`);
+  let block7 = createBlock(\`<p>something</p>\`);
+  let block9 = createBlock(\`<p>paragraph</p>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    const b6 = block6();
+    const b6 = text(\`
+ \`);
     const b7 = block7();
+    const b8 = text(\`
+ \`);
+    const b9 = block9();
+    const b10 = text(\`
+ \`);
     const hdlr1 = [()=>this.state.count++, ctx];
-    return catcher1(multi([b6, b7]), [hdlr1]);
+    return catcher1(multi([b6, b7, b8, b9, b10]), [hdlr1]);
+  }
+  
+  function slot2(ctx, node, key = \\"\\") {
+    const b12 = text(\`
+ \`);
+    const b13 = text(\`
+ \`);
+    return multi([b12, b13]);
   }
   
   return 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 b8 = component(\`Child\`, {slots: markRaw({'myslot': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, ctx);
-    return multi([b2, b3, b4, b8]);
+    const b14 = comp1({slots: markRaw({'myslot': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    return multi([b2, b3, b4, b14]);
   }
 }"
 `;
@@ -402,7 +508,7 @@ exports[`t-on t-on on t-set-slots 1`] = `
 exports[`t-on t-on on t-set-slots 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
@@ -414,17 +520,26 @@ exports[`t-on t-on on t-set-slots 2`] = `
 exports[`t-on t-on on t-slots 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
-  let block1 = createBlock(\`<p>something</p>\`);
+  let block5 = createBlock(\`<p>something</p>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return block1();
+    const b4 = text(\`
+ \`);
+    const b5 = block5();
+    const b6 = text(\`
+ \`);
+    return multi([b4, b5, b6]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, ctx);
+    const b2 = text(\`
+ \`);
+    const b7 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return multi([b2, b7]);
   }
 }"
 `;
@@ -432,14 +547,16 @@ exports[`t-on t-on on t-slots 1`] = `
 exports[`t-on t-on on t-slots 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot, createCatcher } = helpers;
   const catcher1 = createCatcher({\\"click\\":0});
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\` [\`);
+    const b2 = text(\`
+ [\`);
     const b3 = text(ctx['state'].count);
-    const b4 = text(\`] \`);
+    const b4 = text(\`]
+ \`);
     const hdlr1 = [()=>this.state.count++, ctx];
     const b5 = catcher1(callSlot(ctx, node, key, 'default', false, {}), [hdlr1]);
     return multi([b2, b3, b4, b5]);

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

@@ -3,13 +3,21 @@
 exports[`t-props basic use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, true, false);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, Object.assign({}, ctx['some'].obj), key + \`__1\`, node, ctx);
-    return block1([], [b2]);
+    const b2 = text(\`
+ \`);
+    const b4 = comp1(Object.assign({}, ctx['some'].obj), key + \`__1\`, node, this, null);
+    const b3 = block3([], [b4]);
+    const b5 = text(\`
+ \`);
+    return multi([b2, b3, b5]);
   }
 }"
 `;
@@ -17,13 +25,20 @@ exports[`t-props basic use 1`] = `
 exports[`t-props basic use 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  let block3 = createBlock(\`<span>
+ <block-text-0/>
+ </span>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     let txt1 = ctx['props'].a+ctx['props'].b;
-    return block1([txt1]);
+    const b3 = block3([txt1]);
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
@@ -31,10 +46,11 @@ exports[`t-props basic use 2`] = `
 exports[`t-props child receives a copy of the t-props object, not the original 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, true, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, Object.assign({}, ctx['childProps']), key + \`__1\`, node, ctx);
+    return comp1(Object.assign({}, ctx['childProps']), key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -42,7 +58,7 @@ exports[`t-props child receives a copy of the t-props object, not the original 1
 exports[`t-props child receives a copy of the t-props object, not the original 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -55,12 +71,13 @@ exports[`t-props child receives a copy of the t-props object, not the original 2
 exports[`t-props t-props and other props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Comp\`, true, false, true, false);
   
   let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Comp\`, Object.assign({}, ctx['state1'], {a: ctx['a']}), key + \`__1\`, node, ctx);
+    const b2 = comp1(Object.assign({}, ctx['state1'], {a: ctx['a']}), key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -69,7 +86,7 @@ exports[`t-props t-props and other props 1`] = `
 exports[`t-props t-props and other props 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
   
@@ -84,12 +101,13 @@ exports[`t-props t-props and other props 2`] = `
 exports[`t-props t-props only 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Comp\`, true, false, true, false);
   
   let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Comp\`, Object.assign({}, ctx['state']), key + \`__1\`, node, ctx);
+    const b2 = comp1(Object.assign({}, ctx['state']), key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -98,7 +116,7 @@ exports[`t-props t-props only 1`] = `
 exports[`t-props t-props only 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
@@ -112,13 +130,21 @@ exports[`t-props t-props only 2`] = `
 exports[`t-props t-props with props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, true, false);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, Object.assign({}, ctx['childProps'], {a: 1,b: 2}), key + \`__1\`, node, ctx);
-    return block1([], [b2]);
+    const b2 = text(\`
+ \`);
+    const b4 = comp1(Object.assign({}, ctx['childProps'], {a: 1,b: 2}), key + \`__1\`, node, this, null);
+    const b3 = block3([], [b4]);
+    const b5 = text(\`
+ \`);
+    return multi([b2, b3, b5]);
   }
 }"
 `;
@@ -126,7 +152,7 @@ exports[`t-props t-props with props 1`] = `
 exports[`t-props t-props with props 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   

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

@@ -3,27 +3,40 @@
 exports[`t-set slot setted value (with t-set) not accessible with t-esc 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, capture, markRaw } = helpers;
+  const comp1 = app.createComponent(\`Childcomp\`, true, true, false, true);
   
-  let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <p><block-text-0/></p>
+ <block-child-0/>
+ <p><block-text-1/></p>
+ </div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b5 = text(\`
+ \`);
     setContextValue(ctx, \\"iter\\", 'inCall');
-  return text('');
+    const b6 = 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 b2 = component(\`Childcomp\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, ctx);
+    const b7 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     let txt2 = ctx['iter'];
-    return block1([txt1, txt2], [b2]);
+    const b3 = block3([txt1, txt2], [b7]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -31,7 +44,7 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 1`] = `
 exports[`t-set slot setted value (with t-set) not accessible with t-esc 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
   let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
@@ -50,25 +63,41 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 2`] = `
 exports[`t-set slots with a t-set with a component in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, isBoundary, withDefault, LazyValue, safeOutput, markRaw } = helpers;
+  const comp1 = app.createComponent(\`C\`, true, false, false, true);
+  const comp2 = app.createComponent(\`Child\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, node);
-    const b3 = text(\` in slot \`);
-    const b4 = safeOutput(ctx['v']);
-    return multi([b3, b4]);
+    const b4 = text(\`
+ \`);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
+    const b9 = text(\`
+ in slot
+ \`);
+    const b10 = safeOutput(ctx['v']);
+    const b11 = text(\`
+ \`);
+    return multi([b4, b9, b10, b11]);
   }
   
   function value1(ctx, node, key = \\"\\") {
-    return component(\`C\`, {}, key + \`__1\`, node, ctx);
+    const b6 = text(\`
+ \`);
+    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);
-    return component(\`Child\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, ctx);
+    const b12 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    return multi([b2, b12]);
   }
 }"
 `;
@@ -76,7 +105,7 @@ exports[`t-set slots with a t-set with a component in body 1`] = `
 exports[`t-set slots with a t-set with a component in body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
@@ -90,7 +119,7 @@ exports[`t-set slots with a t-set with a component in body 2`] = `
 exports[`t-set slots with a t-set with a component in body 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`C\`);
@@ -101,29 +130,46 @@ exports[`t-set slots with a t-set with a component in body 3`] = `
 exports[`t-set slots with an t-set with a component in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, isBoundary, withDefault, LazyValue, safeOutput, markRaw } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(\`Blorg\`, true, true, false, true);
   
-  let block4 = createBlock(\`<div>coffee</div>\`);
+  let block9 = createBlock(\`<div>coffee</div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, node);
-    const b5 = text(\` tea \`);
-    const b6 = safeOutput(ctx['v']);
-    return multi([b5, b6]);
+    const b4 = text(\`
+ \`);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
+    const b11 = text(\`
+ tea
+ \`);
+    const b12 = safeOutput(ctx['v']);
+    const b13 = text(\`
+ \`);
+    return multi([b4, b11, b12, b13]);
   }
   
   function value1(ctx, node, key = \\"\\") {
-    const b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    const b4 = block4();
-    return multi([b3, b4]);
+    const b6 = text(\`
+ \`);
+    const b7 = comp1({}, key + \`__1\`, node, this, null);
+    const b8 = text(\`
+ \`);
+    const b9 = block9();
+    const b10 = text(\`
+ \`);
+    return multi([b6, b7, b8, b9, b10]);
   }
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     const ctx1 = capture(ctx);
-    return component(\`Blorg\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, ctx);
+    const b14 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    return multi([b2, b14]);
   }
 }"
 `;
@@ -131,7 +177,7 @@ exports[`t-set slots with an t-set with a component in body 1`] = `
 exports[`t-set slots with an t-set with a component in body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
@@ -145,7 +191,7 @@ exports[`t-set slots with an t-set with a component in body 2`] = `
 exports[`t-set slots with an t-set with a component in body 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`Child\`);
@@ -156,23 +202,38 @@ exports[`t-set slots with an t-set with a component in body 3`] = `
 exports[`t-set slots with an unused t-set with a component in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, isBoundary, withDefault, LazyValue, markRaw } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(\`Child\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, node);
-    return text(\` in slot \`);
+    const b4 = text(\`
+ \`);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
+    const b9 = text(\`
+ in slot
+ \`);
+    return multi([b4, b9]);
   }
   
   function value1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b6 = text(\`
+ \`);
+    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);
-    return component(\`Child\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, ctx);
+    const b10 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    return multi([b2, b10]);
   }
 }"
 `;
@@ -180,7 +241,7 @@ exports[`t-set slots with an unused t-set with a component in body 1`] = `
 exports[`t-set slots with an unused t-set with a component in body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
@@ -194,18 +255,25 @@ exports[`t-set slots with an unused t-set with a component in body 2`] = `
 exports[`t-set t-set can't alter component even if key in component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><p><block-text-0/></p><p><block-text-1/></p></div>\`);
+  let block3 = createBlock(\`<div>
+ <p><block-text-0/></p>
+ 
+ <p><block-text-1/></p>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     let txt1 = ctx['iter'];
     setContextValue(ctx, \\"iter\\", 5);
     let txt2 = ctx['iter'];
-    return block1([txt1, txt2]);
+    const b3 = block3([txt1, txt2]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -213,18 +281,25 @@ exports[`t-set t-set can't alter component even if key in component 1`] = `
 exports[`t-set t-set can't alter component if key not in component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><p><block-text-0/></p><p><block-text-1/></p></div>\`);
+  let block3 = createBlock(\`<div>
+ <p><block-text-0/></p>
+ 
+ <p><block-text-1/></p>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     let txt1 = ctx['iter'];
     setContextValue(ctx, \\"iter\\", 5);
     let txt2 = ctx['iter'];
-    return block1([txt1, txt2]);
+    const b3 = block3([txt1, txt2]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -232,24 +307,47 @@ exports[`t-set t-set can't alter component if key not in component 1`] = `
 exports[`t-set t-set in t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-child-0/><p><block-text-0/></p></div>\`);
+  let block3 = createBlock(\`<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'];
-    return block1([txt1]);
+    const b3 = block3([txt1], [b4, b7, b10]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -257,19 +355,28 @@ exports[`t-set t-set in t-if 1`] = `
 exports[`t-set t-set not altered by child comp 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
+  const comp1 = app.createComponent(\`Childcomp\`, true, false, false, true);
   
-  let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <p><block-text-0/></p>
+ <block-child-0/>
+ <p><block-text-1/></p>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     setContextValue(ctx, \\"iter\\", 'source');
     let txt1 = ctx['iter'];
-    const b2 = component(\`Childcomp\`, {}, key + \`__1\`, node, ctx);
+    const b4 = comp1({}, key + \`__1\`, node, this, null);
     let txt2 = ctx['iter'];
-    return block1([txt1, txt2], [b2]);
+    const b3 = block3([txt1, txt2], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -277,7 +384,7 @@ exports[`t-set t-set not altered by child comp 1`] = `
 exports[`t-set t-set not altered by child comp 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
   let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
@@ -296,25 +403,49 @@ exports[`t-set t-set not altered by child comp 2`] = `
 exports[`t-set t-set outside modified in t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-child-0/><p><block-text-0/></p></div>\`);
+  let block3 = createBlock(\`<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'];
-    return block1([txt1]);
+    const b3 = block3([txt1], [b4, b7, b10]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -322,21 +453,33 @@ exports[`t-set t-set outside modified in t-if 1`] = `
 exports[`t-set t-set with a component in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
-  let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <div><block-child-0/></div>
+ </div>\`);
   
   function value1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b5 = text(\`
+ \`);
+    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
-    ctx[\`v\`] = new LazyValue(value1, ctx, node);
-    const b3 = safeOutput(ctx['v']);
-    return block1([], [b3]);
+    const b2 = text(\`
+ \`);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
+    const b8 = safeOutput(ctx['v']);
+    const b3 = block3([], [b8]);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -344,7 +487,7 @@ exports[`t-set t-set with a component in body 1`] = `
 exports[`t-set t-set with a component in body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
     return text(\`Child\`);
@@ -355,22 +498,33 @@ exports[`t-set t-set with a component in body 2`] = `
 exports[`t-set t-set with something in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
   
-  let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
-  let block2 = createBlock(\`<p>coucou</p>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <div><block-child-0/></div>
+ </div>\`);
+  let block6 = createBlock(\`<p>coucou</p>\`);
   
   function value1(ctx, node, key = \\"\\") {
-    return block2();
+    const b5 = text(\`
+ \`);
+    const b6 = block6();
+    const b7 = text(\`
+ \`);
+    return multi([b5, b6, b7]);
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, node);
-    const b3 = safeOutput(ctx['v']);
-    return block1([], [b3]);
+    const b2 = text(\`
+ \`);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
+    const b8 = safeOutput(ctx['v']);
+    const b3 = block3([], [b8]);
+    return multi([b2, b3]);
   }
 }"
 `;

tests/components/basics.test.ts

@@ -121,7 +121,7 @@ describe("basics", () => {
     class Test extends Component {
       static template = xml`<span>simple vnode</span>`;
       setup() {
-        expect(toRaw(this.props)).toBe(p);
+        expect(toRaw(this.props)).not.toBe(p);
       }
     }
 
@@ -1084,4 +1084,25 @@ describe("t-out in components", () => {
     await nextTick();
     expect(fixture.innerHTML).toBe("<div>1</div><div>2</div>");
   });
+
+  test("t-out and updating falsy values, ", async () => {
+    class Test extends Component {
+      static template = xml`<t t-out="state.a"/>`;
+      state: any = useState({ a: 0 });
+    }
+
+    const comp = await mount(Test, fixture);
+    expect(fixture.innerHTML).toBe("0");
+    comp.state.a = undefined;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("");
+
+    comp.state.a = "hello";
+    await nextTick();
+    expect(fixture.innerHTML).toBe("hello");
+
+    comp.state.a = false;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("false");
+  });
 });

tests/components/t_call.test.ts

@@ -244,4 +244,47 @@ describe("t-call", () => {
     }
     expect(clickCount).toBe(2);
   });
+
+  test("t-call with t-call-context, simple use", async () => {
+    class Root extends Component {
+      static template = xml`
+          <t t-call="someTemplate" t-call-context="subctx"/>`;
+
+      subctx = { aab: "aaron", lpe: "lucas" };
+    }
+
+    await mount(Root, fixture, {
+      templates: `
+        <templates>
+          <t t-name="someTemplate"><t t-esc="aab"/><t t-esc="lpe"/></t>
+        </templates>`,
+    });
+    expect(fixture.innerHTML).toBe("aaronlucas");
+  });
+
+  test("t-call with t-call-context and subcomponent", async () => {
+    class Child extends Component {
+      static template = xml`child<t t-esc="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, {
+      templates: `
+        <templates>
+          <t t-name="someTemplate">
+            <Child name="aab"/>
+            <Child name="lpe"/>
+          </t>
+        </templates>`,
+    });
+    expect(fixture.innerHTML).toBe("childaaronchildlucas");
+  });
 });

tests/helpers.ts

@@ -91,7 +91,11 @@ export function renderToBdom(template: string, context: any = {}, node?: any): B
     snapshottedTemplates.add(template);
     expect(fn.toString()).toMatchSnapshot();
   }
-  return fn(null as any, blockDom, helpers)(context, node);
+  const app = {
+    createComponent() {},
+    createDynamicComponent() {},
+  };
+  return fn(app as any, blockDom, helpers)(context, node);
 }
 
 export function renderToString(template: string, context: any = {}, node?: any): string {

tests/validation.test.ts

@@ -248,4 +248,30 @@ describe("validateSchema", () => {
     expect(validateSchema({ size: "sall" }, schema)).toEqual(["'size' is not valid"]);
     expect(validateSchema({ size: 1 }, schema)).toEqual(["'size' is not a string"]);
   });
+
+  test("value as type", () => {
+    expect(validateSchema({ a: false }, { a: { value: false } })).toEqual([]);
+    expect(validateSchema({ a: true }, { a: { value: false } })).toEqual([
+      "'a' is not equal to 'false'",
+    ]);
+  });
+
+  test("value as type (some other values)", () => {
+    expect(validateSchema({ a: null }, { a: { value: null } })).toEqual([]);
+    expect(validateSchema({ a: false }, { a: { value: null } })).toEqual([
+      "'a' is not equal to 'null'",
+    ]);
+    expect(validateSchema({ a: "hey" }, { a: { value: "hey" } })).toEqual([]);
+    expect(validateSchema({ a: true }, { a: { value: "hey" } })).toEqual([
+      "'a' is not equal to 'hey'",
+    ]);
+  });
+
+  test("value as type work in union type", () => {
+    expect(validateSchema({ a: false }, { a: [String, { value: false }] })).toEqual([]);
+    expect(validateSchema({ a: true }, { a: [String, { value: false }] })).toEqual([
+      "'a' is not a string or false",
+    ]);
+    expect(validateSchema({ a: "string" }, { a: [String, { value: false }] })).toEqual([]);
+  });
 });