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

# v2.0.0-beta-12

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

README.md

@@ -93,6 +93,7 @@ Are you new to Owl? This is the place to start!
 - [Loading Templates](doc/reference/app.md#loading-templates)
 - [Mounting a component](doc/reference/app.md#mount-helper)
 - [Portal](doc/reference/portal.md)
+- [Precompiling templates](doc/reference/precompiling_templates.md)
 - [Props](doc/reference/props.md)
 - [Props Validation](doc/reference/props.md#props-validation)
 - [Reactivity](doc/reference/reactivity.md)

doc/readme.md

@@ -45,4 +45,5 @@ Utility/helpers:
 - [`loadFile`](reference/utils.md#loadfile): an helper to load a file from the server
 - [`markup`](reference/templates.md#outputting-data): utility function to define strings that represent html (should not be escaped)
 - [`status`](reference/component.md#status-helper): utility function to get the status of a component (new, mounted or destroyed)
+- [`validate`](reference/utils.md#validate): validates if an object satisfies a specified schema
 - [`whenReady`](reference/utils.md#whenready): utility function to execute code when DOM is ready

doc/reference/app.md

@@ -61,6 +61,8 @@ The `config` object is an object with some of the following keys:
   templates (see [translations](translations.md))
 - **`templates (string | xml document)`**: all the templates that will be used by
   the components created by the application.
+- **`warnIfNoStaticProps (boolean, default=false)`**: if true, Owl will log a warning
+  whenever it encounters a component that does not provide a [static props description](props.md#props-validation).
 
 ## `mount` helper
 

doc/reference/context.md

@@ -1,105 +0,0 @@
-# 🦉 Context 🦉
-
-## Content
-
-- [Overview](#overview)
-- [Example](#example)
-- [Reference](#reference)
-  - [`Context`](#context)
-  - [`useContext`](#usecontext)
-
-## Overview
-
-The `Context` object provides a way to share data between an arbitrary number
-of components. Usually, data is passed from a parent to its children component,
-but when we have to deal with some mostly global information, this can be
-annoying, since each component will need to pass the information to each children,
-even though some or most of them will not use the information.
-
-With a `Context` object, each component can subscribe (with the `useContext` hook)
-to its state, and will be updated whenever the context state is updated.
-
-## Example
-
-Assume that we have an application with various components which needs to render
-differently depending on the size of the device. Here is how we could proceed
-to make sure that the information is properly shared. First, let us create a
-context, and add it to the environment:
-
-```js
-const deviceContext = new Context({ isMobile: true });
-App.env.deviceContext = deviceContext;
-```
-
-If we want to make it completely responsive, we need to update its value whenever
-the size of the screen is updated:
-
-```js
-const isMobile = () => window.innerWidth <= 768;
-window.addEventListener(
-  "resize",
-  owl.utils.debounce(() => {
-    const state = deviceContext.state;
-    if (state.isMobile !== isMobile()) {
-      state.isMobile = !state.isMobile;
-    }
-  }, 15)
-);
-```
-
-Then, each component that want can subscribe and render differently depending on the
-fact that we are in a mobile or desktop mode.
-
-```js
-class SomeComponent extends Component {
-  static template = xml`
-    <div>
-      <t t-if=device.isMobile>
-          some simplified user interface
-      </t>
-      <t t-else="">
-          a more advanced user interface
-      </t>
-    </div>`;
-  device = useContext(this.env.deviceContext);
-}
-```
-
-## Reference
-
-### `Context`
-
-A `Context` object should be created with a state object:
-
-```js
-const someContext = new Context({ some: "key" });
-```
-
-Its state is now available in the `state` key:
-
-```js
-someContext.state.some = "other key";
-```
-
-This is the way some global code (such as the responsive code above) should
-read and update the context state. However, components should not ever read the
-context state directly from the context, they should instead use the `useContext`
-hook to properly register themselves to state changes.
-
-Note that the `Context` hook is different from the React version. For example,
-there is no concept of provider/consumer. So, the `Context` feature does not
-by itself allow the use of a different context state depending on the component
-place in the component tree. However, this functionality can be obtained, if
-necessary, with the use of sub environment.
-
-### `useContext`
-
-The `useContext` hook is the normal way for a component to register themselve
-to context state changes. The `useContext` method returns the context state:
-
-```js
-device = useContext(this.env.deviceContext);
-```
-
-It is a simple observed state (with an owl `Observer`), which contains the shared
-information.

doc/reference/precompiling_templates.md

@@ -0,0 +1,30 @@
+# 🦉 Precompiling templates 🦉
+
+Owl is designed to be used by the Odoo javascript framework. Since Odoo handles
+its assets in its own non standard way, it was decided/assumed that Owl would
+compile templates at runtime.
+
+However, in some cases, it is not optimal, or even worse, not possible to do that.
+For example, browser extensions do not allow javascript code to create a new
+function (using the `new Function(...)` syntax).
+
+Therefore, in these cases, it is required to compile templates ahead of time. It
+is possible to do that in Owl, but the tooling is still rough. For now, the
+process is the following:
+
+1. write your templates in xml files (with a `t-name` directive to declare the name
+   of the template)
+2. Compile them in a `templates.js` file
+3. get the `owl.iife.runtime.js` file (which is a owl build without the compiler)
+4. bundle `owl.iife.runtime.js` and `template.js` with your assets (owl needs to
+   be positioned before the templates)
+
+Here is a more detailed explanation on how to compile xml files into a js file:
+
+1. clone the owl repository locally
+2. `npm install` to install all the required tooling
+3. `npm run build:runtime` to build the `owl.iife.runtime.js` file
+4. `npm run build:compiler` to build the template compiler
+5. `npm run compile_templates -- path/to/your/templates` will scan your target
+   folder, find all xml files, get all templates, compile them, and generate a
+   `templates.js` file.

doc/reference/props.md

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

doc/reference/reactivity.md

@@ -26,9 +26,9 @@ To solve this issue, Owl provides two reactivity primitives:
 Most of the time, the `useState` hook is the best solution.
 
 Since version 2.0, Owl applies the fine grained reactivity at the component
-level: props are automatically turned into reactive object, so Owl can track
+level: reactive objects received as props are automatically subscribed to by the
-which part of these props are consumed by each component, and is therefore able
+component, so Owl can track which part of these props are consumed by each
-to only rerender the impacted components.
+component, and is therefore able to only rerender the impacted components.
 
 ## `useState`
 

doc/reference/slots.md

@@ -239,6 +239,12 @@ And the child component that includes the slot can provide values like this:
 <t t-slot="foo" bool="other_var" num="5">
 ```
 
+or this:
+
+```xml
+<t t-slot="foo" t-props="someObject">
+```
+
 In the case of the default slot, you may declare the slot scope directly on the
 component itself:
 

doc/reference/templates.md

@@ -290,10 +290,11 @@ If an expression evaluates to a falsy value, it will not be set at all:
 
 It is sometimes convenient to format an attribute with string interpolation. In
 that case, the `t-attf-` directive can be used. It is useful when we need to mix
-literal and dynamic elements, such as css classes.
+literal and dynamic elements, such as css classes. The dynamic elements can be
+specified with either `{{...}}` or `#{...}`:
 
 ```xml
-<div t-attf-foo="a {{value1}} is {{value2}} of {{value3}} ]"/>
+<div t-attf-foo="a {{value1}} is #{value2} of {{value3}} ]"/>
 <!-- result if values are set to 1,2 and 3: <div foo="a 0 is 1 of 2 ]"></div> -->
 ```
 
@@ -539,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,

doc/reference/utils.md

@@ -8,6 +8,7 @@ functions are all available in the `owl.utils` namespace.
 - [`whenReady`](#whenready): executing code when DOM is ready
 - [`loadFile`](#loadfile): loading a file (useful for templates)
 - [`EventBus`](#eventbus): a simple EventBus
+- [`validate`](#validate): a validation function
 
 ## `whenReady`
 
@@ -56,3 +57,24 @@ bus.addEventListener("event", () => console.log("something happened"));
 
 bus.trigger("event"); // 'something happened' is logged
 ```
+
+## `validate`
+
+The `validate` function is a function that validates if a given object satisfies a
+specified schema. It is actually used by Owl itself to perform
+[props validation](props.md#props-validation). For example:
+
+```js
+validate(
+  { a: "hey" },
+  {
+    id: Number,
+    url: [Boolean, { type: Array, element: Number }],
+  }
+);
+
+// throws an error with the following information:
+//    - unknown key 'a',
+//    - 'id' is missing (should be a number),
+//    - 'url' is missing (should be a boolean or list of numbers),
+```

package.json

@@ -1,11 +1,11 @@
 {
   "name": "@odoo/owl",
-  "version": "2.0.0-beta-6",
+  "version": "2.0.0-beta-12",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "browser": "dist/owl.iife.js",
   "module": "dist/owl.es.js",
-  "types": "dist/types/index.d.ts",
+  "types": "dist/types/owl.d.ts",
   "files": [
     "dist"
   ],
@@ -14,6 +14,8 @@
   },
   "scripts": {
     "build:bundle": "rollup -c --failAfterWarnings",
+    "build:runtime": "rollup -c --failAfterWarnings runtime",
+    "build:compiler": "rollup -c --failAfterWarnings compiler",
     "build": "npm run build:bundle",
     "test": "jest",
     "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --watch --testTimeout=5000000",
@@ -25,7 +27,8 @@
     "prettier": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,doc/**/*.md} --write",
     "check-formatting": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,doc/**/*.md} --check",
     "publish": "npm run build && npm publish",
-    "release": "node tools/release.js"
+    "release": "node tools/release.js",
+    "compile_templates": "node tools/compile_xml.js"
   },
   "repository": {
     "type": "git",
@@ -52,6 +55,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "2.4.1",
     "rollup": "^2.56.3",
+    "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.1",
     "sass": "^1.16.1",

rollup.config.js

@@ -2,14 +2,10 @@ import pkg from "./package.json";
 import git from "git-rev-sync";
 import typescript from 'rollup-plugin-typescript2';
 import { terser } from "rollup-plugin-terser";
+import dts from "rollup-plugin-dts";
 
-const name = "owl";
+let input, output;
-const extend = true;
 
-/**
- * Meta data to be added on the __info__ object.
- * Used to let external tools know the current owl version.
- */
 const outro = `
 __info__.version = '${pkg.version}';
 __info__.date = '${new Date().toISOString()}';
@@ -17,13 +13,39 @@ __info__.hash = '${git.short()}';
 __info__.url = 'https://github.com/odoo/owl';
 `;
 
+switch (process.argv[4]) {
+  case "compiler": 
+    input = "src/compiler/index.ts",
+    output = [
+      getConfigForFormat('cjs', 'dist/compiler.js', ''),
+    ]
+    break;
+  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),
+    ]
+    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),
+    ]
+  }
+
 /**
  * Generate from a string depicting a path a new path for the minified version.
  * @param {string} pkgFileName file name
  */
-function generateMinifiedNameFromPkgName(pkgFileName) {
+function addSuffix(pkgFileName, suffix) {
   const parts = pkgFileName.split('.');
-  parts.splice(parts.length - 1, 0, "min");
+  parts.splice(parts.length - 1, 0, suffix);
   return parts.join('.');
 }
 
@@ -33,12 +55,12 @@ function generateMinifiedNameFromPkgName(pkgFileName) {
  * @param {string} generatedFileName generated file name
  * @param {boolean} minified should it be minified
  */
-function getConfigForFormat(format, generatedFileName, minified = false) {
+function getConfigForFormat(format, generatedFileName, outro, minified = false) {
   return {
-    file: minified ? generateMinifiedNameFromPkgName(generatedFileName) : generatedFileName,
+    file: minified ? addSuffix(generatedFileName, "min") : generatedFileName,
     format: format,
-    name: name,
+    name: "owl",
-    extend: extend,
+    extend: true,
     outro: outro,
     freeze: false,
     plugins: minified ? [terser()] : [],
@@ -46,26 +68,19 @@ function getConfigForFormat(format, generatedFileName, minified = false) {
   };
 }
 
-export default {
+export default [
-  input: "src/index.ts",
+  {
-  output: [
+    input,
-
+    output,
-    /**
+    plugins: [
-     * Read about module formats:
+      typescript({
-     *  https://auth0.com/blog/javascript-module-systems-showdown/
+        useTsconfigDeclarationDir: true
-     *  https://medium.com/@kelin2025/so-you-wanna-use-es6-modules-714f48b3a953
+      }),
-     */
+    ]
-
+  },
-    getConfigForFormat('esm', pkg.module),
+  {
-    getConfigForFormat('esm', pkg.module, true),
+    input: "dist/types/index.d.ts",
-    getConfigForFormat('cjs', pkg.main),
+    output: [{ file: "dist/types/owl.d.ts", format: "es" }],
-    getConfigForFormat('cjs', pkg.main, true),
+    plugins: [dts()],
-    getConfigForFormat('iife', pkg.browser),
+  },
-    getConfigForFormat('iife', pkg.browser, true),
+];
-  ],
-  plugins: [
-    typescript({
-      useTsconfigDeclarationDir: true
-    }),
-  ]
-};

src/compiler/code_generator.ts

@@ -1,4 +1,10 @@
-import { compileExpr, compileExprToArray, interpolate, INTERP_REGEXP } from "./inline_expressions";
+import {
+  compileExpr,
+  compileExprToArray,
+  interpolate,
+  INTERP_REGEXP,
+  replaceDynamicParts,
+} from "./inline_expressions";
 import {
   AST,
   ASTComment,
@@ -42,17 +48,20 @@ export interface CodeGenOptions extends Config {
 const xmlDoc = document.implementation.createDocument(null, null, null);
 
 const MODS = new Set(["stop", "capture", "prevent", "self", "synthetic"]);
+
+let nextDataIds: { [key: string]: number } = {};
+
+function generateId(prefix: string = "") {
+  nextDataIds[prefix] = (nextDataIds[prefix] || 0) + 1;
+  return prefix + nextDataIds[prefix];
+}
+
 // -----------------------------------------------------------------------------
 // BlockDescription
 // -----------------------------------------------------------------------------
 
 class BlockDescription {
   static nextBlockId = 1;
-  static nextDataIds: { [key: string]: number } = {};
-  static generateId(prefix: string) {
-    this.nextDataIds[prefix] = (this.nextDataIds[prefix] || 0) + 1;
-    return prefix + this.nextDataIds[prefix];
-  }
 
   varName: string;
   blockName: string;
@@ -78,7 +87,7 @@ class BlockDescription {
   }
 
   insertData(str: string, prefix: string = "d"): number {
-    const id = BlockDescription.generateId(prefix);
+    const id = generateId(prefix);
     this.target.addLine(`let ${id} = ${str};`);
     return this.data.push(id) - 1;
   }
@@ -131,9 +140,10 @@ interface Context {
   tKeyExpr: string | null;
   nameSpace?: string;
   tModelSelectedExpr?: string;
+  ctxVar?: string;
 }
 
-function createContext(parentCtx: Context, params?: Partial<Context>) {
+function createContext(parentCtx: Context, params?: Partial<Context>): Context {
   return Object.assign(
     {
       block: null,
@@ -209,7 +219,6 @@ const translationRE = /^(\s*)([\s\S]+?)(\s*)$/;
 
 export class CodeGenerator {
   blocks: BlockDescription[] = [];
-  ids: { [key: string]: number } = {};
   nextBlockId = 1;
   hasSafeContext: boolean;
   isDebug: boolean = false;
@@ -246,7 +255,7 @@ export class CodeGenerator {
     const ast = this.ast;
     this.isDebug = ast.type === ASTType.TDebug;
     BlockDescription.nextBlockId = 1;
-    BlockDescription.nextDataIds = {};
+    nextDataIds = {};
     this.compileAST(ast, {
       block: null,
       index: 0,
@@ -256,9 +265,7 @@ export class CodeGenerator {
       tKeyExpr: null,
     });
     // define blocks and utility functions
-    let mainCode = [
+    let mainCode = [`  let { text, createBlock, list, multi, html, toggler, comment } = bdom;`];
-      `  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;`,
-    ];
     if (this.helpers.size) {
       mainCode.push(`let { ${[...this.helpers].join(", ")} } = helpers;`);
     }
@@ -276,6 +283,7 @@ export class CodeGenerator {
       for (let block of this.blocks) {
         if (block.dom) {
           let xmlString = block.asXmlString();
+          xmlString = xmlString.replace(/`/g, "\\`");
           if (block.dynamicTagName) {
             xmlString = xmlString.replace(/^<\w+/, `<\${tag || '${block.dom.nodeName}'}`);
             xmlString = xmlString.replace(/\w+>$/, `\${tag || '${block.dom.nodeName}'}>`);
@@ -308,7 +316,7 @@ export class CodeGenerator {
   }
 
   compileInNewTarget(prefix: string, ast: AST, ctx: Context, on?: EventHandlers | null): string {
-    const name = this.generateId(prefix);
+    const name = generateId(prefix);
     const initialTarget = this.target;
     const target = new CodeTarget(name, on);
     this.targets.push(target);
@@ -326,13 +334,8 @@ export class CodeGenerator {
     this.addLine(`const ${varName} = ${expr};`);
   }
 
-  generateId(prefix: string = ""): string {
+  insertAnchor(block: BlockDescription, index: number = block.children.length) {
-    this.ids[prefix] = (this.ids[prefix] || 0) + 1;
+    const tag = `block-child-${index}`;
-    return prefix + this.ids[prefix];
-  }
-
-  insertAnchor(block: BlockDescription) {
-    const tag = `block-child-${block.children.length}`;
     const anchor = xmlDoc.createElement(tag);
     block.insert(anchor);
   }
@@ -407,7 +410,7 @@ export class CodeGenerator {
       .map((tok) => {
         if (tok.varName && !tok.isLocal) {
           if (!mapping.has(tok.varName)) {
-            const varId = this.generateId("v");
+            const varId = generateId("v");
             mapping.set(tok.varName, varId);
             this.define(varId, tok.value);
           }
@@ -553,7 +556,7 @@ export class CodeGenerator {
       block = this.createBlock(block, "block", ctx);
       this.blocks.push(block);
       if (ast.dynamicTag) {
-        const tagExpr = this.generateId("tag");
+        const tagExpr = generateId("tag");
         this.define(tagExpr, compileExpr(ast.dynamicTag));
         block.dynamicTagName = tagExpr;
       }
@@ -609,11 +612,8 @@ export class CodeGenerator {
       this.target.hasRef = true;
       const isDynamic = INTERP_REGEXP.test(ast.ref);
       if (isDynamic) {
-        const str = ast.ref.replace(
+        const str = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, true));
-          INTERP_REGEXP,
+        const idx = block!.insertData(`(el) => refs[${str}] = el`, "ref");
-          (expr) => "${" + this.captureExpression(expr.slice(2, -2), true) + "}"
-        );
-        const idx = block!.insertData(`(el) => refs[\`${str}\`] = el`, "ref");
         attrs["block-ref"] = String(idx);
       } else {
         let name = ast.ref;
@@ -625,7 +625,7 @@ export class CodeGenerator {
           attrs["block-ref"] = String(index);
           info[1] = `multiRefSetter(refs, \`${name}\`)`;
         } else {
-          let id = this.generateId("ref");
+          let id = generateId("ref");
           this.target.refInfo[name] = [id, `(el) => refs[\`${name}\`] = el`];
           const index = block!.data.push(id) - 1;
           attrs["block-ref"] = String(index);
@@ -648,11 +648,11 @@ export class CodeGenerator {
       } = ast.model;
 
       const baseExpression = compileExpr(baseExpr);
-      const bExprId = this.generateId("bExpr");
+      const bExprId = generateId("bExpr");
       this.define(bExprId, baseExpression);
 
       const expression = compileExpr(expr);
-      const exprId = this.generateId("expr");
+      const exprId = generateId("expr");
       this.define(exprId, expression);
 
       const fullExpression = `${bExprId}[${exprId}]`;
@@ -662,7 +662,7 @@ export class CodeGenerator {
         idx = block!.insertData(`${fullExpression} === '${attrs[targetAttr]}'`, "attr");
         attrs[`block-attribute-${idx}`] = specialInitTargetAttr;
       } else if (hasDynamicChildren) {
-        const bValueId = this.generateId("bValue");
+        const bValueId = generateId("bValue");
         tModelSelectedExpr = `${bValueId}`;
         this.define(tModelSelectedExpr, fullExpression);
       } else {
@@ -692,7 +692,7 @@ export class CodeGenerator {
       const children = ast.content;
       for (let i = 0; i < children.length; i++) {
         const child = ast.content[i];
-        const subCtx: Context = createContext(ctx, {
+        const subCtx = createContext(ctx, {
           block,
           index: block!.childNumber,
           forceNewBlock: false,
@@ -754,21 +754,37 @@ export class CodeGenerator {
       this.insertAnchor(block);
     }
     block = this.createBlock(block, "html", ctx);
-    this.helpers.add(ast.expr === "0" ? "zero" : "safeOutput");
+    let blockStr;
-    let expr = ast.expr === "0" ? "ctx[zero]" : `safeOutput(${compileExpr(ast.expr)})`;
+    if (ast.expr === "0") {
-    if (ast.body) {
+      this.helpers.add("zero");
-      const nextId = BlockDescription.nextBlockId;
+      blockStr = `ctx[zero]`;
-      const subCtx: Context = createContext(ctx);
+    } 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");
+      this.helpers.add("safeOutput");
-      expr = `withDefault(${expr}, b${nextId})`;
+      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 { block, forceNewBlock } = ctx;
-    let currentIndex = index;
     const codeIdx = this.target.code.length;
     const isNewBlock = !block || (block.type !== "multi" && forceNewBlock);
     if (block) {
@@ -778,28 +794,16 @@ export class CodeGenerator {
       block = this.createBlock(block, "multi", ctx);
     }
     this.addLine(`if (${compileExpr(ast.condition)}) {`);
-    this.target.indentLevel++;
+    this.compileTIfBranch(ast.content, block, ctx);
-    this.insertAnchor(block!);
-    const subCtx: Context = createContext(ctx, { block, index: currentIndex });
-    this.compileAST(ast.content, subCtx);
-    this.target.indentLevel--;
     if (ast.tElif) {
       for (let clause of ast.tElif) {
         this.addLine(`} else if (${compileExpr(clause.condition)}) {`);
-        this.target.indentLevel++;
+        this.compileTIfBranch(clause.content, block, ctx);
-        this.insertAnchor(block);
-        const subCtx: Context = createContext(ctx, { block, index: currentIndex });
-        this.compileAST(clause.content, subCtx);
-        this.target.indentLevel--;
       }
     }
     if (ast.tElse) {
       this.addLine(`} else {`);
-      this.target.indentLevel++;
+      this.compileTIfBranch(ast.tElse, block, ctx);
-      this.insertAnchor(block);
-      const subCtx: Context = createContext(ctx, { block, index: currentIndex });
-      this.compileAST(ast.tElse, subCtx);
-      this.target.indentLevel--;
     }
     this.addLine("}");
     if (isNewBlock) {
@@ -869,7 +873,7 @@ export class CodeGenerator {
     let id: string;
     if (ast.memo) {
       this.target.hasCache = true;
-      id = this.generateId();
+      id = generateId();
       this.define(`memo${id}`, compileExpr(ast.memo));
       this.define(`vnode${id}`, `cache[key${this.target.loopLevel}];`);
       this.addLine(`if (vnode${id}) {`);
@@ -885,7 +889,7 @@ export class CodeGenerator {
       this.addLine("}");
     }
 
-    const subCtx: Context = createContext(ctx, { block, index: loopVar });
+    const subCtx = createContext(ctx, { block, index: loopVar });
     this.compileAST(ast.body, subCtx);
     if (ast.memo) {
       this.addLine(
@@ -904,7 +908,7 @@ export class CodeGenerator {
   }
 
   compileTKey(ast: ASTTKey, ctx: Context) {
-    const tKeyExpr = this.generateId("tKey_");
+    const tKeyExpr = generateId("tKey_");
     this.define(tKeyExpr, compileExpr(ast.expr));
     ctx = createContext(ctx, {
       tKeyExpr,
@@ -932,7 +936,7 @@ export class CodeGenerator {
     for (let i = 0, l = ast.content.length; i < l; i++) {
       const child = ast.content[i];
       const isTSet = child.type === ASTType.TSet;
-      const subCtx: Context = createContext(ctx, {
+      const subCtx = createContext(ctx, {
         block,
         index,
         forceNewBlock: !isTSet,
@@ -968,16 +972,21 @@ export class CodeGenerator {
 
   compileTCall(ast: ASTTCall, ctx: Context) {
     let { block, forceNewBlock } = ctx;
+    let ctxVar = ctx.ctxVar || "ctx";
+    if (ast.context) {
+      ctxVar = generateId("ctx");
+      this.addLine(`let ${ctxVar} = ${compileExpr(ast.context)};`);
+    }
     if (ast.body) {
-      this.addLine(`ctx = Object.create(ctx);`);
+      this.addLine(`${ctxVar} = Object.create(${ctxVar});`);
-      this.addLine(`ctx[isBoundary] = 1;`);
+      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);
@@ -989,26 +998,27 @@ export class CodeGenerator {
     }
     const key = `key + \`${this.generateComponentKey()}\``;
     if (isDynamic) {
-      const templateVar = this.generateId("template");
+      const templateVar = generateId("template");
+      if (!this.staticDefs.find((d) => d.id === "call")) {
+        this.staticDefs.push({ id: "call", expr: `app.callTemplate.bind(app)` });
+      }
       this.define(templateVar, subTemplate);
       block = this.createBlock(block, "multi", ctx);
-      this.helpers.add("call");
+      this.insertBlock(`call(this, ${templateVar}, ${ctxVar}, node, ${key})`, block!, {
-      this.insertBlock(`call(this, ${templateVar}, ctx, node, ${key})`, block!, {
         ...ctx,
         forceNewBlock: !block,
       });
     } else {
-      const id = this.generateId(`callTemplate_`);
+      const id = generateId(`callTemplate_`);
-      this.helpers.add("getTemplate");
+      this.staticDefs.push({ id, expr: `app.getTemplate(${subTemplate})` });
-      this.staticDefs.push({ id, expr: `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__;`);
     }
   }
 
@@ -1031,7 +1041,7 @@ export class CodeGenerator {
       this.helpers.add("LazyValue");
       const bodyAst: AST = { type: ASTType.Multi, content: ast.body };
       const name = this.compileInNewTarget("value", bodyAst, ctx);
-      let value = `new LazyValue(${name}, ctx, node)`;
+      let value = `new LazyValue(${name}, ctx, this, node)`;
       value = ast.value ? (value ? `withDefault(${expr}, ${value})` : expr) : value;
       this.addLine(`ctx[\`${ast.name}\`] = ${value};`);
     } else {
@@ -1046,12 +1056,12 @@ 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});`);
     }
   }
 
   generateComponentKey() {
-    const parts = [this.generateId("__")];
+    const parts = [generateId("__")];
     for (let i = 0; i < this.target.loopLevel; i++) {
       parts.push(`\${key${i + 1}}`);
     }
@@ -1085,30 +1095,32 @@ export class CodeGenerator {
     return `${name}: ${value || undefined}`;
   }
 
-  formatPropObject(obj: { [prop: string]: any }): string {
+  formatPropObject(obj: { [prop: string]: any }): string[] {
-    const params = [];
+    return Object.entries(obj).map(([k, v]) => this.formatProp(k, v));
-    for (const [n, v] of Object.entries(obj)) {
+  }
-      params.push(this.formatProp(n, v));
+
+  getPropString(props: string[], dynProps: string | null): string {
+    let propString = `{${props.join(",")}}`;
+    if (dynProps) {
+      propString = `Object.assign({}, ${compileExpr(dynProps)}${
+        props.length ? ", " + propString : ""
+      })`;
     }
-    return params.join(", ");
+    return propString;
   }
 
   compileComponent(ast: ASTComponent, ctx: Context) {
     let { block } = ctx;
     // props
     const hasSlotsProp = "slots" in (ast.props || {});
-    const props: string[] = [];
+    const props: string[] = ast.props ? this.formatPropObject(ast.props) : [];
-    const propExpr = this.formatPropObject(ast.props || {});
-    if (propExpr) {
-      props.push(propExpr);
-    }
 
     // slots
     let slotDef: string = "";
     if (ast.slots) {
       let ctxStr = "ctx";
       if (this.target.loopLevel || !this.hasSafeContext) {
-        ctxStr = this.generateId("ctx");
+        ctxStr = generateId("ctx");
         this.helpers.add("capture");
         this.define(ctxStr, `capture(ctx)`);
       }
@@ -1125,7 +1137,7 @@ export class CodeGenerator {
           params.push(`__scope: "${scope}"`);
         }
         if (ast.slots[slotName].attrs) {
-          params.push(this.formatPropObject(ast.slots[slotName].attrs!));
+          params.push(...this.formatPropObject(ast.slots[slotName].attrs!));
         }
         const slotInfo = `{${params.join(", ")}}`;
         slotStr.push(`'${slotName}': ${slotInfo}`);
@@ -1138,18 +1150,11 @@ export class CodeGenerator {
       props.push(`slots: markRaw(${slotDef})`);
     }
 
-    const propStr = `{${props.join(",")}}`;
+    let propString = this.getPropString(props, ast.dynamicProps);
-
-    let propString = propStr;
-    if (ast.dynamicProps) {
-      propString = `Object.assign({}, ${compileExpr(ast.dynamicProps)}${
-        props.length ? ", " + propStr : ""
-      })`;
-    }
 
     let propVar: string;
     if ((slotDef && (ast.dynamicProps || hasSlotsProp)) || this.dev) {
-      propVar = this.generateId("props");
+      propVar = generateId("props");
       this.define(propVar!, propString);
       propString = propVar!;
     }
@@ -1163,7 +1168,7 @@ export class CodeGenerator {
     const key = this.generateComponentKey();
     let expr: string;
     if (ast.isDynamic) {
-      expr = this.generateId("Comp");
+      expr = generateId("Comp");
       this.define(expr, compileExpr(ast.name));
     } else {
       expr = `\`${ast.name}\``;
@@ -1182,8 +1187,17 @@ export class CodeGenerator {
     if (ctx.tKeyExpr) {
       keyArg = `${ctx.tKeyExpr} + ${keyArg}`;
     }
-    const blockArgs = `${expr}, ${propString}, ${keyArg}, node, ctx`;
+    let id = generateId("comp");
-    let blockExpr = `component(${blockArgs})`;
+    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})`;
     }
@@ -1199,11 +1213,11 @@ export class CodeGenerator {
 
   wrapWithEventCatcher(expr: string, on: EventHandlers): string {
     this.helpers.add("createCatcher");
-    let name = this.generateId("catcher");
+    let name = generateId("catcher");
     let spec: any = {};
     let handlers: any[] = [];
     for (let ev in on) {
-      let handlerId = this.generateId("hdlr");
+      let handlerId = generateId("hdlr");
       let idx = handlers.push(handlerId) - 1;
       spec[ev] = idx;
       const handler = this.generateHandlerCode(ev, on[ev]);
@@ -1225,14 +1239,18 @@ export class CodeGenerator {
     } else {
       slotName = "'" + ast.name + "'";
     }
-
+    const dynProps = ast.attrs ? ast.attrs["t-props"] : null;
-    const scope = ast.attrs ? `{${this.formatPropObject(ast.attrs)}}` : null;
+    if (ast.attrs) {
+      delete ast.attrs["t-props"];
+    }
+    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})`;
     } else {
       if (dynamic) {
-        let name = this.generateId("slot");
+        let name = generateId("slot");
         this.define(name, slotName);
         blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}, ${dynamic}, ${scope}))`;
       } else {
@@ -1257,18 +1275,27 @@ export class CodeGenerator {
     }
   }
   compileTPortal(ast: ASTTPortal, ctx: Context) {
-    this.helpers.add("Portal");
+    if (!this.staticDefs.find((d) => d.id === "Portal")) {
+      this.staticDefs.push({ id: "Portal", expr: `app.Portal` });
+    }
 
     let { block } = ctx;
     const name = this.compileInNewTarget("slot", ast.content, ctx);
     const key = this.generateComponentKey();
     let ctxStr = "ctx";
     if (this.target.loopLevel || !this.hasSafeContext) {
-      ctxStr = this.generateId("ctx");
+      ctxStr = generateId("ctx");
       this.helpers.add("capture");
-      this.define(ctxStr, `capture(ctx);`);
+      this.define(ctxStr, `capture(ctx)`);
     }
-    const blockString = `component(Portal, {target: ${ast.target},slots: {'default': {__render: ${name}, __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx)`;
+    let id = generateId("comp");
+    this.staticDefs.push({
+      id,
+      expr: `app.createComponent(null, false, true, false, false)`,
+    });
+
+    const target = compileExpr(ast.target);
+    const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}, __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`;
     if (block) {
       this.insertAnchor(block);
     }

src/compiler/index.ts

@@ -1,10 +1,11 @@
-import type { BDom } from "../blockdom";
+import type { TemplateSet } from "../runtime/template_set";
+import type { BDom } from "../runtime/blockdom";
 import { CodeGenerator, Config } from "./code_generator";
 import { parse } from "./parser";
 
 export type Template = (context: any, vnode: any, key?: string) => BDom;
 
-export type TemplateFunction = (blocks: any, utils: any) => Template;
+export type TemplateFunction = (app: TemplateSet, bdom: any, helpers: any) => Template;
 
 interface CompileOptions extends Config {
   name?: string;
@@ -26,5 +27,5 @@ export function compile(
   const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext });
   const code = codeGenerator.generateCode();
   // template function
-  return new Function("bdom, helpers", code) as TemplateFunction;
+  return new Function("app, bdom, helpers", code) as TemplateFunction;
 }

src/compiler/inline_expressions.ts

@@ -85,8 +85,9 @@ 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
+// expression has a space after typeof. Currently we don't support delete and void
-const OPERATORS = "...,.,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=,;,in ".split(",");
+const OPERATORS =
+  "...,.,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=,;,in ,new ,|,&,^,~".split(",");
 
 type Tokenizer = (expr: string) => Token | false;
 
@@ -344,21 +345,29 @@ export function compileExprToArray(expr: string): Token[] {
   return tokens;
 }
 
+// Leading spaces are trimmed during tokenization, so they need to be added back for some values
+const paddedValues = new Map([["in ", " in "]]);
+
 export function compileExpr(expr: string): string {
   return compileExprToArray(expr)
-    .map((t) => t.value)
+    .map((t) => paddedValues.get(t.value) || t.value)
     .join("");
 }
 
-export const INTERP_REGEXP = /\{\{.*?\}\}/g;
+export const INTERP_REGEXP = /\{\{.*?\}\}|\#\{.*?\}/g;
-const INTERP_GROUP_REGEXP = /\{\{.*?\}\}/g;
 
-export function interpolate(s: string): string {
+export function replaceDynamicParts(s: string, replacer: (s: string) => string) {
   let matches = s.match(INTERP_REGEXP);
   if (matches && matches[0].length === s.length) {
-    return `(${compileExpr(s.slice(2, -2))})`;
+    return `(${replacer(s.slice(2, matches[0][0] === "{" ? -2 : -1))})`;
   }
 
-  let r = s.replace(INTERP_GROUP_REGEXP, (s) => "${" + compileExpr(s.slice(2, -2)) + "}");
+  let r = s.replace(
+    INTERP_REGEXP,
+    (s) => "${" + replacer(s.slice(2, s[0] === "{" ? -2 : -1)) + "}"
+  );
   return "`" + r + "`";
 }
+export function interpolate(s: string): string {
+  return replaceDynamicParts(s, compileExpr);
+}

src/compiler/parser.ts

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

src/component/props_validation.ts

@@ -1,150 +0,0 @@
-import { ComponentConstructor } from "./component";
-
-/**
- * Apply default props (only top level).
- *
- * Note that this method does modify in place the props
- */
-export function applyDefaultProps<P>(props: P, ComponentClass: ComponentConstructor<P>) {
-  const defaultProps = ComponentClass.defaultProps;
-  if (defaultProps) {
-    for (let propName in defaultProps) {
-      if ((props as any)[propName] === undefined) {
-        (props as any)[propName] = defaultProps[propName];
-      }
-    }
-  }
-}
-
-//------------------------------------------------------------------------------
-// Prop validation helper
-//------------------------------------------------------------------------------
-function getPropDescription(staticProps: any) {
-  if (staticProps instanceof Array) {
-    return Object.fromEntries(
-      staticProps.map((p) => (p.endsWith("?") ? [p.slice(0, -1), false] : [p, true]))
-    );
-  }
-  return staticProps || { "*": true };
-}
-
-/**
- * Validate the component props (or next props) against the (static) props
- * description.  This is potentially an expensive operation: it may needs to
- * 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) {
-  const ComponentClass =
-    typeof name !== "string"
-      ? name
-      : (parent.constructor.components[name] as ComponentConstructor<P> | undefined);
-
-  if (!ComponentClass) {
-    // this is an error, wrong component. We silently return here instead so the
-    // error is triggered by the usual path ('component' function)
-    return;
-  }
-  applyDefaultProps(props, ComponentClass);
-
-  const defaultProps = ComponentClass.defaultProps || {};
-  let propsDef = getPropDescription(ComponentClass.props);
-  const allowAdditionalProps = "*" in propsDef;
-
-  for (let propName in propsDef) {
-    if (propName === "*") {
-      continue;
-    }
-    const propDef = propsDef[propName];
-    let isMandatory = !!propDef;
-    if (typeof propDef === "object" && "optional" in propDef) {
-      isMandatory = !propDef.optional;
-    }
-    if (isMandatory && propName in defaultProps) {
-      throw new Error(
-        `A default value cannot be defined for a mandatory prop (name: '${propName}', component: ${ComponentClass.name})`
-      );
-    }
-    if ((props as any)[propName] === undefined) {
-      if (isMandatory) {
-        throw new Error(`Missing props '${propName}' (component '${ComponentClass.name}')`);
-      } else {
-        continue;
-      }
-    }
-    let isValid;
-    try {
-      isValid = isValidProp((props as any)[propName], propDef);
-    } catch (e) {
-      (e as Error).message = `Invalid prop '${propName}' in component ${ComponentClass.name} (${
-        (e as Error).message
-      })`;
-      throw e;
-    }
-    if (!isValid) {
-      throw new Error(`Invalid Prop '${propName}' in component '${ComponentClass.name}'`);
-    }
-  }
-  if (!allowAdditionalProps) {
-    for (let propName in props) {
-      if (!(propName in propsDef)) {
-        throw new Error(`Unknown prop '${propName}' given to component '${ComponentClass.name}'`);
-      }
-    }
-  }
-}
-
-/**
- * Check if an invidual prop value matches its (static) prop definition
- */
-function isValidProp(prop: any, propDef: any): boolean {
-  if (propDef === true) {
-    return true;
-  }
-  if (typeof propDef === "function") {
-    // Check if a value is constructed by some Constructor.  Note that there is a
-    // slight abuse of language: we want to consider primitive values as well.
-    //
-    // So, even though 1 is not an instance of Number, we want to consider that
-    // it is valid.
-    if (typeof prop === "object") {
-      return prop instanceof propDef;
-    }
-    return typeof prop === propDef.name.toLowerCase();
-  } else if (propDef instanceof Array) {
-    // If this code is executed, this means that we want to check if a prop
-    // matches at least one of its descriptor.
-    let result = false;
-    for (let i = 0, iLen = propDef.length; i < iLen; i++) {
-      result = result || isValidProp(prop, propDef[i]);
-    }
-    return result;
-  }
-  // propsDef is an object
-  if (propDef.optional && prop === undefined) {
-    return true;
-  }
-  let result = propDef.type ? isValidProp(prop, propDef.type) : true;
-  if (propDef.validate) {
-    result = result && propDef.validate(prop);
-  }
-  if (propDef.type === Array && propDef.element) {
-    for (let i = 0, iLen = prop.length; i < iLen; i++) {
-      result = result && isValidProp(prop[i], propDef.element);
-    }
-  }
-  if (propDef.type === Object && propDef.shape) {
-    const shape = propDef.shape;
-    for (let key in shape) {
-      result = result && isValidProp(prop[key], shape[key]);
-    }
-    if (result) {
-      for (let propName in prop) {
-        if (!(propName in shape)) {
-          throw new Error(`unknown prop '${propName}'`);
-        }
-      }
-    }
-  }
-  return result;
-}

src/index.ts

@@ -1,56 +1,16 @@
-import {
+import { TemplateSet } from "./runtime/template_set";
-  config,
+import { compile } from "./compiler";
-  createBlock,
-  html,
-  list,
-  mount as blockMount,
-  multi,
-  patch,
-  remove,
-  text,
-  toggler,
-  comment,
-} from "./blockdom";
-import { mainEventHandler } from "./component/handler";
-export type { Reactive } from "./reactivity";
 
-config.shouldNormalizeDom = false;
+export * from "./runtime";
-config.mainEventHandler = mainEventHandler;
 
-export const blockDom = {
+TemplateSet.prototype._compileTemplate = function _compileTemplate(
-  config,
+  name: string,
-  // bdom entry points
+  template: string | Element
-  mount: blockMount,
+) {
-  patch,
+  return compile(template, {
-  remove,
+    name,
-  // bdom block types
+    dev: this.dev,
-  list,
+    translateFn: this.translateFn,
-  multi,
+    translatableAttributes: this.translatableAttributes,
-  text,
+  });
-  toggler,
-  createBlock,
-  html,
-  comment,
 };
-
-export { App, mount } from "./app/app";
-export { Component } from "./component/component";
-export { useComponent, useState } from "./component/component_node";
-export { status } from "./component/status";
-export { reactive, markRaw, toRaw } from "./reactivity";
-export { useEffect, useEnv, useExternalListener, useRef, useChildSubEnv, useSubEnv } from "./hooks";
-export { EventBus, whenReady, loadFile, markup, xml } from "./utils";
-export {
-  onWillStart,
-  onMounted,
-  onWillUnmount,
-  onWillUpdateProps,
-  onWillPatch,
-  onPatched,
-  onWillRender,
-  onRendered,
-  onWillDestroy,
-  onError,
-} from "./component/lifecycle_hooks";
-
-export const __info__ = {};

src/runtime/app.ts

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

src/runtime/blockdom/attributes.ts

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

src/runtime/blockdom/event_catcher.ts

@@ -6,36 +6,43 @@ type EventsSpec = { [name: string]: number };
 type Catcher = (child: VNode, handlers: any[]) => VNode;
 
 export function createCatcher(eventsSpec: EventsSpec): Catcher {
-  let setupFns: any[] = [];
+  const n = Object.keys(eventsSpec).length;
-  let removeFns: any[] = [];
-  for (let name in eventsSpec) {
-    let index = eventsSpec[name];
-    let { setup, remove } = createEventHandler(name);
-    setupFns[index] = setup;
-    removeFns[index] = remove;
-  }
-  let n = setupFns.length;
 
   class VCatcher {
     child: VNode;
-    handlers: any[];
+    handlerData: any[];
+    handlerFns: any[] = [];
 
     parentEl?: HTMLElement | undefined;
-    afterNode: Node | null = null;
+    afterNode: Text | null = null;
 
     constructor(child: VNode, handlers: any[]) {
       this.child = child;
-      this.handlers = handlers;
+      this.handlerData = handlers;
     }
 
     mount(parent: HTMLElement, afterNode: Node | null) {
       this.parentEl = parent;
-      this.afterNode = afterNode;
       this.child.mount(parent, afterNode);
+      this.afterNode = document.createTextNode("");
+      parent.insertBefore(this.afterNode, afterNode);
+      this.wrapHandlerData();
+      for (let name in eventsSpec) {
+        const index = eventsSpec[name];
+        const handler = createEventHandler(name);
+        this.handlerFns[index] = handler;
+        handler.setup.call(parent, this.handlerData[index]);
+      }
+    }
+
+    wrapHandlerData() {
       for (let i = 0; i < n; i++) {
-        let origFn = this.handlers[i][0];
+        let handler = this.handlerData[i];
+        // handler = [...mods, fn, comp], so we need to replace second to last elem
+        let idx = handler.length - 2;
+        let origFn = handler[idx];
         const self = this;
-        this.handlers[i][0] = function (ev: any) {
+        handler[idx] = function (ev: any) {
           const target = ev.target;
           let currentNode: any = self.child.firstNode();
           const afterNode = self.afterNode;
@@ -46,20 +53,24 @@ export function createCatcher(eventsSpec: EventsSpec): Catcher {
             currentNode = currentNode.nextSibling;
           }
         };
-        setupFns[i].call(parent, this.handlers[i]);
       }
     }
 
     moveBefore(other: VCatcher | null, afterNode: Node | null) {
-      this.afterNode = null;
       this.child.moveBefore(other ? other.child : null, afterNode);
+      this.parentEl!.insertBefore(this.afterNode!, afterNode);
     }
 
     patch(other: VCatcher, withBeforeRemove: boolean) {
       if (this === other) {
         return;
       }
-      this.handlers = other.handlers;
+      this.handlerData = other.handlerData;
+      this.wrapHandlerData();
+      for (let i = 0; i < n; i++) {
+        this.handlerFns[i].update.call(this.parentEl!, this.handlerData[i]);
+      }
+
       this.child.patch(other.child, withBeforeRemove);
     }
 
@@ -69,9 +80,10 @@ export function createCatcher(eventsSpec: EventsSpec): Catcher {
 
     remove() {
       for (let i = 0; i < n; i++) {
-        removeFns[i].call(this.parentEl!);
+        this.handlerFns[i].remove.call(this.parentEl!);
       }
       this.child.remove();
+      this.afterNode!.remove();
     }
 
     firstNode(): Node | undefined {

src/runtime/component.ts

@@ -1,15 +1,17 @@
+import { Schema } from "./validation";
 import type { ComponentNode } from "./component_node";
 
 // -----------------------------------------------------------------------------
 //  Component Class
 // -----------------------------------------------------------------------------
 
-type Props = { [key: string]: any };
+export type Props = { [key: string]: any };
 
 interface StaticComponentProperties {
   template: string;
   defaultProps?: any;
-  props?: any;
+  props?: Schema;
+  components?: { [componentName: string]: ComponentConstructor };
 }
 
 export type ComponentConstructor<P extends Props = any, E = any> = (new (

src/runtime/component_node.ts

@@ -1,5 +1,8 @@
-import type { App, Env } from "../app/app";
+import type { App, Env } from "./app";
-import { BDom, VNode } from "../blockdom";
+import { BDom, VNode } from "./blockdom";
+import { Component, ComponentConstructor, Props } from "./component";
+import { fibersInError, handleError } from "./error_handling";
+import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
 import {
   clearReactivesForCallback,
   getSubscriptions,
@@ -7,13 +10,9 @@ import {
   Reactive,
   reactive,
   TARGET,
-} from "../reactivity";
+} 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 { applyDefaultProps } from "./props_validation";
 import { STATUS } from "./status";
+import { batched, Callback } from "./utils";
 
 let currentNode: ComponentNode | null = null;
 
@@ -28,6 +27,16 @@ export function useComponent(): Component {
   return currentNode!.component;
 }
 
+/**
+ * Apply default props (only top level).
+ */
+function applyDefaultProps<P extends object>(props: P, defaultProps: Partial<P>) {
+  for (let propName in defaultProps) {
+    if (props[propName] === undefined) {
+      (props as any)[propName] = defaultProps[propName];
+    }
+  }
+}
 // -----------------------------------------------------------------------------
 // Integration with reactivity system (useState)
 // -----------------------------------------------------------------------------
@@ -55,75 +64,13 @@ 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) {
-    if (props1[k] !== props2[k]) {
-      return true;
-    }
-  }
-  return Object.keys(props1).length !== Object.keys(props2).length;
-}
-
-export function component<P extends object>(
-  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.component.props[TARGET];
-      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}"`);
-      }
-    }
-    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
 // -----------------------------------------------------------------------------
 
 type LifecycleHook = Function;
 
-export class ComponentNode<P extends object = any, E = any> implements VNode<ComponentNode<P, E>> {
+export class ComponentNode<P extends Props = any, E = any> implements VNode<ComponentNode<P, E>> {
   el?: HTMLElement | Text | undefined;
   app: App;
   fiber: Fiber | null = null;
@@ -132,6 +79,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
   status: STATUS = STATUS.NEW;
   forceNextRender: boolean = false;
   parentKey: string | null;
+  props: P;
 
   renderFn: Function;
   parent: ComponentNode | null;
@@ -158,13 +106,23 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
     currentNode = this;
     this.app = app;
     this.parent = parent;
+    this.props = props;
     this.parentKey = parentKey;
     this.level = parent ? parent.level + 1 : 0;
-    applyDefaultProps(props, C);
+    const defaultProps = C.defaultProps;
+    props = Object.assign({}, props);
+    if (defaultProps) {
+      applyDefaultProps(props, defaultProps);
+    }
     const env = (parent && parent.childEnv) || app.env;
     this.childEnv = env;
-    props = useState(props);
+    for (const key in props) {
-    this.component = new C(props, env, this) as any;
+      const prop = props[key];
+      if (prop && typeof prop === "object" && prop[TARGET]) {
+        props[key] = useState(prop);
+      }
+    }
+    this.component = new C(props, env, this);
     this.renderFn = app.getTemplate(C.template).bind(this.component, this.component, this);
     this.component.setup();
     currentNode = null;
@@ -269,15 +227,25 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
     this.status = STATUS.DESTROYED;
   }
 
-  async updateAndRender(props: any, parentFiber: Fiber) {
+  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;
-    applyDefaultProps(props, component.constructor as any);
+    const defaultProps = (component.constructor as any).defaultProps;
+    if (defaultProps) {
+      applyDefaultProps(props, defaultProps);
+    }
 
     currentNode = this;
-    props = useState(props);
+    for (const key in props) {
+      const prop = props[key];
+      if (prop && typeof prop === "object" && prop[TARGET]) {
+        props[key] = useState(prop);
+      }
+    }
     currentNode = null;
     const prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
     await prom;
@@ -285,6 +253,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
       return;
     }
     component.props = props;
+    this.props = rawProps;
     fiber.render();
     const parentRoot = parentFiber.root!;
     if (this.willPatch.length) {
@@ -352,10 +321,15 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
     }
   }
   _patch() {
-    const hasChildren = Object.keys(this.children).length > 0;
+    let hasChildren = false;
-    this.children = this.fiber!.childrenMap;
+    for (let _k in this.children) {
-    this.bdom!.patch(this!.fiber!.bdom!, hasChildren);
+      hasChildren = true;
-    this.fiber!.appliedToDom = true;
+      break;
+    }
+    const fiber = this.fiber!;
+    this.children = fiber.childrenMap;
+    this.bdom!.patch(fiber.bdom!, hasChildren);
+    fiber.appliedToDom = true;
     this.fiber = null;
   }
 

src/runtime/event_handling.ts

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

src/runtime/fibers.ts

@@ -1,4 +1,4 @@
-import { BDom, mount } from "../blockdom";
+import { BDom, mount } from "./blockdom";
 import type { ComponentNode } from "./component_node";
 import { fibersInError, handleError } from "./error_handling";
 import { STATUS } from "./status";
@@ -42,6 +42,10 @@ export function makeRootFiber(node: ComponentNode): Fiber {
   return fiber;
 }
 
+function throwOnRender() {
+  throw new Error("Attempted to render cancelled fiber");
+}
+
 /**
  * @returns number of not-yet rendered fibers cancelled
  */
@@ -49,8 +53,10 @@ function cancelFibers(fibers: Fiber[]): number {
   let result = 0;
   for (let fiber of fibers) {
     let node = fiber.node;
+    fiber.render = throwOnRender;
     if (node.status === STATUS.NEW) {
       node.destroy();
+      delete node.parent!.children[node.parentKey!];
     }
     node.fiber = null;
     if (fiber.bdom) {

src/runtime/hooks.ts

@@ -1,6 +1,6 @@
-import type { Env } from "./app/app";
+import type { Env } from "./app";
-import { getCurrent } from "./component/component_node";
+import { getCurrent } from "./component_node";
-import { onMounted, onPatched, onWillUnmount } from "./component/lifecycle_hooks";
+import { onMounted, onPatched, onWillUnmount } from "./lifecycle_hooks";
 
 // -----------------------------------------------------------------------------
 // useRef

src/runtime/index.ts

@@ -0,0 +1,58 @@
+import {
+  config,
+  createBlock,
+  html,
+  list,
+  mount as blockMount,
+  multi,
+  patch,
+  remove,
+  text,
+  toggler,
+  comment,
+} from "./blockdom";
+import { mainEventHandler } from "./event_handling";
+export type { Reactive } from "./reactivity";
+
+config.shouldNormalizeDom = false;
+config.mainEventHandler = mainEventHandler;
+
+export const blockDom = {
+  config,
+  // bdom entry points
+  mount: blockMount,
+  patch,
+  remove,
+  // bdom block types
+  list,
+  multi,
+  text,
+  toggler,
+  createBlock,
+  html,
+  comment,
+};
+
+export { App, mount } from "./app";
+export { xml } from "./template_set";
+export { Component } 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 { EventBus, whenReady, loadFile, markup } from "./utils";
+export {
+  onWillStart,
+  onMounted,
+  onWillUnmount,
+  onWillUpdateProps,
+  onWillPatch,
+  onPatched,
+  onWillRender,
+  onRendered,
+  onWillDestroy,
+  onError,
+} from "./lifecycle_hooks";
+export { validate } from "./validation";
+
+export const __info__ = {};

src/runtime/portal.ts

@@ -1,7 +1,6 @@
-import { onWillUnmount } from "./component/lifecycle_hooks";
+import { onWillUnmount } from "./lifecycle_hooks";
-import { xml } from "./utils";
 import { BDom, text, VNode } from "./blockdom";
-import { Component } from "./component/component";
+import { Component } from "./component";
 
 const VText: any = text("").constructor;
 
@@ -53,8 +52,18 @@ class VPortal extends VText implements Partial<VNode<VPortal>> {
   }
 }
 
+/**
+ * <t t-slot="default"/>
+ */
+export function portalTemplate(app: any, bdom: any, helpers: any) {
+  let { callSlot } = helpers;
+  return function template(ctx: any, node: any, key = "") {
+    return callSlot(ctx, node, key, "default", false, null);
+  };
+}
+
 export class Portal extends Component {
-  static template = xml`<t t-slot="default"/>`;
+  static template = "__portal__";
   static props = {
     target: {
       type: String,

src/runtime/reactivity.ts

@@ -207,7 +207,7 @@ export function reactive<T extends Target>(
     return reactive(originalTarget, callback);
   }
   if (!reactiveCache.has(target)) {
-    reactiveCache.set(target, new Map());
+    reactiveCache.set(target, new WeakMap());
   }
   const reactivesForTarget = reactiveCache.get(target)!;
   if (!reactivesForTarget.has(callback)) {

src/runtime/scheduler.ts

@@ -32,7 +32,7 @@ export class Scheduler {
       let renders = this.delayedRenders;
       this.delayedRenders = [];
       for (let f of renders) {
-        if (f.root && f.node.status !== STATUS.DESTROYED) {
+        if (f.root && f.node.status !== STATUS.DESTROYED && f.node.fiber === f) {
           f.render();
         }
       }

src/runtime/template_helpers.ts

@@ -1,9 +1,11 @@
-import { BDom, multi, text, toggler, createCatcher } from "../blockdom";
+import { BDom, multi, text, toggler, createCatcher } from "./blockdom";
-import { validateProps } from "../component/props_validation";
+import { Markup } from "./utils";
-import { Markup } from "../utils";
+import { html } from "./blockdom/index";
-import { html } from "../blockdom/index";
+import { isOptional, validateSchema } from "./validation";
-import { TARGET } from "../reactivity";
+import type { ComponentConstructor } from "./component";
+import { markRaw } from "./reactivity";
 
+const ObjectCreate = Object.create;
 /**
  * This file contains utility functions that will be injected in each template,
  * to perform various useful tasks in the compiled code.
@@ -23,9 +25,9 @@ function callSlot(
   defaultContent?: (ctx: any, node: any, key: string) => BDom
 ): BDom {
   key = key + "__slot_" + name;
-  const slots = ctx.props[TARGET].slots || {};
+  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;
   }
@@ -45,7 +47,7 @@ function callSlot(
 
 function capture(ctx: any): any {
   const component = ctx.__owl__.component;
-  const result = Object.create(component);
+  const result = ObjectCreate(component);
   for (let k in ctx) {
     result[k] = ctx[k];
   }
@@ -106,15 +108,17 @@ function shallowEqual(l1: any[], l2: any[]): boolean {
 class LazyValue {
   fn: any;
   ctx: any;
+  component: any;
   node: any;
-  constructor(fn: any, ctx: any, node: any) {
+  constructor(fn: any, ctx: any, component: any, node: any) {
     this.fn = fn;
     this.ctx = capture(ctx);
+    this.component = component;
     this.node = node;
   }
 
   evaluate(): any {
-    return this.fn(this.ctx, this.node);
+    return this.fn.call(this.component, this.ctx, this.node);
   }
 
   toString() {
@@ -125,42 +129,55 @@ class LazyValue {
 /*
  * Safely outputs `value` as a block depending on the nature of `value`
  */
-export function safeOutput(value: any): ReturnType<typeof toggler> {
+export function safeOutput(value: any, defaultValue?: any): ReturnType<typeof toggler> {
-  if (!value) {
+  if (value === undefined) {
-    return value;
+    return defaultValue ? toggler("default", defaultValue) : toggler("undefined", text(""));
   }
   let safeKey;
   let block;
-  if (value instanceof Markup) {
+  switch (typeof value) {
-    safeKey = `string_safe`;
+    case "object":
-    block = html(value as string);
+      if (value instanceof Markup) {
-  } else if (value instanceof LazyValue) {
+        safeKey = `string_safe`;
-    safeKey = `lazy_value`;
+        block = html(value as string);
-    block = value.evaluate();
+      } else if (value instanceof LazyValue) {
-  } else if (value instanceof String || typeof value === "string") {
+        safeKey = `lazy_value`;
-    safeKey = "string_unsafe";
+        block = value.evaluate();
-    block = text(value);
+      } else if (value instanceof String) {
-  } else {
+        safeKey = "string_unsafe";
-    // Assuming it is a block
+        block = text(value);
-    safeKey = "block_safe";
+      } else {
-    block = value;
+        // Assuming it is a block
+        safeKey = "block_safe";
+        block = value;
+      }
+      break;
+    case "string":
+      safeKey = "string_unsafe";
+      block = text(value);
+      break;
+    default:
+      safeKey = "string_unsafe";
+      block = text(String(value));
   }
   return toggler(safeKey, block);
 }
 
 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;
 }
@@ -183,6 +200,52 @@ function multiRefSetter(refs: RefMap, name: string): RefSetter {
   };
 }
 
+/**
+ * Validate the component props (or next props) against the (static) props
+ * description.  This is potentially an expensive operation: it may needs to
+ * 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) {
+  const ComponentClass =
+    typeof name !== "string"
+      ? name
+      : (parent.constructor.components[name] as ComponentConstructor<P> | undefined);
+
+  if (!ComponentClass) {
+    // this is an error, wrong component. We silently return here instead so the
+    // error is triggered by the usual path ('component' function)
+    return;
+  }
+
+  const schema = ComponentClass.props;
+  if (!schema) {
+    if (parent.__owl__.app.warnIfNoStaticProps) {
+      console.warn(`Component '${ComponentClass.name}' does not have a static props description`);
+    }
+    return;
+  }
+  const defaultProps = ComponentClass.defaultProps;
+  if (defaultProps) {
+    let isMandatory = (name: string) =>
+      Array.isArray(schema)
+        ? schema.includes(name)
+        : name in schema && !("*" in schema) && !isOptional(schema[name]);
+    for (let p in defaultProps) {
+      if (isMandatory(p)) {
+        throw new Error(
+          `A default value cannot be defined for a mandatory prop (name: '${p}', component: ${ComponentClass.name})`
+        );
+      }
+    }
+  }
+
+  const errors = validateSchema(props, schema);
+  if (errors.length) {
+    throw new Error(`Invalid props for component '${ComponentClass.name}': ` + errors.join(", "));
+  }
+}
+
 export const helpers = {
   withDefault,
   zero: Symbol("zero"),
@@ -200,4 +263,5 @@ export const helpers = {
   safeOutput,
   bind,
   createCatcher,
+  markRaw,
 };

src/runtime/template_set.ts

@@ -1,12 +1,10 @@
-import { createBlock, html, list, multi, text, toggler, comment } from "../blockdom";
+import { compile, Template, TemplateFunction } from "../compiler";
-import { compile, Template } from "../compiler";
+import { comment, createBlock, html, list, multi, text, toggler } from "./blockdom";
-import { markRaw } from "../reactivity";
+import { getCurrent } from "./component_node";
-import { Portal } from "../portal";
+import { Portal, portalTemplate } from "./portal";
-import { component, getCurrent } from "../component/component_node";
 import { helpers } from "./template_helpers";
-import { globalTemplates } from "../utils";
 
-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();
@@ -38,22 +36,6 @@ function parseXML(xml: string): Document {
   return doc;
 }
 
-/**
- * Returns the helpers object that will be injected in each template closure
- * function
- */
-function makeHelpers(getTemplate: (name: string) => Template): any {
-  return Object.assign({}, helpers, {
-    Portal,
-    markRaw,
-    getTemplate,
-    call: (owner: any, subTemplate: string, ctx: any, parent: any, key: any) => {
-      const template = getTemplate(subTemplate);
-      return toggler(subTemplate, template.call(owner, ctx, parent, key));
-    },
-  });
-}
-
 export interface TemplateSetConfig {
   dev?: boolean;
   translatableAttributes?: string[];
@@ -62,12 +44,15 @@ export interface TemplateSetConfig {
 }
 
 export class TemplateSet {
+  static registerTemplate(name: string, fn: TemplateFunction) {
+    globalTemplates[name] = fn;
+  }
   dev: boolean;
   rawTemplates: typeof globalTemplates = Object.create(globalTemplates);
   templates: { [name: string]: Template } = {};
   translateFn?: (s: string) => string;
   translatableAttributes?: string[];
-  helpers: any;
+  Portal = Portal;
 
   constructor(config: TemplateSetConfig = {}) {
     this.dev = config.dev || false;
@@ -76,21 +61,27 @@ export class TemplateSet {
     if (config.templates) {
       this.addTemplates(config.templates);
     }
-    this.helpers = makeHelpers(this.getTemplate.bind(this));
   }
 
-  addTemplate(
+  addTemplate(name: string, template: string | Element) {
-    name: string,
+    if (name in this.rawTemplates) {
-    template: string | Element,
+      const rawTemplate = this.rawTemplates[name];
-    options: { allowDuplicate?: boolean } = {}
+      const currentAsString =
-  ) {
+        typeof rawTemplate === "string"
-    if (name in this.rawTemplates && !options.allowDuplicate) {
+          ? rawTemplate
-      throw new Error(`Template ${name} already defined`);
+          : rawTemplate instanceof Element
+          ? rawTemplate.outerHTML
+          : rawTemplate.toString();
+      const newAsString = typeof template === "string" ? template : template.outerHTML;
+      if (currentAsString === newAsString) {
+        return;
+      }
+      throw new Error(`Template ${name} already defined with different content`);
     }
     this.rawTemplates[name] = template;
   }
 
-  addTemplates(xml: string | Document, options: { allowDuplicate?: boolean } = {}) {
+  addTemplates(xml: string | Document) {
     if (!xml) {
       // empty string
       return;
@@ -98,7 +89,7 @@ export class TemplateSet {
     xml = xml instanceof Document ? xml : parseXML(xml);
     for (const template of xml.querySelectorAll("[t-name]")) {
       const name = template.getAttribute("t-name")!;
-      this.addTemplate(name, template, options);
+      this.addTemplate(name, template);
     }
   }
 
@@ -113,25 +104,42 @@ export class TemplateSet {
         } catch {}
         throw new Error(`Missing template: "${name}"${extraInfo}`);
       }
-      const templateFn = this._compileTemplate(name, rawTemplate);
+      const isFn = typeof rawTemplate === "function" && !(rawTemplate instanceof Element);
+      const templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate);
       // first add a function to lazily get the template, in case there is a
       // recursive call to the template name
       const templates = this.templates;
       this.templates[name] = function (context, parent) {
         return templates[name].call(this, context, parent);
       };
-      const template = templateFn(bdom, this.helpers);
+      const template = templateFn(this, bdom, helpers);
       this.templates[name] = template;
     }
     return this.templates[name];
   }
 
-  _compileTemplate(name: string, template: string | Element) {
+  _compileTemplate(name: string, template: string | Element): ReturnType<typeof compile> {
-    return compile(template, {
+    throw new Error(`Unable to compile a template. Please use owl full build instead`);
-      name,
+  }
-      dev: this.dev,
+
-      translateFn: this.translateFn,
+  callTemplate(owner: any, subTemplate: string, ctx: any, parent: any, key: any): any {
-      translatableAttributes: this.translatableAttributes,
+    const template = this.getTemplate(subTemplate);
-    });
+    return toggler(subTemplate, template.call(owner, ctx, parent, key));
   }
 }
+
+// -----------------------------------------------------------------------------
+//  xml tag helper
+// -----------------------------------------------------------------------------
+export const globalTemplates: { [key: string]: string | Element | TemplateFunction } = {};
+
+export function xml(...args: Parameters<typeof String.raw>) {
+  const name = `__template__${xml.nextId++}`;
+  const value = String.raw(...args);
+  globalTemplates[name] = value;
+  return name;
+}
+
+xml.nextId = 1;
+
+TemplateSet.registerTemplate("__portal__", portalTemplate);

src/runtime/utils.ts

@@ -73,17 +73,3 @@ export class Markup extends String {}
 export function markup(value: any) {
   return new Markup(value);
 }
-
-// -----------------------------------------------------------------------------
-//  xml tag helper
-// -----------------------------------------------------------------------------
-export const globalTemplates: { [key: string]: string | Element } = {};
-
-export function xml(...args: Parameters<typeof String.raw>) {
-  const name = `__template__${xml.nextId++}`;
-  const value = String.raw(...args);
-  globalTemplates[name] = value;
-  return name;
-}
-
-xml.nextId = 1;

src/runtime/validation.ts

@@ -0,0 +1,167 @@
+type BaseType =
+  | typeof String
+  | typeof Boolean
+  | typeof Number
+  | typeof Date
+  | typeof Object
+  | typeof Array
+  | true
+  | "*";
+
+interface TypeInfo {
+  type?: TypeDescription;
+  optional?: boolean;
+  validate?: Function;
+  shape?: Schema;
+  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;
+
+// -----------------------------------------------------------------------------
+// helpers
+// -----------------------------------------------------------------------------
+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;
+}
+
+function describeType(type: BaseType): string {
+  return type === "*" || type === true ? "value" : type.name.toLowerCase();
+}
+
+function describe(info: TypeDescription): string {
+  if (isBaseType(info)) {
+    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`;
+  }
+  if ("shape" in (info as TypeInfo)) {
+    return `object`;
+  }
+  return describe(info.type || "*");
+}
+
+function toSchema(spec: SimplifiedSchema): NormalizedSchema {
+  return Object.fromEntries(
+    spec.map((e) =>
+      e.endsWith("?") ? [e.slice(0, -1), { optional: true }] : [e, { type: "*", optional: false }]
+    )
+  );
+}
+
+/**
+ * Main validate function
+ */
+export function validate(obj: { [key: string]: any }, spec: Schema) {
+  let errors = validateSchema(obj, spec);
+  if (errors.length) {
+    throw new Error("Invalid object: " + errors.join(", "));
+  }
+}
+
+/**
+ * Helper validate function, to get the list of errors. useful if one want to
+ * manipulate the errors without parsing an error object
+ */
+export function validateSchema(obj: { [key: string]: any }, schema: Schema): string[] {
+  if (Array.isArray(schema)) {
+    schema = toSchema(schema);
+  }
+  let errors = [];
+  // check if each value in obj has correct shape
+  for (let key in obj) {
+    if (key in schema) {
+      let result = validateType(key, obj[key], schema[key]);
+      if (result) {
+        errors.push(result);
+      }
+    } else if (!("*" in schema)) {
+      errors.push(`unknown key '${key}'`);
+    }
+  }
+  // check that all specified keys are defined in obj
+  for (let key in schema) {
+    const spec = schema[key];
+    if (key !== "*" && !isOptional(spec) && !(key in obj)) {
+      const isObj = typeof spec === "object" && !Array.isArray(spec);
+      const isAny = spec === "*" || (isObj && "type" in spec ? spec.type === "*" : isObj);
+      let detail = isAny ? "" : ` (should be a ${describe(spec)})`;
+      errors.push(`'${key}' is missing${detail}`);
+    }
+  }
+  return errors;
+}
+
+function validateBaseType(key: string, value: any, type: BaseType): string | null {
+  if (typeof type === "function") {
+    if (typeof value === "object") {
+      if (!(value instanceof type)) {
+        return `'${key}' is not a ${describeType(type)}`;
+      }
+    } else if (typeof value !== type.name.toLowerCase()) {
+      return `'${key}' is not a ${describeType(type)}`;
+    }
+  }
+  return null;
+}
+
+function validateArrayType(key: string, value: any, descr: TypeDescription): string | null {
+  if (!Array.isArray(value)) {
+    return `'${key}' is not a list of ${describe(descr)}s`;
+  }
+  for (let i = 0; i < value.length; i++) {
+    const error = validateType(`${key}[${i}]`, value[i], descr);
+    if (error) {
+      return error;
+    }
+  }
+  return null;
+}
+
+function validateType(key: string, value: any, descr: TypeDescription): string | null {
+  if (value === undefined) {
+    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)}`;
+  }
+  let result: string | null = null;
+  if ("element" in descr) {
+    result = validateArrayType(key, value, descr.element!);
+  } else if ("shape" in descr && !result) {
+    if (typeof value !== "object" || Array.isArray(value)) {
+      result = `'${key}' is not an object`;
+    } else {
+      const errors = validateSchema(value, descr.shape!);
+      if (errors.length) {
+        result = `'${key}' has not the correct shape (${errors.join(", ")})`;
+      }
+    }
+  }
+  if ("type" in descr && !result) {
+    result = validateType(key, value, descr.type!);
+  }
+  if ("validate" in descr && !result) {
+    result = !descr.validate!(value) ? `'${key}' is not valid` : null;
+  }
+  return result;
+}

tests/__snapshots__/reactivity.test.ts.snap

@@ -47,16 +47,17 @@ exports[`Reactivity: useState concurrent renderings 3`] = `
 `;
 
 exports[`Reactivity: useState destroyed component before being mounted is inactive 1`] = `
-"function anonymous(bdom, helpers
+"function 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]);
   }
@@ -64,9 +65,9 @@ exports[`Reactivity: useState destroyed component before being mounted is inacti
 `;
 
 exports[`Reactivity: useState destroyed component before being mounted is inactive 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -78,16 +79,17 @@ exports[`Reactivity: useState destroyed component before being mounted is inacti
 `;
 
 exports[`Reactivity: useState destroyed component is inactive 1`] = `
-"function anonymous(bdom, helpers
+"function 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]);
   }
@@ -95,9 +97,9 @@ exports[`Reactivity: useState destroyed component is inactive 1`] = `
 `;
 
 exports[`Reactivity: useState destroyed component is inactive 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -109,9 +111,9 @@ exports[`Reactivity: useState destroyed component is inactive 2`] = `
 `;
 
 exports[`Reactivity: useState one components can subscribe twice to same context 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -124,14 +126,15 @@ exports[`Reactivity: useState one components can subscribe twice to same context
 `;
 
 exports[`Reactivity: useState parent and children subscribed to same context 1`] = `
-"function anonymous(bdom, helpers
+"function 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]);
   }
@@ -139,9 +142,9 @@ exports[`Reactivity: useState parent and children subscribed to same context 1`]
 `;
 
 exports[`Reactivity: useState parent and children subscribed to same context 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -216,24 +219,26 @@ exports[`Reactivity: useState several nodes on different level use same context
 `;
 
 exports[`Reactivity: useState two components are updated in parallel 1`] = `
-"function anonymous(bdom, helpers
+"function 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 b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    const b3 = comp2({}, key + \`__2\`, node, this, null);
     return block1([], [b2, b3]);
   }
 }"
 `;
 
 exports[`Reactivity: useState two components are updated in parallel 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -245,24 +250,26 @@ exports[`Reactivity: useState two components are updated in parallel 2`] = `
 `;
 
 exports[`Reactivity: useState two components can subscribe to same context 1`] = `
-"function anonymous(bdom, helpers
+"function 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 b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    const b3 = comp2({}, key + \`__2\`, node, this, null);
     return block1([], [b2, b3]);
   }
 }"
 `;
 
 exports[`Reactivity: useState two components can subscribe to same context 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -274,24 +281,26 @@ 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(bdom, helpers
+"function 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 b2 = comp1({}, key + \`__1\`, node, this, null);
-    const b3 = component(\`Parent\`, {}, key + \`__2\`, node, ctx);
+    const b3 = comp2({}, key + \`__2\`, node, this, null);
     return block1([], [b2, b3]);
   }
 }"
 `;
 
 exports[`Reactivity: useState two independent components on different levels are updated in parallel 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -303,23 +312,24 @@ 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(bdom, helpers
+"function 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]);
   }
 }"
 `;
 
 exports[`Reactivity: useState useContext=useState hook is reactive, for one component 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -331,34 +341,47 @@ exports[`Reactivity: useState useContext=useState hook is reactive, for one comp
 `;
 
 exports[`Reactivity: useState useless atoms should be deleted 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
+  const comp1 = app.createComponent(\`Quantity\`, true, false, false, false);
   
-  let block1 = createBlock(\`<div><block-child-0/> Total: <block-text-0/> Count: <block-text-1/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ Total: <block-text-0/>
+ Count: <block-text-1/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Object.keys(ctx['state']));;
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(Object.keys(ctx['state']));;
-    for (let i1 = 0; i1 < l_block2; i1++) {
+    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`id\`] = v_block2[i1];
+      ctx[\`id\`] = v_block4[i1];
       const key1 = ctx['id'];
-      c_block2[i1] = withKey(component(\`Quantity\`, {id: ctx['id']}, key + \`__1__\${key1}\`, node, ctx), key1);
+      const b6 = text(\`
+ \`);
+      const b7 = comp1({id: ctx['id']}, key + \`__1__\${key1}\`, node, this, null);
+      const b8 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
     }
     ctx = ctx.__proto__;
-    const b2 = list(c_block2);
+    const b4 = list(c_block4);
     let txt1 = ctx['total'];
     let txt2 = Object.keys(ctx['state']).length;
-    return block1([txt1, txt2], [b2]);
+    const b3 = block3([txt1, txt2], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`Reactivity: useState useless atoms should be deleted 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -370,9 +393,9 @@ exports[`Reactivity: useState useless atoms should be deleted 2`] = `
 `;
 
 exports[`Reactivity: useState very simple use, with initial value 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`app App supports env with getters/setters 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -16,9 +16,9 @@ exports[`app App supports env with getters/setters 1`] = `
 `;
 
 exports[`app can configure an app with props 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -30,9 +30,9 @@ exports[`app can configure an app with props 1`] = `
 `;
 
 exports[`app destroy remove the widget from the DOM 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -41,3 +41,17 @@ 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, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['message'];
+    return block1([txt1]);
+  }
+}"
+`;

tests/app/app.test.ts

@@ -1,5 +1,5 @@
-import { App, Component, xml } from "../../src";
+import { App, Component, mount, xml } from "../../src";
-import { status } from "../../src/component/status";
+import { status } from "../../src/runtime/status";
 import { makeTestFixture, snapshotEverything, nextTick, elem } from "../helpers";
 
 let fixture: HTMLElement;
@@ -59,4 +59,21 @@ describe("app", () => {
     await app.mount(fixture);
     expect(fixture.innerHTML).toBe("<div>333</div>");
   });
+
+  test("warnIfNoStaticProps works as expected", async () => {
+    let originalconsoleWarn = console.warn;
+    let mockConsoleWarn = jest.fn(() => {});
+    console.warn = mockConsoleWarn;
+
+    class Root extends Component {
+      static template = xml`<div t-esc="message"/>`;
+    }
+
+    await mount(Root, fixture, { dev: true, props: { messge: "hey" }, warnIfNoStaticProps: true });
+
+    console.warn = originalconsoleWarn;
+    expect(mockConsoleWarn).toBeCalledWith(
+      "Component 'Root' does not have a static props description"
+    );
+  });
 });

tests/blockdom/block.test.ts

@@ -1,4 +1,4 @@
-import { createBlock, mount, patch, remove, text } from "../../src/blockdom";
+import { createBlock, mount, patch, remove, text } from "../../src/runtime/blockdom";
 import { makeTestFixture } from "./helpers";
 
 //------------------------------------------------------------------------------

tests/blockdom/block_attributes.test.ts

@@ -1,4 +1,4 @@
-import { mount, patch, createBlock } from "../../src/blockdom";
+import { mount, patch, createBlock } from "../../src/runtime/blockdom";
 import { makeTestFixture } from "./helpers";
 
 //------------------------------------------------------------------------------

tests/blockdom/block_event_handling.test.ts

@@ -1,4 +1,4 @@
-import { mount, createBlock, multi, config, patch } from "../../src/blockdom";
+import { mount, createBlock, multi, config, patch } from "../../src/runtime/blockdom";
 // import { defaultHandler, setupMainHandler } from "../../src/bdom/block";
 import { makeTestFixture } from "./helpers";
 

tests/blockdom/block_refs.test.ts

@@ -1,4 +1,4 @@
-import { createBlock, mount, patch, remove } from "../../src/blockdom";
+import { createBlock, mount, patch, remove } from "../../src/runtime/blockdom";
 import { logStep } from "../helpers";
 import { makeTestFixture } from "./helpers";
 

tests/blockdom/comment.test.ts

@@ -1,4 +1,4 @@
-import { comment, mount } from "../../src/blockdom";
+import { comment, mount } from "../../src/runtime/blockdom";
 import { makeTestFixture } from "./helpers";
 
 //------------------------------------------------------------------------------

tests/blockdom/event_catcher.test.ts

@@ -1,6 +1,6 @@
-import { config, createBlock, createCatcher, mount } from "../../src/blockdom";
+import { config, createBlock, createCatcher, mount } from "../../src/runtime/blockdom";
 import { makeTestFixture } from "./helpers";
-import { mainEventHandler } from "../../src/component/handler";
+import { mainEventHandler } from "../../src/runtime/event_handling";
 
 //------------------------------------------------------------------------------
 // Setup and helpers

tests/blockdom/html.test.ts

@@ -1,4 +1,4 @@
-import { html, mount, patch, text } from "../../src/blockdom";
+import { html, mount, patch, text } from "../../src/runtime/blockdom";
 import { makeTestFixture } from "./helpers";
 
 //------------------------------------------------------------------------------

tests/blockdom/list.test.ts

@@ -1,4 +1,13 @@
-import { list, mount, multi, patch, text, createBlock, VNode, withKey } from "../../src/blockdom";
+import {
+  list,
+  mount,
+  multi,
+  patch,
+  text,
+  createBlock,
+  VNode,
+  withKey,
+} from "../../src/runtime/blockdom";
 import { makeTestFixture } from "./helpers";
 
 //------------------------------------------------------------------------------

tests/blockdom/multi.test.ts

@@ -1,4 +1,4 @@
-import { mount, multi, patch, text, createBlock } from "../../src/blockdom";
+import { mount, multi, patch, text, createBlock } from "../../src/runtime/blockdom";
 import { makeTestFixture } from "./helpers";
 
 //------------------------------------------------------------------------------

tests/blockdom/namespace.test.ts

@@ -1,4 +1,4 @@
-import { createBlock, mount } from "../../src/blockdom";
+import { createBlock, mount } from "../../src/runtime/blockdom";
 import { makeTestFixture } from "./helpers";
 
 //------------------------------------------------------------------------------

tests/blockdom/remove_hook.test.ts

@@ -1,4 +1,4 @@
-import { createBlock, mount, multi, patch } from "../../src/blockdom";
+import { createBlock, mount, multi, patch } from "../../src/runtime/blockdom";
 import { makeTestFixture } from "./helpers";
 
 //------------------------------------------------------------------------------

tests/blockdom/text.test.ts

@@ -1,4 +1,4 @@
-import { mount, patch, remove, text } from "../../src/blockdom";
+import { mount, patch, remove, text } from "../../src/runtime/blockdom";
 import { makeTestFixture } from "./helpers";
 
 //------------------------------------------------------------------------------

tests/blockdom/toggler.test.ts

@@ -1,4 +1,4 @@
-import { createBlock, mount, patch, text, toggler } from "../../src/blockdom";
+import { createBlock, mount, patch, text, toggler } from "../../src/runtime/blockdom";
 import { makeTestFixture } from "./helpers";
 
 //------------------------------------------------------------------------------

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`attributes changing a class with t-att-class (preexisting class 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -15,9 +15,9 @@ exports[`attributes changing a class with t-att-class (preexisting class 1`] = `
 `;
 
 exports[`attributes changing a class with t-att-class 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -29,9 +29,9 @@ exports[`attributes changing a class with t-att-class 1`] = `
 `;
 
 exports[`attributes changing an attribute with t-att- 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -43,9 +43,9 @@ exports[`attributes changing an attribute with t-att- 1`] = `
 `;
 
 exports[`attributes class and t-att-class should combine together 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -57,9 +57,9 @@ exports[`attributes class and t-att-class should combine together 1`] = `
 `;
 
 exports[`attributes class and t-attf-class with ternary operation 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -71,9 +71,9 @@ exports[`attributes class and t-attf-class with ternary operation 1`] = `
 `;
 
 exports[`attributes dynamic attribute evaluating to 0 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -85,9 +85,9 @@ exports[`attributes dynamic attribute evaluating to 0 1`] = `
 `;
 
 exports[`attributes dynamic attribute falsy variable  1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -99,9 +99,9 @@ exports[`attributes dynamic attribute falsy variable  1`] = `
 `;
 
 exports[`attributes dynamic attribute with a dash 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -113,9 +113,9 @@ exports[`attributes dynamic attribute with a dash 1`] = `
 `;
 
 exports[`attributes dynamic attributes 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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 class attribute 1`] = `
+exports[`attributes dynamic attributes with backticks 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
+  
+  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, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
@@ -141,9 +155,9 @@ exports[`attributes dynamic class attribute 1`] = `
 `;
 
 exports[`attributes dynamic class attribute evaluating to 0 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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 empty class attribute 1`] = `
+exports[`attributes dynamic class attribute that starts and ends with a space 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
+  
+  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, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
@@ -169,9 +225,9 @@ exports[`attributes dynamic empty class attribute 1`] = `
 `;
 
 exports[`attributes dynamic formatted attributes with a dash 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -183,9 +239,9 @@ exports[`attributes dynamic formatted attributes with a dash 1`] = `
 `;
 
 exports[`attributes dynamic undefined class attribute 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -197,9 +253,9 @@ exports[`attributes dynamic undefined class attribute 1`] = `
 `;
 
 exports[`attributes dynamic undefined generic attribute 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -211,9 +267,9 @@ exports[`attributes dynamic undefined generic attribute 1`] = `
 `;
 
 exports[`attributes fixed variable 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -225,9 +281,9 @@ exports[`attributes fixed variable 1`] = `
 `;
 
 exports[`attributes format expression 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -239,9 +295,9 @@ exports[`attributes format expression 1`] = `
 `;
 
 exports[`attributes format literal 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -253,9 +309,9 @@ exports[`attributes format literal 1`] = `
 `;
 
 exports[`attributes format multiple 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -267,9 +323,9 @@ exports[`attributes format multiple 1`] = `
 `;
 
 exports[`attributes format value 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -281,45 +337,56 @@ exports[`attributes format value 1`] = `
 `;
 
 exports[`attributes from object variables set previously 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><span block-attribute-0=\\"class\\"/></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <span block-attribute-0=\\"class\\"/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     setContextValue(ctx, \\"o\\", {a:'b'});
     let attr1 = ctx['o'].a;
-    return block1([attr1]);
+    const b3 = block3([attr1]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`attributes from variables set previously (no external node) 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<span block-attribute-0=\\"class\\"/>\`);
+  let block4 = createBlock(\`<span block-attribute-0=\\"class\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     setContextValue(ctx, \\"abc\\", 'def');
+    const b3 = text(\`
+ \`);
     let attr1 = ctx['abc'];
-    return block1([attr1]);
+    const b4 = block4([attr1]);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
 
 exports[`attributes from variables set previously 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -335,9 +402,9 @@ exports[`attributes from variables set previously 1`] = `
 `;
 
 exports[`attributes object 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -349,9 +416,9 @@ exports[`attributes object 1`] = `
 `;
 
 exports[`attributes static attributes 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -362,9 +429,9 @@ exports[`attributes static attributes 1`] = `
 `;
 
 exports[`attributes static attributes on void elements 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<img src=\\"/test.skip.jpg\\" alt=\\"Test\\"/>\`);
   
@@ -374,10 +441,23 @@ exports[`attributes static attributes on void elements 1`] = `
 }"
 `;
 
-exports[`attributes static attributes with dashes 1`] = `
+exports[`attributes static attributes with backticks 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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=\\"\\\\\`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, comment } = bdom;
   
   let block1 = createBlock(\`<div aria-label=\\"Close\\"/>\`);
   
@@ -387,10 +467,24 @@ exports[`attributes static attributes with dashes 1`] = `
 }"
 `;
 
-exports[`attributes t-att-class and class should combine together 1`] = `
+exports[`attributes string interpolation, alternate syntax 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = \`b\${ctx['value']}r\`;
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes t-att-class and class should combine together 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"hello\\" block-attribute-0=\\"class\\"/>\`);
   
@@ -402,9 +496,9 @@ exports[`attributes t-att-class and class should combine together 1`] = `
 `;
 
 exports[`attributes t-att-class with multiple classes 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -416,9 +510,9 @@ exports[`attributes t-att-class with multiple classes 1`] = `
 `;
 
 exports[`attributes t-att-class with multiple classes 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -429,10 +523,24 @@ exports[`attributes t-att-class with multiple classes 2`] = `
 }"
 `;
 
-exports[`attributes t-att-class with multiple classes, some of which are duplicate 1`] = `
+exports[`attributes t-att-class with multiple classes 3`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
+  
+  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, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
@@ -444,9 +552,9 @@ exports[`attributes t-att-class with multiple classes, some of which are duplica
 `;
 
 exports[`attributes t-att-class with object 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -457,10 +565,38 @@ exports[`attributes t-att-class with object 1`] = `
 }"
 `;
 
-exports[`attributes t-attf-class 1`] = `
+exports[`attributes t-att-class with object 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
+  
+  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, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
   
@@ -472,9 +608,9 @@ exports[`attributes t-attf-class 1`] = `
 `;
 
 exports[`attributes t-attf-class should combine with class 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -486,9 +622,9 @@ exports[`attributes t-attf-class should combine with class 1`] = `
 `;
 
 exports[`attributes t-attf-class with multiple classes 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -500,9 +636,9 @@ exports[`attributes t-attf-class with multiple classes 1`] = `
 `;
 
 exports[`attributes t-attf-class with multiple classes separated by multiple spaces 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -514,9 +650,9 @@ exports[`attributes t-attf-class with multiple classes separated by multiple spa
 `;
 
 exports[`attributes tuple literal 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -528,9 +664,9 @@ exports[`attributes tuple literal 1`] = `
 `;
 
 exports[`attributes tuple variable 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -542,9 +678,9 @@ exports[`attributes tuple variable 1`] = `
 `;
 
 exports[`attributes two classes 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -555,9 +691,9 @@ exports[`attributes two classes 1`] = `
 `;
 
 exports[`attributes two dynamic attributes 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -570,9 +706,9 @@ exports[`attributes two dynamic attributes 1`] = `
 `;
 
 exports[`attributes updating classes (with obj notation) 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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\\"/>\`);
   
@@ -584,25 +720,28 @@ exports[`attributes updating classes (with obj notation) 1`] = `
 `;
 
 exports[`attributes various escapes 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div foo=\\"&lt;foo\\" block-attribute-0=\\"bar\\" block-attribute-1=\\"baz\\" block-attributes=\\"2\\"/>\`);
+  let block3 = createBlock(\`<div foo=\\"&lt;foo\\" block-attribute-0=\\"bar\\" block-attribute-1=\\"baz\\" block-attributes=\\"2\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     let attr1 = ctx['bar'];
     let attr2 = \`<\${ctx['baz']}>\`;
     let attr3 = ctx['qux'];
-    return block1([attr1, attr2, attr3]);
+    const b3 = block3([attr1, attr2, attr3]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`attributes various escapes 2 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -613,9 +752,9 @@ 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(bdom, helpers
+"function anonymous(app, 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\\"/>\`);
   
@@ -627,9 +766,9 @@ 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(bdom, helpers
+"function anonymous(app, 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\\"/>\`);
   
@@ -641,9 +780,9 @@ 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(bdom, helpers
+"function anonymous(app, 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\\"/>\`);
   
@@ -655,23 +794,30 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<select block-attribute-0=\\"value\\"><option value=\\"potato\\">Potato</option><option value=\\"tomato\\">Tomato</option><option value=\\"onion\\">Onion</option></select>\`);
+  let block3 = createBlock(\`<select block-attribute-0=\\"value\\">
+ <option value=\\"potato\\">Potato</option>
+ <option value=\\"tomato\\">Tomato</option>
+ <option value=\\"onion\\">Onion</option>
+ </select>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     let attr1 = ctx['value'];
-    return block1([attr1]);
+    const b3 = block3([attr1]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`special cases for some specific html attributes/properties textarea with t-att-value 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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\\"/>\`);
   
@@ -683,14 +829,27 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><input type=\\"checkbox\\" checked=\\"checked\\"/><input checked=\\"checked\\"/><div checked=\\"checked\\"/><div selected=\\"selected\\"/><option selected=\\"selected\\" other=\\"1\\"/><input readonly=\\"readonly\\"/><button disabled=\\"disabled\\"/></div>\`);
+  let block3 = createBlock(\`<div>
+ <input type=\\"checkbox\\" checked=\\"checked\\"/>
+ <input checked=\\"checked\\"/>
+ <div checked=\\"checked\\"/>
+ <div selected=\\"selected\\"/>
+ <option selected=\\"selected\\" other=\\"1\\"/>
+ <input readonly=\\"readonly\\"/>
+ <button disabled=\\"disabled\\"/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    const b2 = text(\`
+ \`);
+    const b3 = block3();
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`comments only a comment 1`] = `
-"function anonymous(bdom, helpers
+"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\`);
@@ -12,9 +12,9 @@ exports[`comments only a comment 1`] = `
 `;
 
 exports[`comments properly handle comments 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -25,22 +25,27 @@ exports[`comments properly handle comments 1`] = `
 `;
 
 exports[`comments properly handle comments between t-if/t-else 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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 block3 = createBlock(\`<div>
-  let block2 = createBlock(\`<span>true</span>\`);
+ <block-child-0/><block-child-1/>
-  let block3 = createBlock(\`<span>owl</span>\`);
+ </div>\`);
+  let block4 = createBlock(\`<span>true</span>\`);
+  let block5 = createBlock(\`<span>owl</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    const b2 = text(\`
+ \`);
+    let b4,b5;
     if (true) {
-      b2 = block2();
+      b4 = block4();
     } else {
-      b3 = block3();
+      b5 = block5();
     }
-    return block1([], [b2, b3]);
+    const b3 = block3([], [b4, b5]);
+    return multi([b2, b3]);
   }
 }"
 `;

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`t-on can bind event handler 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -15,9 +15,9 @@ exports[`t-on can bind event handler 1`] = `
 `;
 
 exports[`t-on can bind handlers with arguments 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -30,9 +30,9 @@ exports[`t-on can bind handlers with arguments 1`] = `
 `;
 
 exports[`t-on can bind handlers with empty  object 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -45,9 +45,9 @@ 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(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -60,36 +60,44 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
+  let block3 = createBlock(\`<ul>
-  let block3 = createBlock(\`<li><a block-handler-0=\\"click\\">link</a></li>\`);
+ <block-child-0/>
+ </ul>\`);
+  let block5 = createBlock(\`<li>
+ <a block-handler-0=\\"click\\">link</a>
+ </li>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['someval']);;
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(['someval']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
+    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`action\`] = v_block2[i1];
+      ctx[\`action\`] = v_block4[i1];
       ctx[\`action_index\`] = i1;
       const key1 = ctx['action_index'];
       const v1 = ctx['activate'];
       const v2 = ctx['action'];
       let hdlr1 = [()=>v1(v2), ctx];
-      c_block2[i1] = withKey(block3([hdlr1]), key1);
+      c_block4[i1] = withKey(block5([hdlr1]), key1);
     }
-    const b2 = list(c_block2);
+    ctx = ctx.__proto__;
-    return block1([], [b2]);
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-on can bind handlers with object arguments 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -102,24 +110,27 @@ exports[`t-on can bind handlers with object arguments 1`] = `
 `;
 
 exports[`t-on can bind two event handlers 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<button block-handler-0=\\"click\\" block-handler-1=\\"dblclick\\">Click</button>\`);
+  let block3 = createBlock(\`<button block-handler-0=\\"click\\" block-handler-1=\\"dblclick\\">Click</button>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     let hdlr1 = [ctx['handleClick'], ctx];
     let hdlr2 = [ctx['handleDblClick'], ctx];
-    return block1([hdlr1, hdlr2]);
+    const b3 = block3([hdlr1, hdlr2]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-on handler is bound to proper owner 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -131,33 +142,40 @@ exports[`t-on handler is bound to proper owner 1`] = `
 `;
 
 exports[`t-on handler is bound to proper owner, part 2 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block2 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  let block6 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1]);;
+    const [k_block3, v_block3, l_block3, c_block3] = prepareList([1]);;
-    for (let i1 = 0; i1 < l_block1; i1++) {
+    for (let i1 = 0; i1 < l_block3; i1++) {
-      ctx[\`value\`] = v_block1[i1];
+      ctx[\`value\`] = v_block3[i1];
       const key1 = ctx['value'];
+      const b5 = text(\`
+ \`);
       let hdlr1 = [ctx['add'], ctx];
-      c_block1[i1] = withKey(block2([hdlr1]), key1);
+      const b6 = block6([hdlr1]);
+      const b7 = text(\`
+ \`);
+      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
     }
-    return list(c_block1);
+    const b3 = list(c_block3);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-on handler is bound to proper owner, part 3 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { getTemplate } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
-  const callTemplate_1 = getTemplate(\`sub\`);
   
   return function template(ctx, node, key = \\"\\") {
     return callTemplate_1.call(this, ctx, node, key + \`__1\`);
@@ -166,9 +184,9 @@ 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(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -180,33 +198,41 @@ 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(bdom, helpers
+"function 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, getTemplate, withKey } = helpers;
+  let { prepareList, withKey } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1]);;
+    const [k_block3, v_block3, l_block3, c_block3] = prepareList([1]);;
-    for (let i1 = 0; i1 < l_block1; i1++) {
+    for (let i1 = 0; i1 < l_block3; i1++) {
-      ctx[\`value\`] = v_block1[i1];
+      ctx[\`value\`] = v_block3[i1];
       ctx[\`value_first\`] = i1 === 0;
-      ctx[\`value_last\`] = i1 === v_block1.length - 1;
+      ctx[\`value_last\`] = i1 === v_block3.length - 1;
       ctx[\`value_index\`] = i1;
-      ctx[\`value_value\`] = k_block1[i1];
+      ctx[\`value_value\`] = k_block3[i1];
       const key1 = ctx['value'];
-      c_block1[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
+      const b5 = text(\`
+ \`);
+      const b6 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
+      const b7 = text(\`
+ \`);
+      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
     }
-    return list(c_block1);
+    const b3 = list(c_block3);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-on handler is bound to proper owner, part 4 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -218,9 +244,9 @@ exports[`t-on handler is bound to proper owner, part 4 2`] = `
 `;
 
 exports[`t-on receive event in first argument 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -232,11 +258,13 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div class=\\"myClass\\" block-handler-0=\\"click\\"><button block-handler-1=\\"click\\">Button</button></div>\`);
+  let block1 = createBlock(\`<div class=\\"myClass\\" block-handler-0=\\"click\\">
+ <button block-handler-1=\\"click\\">Button</button>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['divClicked'], ctx];
@@ -247,9 +275,9 @@ 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(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -262,9 +290,9 @@ 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(bdom, helpers
+"function 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>\`);
@@ -278,11 +306,13 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div block-handler-0=\\"click.capture\\"><button block-handler-1=\\"click\\">Button</button></div>\`);
+  let block1 = createBlock(\`<div block-handler-0=\\"click.capture\\">
+ <button block-handler-1=\\"click\\">Button</button>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [\\"capture\\", ctx['onCapture'], ctx];
@@ -293,11 +323,13 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent\\">Button</button></div>\`);
+  let block1 = createBlock(\`<div>
+ <button block-handler-0=\\"click.prevent\\">Button</button>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [\\"prevent\\", , ctx];
@@ -307,11 +339,13 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent.self\\"><span>Button</span></button></div>\`);
+  let block1 = createBlock(\`<div>
+ <button block-handler-0=\\"click.prevent.self\\"><span>Button</span></button>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [\\"prevent\\",\\"self\\", ctx['onClick'], ctx];
@@ -321,11 +355,15 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent\\">Button 1</button><button block-handler-1=\\"click.stop\\">Button 2</button><button block-handler-2=\\"click.prevent.stop\\">Button 3</button></div>\`);
+  let block1 = createBlock(\`<div>
+ <button block-handler-0=\\"click.prevent\\">Button 1</button>
+ <button block-handler-1=\\"click.stop\\">Button 2</button>
+ <button block-handler-2=\\"click.prevent.stop\\">Button 3</button>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [\\"prevent\\", ctx['onClickPrevented'], ctx];
@@ -337,13 +375,17 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<div>
-  let block3 = createBlock(\`<a href=\\"#\\" block-handler-0=\\"click.prevent\\"> Edit <block-text-1/></a>\`);
+ <block-child-0/>
+ </div>\`);
+  let block5 = createBlock(\`<a href=\\"#\\" block-handler-0=\\"click.prevent\\">
+ Edit <block-text-1/>
+ </a>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -351,12 +393,18 @@ exports[`t-on t-on modifiers (native listener) t-on with prevent modifier in t-f
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`project\`] = v_block2[i1];
       const key1 = ctx['project'];
+      const b4 = text(\`
+ \`);
       const v1 = ctx['onEdit'];
       const v2 = ctx['project'];
       let hdlr1 = [\\"prevent\\", _ev=>v1(v2.id,_ev), ctx];
       let txt1 = ctx['project'].name;
-      c_block2[i1] = withKey(block3([hdlr1, txt1]), key1);
+      const b5 = block5([hdlr1, txt1]);
+      const b6 = text(\`
+ \`);
+      c_block2[i1] = withKey(multi([b4, b5, b6]), key1);
     }
+    ctx = ctx.__proto__;
     const b2 = list(c_block2);
     return block1([], [b2]);
   }
@@ -364,11 +412,13 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><button block-handler-0=\\"click.self.prevent\\"><span>Button</span></button></div>\`);
+  let block1 = createBlock(\`<div>
+ <button block-handler-0=\\"click.self.prevent\\"><span>Button</span></button>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [\\"self\\",\\"prevent\\", ctx['onClick'], ctx];
@@ -378,11 +428,14 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><span>Button</span></button><button block-handler-1=\\"click.self\\"><span>Button</span></button></div>\`);
+  let block1 = createBlock(\`<div>
+ <button block-handler-0=\\"click\\"><span>Button</span></button>
+ <button block-handler-1=\\"click.self\\"><span>Button</span></button>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['onClick'], ctx];
@@ -393,11 +446,13 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div block-handler-0=\\"click.synthetic\\"><button block-handler-1=\\"click.synthetic\\">Button</button></div>\`);
+  let block1 = createBlock(\`<div block-handler-0=\\"click.synthetic\\">
+ <button block-handler-1=\\"click.synthetic\\">Button</button>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [\\"synthetic\\", ctx['divClicked'], ctx];
@@ -408,9 +463,9 @@ 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(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -423,9 +478,9 @@ exports[`t-on t-on with inline statement (function call) 1`] = `
 `;
 
 exports[`t-on t-on with inline statement 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -438,9 +493,9 @@ exports[`t-on t-on with inline statement 1`] = `
 `;
 
 exports[`t-on t-on with inline statement, part 2 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -453,9 +508,9 @@ exports[`t-on t-on with inline statement, part 2 1`] = `
 `;
 
 exports[`t-on t-on with inline statement, part 3 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -469,11 +524,10 @@ exports[`t-on t-on with inline statement, part 3 1`] = `
 `;
 
 exports[`t-on t-on with t-call 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { getTemplate } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
-  const callTemplate_1 = getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -485,9 +539,9 @@ exports[`t-on t-on with t-call 1`] = `
 `;
 
 exports[`t-on t-on with t-call 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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,11 +553,10 @@ exports[`t-on t-on with t-call 2`] = `
 `;
 
 exports[`t-on t-on, with arguments and t-call 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { getTemplate } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
-  const callTemplate_1 = getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -515,9 +568,9 @@ exports[`t-on t-on, with arguments and t-call 1`] = `
 `;
 
 exports[`t-on t-on, with arguments and t-call 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
   

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

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

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

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

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`simple templates, mostly static can render a table row 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -14,9 +14,9 @@ exports[`simple templates, mostly static can render a table row 1`] = `
 `;
 
 exports[`simple templates, mostly static div with a class attribute 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -27,9 +27,9 @@ 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(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -40,9 +40,9 @@ 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(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -53,9 +53,9 @@ 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(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -66,9 +66,9 @@ 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(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -79,9 +79,9 @@ exports[`simple templates, mostly static div with an empty class attribute 1`] =
 `;
 
 exports[`simple templates, mostly static div with content 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -92,9 +92,9 @@ exports[`simple templates, mostly static div with content 1`] = `
 `;
 
 exports[`simple templates, mostly static dom node with t-esc 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -106,9 +106,9 @@ exports[`simple templates, mostly static dom node with t-esc 1`] = `
 `;
 
 exports[`simple templates, mostly static dom node with t-esc 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -120,9 +120,9 @@ exports[`simple templates, mostly static dom node with t-esc 2`] = `
 `;
 
 exports[`simple templates, mostly static dynamic text value 1`] = `
-"function anonymous(bdom, helpers
+"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']);
@@ -131,9 +131,9 @@ exports[`simple templates, mostly static dynamic text value 1`] = `
 `;
 
 exports[`simple templates, mostly static empty div 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
   
@@ -144,9 +144,9 @@ exports[`simple templates, mostly static empty div 1`] = `
 `;
 
 exports[`simple templates, mostly static empty string 1`] = `
-"function anonymous(bdom, helpers
+"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(\`\`);
@@ -155,9 +155,9 @@ exports[`simple templates, mostly static empty string 1`] = `
 `;
 
 exports[`simple templates, mostly static empty string in a template set 1`] = `
-"function anonymous(bdom, helpers
+"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(\`\`);
@@ -166,9 +166,9 @@ 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(bdom, helpers
+"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\`);
@@ -177,9 +177,9 @@ 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(bdom, helpers
+"function 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 = \\"\\") {
@@ -192,9 +192,9 @@ 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(bdom, helpers
+"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']}\`);
@@ -203,9 +203,9 @@ exports[`simple templates, mostly static inline template string with variable in
 `;
 
 exports[`simple templates, mostly static multiple root nodes 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -219,9 +219,9 @@ exports[`simple templates, mostly static multiple root nodes 1`] = `
 `;
 
 exports[`simple templates, mostly static simple string 1`] = `
-"function anonymous(bdom, helpers
+"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\`);
@@ -230,9 +230,9 @@ exports[`simple templates, mostly static simple string 1`] = `
 `;
 
 exports[`simple templates, mostly static simple string in t tag 1`] = `
-"function anonymous(bdom, helpers
+"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\`);
@@ -241,9 +241,9 @@ 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(bdom, helpers
+"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 \`);
@@ -254,9 +254,9 @@ 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(bdom, helpers
+"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 \`);
@@ -267,9 +267,9 @@ exports[`simple templates, mostly static static text and dynamic text 1`] = `
 `;
 
 exports[`simple templates, mostly static t-esc in dom node 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -281,9 +281,9 @@ 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(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -295,9 +295,9 @@ 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(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -309,25 +309,34 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/><block-text-1/>Loading<block-text-2/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-text-0/>
+ 
+ <block-text-1/>
+ Loading<block-text-2/>
+ 
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     let txt1 = ctx['a'];
     let txt2 = ctx['b'];
     let txt3 = ctx['c'];
-    return block1([txt1, txt2, txt3]);
+    const b3 = block3([txt1, txt2, txt3]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`simple templates, mostly static template with t tag with multiple content 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -342,9 +351,9 @@ 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(bdom, helpers
+"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']);
@@ -355,9 +364,9 @@ 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(bdom, helpers
+"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']);
@@ -368,9 +377,9 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
   

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`properly support svg add proper namespace to g tags 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -14,9 +14,9 @@ exports[`properly support svg add proper namespace to g tags 1`] = `
 `;
 
 exports[`properly support svg add proper namespace to svg 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -27,9 +27,9 @@ 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(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -40,9 +40,9 @@ 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(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -53,46 +53,64 @@ 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(bdom, helpers
+"function anonymous(app, bdom, 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(\`<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>\`);
+ <block-child-0/>
-  let block3 = createBlock(\`<path block-ns=\\"http://www.w3.org/2000/svg\\"/>\`);
+ </div>\`);
+  let block4 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\">
+ <polygon fill=\\"#000000\\" points=\\"0 0 4 4 8 0\\" transform=\\"translate(5 7)\\"/>
+ <block-child-0/>
+ </svg>\`);
+  let block5 = createBlock(\`<path block-ns=\\"http://www.w3.org/2000/svg\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b3;
+    const b2 = text(\`
+ \`);
+    let b5;
     if (ctx['hasPath']) {
-      b3 = block3();
+      b5 = block5();
     }
-    const b2 = block2([], [b3]);
+    const b4 = block4([], [b5]);
-    return block1([], [b2]);
+    const b3 = block3([], [b4]);
+    const b6 = text(\`
+ \`);
+    return multi([b2, b3, b6]);
   }
 }"
 `;
 
 exports[`properly support svg svg creates new block if it is within html 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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(\`<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>\`);
+ <block-child-0/>
+ </div>\`);
+  let block4 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\">
+ <polygon fill=\\"#000000\\" points=\\"0 0 4 4 8 0\\" transform=\\"translate(5 7)\\"/>
+ </svg>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = block2();
+    const b2 = text(\`
-    return block1([], [b2]);
+ \`);
+    const b4 = block4();
+    const b3 = block3([], [b4]);
+    const b5 = text(\`
+ \`);
+    return multi([b2, b3, b5]);
   }
 }"
 `;
 
 exports[`properly support svg svg namespace added to sub templates if root tag is path 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { getTemplate } = helpers;
+  const callTemplate_1 = app.getTemplate(\`path\`);
-  const callTemplate_1 = getTemplate(\`path\`);
   
   let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
   
@@ -104,9 +122,9 @@ 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(bdom, helpers
+"function anonymous(app, 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\\"/>\`);
   
@@ -117,9 +135,9 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
   let block2 = createBlock(\`<path block-ns=\\"http://www.w3.org/2000/svg\\"/>\`);

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`debugging t-debug 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
@@ -21,9 +21,9 @@ exports[`debugging t-debug 1`] = `
 `;
 
 exports[`debugging t-debug on sub template 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -35,11 +35,10 @@ exports[`debugging t-debug on sub template 1`] = `
 `;
 
 exports[`debugging t-debug on sub template 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { getTemplate } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
-  const callTemplate_1 = getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -51,12 +50,15 @@ exports[`debugging t-debug on sub template 2`] = `
 `;
 
 exports[`debugging t-log 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div/>\`);
+  let block1 = createBlock(\`<div>
+ 
+ 
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);

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

@@ -1,27 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`t-esc div with falsy values 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><p><block-text-0/></p><p><block-text-1/></p><p><block-text-2/></p><p><block-text-3/></p><p><block-text-4/></p></div>\`);
+  let block3 = createBlock(\`<div>
+ <p><block-text-0/></p>
+ <p><block-text-1/></p>
+ <p><block-text-2/></p>
+ <p><block-text-3/></p>
+ <p><block-text-4/></p>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     let txt1 = ctx['v1'];
     let txt2 = ctx['v2'];
     let txt3 = ctx['v3'];
     let txt4 = ctx['v4'];
     let txt5 = ctx['v5'];
-    return block1([txt1, txt2, txt3, txt4, txt5]);
+    const b3 = block3([txt1, txt2, txt3, txt4, txt5]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-esc escaping 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -33,9 +42,9 @@ exports[`t-esc escaping 1`] = `
 `;
 
 exports[`t-esc escaping on a node 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -47,9 +56,9 @@ exports[`t-esc escaping on a node 1`] = `
 `;
 
 exports[`t-esc escaping on a node with a body 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -62,9 +71,9 @@ 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(bdom, helpers
+"function 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>\`);
@@ -77,29 +86,31 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(ctx['v1']);
+    const b2 = text(\`
-    const b3 = text(\`:\`);
+ \`);
-    const b4 = text(ctx['v2']);
+    const b3 = text(ctx['v1']);
-    const b5 = text(\`:\`);
+    const b4 = text(\`:\`);
-    const b6 = text(ctx['v3']);
+    const b5 = text(ctx['v2']);
-    const b7 = text(\`:\`);
+    const b6 = text(\`:\`);
-    const b8 = text(ctx['v4']);
+    const b7 = text(ctx['v3']);
-    const b9 = text(\`:\`);
+    const b8 = text(\`:\`);
-    const b10 = text(ctx['v5']);
+    const b9 = text(ctx['v4']);
-    return multi([b2, b3, b4, b5, b6, b7, b8, b9, b10]);
+    const b10 = text(\`:\`);
+    const b11 = text(ctx['v5']);
+    return multi([b2, b3, b4, b5, b6, b7, b8, b9, b10, b11]);
   }
 }"
 `;
 
 exports[`t-esc literal 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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,9 +122,9 @@ exports[`t-esc literal 1`] = `
 `;
 
 exports[`t-esc t-esc is escaped 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -126,7 +137,32 @@ exports[`t-esc t-esc is escaped 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`var\`] = new LazyValue(value1, ctx, node);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node);
+    let txt1 = ctx['var'];
+    return block1([txt1]);
+  }
+}"
+`;
+
+exports[`t-esc t-esc with the 0 number 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['var']);
+  }
+}"
+`;
+
+exports[`t-esc t-esc with the 0 number, in a p 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<p><block-text-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['var'];
     return block1([txt1]);
   }
@@ -134,9 +170,9 @@ exports[`t-esc t-esc is escaped 1`] = `
 `;
 
 exports[`t-esc t-esc work with spread operator 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -148,11 +184,11 @@ exports[`t-esc t-esc work with spread operator 1`] = `
 `;
 
 exports[`t-esc t-esc=0 is escaped 1`] = `
-"function anonymous(bdom, helpers
+"function 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, getTemplate } = helpers;
+  let { isBoundary, zero } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<p>escaped</p>\`);
@@ -169,9 +205,9 @@ exports[`t-esc t-esc=0 is escaped 1`] = `
 `;
 
 exports[`t-esc t-esc=0 is escaped 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -183,10 +219,21 @@ exports[`t-esc t-esc=0 is escaped 2`] = `
 }"
 `;
 
-exports[`t-esc variable 1`] = `
+exports[`t-esc top level t-esc with undefined 1`] = `
-"function anonymous(bdom, helpers
+"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['var']);
+  }
+}"
+`;
+
+exports[`t-esc variable 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   

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

@@ -1,175 +1,217 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`t-foreach does not pollute the rendering context 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1]);;
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList([1]);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
+    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item\`] = v_block4[i1];
       const key1 = ctx['item'];
-      c_block2[i1] = withKey(text(ctx['item']), key1);
+      c_block4[i1] = withKey(text(ctx['item']), key1);
     }
-    const b2 = list(c_block2);
+    ctx = ctx.__proto__;
-    return block1([], [b2]);
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-foreach iterate on items (on a element node) 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
-  let block3 = createBlock(\`<span><block-text-0/></span>\`);
+ <block-child-0/>
+ </div>\`);
+  let block5 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1,2]);;
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList([1,2]);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
+    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item\`] = v_block4[i1];
       const key1 = ctx['item'];
       let txt1 = ctx['item'];
-      c_block2[i1] = withKey(block3([txt1]), key1);
+      c_block4[i1] = withKey(block5([txt1]), key1);
     }
-    const b2 = list(c_block2);
+    ctx = ctx.__proto__;
-    return block1([], [b2]);
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-foreach iterate on items 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);;
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList([3,2,1]);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
+    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item\`] = v_block4[i1];
       ctx[\`item_index\`] = i1;
-      ctx[\`item_value\`] = k_block2[i1];
+      ctx[\`item_value\`] = k_block4[i1];
       const key1 = ctx['item'];
-      const b4 = text(\` [\`);
+      const b6 = text(\`
-      const b5 = text(ctx['item_index']);
+ [\`);
-      const b6 = text(\`: \`);
+      const b7 = text(ctx['item_index']);
-      const b7 = text(ctx['item']);
+      const b8 = text(\`: \`);
-      const b8 = text(\` \`);
+      const b9 = text(ctx['item']);
-      const b9 = text(ctx['item_value']);
+      const b10 = text(\` \`);
-      const b10 = text(\`] \`);
+      const b11 = text(ctx['item_value']);
-      c_block2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9, b10]), key1);
+      const b12 = text(\`]
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8, b9, b10, b11, b12]), key1);
     }
-    const b2 = list(c_block2);
+    ctx = ctx.__proto__;
-    return block1([], [b2]);
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-foreach iterate, dict param 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['value']);;
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['value']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
+    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item\`] = v_block4[i1];
       ctx[\`item_index\`] = i1;
-      ctx[\`item_value\`] = k_block2[i1];
+      ctx[\`item_value\`] = k_block4[i1];
       const key1 = ctx['item_index'];
-      const b4 = text(\` [\`);
+      const b6 = text(\`
-      const b5 = text(ctx['item_index']);
+ [\`);
-      const b6 = text(\`: \`);
+      const b7 = text(ctx['item_index']);
-      const b7 = text(ctx['item']);
+      const b8 = text(\`: \`);
-      const b8 = text(\` \`);
+      const b9 = text(ctx['item']);
-      const b9 = text(ctx['item_value']);
+      const b10 = text(\` \`);
-      const b10 = text(\`] \`);
+      const b11 = text(ctx['item_value']);
-      c_block2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9, b10]), key1);
+      const b12 = text(\`]
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8, b9, b10, b11, b12]), key1);
     }
-    const b2 = list(c_block2);
+    ctx = ctx.__proto__;
-    return block1([], [b2]);
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-foreach iterate, position 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(5));;
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(Array(5));;
-    for (let i1 = 0; i1 < l_block2; i1++) {
+    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`elem\`] = v_block2[i1];
+      ctx[\`elem\`] = v_block4[i1];
       ctx[\`elem_first\`] = i1 === 0;
-      ctx[\`elem_last\`] = i1 === v_block2.length - 1;
+      ctx[\`elem_last\`] = i1 === v_block4.length - 1;
       ctx[\`elem_index\`] = i1;
       const key1 = ctx['elem'];
-      let b4,b5,b6,b7,b8,b9;
+      let b6,b7,b8,b9,b10,b11;
-      b4 = text(\` -\`);
+      b6 = text(\`
+ -\`);
       if (ctx['elem_first']) {
-        b5 = text(\` first\`);
+        b7 = text(\` first\`);
       }
       if (ctx['elem_last']) {
-        b6 = text(\` last\`);
+        b8 = text(\` last\`);
       }
-      b7 = text(\` (\`);
+      b9 = text(\` (\`);
-      b8 = text(ctx['elem_index']);
+      b10 = text(ctx['elem_index']);
-      b9 = text(\`) \`);
+      b11 = text(\`)
-      c_block2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9]), key1);
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8, b9, b10, b11]), key1);
     }
-    const b2 = list(c_block2);
+    ctx = ctx.__proto__;
-    return block1([], [b2]);
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-foreach simple iteration (in a node) 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);;
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList([3,2,1]);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
+    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item\`] = v_block4[i1];
       const key1 = ctx['item'];
-      c_block2[i1] = withKey(text(ctx['item']), key1);
+      c_block4[i1] = withKey(text(ctx['item']), key1);
     }
-    const b2 = list(c_block2);
+    ctx = ctx.__proto__;
-    return block1([], [b2]);
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-foreach simple iteration 1`] = `
-"function anonymous(bdom, helpers
+"function 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 = \\"\\") {
@@ -186,286 +228,390 @@ exports[`t-foreach simple iteration 1`] = `
 `;
 
 exports[`t-foreach simple iteration with two nodes inside 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<span>a<block-text-0/></span>\`);
+  let block6 = createBlock(\`<span>a<block-text-0/></span>\`);
-  let block4 = createBlock(\`<span>b<block-text-0/></span>\`);
+  let block8 = createBlock(\`<span>b<block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList([3,2,1]);;
+    const [k_block3, v_block3, l_block3, c_block3] = prepareList([3,2,1]);;
-    for (let i1 = 0; i1 < l_block1; i1++) {
+    for (let i1 = 0; i1 < l_block3; i1++) {
-      ctx[\`item\`] = v_block1[i1];
+      ctx[\`item\`] = v_block3[i1];
       const key1 = ctx['item'];
+      const b5 = text(\`
+ \`);
       let txt1 = ctx['item'];
-      const b3 = block3([txt1]);
+      const b6 = block6([txt1]);
+      const b7 = text(\`
+ \`);
       let txt2 = ctx['item'];
-      const b4 = block4([txt2]);
+      const b8 = block8([txt2]);
-      c_block1[i1] = withKey(multi([b3, b4]), key1);
+      const b9 = text(\`
+ \`);
+      c_block3[i1] = withKey(multi([b5, b6, b7, b8, b9]), key1);
     }
-    return list(c_block1);
+    const b3 = list(c_block3);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-foreach t-call with body in t-foreach in t-foreach 1`] = `
-"function anonymous(bdom, helpers
+"function 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, getTemplate, withKey } = helpers;
+  let { prepareList, isBoundary, withDefault, setContextValue, zero, withKey } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block1 = createBlock(\`<div><block-child-0/><span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span></div>\`);
+  let block3 = createBlock(\`<div>
-  let block6 = createBlock(\`<span><block-text-0/></span>\`);
+ <block-child-0/>
+ <span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span>
+ </div>\`);
+  let block16 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);;
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['numbers']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
+    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`a\`] = v_block2[i1];
+      ctx[\`a\`] = v_block4[i1];
       ctx[\`a_first\`] = i1 === 0;
-      ctx[\`a_last\`] = i1 === v_block2.length - 1;
+      ctx[\`a_last\`] = i1 === v_block4.length - 1;
       ctx[\`a_index\`] = i1;
-      ctx[\`a_value\`] = k_block2[i1];
+      ctx[\`a_value\`] = k_block4[i1];
       const key1 = ctx['a'];
+      const b6 = text(\`
+ \`);
       ctx = Object.create(ctx);
-      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['letters']);;
+      const [k_block7, v_block7, l_block7, c_block7] = prepareList(ctx['letters']);;
-      for (let i2 = 0; i2 < l_block4; i2++) {
+      for (let i2 = 0; i2 < l_block7; i2++) {
-        ctx[\`b\`] = v_block4[i2];
+        ctx[\`b\`] = v_block7[i2];
         ctx[\`b_first\`] = i2 === 0;
-        ctx[\`b_last\`] = i2 === v_block4.length - 1;
+        ctx[\`b_last\`] = i2 === v_block7.length - 1;
         ctx[\`b_index\`] = i2;
-        ctx[\`b_value\`] = k_block4[i2];
+        ctx[\`b_value\`] = k_block7[i2];
         const key2 = ctx['b'];
+        const b9 = text(\`
+ \`);
         ctx = Object.create(ctx);
         ctx[isBoundary] = 1;
+        const b11 = text(\`
+ \`);
         setContextValue(ctx, \\"c\\", 'x'+'_'+ctx['a']+'_'+ctx['b']);
-        c_block4[i2] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`), key2);
+        const b12 = text(\`
+ \`);
+        const b10 = multi([b11, b12]);
+        ctx[zero] = b10;
+        const b13 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`);
         ctx = ctx.__proto__;
+        const b14 = text(\`
+ \`);
+        c_block7[i2] = withKey(multi([b9, b13, b14]), key2);
       }
       ctx = ctx.__proto__;
-      const b4 = list(c_block4);
+      const b7 = list(c_block7);
+      const b15 = text(\`
+ \`);
       let txt1 = ctx['c'];
-      const b6 = block6([txt1]);
+      const b16 = block16([txt1]);
-      c_block2[i1] = withKey(multi([b4, b6]), key1);
+      const b17 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b15, b16, b17]), key1);
     }
     ctx = ctx.__proto__;
-    const b2 = list(c_block2);
+    const b4 = list(c_block4);
     let txt2 = ctx['a'];
     let txt3 = ctx['b'];
     let txt4 = ctx['c'];
-    return block1([txt2, txt3, txt4], [b2]);
+    const b3 = block3([txt2, txt3, txt4], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-foreach t-call with body in t-foreach in t-foreach 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\` [\`);
+    const b2 = text(\`
-    const b3 = text(ctx['a']);
+ \`);
-    const b4 = text(\`] [\`);
+    const b3 = text(\`
-    const b5 = text(ctx['b']);
+ [\`);
-    const b6 = text(\`] [\`);
+    const b4 = text(ctx['a']);
-    const b7 = text(ctx['c']);
+    const b5 = text(\`]
-    const b8 = text(\`] \`);
+ [\`);
-    return multi([b2, b3, b4, b5, b6, b7, b8]);
+    const b6 = text(ctx['b']);
+    const b7 = text(\`]
+ [\`);
+    const b8 = text(ctx['c']);
+    const b9 = text(\`]
+ \`);
+    return multi([b2, b3, b4, b5, b6, b7, b8, b9]);
   }
 }"
 `;
 
 exports[`t-foreach t-call without body in t-foreach in t-foreach 1`] = `
-"function anonymous(bdom, helpers
+"function 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, getTemplate, withKey } = helpers;
+  let { prepareList, withKey } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block1 = createBlock(\`<div><block-child-0/><span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span></div>\`);
+  let block3 = createBlock(\`<div>
-  let block6 = createBlock(\`<span><block-text-0/></span>\`);
+ <block-child-0/>
+ <span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span>
+ </div>\`);
+  let block13 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);;
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['numbers']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
+    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`a\`] = v_block2[i1];
+      ctx[\`a\`] = v_block4[i1];
       ctx[\`a_first\`] = i1 === 0;
-      ctx[\`a_last\`] = i1 === v_block2.length - 1;
+      ctx[\`a_last\`] = i1 === v_block4.length - 1;
       ctx[\`a_index\`] = i1;
-      ctx[\`a_value\`] = k_block2[i1];
+      ctx[\`a_value\`] = k_block4[i1];
       const key1 = ctx['a'];
+      const b6 = text(\`
+ \`);
       ctx = Object.create(ctx);
-      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['letters']);;
+      const [k_block7, v_block7, l_block7, c_block7] = prepareList(ctx['letters']);;
-      for (let i2 = 0; i2 < l_block4; i2++) {
+      for (let i2 = 0; i2 < l_block7; i2++) {
-        ctx[\`b\`] = v_block4[i2];
+        ctx[\`b\`] = v_block7[i2];
         ctx[\`b_first\`] = i2 === 0;
-        ctx[\`b_last\`] = i2 === v_block4.length - 1;
+        ctx[\`b_last\`] = i2 === v_block7.length - 1;
         ctx[\`b_index\`] = i2;
-        ctx[\`b_value\`] = k_block4[i2];
+        ctx[\`b_value\`] = k_block7[i2];
         const key2 = ctx['b'];
-        c_block4[i2] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`), key2);
+        const b9 = text(\`
+ \`);
+        const b10 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`);
+        const b11 = text(\`
+ \`);
+        c_block7[i2] = withKey(multi([b9, b10, b11]), key2);
       }
       ctx = ctx.__proto__;
-      const b4 = list(c_block4);
+      const b7 = list(c_block7);
+      const b12 = text(\`
+ \`);
       let txt1 = ctx['c'];
-      const b6 = block6([txt1]);
+      const b13 = block13([txt1]);
-      c_block2[i1] = withKey(multi([b4, b6]), key1);
+      const b14 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b12, b13, b14]), key1);
     }
     ctx = ctx.__proto__;
-    const b2 = list(c_block2);
+    const b4 = list(c_block4);
     let txt2 = ctx['a'];
     let txt3 = ctx['b'];
     let txt4 = ctx['c'];
-    return block1([txt2, txt3, txt4], [b2]);
+    const b3 = block3([txt2, txt3, txt4], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-foreach t-call without body in t-foreach in t-foreach 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
+    const b3 = text(\`
+ \`);
     setContextValue(ctx, \\"c\\", 'x'+'_'+ctx['a']+'_'+ctx['b']);
-    const b2 = text(\` [\`);
+    const b4 = text(\`
-    const b3 = text(ctx['a']);
+ [\`);
-    const b4 = text(\`] [\`);
+    const b5 = text(ctx['a']);
-    const b5 = text(ctx['b']);
+    const b6 = text(\`]
-    const b6 = text(\`] [\`);
+ [\`);
-    const b7 = text(ctx['c']);
+    const b7 = text(ctx['b']);
-    const b8 = text(\`] \`);
+    const b8 = text(\`]
-    return multi([b2, b3, b4, b5, b6, b7, b8]);
+ [\`);
+    const b9 = text(ctx['c']);
+    const b10 = text(\`]
+ \`);
+    return multi([b2, b3, b4, b5, b6, b7, b8, b9, b10]);
   }
 }"
 `;
 
 exports[`t-foreach t-foreach in t-foreach 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);;
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['numbers']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
+    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`number\`] = v_block2[i1];
+      ctx[\`number\`] = v_block4[i1];
       const key1 = ctx['number'];
+      const b6 = text(\`
+ \`);
       ctx = Object.create(ctx);
-      const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['letters']);;
+      const [k_block7, v_block7, l_block7, c_block7] = prepareList(ctx['letters']);;
-      for (let i2 = 0; i2 < l_block3; i2++) {
+      for (let i2 = 0; i2 < l_block7; i2++) {
-        ctx[\`letter\`] = v_block3[i2];
+        ctx[\`letter\`] = v_block7[i2];
         const key2 = ctx['letter'];
-        const b5 = text(\` [\`);
+        const b9 = text(\`
-        const b6 = text(ctx['number']);
+ [\`);
-        const b7 = text(ctx['letter']);
+        const b10 = text(ctx['number']);
-        const b8 = text(\`] \`);
+        const b11 = text(ctx['letter']);
-        c_block3[i2] = withKey(multi([b5, b6, b7, b8]), key2);
+        const b12 = text(\`]
+ \`);
+        c_block7[i2] = withKey(multi([b9, b10, b11, b12]), key2);
       }
       ctx = ctx.__proto__;
-      c_block2[i1] = withKey(list(c_block3), key1);
+      const b7 = list(c_block7);
+      const b13 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b13]), key1);
     }
-    const b2 = list(c_block2);
+    ctx = ctx.__proto__;
-    return block1([], [b2]);
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-foreach t-foreach with t-if inside (no external node) 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block3 = createBlock(\`<span><block-text-0/></span>\`);
+  let block6 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['elems']);;
+    const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['elems']);;
-    for (let i1 = 0; i1 < l_block1; i1++) {
+    for (let i1 = 0; i1 < l_block3; i1++) {
-      ctx[\`elem\`] = v_block1[i1];
+      ctx[\`elem\`] = v_block3[i1];
       const key1 = ctx['elem'].id;
-      let b3;
+      let b5,b6,b7;
+      b5 = text(\`
+ \`);
       if (ctx['elem'].id<3) {
         let txt1 = ctx['elem'].text;
-        b3 = block3([txt1]);
+        b6 = block6([txt1]);
       }
-      c_block1[i1] = withKey(multi([b3]), key1);
+      b7 = text(\`
+ \`);
+      c_block3[i1] = withKey(multi([b5, b6, b7]), key1);
     }
-    return list(c_block1);
+    const b3 = list(c_block3);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-foreach t-foreach with t-if inside 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
-  let block4 = createBlock(\`<span><block-text-0/></span>\`);
+ <block-child-0/>
+ </div>\`);
+  let block7 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['elems']);;
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['elems']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
+    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`elem\`] = v_block2[i1];
+      ctx[\`elem\`] = v_block4[i1];
       const key1 = ctx['elem'].id;
-      let b4;
+      let b6,b7,b8;
+      b6 = text(\`
+ \`);
       if (ctx['elem'].id<3) {
         let txt1 = ctx['elem'].text;
-        b4 = block4([txt1]);
+        b7 = block7([txt1]);
       }
-      c_block2[i1] = withKey(multi([b4]), key1);
+      b8 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
     }
-    const b2 = list(c_block2);
+    ctx = ctx.__proto__;
-    return block1([], [b2]);
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-foreach t-key on t-foreach 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
-  let block3 = createBlock(\`<span/>\`);
+ <block-child-0/>
+ </div>\`);
+  let block7 = createBlock(\`<span/>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['things']);;
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['things']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
+    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`thing\`] = v_block2[i1];
+      ctx[\`thing\`] = v_block4[i1];
       const key1 = ctx['thing'];
-      c_block2[i1] = withKey(block3(), key1);
+      const b6 = text(\`
+ \`);
+      const b7 = block7();
+      const b8 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8]), key1);
     }
-    const b2 = list(c_block2);
+    ctx = ctx.__proto__;
-    return block1([], [b2]);
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-foreach throws error if invalid loop expression 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -488,38 +634,47 @@ exports[`t-foreach throws error if invalid loop expression 1`] = `
 `;
 
 exports[`t-foreach with t-memo 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
-  let block3 = createBlock(\`<p><block-text-0/><block-text-1/></p>\`);
+ <block-child-0/>
+ </div>\`);
+  let block5 = createBlock(\`<p>
+ <block-text-0/>
+ <block-text-1/>
+ </p>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let cache = ctx.cache || {};
     let nextCache = ctx.cache = {};
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['items']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
+    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`item\`] = v_block2[i1];
+      ctx[\`item\`] = v_block4[i1];
       const key1 = ctx['item'].id;
       const memo1 = [ctx['item'].x];
       const vnode1 = cache[key1];;
       if (vnode1) {
         if (shallowEqual(vnode1.memo, memo1)) {
-          c_block2[i1] = vnode1;
+          c_block4[i1] = vnode1;
           nextCache[key1] = vnode1;
           continue;
         }
       }
       let txt1 = ctx['item'].x;
       let txt2 = ctx['item'].y;
-      c_block2[i1] = withKey(block3([txt1, txt2]), key1);
+      c_block4[i1] = withKey(block5([txt1, txt2]), key1);
-      nextCache[key1] = Object.assign(c_block2[i1], {memo: memo1});
+      nextCache[key1] = Object.assign(c_block4[i1], {memo: memo1});
     }
-    const b2 = list(c_block2);
+    ctx = ctx.__proto__;
-    return block1([], [b2]);
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`t-if a t-if next to a div 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
   
@@ -19,9 +19,9 @@ exports[`t-if a t-if next to a div 1`] = `
 `;
 
 exports[`t-if a t-if with two inner nodes 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -39,91 +39,108 @@ exports[`t-if a t-if with two inner nodes 1`] = `
 `;
 
 exports[`t-if boolean value condition elif (no outside node) 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4,b5;
+    let b2,b3,b4,b5,b6;
+    b2 = text(\`
+ \`);
     if (ctx['color']=='black') {
-      b2 = text(\`black pearl\`);
+      b3 = text(\`black pearl\`);
     } else if (ctx['color']=='yellow') {
-      b3 = text(\`yellow submarine\`);
+      b4 = text(\`yellow submarine\`);
     } else if (ctx['color']=='red') {
-      b4 = text(\`red is dead\`);
+      b5 = text(\`red is dead\`);
     } else {
-      b5 = text(\`beer\`);
+      b6 = text(\`beer\`);
     }
-    return multi([b2, b3, b4, b5]);
+    return multi([b2, b3, b4, b5, b6]);
   }
 }"
 `;
 
 exports[`t-if boolean value condition elif 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-2/><block-child-3/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/><block-child-1/><block-child-2/><block-child-3/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4,b5;
+    const b2 = text(\`
+ \`);
+    let b4,b5,b6,b7;
     if (ctx['color']=='black') {
-      b2 = text(\`black pearl\`);
+      b4 = text(\`black pearl\`);
     } else if (ctx['color']=='yellow') {
-      b3 = text(\`yellow submarine\`);
+      b5 = text(\`yellow submarine\`);
     } else if (ctx['color']=='red') {
-      b4 = text(\`red is dead\`);
+      b6 = text(\`red is dead\`);
     } else {
-      b5 = text(\`beer\`);
+      b7 = text(\`beer\`);
     }
-    return block1([], [b2, b3, b4, b5]);
+    const b3 = block3([], [b4, b5, b6, b7]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-if boolean value condition else 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><span>begin</span><block-child-0/><block-child-1/><span>end</span></div>\`);
+  let block3 = createBlock(\`<div>
+ <span>begin</span>
+ <block-child-0/><block-child-1/>
+ <span>end</span>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    const b2 = text(\`
+ \`);
+    let b4,b5;
     if (ctx['condition']) {
-      b2 = text(\`ok\`);
+      b4 = text(\`ok\`);
     } else {
-      b3 = text(\`ok-else\`);
+      b5 = text(\`ok-else\`);
     }
-    return block1([], [b2, b3]);
+    const b3 = block3([], [b4, b5]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-if boolean value condition false else 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><span>begin</span><block-child-0/><block-child-1/><span>end</span></div>\`);
+  let block3 = createBlock(\`<div><span>begin</span><block-child-0/><block-child-1/><span>end</span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    const b2 = text(\`
+ \`);
+    let b4,b5;
     if (ctx['condition']) {
-      b2 = text(\`fail\`);
+      b4 = text(\`fail\`);
     } else {
-      b3 = text(\`fail-else\`);
+      b5 = text(\`fail-else\`);
     }
-    return block1([], [b2, b3]);
+    const b3 = block3([], [b4, b5]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-if boolean value condition missing 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -138,47 +155,59 @@ exports[`t-if boolean value condition missing 1`] = `
 `;
 
 exports[`t-if can use some boolean operators in expressions 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-2/><block-child-3/><block-child-4/><block-child-5/><block-child-6/><block-child-7/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ <block-child-1/>
+ <block-child-2/>
+ <block-child-3/>
+ <block-child-4/>
+ <block-child-5/>
+ <block-child-6/>
+ <block-child-7/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3,b4,b5,b6,b7,b8,b9;
+    const b2 = text(\`
+ \`);
+    let b4,b5,b6,b7,b8,b9,b10,b11;
     if (ctx['cond1']&&ctx['cond2']) {
-      b2 = text(\`and\`);
+      b4 = text(\`and\`);
     }
     if (ctx['cond1']&&ctx['cond3']) {
-      b3 = text(\`nope\`);
-    }
-    if (ctx['cond1']||ctx['cond3']) {
-      b4 = text(\`or\`);
-    }
-    if (ctx['cond3']||ctx['cond4']) {
       b5 = text(\`nope\`);
     }
+    if (ctx['cond1']||ctx['cond3']) {
+      b6 = text(\`or\`);
+    }
+    if (ctx['cond3']||ctx['cond4']) {
+      b7 = text(\`nope\`);
+    }
     if (ctx['m']>3) {
-      b6 = text(\`mgt\`);
+      b8 = text(\`mgt\`);
     }
     if (ctx['n']>3) {
-      b7 = text(\`ngt\`);
+      b9 = text(\`ngt\`);
     }
     if (ctx['m']<3) {
-      b8 = text(\`mlt\`);
+      b10 = text(\`mlt\`);
     }
     if (ctx['n']<3) {
-      b9 = text(\`nlt\`);
+      b11 = text(\`nlt\`);
     }
-    return block1([], [b2, b3, b4, b5, b6, b7, b8, b9]);
+    const b3 = block3([], [b4, b5, b6, b7, b8, b9, b10, b11]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-if div containing a t-if with two inner nodes 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
@@ -197,9 +226,9 @@ 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(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
@@ -219,9 +248,9 @@ exports[`t-if dynamic content after t-if with two children nodes 1`] = `
 `;
 
 exports[`t-if just a t-if 1`] = `
-"function anonymous(bdom, helpers
+"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;
@@ -234,9 +263,9 @@ exports[`t-if just a t-if 1`] = `
 `;
 
 exports[`t-if simple t-if/t-else 1`] = `
-"function anonymous(bdom, helpers
+"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;
@@ -251,9 +280,9 @@ exports[`t-if simple t-if/t-else 1`] = `
 `;
 
 exports[`t-if simple t-if/t-else in a div 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -270,9 +299,9 @@ exports[`t-if simple t-if/t-else in a div 1`] = `
 `;
 
 exports[`t-if t-esc with t-elif 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -289,9 +318,9 @@ exports[`t-if t-esc with t-elif 1`] = `
 `;
 
 exports[`t-if t-esc with t-if 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -306,9 +335,9 @@ exports[`t-if t-esc with t-if 1`] = `
 `;
 
 exports[`t-if t-if and t-else with two nodes 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -328,9 +357,9 @@ exports[`t-if t-if and t-else with two nodes 1`] = `
 `;
 
 exports[`t-if t-if in a div 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -345,9 +374,9 @@ exports[`t-if t-if in a div 1`] = `
 `;
 
 exports[`t-if t-if in a t-if 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
@@ -367,9 +396,9 @@ exports[`t-if t-if in a t-if 1`] = `
 `;
 
 exports[`t-if t-if with empty content 1`] = `
-"function anonymous(bdom, helpers
+"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;
@@ -383,9 +412,9 @@ exports[`t-if t-if with empty content 1`] = `
 `;
 
 exports[`t-if t-if/t-else with more content 1`] = `
-"function anonymous(bdom, helpers
+"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;
@@ -402,79 +431,99 @@ exports[`t-if t-if/t-else with more content 1`] = `
 `;
 
 exports[`t-if t-set, then t-if 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    let b2;
+    const b2 = text(\`
+ \`);
+    let b4;
     setContextValue(ctx, \\"title\\", 'test');
     if (ctx['title']) {
-      b2 = text(ctx['title']);
+      b4 = text(ctx['title']);
     }
-    return block1([], [b2]);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-if t-set, then t-if, part 2 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
-  let block2 = createBlock(\`<span>COUCOU</span>\`);
+ 
+ 
+ <block-child-0/>
+ </div>\`);
+  let block4 = createBlock(\`<span>COUCOU</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    let b2;
+    const b2 = text(\`
+ \`);
+    let b4;
     setContextValue(ctx, \\"y\\", true);
     setContextValue(ctx, \\"x\\", ctx['y']);
     if (ctx['x']) {
-      b2 = block2();
+      b4 = block4();
     }
-    return block1([], [b2]);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-if t-set, then t-if, part 3 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block3 = createBlock(\`<div>
-  let block2 = createBlock(\`<span>AAA</span>\`);
+ 
-  let block3 = createBlock(\`<span>BBB</span>\`);
+ 
+ <block-child-0/><block-child-1/>
+ </div>\`);
+  let block4 = createBlock(\`<span>AAA</span>\`);
+  let block5 = createBlock(\`<span>BBB</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    let b2,b3;
+    const b2 = text(\`
+ \`);
+    let b4,b5;
     setContextValue(ctx, \\"y\\", false);
     setContextValue(ctx, \\"x\\", ctx['y']);
     if (ctx['x']) {
-      b2 = block2();
+      b4 = block4();
     } else if (!ctx['x']) {
-      b3 = block3();
+      b5 = block5();
     }
-    return block1([], [b2, b3]);
+    const b3 = block3([], [b4, b5]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-if two consecutive t-if 1`] = `
-"function anonymous(bdom, helpers
+"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;
@@ -490,9 +539,9 @@ exports[`t-if two consecutive t-if 1`] = `
 `;
 
 exports[`t-if two consecutive t-if in a div 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -510,9 +559,9 @@ exports[`t-if two consecutive t-if in a div 1`] = `
 `;
 
 exports[`t-if two t-ifs next to each other 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   let block2 = createBlock(\`<span><block-text-0/></span>\`);

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`t-key can use t-key directive on a node 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -16,9 +16,9 @@ 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(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -31,9 +31,9 @@ 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(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -46,12 +46,14 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
+  let block1 = createBlock(\`<ul>
+ <block-child-0/>
+ </ul>\`);
   let block3 = createBlock(\`<li><block-text-0/></li>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -63,6 +65,7 @@ exports[`t-key t-key directive in a list 1`] = `
       let txt1 = ctx['beer'].name;
       c_block2[i1] = withKey(block3([txt1]), key1);
     }
+    ctx = ctx.__proto__;
     const b2 = list(c_block2);
     return block1([], [b2]);
   }
@@ -70,30 +73,38 @@ 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(bdom, helpers
+"function anonymous(app, bdom, 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 block3 = createBlock(\`<div>
-  let block2 = createBlock(\`<span/>\`);
+ <block-child-0/>
-  let block3 = createBlock(\`<div><h1/></div>\`);
+ <block-child-1/>
+ </div>\`);
+  let block4 = createBlock(\`<span/>\`);
+  let block5 = createBlock(\`<div><h1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
+    const b2 = text(\`
+ \`);
+    let b4,b5;
     if (ctx['hasSpan']) {
-      b2 = block2();
+      b4 = block4();
     }
     const tKey_1 = ctx['key'];
-    b3 = toggler(tKey_1, block3());
+    b5 = toggler(tKey_1, block5());
-    return block1([], [b2, b3]);
+    const b3 = block3([], [b4, b5]);
+    const b6 = text(\`
+ \`);
+    return multi([b2, b3, b6]);
   }
 }"
 `;
 
 exports[`t-key t-key on sub dom node pushes a child block in its parent 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><h1/></div>\`);
   

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`t-out literal 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -16,9 +16,9 @@ exports[`t-out literal 1`] = `
 `;
 
 exports[`t-out literal, no outside html element 1`] = `
-"function anonymous(bdom, helpers
+"function 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 = \\"\\") {
@@ -28,46 +28,64 @@ exports[`t-out literal, no outside html element 1`] = `
 `;
 
 exports[`t-out multiple calls to t-out 1`] = `
-"function anonymous(bdom, helpers
+"function 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, getTemplate } = helpers;
+  let { isBoundary, zero } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
-  let block2 = createBlock(\`<span>coucou</span>\`);
+ <block-child-0/>
+ </div>\`);
+  let block6 = createBlock(\`<span>coucou</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    const b2 = block2();
+    const b5 = text(\`
-    ctx[zero] = b2;
+ \`);
-    const b3 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b6 = block6();
-    return block1([], [b3]);
+    const b7 = text(\`
+ \`);
+    const b4 = multi([b5, b6, b7]);
+    ctx[zero] = b4;
+    const b8 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    ctx = ctx.__proto__;
+    const b3 = block3([], [b8]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-out multiple calls to t-out 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><div>Greeter</div><block-child-1/></div>\`);
+  let block3 = createBlock(\`<div>
+ <block-child-0/>
+ <div>Greeter</div>
+ <block-child-1/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = ctx[zero];
+    const b2 = text(\`
-    const b3 = ctx[zero];
+ \`);
-    return block1([], [b2, b3]);
+    const b4 = ctx[zero];
+    const b5 = ctx[zero];
+    const b3 = block3([], [b4, b5]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-out not escaping 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -79,12 +97,27 @@ exports[`t-out not escaping 1`] = `
 }"
 `;
 
-exports[`t-out t-out 0 1`] = `
+exports[`t-out number literal 1`] = `
-"function anonymous(bdom, helpers
+"function 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, getTemplate } = helpers;
+  let { safeOutput } = helpers;
-  const callTemplate_1 = getTemplate(\`_basic-callee\`);
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = safeOutput(1);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-out t-out 0 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, zero } = helpers;
+  const callTemplate_1 = app.getTemplate(\`_basic-callee\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<div>zero</div>\`);
@@ -101,9 +134,9 @@ exports[`t-out t-out 0 1`] = `
 `;
 
 exports[`t-out t-out 0 2`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -116,9 +149,9 @@ exports[`t-out t-out 0 2`] = `
 `;
 
 exports[`t-out t-out and another sibling node 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -131,9 +164,9 @@ exports[`t-out t-out and another sibling node 1`] = `
 `;
 
 exports[`t-out t-out bdom 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -146,7 +179,7 @@ exports[`t-out t-out bdom 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`var\`] = new LazyValue(value1, ctx, node);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node);
     const b3 = safeOutput(ctx['var']);
     return block1([], [b3]);
   }
@@ -154,9 +187,9 @@ exports[`t-out t-out bdom 1`] = `
 `;
 
 exports[`t-out t-out block 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -169,9 +202,9 @@ exports[`t-out t-out block 1`] = `
 `;
 
 exports[`t-out t-out escaped 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -184,9 +217,9 @@ exports[`t-out t-out escaped 1`] = `
 `;
 
 exports[`t-out t-out markedup 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -199,42 +232,42 @@ exports[`t-out t-out markedup 1`] = `
 `;
 
 exports[`t-out t-out on a node with a body, as a default 1`] = `
-"function anonymous(bdom, helpers
+"function 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, withDefault } = helpers;
+  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]);
   }
 }"
 `;
 
 exports[`t-out t-out on a node with a dom node in body, as a default 1`] = `
-"function anonymous(bdom, helpers
+"function 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, withDefault } = helpers;
+  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]);
   }
 }"
 `;
 
 exports[`t-out t-out switch escaped 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -247,9 +280,9 @@ exports[`t-out t-out switch escaped 1`] = `
 `;
 
 exports[`t-out t-out switch escaped on markup 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -262,9 +295,9 @@ exports[`t-out t-out switch escaped on markup 1`] = `
 `;
 
 exports[`t-out t-out switch markup 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -277,15 +310,18 @@ exports[`t-out t-out switch markup 1`] = `
 `;
 
 exports[`t-out t-out switch markup on bdom 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block1 = createBlock(\`<div>
+ 
+ <block-child-0/><block-child-1/>
+ </div>\`);
   let block2 = createBlock(\`<ol>set</ol>\`);
-  let block3 = createBlock(\`<span><block-child-0/></span>\`);
   let block5 = createBlock(\`<span><block-child-0/></span>\`);
+  let block10 = createBlock(\`<span><block-child-0/></span>\`);
   
   function value1(ctx, node, key = \\"\\") {
     return block2();
@@ -294,24 +330,34 @@ exports[`t-out t-out switch markup on bdom 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    let b3,b5;
+    let b3,b8;
-    ctx[\`bdom\`] = new LazyValue(value1, ctx, node);
+    ctx[\`bdom\`] = new LazyValue(value1, ctx, this, node);
     if (ctx['hasBdom']) {
-      const b4 = safeOutput(ctx['bdom']);
+      const b4 = text(\`
-      b3 = block3([], [b4]);
+ \`);
+      const b6 = safeOutput(ctx['bdom']);
+      const b5 = block5([], [b6]);
+      const b7 = text(\`
+ \`);
+      b3 = multi([b4, b5, b7]);
     } else {
-      const b6 = safeOutput(ctx['var']);
+      const b9 = text(\`
-      b5 = block5([], [b6]);
+ \`);
+      const b11 = safeOutput(ctx['var']);
+      const b10 = block10([], [b11]);
+      const b12 = text(\`
+ \`);
+      b8 = multi([b9, b10, b12]);
     }
-    return block1([], [b3, b5]);
+    return block1([], [b3, b8]);
   }
 }"
 `;
 
 exports[`t-out t-out switch markup on escaped 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -324,9 +370,9 @@ exports[`t-out t-out switch markup on escaped 1`] = `
 `;
 
 exports[`t-out t-out with a <t/> in body 1`] = `
-"function anonymous(bdom, helpers
+"function 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 = \\"\\") {
@@ -336,9 +382,9 @@ exports[`t-out t-out with a <t/> in body 1`] = `
 `;
 
 exports[`t-out t-out with arbitrary object 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -351,9 +397,9 @@ exports[`t-out t-out with arbitrary object 1`] = `
 `;
 
 exports[`t-out t-out with arbitrary object 2 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -366,9 +412,9 @@ exports[`t-out t-out with arbitrary object 2 1`] = `
 `;
 
 exports[`t-out t-out with comment 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -381,9 +427,48 @@ 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(bdom, helpers
+"function 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 = \\"\\") {
@@ -393,9 +478,9 @@ exports[`t-out t-out with just a t-set t-value in body 1`] = `
 `;
 
 exports[`t-out variable 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -408,9 +493,9 @@ exports[`t-out variable 1`] = `
 `;
 
 exports[`t-out with a String class 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -423,9 +508,9 @@ exports[`t-out with a String class 1`] = `
 `;
 
 exports[`t-out with an extended String class 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -438,9 +523,9 @@ exports[`t-out with an extended String class 1`] = `
 `;
 
 exports[`t-raw is deprecated should warn 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -453,9 +538,9 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);

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

@@ -1,9 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`t-ref can get a dynamic ref on a node 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const refs = ctx.__owl__.refs;
+    const v1 = ctx['id'];
+    let ref1 = (el) => refs[\`myspan\${v1}\`] = el;
+    return block1([ref1]);
+  }
+}"
+`;
+
+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, comment } = bdom;
   
   let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
   
@@ -17,9 +33,9 @@ exports[`t-ref can get a dynamic ref on a node 1`] = `
 `;
 
 exports[`t-ref can get a ref on a node 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -32,11 +48,10 @@ exports[`t-ref can get a ref on a node 1`] = `
 `;
 
 exports[`t-ref ref in a t-call 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { getTemplate } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
-  const callTemplate_1 = getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -48,9 +63,9 @@ exports[`t-ref ref in a t-call 1`] = `
 `;
 
 exports[`t-ref ref in a t-call 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -63,33 +78,45 @@ exports[`t-ref ref in a t-call 2`] = `
 `;
 
 exports[`t-ref ref in a t-if 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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(\`<div>
-  let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
+ <block-child-0/>
+ </div>\`);
+  let block6 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`name\`] = el;
-    let b2;
+    const b2 = text(\`
+ \`);
+    let b4;
     if (ctx['condition']) {
-      b2 = block2([ref1]);
+      const b5 = text(\`
+ \`);
+      const b6 = block6([ref1]);
+      const b7 = text(\`
+ \`);
+      b4 = multi([b5, b6, b7]);
     }
-    return block1([], [b2]);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-ref refs in a loop 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<div>
-  let block3 = createBlock(\`<div block-ref=\\"0\\"><block-text-1/></div>\`);
+ <block-child-0/>
+ </div>\`);
+  let block5 = createBlock(\`<div block-ref=\\"0\\"><block-text-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
@@ -98,12 +125,18 @@ exports[`t-ref refs in a loop 1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`item\`] = v_block2[i1];
       const key1 = ctx['item'];
+      const b4 = text(\`
+ \`);
       const tKey_1 = ctx['item'];
       const v1 = ctx['item'];
-      let ref1 = (el) => refs[\`\${v1}\`] = el;
+      let ref1 = (el) => refs[(v1)] = el;
       let txt1 = ctx['item'];
-      c_block2[i1] = withKey(block3([ref1, txt1]), tKey_1 + key1);
+      const b5 = toggler(tKey_1, block5([ref1, txt1]));
+      const b6 = text(\`
+ \`);
+      c_block2[i1] = withKey(multi([b4, b5, b6]), key1);
     }
+    ctx = ctx.__proto__;
     const b2 = list(c_block2);
     return block1([], [b2]);
   }
@@ -111,22 +144,33 @@ exports[`t-ref refs in a loop 1`] = `
 `;
 
 exports[`t-ref two refs, one in a t-if 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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 block3 = createBlock(\`<div>
-  let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
+ <block-child-0/>
+ <p block-ref=\\"0\\"/>
+ </div>\`);
+  let block6 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`name\`] = el;
     const ref2 = (el) => refs[\`p\`] = el;
-    let b2;
+    const b2 = text(\`
+ \`);
+    let b4;
     if (ctx['condition']) {
-      b2 = block2([ref1]);
+      const b5 = text(\`
+ \`);
+      const b6 = block6([ref1]);
+      const b7 = text(\`
+ \`);
+      b4 = multi([b5, b6, b7]);
     }
-    return block1([ref2], [b2]);
+    const b3 = block3([ref2], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`t-set evaluate value expression 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -19,9 +19,9 @@ exports[`t-set evaluate value expression 1`] = `
 `;
 
 exports[`t-set evaluate value expression, part 2 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -37,9 +37,9 @@ exports[`t-set evaluate value expression, part 2 1`] = `
 `;
 
 exports[`t-set set from attribute literal (no outside div) 1`] = `
-"function anonymous(bdom, helpers
+"function 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 = \\"\\") {
@@ -52,9 +52,9 @@ exports[`t-set set from attribute literal (no outside div) 1`] = `
 `;
 
 exports[`t-set set from attribute literal 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -70,9 +70,9 @@ exports[`t-set set from attribute literal 1`] = `
 `;
 
 exports[`t-set set from attribute lookup 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -88,34 +88,47 @@ exports[`t-set set from attribute lookup 1`] = `
 `;
 
 exports[`t-set set from body literal (with t-if/t-else 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
   
   function value1(ctx, node, key = \\"\\") {
-    let b2,b3;
+    let b5,b6,b7,b8;
+    b5 = text(\`
+ \`);
     if (ctx['condition']) {
-      b2 = text(\`true\`);
+      b6 = text(\`true\`);
     } else {
-      b3 = text(\`false\`);
+      b7 = text(\`false\`);
     }
-    return multi([b2, b3]);
+    b8 = text(\`
+ \`);
+    return multi([b5, b6, b7, b8]);
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`value\`] = new LazyValue(value1, ctx, node);
+    const b2 = text(\`
-    return text(ctx['value']);
+ \`);
+    const b3 = text(\`
+ \`);
+    ctx[\`value\`] = new LazyValue(value1, ctx, this, node);
+    const b9 = text(\`
+ \`);
+    const b10 = text(ctx['value']);
+    const b11 = text(\`
+ \`);
+    return multi([b2, b3, b9, b10, b11]);
   }
 }"
 `;
 
 exports[`t-set set from body literal 1`] = `
-"function anonymous(bdom, helpers
+"function 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 = \\"\\") {
@@ -128,9 +141,9 @@ exports[`t-set set from body literal 1`] = `
 `;
 
 exports[`t-set set from body lookup 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -142,7 +155,7 @@ exports[`t-set set from body lookup 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`stuff\`] = new LazyValue(value1, ctx, node);
+    ctx[\`stuff\`] = new LazyValue(value1, ctx, this, node);
     let txt1 = ctx['stuff'];
     return block1([txt1]);
   }
@@ -150,9 +163,9 @@ exports[`t-set set from body lookup 1`] = `
 `;
 
 exports[`t-set set from empty body 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -168,77 +181,106 @@ exports[`t-set set from empty body 1`] = `
 `;
 
 exports[`t-set t-set and t-if 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <block-child-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    let b2;
+    const b2 = text(\`
+ \`);
+    let b4;
     setContextValue(ctx, \\"v\\", ctx['value']);
     if (ctx['v']==='ok') {
-      b2 = text(\`grimbergen\`);
+      b4 = text(\`grimbergen\`);
     }
-    return block1([], [b2]);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-set t-set body is evaluated immediately 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, LazyValue, safeOutput } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
-  let block2 = createBlock(\`<span><block-text-0/></span>\`);
+ 
+ 
+ 
+ <block-child-0/>
+ </div>\`);
+  let block6 = createBlock(\`<span><block-text-0/></span>\`);
   
   function value1(ctx, node, key = \\"\\") {
+    const b5 = text(\`
+ \`);
     let txt1 = ctx['v1'];
-    return block2([txt1]);
+    const b6 = block6([txt1]);
+    const b7 = text(\`
+ \`);
+    return multi([b5, b6, b7]);
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     setContextValue(ctx, \\"v1\\", 'before');
-    ctx[\`v2\`] = new LazyValue(value1, ctx, node);
+    ctx[\`v2\`] = new LazyValue(value1, ctx, this, node);
     setContextValue(ctx, \\"v1\\", 'after');
-    const b3 = safeOutput(ctx['v2']);
+    const b8 = safeOutput(ctx['v2']);
-    return block1([], [b3]);
+    const b3 = block3([], [b8]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-set t-set can't alter from within callee 1`] = `
-"function anonymous(bdom, helpers
+"function 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, getTemplate } = helpers;
+  let { isBoundary, withDefault, setContextValue } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <p><block-text-0/></p>
+ <block-child-0/>
+ <p><block-text-1/></p>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     setContextValue(ctx, \\"iter\\", 'source');
     let txt1 = ctx['iter'];
-    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b4 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     let txt2 = ctx['iter'];
-    return block1([txt1, txt2], [b2]);
+    const b3 = block3([txt1, txt2], [b4]);
+    const b5 = text(\`
+ \`);
+    return multi([b2, b3, b5]);
   }
 }"
 `;
 
 exports[`t-set t-set can't alter from within callee 2`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -255,34 +297,50 @@ 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(bdom, helpers
+"function 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, getTemplate } = helpers;
+  let { isBoundary, withDefault, setContextValue, zero } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
-  let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <p><block-text-0/></p>
+ <block-child-0/>
+ <p><block-text-1/></p>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     setContextValue(ctx, \\"iter\\", 'source');
     let txt1 = ctx['iter'];
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
+    const b5 = text(\`
+ \`);
     setContextValue(ctx, \\"iter\\", 'inCall');
-    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b6 = text(\`
+ \`);
+    const b4 = multi([b5, b6]);
+    ctx[zero] = b4;
+    const b7 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     ctx = ctx.__proto__;
     let txt2 = ctx['iter'];
-    return block1([txt1, txt2], [b2]);
+    const b3 = block3([txt1, txt2], [b7]);
+    const b8 = text(\`
+ \`);
+    return multi([b2, b3, b8]);
   }
 }"
 `;
 
 exports[`t-set t-set can't alter in t-call body 2`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -299,9 +357,9 @@ 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(bdom, helpers
+"function 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>\`);
@@ -317,292 +375,443 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <block-text-0/>
+ <block-text-1/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     setContextValue(ctx, \\"v\\", ctx['value']+' artois');
     let txt1 = ctx['v'];
     let txt2 = ctx['v'];
-    return block1([txt1, txt2]);
+    const b3 = block3([txt1, txt2]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-set t-set outside modified in t-foreach 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><p>EndLoop: <block-text-0/></p></div>\`);
+  let block3 = createBlock(\`<div>
-  let block3 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
+ 
+ <block-child-0/>
+ <p>EndLoop: <block-text-0/></p>
+ </div>\`);
+  let block7 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     setContextValue(ctx, \\"iter\\", 0);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);;
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(['a','b']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
+    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`val\`] = v_block2[i1];
+      ctx[\`val\`] = v_block4[i1];
       const key1 = ctx['val'];
+      const b6 = text(\`
+ \`);
       let txt1 = ctx['iter'];
-      c_block2[i1] = withKey(block3([txt1]), key1);
+      const b7 = block7([txt1]);
+      const b8 = text(\`
+ \`);
       setContextValue(ctx, \\"iter\\", ctx['iter']+1);
+      const b9 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8, b9]), key1);
     }
     ctx = ctx.__proto__;
-    const b2 = list(c_block2);
+    const b4 = list(c_block4);
     let txt2 = ctx['iter'];
-    return block1([txt2], [b2]);
+    const b3 = block3([txt2], [b4]);
+    const b10 = text(\`
+ \`);
+    return multi([b2, b3, b10]);
   }
 }"
 `;
 
 exports[`t-set t-set outside modified in t-foreach increment-after operator 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><p>EndLoop: <block-text-0/></p></div>\`);
+  let block3 = createBlock(\`<div>
-  let block3 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
+ 
+ <block-child-0/>
+ <p>EndLoop: <block-text-0/></p>
+ </div>\`);
+  let block7 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     setContextValue(ctx, \\"iter\\", 0);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);;
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(['a','b']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
+    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`val\`] = v_block2[i1];
+      ctx[\`val\`] = v_block4[i1];
       const key1 = ctx['val'];
+      const b6 = text(\`
+ \`);
       let txt1 = ctx['iter'];
-      c_block2[i1] = withKey(block3([txt1]), key1);
+      const b7 = block7([txt1]);
+      const b8 = text(\`
+ \`);
       setContextValue(ctx, \\"iter\\", ctx['iter']++);
+      const b9 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8, b9]), key1);
     }
     ctx = ctx.__proto__;
-    const b2 = list(c_block2);
+    const b4 = list(c_block4);
     let txt2 = ctx['iter'];
-    return block1([txt2], [b2]);
+    const b3 = block3([txt2], [b4]);
+    const b10 = text(\`
+ \`);
+    return multi([b2, b3, b10]);
   }
 }"
 `;
 
 exports[`t-set t-set outside modified in t-foreach increment-before operator 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><p>EndLoop: <block-text-0/></p></div>\`);
+  let block3 = createBlock(\`<div>
-  let block3 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
+ 
+ <block-child-0/>
+ <p>EndLoop: <block-text-0/></p>
+ </div>\`);
+  let block7 = createBlock(\`<p>InLoop: <block-text-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     setContextValue(ctx, \\"iter\\", 0);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);;
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(['a','b']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
+    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`val\`] = v_block2[i1];
+      ctx[\`val\`] = v_block4[i1];
       const key1 = ctx['val'];
+      const b6 = text(\`
+ \`);
       let txt1 = ctx['iter'];
-      c_block2[i1] = withKey(block3([txt1]), key1);
+      const b7 = block7([txt1]);
+      const b8 = text(\`
+ \`);
       setContextValue(ctx, \\"iter\\", ++ctx['iter']);
+      const b9 = text(\`
+ \`);
+      c_block4[i1] = withKey(multi([b6, b7, b8, b9]), key1);
     }
     ctx = ctx.__proto__;
-    const b2 = list(c_block2);
+    const b4 = list(c_block4);
     let txt2 = ctx['iter'];
-    return block1([txt2], [b2]);
+    const b3 = block3([txt2], [b4]);
+    const b10 = text(\`
+ \`);
+    return multi([b2, b3, b10]);
   }
 }"
 `;
 
 exports[`t-set t-set should reuse variable if possible 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
-  let block3 = createBlock(\`<div><span>v<block-text-0/></span></div>\`);
+ 
+ <block-child-0/>
+ </div>\`);
+  let block5 = createBlock(\`<div>
+ <span>v<block-text-0/></span>
+ 
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     setContextValue(ctx, \\"v\\", 1);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['list']);;
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['list']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
+    for (let i1 = 0; i1 < l_block4; i1++) {
-      ctx[\`elem\`] = v_block2[i1];
+      ctx[\`elem\`] = v_block4[i1];
       ctx[\`elem_index\`] = i1;
       const key1 = ctx['elem_index'];
       let txt1 = ctx['v'];
       setContextValue(ctx, \\"v\\", ctx['elem']);
-      c_block2[i1] = withKey(block3([txt1]), key1);
+      c_block4[i1] = withKey(block5([txt1]), key1);
     }
-    const b2 = list(c_block2);
+    ctx = ctx.__proto__;
-    return block1([], [b2]);
+    const b4 = list(c_block4);
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-set t-set with content and sub t-esc 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <block-text-0/>
+ </div>\`);
   
   function value1(ctx, node, key = \\"\\") {
-    const b3 = text(ctx['beep']);
+    const b5 = text(ctx['beep']);
-    const b4 = text(\` boop\`);
+    const b6 = text(\` boop\`);
-    return multi([b3, b4]);
+    return multi([b5, b6]);
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`setvar\`] = new LazyValue(value1, ctx, node);
+    const b2 = text(\`
+ \`);
+    ctx[\`setvar\`] = new LazyValue(value1, ctx, this, node);
     let txt1 = ctx['setvar'];
-    return block1([txt1]);
+    const b3 = block3([txt1]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-set t-set with t-value (falsy) and body 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, LazyValue, safeOutput } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
-  let block2 = createBlock(\`<span><block-text-0/></span>\`);
+ 
+ 
+ 
+ 
+ 
+ <block-child-0/>
+ </div>\`);
+  let block6 = createBlock(\`<span><block-text-0/></span>\`);
   
   function value1(ctx, node, key = \\"\\") {
+    const b5 = text(\`
+ \`);
     let txt1 = ctx['v1'];
-    return block2([txt1]);
+    const b6 = block6([txt1]);
+    const b7 = text(\`
+ \`);
+    return multi([b5, b6, b7]);
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     setContextValue(ctx, \\"v3\\", false);
     setContextValue(ctx, \\"v1\\", 'before');
-    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, node));
+    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node));
     setContextValue(ctx, \\"v1\\", 'after');
     setContextValue(ctx, \\"v3\\", true);
-    const b3 = safeOutput(ctx['v2']);
+    const b8 = safeOutput(ctx['v2']);
-    return block1([], [b3]);
+    const b3 = block3([], [b8]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-set t-set with t-value (truthy) and body 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, LazyValue, safeOutput } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<div>
-  let block2 = createBlock(\`<span><block-text-0/></span>\`);
+ 
+ 
+ 
+ 
+ 
+ <block-child-0/>
+ </div>\`);
+  let block6 = createBlock(\`<span><block-text-0/></span>\`);
   
   function value1(ctx, node, key = \\"\\") {
+    const b5 = text(\`
+ \`);
     let txt1 = ctx['v1'];
-    return block2([txt1]);
+    const b6 = block6([txt1]);
+    const b7 = text(\`
+ \`);
+    return multi([b5, b6, b7]);
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     setContextValue(ctx, \\"v3\\", 'Truthy');
     setContextValue(ctx, \\"v1\\", 'before');
-    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, node));
+    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node));
     setContextValue(ctx, \\"v1\\", 'after');
     setContextValue(ctx, \\"v3\\", false);
-    const b3 = safeOutput(ctx['v2']);
+    const b8 = safeOutput(ctx['v2']);
-    return block1([], [b3]);
+    const b3 = block3([], [b8]);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`t-set t-set, multiple t-ifs, and a specific configuration 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  
+  let block3 = createBlock(\`<p>
+ <div>
+ 
+ <span>First div</span>
+ </div>
+ <div>
+ <block-child-0/>
+ </div>
+ </p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
+    let b4;
+    if (ctx['flag']) {
+      setContextValue(ctx, \\"bouh\\", 2);
+    }
+    if (!ctx['flag']) {
+      b4 = text(\`Second\`);
+    }
+    const b3 = block3([], [b4]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-set t-set, t-if, and mix of expression/body lookup, 1 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-text-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <block-text-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     if (ctx['flag']) {
       setContextValue(ctx, \\"ourvar\\", \`1\`);
     } else {
       setContextValue(ctx, \\"ourvar\\", 0);
     }
     let txt1 = ctx['ourvar'];
-    return block1([txt1]);
+    const b3 = block3([txt1]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-set t-set, t-if, and mix of expression/body lookup, 2 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-text-0/></div>\`);
+  let block3 = createBlock(\`<div>
+ 
+ <block-text-0/>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    const b2 = text(\`
+ \`);
     if (ctx['flag']) {
       setContextValue(ctx, \\"ourvar\\", 1);
     } else {
       setContextValue(ctx, \\"ourvar\\", \`0\`);
     }
     let txt1 = ctx['ourvar'];
-    return block1([txt1]);
+    const b3 = block3([txt1]);
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`t-set t-set, t-if, and mix of expression/body lookup, 3 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    let b2;
+    let b2,b3,b4;
+    b2 = text(\`
+ \`);
     if (ctx['flag']) {
       setContextValue(ctx, \\"ourvar\\", 1);
     } else {
       setContextValue(ctx, \\"ourvar\\", \`0\`);
     }
-    b2 = text(ctx['ourvar']);
+    b3 = text(\`
-    return multi([b2]);
+ \`);
+    b4 = text(ctx['ourvar']);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
 
 exports[`t-set value priority (with non text body 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -615,7 +824,7 @@ exports[`t-set value priority (with non text body 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`value\`] = withDefault(1, new LazyValue(value1, ctx, node));
+    ctx[\`value\`] = withDefault(1, new LazyValue(value1, ctx, this, node));
     let txt1 = ctx['value'];
     return block1([txt1]);
   }
@@ -623,9 +832,9 @@ exports[`t-set value priority (with non text body 1`] = `
 `;
 
 exports[`t-set value priority 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`qweb t-tag can fallback if falsy tag 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(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'}/>\`);
   
@@ -15,9 +15,9 @@ exports[`qweb t-tag can fallback if falsy tag 1`] = `
 `;
 
 exports[`qweb t-tag can update 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(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'}/>\`);
   
@@ -29,9 +29,9 @@ exports[`qweb t-tag can update 1`] = `
 `;
 
 exports[`qweb t-tag simple usecases 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(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'}/>\`);
   
@@ -43,9 +43,9 @@ exports[`qweb t-tag simple usecases 1`] = `
 `;
 
 exports[`qweb t-tag simple usecases 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(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'}>\`);
   
@@ -57,9 +57,9 @@ exports[`qweb t-tag simple usecases 2`] = `
 `;
 
 exports[`qweb t-tag with multiple attributes 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(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'}>\`);
   
@@ -71,23 +71,30 @@ exports[`qweb t-tag with multiple attributes 1`] = `
 `;
 
 exports[`qweb t-tag with multiple child nodes 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = tag => createBlock(\`<\${tag || 't'}> pear <span>apple</span> strawberry </\${tag || 't'}>\`);
+  let block3 = tag => createBlock(\`<\${tag || 't'}>
+ pear
+ <span>apple</span>
+ strawberry
+ </\${tag || 't'}>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`
+ \`);
     const tag1 = ctx['tag'];
-    return toggler(tag1, block1(tag1)());
+    const b3 = toggler(tag1, block3(tag1)());
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`qweb t-tag with multiple t-tag in same template 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(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'}>\`);
@@ -102,9 +109,9 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = tag => createBlock(\`<\${tag || 't'}>bar</\${tag || 't'}>\`);
   let block3 = tag => createBlock(\`<\${tag || 't'}>baz</\${tag || 't'}>\`);

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`loading templates addTemplates does not modify its xml document in place 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -15,9 +15,9 @@ exports[`loading templates addTemplates does not modify its xml document in plac
 `;
 
 exports[`loading templates can initialize qweb with a string 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -28,9 +28,9 @@ exports[`loading templates can initialize qweb with a string 1`] = `
 `;
 
 exports[`loading templates can initialize qweb with an XMLDocument 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -41,11 +41,10 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { getTemplate } = helpers;
+  const callTemplate_1 = app.getTemplate(\`items\`);
-  const callTemplate_1 = getTemplate(\`items\`);
   
   let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
   
@@ -57,9 +56,9 @@ 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(bdom, helpers
+"function 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>\`);
@@ -73,11 +72,10 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { getTemplate } = helpers;
+  const callTemplate_1 = app.getTemplate(\`items\`);
-  const callTemplate_1 = getTemplate(\`items\`);
   
   let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
   
@@ -89,9 +87,9 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = createBlock(\`<li>ok</li>\`);
   let block3 = createBlock(\`<li>foo</li>\`);

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

@@ -1,22 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`translation support can set and remove translatable attributes 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div tomato=\\"word\\" potato=\\"mot\\" title=\\"mot\\" label=\\"word\\">text</div>\`);
+  let block3 = createBlock(\`<div tomato=\\"word\\" potato=\\"mot\\" title=\\"mot\\" label=\\"word\\">text</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    const b2 = text(\`
+ \`);
+    const b3 = block3();
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
 
 exports[`translation support can translate node content 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -27,40 +32,64 @@ exports[`translation support can translate node content 1`] = `
 `;
 
 exports[`translation support does not translate node content if disabled 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><span>mot</span><span>word</span></div>\`);
+  let block3 = createBlock(\`<div>
+ <span>mot</span>
+ <span>word</span>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    const b2 = text(\`
+ \`);
+    const b3 = block3();
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
 
 exports[`translation support some attributes are translated 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><p label=\\"mot\\">mot</p><p title=\\"mot\\">mot</p><p placeholder=\\"mot\\">mot</p><p alt=\\"mot\\">mot</p><p something=\\"word\\">mot</p></div>\`);
+  let block3 = createBlock(\`<div>
+ <p label=\\"mot\\">mot</p>
+ <p title=\\"mot\\">mot</p>
+ <p placeholder=\\"mot\\">mot</p>
+ <p alt=\\"mot\\">mot</p>
+ <p something=\\"word\\">mot</p>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    const b2 = text(\`
+ \`);
+    const b3 = block3();
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;
 
 exports[`translation support translation is done on the trimmed text, with extra spaces readded after 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div> mot </div>\`);
+  let block3 = createBlock(\`<div> mot </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    const b2 = text(\`
+ \`);
+    const b3 = block3();
+    const b4 = text(\`
+ \`);
+    return multi([b2, b3, b4]);
   }
 }"
 `;

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`white space handling consecutives whitespaces are condensed into a single space 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -14,9 +14,9 @@ exports[`white space handling consecutives whitespaces are condensed into a sing
 `;
 
 exports[`white space handling nothing is done in pre tags 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -27,9 +27,9 @@ exports[`white space handling nothing is done in pre tags 1`] = `
 `;
 
 exports[`white space handling nothing is done in pre tags 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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
@@ -42,9 +42,9 @@ exports[`white space handling nothing is done in pre tags 2`] = `
 `;
 
 exports[`white space handling nothing is done in pre tags 3`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>
           
@@ -57,11 +57,12 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><pre>SomeText</pre></div>\`);
+  let block1 = createBlock(\`<div><pre>SomeText</pre>
+</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     return block1();
@@ -70,9 +71,9 @@ 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(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   
@@ -83,11 +84,13 @@ 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(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block1 = createBlock(\`<div><span>abc</span></div>\`);
+  let block1 = createBlock(\`<div>
+ <span>abc</span>
+ </div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     return block1();

tests/compiler/attributes.test.ts

@@ -1,4 +1,4 @@
-import { mount, patch } from "../../src/blockdom";
+import { mount, patch } from "../../src/runtime/blockdom";
 import { makeTestFixture, renderToBdom, renderToString, snapshotEverything } from "../helpers";
 
 snapshotEverything();
@@ -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 });
@@ -131,6 +161,12 @@ describe("attributes", () => {
     expect(result).toBe(`<div foo="bar"></div>`);
   });
 
+  test("string interpolation, alternate syntax", () => {
+    const template = `<div t-attf-foo="b#{value}r"/>`;
+    const result = renderToString(template, { value: "a" });
+    expect(result).toBe(`<div foo="bar"></div>`);
+  });
+
   test("t-attf-class", () => {
     const template = `<div t-attf-class="hello"/>`;
     const result = renderToString(template);
@@ -242,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", () => {
@@ -251,6 +295,10 @@ describe("attributes", () => {
     expect(renderToString(`<div t-att-class="{['a b c']: value}" />`, { value: true })).toBe(
       '<div class="a b c"></div>'
     );
+    // multiple spaces between classes
+    expect(renderToString(`<div t-att-class="{'a  b  c': value}" />`, { value: true })).toBe(
+      '<div class="a b c"></div>'
+    );
   });
 
   test("t-att-class with multiple classes, some of which are duplicate", () => {

tests/compiler/error_handling.test.ts

@@ -12,15 +12,6 @@ describe("error handling", () => {
     expect(() => context.renderToString("invalidname")).toThrow("Missing template");
   });
 
-  test("cannot add twice the same template", () => {
-    const context = new TestContext();
-    context.addTemplate("test", `<t></t>`);
-    expect(() => context.addTemplate("test", "<div/>", { allowDuplicate: true })).not.toThrow(
-      "already defined"
-    );
-    expect(() => context.addTemplate("test", "<div/>")).toThrow("already defined");
-  });
-
   test("addTemplates throw if parser error", () => {
     const context = new TestContext();
     expect(() => {

tests/compiler/event_handling.test.ts

@@ -1,8 +1,8 @@
-import { TemplateSet } from "../../src/app/template_set";
+import { TemplateSet } from "../../src/runtime/template_set";
-import { mount } from "../../src/blockdom";
+import { mount } from "../../src/runtime/blockdom";
 import { makeTestFixture, renderToBdom, renderToString, snapshotEverything } from "../helpers";
-import { markup } from "../../src/utils";
+import { markup } from "../../src/runtime/utils";
-import { STATUS } from "../../src/component/status";
+import { STATUS } from "../../src/runtime/status";
 
 snapshotEverything();
 // -----------------------------------------------------------------------------

tests/compiler/inline_expressions.test.ts

@@ -135,7 +135,7 @@ describe("expression evaluation", () => {
     expect(compileExpr("color === 'black'")).toBe("ctx['color']==='black'");
     expect(compileExpr("'li_'+item")).toBe("'li_'+ctx['item']");
     expect(compileExpr("state.val > 1")).toBe("ctx['state'].val>1");
-    expect(compileExpr("a in b")).toBe("ctx['a']in ctx['b']");
+    expect(compileExpr("a in b")).toBe("ctx['a'] in ctx['b']");
   });
 
   test("boolean operations", () => {
@@ -215,4 +215,17 @@ describe("expression evaluation", () => {
     expect(compileExpr("[a, {b, c},d]")).toBe("[ctx['a'],{b:ctx['b'],c:ctx['c']},ctx['d']]");
     expect(compileExpr("{a:[b, {c, d: e}]}")).toBe("{a:[ctx['b'],{c:ctx['c'],d:ctx['e']}]}");
   });
+
+  test("preserving spaces where needed for text operators", () => {
+    expect(compileExpr("new Date()")).toBe("new Date()");
+    expect(compileExpr("a.c in b")).toBe("ctx['a'].c in ctx['b']");
+    expect(compileExpr("typeof val")).toBe("typeof ctx['val']");
+  });
+
+  test("binary operators", () => {
+    expect(compileExpr("1 | 1")).toBe("1|1");
+    expect(compileExpr("1 & 1")).toBe("1&1");
+    expect(compileExpr("1 ^ 1")).toBe("1^1");
+    expect(compileExpr("~1")).toBe("~1");
+  });
 });

tests/compiler/parser.test.ts

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

tests/compiler/svg.test.ts

@@ -1,5 +1,5 @@
 import { renderToString, renderToBdom, snapshotEverything, makeTestFixture } from "../helpers";
-import { mount } from "../../src/blockdom";
+import { mount } from "../../src/runtime/blockdom";
 import { mount as mountComponent, Component, xml } from "../../src/index";
 
 // NB: check the snapshots to see where the SVG namespaces are added

tests/compiler/t_call.test.ts

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

tests/compiler/t_esc.test.ts

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

tests/compiler/t_foreach.test.ts

@@ -5,7 +5,7 @@ import {
   TestContext,
   makeTestFixture,
 } from "../helpers";
-import { mount, patch } from "../../src/blockdom";
+import { mount, patch } from "../../src/runtime/blockdom";
 
 snapshotEverything();
 

tests/compiler/t_if.test.ts

@@ -1,5 +1,5 @@
 // import { mountBlock } from "../../src/blockdom/block";
-import { mount } from "../../src/blockdom";
+import { mount } from "../../src/runtime/blockdom";
 import { makeTestFixture, renderToBdom, renderToString, snapshotEverything } from "../helpers";
 
 snapshotEverything();

tests/compiler/t_key.test.ts

@@ -1,5 +1,5 @@
 import { renderToString, renderToBdom, snapshotEverything, makeTestFixture } from "../helpers";
-import { mount, patch } from "../../src/blockdom/index";
+import { mount, patch } from "../../src/runtime/blockdom/index";
 
 snapshotEverything();
 

tests/compiler/t_out.test.ts

@@ -5,9 +5,9 @@ import {
   TestContext,
   makeTestFixture,
 } from "../helpers";
-import { mount, patch } from "../../src/blockdom";
+import { mount, patch } from "../../src/runtime/blockdom";
-import { createBlock } from "../../src/blockdom/index";
+import { createBlock } from "../../src/runtime/blockdom/index";
-import { markup } from "../../src/utils";
+import { markup } from "../../src/runtime/utils";
 
 snapshotEverything();
 
@@ -27,6 +27,11 @@ describe("t-out", () => {
     expect(renderToString(template)).toBe("<span>ok</span>");
   });
 
+  test("number literal", () => {
+    const template = `<span><t t-out="1"/></span>`;
+    expect(renderToString(template)).toBe("<span>1</span>");
+  });
+
   test("literal, no outside html element", () => {
     const template = `<t t-out="'ok'"/>`;
     expect(renderToString(template)).toBe("ok");
@@ -42,6 +47,21 @@ describe("t-out", () => {
     expect(renderToString(template, { var: new String("ok") })).toBe("<span>ok</span>");
   });
 
+  test("t-out with the 0 number", () => {
+    const template = `<t t-out="var"/>`;
+    expect(renderToString(template, { var: 0 })).toBe("0");
+  });
+
+  test("t-out with the 0 number, in a p", () => {
+    const template = `<p><t t-out="var"/></p>`;
+    expect(renderToString(template, { var: 0 })).toBe("<p>0</p>");
+  });
+
+  test("top level t-out with undefined", () => {
+    const template = `<t t-out="var"/>`;
+    expect(renderToString(template, { var: undefined })).toBe("");
+  });
+
   test("with an extended String class", () => {
     class LoveString extends String {
       valueOf(): string {

tests/compiler/t_ref.test.ts

@@ -1,5 +1,5 @@
-import { TemplateSet } from "../../src/app/template_set";
+import { TemplateSet } from "../../src/runtime/template_set";
-import { mount } from "../../src/blockdom";
+import { mount } from "../../src/runtime/blockdom";
 import { renderToBdom, snapshotEverything } from "../helpers";
 
 snapshotEverything();
@@ -27,6 +27,15 @@ describe("t-ref", () => {
     expect(refs.myspan3.tagName).toBe("SPAN");
   });
 
+  test("can get a dynamic ref on a node, alternate syntax", () => {
+    const template = `<div><span t-ref="myspan#{id}"/></div>`;
+    const refs: any = {};
+    const bdom = renderToBdom(template, { id: 3, __owl__: { refs } });
+    expect(refs).toEqual({});
+    mount(bdom, document.createElement("div"));
+    expect(refs.myspan3.tagName).toBe("SPAN");
+  });
+
   test("refs in a loop", () => {
     const template = `<div>
         <t t-foreach="items" t-as="item" t-key="item">

tests/compiler/t_set.test.ts

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

tests/compiler/t_tag.test.ts

@@ -1,4 +1,4 @@
-import { mount, patch } from "../../src/blockdom";
+import { mount, patch } from "../../src/runtime/blockdom";
 import { makeTestFixture, renderToBdom, renderToString, snapshotEverything } from "../helpers";
 
 snapshotEverything();

tests/compiler/validation.test.ts

@@ -1,4 +1,4 @@
-import { TemplateSet } from "../../src/app/template_set";
+import { TemplateSet } from "../../src/runtime/template_set";
 import { renderToString, snapshotTemplate, TestContext } from "../helpers";
 
 // -----------------------------------------------------------------------------
@@ -11,11 +11,12 @@ describe("basic validation", () => {
     expect(() => context.getTemplate("invalidname")).toThrow("Missing template");
   });
 
-  test("cannot add twice the same template", () => {
+  test("cannot add a different template with the same name", () => {
     const context = new TemplateSet();
-    expect(() => context.addTemplate("test", "<div/>", { allowDuplicate: true })).not.toThrow(
+    context.addTemplate("test", `<t/>`);
-      "already defined"
+    // Same template with the same name is fine
-    );
+    expect(() => context.addTemplate("test", "<t/>")).not.toThrow();
+    // Different template with the same name crashes
     expect(() => context.addTemplate("test", "<div/>")).toThrow("already defined");
   });