[IMP] hooks: add useRoots hook

closes #1260
[FIX] props validation: does not crash with t-call-context
2025-10-06 19:59:41 +07:00 · 2022-09-24 16:35:33 +02:00 · 2022-09-24 08:34:22 +02:00 · 2022-09-21 13:59:13 +02:00 · 2022-09-09 20:24:56 +02:00 · 2022-09-09 09:45:05 +02:00
106 changed files with 4904 additions and 2555 deletions
@@ -261,7 +261,12 @@ This comes from the fact that Owl 2 supports fragments (arbitrary content).
 Migration: if one need a reference to the root htmlelement of a template, it is
 suggested to simply add a `ref` on it, and access the reference as needed.

-Documentation: [Refs](doc/reference/refs.md)
+Another way to get access to a root node or html element is the hook `useRoots`
+
+Documentation: 
+- [Refs](doc/reference/refs.md)
+- [useRoots](doc/reference/hooks.md#useroots)
+

 ### 10. style/class on components are now regular props

@@ -124,5 +124,5 @@ npm install @odoo/owl

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

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

@@ -770,10 +770,11 @@ For reference, here is the final code:
    <meta charset="UTF-8" />
    <title>OWL Todo App</title>
    <link rel="stylesheet" href="app.css" />
+  </head>
+  <body>
    <script src="owl.js"></script>
    <script src="app.js"></script>
-  </head>
-  <body></body>
+  </body>
 </html>
 ```

@@ -38,6 +38,7 @@ Other hooks:
 - [`useRef`](reference/hooks.md#useref): get an object representing a reference (`t-ref`)
 - [`useChildSubEnv`](reference/hooks.md#usesubenv-and-usechildsubenv): extend the current env with additional information (for child components)
 - [`useSubEnv`](reference/hooks.md#usesubenv-and-usechildsubenv): extend the current env with additional information (for current component and child components)
+- [`useRoots`](reference/hooks.md#useroots): returns an object that provides access to all root nodes or htmlelements

 Utility/helpers:

@@ -13,6 +13,7 @@
  - [`useComponent`](#usecomponent)
  - [`useEnv`](#useenv)
  - [`useEffect`](#useeffect)
+  - [`useRoots`](#useroots)
 - [Example: Mouse Position](#example-mouse-position)

 ## Overview
@@ -234,7 +235,8 @@ are defined by a function instead of just the dependencies.

 The `useEffect` hook takes two function: the effect function and the dependency
 function. The effect function perform some task and return (optionally) a cleanup
-function. The dependency function returns a list of dependencies. If any of these
+function. The dependency function returns a list of dependencies, these dependencies
+are passed as parameters in the effect function . If any of these
 dependencies changes, then the current effect will be cleaned up and reexecuted.

 Here is an example without any dependencies:
@@ -287,6 +289,42 @@ class SomeComponent extends Component {
 }
 ```

+### `useRoots`
+
+`useRoots` is an alternative way to get a reference to the root notes or elements
+of a component. It may be useful in some cases where `useRef` cannot be applied,
+such as a higher order component, or a component with only text as content.
+
+The return value of `useRoots` is an object with the following key/values:
+
+- `node`: getter that evaluates to the first node of the component content (or null)
+- `elem`: getter that evaluates to the first HTMLElement of the component content (or null)
+- `nodes`: iterator that returns all content nodes
+- `elems`: iterator that returns all HTMLElement nodes
+
+```js
+class Child extends Component {
+  static template = xml`<p>some content</p>`;
+}
+
+class Parent extends Component {
+  static template = xml`<Child/>`;
+  static components = { Child };
+
+  setup() {
+    this.roots = useRoots();
+    console.log(this.roots.elem); // null
+    onMounted(() => {
+      console.log(this.roots.elem); // log the `p` element from the child
+
+      for (let elem of this.roots.elems) {
+        console.log(elem); // log the `p` element from the child
+      }
+    });
+  }
+}
+```
+
 ## Example: mouse position

 Here is the classical example of a non trivial hook to track the mouse position.
@@ -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
  };
 ```

@@ -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,
@@ -1,9 +1,8 @@
 {
  "name": "@odoo/owl",
-  "version": "2.0.0-beta-9",
+  "version": "2.0.0-beta-20",
  "description": "Odoo Web Library (OWL)",
  "main": "dist/owl.cjs.js",
-  "browser": "dist/owl.iife.js",
  "module": "dist/owl.es.js",
  "types": "dist/types/owl.d.ts",
  "files": [
@@ -1,28 +1,9 @@
 # 🦉 OWL Roadmap 🦉

- Current version: 1.4.10
+- Current version: 2.X
 - Status: stable

-This roadmap is only an attempt at predicting Owl's future.  Everything may
-change!
-
-
-### 1.x
-
- add chrome and firefox devtools,
- fix every bugs,
- improve documentation,
- small backward compatible improvements.
-
-### 2.x (2020? 2021? 2022?)
-
- stop support for `t-set` directive to define the content of a slot
-
-Maybe:
-
- reimplement vdom to use *block* system, like Vue 3, which should make Owl
-  much faster
- refactor `QWeb` to use an intermediate representation (some kind of AST) to
-  allow additional optimisations.
-
+Owl is currently stable. No (large) improvements is expected in the near future.

+Note that we intend to keep maintaining owl, and as such, improvements and/or
+breaking changes may require a version bump in the future.
@@ -6,6 +6,14 @@ import dts from "rollup-plugin-dts";

 let input, output;

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

@@ -1,3 +1,4 @@
+import { isProp } from "../runtime/blockdom/attributes";
 import {
  compileExpr,
  compileExprToArray,
@@ -22,13 +23,14 @@ import {
  ASTTif,
  ASTTKey,
  ASTTOut,
-  ASTTSet,
-  ASTTranslation,
-  ASTType,
  ASTTPortal,
-  EventHandlers,
+  ASTTranslation,
+  ASTTSet,
+  ASTType,
  Attrs,
+  EventHandlers,
 } from "./parser";
+import { OwlError } from "../runtime/error_handling";

 type BlockType = "block" | "text" | "multi" | "list" | "html" | "comment";

@@ -140,9 +142,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,
@@ -229,6 +232,7 @@ export class CodeGenerator {
  translatableAttributes: string[] = TRANSLATABLE_ATTRS;
  ast: AST;
  staticDefs: { id: string; expr: string }[] = [];
+  slotNames: Set<String> = new Set();
  helpers: Set<string> = new Set();

  constructor(ast: AST, options: CodeGenOptions) {
@@ -264,9 +268,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 +286,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 +337,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);
  }
@@ -534,7 +537,7 @@ export class CodeGenerator {
      .slice(1)
      .map((m) => {
        if (!MODS.has(m)) {
-          throw new Error(`Unknown event modifier: '${m}'`);
+          throw new OwlError(`Unknown event modifier: '${m}'`);
        }
        return `"${m}"`;
      });
@@ -578,13 +581,22 @@ export class CodeGenerator {
        attrName = key.slice(7);
        attrs["block-attribute-" + idx] = attrName;
      } else if (key.startsWith("t-att")) {
+        attrName = key === "t-att" ? null : key.slice(6);
        expr = compileExpr(ast.attrs[key]);
+        if (attrName && isProp(ast.tag, attrName)) {
+          // we force a new string or new boolean to bypass the equality check in blockdom when patching same value
+          if (attrName === "value") {
+            // When the expression is falsy, fall back to an empty string
+            expr = `new String((${expr}) || "")`;
+          } else {
+            expr = `new Boolean(${expr})`;
+          }
+        }
        const idx = block!.insertData(expr, "attr");
        if (key === "t-att") {
          attrs[`block-attributes`] = String(idx);
        } else {
-          attrName = key.slice(6);
-          attrs[`block-attribute-${idx}`] = attrName;
+          attrs[`block-attribute-${idx}`] = attrName!;
        }
      } else if (this.translatableAttributes.includes(key)) {
        attrs[key] = this.translateFn(ast.attrs[key]);
@@ -692,7 +704,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 +766,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 +806,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) {
@@ -861,8 +877,9 @@ export class CodeGenerator {
    this.define(`key${this.target.loopLevel}`, ast.key ? compileExpr(ast.key) : loopVar);
    if (this.dev) {
      // Throw error on duplicate keys in dev mode
+      this.helpers.add("OwlError");
      this.addLine(
-        `if (keys${block.id}.has(key${this.target.loopLevel})) { throw new Error(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`
+        `if (keys${block.id}.has(key${this.target.loopLevel})) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`
      );
      this.addLine(`keys${block.id}.add(key${this.target.loopLevel});`);
    }
@@ -885,7 +902,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 +949,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 +985,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 +1017,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 +1025,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 +1054,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 +1069,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});`);
    }
  }

@@ -1079,7 +1101,7 @@ export class CodeGenerator {
        name = _name;
        value = `bind(ctx, ${value || undefined})`;
      } else {
-        throw new Error("Invalid prop suffix");
+        throw new OwlError("Invalid prop suffix");
      }
    }
    name = /^[a-z_]+$/i.test(name) ? name : `'${name}'`;
@@ -1166,7 +1188,7 @@ export class CodeGenerator {
    }

    if (this.dev) {
-      this.addLine(`helpers.validateProps(${expr}, ${propVar!}, ctx);`);
+      this.addLine(`helpers.validateProps(${expr}, ${propVar!}, node);`);
    }

    if (block && (ctx.forceNewBlock === false || ctx.tKeyExpr)) {
@@ -1178,8 +1200,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})`;
    }
@@ -1215,28 +1246,37 @@ export class CodeGenerator {
    let blockString: string;
    let slotName;
    let dynamic = false;
+    let isMultiple = false;
    if (ast.name.match(INTERP_REGEXP)) {
      dynamic = true;
+      isMultiple = true;
      slotName = interpolate(ast.name);
    } else {
      slotName = "'" + ast.name + "'";
+      isMultiple = isMultiple || this.slotNames.has(ast.name);
+      this.slotNames.add(ast.name);
    }
    const dynProps = ast.attrs ? ast.attrs["t-props"] : null;
    if (ast.attrs) {
      delete ast.attrs["t-props"];
    }
+    let key = this.target.loopLevel ? `key${this.target.loopLevel}` : "key";
+    if (isMultiple) {
+      key = `${key} + \`${this.generateComponentKey()}\``;
+    }
+
    const props = ast.attrs ? this.formatPropObject(ast.attrs) : [];
    const scope = this.getPropString(props, dynProps);
    if (ast.defaultContent) {
      const name = this.compileInNewTarget("defaultContent", ast.defaultContent, ctx);
-      blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope}, ${name})`;
+      blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope}, ${name})`;
    } else {
      if (dynamic) {
        let name = generateId("slot");
        this.define(name, slotName);
-        blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}, ${dynamic}, ${scope}))`;
+        blockString = `toggler(${name}, callSlot(ctx, node, ${key}, ${name}, ${dynamic}, ${scope}))`;
      } else {
-        blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope})`;
+        blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope})`;
      }
    }
    // event handling
@@ -1268,10 +1308,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);
    }
@@ -1,3 +1,5 @@
+import { OwlError } from "../runtime/error_handling";
+
 /**
 * Owl QWeb Expression Parser
 *
@@ -86,9 +88,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;

@@ -107,14 +108,14 @@ let tokenizeString: Tokenizer = function (expr) {
      i++;
      cur = expr[i];
      if (!cur) {
-        throw new Error("Invalid expression");
+        throw new OwlError("Invalid expression");
      }
      s += cur;
    }
    i++;
  }
  if (expr[i] !== start) {
-    throw new Error("Invalid expression");
+    throw new OwlError("Invalid expression");
  }
  s += start;
  if (start === "`") {
@@ -224,7 +225,7 @@ export function tokenize(expr: string): Token[] {
    error = e; // Silence all errors and throw a generic error below
  }
  if (current.length || error) {
-    throw new Error(`Tokenizer error: could not tokenize \`${expr}\``);
+    throw new OwlError(`Tokenizer error: could not tokenize \`${expr}\``);
  }
  return result;
 }
@@ -1,3 +1,5 @@
+import { OwlError } from "../runtime/error_handling";
+
 // -----------------------------------------------------------------------------
 // AST Type definition
 // -----------------------------------------------------------------------------
@@ -115,6 +117,7 @@ export interface ASTTCall {
  type: ASTType.TCall;
  name: string;
  body: AST[] | null;
+  context: string | null;
 }

 interface SlotDefinition {
@@ -318,7 +321,7 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
    return null;
  }
  if (tagName.startsWith("block-")) {
-    throw new Error(`Invalid tag name: '${tagName}'`);
+    throw new OwlError(`Invalid tag name: '${tagName}'`);
  }
  ctx = Object.assign({}, ctx);
  if (tagName === "pre") {
@@ -339,13 +342,15 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
    const value = node.getAttribute(attr)!;
    if (attr.startsWith("t-on")) {
      if (attr === "t-on") {
-        throw new Error("Missing event name with t-on directive");
+        throw new OwlError("Missing event name with t-on directive");
      }
      on = on || {};
      on[attr.slice(5)] = value;
    } else if (attr.startsWith("t-model")) {
      if (!["input", "select", "textarea"].includes(tagName)) {
-        throw new Error("The t-model directive only works with <input>, <textarea> and <select>");
+        throw new OwlError(
+          "The t-model directive only works with <input>, <textarea> and <select>"
+        );
      }

      let baseExpr, expr;
@@ -358,7 +363,7 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
        baseExpr = value.slice(0, index);
        expr = value.slice(index + 1, -1);
      } else {
-        throw new Error(`Invalid t-model expression: "${value}" (it should be assignable)`);
+        throw new OwlError(`Invalid t-model expression: "${value}" (it should be assignable)`);
      }

      const typeAttr = node.getAttribute("type");
@@ -389,10 +394,10 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
        ctx.tModelInfo = model;
      }
    } else if (attr.startsWith("block-")) {
-      throw new Error(`Invalid attribute: '${attr}'`);
+      throw new OwlError(`Invalid attribute: '${attr}'`);
    } else if (attr !== "t-name") {
      if (attr.startsWith("t-") && !attr.startsWith("t-att")) {
-        throw new Error(`Unknown QWeb directive: '${attr}'`);
+        throw new OwlError(`Unknown QWeb directive: '${attr}'`);
      }
      const tModel = ctx.tModelInfo;
      if (tModel && ["t-att-value", "t-attf-value"].includes(attr)) {
@@ -446,7 +451,7 @@ function parseTEscNode(node: Element, ctx: ParsingContext): AST | null {
    };
  }
  if (ast.type === ASTType.TComponent) {
-    throw new Error("t-esc is not supported on Component nodes");
+    throw new OwlError("t-esc is not supported on Component nodes");
  }
  return tesc;
 }
@@ -502,7 +507,7 @@ function parseTForEach(node: Element, ctx: ParsingContext): AST | null {
  node.removeAttribute("t-as");
  const key = node.getAttribute("t-key");
  if (!key) {
-    throw new Error(
+    throw new OwlError(
      `"Directive t-foreach should always be used with a t-key!" (expression: t-foreach="${collection}" t-as="${elem}")`
    );
  }
@@ -557,11 +562,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 +586,7 @@ function parseTCall(node: Element, ctx: ParsingContext): AST | null {
    type: ASTType.TCall,
    name: subTemplate,
    body: body.length ? body : null,
+    context,
  };
 }

@@ -682,7 +690,9 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
  let isDynamic = node.hasAttribute("t-component");

  if (isDynamic && name !== "t") {
-    throw new Error(`Directive 't-component' can only be used on <t> nodes (used on a <${name}>)`);
+    throw new OwlError(
+      `Directive 't-component' can only be used on <t> nodes (used on a <${name}>)`
+    );
  }

  if (!(firstLetter === firstLetter.toUpperCase() || isDynamic)) {
@@ -709,7 +719,7 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
        on[name.slice(5)] = value;
      } else {
        const message = directiveErrorMap.get(name.split("-").slice(0, 2).join("-"));
-        throw new Error(message || `unsupported directive on Component: ${name}`);
+        throw new OwlError(message || `unsupported directive on Component: ${name}`);
      }
    } else {
      props = props || {};
@@ -725,7 +735,7 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
    const slotNodes = Array.from(clone.querySelectorAll("[t-set-slot]"));
    for (let slotNode of slotNodes) {
      if (slotNode.tagName !== "t") {
-        throw new Error(
+        throw new OwlError(
          `Directive 't-set-slot' can only be used on <t> nodes (used on a <${slotNode.tagName}>)`
        );
      }
@@ -900,7 +910,7 @@ function normalizeTIf(el: Element) {
    let nattr = (name: string) => +!!node.getAttribute(name);
    if (prevElem && (pattr("t-if") || pattr("t-elif"))) {
      if (pattr("t-foreach")) {
-        throw new Error(
+        throw new OwlError(
          "t-if cannot stay at the same level as t-foreach when using t-elif or t-else"
        );
      }
@@ -909,19 +919,19 @@ function normalizeTIf(el: Element) {
          return a + b;
        }) > 1
      ) {
-        throw new Error("Only one conditional branching directive is allowed per node");
+        throw new OwlError("Only one conditional branching directive is allowed per node");
      }
      // All text (with only spaces) and comment nodes (nodeType 8) between
      // branch nodes are removed
      let textNode;
      while ((textNode = node.previousSibling) !== prevElem) {
        if (textNode!.nodeValue!.trim().length && textNode!.nodeType !== 8) {
-          throw new Error("text is not allowed between branching directives");
+          throw new OwlError("text is not allowed between branching directives");
        }
        textNode!.remove();
      }
    } else {
-      throw new Error(
+      throw new OwlError(
        "t-elif and t-else directives must be preceded by a t-if or t-elif directive"
      );
    }
@@ -942,7 +952,7 @@ function normalizeTEsc(el: Element) {
  );
  for (const el of elements) {
    if (el.childNodes.length) {
-      throw new Error("Cannot have t-esc on a component that already has content");
+      throw new OwlError("Cannot have t-esc on a component that already has content");
    }
    const value = el.getAttribute("t-esc");
    el.removeAttribute("t-esc");
@@ -996,7 +1006,7 @@ function parseXML(xml: string): XMLDocument {
        }
      }
    }
-    throw new Error(msg);
+    throw new OwlError(msg);
  }

  return doc;
@@ -1,11 +1,12 @@
-import { Component, ComponentConstructor } from "./component";
+import { Component, ComponentConstructor, Props } from "./component";
 import { ComponentNode } from "./component_node";
-import { MountOptions } from "./fibers";
+import { nodeErrorHandlers, OwlError } from "./error_handling";
+import { Fiber, MountOptions } from "./fibers";
 import { Scheduler } from "./scheduler";
-import { TemplateSet, TemplateSetConfig } from "./template_set";
-import { nodeErrorHandlers } from "./error_handling";
-import { validateTarget } from "./utils";
 import { validateProps } from "./template_helpers";
+import { TemplateSet, TemplateSetConfig } from "./template_set";
+import { validateTarget } from "./utils";
+import { handleError } from "./error_handling";

 // reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f

@@ -65,7 +66,7 @@ export class App<
  mount(target: HTMLElement, options?: MountOptions): Promise<Component<P, E> & InstanceType<T>> {
    App.validateTarget(target);
    if (this.dev) {
-      validateProps(this.Root, this.props, { __owl__: { app: this } });
+      validateProps(this.Root, this.props, { app: this });
    }
    const node = this.makeNode(this.Root, this.props);
    const prom = this.mountNode(node, target, options);
@@ -94,9 +95,7 @@ export class App<
        nodeErrorHandlers.set(node, handlers);
      }
      handlers.unshift((e) => {
-        if (isResolved) {
-          console.error(e);
-        } else {
+        if (!isResolved) {
          reject(e);
        }
        throw e;
@@ -112,6 +111,67 @@ 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 OwlError(`Cannot find the definition of component "${name}"`);
+          } else if (!(C.prototype instanceof Component)) {
+            throw new OwlError(
+              `"${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;
+    };
+  }
+
+  handleError(...args: Parameters<typeof handleError>) {
+    return handleError(...args);
+  }
 }

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

@@ -1,3 +1,4 @@
+import { OwlError } from "../error_handling";
 import {
  attrsSetter,
  attrsUpdater,
@@ -156,6 +157,15 @@ function buildTree(
          : document.createElement(tagName);
      }
      if (el instanceof Element) {
+        if (!domParentTree) {
+          // some html elements may have side effects when setting their attributes.
+          // For example, setting the src attribute of an <img/> will trigger a
+          // request to get the corresponding image. This is something that we
+          // don't want at compile time. We avoid that by putting the content of
+          // the block in a <template/> element
+          const fragment = document.createElement("template").content;
+          fragment.appendChild(el);
+        }
        for (let i = 0; i < attrs.length; i++) {
          const attrName = attrs[i].name;
          const attrValue = attrs[i].value;
@@ -245,7 +255,7 @@ function buildTree(
      };
    }
  }
-  throw new Error("boom");
+  throw new OwlError("boom");
 }

 function addRef(tree: IntermediateTree) {
@@ -507,6 +517,12 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
      return this.el!;
    }

+    *nodes() {
+      if (this.el) {
+        yield this.el;
+      }
+    }
+
    moveBefore(other: Block | null, afterNode: Node | null) {
      const target = other ? other.el! : afterNode;
      nodeInsertBefore.call(this.parentEl, this.el!, target);
@@ -12,7 +12,6 @@ export function createCatcher(eventsSpec: EventsSpec): Catcher {
    child: VNode;
    handlerData: any[];
    handlerFns: any[] = [];
-
    parentEl?: HTMLElement | undefined;
    afterNode: Text | null = null;

@@ -44,13 +43,10 @@ export function createCatcher(eventsSpec: EventsSpec): Catcher {
        const self = this;
        handler[idx] = function (ev: any) {
          const target = ev.target;
-          let currentNode: any = self.child.firstNode();
-          const afterNode = self.afterNode;
-          while (currentNode !== afterNode) {
-            if (currentNode.contains(target)) {
+          for (let node of self.nodes()) {
+            if (node.contains(target)) {
              return origFn.call(this, ev);
            }
-            currentNode = currentNode.nextSibling;
          }
        };
      }
@@ -90,6 +86,10 @@ export function createCatcher(eventsSpec: EventsSpec): Catcher {
      return this.child.firstNode();
    }

+    nodes(): Generator<Node> {
+      return this.child.nodes();
+    }
+
    toString(): string {
      return this.child.toString();
    }
@@ -27,8 +27,8 @@ function createElementHandler(evName: string, capture: boolean = false): EventHa
  }

  function listener(ev: Event) {
-    const currentTarget = ev.currentTarget;
-    if (!currentTarget || !document.contains(currentTarget as HTMLElement)) return;
+    const currentTarget = ev.currentTarget as HTMLElement;
+    if (!currentTarget || !currentTarget.ownerDocument.contains(currentTarget)) return;
    const data = (currentTarget as any)[eventKey];
    if (!data) return;
    config.mainEventHandler(data, ev, currentTarget);
@@ -78,6 +78,12 @@ class VHtml {
    return this.content[0]!;
  }

+  *nodes() {
+    for (let elem of this.content) {
+      yield elem;
+    }
+  }
+
  toString() {
    return this.html;
  }
@@ -16,6 +16,8 @@ export interface VNode<T = any> {
  remove(): void;
  firstNode(): Node | undefined;

+  nodes(): Generator<Node>;
+
  el?: undefined | HTMLElement | Text;
  parentEl?: undefined | HTMLElement;
  isOnlyChild?: boolean | undefined;
@@ -221,6 +221,12 @@ class VList {
    return child ? child.firstNode() : undefined;
  }

+  *nodes() {
+    for (let child of this.children) {
+      yield* child.nodes();
+    }
+  }
+
  toString(): string {
    return this.children.map((c) => c!.toString()).join("");
  }
@@ -124,6 +124,14 @@ export class VMulti {
    return child ? child.firstNode() : this.anchors![0];
  }

+  *nodes() {
+    for (let child of this.children) {
+      if (child) {
+        yield* child.nodes();
+      }
+    }
+  }
+
  toString(): string {
    return this.children.map((c) => (c ? c!.toString() : "")).join("");
  }
@@ -38,6 +38,12 @@ abstract class VSimpleNode {
    return this.el!;
  }

+  *nodes(): Generator<Node> {
+    if (this.el) {
+      yield this.el;
+    }
+  }
+
  toString() {
    return this.text;
  }
@@ -55,6 +55,10 @@ class VToggler {
    return this.child.firstNode();
  }

+  nodes() {
+    return this.child.nodes();
+  }
+
  toString(): string {
    return this.child.toString();
  }
@@ -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;
@@ -1,25 +1,24 @@
 import type { App, Env } from "./app";
 import { BDom, VNode } from "./blockdom";
+import { Component, ComponentConstructor, Props } from "./component";
+import { fibersInError, OwlError } 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;

 export function getCurrent(): ComponentNode {
  if (!currentNode) {
-    throw new Error("No active component (a hook function should only be called in 'setup')");
+    throw new OwlError("No active component (a hook function should only be called in 'setup')");
  }
  return currentNode;
 }
@@ -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
 // -----------------------------------------------------------------------------
@@ -152,7 +83,6 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp

  renderFn: Function;
  parent: ComponentNode | null;
-  level: number;
  childEnv: Env;
  children: { [key: string]: ComponentNode } = Object.create(null);
  refs: any = {};
@@ -177,10 +107,10 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
    this.parent = parent;
    this.props = props;
    this.parentKey = parentKey;
-    this.level = parent ? parent.level + 1 : 0;
    const defaultProps = C.defaultProps;
+    props = Object.assign({}, props);
    if (defaultProps) {
-      props = applyDefaultProps(props, defaultProps);
+      applyDefaultProps(props, defaultProps);
    }
    const env = (parent && parent.childEnv) || app.env;
    this.childEnv = env;
@@ -211,7 +141,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
    try {
      await Promise.all(this.willStart.map((f) => f.call(component)));
    } catch (e) {
-      handleError({ node: this, error: e });
+      this.app.handleError({ node: this, error: e });
      return;
    }
    if (this.status === STATUS.NEW && this.fiber === fiber) {
@@ -289,7 +219,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
          cb.call(component);
        }
      } catch (e) {
-        handleError({ error: e, node: this });
+        this.app.handleError({ error: e, node: this });
      }
    }
    this.status = STATUS.DESTROYED;
@@ -297,13 +227,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;
@@ -365,6 +296,12 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
    return bdom ? bdom.firstNode() : undefined;
  }

+  *nodes(): Generator<Node> {
+    if (this.bdom) {
+      yield* this.bdom.nodes();
+    }
+  }
+
  mount(parent: HTMLElement, anchor: ChildNode) {
    const bdom = this.fiber!.bdom!;
    this.bdom = bdom;
@@ -388,10 +325,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;
  }

@@ -1,6 +1,11 @@
 import type { ComponentNode } from "./component_node";
 import type { Fiber } from "./fibers";

+// Custom error class that wraps error that happen in the owl lifecycle
+export class OwlError extends Error {
+  cause?: any;
+}
+
 // Maps fibers to thrown errors
 export const fibersInError: WeakMap<Fiber, any> = new WeakMap();
 export const nodeErrorHandlers: WeakMap<ComponentNode, ((error: any) => void)[]> = new WeakMap();
@@ -37,7 +42,14 @@ function _handleError(node: ComponentNode | null, error: any): boolean {

 type ErrorParams = { error: any } & ({ node: ComponentNode } | { fiber: Fiber });
 export function handleError(params: ErrorParams) {
-  const error = params.error;
+  let { error } = params;
+  // Wrap error if it wasn't wrapped by wrapError (ie when not in dev mode)
+  if (!(error instanceof OwlError)) {
+    error = Object.assign(
+      new OwlError(`An error occured in the owl lifecycle (see this Error's "cause" property)`),
+      { cause: error }
+    );
+  }
  const node = "node" in params ? params.node : params.fiber.node;
  const fiber = "fiber" in params ? params.fiber : node.fiber!;

@@ -59,5 +71,6 @@ export function handleError(params: ErrorParams) {
    } catch (e) {
      console.error(e);
    }
+    throw error;
  }
 }
@@ -1,5 +1,6 @@
 import { filterOutModifiersFromData } from "./blockdom/config";
 import { STATUS } from "./status";
+import { OwlError } from "./error_handling";

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

 export function makeChildFiber(node: ComponentNode, parent: Fiber): Fiber {
@@ -43,7 +43,7 @@ export function makeRootFiber(node: ComponentNode): Fiber {
 }

 function throwOnRender() {
-  throw new Error("Attempted to render cancelled fiber");
+  throw new OwlError("Attempted to render cancelled fiber");
 }

 /**
@@ -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) {
@@ -129,7 +130,7 @@ export class Fiber {
        (this.bdom as any) = true;
        this.bdom = node.renderFn();
      } catch (e) {
-        handleError({ node, error: e });
+        node.app.handleError({ node, error: e });
      }
      root.setCounter(root.counter - 1);
    }
@@ -194,7 +195,7 @@ export class RootFiber extends Fiber {
      }
    } catch (e) {
      this.locked = false;
-      handleError({ fiber: current || this, error: e });
+      node.app.handleError({ fiber: current || this, error: e });
    }
  }

@@ -258,7 +259,7 @@ export class MountFiber extends RootFiber {
        }
      }
    } catch (e) {
-      handleError({ fiber: current as Fiber, error: e });
+      this.node.app.handleError({ fiber: current as Fiber, error: e });
    }
  }
 }
@@ -127,3 +127,39 @@ export function useExternalListener(
  onMounted(() => target.addEventListener(eventName, boundHandler, eventParams));
  onWillUnmount(() => target.removeEventListener(eventName, boundHandler, eventParams));
 }
+
+// -----------------------------------------------------------------------------
+// useRoots
+// -----------------------------------------------------------------------------
+interface DomRangeObj {
+  node: Node | null;
+  elem: HTMLElement | null;
+  elems: Iterable<HTMLElement>;
+  nodes: Iterable<Node>;
+}
+
+export function useRoots(): DomRangeObj {
+  const cnode = getCurrent();
+
+  function* _elems(): Generator<HTMLElement> {
+    for (let node of cnode.nodes()) {
+      if (node.nodeType === 1) {
+        yield node as HTMLElement;
+      }
+    }
+  }
+  return {
+    get node() {
+      return cnode.nodes().next().value || null;
+    },
+    get elem() {
+      return _elems().next().value || null;
+    },
+    get nodes() {
+      return cnode.nodes();
+    },
+    get elems() {
+      return _elems();
+    },
+  };
+}
@@ -36,10 +36,19 @@ export const blockDom = {
 export { App, mount } from "./app";
 export { xml } from "./template_set";
 export { Component } from "./component";
+export type { ComponentConstructor } from "./component";
 export { useComponent, useState } from "./component_node";
 export { status } from "./status";
 export { reactive, markRaw, toRaw } from "./reactivity";
-export { useEffect, useEnv, useExternalListener, useRef, useChildSubEnv, useSubEnv } from "./hooks";
+export {
+  useEffect,
+  useEnv,
+  useExternalListener,
+  useRef,
+  useChildSubEnv,
+  useSubEnv,
+  useRoots,
+} from "./hooks";
 export { EventBus, whenReady, loadFile, markup } from "./utils";
 export {
  onWillStart,
@@ -54,5 +63,6 @@ export {
  onError,
 } from "./lifecycle_hooks";
 export { validate } from "./validation";
+export { OwlError } from "./error_handling";

 export const __info__ = {};
@@ -1,21 +1,30 @@
 import { getCurrent } from "./component_node";
-import { nodeErrorHandlers } from "./error_handling";
+import { nodeErrorHandlers, OwlError } from "./error_handling";

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

 const VText: any = text("").constructor;

@@ -24,7 +25,7 @@ class VPortal extends VText implements Partial<VNode<VPortal>> {
      }
      this.target = el && el.querySelector(this.selector);
      if (!this.target) {
-        throw new Error("invalid portal target");
+        throw new OwlError("invalid portal target");
      }
    }
    this.realBDom!.mount(this.target!, null);
@@ -1,4 +1,5 @@
 import { Callback } from "./utils";
+import { OwlError } from "./error_handling";

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

+const ObjectCreate = Object.create;
 /**
 * This file contains utility functions that will be injected in each template,
 * to perform various useful tasks in the compiled code.
@@ -26,7 +28,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 +48,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];
  }
@@ -69,7 +71,7 @@ function prepareList(collection: any): [any[], any[], number, any[]] {
    values = Object.keys(collection);
    keys = Object.values(collection);
  } else {
-    throw new Error("Invalid loop expression");
+    throw new OwlError("Invalid loop expression");
  }
  const n = values.length;
  return [keys, values, n, new Array(n)];
@@ -107,15 +109,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 +130,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 +165,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;
 }
@@ -186,7 +192,7 @@ function multiRefSetter(refs: RefMap, name: string): RefSetter {
    if (el) {
      count++;
      if (count > 1) {
-        throw new Error("Cannot have 2 elements with same ref name at the same time");
+        throw new OwlError("Cannot have 2 elements with same ref name at the same time");
      }
    }
    if (count === 0 || el) {
@@ -201,11 +207,11 @@ function multiRefSetter(refs: RefMap, name: string): RefSetter {
 * visit recursively the props and all the children to check if they are valid.
 * This is why it is only done in 'dev' mode.
 */
-export function validateProps<P>(name: string | ComponentConstructor<P>, props: P, parent?: any) {
+export function validateProps<P>(name: string | ComponentConstructor<P>, props: P, node?: any) {
  const ComponentClass =
    typeof name !== "string"
      ? name
-      : (parent.constructor.components[name] as ComponentConstructor<P> | undefined);
+      : (node.component.constructor.components[name] as ComponentConstructor<P> | undefined);

  if (!ComponentClass) {
    // this is an error, wrong component. We silently return here instead so the
@@ -215,7 +221,7 @@ export function validateProps<P>(name: string | ComponentConstructor<P>, props:

  const schema = ComponentClass.props;
  if (!schema) {
-    if (parent.__owl__.app.warnIfNoStaticProps) {
+    if (node.app.warnIfNoStaticProps) {
      console.warn(`Component '${ComponentClass.name}' does not have a static props description`);
    }
    return;
@@ -228,7 +234,7 @@ export function validateProps<P>(name: string | ComponentConstructor<P>, props:
        : name in schema && !("*" in schema) && !isOptional(schema[name]);
    for (let p in defaultProps) {
      if (isMandatory(p)) {
-        throw new Error(
+        throw new OwlError(
          `A default value cannot be defined for a mandatory prop (name: '${p}', component: ${ComponentClass.name})`
        );
      }
@@ -237,7 +243,9 @@ export function validateProps<P>(name: string | ComponentConstructor<P>, props:

  const errors = validateSchema(props, schema);
  if (errors.length) {
-    throw new Error(`Invalid props for component '${ComponentClass.name}': ` + errors.join(", "));
+    throw new OwlError(
+      `Invalid props for component '${ComponentClass.name}': ` + errors.join(", ")
+    );
  }
 }

@@ -259,4 +267,5 @@ export const helpers = {
  bind,
  createCatcher,
  markRaw,
+  OwlError,
 };
@@ -1,10 +1,11 @@
-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";
+import { OwlError } from "./error_handling";

-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();
@@ -31,7 +32,7 @@ function parseXML(xml: string): Document {
        }
      }
    }
-    throw new Error(msg);
+    throw new OwlError(msg);
  }
  return doc;
 }
@@ -76,7 +77,7 @@ export class TemplateSet {
      if (currentAsString === newAsString) {
        return;
      }
-      throw new Error(`Template ${name} already defined with different content`);
+      throw new OwlError(`Template ${name} already defined with different content`);
    }
    this.rawTemplates[name] = template;
  }
@@ -102,7 +103,7 @@ export class TemplateSet {
          const componentName = getCurrent().component.constructor.name;
          extraInfo = ` (for component "${componentName}")`;
        } catch {}
-        throw new Error(`Missing template: "${name}"${extraInfo}`);
+        throw new OwlError(`Missing template: "${name}"${extraInfo}`);
      }
      const isFn = typeof rawTemplate === "function" && !(rawTemplate instanceof Element);
      const templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate);
@@ -119,7 +120,7 @@ export class TemplateSet {
  }

  _compileTemplate(name: string, template: string | Element): ReturnType<typeof compile> {
-    throw new Error(`Unable to compile a template. Please use owl full build instead`);
+    throw new OwlError(`Unable to compile a template. Please use owl full build instead`);
  }

  callTemplate(owner: any, subTemplate: string, ctx: any, parent: any, key: any): any {
@@ -1,3 +1,4 @@
+import { OwlError } from "./error_handling";
 export type Callback = () => void;

 /**
@@ -27,12 +28,18 @@ export function batched(callback: Callback): Callback {
 }

 export function validateTarget(target: HTMLElement) {
-  if (!(target instanceof HTMLElement)) {
-    throw new Error("Cannot mount component: the target is not a valid DOM element");
-  }
-  if (!document.body.contains(target)) {
-    throw new Error("Cannot mount a component on a detached dom node");
+  // Get the document and HTMLElement corresponding to the target to allow mounting in iframes
+  const document = target && target.ownerDocument;
+  if (document) {
+    const HTMLElement = document.defaultView!.HTMLElement;
+    if (target instanceof HTMLElement) {
+      if (!document.body.contains(target)) {
+        throw new OwlError("Cannot mount a component on a detached dom node");
+      }
+      return;
+    }
  }
+  throw new OwlError("Cannot mount component: the target is not a valid DOM element");
 }

 export class EventBus extends EventTarget {
@@ -54,7 +61,7 @@ export function whenReady(fn?: any): Promise<void> {
 export async function loadFile(url: string): Promise<string> {
  const result = await fetch(url);
  if (!result.ok) {
-    throw new Error("Error while fetching xml templates");
+    throw new OwlError("Error while fetching xml templates");
  }
  return await result.text();
 }
@@ -1,3 +1,5 @@
+import { OwlError } from "./error_handling";
+
 type BaseType =
  | typeof String
  | typeof Boolean
@@ -8,9 +10,6 @@ type BaseType =
  | true
  | "*";

-type UnionType = (TypeInfo | BaseType)[];
-type TypeDescription = BaseType | UnionType | TypeInfo;
-
 interface TypeInfo {
  type?: TypeDescription;
  optional?: boolean;
@@ -19,6 +18,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 +28,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 +46,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`;
@@ -66,7 +72,7 @@ function toSchema(spec: SimplifiedSchema): NormalizedSchema {
 export function validate(obj: { [key: string]: any }, spec: Schema) {
  let errors = validateSchema(obj, spec);
  if (errors.length) {
-    throw new Error("Invalid object: " + errors.join(", "));
+    throw new OwlError("Invalid object: " + errors.join(", "));
  }
 }

@@ -134,6 +140,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)}`;
@@ -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,8 +343,9 @@ 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>\`);
  
@@ -344,7 +355,7 @@ exports[`Reactivity: useState useless atoms should be deleted 1`] = `
    for (let i1 = 0; i1 < l_block2; i1++) {
      ctx[\`id\`] = v_block2[i1];
      const key1 = ctx['id'];
-      c_block2[i1] = withKey(component(\`Quantity\`, {id: ctx['id']}, key + \`__1__\${key1}\`, node, ctx), key1);
+      c_block2[i1] = withKey(comp1({id: ctx['id']}, key + \`__1__\${key1}\`, node, this, null), key1);
    }
    ctx = ctx.__proto__;
    const b2 = list(c_block2);
@@ -358,7 +369,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 +383,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>\`);
  
@@ -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>\`);
  
@@ -29,10 +29,23 @@ exports[`app can configure an app with props 1`] = `
 }"
 `;

+exports[`app can mount app in an iframe 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div class=\\"my-div\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`app destroy remove the widget from the DOM 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  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 +58,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>\`);
  
@@ -76,4 +76,22 @@ describe("app", () => {
      "Component 'Root' does not have a static props description"
    );
  });
+
+  test("can mount app in an iframe", async () => {
+    class SomeComponent extends Component {
+      static template = xml`<div class="my-div"/>`;
+    }
+
+    const iframe = document.createElement("iframe");
+    fixture.appendChild(iframe);
+    const app = new App(SomeComponent);
+    const iframeDoc = iframe.contentDocument!;
+    const comp = await app.mount(iframeDoc.body);
+    const div = iframeDoc.querySelector(".my-div");
+    expect(div).not.toBe(null);
+    expect(iframeDoc.contains(div)).toBe(true);
+    app.destroy();
+    expect(iframeDoc.contains(div)).toBe(false);
+    expect(status(comp)).toBe("destroyed");
+  });
 });
@@ -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,7 +339,7 @@ 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>\`);
@@ -301,7 +357,7 @@ 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\\"/>\`);
@@ -319,7 +375,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 +393,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 +407,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 +420,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 +430,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 +459,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 +473,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 +487,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 +501,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 +512,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 +543,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 +554,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 +599,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 +613,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 +627,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 +641,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 +655,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 +669,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 +682,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 +697,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\\"/>\`);
  
@@ -597,10 +708,24 @@ exports[`attributes updating classes (with obj notation) 1`] = `
 }"
 `;

+exports[`attributes updating property with falsy value 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = new String((ctx['v']) || \\"\\");
+    return block1([attr1]);
+  }
+}"
+`;
+
 exports[`attributes various escapes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, 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\\"/>\`);
  
@@ -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,12 +754,12 @@ 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\\"/>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let attr1 = ctx['v'];
+    let attr1 = new Boolean(ctx['v']);
    return block1([attr1]);
  }
 }"
@@ -643,12 +768,26 @@ 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\\"/>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let attr1 = ctx['flag'];
+    let attr1 = new Boolean(ctx['flag']);
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`special cases for some specific html attributes/properties input with t-att-value (patching with same value 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = new String((ctx['v']) || \\"\\");
    return block1([attr1]);
  }
 }"
@@ -657,12 +796,26 @@ 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\\"/>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let attr1 = ctx['v'];
+    let attr1 = new String((ctx['v']) || \\"\\");
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`special cases for some specific html attributes/properties input, type checkbox, with t-att-checked (patching with same value 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = new Boolean(ctx['v']);
    return block1([attr1]);
  }
 }"
@@ -671,12 +824,12 @@ 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>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let attr1 = ctx['value'];
+    let attr1 = new String((ctx['value']) || \\"\\");
    return block1([attr1]);
  }
 }"
@@ -685,12 +838,12 @@ 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\\"/>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let attr1 = ctx['v'];
+    let attr1 = new String((ctx['v']) || \\"\\");
    return block1([attr1]);
  }
 }"
@@ -699,7 +852,7 @@ 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>\`);
  
@@ -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,7 +27,7 @@ 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>\`);
@@ -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,7 +62,7 @@ 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>\`);
@@ -89,7 +89,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,7 +104,7 @@ 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>\`);
  
@@ -119,7 +119,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,7 +133,7 @@ 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>\`);
@@ -155,7 +155,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 +167,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,7 +181,7 @@ 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\`);
  
@@ -205,7 +205,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 +219,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,7 +233,7 @@ 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>\`);
  
@@ -248,7 +248,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 +263,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,7 +279,7 @@ 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>\`);
  
@@ -294,7 +294,7 @@ 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>\`);
  
@@ -308,7 +308,7 @@ 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>\`);
  
@@ -322,7 +322,7 @@ 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>\`);
  
@@ -338,7 +338,7 @@ 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>\`);
@@ -365,7 +365,7 @@ 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>\`);
  
@@ -379,7 +379,7 @@ 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>\`);
  
@@ -394,7 +394,7 @@ 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>\`);
  
@@ -409,7 +409,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 +424,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 +439,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 +454,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 +470,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 +485,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 +499,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 +514,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>\`);
  
@@ -3,8 +3,9 @@
 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\\"/>\`);
@@ -34,7 +35,7 @@ exports[`misc complex template 1`] = `
    for (let i1 = 0; i1 < l_block4; i1++) {
      ctx[\`slot\`] = v_block4[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);
+      c_block4[i1] = withKey(comp1({class: ctx['slot_container'],slot: ctx['slot']}, key + \`__1__\${key1}\`, node, this, null), key1);
    }
    ctx = ctx.__proto__;
    b4 = list(c_block4);
@@ -81,7 +82,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\`);
@@ -133,7 +134,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 +149,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 +165,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,9 +181,11 @@ 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\\">
                      <h5>Search options</h5>
@@ -266,7 +269,7 @@ exports[`misc other complex template 1`] = `
        ctx[\`category\`] = v_block15[i1];
        const key1 = ctx['category'].id;
        let attr6 = ctx['category'].id;
-        let attr7 = ctx['category'].id==ctx['options'].active_category_id;
+        let attr7 = new Boolean(ctx['category'].id==ctx['options'].active_category_id);
        let txt5 = ctx['category'].name;
        c_block15[i1] = withKey(block16([attr6, attr7, txt5]), key1);
      }
@@ -274,7 +277,7 @@ exports[`misc other complex template 1`] = `
      const b15 = list(c_block15);
      b14 = block14([], [b15]);
    }
-    let attr8 = ctx['search'].value;
+    let attr8 = new String((ctx['search'].value) || \\"\\");
    let hdlr4 = [ctx['updateFilter'], ctx];
    let hdlr5 = [ctx['updateFilter'], ctx];
    let hdlr6 = [ctx['clearSearch'], ctx];
@@ -288,7 +291,7 @@ exports[`misc other complex template 1`] = `
        if (!ctx['trigger'].manual&&ctx['trigger'].project_id===ctx['project'].id&&ctx['trigger'].category_id===ctx['options'].active_category_id) {
          let attr9 = \`trigger_\${ctx['trigger'].id}\`;
          let attr10 = \`trigger_\${ctx['trigger'].id}\`;
-          let attr11 = ctx['options'].trigger_display[ctx['trigger'].id];
+          let attr11 = new Boolean(ctx['options'].trigger_display[ctx['trigger'].id]);
          let attr12 = ctx['trigger'].id;
          let hdlr7 = [ctx['updateTriggerDisplay'], ctx];
          let attr13 = \`trigger_\${ctx['trigger'].id}\`;
@@ -316,8 +319,8 @@ exports[`misc other complex template 1`] = `
    if (!ctx['project']) {
      b24 = block24();
    } 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);
+      const b26 = comp1({bundles: ctx['bundles'].sticky,category_custom_views: ctx['category_custom_views'],search: ctx['search']}, key + \`__2\`, node, this, null);
+      const b27 = comp2({bundles: ctx['bundles'].dev,search: ctx['search']}, key + \`__3\`, node, this, null);
      b25 = block25([], [b26, b27]);
    }
    return block1([attr1, txt1, hdlr2, hdlr3, attr8, hdlr4, hdlr5, ref1, hdlr6, ref2], [b2, b4, b14, b17, b22, b23, b24, b25]);
@@ -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>\`);
@@ -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,7 +311,7 @@ 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>\`);
  
@@ -327,7 +327,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 +344,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 +357,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 +370,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>\`);
  
@@ -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,7 +55,7 @@ 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>\`);
@@ -75,7 +75,7 @@ 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>\`);
@@ -90,7 +90,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 +105,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 +118,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\\"/>\`);
@@ -3,7 +3,7 @@
 exports[`t-call (template calling) basic caller 1`] = `
 "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(\`_basic-callee\`);
  
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -18,7 +18,7 @@ exports[`t-call (template calling) basic caller 1`] = `
 exports[`t-call (template calling) basic caller 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>ok</span>\`);
  
@@ -31,7 +31,7 @@ exports[`t-call (template calling) basic caller 2`] = `
 exports[`t-call (template calling) basic caller, no parent 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;
  const callTemplate_1 = app.getTemplate(\`_basic-callee\`);
  
  return function template(ctx, node, key = \\"\\") {
@@ -43,7 +43,7 @@ exports[`t-call (template calling) basic caller, no parent node 1`] = `
 exports[`t-call (template calling) basic caller, no parent node 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>ok</span>\`);
  
@@ -56,7 +56,7 @@ exports[`t-call (template calling) basic caller, no parent node 2`] = `
 exports[`t-call (template calling) call with several sub nodes on same 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 { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
  
@@ -81,7 +81,7 @@ exports[`t-call (template calling) call with several sub nodes on same line 1`]
 exports[`t-call (template calling) call with several sub nodes on same line 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>\`);
@@ -96,7 +96,7 @@ exports[`t-call (template calling) call with several sub nodes on same line 2`]
 exports[`t-call (template calling) cascading t-call 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(\`subTemplate\`);
  
@@ -121,7 +121,7 @@ exports[`t-call (template calling) cascading t-call t-out='0' 1`] = `
 exports[`t-call (template calling) cascading t-call 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 { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`subSubTemplate\`);
  
@@ -144,7 +144,7 @@ exports[`t-call (template calling) cascading t-call t-out='0' 2`] = `
 exports[`t-call (template calling) cascading t-call t-out='0' 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 { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`finalTemplate\`);
  
@@ -167,7 +167,7 @@ exports[`t-call (template calling) cascading t-call t-out='0' 3`] = `
 exports[`t-call (template calling) cascading t-call t-out='0' 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 { zero } = helpers;
  
  let block1 = createBlock(\`<div><span>cascade 2</span><block-child-0/></div>\`);
@@ -182,7 +182,7 @@ exports[`t-call (template calling) cascading t-call t-out='0' 4`] = `
 exports[`t-call (template calling) cascading t-call t-out='0', without external divs 1`] = `
 "function 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(\`subTemplate\`);
  
@@ -205,7 +205,7 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
 exports[`t-call (template calling) cascading t-call t-out='0', without external divs 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, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`subSubTemplate\`);
  
@@ -226,7 +226,7 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
 exports[`t-call (template calling) cascading t-call t-out='0', without external divs 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 { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`finalTemplate\`);
  
@@ -247,7 +247,7 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
 exports[`t-call (template calling) cascading t-call t-out='0', without external divs 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 { zero } = helpers;
  
  let block2 = createBlock(\`<span>cascade 2</span>\`);
@@ -263,7 +263,7 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
 exports[`t-call (template calling) 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/></div>\`);
@@ -279,7 +279,7 @@ exports[`t-call (template calling) dynamic t-call 1`] = `
 exports[`t-call (template calling) 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(\`<foo><block-text-0/></foo>\`);
  
@@ -293,7 +293,7 @@ exports[`t-call (template calling) dynamic t-call 2`] = `
 exports[`t-call (template calling) 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;
  
  let block1 = createBlock(\`<bar><block-text-0/></bar>\`);
  
@@ -307,7 +307,7 @@ exports[`t-call (template calling) dynamic t-call 3`] = `
 exports[`t-call (template calling) inherit 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 { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
  
@@ -326,7 +326,7 @@ exports[`t-call (template calling) inherit context 1`] = `
 exports[`t-call (template calling) inherit 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;
  
  return function template(ctx, node, key = \\"\\") {
    return text(ctx['foo']);
@@ -337,7 +337,7 @@ exports[`t-call (template calling) inherit context 2`] = `
 exports[`t-call (template calling) recursive template, 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;
  const callTemplate_1 = app.getTemplate(\`recursive\`);
  
  let block1 = createBlock(\`<div><span>hey</span><block-child-0/></div>\`);
@@ -355,7 +355,7 @@ exports[`t-call (template calling) recursive template, part 1 1`] = `
 exports[`t-call (template calling) recursive 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 { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
  
@@ -376,7 +376,7 @@ exports[`t-call (template calling) recursive template, part 2 1`] = `
 exports[`t-call (template calling) recursive template, 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 { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
  const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
  
@@ -410,7 +410,7 @@ exports[`t-call (template calling) recursive template, part 2 2`] = `
 exports[`t-call (template calling) recursive template, 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;
  const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
  
@@ -431,7 +431,7 @@ exports[`t-call (template calling) recursive template, part 3 1`] = `
 exports[`t-call (template calling) recursive template, 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 { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
  const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
  
@@ -465,7 +465,7 @@ exports[`t-call (template calling) recursive template, part 3 2`] = `
 exports[`t-call (template calling) recursive template, part 4: with t-set recursive index 1`] = `
 "function 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(\`nodeTemplate\`);
  
@@ -487,7 +487,7 @@ exports[`t-call (template calling) recursive template, part 4: with t-set recurs
 exports[`t-call (template calling) recursive template, part 4: with t-set recursive index 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, prepareList, withKey } = helpers;
  const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
  
@@ -523,7 +523,7 @@ exports[`t-call (template calling) recursive template, part 4: with t-set recurs
 exports[`t-call (template calling) scoped parameters 1`] = `
 "function 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\`);
  
@@ -546,7 +546,7 @@ exports[`t-call (template calling) scoped parameters 1`] = `
 exports[`t-call (template calling) scoped parameters 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(\`ok\`);
@@ -557,7 +557,7 @@ exports[`t-call (template calling) scoped parameters 2`] = `
 exports[`t-call (template calling) scoped parameters, 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;
  const callTemplate_1 = app.getTemplate(\`sub\`);
  
@@ -581,7 +581,7 @@ exports[`t-call (template calling) scoped parameters, part 2 1`] = `
 exports[`t-call (template calling) scoped parameters, 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;
  
  return function template(ctx, node, key = \\"\\") {
    return text(ctx['foo']);
@@ -592,7 +592,7 @@ exports[`t-call (template calling) scoped parameters, part 2 2`] = `
 exports[`t-call (template calling) t-call allowed on a non t 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;
  const callTemplate_1 = app.getTemplate(\`sub\`);
  
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -607,7 +607,7 @@ exports[`t-call (template calling) t-call allowed on a non t node 1`] = `
 exports[`t-call (template calling) t-call allowed on a non t node 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>ok</span>\`);
  
@@ -617,10 +617,40 @@ exports[`t-call (template calling) t-call allowed on a non t node 2`] = `
 }"
 `;

+exports[`t-call (template calling) t-call on a div with t-call-context 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let ctx1 = ctx['obj'];
+    const b2 = callTemplate_1.call(this, ctx1, node, key + \`__1\`);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-call (template calling) t-call on a div with t-call-context 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['value'];
+    return block1([txt1]);
+  }
+}"
+`;
+
 exports[`t-call (template calling) t-call with body content as root of a 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 { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`antony\`);
  
@@ -639,7 +669,7 @@ exports[`t-call (template calling) t-call with body content as root of a templat
 exports[`t-call (template calling) t-call with body content as root of a 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;
  let { zero } = helpers;
  
  let block1 = createBlock(\`<foo><block-child-0/></foo>\`);
@@ -654,7 +684,7 @@ exports[`t-call (template calling) t-call with body content as root of a templat
 exports[`t-call (template calling) t-call 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;
  const callTemplate_1 = app.getTemplate(\`sub\`);
  
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -672,7 +702,7 @@ exports[`t-call (template calling) t-call with t-if 1`] = `
 exports[`t-call (template calling) t-call with t-if 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>ok</span>\`);
  
@@ -685,7 +715,7 @@ exports[`t-call (template calling) t-call with t-if 2`] = `
 exports[`t-call (template calling) t-call with t-set inside and body text 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 { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
  
@@ -706,7 +736,7 @@ exports[`t-call (template calling) t-call with t-set inside and body text conten
 exports[`t-call (template calling) t-call with t-set inside and body text content 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>\`);
  
@@ -720,7 +750,7 @@ exports[`t-call (template calling) t-call with t-set inside and body text conten
 exports[`t-call (template calling) t-call with t-set inside and outside 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
  
@@ -754,7 +784,7 @@ exports[`t-call (template calling) t-call with t-set inside and outside 1`] = `
 exports[`t-call (template calling) t-call with t-set inside and outside 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>\`);
  
@@ -768,7 +798,7 @@ exports[`t-call (template calling) t-call with t-set inside and outside 2`] = `
 exports[`t-call (template calling) t-call with t-set inside and outside. 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;
  const callTemplate_1 = app.getTemplate(\`main\`);
  
@@ -787,7 +817,7 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 1`] =
 exports[`t-call (template calling) t-call with t-set inside and outside. 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
  
@@ -821,7 +851,7 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 2`] =
 exports[`t-call (template calling) t-call with t-set inside and outside. 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 block2 = createBlock(\`<span><block-text-0/></span>\`);
  
@@ -837,7 +867,7 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 3`] =
 exports[`t-call (template calling) t-call, conditional and t-set in t-call 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;
  const callTemplate_1 = app.getTemplate(\`callee1\`);
  const callTemplate_2 = app.getTemplate(\`callee2\`);
@@ -866,7 +896,7 @@ exports[`t-call (template calling) t-call, conditional and t-set in t-call body
 exports[`t-call (template calling) t-call, conditional and t-set 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 block1 = createBlock(\`<div>callee1</div>\`);
  
@@ -879,7 +909,7 @@ exports[`t-call (template calling) t-call, conditional and t-set in t-call body
 exports[`t-call (template calling) t-call, conditional and t-set in t-call 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;
  
  let block1 = createBlock(\`<div>callee2 <block-text-0/></div>\`);
  
@@ -890,10 +920,71 @@ exports[`t-call (template calling) t-call, conditional and t-set in t-call body
 }"
 `;

+exports[`t-call (template calling) t-call-context 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let ctx1 = ctx['obj'];
+    return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call (template calling) t-call-context 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['value'];
+    return block1([txt1]);
+  }
+}"
+`;
+
+exports[`t-call (template calling) t-call-context and value in body 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    let ctx1 = ctx['obj'];
+    ctx1 = Object.create(ctx1);
+    ctx1[isBoundary] = 1;
+    setContextValue(ctx1, \\"value2\\", ctx['aaron']);
+    return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call (template calling) t-call-context and value in body 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['value1'];
+    let txt2 = ctx['value2'];
+    return block1([txt1, txt2]);
+  }
+}"
+`;
+
 exports[`t-call (template calling) t-esc inside t-call, with t-set outside 1`] = `
 "function 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\`);
  
@@ -912,7 +1003,7 @@ exports[`t-call (template calling) t-esc inside t-call, with t-set outside 1`] =
 exports[`t-call (template calling) t-esc inside t-call, with t-set outside 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>\`);
  
@@ -926,7 +1017,7 @@ exports[`t-call (template calling) t-esc inside t-call, with t-set outside 2`] =
 exports[`t-call (template calling) with unused 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, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
  
@@ -943,7 +1034,7 @@ exports[`t-call (template calling) with unused body 1`] = `
 exports[`t-call (template calling) with unused 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 block1 = createBlock(\`<div>ok</div>\`);
  
@@ -956,7 +1047,7 @@ exports[`t-call (template calling) with unused body 2`] = `
 exports[`t-call (template calling) with unused setbody 1`] = `
 "function 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\`);
  
@@ -974,7 +1065,7 @@ exports[`t-call (template calling) with unused setbody 1`] = `
 exports[`t-call (template calling) with unused setbody 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>ok</div>\`);
  
@@ -987,7 +1078,7 @@ exports[`t-call (template calling) with unused setbody 2`] = `
 exports[`t-call (template calling) with used 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, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
  
@@ -1004,7 +1095,7 @@ exports[`t-call (template calling) with used body 1`] = `
 exports[`t-call (template calling) with used 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 { zero } = helpers;
  
  let block1 = createBlock(\`<h1><block-text-0/></h1>\`);
@@ -1019,7 +1110,7 @@ exports[`t-call (template calling) with used body 2`] = `
 exports[`t-call (template calling) with used setbody 1`] = `
 "function 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\`);
  
@@ -1040,7 +1131,7 @@ exports[`t-call (template calling) with used setbody 1`] = `
 exports[`t-call (template calling) with used setbody 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['foo']);
@@ -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,7 +52,7 @@ 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/>\`);
@@ -3,7 +3,7 @@
 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>\`);
  
@@ -21,7 +21,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 +35,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 +49,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 +64,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,7 +79,7 @@ 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']);
@@ -99,7 +99,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 +113,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 +126,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 +161,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 +175,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 +196,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 +208,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>\`);
  
@@ -3,7 +3,7 @@
 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>\`);
@@ -25,7 +25,7 @@ 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>\`);
@@ -49,7 +49,7 @@ 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>\`);
@@ -80,7 +80,7 @@ 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>\`);
@@ -111,7 +111,7 @@ 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>\`);
@@ -147,7 +147,7 @@ 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>\`);
@@ -169,7 +169,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,7 +188,7 @@ 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>\`);
@@ -214,7 +214,7 @@ 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 { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
  
@@ -267,7 +267,7 @@ 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(\` [\`);
@@ -285,7 +285,7 @@ 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\`);
  
@@ -332,7 +332,7 @@ 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 = \\"\\") {
@@ -354,7 +354,7 @@ 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>\`);
@@ -388,7 +388,7 @@ 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>\`);
@@ -414,7 +414,7 @@ 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>\`);
@@ -442,7 +442,7 @@ 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>\`);
@@ -465,7 +465,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,7 +490,7 @@ 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>\`);
@@ -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,7 +41,7 @@ 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;
@@ -62,7 +62,7 @@ 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>\`);
  
@@ -85,7 +85,7 @@ 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>\`);
  
@@ -104,7 +104,7 @@ 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>\`);
  
@@ -123,7 +123,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,7 +140,7 @@ 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>\`);
  
@@ -178,7 +178,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 +199,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 +221,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 +236,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 +253,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 +272,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 +291,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 +308,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 +330,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 +347,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 +369,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 +385,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,7 +404,7 @@ 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>\`);
@@ -425,7 +425,7 @@ 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>\`);
@@ -448,7 +448,7 @@ 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>\`);
@@ -474,7 +474,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 +492,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 +512,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>\`);
@@ -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,7 +48,7 @@ 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>\`);
@@ -72,7 +72,7 @@ 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/>\`);
@@ -93,7 +93,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>\`);
  
@@ -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,7 +30,7 @@ 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\`);
  
@@ -51,7 +51,7 @@ 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>\`);
@@ -67,7 +67,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 +82,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 +97,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 +118,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 +133,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 +148,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 +161,7 @@ exports[`t-out t-out bdom 1`] = `
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    ctx[\`var\`] = new LazyValue(value1, ctx, node);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node);
    const b3 = safeOutput(ctx['var']);
    return block1([], [b3]);
  }
@@ -171,7 +171,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 +186,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 +201,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 +216,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 +232,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 +249,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 +264,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 +279,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,7 +294,7 @@ 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>\`);
@@ -310,7 +310,7 @@ exports[`t-out t-out switch markup on bdom 1`] = `
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
    let b3,b5;
-    ctx[\`bdom\`] = new LazyValue(value1, ctx, node);
+    ctx[\`bdom\`] = new LazyValue(value1, ctx, this, node);
    if (ctx['hasBdom']) {
      const b4 = safeOutput(ctx['bdom']);
      b3 = block3([], [b4]);
@@ -326,7 +326,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 +341,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 +353,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 +368,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 +383,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 +398,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 +449,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 +464,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 +479,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 +494,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 +509,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>\`);
@@ -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,7 +80,7 @@ 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\\"/>\`);
@@ -100,7 +100,7 @@ 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>\`);
@@ -128,7 +128,7 @@ 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\\"/>\`);
@@ -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,7 +90,7 @@ 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 = \\"\\") {
@@ -106,7 +106,7 @@ exports[`t-set set from body literal (with t-if/t-else 1`] = `
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    ctx[\`value\`] = new LazyValue(value1, ctx, node);
+    ctx[\`value\`] = new LazyValue(value1, ctx, this, node);
    return text(ctx['value']);
  }
 }"
@@ -115,7 +115,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 +130,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 +142,7 @@ exports[`t-set set from body lookup 1`] = `
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    ctx[\`stuff\`] = new LazyValue(value1, ctx, node);
+    ctx[\`stuff\`] = new LazyValue(value1, ctx, this, node);
    let txt1 = ctx['stuff'];
    return block1([txt1]);
  }
@@ -152,7 +152,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,7 +170,7 @@ 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>\`);
@@ -191,7 +191,7 @@ 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>\`);
@@ -206,7 +206,7 @@ exports[`t-set t-set body is evaluated immediately 1`] = `
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
    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]);
@@ -217,7 +217,7 @@ 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\`);
  
@@ -238,7 +238,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,7 +257,7 @@ 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 { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
  
@@ -282,7 +282,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 +301,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,7 +319,7 @@ 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>\`);
@@ -338,7 +338,7 @@ 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>\`);
@@ -368,7 +368,7 @@ 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>\`);
@@ -398,7 +398,7 @@ 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>\`);
@@ -428,7 +428,7 @@ 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>\`);
@@ -457,7 +457,7 @@ 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>\`);
@@ -471,7 +471,7 @@ exports[`t-set t-set with content and sub t-esc 1`] = `
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    ctx[\`setvar\`] = new LazyValue(value1, ctx, node);
+    ctx[\`setvar\`] = new LazyValue(value1, ctx, this, node);
    let txt1 = ctx['setvar'];
    return block1([txt1]);
  }
@@ -481,7 +481,7 @@ 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>\`);
@@ -497,7 +497,7 @@ exports[`t-set t-set with t-value (falsy) and body 1`] = `
    ctx[isBoundary] = 1
    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']);
@@ -509,7 +509,7 @@ 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>\`);
@@ -525,7 +525,7 @@ exports[`t-set t-set with t-value (truthy) and body 1`] = `
    ctx[isBoundary] = 1
    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']);
@@ -534,13 +534,36 @@ exports[`t-set t-set with t-value (truthy) and body 1`] = `
 }"
 `;

+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 block1 = createBlock(\`<p><div><span>First div</span></div><div><block-child-0/></div></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    let b2;
+    if (ctx['flag']) {
+      setContextValue(ctx, \\"bouh\\", 2);
+    }
+    if (!ctx['flag']) {
+      b2 = text(\`Second\`);
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
 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 block1 = createBlock(\`<div><block-text-0/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
@@ -559,10 +582,10 @@ 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 block1 = createBlock(\`<div><block-text-0/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
@@ -581,7 +604,7 @@ 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 = \\"\\") {
@@ -602,7 +625,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 +638,7 @@ exports[`t-set value priority (with non text body 1`] = `
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    ctx[\`value\`] = withDefault(1, new LazyValue(value1, ctx, node));
+    ctx[\`value\`] = withDefault(1, new LazyValue(value1, ctx, this, node));
    let txt1 = ctx['value'];
    return block1([txt1]);
  }
@@ -625,7 +648,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>\`);
@@ -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,7 +73,7 @@ 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'}>\`);
  
@@ -87,7 +87,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 +104,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'}>\`);
@@ -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>\`);
@@ -3,7 +3,7 @@
 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>\`);
  
@@ -16,7 +16,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,7 +29,7 @@ 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>\`);
  
@@ -42,7 +42,7 @@ 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>\`);
  
@@ -55,7 +55,7 @@ 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>\`);
  
@@ -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,7 +59,7 @@ 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>\`);
  
@@ -72,7 +72,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,7 +85,7 @@ 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>\`);
  
@@ -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", () => {
@@ -287,6 +329,35 @@ describe("attributes", () => {
    expect(fixture.innerHTML).toBe('<div value=""></div>');
  });

+  test("updating property with falsy value", async () => {
+    // render input with initial value
+    const template = `<input t-att-value="v"></input>`;
+    const bnode1 = renderToBdom(template, { v: false });
+    const fixture = makeTestFixture();
+    mount(bnode1, fixture);
+
+    const input = fixture.querySelector("input")!;
+    expect(input.value).toBe("");
+
+    patch(bnode1, renderToBdom(template, { v: "owl" }));
+    expect(input.value).toBe("owl");
+
+    patch(bnode1, renderToBdom(template, { v: false }));
+    expect(input.value).toBe("");
+
+    patch(bnode1, renderToBdom(template, { v: "owl" }));
+    expect(input.value).toBe("owl");
+
+    patch(bnode1, renderToBdom(template, { v: undefined }));
+    expect(input.value).toBe("");
+
+    patch(bnode1, renderToBdom(template, { v: "owl" }));
+    expect(input.value).toBe("owl");
+
+    patch(bnode1, renderToBdom(template, { v: null }));
+    expect(input.value).toBe("");
+  });
+
  test("changing a class with t-att-class", () => {
    // render input with initial value
    const template = `<div t-att-class="v"/>`;
@@ -387,6 +458,42 @@ describe("special cases for some specific html attributes/properties", () => {
    expect(input.value).toBe("potato");
  });

+  test("input with t-att-value (patching with same value", () => {
+    // render input with initial value
+    const template = `<input t-att-value="v"/>`;
+    const bnode1 = renderToBdom(template, { v: "zucchini" });
+    const fixture = makeTestFixture();
+    mount(bnode1, fixture);
+    const input = fixture.querySelector("input")!;
+    expect(input.value).toBe("zucchini");
+
+    // change value manually in input, to simulate user input
+    input.value = "tomato";
+    expect(input.value).toBe("tomato");
+
+    const bnode2 = renderToBdom(template, { v: "zucchini" });
+    patch(bnode1, bnode2);
+    expect(input.value).toBe("zucchini");
+  });
+
+  test("input, type checkbox, with t-att-checked (patching with same value", () => {
+    // render input with initial value
+    const template = `<input type="checkbox" t-att-checked="v"/>`;
+    const bnode1 = renderToBdom(template, { v: true });
+    const fixture = makeTestFixture();
+    mount(bnode1, fixture);
+    const input = fixture.querySelector("input")!;
+    expect(input.checked).toBe(true);
+
+    // change checked manually in input, to simulate user input
+    input.checked = false;
+    expect(input.checked).toBe(false);
+
+    const bnode2 = renderToBdom(template, { v: true });
+    patch(bnode1, bnode2);
+    expect(input.checked).toBe(true);
+  });
+
  test("input of type checkbox with t-att-indeterminate", () => {
    const template = `<input type="checkbox" t-att-indeterminate="v"/>`;
    const bnode1 = renderToBdom(template, { v: true });
@@ -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");
+  });
 });
@@ -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,
@@ -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>"
+    );
+  });
 });
@@ -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"/>`;
@@ -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 {
@@ -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");
@@ -3,11 +3,12 @@
 exports[`basics GrandChild display is controlled by its GrandParent 1`] = `
 "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, false);
  
  return function template(ctx, node, key = \\"\\") {
    const Comp1 = ctx['myComp'];
-    return toggler(Comp1, component(Comp1, {displayGrandChild: ctx['displayGrandChild']}, key + \`__1\`, node, ctx));
+    return toggler(Comp1, comp1({displayGrandChild: ctx['displayGrandChild']}, key + \`__1\`, node, this, Comp1));
  }
 }"
 `;
@@ -15,12 +16,13 @@ exports[`basics GrandChild display is controlled by its GrandParent 1`] = `
 exports[`basics GrandChild display is controlled by its GrandParent 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 = \\"\\") {
    let b2;
    if (ctx['props'].displayGrandChild) {
-      b2 = component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
    }
    return multi([b2]);
  }
@@ -30,7 +32,7 @@ exports[`basics GrandChild display is controlled by its GrandParent 2`] = `
 exports[`basics GrandChild display is controlled by its GrandParent 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/>\`);
  
@@ -43,7 +45,7 @@ exports[`basics GrandChild display is controlled by its GrandParent 3`] = `
 exports[`basics 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;
  
  let block2 = createBlock(\`<span>1</span>\`);
  let block4 = createBlock(\`<span>2</span>\`);
@@ -60,10 +62,11 @@ exports[`basics Multi root component 1`] = `
 exports[`basics a class component inside a class component, no external 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 = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return comp1({}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -71,7 +74,7 @@ exports[`basics a class component inside a class component, no external dom 1`]
 exports[`basics a class component inside a class component, no external 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>simple vnode</div>\`);
  
@@ -84,7 +87,7 @@ exports[`basics a class component inside a class component, no external dom 2`]
 exports[`basics a component cannot be mounted in a detached node (even if node is detached later) 1`] = `
 "function anonymous(app, 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/>\`);
  
@@ -97,12 +100,13 @@ exports[`basics a component cannot be mounted in a detached node (even if node i
 exports[`basics a component inside 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;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
  
  let block1 = createBlock(\`<span><block-child-0/></span>\`);
  
  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]);
  }
 }"
@@ -111,7 +115,7 @@ exports[`basics a component inside a component 1`] = `
 exports[`basics a component inside a 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>simple vnode</div>\`);
  
@@ -124,7 +128,7 @@ exports[`basics a component inside a component 2`] = `
 exports[`basics can be clicked on and updated 1`] = `
 "function anonymous(app, 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>\`);
  
@@ -140,12 +144,13 @@ exports[`basics can be clicked on and updated 1`] = `
 exports[`basics can handle empty 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, false, false);
  
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, {val: undefined}, key + \`__1\`, node, ctx);
+    const b2 = comp1({val: undefined}, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
 }"
@@ -154,7 +159,7 @@ exports[`basics can handle empty props 1`] = `
 exports[`basics can handle empty 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(\`<span><block-text-0/></span>\`);
  
@@ -168,7 +173,7 @@ exports[`basics can handle empty props 2`] = `
 exports[`basics can inject values in tagged 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 callTemplate_1 = app.getTemplate(\`__template__999\`);
  
  return function template(ctx, node, key = \\"\\") {
@@ -180,7 +185,7 @@ exports[`basics can inject values in tagged templates 1`] = `
 exports[`basics can inject values in tagged templates 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>\`);
  
@@ -194,7 +199,7 @@ exports[`basics can inject values in tagged templates 2`] = `
 exports[`basics can mount a component with just some 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 = \\"\\") {
    return text(\`just text\`);
@@ -205,7 +210,7 @@ exports[`basics can mount a component with just some text 1`] = `
 exports[`basics can mount a component with no 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 = \\"\\") {
    return text(\`\`);
@@ -216,7 +221,7 @@ exports[`basics can mount a component with no text 1`] = `
 exports[`basics can mount a simple 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>simple vnode</span>\`);
  
@@ -229,7 +234,7 @@ exports[`basics can mount a simple component 1`] = `
 exports[`basics can mount a simple component with multiple roots 1`] = `
 "function 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(\`<span/>\`);
  let block3 = createBlock(\`<div/>\`);
@@ -245,7 +250,7 @@ exports[`basics can mount a simple component with multiple roots 1`] = `
 exports[`basics can mount a simple component 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(\`<span><block-text-0/></span>\`);
  
@@ -259,10 +264,11 @@ exports[`basics can mount a simple component with props 1`] = `
 exports[`basics child can be updated 1`] = `
 "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'].counter}, key + \`__1\`, node, ctx);
+    return comp1({value: ctx['state'].counter}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -270,7 +276,7 @@ exports[`basics child can be updated 1`] = `
 exports[`basics child can be updated 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'].value);
@@ -281,7 +287,7 @@ exports[`basics child can be updated 2`] = `
 exports[`basics class component with 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;
  
  let block1 = createBlock(\`<span>My value: <block-text-0/></span>\`);
  
@@ -295,10 +301,11 @@ exports[`basics class component with dynamic text 1`] = `
 exports[`basics class parent, class child component 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, false, false);
  
  return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {value: 42}, key + \`__1\`, node, ctx);
+    return comp1({value: 42}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -306,7 +313,7 @@ exports[`basics class parent, class child component with props 1`] = `
 exports[`basics class parent, class child component 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><block-text-0/></div>\`);
  
@@ -320,12 +327,13 @@ exports[`basics class parent, class child component with props 2`] = `
 exports[`basics component children doesn't leak (if 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(\`Child\`, true, false, false, true);
  
  return function template(ctx, node, key = \\"\\") {
    let b2;
    if (ctx['ifVar']) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
    }
    return multi([b2]);
  }
@@ -335,7 +343,7 @@ exports[`basics component children doesn't leak (if case) 1`] = `
 exports[`basics component children doesn't leak (if 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/>\`);
  
@@ -348,11 +356,12 @@ exports[`basics component children doesn't leak (if case) 2`] = `
 exports[`basics component children doesn't leak (t-key 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(\`Child\`, true, false, false, true);
  
  return function template(ctx, node, key = \\"\\") {
    const tKey_1 = ctx['keyVar'];
-    return toggler(tKey_1, component(\`Child\`, {}, tKey_1 + key + \`__1\`, node, ctx));
+    return toggler(tKey_1, comp1({}, tKey_1 + key + \`__1\`, node, this, null));
  }
 }"
 `;
@@ -360,7 +369,7 @@ exports[`basics component children doesn't leak (t-key case) 1`] = `
 exports[`basics component children doesn't leak (t-key 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/>\`);
  
@@ -373,7 +382,7 @@ exports[`basics component children doesn't leak (t-key case) 2`] = `
 exports[`basics component with dynamic content can be updated 1`] = `
 "function anonymous(app, 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>\`);
  
@@ -387,7 +396,7 @@ exports[`basics component with dynamic content can be updated 1`] = `
 exports[`basics do not remove previously rendered dom if not necessary 1`] = `
 "function anonymous(app, 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/>\`);
  
@@ -400,7 +409,7 @@ exports[`basics do not remove previously rendered dom if not necessary 1`] = `
 exports[`basics do not remove previously rendered dom if not necessary, 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 block1 = createBlock(\`<div><h1>h1</h1><span><block-text-0/></span></div>\`);
  
@@ -414,10 +423,11 @@ exports[`basics do not remove previously rendered dom if not necessary, variatio
 exports[`basics higher order components parent and 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, false);
  
  return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {child: ctx['state'].child}, key + \`__1\`, node, ctx);
+    return comp1({child: ctx['state'].child}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -425,14 +435,16 @@ exports[`basics higher order components parent and child 1`] = `
 exports[`basics higher order components parent and 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;
+  const comp1 = app.createComponent(\`ChildA\`, true, false, false, true);
+  const comp2 = app.createComponent(\`ChildB\`, true, false, false, true);
  
  return function template(ctx, node, key = \\"\\") {
    let b2,b3;
    if (ctx['props'].child==='a') {
-      b2 = component(\`ChildA\`, {}, key + \`__1\`, node, ctx);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
    } else {
-      b3 = component(\`ChildB\`, {}, key + \`__2\`, node, ctx);
+      b3 = comp2({}, key + \`__2\`, node, this, null);
    }
    return multi([b2, b3]);
  }
@@ -442,7 +454,7 @@ exports[`basics higher order components parent and child 2`] = `
 exports[`basics higher order components parent and child 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>a</div>\`);
  
@@ -455,7 +467,7 @@ exports[`basics higher order components parent and child 3`] = `
 exports[`basics higher order components parent and child 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>b</span>\`);
  
@@ -468,8 +480,10 @@ exports[`basics higher order components parent and child 4`] = `
 exports[`basics list of two 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(\`SubWidget\`, true, false, false, true);
+  const comp2 = app.createComponent(\`SubWidget\`, true, false, false, true);
  
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
  let block3 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
@@ -480,8 +494,8 @@ exports[`basics list of two sub components inside other nodes 1`] = `
    for (let i1 = 0; i1 < l_block2; i1++) {
      ctx[\`blip\`] = v_block2[i1];
      const key1 = ctx['blip'].id;
-      const b4 = component(\`SubWidget\`, {}, key + \`__1__\${key1}\`, node, ctx);
-      const b5 = component(\`SubWidget\`, {}, key + \`__2__\${key1}\`, node, ctx);
+      const b4 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
+      const b5 = comp2({}, key + \`__2__\${key1}\`, node, this, null);
      c_block2[i1] = withKey(block3([], [b4, b5]), key1);
    }
    const b2 = list(c_block2);
@@ -493,7 +507,7 @@ exports[`basics list of two sub components inside other nodes 1`] = `
 exports[`basics list of two 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>\`);
  
@@ -506,10 +520,11 @@ exports[`basics list of two sub components inside other nodes 2`] = `
 exports[`basics parent, child and grandchild 1`] = `
 "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);
  }
 }"
 `;
@@ -517,10 +532,11 @@ exports[`basics parent, child and grandchild 1`] = `
 exports[`basics parent, child and grandchild 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);
  }
 }"
 `;
@@ -528,7 +544,7 @@ exports[`basics parent, child and grandchild 2`] = `
 exports[`basics parent, child and grandchild 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>hey</div>\`);
  
@@ -541,7 +557,7 @@ exports[`basics parent, child and grandchild 3`] = `
 exports[`basics props is set on 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;
  
  let block1 = createBlock(\`<span>simple vnode</span>\`);
  
@@ -554,7 +570,7 @@ exports[`basics props is set on root component 1`] = `
 exports[`basics props value are own property of props 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(\`<span>simple vnode</span>\`);
  
@@ -567,7 +583,7 @@ exports[`basics props value are own property of props object 1`] = `
 exports[`basics props value are own property of props object, even with default 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(\`<span>simple vnode</span>\`);
  
@@ -580,14 +596,16 @@ exports[`basics props value are own property of props object, even with default
 exports[`basics reconciliation alg is not confused in some specific 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;
+  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 b2 = comp1({}, key + \`__1\`, node, this, null);
    const tKey_1 = 4;
-    const b3 = toggler(tKey_1, component(\`Child\`, {}, tKey_1 + key + \`__2\`, node, ctx));
+    const b3 = toggler(tKey_1, comp2({}, tKey_1 + key + \`__2\`, node, this, null));
    return block1([], [b2, b3]);
  }
 }"
@@ -596,7 +614,7 @@ exports[`basics reconciliation alg is not confused in some specific situation 1`
 exports[`basics reconciliation alg is not confused in some specific situation 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</span>\`);
  
@@ -609,10 +627,11 @@ exports[`basics reconciliation alg is not confused in some specific situation 2`
 exports[`basics rerendering a widget with 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(\`Counter\`, true, false, false, true);
  
  return function template(ctx, node, key = \\"\\") {
-    return component(\`Counter\`, {}, key + \`__1\`, node, ctx);
+    return comp1({}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -620,7 +639,7 @@ exports[`basics rerendering a widget with a sub widget 1`] = `
 exports[`basics rerendering a widget with 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>\`);
  
@@ -636,15 +655,17 @@ exports[`basics rerendering a widget with a sub widget 2`] = `
 exports[`basics same t-keys in two different places 1`] = `
 "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(\`<div><div><block-child-0/></div><div><block-child-1/></div></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
    const tKey_1 = 1;
-    const b2 = toggler(tKey_1, component(\`Child\`, {blip: '1'}, tKey_1 + key + \`__1\`, node, ctx));
+    const b2 = toggler(tKey_1, comp1({blip: '1'}, tKey_1 + key + \`__1\`, node, this, null));
    const tKey_2 = 1;
-    const b3 = toggler(tKey_2, component(\`Child\`, {blip: '2'}, tKey_2 + key + \`__2\`, node, ctx));
+    const b3 = toggler(tKey_2, comp2({blip: '2'}, tKey_2 + key + \`__2\`, node, this, null));
    return block1([], [b2, b3]);
  }
 }"
@@ -653,7 +674,7 @@ exports[`basics same t-keys in two different places 1`] = `
 exports[`basics same t-keys in two different places 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>\`);
  
@@ -667,7 +688,7 @@ exports[`basics same t-keys in two different places 2`] = `
 exports[`basics simple component with a 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;
  
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
  
@@ -681,7 +702,7 @@ exports[`basics simple component with a dynamic text 1`] = `
 exports[`basics simple component, useState 1`] = `
 "function anonymous(app, 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>\`);
  
@@ -695,7 +716,7 @@ exports[`basics simple component, useState 1`] = `
 exports[`basics some simple sanity checks (el/status) 1`] = `
 "function anonymous(app, 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>\`);
  
@@ -708,7 +729,8 @@ exports[`basics some simple sanity checks (el/status) 1`] = `
 exports[`basics sub components between t-ifs 1`] = `
 "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/><span><block-child-2/></span><block-child-3/></div>\`);
  let block2 = createBlock(\`<h1>hey</h1>\`);
@@ -722,7 +744,7 @@ exports[`basics sub components between t-ifs 1`] = `
    } else {
      b3 = block3();
    }
-    b4 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    b4 = comp1({}, key + \`__1\`, node, this, null);
    if (ctx['state'].flag) {
      b5 = block5();
    }
@@ -734,7 +756,7 @@ exports[`basics sub components between t-ifs 1`] = `
 exports[`basics sub components between t-ifs 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</span>\`);
  
@@ -747,7 +769,8 @@ exports[`basics sub components between t-ifs 2`] = `
 exports[`basics t-elif works with t-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);
  
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
  let block2 = createBlock(\`<div>somediv</div>\`);
@@ -757,7 +780,7 @@ exports[`basics t-elif works with t-component 1`] = `
    if (ctx['state'].flag) {
      b2 = block2();
    } else if (!ctx['state'].flag) {
-      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
    }
    return block1([], [b2, b3]);
  }
@@ -767,7 +790,7 @@ exports[`basics t-elif works with t-component 1`] = `
 exports[`basics t-elif works with t-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(\`<span>hey</span>\`);
  
@@ -780,7 +803,8 @@ exports[`basics t-elif works with t-component 2`] = `
 exports[`basics t-else with empty string works with t-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);
  
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
  let block2 = createBlock(\`<div>somediv</div>\`);
@@ -790,7 +814,7 @@ exports[`basics t-else with empty string works with t-component 1`] = `
    if (ctx['state'].flag) {
      b2 = block2();
    } else {
-      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
    }
    return block1([], [b2, b3]);
  }
@@ -800,7 +824,7 @@ exports[`basics t-else with empty string works with t-component 1`] = `
 exports[`basics t-else with empty string works with t-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(\`<span>hey</span>\`);
  
@@ -813,7 +837,8 @@ exports[`basics t-else with empty string works with t-component 2`] = `
 exports[`basics t-else works with t-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);
  
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
  let block2 = createBlock(\`<div>somediv</div>\`);
@@ -823,7 +848,7 @@ exports[`basics t-else works with t-component 1`] = `
    if (ctx['state'].flag) {
      b2 = block2();
    } else {
-      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
    }
    return block1([], [b2, b3]);
  }
@@ -833,7 +858,7 @@ exports[`basics t-else works with t-component 1`] = `
 exports[`basics t-else works with t-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(\`<span>hey</span>\`);
  
@@ -846,14 +871,15 @@ exports[`basics t-else works with t-component 2`] = `
 exports[`basics t-if works with t-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);
  
  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]);
  }
@@ -863,7 +889,7 @@ exports[`basics t-if works with t-component 1`] = `
 exports[`basics t-if works with t-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(\`<span>hey</span>\`);
  
@@ -876,7 +902,9 @@ exports[`basics t-if works with t-component 2`] = `
 exports[`basics t-key on a component with t-if, and a sibling 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);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, true);
  
  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-child-1/></div>\`);
  
@@ -884,9 +912,9 @@ exports[`basics t-key on a component with t-if, and a sibling component 1`] = `
    let b2,b3;
    if (false) {
      const tKey_1 = 'str';
-      b2 = toggler(tKey_1, component(\`Child\`, {}, tKey_1 + key + \`__1\`, node, ctx));
+      b2 = toggler(tKey_1, comp1({}, tKey_1 + key + \`__1\`, node, this, null));
    }
-    b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    b3 = comp2({}, key + \`__2\`, node, this, null);
    return block1([], [b2, b3]);
  }
 }"
@@ -895,7 +923,7 @@ exports[`basics t-key on a component with t-if, and a sibling component 1`] = `
 exports[`basics t-key on a component with t-if, and a sibling 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(\`<span>child</span>\`);
  
@@ -908,14 +936,15 @@ exports[`basics t-key on a component with t-if, and a sibling component 2`] = `
 exports[`basics text after a conditional 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);
  
  let block1 = createBlock(\`<div><block-child-0/><span><block-text-0/></span></div>\`);
  
  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);
    }
    let txt1 = ctx['state'].text;
    return block1([txt1], [b2]);
@@ -926,7 +955,7 @@ exports[`basics text after a conditional component 1`] = `
 exports[`basics text after a conditional 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(\`<p>simple vnode</p>\`);
  
@@ -939,10 +968,11 @@ exports[`basics text after a conditional component 2`] = `
 exports[`basics three level of components with collapsing 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;
+  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);
  }
 }"
 `;
@@ -950,10 +980,11 @@ exports[`basics three level of components with collapsing root nodes 1`] = `
 exports[`basics three level of components with collapsing root 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;
+  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);
  }
 }"
 `;
@@ -961,7 +992,7 @@ exports[`basics three level of components with collapsing root nodes 2`] = `
 exports[`basics three level of components with collapsing root nodes 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>2</div>\`);
  
@@ -974,11 +1005,13 @@ exports[`basics three level of components with collapsing root nodes 3`] = `
 exports[`basics two child 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);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, true);
  
  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 multi([b2, b3]);
  }
 }"
@@ -987,7 +1020,7 @@ exports[`basics two child components 1`] = `
 exports[`basics two child 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>simple vnode</div>\`);
  
@@ -1000,13 +1033,14 @@ exports[`basics two child components 2`] = `
 exports[`basics update props of component without concrete own 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;
+  const comp1 = app.createComponent(\`Child\`, true, false, true, false);
  
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
    const tKey_1 = ctx['childProps'].key;
-    const b2 = toggler(tKey_1, component(\`Child\`, Object.assign({}, ctx['childProps']), tKey_1 + key + \`__1\`, node, ctx));
+    const b2 = toggler(tKey_1, comp1(Object.assign({}, ctx['childProps']), tKey_1 + key + \`__1\`, node, this, null));
    return block1([], [b2]);
  }
 }"
@@ -1015,11 +1049,12 @@ exports[`basics update props of component without concrete own node 1`] = `
 exports[`basics update props of component without concrete own node 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(\`Custom\`, true, false, false, false);
  
  return function template(ctx, node, key = \\"\\") {
    const tKey_1 = ctx['props'].subKey;
-    return toggler(tKey_1, component(\`Custom\`, {key: ctx['props'].key,subKey: ctx['props'].subKey}, tKey_1 + key + \`__1\`, node, ctx));
+    return toggler(tKey_1, comp1({key: ctx['props'].key,subKey: ctx['props'].subKey}, tKey_1 + key + \`__1\`, node, this, null));
  }
 }"
 `;
@@ -1027,7 +1062,7 @@ exports[`basics update props of component without concrete own node 2`] = `
 exports[`basics update props of component without concrete own node 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 class=\\"widget-subkey\\"><block-text-0/>__<block-text-1/></div>\`);
  
@@ -1042,7 +1077,7 @@ exports[`basics update props of component without concrete own node 3`] = `
 exports[`basics updating a component with t-foreach as root 1`] = `
 "function 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 = \\"\\") {
@@ -1061,10 +1096,11 @@ exports[`basics updating a component with t-foreach as root 1`] = `
 exports[`basics updating widget 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;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
  
  return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {flag: ctx['state'].flag}, key + \`__1\`, node, ctx);
+    return comp1({flag: ctx['state'].flag}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -1072,7 +1108,7 @@ exports[`basics updating widget immediately 1`] = `
 exports[`basics updating widget immediately 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>abc<block-child-0/></span>\`);
  
@@ -1089,8 +1125,9 @@ exports[`basics updating widget immediately 2`] = `
 exports[`basics widget after 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(\`SomeComponent\`, true, false, false, true);
  
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
  
@@ -1105,7 +1142,7 @@ exports[`basics widget after a t-foreach 1`] = `
    }
    ctx = ctx.__proto__;
    const b2 = list(c_block2);
-    const b4 = component(\`SomeComponent\`, {}, key + \`__1\`, node, ctx);
+    const b4 = comp1({}, key + \`__1\`, node, this, null);
    return block1([], [b2, b4]);
  }
 }"
@@ -1114,7 +1151,7 @@ exports[`basics widget after a t-foreach 1`] = `
 exports[`basics widget after 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/>\`);
  
@@ -1127,12 +1164,13 @@ exports[`basics widget after a t-foreach 2`] = `
 exports[`basics zero or one child 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);
  
  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]);
  }
@@ -1142,7 +1180,7 @@ exports[`basics zero or one child components 1`] = `
 exports[`basics zero or one child 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>simple vnode</div>\`);
  
@@ -1155,7 +1193,7 @@ exports[`basics zero or one child components 2`] = `
 exports[`mount targets can mount a component (with default position='last-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;
  
  let block1 = createBlock(\`<div>app</div>\`);
  
@@ -1168,7 +1206,7 @@ exports[`mount targets can mount a component (with default position='last-child'
 exports[`mount targets can mount a component (with position='first-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;
  
  let block1 = createBlock(\`<div>app</div>\`);
  
@@ -1181,7 +1219,7 @@ exports[`mount targets can mount a component (with position='first-child') 1`] =
 exports[`mount targets default mount option is 'last-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;
  
  let block1 = createBlock(\`<div>app</div>\`);
  
@@ -1194,7 +1232,7 @@ exports[`mount targets default mount option is 'last-child' 1`] = `
 exports[`mount targets mount function: can mount a component (with default position='last-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;
  
  let block1 = createBlock(\`<div>app</div>\`);
  
@@ -1207,12 +1245,13 @@ exports[`mount targets mount function: can mount a component (with default posit
 exports[`support svg components 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;
+  const comp1 = app.createComponent(\`GComp\`, true, false, false, true);
  
  let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`GComp\`, {}, key + \`__1\`, node, ctx);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
 }"
@@ -1221,7 +1260,7 @@ exports[`support svg components add proper namespace to svg 1`] = `
 exports[`support svg components add proper namespace to svg 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(\`<g block-ns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/></g>\`);
  
@@ -1234,7 +1273,7 @@ exports[`support svg components add proper namespace to svg 2`] = `
 exports[`t-out in components can render list of 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 { prepareList, safeOutput, withKey } = helpers;
  
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -1258,7 +1297,7 @@ exports[`t-out in components can render list of t-out  1`] = `
 exports[`t-out in components can switch the contents of two t-out repeatedly 1`] = `
 "function 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 = \\"\\") {
@@ -1269,10 +1308,22 @@ exports[`t-out in components can switch the contents of two t-out repeatedly 1`]
 }"
 `;

+exports[`t-out in components t-out and updating falsy values,  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['state'].a);
+  }
+}"
+`;
+
 exports[`t-out in components update properly on state changes 1`] = `
 "function 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>\`);
@@ -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>\`);
  
@@ -57,17 +58,32 @@ exports[`event handling handler receive the event as argument 2`] = `
 }"
 `;

+exports[`event handling handler works when app is mounted in an iframe 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<span block-handler-0=\\"click\\">click me</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['inc'], ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
 exports[`event handling input blur event is not called if component is destroyed 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, 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>\`);
  
  return function template(ctx, node, key = \\"\\") {
    let b2;
    if (ctx['state'].cond) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
    }
    return block1([], [b2]);
  }
@@ -77,7 +93,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,7 +107,7 @@ 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>\`);
@@ -117,7 +133,7 @@ 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>\`);
  
@@ -132,7 +148,7 @@ 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>\`);
@@ -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,15 +29,17 @@ 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;
    if (ctx['env'].options.flag) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
    }
    if (!ctx['env'].options.flag) {
-      b3 = component(\`OtherChild\`, {}, key + \`__2\`, node, ctx);
+      b3 = comp2({}, key + \`__2\`, node, this, null);
    }
    return multi([b2, b3]);
  }
@@ -46,7 +49,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 +62,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,15 +75,17 @@ 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;
    if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
    }
    if (!ctx['state'].flag) {
-      b3 = component(\`OtherChild\`, {}, key + \`__2\`, node, ctx);
+      b3 = comp2({}, key + \`__2\`, node, this, null);
    }
    return multi([b2, b3]);
  }
@@ -90,7 +95,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 +108,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 +121,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,7 +133,7 @@ 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>\`);
  
@@ -142,12 +148,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 +163,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 +175,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>\`);
  
@@ -3,7 +3,7 @@
 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\\"/>\`);
@@ -24,7 +24,7 @@ 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>\`);
  
@@ -40,10 +40,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 +52,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 +66,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 +79,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 +93,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 +107,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 +121,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 +139,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 +153,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 +167,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 +181,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 +195,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 +209,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 +223,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 +235,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 +250,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,7 +263,7 @@ 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\\"/>\`);
  
@@ -277,7 +282,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 +295,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 +309,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 +322,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 +338,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 +352,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 +368,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 +382,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 +394,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>\`);
  
@@ -398,3 +405,69 @@ exports[`hooks useSubEnv supports arbitrary descriptor 2`] = `
  }
 }"
 `;
+
+exports[`useRoots hook return a list of nodes and elems 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<span>hey</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`useRoots hook return a list of nodes and elems 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block3 = createBlock(\`<span>hey</span>\`);
+  let block5 = createBlock(\`<p>bla</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\` some text \`);
+    const b3 = block3();
+    const b4 = text(\` coucou \`);
+    const b5 = block5();
+    return multi([b2, b3, b4, b5]);
+  }
+}"
+`;
+
+exports[`useRoots hook useRoots and lifecycle 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<span>hey</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`useRoots hook useRoots is up to date 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block2 = createBlock(\`<span>hey</span>\`);
+  let block5 = createBlock(\`<p>paragraph</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['state'].flag) {
+      b2 = block2();
+    } else {
+      const b4 = text(\` coucou \`);
+      const b5 = block5();
+      b3 = multi([b4, b5]);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
@@ -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,17 +46,20 @@ 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>\`);
  
  return function template(ctx, node, key = \\"\\") {
    let b2,b3,b4;
-    b2 = component(\`D\`, {}, key + \`__1\`, node, ctx);
+    b2 = comp1({}, key + \`__1\`, node, this, null);
    if (ctx['state'].flag) {
-      b3 = component(\`E\`, {}, key + \`__2\`, node, ctx);
+      b3 = comp2({}, key + \`__2\`, node, this, null);
    } else {
-      b4 = component(\`F\`, {}, key + \`__3\`, node, ctx);
+      b4 = comp3({}, key + \`__3\`, node, this, null);
    }
    return block1([], [b2, b3, b4]);
  }
@@ -64,7 +69,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 +82,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 +95,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,14 +108,15 @@ 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>\`);
  
  return function template(ctx, node, key = \\"\\") {
    let b2;
    if (ctx['state'].flag) {
-      const b3 = component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
+      const b3 = comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
      b2 = block2([], [b3]);
    }
    return multi([b2]);
@@ -121,7 +127,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 +141,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 +157,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 +170,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 +188,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 +199,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 +214,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 +227,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 +239,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 +250,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 +265,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 +278,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 +294,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 +306,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 +319,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 +335,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 +351,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 +363,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 +376,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 +392,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 +405,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 +417,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 +430,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 +443,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 +459,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 +472,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 +487,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 +500,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 +518,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 +533,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 +546,11 @@ 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);
+    return comp1({someValue: ctx['state'].value}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -535,7 +558,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 +573,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 +588,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 +601,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 +615,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 +629,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 +643,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 +657,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 +673,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 +686,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 +699,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);
+    helpers.validateProps(\`Child\`, props1, node);
+    return comp1(props1, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -687,7 +713,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,12 +724,13 @@ 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>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
+    const b2 = comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
 }"
@@ -712,12 +739,13 @@ 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>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`ChildChild\`, {n: ctx['props'].n}, key + \`__1\`, node, ctx);
+    const b2 = comp1({n: ctx['props'].n}, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
 }"
@@ -726,7 +754,7 @@ 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>\`);
  
@@ -740,10 +768,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 +780,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 +793,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 +806,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,7 +819,8 @@ 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/>\`);
@@ -798,7 +828,7 @@ exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is
  return function template(ctx, node, key = \\"\\") {
    let b2,b3;
    if (ctx['state'].ok) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
    } else {
      b3 = block3();
    }
@@ -810,7 +840,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 +853,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 +865,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>\`);
  
@@ -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,8 +32,9 @@ 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 = \\"\\") {
    ctx = Object.create(ctx);
@@ -42,7 +44,7 @@ exports[`basics arrow functions as prop correctly capture their scope 1`] = `
      const key1 = ctx['item'].val;
      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);
+      c_block1[i1] = withKey(comp1({onClick: _ev=>v1(v2.val,_ev)}, key + \`__1__\${key1}\`, node, this, null), key1);
    }
    return list(c_block1);
  }
@@ -52,7 +54,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 +68,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 +83,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 +97,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 +109,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 +123,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 +135,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,8 +149,9 @@ 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>\`);
@@ -157,8 +163,8 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
  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);
+    ctx[\`abc\`] = new LazyValue(value1, ctx, this, node);
+    const b3 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -167,7 +173,7 @@ 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>\`);
@@ -183,8 +189,9 @@ 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>\`);
  
@@ -192,7 +199,7 @@ exports[`basics t-set with a body expression can be used as textual prop 1`] = `
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
    setContextValue(ctx, \\"abc\\", \`42\`);
-    const b2 = component(\`Child\`, {val: ctx['abc']}, key + \`__1\`, node, ctx);
+    const b2 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
 }"
@@ -201,7 +208,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,8 +222,9 @@ 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>\`);
  
@@ -224,7 +232,7 @@ exports[`basics t-set works  1`] = `
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
    setContextValue(ctx, \\"val\\", 42);
-    const b2 = component(\`Child\`, {val: ctx['val']}, key + \`__1\`, node, ctx);
+    const b2 = comp1({val: ctx['val']}, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
 }"
@@ -233,7 +241,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 +255,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 +267,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 +278,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 +291,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 +302,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 +315,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\`);
@@ -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,7 +97,7 @@ 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>\`);
  
@@ -109,14 +111,15 @@ 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>\`);
  
  return function template(ctx, node, key = \\"\\") {
    let b2;
    if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
+      b2 = comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
    }
    return block1([], [b2]);
  }
@@ -126,7 +129,7 @@ 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>\`);
  
@@ -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,7 +18,7 @@ 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\\"/>\`);
@@ -41,7 +41,8 @@ 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>\`);
  
@@ -51,7 +52,7 @@ exports[`refs refs and recursive templates 1`] = `
    let b2;
    let txt1 = ctx['props'].tree.value;
    if (ctx['props'].tree.child) {
-      b2 = component(\`Test\`, {tree: ctx['props'].tree.child}, key + \`__1\`, node, ctx);
+      b2 = comp1({tree: ctx['props'].tree.child}, key + \`__1\`, node, this, null);
    }
    return block1([ref1, txt1], [b2]);
  }
@@ -61,8 +62,9 @@ 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>\`);
@@ -77,7 +79,7 @@ exports[`refs refs are properly bound in slots 1`] = `
  return function template(ctx, node, key = \\"\\") {
    let txt1 = ctx['state'].val;
    const ctx1 = capture(ctx);
-    const b3 = component(\`Dialog\`, {slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, ctx);
+    const b3 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
    return block1([txt1], [b3]);
  }
 }"
@@ -86,7 +88,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,7 +103,7 @@ 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\\"/>\`);
@@ -3,11 +3,12 @@
 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);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
    return multi([b2, b3]);
  }
 }"
@@ -16,7 +17,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 +28,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 +40,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 +54,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,11 +65,12 @@ 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);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
    return multi([b2, b3]);
  }
 }"
@@ -75,7 +79,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,11 +90,12 @@ 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);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
    return multi([b2, b3]);
  }
 }"
@@ -99,7 +104,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 +115,11 @@ 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);
+    return comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -121,7 +127,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 +138,11 @@ 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);
+    return comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -143,7 +150,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,11 +161,12 @@ 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);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
    return multi([b2, b3]);
  }
 }"
@@ -167,7 +175,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 +186,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 +201,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 +214,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 +228,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 +240,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 +251,11 @@ 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);
+    return comp1(Object.assign({}, ctx['state']), key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -251,7 +263,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);
@@ -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,7 +122,7 @@ 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>\`);
  
@@ -130,7 +135,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 +149,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 +161,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 +180,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 +194,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 +208,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 +223,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 +237,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 +249,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 +263,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 +275,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 +316,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 +331,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 +345,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 +357,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 +372,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 +384,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 +397,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 +409,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 +423,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 +435,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,12 +449,13 @@ 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>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, {class: {b:ctx['state'].b}}, key + \`__1\`, node, ctx);
+    const b2 = comp1({class: {b:ctx['state'].b}}, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
 }"
@@ -447,7 +464,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 +478,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 +490,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\\"/>\`);
  
@@ -3,7 +3,7 @@
 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);
  
@@ -21,7 +21,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 +34,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 +45,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 +61,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 +75,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,7 +87,7 @@ 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>\`);
@@ -102,7 +104,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,7 +118,7 @@ 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>\`);
@@ -132,7 +134,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 +148,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 +163,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 +178,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 +193,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 +205,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 +218,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 +230,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 +242,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,7 +255,7 @@ 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\`);
  
@@ -272,7 +276,7 @@ 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 { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`recursive\`);
  
@@ -301,7 +305,7 @@ 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\`);
  
@@ -323,10 +327,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 +339,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,7 +353,7 @@ 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\`);
  
@@ -375,10 +380,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 +392,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 +402,115 @@ 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 = \\"\\") {
+    let ctx1 = ctx['subctx'];
+    return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
+  }
+}"
+`;
+
+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 = comp1({name: ctx['aab']}, key + \`__1\`, node, this, null);
+    const b3 = comp2({name: ctx['lpe']}, key + \`__2\`, node, this, null);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+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 and subcomponent, in dev mode 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`someTemplate\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let ctx1 = ctx['subctx'];
+    return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call t-call with t-call-context and subcomponent, in dev mode 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, false);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {name: ctx['aab']};
+    helpers.validateProps(\`Child\`, props1, node);
+    const b2 = comp1(props1, key + \`__1\`, node, this, null);
+    const props2 = {name: ctx['lpe']};
+    helpers.validateProps(\`Child\`, props2, node);
+    const b3 = comp2(props2, key + \`__2\`, node, this, null);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`t-call t-call with t-call-context and subcomponent, in dev mode 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`child\`);
+    const b3 = text(ctx['props'].name);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`t-call t-call with t-call-context, simple use 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`someTemplate\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let ctx1 = ctx['subctx'];
+    return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call t-call with t-call-context, 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]);
+  }
+}"
+`;
@@ -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>\`);
  
@@ -3,13 +3,14 @@
 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>\`);
  
  return function template(ctx, node, key = \\"\\") {
    const Comp1 = ctx['constructor'].components[ctx['state'].child];
-    const b2 = toggler(Comp1, component(Comp1, {}, key + \`__1\`, node, ctx));
+    const b2 = toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
    return block1([], [b2]);
  }
 }"
@@ -18,7 +19,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 +32,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 +45,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 +59,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 +72,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 +85,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 +99,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 +112,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 +125,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,7 +141,7 @@ 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>\`);
  
@@ -153,11 +157,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 +170,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 +183,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 +194,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 +207,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>\`);
  
@@ -3,8 +3,9 @@
 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>\`);
@@ -15,7 +16,7 @@ exports[`list of components components in a node in a t-foreach  1`] = `
    for (let i1 = 0; i1 < l_block2; i1++) {
      ctx[\`item\`] = v_block2[i1];
      const key1 = 'li_'+ctx['item'];
-      const b4 = component(\`Child\`, {item: ctx['item']}, key + \`__1__\${key1}\`, node, ctx);
+      const b4 = comp1({item: ctx['item']}, key + \`__1__\${key1}\`, node, this, null);
      c_block2[i1] = withKey(block3([], [b4]), key1);
    }
    const b2 = list(c_block2);
@@ -27,7 +28,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,8 +42,9 @@ 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 { prepareList, withKey } = helpers;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, OwlError, withKey } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
  
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
@@ -51,11 +53,11 @@ exports[`list of components crash on duplicate key in dev mode 1`] = `
    for (let i1 = 0; i1 < l_block1; i1++) {
      ctx[\`item\`] = v_block1[i1];
      const key1 = 'child';
-      if (keys1.has(key1)) { throw new Error(\`Got duplicate key in t-foreach: \${key1}\`)}
+      if (keys1.has(key1)) { throw new OwlError(\`Got duplicate key in t-foreach: \${key1}\`)}
      keys1.add(key1);
      const props1 = {};
-      helpers.validateProps(\`Child\`, props1, ctx);
-      c_block1[i1] = withKey(component(\`Child\`, props1, key + \`__1__\${key1}\`, node, ctx), key1);
+      helpers.validateProps(\`Child\`, props1, node);
+      c_block1[i1] = withKey(comp1(props1, key + \`__1__\${key1}\`, node, this, null), key1);
    }
    return list(c_block1);
  }
@@ -65,7 +67,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,8 +78,9 @@ 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>\`);
@@ -88,7 +91,7 @@ exports[`list of components list of sub components inside other nodes 1`] = `
    for (let i1 = 0; i1 < l_block2; i1++) {
      ctx[\`blip\`] = v_block2[i1];
      const key1 = ctx['blip'].id;
-      const b4 = component(\`SubComponent\`, {}, key + \`__1__\${key1}\`, node, ctx);
+      const b4 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
      c_block2[i1] = withKey(block3([], [b4]), key1);
    }
    const b2 = list(c_block2);
@@ -100,7 +103,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,8 +116,9 @@ 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>\`);
  
@@ -131,7 +135,7 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach
        ctx[\`blip\`] = v_block3[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);
+        c_block3[i2] = withKey(comp1({blip: ctx['blip']}, key + \`__1__\${key1}__\${key2}\`, node, this, null), key2);
      }
      ctx = ctx.__proto__;
      c_block2[i1] = withKey(list(c_block3), key1);
@@ -145,7 +149,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,8 +163,9 @@ 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>\`);
@@ -177,7 +182,7 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach,
      for (let i2 = 0; i2 < l_block4; i2++) {
        ctx[\`col\`] = v_block4[i2];
        const key2 = ctx['col'];
-        const b6 = component(\`Child\`, {row: ctx['row'],col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, ctx);
+        const b6 = comp1({row: ctx['row'],col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, this, null);
        c_block4[i2] = withKey(block5([], [b6]), key2);
      }
      ctx = ctx.__proto__;
@@ -193,7 +198,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,8 +212,9 @@ 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 = \\"\\") {
    ctx = Object.create(ctx);
@@ -216,7 +222,7 @@ exports[`list of components simple list 1`] = `
    for (let i1 = 0; i1 < l_block1; i1++) {
      ctx[\`elem\`] = v_block1[i1];
      const key1 = ctx['elem'].id;
-      c_block1[i1] = withKey(component(\`Child\`, {value: ctx['elem'].value}, key + \`__1__\${key1}\`, node, ctx), key1);
+      c_block1[i1] = withKey(comp1({value: ctx['elem'].value}, key + \`__1__\${key1}\`, node, this, null), key1);
    }
    return list(c_block1);
  }
@@ -226,7 +232,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,8 +246,9 @@ 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>\`);
  
@@ -251,7 +258,7 @@ exports[`list of components sub components rendered in a loop 1`] = `
    for (let i1 = 0; i1 < l_block2; i1++) {
      ctx[\`number\`] = v_block2[i1];
      const key1 = ctx['number'];
-      c_block2[i1] = withKey(component(\`Child\`, {n: ctx['number']}, key + \`__1__\${key1}\`, node, ctx), key1);
+      c_block2[i1] = withKey(comp1({n: ctx['number']}, key + \`__1__\${key1}\`, node, this, null), key1);
    }
    const b2 = list(c_block2);
    return block1([], [b2]);
@@ -262,7 +269,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,8 +283,9 @@ 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>\`);
  
@@ -287,7 +295,7 @@ exports[`list of components sub components with some state rendered in a loop 1`
    for (let i1 = 0; i1 < l_block2; i1++) {
      ctx[\`number\`] = v_block2[i1];
      const key1 = ctx['number'];
-      c_block2[i1] = withKey(component(\`Child\`, {}, key + \`__1__\${key1}\`, node, ctx), key1);
+      c_block2[i1] = withKey(comp1({}, key + \`__1__\${key1}\`, node, this, null), key1);
    }
    const b2 = list(c_block2);
    return block1([], [b2]);
@@ -298,7 +306,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,8 +320,9 @@ 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>\`);
  
@@ -323,7 +332,7 @@ 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);
+      c_block2[i1] = withKey(comp1({key: ctx['c']}, key + \`__1__\${key1}\`, node, this, null), key1);
    }
    const b2 = list(c_block2);
    return block1([], [b2]);
@@ -334,7 +343,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,8 +357,9 @@ 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>\`);
  
@@ -360,7 +370,7 @@ exports[`list of components t-foreach with t-component, and update 1`] = `
      ctx[\`n\`] = v_block2[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);
+      c_block2[i1] = withKey(comp1({val: ctx['n_index']}, key + \`__1__\${key1}\`, node, this, null), key1);
    }
    const b2 = list(c_block2);
    return block1([], [b2]);
@@ -371,7 +381,7 @@ 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>\`);
  
@@ -3,8 +3,9 @@
 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>\`);
  
@@ -15,7 +16,7 @@ exports[`t-key t-foreach with t-key switch component position 1`] = `
      ctx[\`c\`] = v_block2[i1];
      const key1 = ctx['c'];
      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);
+      c_block2[i1] = withKey(comp1({key: ctx['c']+ctx['key1']}, tKey_1 + key + \`__1__\${key1}\`, node, this, null), tKey_1 + key1);
    }
    const b2 = list(c_block2);
    return block1([], [b2]);
@@ -26,7 +27,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 +41,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 +54,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 +68,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 +84,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 +98,17 @@ 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>\`);
  
  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 +117,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,7 +131,7 @@ 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\`);
@@ -153,11 +158,12 @@ 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 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));
  }
 }"
 `;
@@ -165,7 +171,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,7 +185,7 @@ 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>\`);
@@ -194,13 +200,15 @@ 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 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 multi([b2, b3]);
  }
 }"
@@ -209,7 +217,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>\`);
  
@@ -3,7 +3,7 @@
 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>\`);
@@ -22,7 +22,7 @@ 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>\`);
@@ -41,7 +41,7 @@ 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>\`);
@@ -60,7 +60,7 @@ 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>\`);
@@ -79,7 +79,7 @@ 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>\`);
@@ -98,7 +98,7 @@ 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>\`);
@@ -117,7 +117,7 @@ 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>\`);
@@ -136,7 +136,7 @@ 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>\`);
@@ -165,7 +165,7 @@ 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>\`);
@@ -186,7 +186,7 @@ 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>\`);
@@ -213,7 +213,7 @@ 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>\`);
@@ -241,7 +241,7 @@ 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>\`);
@@ -269,7 +269,7 @@ 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>\`);
@@ -288,7 +288,7 @@ 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>\`);
@@ -306,7 +306,7 @@ 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>\`);
@@ -325,7 +325,7 @@ 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>\`);
@@ -348,7 +348,7 @@ 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>\`);
@@ -370,7 +370,7 @@ 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>\`);
@@ -394,7 +394,7 @@ 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>\`);
@@ -413,7 +413,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,7 +431,7 @@ 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>\`);
@@ -452,7 +452,7 @@ 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>\`);
@@ -476,7 +476,7 @@ 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>\`);
@@ -499,7 +499,7 @@ 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>\`);
@@ -523,7 +523,7 @@ 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>\`);
@@ -553,7 +553,7 @@ 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>\`);
@@ -584,7 +584,7 @@ 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>\`);
@@ -3,7 +3,7 @@
 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>\`);
@@ -33,7 +33,7 @@ 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>\`);
@@ -62,7 +62,7 @@ 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>\`);
@@ -96,7 +96,7 @@ 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>\`);
@@ -124,15 +124,16 @@ 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>\`);
  
  return function template(ctx, node, key = \\"\\") {
    const hdlr1 = [ctx['increment'], ctx];
-    const b2 = catcher1(component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx), [hdlr1]);
+    const b2 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
    let hdlr2 = [ctx['decrement'], ctx];
    return block1([hdlr2], [b2]);
  }
@@ -142,7 +143,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 +157,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 +172,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,8 +186,9 @@ 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 = \\"\\") {
@@ -196,7 +199,7 @@ exports[`t-on t-on on components and t-foreach 1`] = `
      const key1 = ctx['name'];
      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);
+      c_block1[i1] = withKey(catcher1(comp1({value: ctx['name']}, key + \`__1__\${key1}\`, node, this, null), [hdlr1]), key1);
    }
    return list(c_block1);
  }
@@ -206,7 +209,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,15 +223,16 @@ 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>\`);
  
  return function template(ctx, node, key = \\"\\") {
    const hdlr1 = [ctx['increment'], ctx];
-    const b2 = catcher1(component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx), [hdlr1]);
+    const b2 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
    return block1([], [b2]);
  }
 }"
@@ -237,7 +241,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 +255,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 +270,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,8 +284,9 @@ 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 = \\"\\") {
@@ -289,7 +295,7 @@ exports[`t-on t-on on components, with a handler update 1`] = `
    setContextValue(ctx, \\"name\\", ctx['state'].name);
    const v1 = ctx['name'];
    const hdlr1 = [()=>this.log(v1), ctx];
-    return catcher1(component(\`Child\`, {value: ctx['name']}, key + \`__1\`, node, ctx), [hdlr1]);
+    return catcher1(comp1({value: ctx['name']}, key + \`__1\`, node, this, null), [hdlr1]);
  }
 }"
 `;
@@ -297,7 +303,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 +317,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 +335,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,8 +349,9 @@ 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>\`);
  
@@ -352,7 +360,7 @@ exports[`t-on t-on on slot, with 'prevent' modifier 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, ctx);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -360,7 +368,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,9 +382,10 @@ 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>\`);
@@ -393,7 +402,7 @@ exports[`t-on t-on on t-set-slots 1`] = `
    const b3 = text(ctx['state'].count);
    const b4 = text(\`] \`);
    const ctx1 = capture(ctx);
-    const b8 = component(\`Child\`, {slots: markRaw({'myslot': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, ctx);
+    const b8 = comp1({slots: markRaw({'myslot': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
    return multi([b2, b3, b4, b8]);
  }
 }"
@@ -402,7 +411,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,8 +423,9 @@ 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>\`);
  
@@ -424,7 +434,7 @@ exports[`t-on t-on on t-slots 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, ctx);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -432,7 +442,7 @@ 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});
  
@@ -3,12 +3,13 @@
 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>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, Object.assign({}, ctx['some'].obj), key + \`__1\`, node, ctx);
+    const b2 = comp1(Object.assign({}, ctx['some'].obj), key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
 }"
@@ -17,7 +18,7 @@ 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>\`);
  
@@ -31,10 +32,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 +44,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 +57,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 +72,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 +87,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 +102,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,12 +116,13 @@ 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>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    const b2 = component(\`Child\`, Object.assign({}, ctx['childProps'], {a: 1,b: 2}), key + \`__1\`, node, ctx);
+    const b2 = comp1(Object.assign({}, ctx['childProps'], {a: 1,b: 2}), key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
 }"
@@ -126,7 +131,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/>\`);
  
@@ -3,8 +3,9 @@
 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>\`);
  
@@ -21,7 +22,7 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 1`] = `
    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 b2 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
    let txt2 = ctx['iter'];
    return block1([txt1, txt2], [b2]);
  }
@@ -31,7 +32,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 +51,27 @@ 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);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
    const b3 = text(\` in slot \`);
    const b4 = safeOutput(ctx['v']);
    return multi([b3, b4]);
  }
  
  function value1(ctx, node, key = \\"\\") {
-    return component(\`C\`, {}, key + \`__1\`, node, ctx);
+    return comp1({}, key + \`__1\`, node, this, null);
  }
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    return component(\`Child\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, ctx);
+    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
  }
 }"
 `;
@@ -76,7 +79,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 +93,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 +104,31 @@ 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>\`);
  
  function slot1(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, node);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
    const b5 = text(\` tea \`);
    const b6 = safeOutput(ctx['v']);
    return multi([b5, b6]);
  }
  
  function value1(ctx, node, key = \\"\\") {
-    const b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
    const b4 = block4();
    return multi([b3, b4]);
  }
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    return component(\`Blorg\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, ctx);
+    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
  }
 }"
 `;
@@ -131,7 +136,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 +150,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 +161,25 @@ 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);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
    return text(\` in slot \`);
  }
  
  function value1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return comp1({}, key + \`__1\`, node, this, null);
  }
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    return component(\`Child\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, ctx);
+    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
  }
 }"
 `;
@@ -180,7 +187,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,7 +201,7 @@ 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>\`);
@@ -213,7 +220,7 @@ 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>\`);
@@ -232,10 +239,10 @@ 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 block1 = createBlock(\`<div><p><block-text-0/></p></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
@@ -257,8 +264,9 @@ 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>\`);
  
@@ -267,7 +275,7 @@ exports[`t-set t-set not altered by child comp 1`] = `
    ctx[isBoundary] = 1
    setContextValue(ctx, \\"iter\\", 'source');
    let txt1 = ctx['iter'];
-    const b2 = component(\`Childcomp\`, {}, key + \`__1\`, node, ctx);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
    let txt2 = ctx['iter'];
    return block1([txt1, txt2], [b2]);
  }
@@ -277,7 +285,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,10 +304,10 @@ 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 block1 = createBlock(\`<div><p><block-text-0/></p></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
@@ -322,19 +330,20 @@ 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>\`);
  
  function value1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return comp1({}, key + \`__1\`, node, this, null);
  }
  
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, node);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
    const b3 = safeOutput(ctx['v']);
    return block1([], [b3]);
  }
@@ -344,7 +353,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,7 +364,7 @@ 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>\`);
@@ -368,7 +377,7 @@ exports[`t-set t-set with something in body 1`] = `
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, node);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
    const b3 = safeOutput(ctx['v']);
    return block1([], [b3]);
  }
@@ -1,5 +1,12 @@
 import { App, Component, mount, status, toRaw, useState, xml } from "../../src";
-import { elem, makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
+import {
+  elem,
+  makeTestFixture,
+  nextAppError,
+  nextTick,
+  snapshotEverything,
+  useLogLifecycle,
+} from "../helpers";
 import { markup } from "../../src/runtime/utils";

 let fixture: HTMLElement;
@@ -121,7 +128,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);
      }
    }

@@ -208,14 +215,14 @@ describe("basics", () => {
      static template = xml`<div/>`;
    }
    let error: Error;
-    const prom = mount(Test, fixture);
+    const app = new App(Test);
+    const prom = app.mount(fixture);
    await Promise.resolve();
    fixture.remove();
-    try {
-      await prom;
-    } catch (e) {
-      error = e as Error;
-    }
+    prom.catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(
+      "Cannot mount a component on a detached dom node"
+    );
    expect(error!).toBeDefined();
    expect(error!.message).toBe("Cannot mount a component on a detached dom node");
    expect(console.warn).toBeCalledTimes(1);
@@ -1084,4 +1091,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");
+  });
 });
@@ -1,4 +1,4 @@
-import { Component, mount, onWillDestroy } from "../../src";
+import { App, Component, mount, onWillDestroy } from "../../src";
 import {
  onError,
  onMounted,
@@ -18,7 +18,9 @@ import {
  nextMicroTick,
  snapshotEverything,
  useLogLifecycle,
+  nextAppError,
 } from "../helpers";
+import { OwlError } from "../../src/runtime/error_handling";

 let fixture: HTMLElement;

@@ -58,9 +60,10 @@ describe("basics", () => {
    parent.state.flag = true;

    parent.render();
-    await nextTick();
+    await expect(nextAppError(parent.__owl__.app)).resolves.toThrow(
+      "An error occured in the owl lifecycle"
+    );
    expect(fixture.innerHTML).toBe("");
-    expect(mockConsoleError).toBeCalledTimes(1);
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });

@@ -70,12 +73,13 @@ describe("basics", () => {
      static template = xml`<SomeMispelledComponent />`;
      static components = { SomeComponent };
    }
+    const app = new App(Parent);
    let error: Error;
-    try {
-      await mount(Parent, fixture);
-    } catch (e) {
-      error = e as Error;
-    }
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(
+      'Cannot find the definition of component "SomeMispelledComponent"'
+    );
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe('Cannot find the definition of component "SomeMispelledComponent"');
    expect(console.error).toBeCalledTimes(0);
@@ -89,12 +93,13 @@ describe("basics", () => {
      static template = xml`<SomeMispelledComponent />`;
      static components = { SomeComponent };
    }
+    const app = new App(Parent, { test: true });
    let error: Error;
-    try {
-      await mount(Parent, fixture, { test: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(
+      'Cannot find the definition of component "SomeMispelledComponent"'
+    );
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe('Cannot find the definition of component "SomeMispelledComponent"');
    expect(console.error).toBeCalledTimes(0);
@@ -108,13 +113,13 @@ describe("basics", () => {
      static template = xml`<SomeComponent />`;
      static components = { SomeComponent: notAComponentConstructor };
    }
+    const app = new App(Parent as typeof Component);
    let error: Error;
-    try {
-      // @ts-expect-error
-      await mount(Parent, fixture);
-    } catch (e) {
-      error = e as Error;
-    }
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(
+      '"SomeComponent" is not a Component. It must inherit from the Component class'
+    );
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      '"SomeComponent" is not a Component. It must inherit from the Component class'
@@ -155,26 +160,26 @@ describe("basics", () => {
 describe("errors and promises", () => {
  test("a rendering error will reject the mount promise", async () => {
    // we do not catch error in willPatch anymore
-    class App extends Component {
+    class Root extends Component {
      static template = xml`<div><t t-esc="this.will.crash"/></div>`;
    }

-    let error: Error;
-    try {
-      await mount(App, fixture);
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Root);
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await mountProm;
    expect(error!).toBeDefined();
+    expect(error!.cause).toBeDefined();
    const regexp =
      /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
-    expect(error!.message).toMatch(regexp);
+    expect(error!.cause.message).toMatch(regexp);
    expect(mockConsoleError).toBeCalledTimes(0);
    expect(mockConsoleError).toBeCalledTimes(0);
  });

  test("an error in mounted call will reject the mount promise", async () => {
-    class App extends Component {
+    class Root extends Component {
      static template = xml`<div>abc</div>`;
      setup() {
        onMounted(() => {
@@ -183,21 +188,21 @@ describe("errors and promises", () => {
      }
    }

-    let error: Error;
-    try {
-      await mount(App, fixture);
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Root);
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await mountProm;
    expect(error!).toBeDefined();
-    expect(error!.message).toBe("boom");
+    expect(error!.cause).toBeDefined();
+    expect(error!.cause.message).toBe("boom");
    expect(fixture.innerHTML).toBe("");
    expect(mockConsoleError).toBeCalledTimes(0);
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });

  test("an error in onMounted callback will have the component's setup in its stack trace", async () => {
-    class App extends Component {
+    class Root extends Component {
      static template = xml`<div>abc</div>`;
      setup() {
        onMounted(() => {
@@ -206,14 +211,13 @@ describe("errors and promises", () => {
      }
    }

-    let error: Error;
-    try {
-      await mount(App, fixture, { test: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Root, { test: true });
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
+    await mountProm;
    expect(error!).toBeDefined();
-    expect(error!.stack).toContain("App.setup");
+    expect(error!.stack).toContain("Root.setup");
    expect(error!.stack).toContain("error_handling.test.ts");
    expect(fixture.innerHTML).toBe("");
    expect(mockConsoleError).toBeCalledTimes(0);
@@ -221,7 +225,7 @@ describe("errors and promises", () => {
  });

  test("errors in onWillRender/onRender aren't wrapped more than once", async () => {
-    class App extends Component {
+    class Root extends Component {
      static template = xml`<div>abc</div>`;
      setup() {
        onWillRender(() => {
@@ -233,12 +237,11 @@ describe("errors and promises", () => {
      }
    }

-    let error: Error;
-    try {
-      await mount(App, fixture, { test: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Root, { test: true });
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillRender");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      `The following error occurred in onWillRender: "boom in onWillRender"`
@@ -264,6 +267,29 @@ describe("errors and promises", () => {
    expect(error!.message).toBe("Tokenizer error: could not tokenize `{ 'invalid: 5 }`");
  });

+  test("wrapped errors in async code are correctly caught", async () => {
+    class Root extends Component {
+      static template = xml`<div>abc</div>`;
+      setup() {
+        onWillStart(async () => {
+          await Promise.resolve();
+          throw new Error("boom in onWillStart");
+        });
+      }
+    }
+
+    const app = new App(Root, { test: true });
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
+    await mountProm;
+    expect(error!).toBeDefined();
+    expect(error!.message).toBe(
+      `The following error occurred in onWillStart: "boom in onWillStart"`
+    );
+    await new Promise((r) => setTimeout(r, 0)); // wait for the rejection event to bubble
+  });
+
  test("an error in willPatch call will reject the render promise", async () => {
    class Root extends Component {
      static template = xml`<div><t t-esc="val"/></div>`;
@@ -315,21 +341,21 @@ describe("errors and promises", () => {
    class Child extends Component {
      static template = xml`<div><t t-esc="this.will.crash"/></div>`;
    }
-    class App extends Component {
+    class Parent extends Component {
      static template = xml`<div><Child/></div>`;
      static components = { Child };
    }

-    let error: Error;
-    try {
-      await mount(App, fixture);
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Parent);
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await mountProm;
    expect(error!).toBeDefined();
+    expect(error!.cause).toBeDefined();
    const regexp =
      /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
-    expect(error!.message).toMatch(regexp);
+    expect(error!.cause.message).toMatch(regexp);
    expect(mockConsoleError).toBeCalledTimes(0);
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });
@@ -339,7 +365,7 @@ describe("errors and promises", () => {
      static template = xml`<div><t t-if="flag" t-esc="this.will.crash"/></div>`;
      flag = false;
      setup() {
-        onError((e) => (error = e));
+        onError(({ cause }) => (error = cause));
      }
    }

@@ -366,16 +392,16 @@ describe("errors and promises", () => {
      static components = { Child };
    }

-    let error: Error;
-    try {
-      await mount(Parent, fixture);
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Parent);
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await mountProm;
    expect(error!).toBeDefined();
+    expect(error!.cause).toBeDefined();
    const regexp =
      /Cannot read properties of undefined \(reading 'y'\)|Cannot read property 'y' of undefined/g;
-    expect(error!.message).toMatch(regexp);
+    expect(error!.cause.message).toMatch(regexp);
    expect(mockConsoleError).toBeCalledTimes(0);
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });
@@ -396,13 +422,12 @@ describe("errors and promises", () => {
      }
    }

-    try {
-      await mount(Example, fixture, { test: true });
-    } catch (e) {
-      expect((e as Error).message).toBe(
-        `The following error occurred in onMounted: "Error in mounted"`
-      );
-    }
+    const app = new App(Example, { test: true });
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
+    await mountProm;
+    expect(error!.message).toBe(`The following error occurred in onMounted: "Error in mounted"`);
    // 1 additional error is logged because the destruction of the app causes
    // the onWillUnmount hook to be called and to fail
    expect(mockConsoleError).toBeCalledTimes(1);
@@ -419,9 +444,10 @@ describe("errors and promises", () => {

    root.state = "boom";
    root.render();
-    await nextTick();
+    await expect(nextAppError(root.__owl__.app)).resolves.toThrow(
+      "error occured in the owl lifecycle"
+    );
    expect(fixture.innerHTML).toBe("");
-    expect(mockConsoleError).toBeCalledTimes(1);
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });
 });
@@ -471,17 +497,150 @@ describe("can catch errors", () => {
        });
      }
    }
-    let e: Error;
-    try {
-      await mount(Root, fixture, { test: true });
-    } catch (error) {
-      e = error as Error;
-    }
-    expect(e!.message).toBe(
+    const app = new App(Root, { test: true });
+    let error: OwlError;
+    const crashProm = expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
+    await app.mount(fixture).catch((e: Error) => (error = e));
+    await crashProm;
+    expect(error!.message).toBe(
      `The following error occurred in onWillStart: "No active component (a hook function should only be called in 'setup')"`
    );
  });

+  test("Errors have the right cause", async () => {
+    const err = new Error("test error");
+    class Root extends Component {
+      static template = xml`<t t-esc="state.value"/>`;
+      state = useState({ value: 1 });
+
+      setup() {
+        onMounted(() => {
+          throw err;
+        });
+      }
+    }
+    const app = new App(Root, { test: true });
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
+    await mountProm;
+    expect(error!.message).toBe(`The following error occurred in onMounted: "test error"`);
+    expect(error!.cause).toBe(err);
+  });
+
+  test("Errors in owl lifecycle are wrapped in dev mode: async hook", async () => {
+    const err = new Error("test error");
+    class Root extends Component {
+      static template = xml`<t t-esc="state.value"/>`;
+      state = useState({ value: 1 });
+
+      setup() {
+        onWillStart(async () => {
+          await nextMicroTick();
+          throw err;
+        });
+      }
+    }
+    const app = new App(Root, { test: true });
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
+    await mountProm;
+    expect(error!.message).toBe(`The following error occurred in onWillStart: "test error"`);
+    expect(error!.cause).toBe(err);
+  });
+
+  test("Errors in owl lifecycle are wrapped outside dev mode: sync hook", async () => {
+    const err = new Error("test error");
+    class Root extends Component {
+      static template = xml`<t t-esc="state.value"/>`;
+      state = useState({ value: 1 });
+
+      setup() {
+        onMounted(() => {
+          throw err;
+        });
+      }
+    }
+    const app = new App(Root);
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await mountProm;
+    expect(error!.message).toBe(
+      `An error occured in the owl lifecycle (see this Error's "cause" property)`
+    );
+    expect(error!.cause).toBe(err);
+  });
+
+  test("Errors in owl lifecycle are wrapped out of dev mode: async hook", async () => {
+    const err = new Error("test error");
+    class Root extends Component {
+      static template = xml`<t t-esc="state.value"/>`;
+      state = useState({ value: 1 });
+
+      setup() {
+        onWillStart(async () => {
+          await nextMicroTick();
+          throw err;
+        });
+      }
+    }
+    const app = new App(Root);
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await mountProm;
+    expect(error!.message).toBe(
+      `An error occured in the owl lifecycle (see this Error's "cause" property)`
+    );
+    expect(error!.cause).toBe(err);
+  });
+
+  test("Thrown values that are not errors are wrapped in dev mode", async () => {
+    class Root extends Component {
+      static template = xml`<t t-esc="state.value"/>`;
+      state = useState({ value: 1 });
+
+      setup() {
+        onMounted(() => {
+          throw "This is not an error";
+        });
+      }
+    }
+    const app = new App(Root, { test: true });
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("not an Error was thrown in onMounted");
+    await mountProm;
+    expect(error!.message).toBe(
+      `Something that is not an Error was thrown in onMounted (see this Error's "cause" property)`
+    );
+    expect(error!.cause).toBe("This is not an error");
+  });
+
+  test("Thrown values that are not errors are wrapped outside dev mode", async () => {
+    class Root extends Component {
+      static template = xml`<t t-esc="state.value"/>`;
+      state = useState({ value: 1 });
+
+      setup() {
+        onMounted(() => {
+          throw "This is not an error";
+        });
+      }
+    }
+    const app = new App(Root);
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await mountProm;
+    expect(error!.message).toBe(
+      `An error occured in the owl lifecycle (see this Error's "cause" property)`
+    );
+    expect(error!.cause).toBe("This is not an error");
+  });
+
  test("can catch an error in the initial call of a component render function (parent mounted)", async () => {
    class ErrorComponent extends Component {
      static template = xml`<div>hey<t t-esc="state.this.will.crash"/></div>`;
@@ -1180,8 +1339,8 @@ describe("can catch errors", () => {
    class Catch extends Component {
      static template = xml`<t t-slot="default" />`;
      setup() {
-        onError((error) => {
-          this.props.onError(error);
+        onError(({ cause }) => {
+          this.props.onError(cause);
        });
      }
    }
@@ -171,4 +171,22 @@ describe("event handling", () => {
    // input is removed when component is destroyed => nothing should happen
    expect([]).toBeLogged();
  });
+
+  test("handler works when app is mounted in an iframe", async () => {
+    let clickCount = 0;
+
+    class Parent extends Component {
+      static template = xml`<span t-on-click="inc">click me</span>`;
+      inc() {
+        clickCount++;
+      }
+    }
+    const iframe = document.createElement("iframe");
+    fixture.appendChild(iframe);
+    const iframeDoc = iframe.contentDocument!;
+    await mount(Parent, iframeDoc.body);
+    expect(clickCount).toBe(0);
+    iframeDoc.querySelector("span")!.click();
+    expect(clickCount).toBe(1);
+  });
 });
@@ -17,8 +17,17 @@ import {
  useChildSubEnv,
  useSubEnv,
  xml,
+  OwlError,
 } from "../../src/index";
-import { elem, logStep, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { useRoots } from "../../src/runtime/hooks";
+import {
+  elem,
+  logStep,
+  makeTestFixture,
+  nextAppError,
+  nextTick,
+  snapshotEverything,
+} from "../helpers";

 let fixture: HTMLElement;

@@ -510,7 +519,7 @@ describe("hooks", () => {
    });

    test("dependencies prevent effects from rerunning when unchanged", async () => {
-      let steps = [];
+      let steps: string[] = [];
      class MyComponent extends Component {
        state = useState({
          a: 0,
@@ -650,11 +659,12 @@ describe("hooks", () => {
        }
      }

-      try {
-        await mount(MyComponent, fixture);
-      } catch (e: any) {
-        expect(e.message).toBe("Intentional error");
-      }
+      let error: OwlError;
+      const app = new App(MyComponent);
+      const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+      await mountProm;
+      expect(error!.cause.message).toBe("Intentional error");
      // no console.error because the error has been caught in this test
      expect(console.error).toHaveBeenCalledTimes(0);
      console.error = originalconsoleError;
@@ -664,3 +674,110 @@ describe("hooks", () => {
    });
  });
 });
+
+describe("useRoots hook", () => {
+  test("return a list of nodes and elems", async () => {
+    class MyComponent extends Component {
+      static template = xml`<span>hey</span>`;
+      roots: any;
+
+      setup() {
+        this.roots = useRoots();
+      }
+    }
+
+    const comp = await mount(MyComponent, fixture);
+
+    expect(comp.roots.node).toBeInstanceOf(HTMLSpanElement);
+    expect(comp.roots.elem).toBeInstanceOf(HTMLSpanElement);
+    expect([...comp.roots.nodes].map((n: any) => n.tagName)).toEqual(["SPAN"]);
+    expect([...comp.roots.elems].map((n: any) => n.tagName)).toEqual(["SPAN"]);
+  });
+
+  test("return a list of nodes and elems", async () => {
+    class MyComponent extends Component {
+      static template = xml`
+        some text
+        <span>hey</span>
+        coucou
+        <p>bla</p>`;
+      roots: any;
+
+      setup() {
+        this.roots = useRoots();
+      }
+    }
+
+    const comp = await mount(MyComponent, fixture);
+
+    expect(comp.roots.node).toBeInstanceOf(Text);
+    expect(comp.roots.elem).toBeInstanceOf(HTMLSpanElement);
+
+    expect([...comp.roots.elems].map((n: any) => n.tagName)).toEqual(["SPAN", "P"]);
+    expect([...comp.roots.nodes].map((n: any) => n.nodeType)).toEqual([3, 1, 3, 1]);
+  });
+
+  test("useRoots and lifecycle", async () => {
+    expect.assertions(13);
+    class MyComponent extends Component {
+      static template = xml`<span>hey</span>`;
+      roots: any;
+
+      setup() {
+        this.roots = useRoots();
+        expect(this.roots.elem).toBe(null);
+        expect(this.roots.node).toBe(null);
+        expect([...this.roots.nodes]).toEqual([]);
+        expect([...this.roots.elems]).toEqual([]);
+        onWillStart(() => {
+          expect(this.roots.elem).toBe(null);
+          expect(this.roots.node).toBe(null);
+          expect([...this.roots.nodes]).toEqual([]);
+          expect([...this.roots.elems]).toEqual([]);
+        });
+        onMounted(() => {
+          expect(this.roots.elem).toBeInstanceOf(HTMLSpanElement);
+          expect(this.roots.node).toBeInstanceOf(HTMLSpanElement);
+          expect([...this.roots.elems].map((n: any) => n.tagName)).toEqual(["SPAN"]);
+          expect([...this.roots.nodes].map((n: any) => n.nodeType)).toEqual([1]);
+        });
+      }
+    }
+
+    const comp = await mount(MyComponent, fixture);
+    comp.__owl__.app.destroy();
+  });
+
+  test("useRoots is up to date", async () => {
+    class MyComponent extends Component {
+      static template = xml`
+        <t t-if="state.flag">
+          <span>hey</span>
+        </t>
+        <t t-else="">
+          coucou
+          <p>paragraph</p>
+        </t>`;
+      roots: any;
+      state: any;
+
+      setup() {
+        this.roots = useRoots();
+        this.state = useState({ flag: true });
+        onMounted(() => {
+          expect(this.roots.elem).toBeInstanceOf(HTMLSpanElement);
+          expect(this.roots.node).toBeInstanceOf(HTMLSpanElement);
+          expect([...this.roots.elems].map((n: any) => n.tagName)).toEqual(["SPAN"]);
+          expect([...this.roots.nodes].map((n: any) => n.nodeType)).toEqual([1]);
+        });
+      }
+    }
+
+    const comp = await mount(MyComponent, fixture);
+    comp.state.flag = false;
+    await nextTick();
+    expect(comp.roots.node.nodeType).toBe(3); // text node
+    expect(comp.roots.node.textContent).toBe(" coucou "); // text node
+    expect(comp.roots.elem).toBeInstanceOf(HTMLParagraphElement);
+  });
+});
@@ -1,6 +1,6 @@
-import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
-import { Component, onError, xml, mount } from "../../src";
-import { DEV_MSG } from "../../src/runtime/app";
+import { makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
+import { Component, onError, xml, mount, OwlError } from "../../src";
+import { App, DEV_MSG } from "../../src/runtime/app";
 import { validateProps } from "../../src/runtime/template_helpers";
 import { Schema } from "../../src/runtime/validation";

@@ -48,13 +48,14 @@ describe("props validation", () => {
      static components = { SubComp };
      static template = xml`<div><SubComp /></div>`;
    }
-    let error: Error | undefined;

-    try {
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Parent, { test: true });
+    let error: OwlError | undefined;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(
+      "Invalid props for component 'SubComp': 'message' is missing"
+    );
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe("Invalid props for component 'SubComp': 'message' is missing");
    error = undefined;
@@ -77,12 +78,13 @@ describe("props validation", () => {
      static template = xml`<div><SubComp /></div>`;
    }

-    let error: Error;
-    try {
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Parent, { test: true });
+    let error: OwlError | undefined;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(
+      "Invalid props for component 'SubComp': 'message' is missing"
+    );
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe("Invalid props for component 'SubComp': 'message' is missing");
  });
@@ -126,14 +128,12 @@ describe("props validation", () => {
      };
      (Parent as any).components = { SubComp };

-      let error: Error | undefined;
      props = {};
-
-      try {
-        await mount(Parent, fixture, { dev: true });
-      } catch (e) {
-        error = e as Error;
-      }
+      let app = new App(Parent, { test: true });
+      let error: OwlError | undefined;
+      let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
+      await mountProm;
      expect(error!).toBeDefined();
      expect(error!.message).toBe(
        `Invalid props for component '_a': 'p' is undefined (should be a ${test.type.name.toLowerCase()})`
@@ -147,11 +147,10 @@ describe("props validation", () => {
      }
      expect(error!).toBeUndefined();
      props = { p: test.ko };
-      try {
-        await mount(Parent, fixture, { dev: true });
-      } catch (e) {
-        error = e as Error;
-      }
+      app = new App(Parent, { test: true });
+      mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
+      await mountProm;
      expect(error!).toBeDefined();
      expect(error!.message).toBe(
        `Invalid props for component '_a': 'p' is not a ${test.type.name.toLowerCase()}`
@@ -181,13 +180,12 @@ describe("props validation", () => {
        static template = xml`<div>hey</div>`;
      };
      (Parent as any).components = { SubComp };
-      let error: Error | undefined;
      props = {};
-      try {
-        await mount(Parent, fixture, { dev: true });
-      } catch (e) {
-        error = e as Error;
-      }
+      let app = new App(Parent, { test: true });
+      let error: OwlError | undefined;
+      let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
+      await mountProm;
      expect(error!).toBeDefined();
      expect(error!.message).toBe(
        `Invalid props for component '_a': 'p' is undefined (should be a ${test.type.name.toLowerCase()})`
@@ -201,11 +199,10 @@ describe("props validation", () => {
      }
      expect(error!).toBeUndefined();
      props = { p: test.ko };
-      try {
-        await mount(Parent, fixture, { dev: true });
-      } catch (e) {
-        error = e as Error;
-      }
+      app = new App(Parent, { test: true });
+      mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
+      await mountProm;
      expect(error!).toBeDefined();
      expect(error!.message).toBe(
        `Invalid props for component '_a': 'p' is not a ${test.type.name.toLowerCase()}`
@@ -227,26 +224,25 @@ describe("props validation", () => {
    }
    let error: Error;
    let props: { p?: any };
+    props = { p: "string" };
    try {
-      props = { p: "string" };
      await mount(Parent, fixture, { dev: true });
    } catch (e) {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
+    props = { p: true };
    try {
-      props = { p: true };
      await mount(Parent, fixture, { dev: true });
    } catch (e) {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
-    try {
-      props = { p: 1 };
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    props = { p: 1 };
+    const app = new App(Parent, { test: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'SubComp': 'p' is not a string or boolean"
@@ -267,26 +263,25 @@ describe("props validation", () => {
    }
    let error: Error;
    let props: { p?: any };
+    props = { p: "key" };
    try {
-      props = { p: "key" };
      await mount(Parent, fixture, { dev: true });
    } catch (e) {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
+    props = {};
    try {
-      props = {};
      await mount(Parent, fixture, { dev: true });
    } catch (e) {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
-    try {
-      props = { p: 1 };
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    props = { p: 1 };
+    const app = new App(Parent, { test: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe("Invalid props for component 'SubComp': 'p' is not a string");
  });
@@ -319,20 +314,18 @@ describe("props validation", () => {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
-    try {
-      props = { p: [1] };
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    props = { p: [1] };
+    let app = new App(Parent, { test: true });
+    let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await mountProm;
    expect(error!).toBeDefined();
    error = undefined;
-    try {
-      props = { p: ["string", 1] };
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    app = new App(Parent, { test: true });
+    mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await mountProm;
+    expect(error!).toBeDefined();
  });

  test("can validate an array with multiple sub element types", async () => {
@@ -370,12 +363,11 @@ describe("props validation", () => {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
-    try {
-      props = { p: [true, 1] };
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    props = { p: [true, 1] };
+    const app = new App(Parent, { test: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'SubComp': 'p[1]' is not a string or boolean"
@@ -405,33 +397,30 @@ describe("props validation", () => {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
-    try {
-      props = { p: { id: 1, url: "url", extra: true } };
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    props = { p: { id: 1, url: "url", extra: true } };
+    let app = new App(Parent, { test: true });
+    let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'SubComp': 'p' has not the correct shape (unknown key 'extra')"
    );
-    try {
-      props = { p: { id: "1", url: "url" } };
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    props = { p: { id: "1", url: "url" } };
+    app = new App(Parent, { test: true });
+    mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'SubComp': 'p' has not the correct shape ('id' is not a number)"
    );
    error = undefined;
-    try {
-      props = { p: { id: 1 } };
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    props = { p: { id: 1 } };
+    app = new App(Parent, { test: true });
+    mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'SubComp': 'p' has not the correct shape ('url' is missing (should be a string))"
@@ -474,12 +463,11 @@ describe("props validation", () => {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
-    try {
-      props = { p: { id: 1, url: [12, true] } };
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    props = { p: { id: 1, url: [12, true] } };
+    const app = new App(Parent, { test: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'SubComp': 'p' has not the correct shape ('url' is not a boolean or list of numbers)"
@@ -686,11 +674,10 @@ describe("props validation", () => {
      static components = { SubComp };
    }
    let error: Error;
-    try {
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Parent, { test: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe("Invalid props for component 'SubComp': 'p' is missing");
  });
@@ -754,11 +741,10 @@ describe("props validation", () => {
      static template = xml`<div><Child/></div>`;
    }
    let error: Error;
-    try {
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Parent, { test: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'Child'");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'Child': 'mandatory' is missing (should be a number)"
@@ -859,11 +845,12 @@ describe("default props", () => {
      static template = xml`<Child/>`;
    }
    let error: Error;
-    try {
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Parent, { test: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(
+      "default value cannot be defined for a mandatory prop"
+    );
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "A default value cannot be defined for a mandatory prop (name: 'mandatory', component: Child)"
@@ -1,5 +1,5 @@
-import { Component, mount, onMounted, useRef, useState } from "../../src/index";
-import { logStep, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { App, Component, mount, onMounted, useRef, useState } from "../../src/index";
+import { logStep, makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
 import { xml } from "../../src/index";

 snapshotEverything();
@@ -94,9 +94,14 @@ describe("refs", () => {
      ref = useRef("coucou");
    }

-    await expect(async () => {
-      await mount(Test, fixture);
-    }).rejects.toThrowError("Cannot have 2 elements with same ref name at the same time");
+    const app = new App(Test, { test: true });
+    const mountProm = expect(app.mount(fixture)).rejects.toThrowError(
+      "Cannot have 2 elements with same ref name at the same time"
+    );
+    await expect(nextAppError(app)).resolves.toThrow(
+      "Cannot have 2 elements with same ref name at the same time"
+    );
+    await mountProm;
    expect(console.warn).toBeCalledTimes(1);
    console.warn = consoleWarn;
  });
@@ -1,5 +1,5 @@
 import { App, Component, mount, onMounted, useState, xml } from "../../src/index";
-import { children, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { children, makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";

 snapshotEverything();
 let originalconsoleWarn = console.warn;
@@ -204,13 +204,12 @@ describe("slots", () => {
      static components = { Child };
    }

-    let error = null;
-    try {
-      await mount(Parent, fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).not.toBeNull();
+    let error: Error;
+    const app = new App(Parent);
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await mountProm;
+    expect(error!).not.toBeNull();
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });

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

 snapshotEverything();
 let fixture: HTMLElement;
@@ -342,20 +343,20 @@ describe("style and class handling", () => {
    class Child extends Component {
      static template = xml`<div t-att-class="props.class" t-esc="this.will.crash"/>`;
    }
-    class ParentWidget extends Component {
+    class Parent extends Component {
      static template = xml`<Child class="'a'"/>`;
      static components = { Child };
    }
-    let error: Error;
-    try {
-      await mount(ParentWidget, fixture);
-    } catch (e) {
-      error = e as Error;
-    }
+    let error: OwlError;
+    const app = new App(Parent);
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await mountProm;
    expect(error!).toBeDefined();
+    expect(error!.cause).toBeDefined();
    const regexp =
      /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
-    expect(error!.message).toMatch(regexp);
+    expect(error!.cause.message).toMatch(regexp);
    expect(fixture.innerHTML).toBe("");
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });
@@ -244,4 +244,75 @@ 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");
+  });
+
+  test("t-call with t-call-context and subcomponent, in dev mode", async () => {
+    class Child extends Component {
+      static template = xml`child<t t-esc="props.name"/>`;
+      static props = ["name"];
+    }
+
+    class Root extends Component {
+      static template = xml`
+          <t t-call="someTemplate" t-call-context="subctx"/>`;
+
+      static components = { Child };
+
+      subctx = { aab: "aaron", lpe: "lucas" };
+    }
+
+    await mount(Root, fixture, {
+      dev: true,
+      templates: `
+        <templates>
+          <t t-name="someTemplate">
+            <Child name="aab"/>
+            <Child name="lpe"/>
+          </t>
+        </templates>`,
+    });
+    expect(fixture.innerHTML).toBe("childaaronchildlucas");
+  });
 });
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Géry Debongnie	1253b3922b	[IMP] hooks: add useRoots hook closes #1260	2022-09-24 16:35:33 +02:00
Géry Debongnie	d5ed25cd19	[FIX] props validation: does not crash with t-call-context The code for props validation assumed that the rendering context was a component. This was actually true when it was written, but is no longer true since t-call-context was introduced. Because of that, it would crash when trying to access the internals of the component, such as the static components object. The fix is simple: instead of passing the context to the props validation code, which can now be anything, we pass the component node, which is guaranteed to give a reference to the component (and also to the app). This also make the code slightly simpler. closes #1261	2022-09-24 08:34:22 +02:00
Géry Debongnie	c4f0f17b9b	[FIX] blockdom: prevent side effects at block compilation When creating the template node for a block, we create htmlelements and set their (static) attributes. But this can have side effects. For example, setting the src attribute for an img element will trigger a request to fetch the image. We avoid that issue by simply setting the html element template node inside a <template/> element. Note that I don't really see how to test this fix in jest: we don't have a real browser, and no real way to check for this side effect. closes #1257	2022-09-21 13:59:13 +02:00
Florent Dardenne - dafl@odoo	d27455e9f2	[IMP] doc: explicit `useEffect` first parameter The `useEffect` has two parameters: * The `effect` function * The `computeDependencies` function The `effect` function always take as parameters the result of the `computeDependencies` function. Expliciting this allows to better understand the `useEffect` behaviour and the following example in the doc: ``` useEffect( (el) => el && el.focus(), () => [ref.el] ); ```	2022-09-09 20:24:56 +02:00
Géry Debongnie	6ef38676c4	[DOC] doc: fix broken link and update roadmap	2022-09-09 09:45:05 +02:00
Géry Debongnie	b51756f356	[REL] v2.0.0-beta-20 # v2.0.0-beta-20 - app: properly rethrow unhandled errors	2022-09-09 09:26:12 +02:00
Samuel Degueldre	cfdf7caa50	[IMP] app: rethrow errors that were not handled This commit makes it so that when an error occurs in an owl app and none of the registered error handlers are able to handle it, we rethrow the error instead of just logging it to the console and swallowing it. This allows users of owl to handle errors that happen in owl applications by using event listeners for error and unhandledrejection events on the window.	2022-09-09 09:23:32 +02:00
Florent Dardenne - dafl@odoo	a5a6a592c1	[FIX] tutorial_todoapp: fix the final code mount issue In app.js, `mount(Root, document.body, { dev: true, env });` crash because `body` is not available yet. Therefore, moving the script into the body fix the issue.	2022-09-08 13:30:38 +02:00
Géry Debongnie	d0d7482b0f	[REL] v2.0.0-beta-19 # v2.0.0-beta-19 - fix: events: correctly call handlers in iframes	2022-09-06 12:13:25 +02:00
Samuel Degueldre	8fe4c0c76e	[FIX] events: correctly call handlers in iframes Previously, event handlers would not work when an app was mounted in an iframe, this is caused by a guard in the event handler that checks that the target element is still in the document, but it doesn't check against the correct document in the case of an iframe. This commit changes the check to check against the target's ownerDocument.	2022-09-06 12:06:59 +02:00
Géry Debongnie	c1afaeb92a	[REL] v2.0.0-beta-18 # v2.0.0-beta-18 - fix: allow multiple occurrences of same slot in different locations	2022-09-02 14:57:18 +02:00
Géry Debongnie	3883cec079	[FIX] slots: prevent crash when using same slot in different locations Before this commit, a crash could occur when a component with no props is defined in a slot, and that slot is conditionally displayed in multiple locations. The reason for that is that the key provided to the callSlot function was identical, so from the perspective of the component function, it was not possible to make the difference between a component located in either places. With this commit, we make sure that a unique key is used when a slot is reused in a template (or if it is dynamic, because in that case, we have no idea at compile time if it will be unique or not) closes #1246	2022-09-02 12:12:00 +02:00
Géry Debongnie	9cb74d619b	[REL] v2.0.0-beta-17 # v2.0.0-beta-17 - imp: types: expose ComponentConstructor for typing purpose - fix: compiler: fix falsy values for properties not keeping input empty - fix: app: allow mounting owl apps in iframe	2022-09-01 15:41:33 +02:00
Samuel Degueldre	a93f015795	[FIX] app: allow mounting owl apps in iframe Previously, attempting to mount an app in an iframe would crash, saying that the target is not a valid DOM element, this is because instanceof checks do not work cross-frame as global objects do not have the same identity in frames as with the main window. This commit fixes that by making sure the target is an instance of HTMLElement of the corresponding window, and checks that the corresponding document body contains it.	2022-08-17 10:05:46 +02:00
Samuel Degueldre	02a187d80b	[FIX] compiler: fix falsy values for properties not keeping input empty Recently, we made it so that when a component is rendered, it always updates the property values for computed properties. This was done by wrapping the value in a String or Boolean object. One issue with this is that wrapping a falsy value in a String doesn't yield an empty string, but a string containing the value as text (eg new String(undefined) -> "undefined"), which causes the value to not remain empty as per the spec. This commit fixes that by adding a fallback to the empty string for falsy values before converting to a String object. closes: #1236	2022-08-05 09:50:38 +02:00
Rémi Rahir	d3b0d1971e	[IMP] types: expose ComponentConstructor for typing purpose We have been using this type in o-spreadsheet since https://github.com/odoo/o-spreadsheet/pull/1187 but the new typing file (https://github.com/odoo/owl/pull/1207) does not include it. It would be useful to allow us to bump or version of owl witouht having to resort to long aboslute paths (i.e. import from `@odoo/owl`and not `@odoo/owl/dist/types/runtime/component@ everywhere).	2022-07-25 14:34:14 +02:00
Géry Debongnie	b90aa0e23a	[REL] v2.0.0-beta-16 # v2.0.0-beta-16 Notes - fix: components: fix cause left unset when thrown object is not Error	2022-07-22 09:43:43 +02:00
Samuel Degueldre	163366997c	[FIX] components: fix cause left unset when thrown object is not Error Previously, when wrapping errors in wrapError, if the error was not an actual error object, we wouldn't set the cause property on the wrapping error correctly. The "instanceof Error" check is simply there so that we can know whether we can add the original errors message to the wrapping error, but the line that sets the error's cause was mistakenly moved into that condition. This commit also fixes the wrapping error's message in the case of non-Error objects, to avoid having "the following error occurred in hookname:" with nothing after the colon which is confusing/misleading.	2022-07-22 09:21:19 +02:00
Géry Debongnie	588b655c11	[REL] v2.0.0-beta-15 # v2.0.0-beta-15 Notes - fix: lifecyle_hooks: correctly wrap errors in async code - imp: use a custom error class for all errors thrown by owl - fix: package.json: remove browser value - ref: component_node: slightly simplify code	2022-07-20 10:02:24 +02:00
Géry Debongnie	f5d5273c25	[REF] component_node: slightly simplify code	2022-07-20 09:57:27 +02:00
Géry Debongnie	9fd662fdce	[FIX] package.json: remove browser value As far as I can tell, the browser value overrides the main value in many cases. But then, we don't want to use the iife format, since it don't work well with bundlers. This commit fixes the issue by simply removing the key, so the main entry will be used instead. maybe fixes #1181	2022-07-20 09:56:39 +02:00
Samuel Degueldre	7786077921	[IMP] *: use a custom error class for all errors thrown by owl This commit makes all errors thrown in owl use a custom error class. The main point of this is to always wrap user-code errors that happen during the owl lifecycle so that they can be treated uniformly in onError by checking the cause property, and also allows user code to differenciate owl errors from non-owl errors reliably at runtime.	2022-07-18 15:40:14 +02:00
Aaron Bohy	30bc605c84	[FIX] lifecyle_hooks: correctly wrap errors in async code Before this commit, wrapping an error occurring in async code would result in an unhandledpromise exception, because we created another promise, that would be rejected and that we didn't catch.	2022-07-18 15:40:14 +02:00
Géry Debongnie	d1118455aa	[REL] v2.0.0-beta-14 # v2.0.0-beta-14 Yes, there is no beta-13 release... ## Fixes: - [FIX] compiler: better handle update of properties with same value	2022-07-08 16:11:45 +02:00
Géry Debongnie	f8073cb153	[FIX] compiler: better handle update of properties with same value Before this commit, owl would incorrectly skip patching html properties when the new value is the same as the value used in the previous render. However, this is incorrect, since the user may have changed the value by clicking on a checkbox, or changing some text in an input. So, to be more correct, owl has to force the update whenever it encounters a prop. This is however hard to do without impacting the main update loop, so we kind of work around the problem by using String and Boolean instance, instead of primitive values.	2022-07-08 15:58:49 +02:00
Géry Debongnie	6c72e0a143	[REL] v2.0.0-beta-12 # v2.0.0-beta-12 - fix: compiler: properly handle t-set in t-if with no content	2022-06-29 11:12:59 +02:00
Géry Debongnie	382e3e4010	[FIX] compiler: properly handle t-set in t-if with no content Before this commit, whenever Owl encounter a t-if, it generates an anchor (a "hole") in the current block being compiled. However, in some cases, the content of the t-if may not have any content at all, and the anchor is then useless. Worse, the code generating the anchor generates an index based on the number of sub blocks, but if there is no content, the next anchor being created will have the same index, which then may cause weird bugs. A possible way to fix this could be to make sure we increment properly the anchor index, but we could even do better: not having an anchor at all.	2022-06-29 11:08:14 +02:00
Géry Debongnie	76c389a7a8	[REL] v2.0.0-beta-11 # v2.0.0-beta-11 Yet another release with some small fixes. [FIX] fix some issues with t-out with falsy values, and with default values [REF] app: slightly simplify the create component path [IMP] compiler: add support for binary operators [IMP] add support for t-call-context directive [FIX] properly get component reference instead of context [FIX] blockdom: fix crash when class object key has leading spaces	2022-06-28 15:28:12 +02:00
Géry Debongnie	b9ba0abf41	[FIX] test: run prettier	2022-06-28 15:26:55 +02:00
Géry Debongnie	4ca37be7f3	[FIX] tests: update wrong snapshot oups	2022-06-28 15:20:53 +02:00
Géry Debongnie	d6667ddf2e	[FIX] fix some issues with t-out with falsy values, and with default value	2022-06-28 15:10:11 +02:00
Géry Debongnie	6f86beeaf3	[REF] app: slightly simplify the create component path	2022-06-28 13:11:57 +02:00
Géry Debongnie	7f580a4e1d	[IMP] compiler: add support for binary operators	2022-06-24 15:39:55 +02:00
Géry Debongnie	c7459ef87b	[IMP] add support for t-call-context directive	2022-06-22 16:15:54 +02:00
Géry Debongnie	5772b4e9e4	[FIX] properly get component reference instead of context Before this commit, the generated code for the component directive was using the current context as the place to look for static informations (such as the sub components). However, it is not entirely correct, since the current context may be different than the current component (which is easily accessed by using the this variable). Also, while doing this, we fix some issues in the t-set directive, which as calling lazy values with the wrong this.	2022-06-22 16:15:54 +02:00
Samuel Degueldre	e57e2ee378	[FIX] blockdom: fix crash when class object key has leading spaces Previously, having a leading or trailing space caused HTMLElement.classList.add to be called with an empty string (because we are splitting on whitespace), which is not allowed and caused a crash. This commit fixes that by trimming the keys of the class object in the same way that we already do it for class strings.	2022-06-22 15:48:45 +02:00
Géry Debongnie	2e03332acd	[REL] v2.0.0-beta-10 # v2.0.0-beta-10 - ref: compiler: remove useless ; in compiled output - ref: move some code around - imp: app: small scale perf improvement - imp: app: add fast path for when component has no prop - imp: validation: add support for value types - fix: compiler: escape backticks in attributes	2022-06-22 10:33:12 +02:00
Aaron Bohy	c16d7d52b1	[FIX] compiler: escape backticks in attributes Before this commit, the generated code crashed if an attribute in the template contained backticks. The compiler output something like ```js let block1 = createBlock(`<div foo="`bar`"/>`); ``` The backticks are now properly escaped.	2022-06-22 10:22:31 +02:00
Géry Debongnie	9c4c3e3b83	[IMP] validation: add support for value types This commit add supports for value types in prop validation. To describe a value V type, one has to simply write {value: V}. Note that this commit also improves the validation typing. closes #1198 closes #910	2022-06-15 08:56:44 +02:00
Géry Debongnie	55ac43c1db	[IMP] app: add fast path for when component has no prop	2022-06-13 09:51:31 +02:00
Géry Debongnie	d046913a01	[IMP] app: small scale perf improvement	2022-06-13 09:51:31 +02:00
Géry Debongnie	0e6059467f	[REF] move component function to app, improve some code	2022-06-13 09:51:31 +02:00
Géry Debongnie	51538c2fea	[IMP] compiler: remove useless ; in compiled output	2022-06-13 09:51:31 +02:00