wip

Before this commit, the generated code for the component directive was
using the current context as the place to look for static informations
(such as the sub components). However, it is not entirely correct, since
the current context may be different than the current component (which
is easily accessed by using the this variable).

Also, while doing this, we fix some issues in the t-set directive, which
as calling lazy values with the wrong this.

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/learning/tutorial_todoapp.md

@@ -240,7 +240,7 @@ class Task extends Component {
   static template = xml /* xml */`
     <div class="task" t-att-class="props.task.isCompleted ? 'done' : ''">
       <input type="checkbox" t-att-checked="props.task.isCompleted"/>
-      <span><t t-esc="props.task.title"/></span>
+      <span><t t-esc="props.task.text"/></span>
     </div>`;
   static props = ["task"];
 }
@@ -743,7 +743,7 @@ the user experience.
 ```xml
 <input type="checkbox" t-att-checked="props.task.isCompleted"
     t-att-id="props.task.id"
-    t-on-click="dispatch('toggleTask', props.task.id)"/>
+    t-on-click="() => store.toggleTask(props.task)"/>
 <label t-att-for="props.task.id"><t t-esc="props.task.text"/></label>
 ```
 

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/component.md

@@ -76,7 +76,8 @@ The `Component` class has a very small API.
 
   By default, the render initiated by this method will stop at each child
   component if their props are (shallow) equal. To force a render to update
-  all child components, one can use the optional `deep` argument.
+  all child components, one can use the optional `deep` argument. Note that the
+  value of the `deep` argument needs to be a boolean, not a truthy value.
 
 ## Static Properties
 

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
-which part of these props are consumed by each component, and is therefore able
-to only rerender the impacted components.
+level: reactive objects received as props are automatically subscribed to by the
+component, so Owl can track which part of these props are consumed by each
+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.3",
+  "version": "2.0.0-beta-10",
   "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";
-const extend = true;
+let input, output;
 
-/**
- * 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,
-    extend: extend,
+    name: "owl",
+    extend: true,
     outro: outro,
     freeze: false,
     plugins: minified ? [terser()] : [],
@@ -46,26 +68,19 @@ function getConfigForFormat(format, generatedFileName, minified = false) {
   };
 }
 
-export default {
-  input: "src/index.ts",
-  output: [
-
-    /**
-     * Read about module formats:
-     *  https://auth0.com/blog/javascript-module-systems-showdown/
-     *  https://medium.com/@kelin2025/so-you-wanna-use-es6-modules-714f48b3a953
-     */
-
-    getConfigForFormat('esm', pkg.module),
-    getConfigForFormat('esm', pkg.module, true),
-    getConfigForFormat('cjs', pkg.main),
-    getConfigForFormat('cjs', pkg.main, true),
-    getConfigForFormat('iife', pkg.browser),
-    getConfigForFormat('iife', pkg.browser, true),
-  ],
-  plugins: [
-    typescript({
-      useTsconfigDeclarationDir: true
-    }),
-  ]
-};
+export default [
+  {
+    input,
+    output,
+    plugins: [
+      typescript({
+        useTsconfigDeclarationDir: true
+      }),
+    ]
+  },
+  {
+    input: "dist/types/index.d.ts",
+    output: [{ file: "dist/types/owl.d.ts", format: "es" }],
+    plugins: [dts()],
+  },
+];

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,6 +140,7 @@ interface Context {
   tKeyExpr: string | null;
   nameSpace?: string;
   tModelSelectedExpr?: string;
+  ctxVar?: string;
 }
 
 function createContext(parentCtx: Context, params?: Partial<Context>) {
@@ -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 { text, createBlock, list, multi, html, toggler, component, comment } = bdom;`,
-    ];
+    let mainCode = [`  let { text, createBlock, list, multi, html, toggler, comment } = bdom;`];
     if (this.helpers.size) {
       mainCode.push(`let { ${[...this.helpers].join(", ")} } = helpers;`);
     }
@@ -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,11 +334,6 @@ export class CodeGenerator {
     this.addLine(`const ${varName} = ${expr};`);
   }
 
-  generateId(prefix: string = ""): string {
-    this.ids[prefix] = (this.ids[prefix] || 0) + 1;
-    return prefix + this.ids[prefix];
-  }
-
   insertAnchor(block: BlockDescription) {
     const tag = `block-child-${block.children.length}`;
     const anchor = xmlDoc.createElement(tag);
@@ -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(
-          INTERP_REGEXP,
-          (expr) => "${" + this.captureExpression(expr.slice(2, -2), true) + "}"
-        );
-        const idx = block!.insertData(`(el) => refs[\`${str}\`] = el`, "ref");
+        const str = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, 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 {
@@ -869,7 +869,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}) {`);
@@ -904,7 +904,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,
@@ -968,16 +968,21 @@ export class CodeGenerator {
 
   compileTCall(ast: ASTTCall, ctx: Context) {
     let { block, forceNewBlock } = ctx;
+    let ctxVar = ctx.ctxVar || "ctx";
+    if (ast.context) {
+      ctxVar = generateId("ctx");
+      this.addLine(`let ${ctxVar} = ${compileExpr(ast.context)};`);
+    }
     if (ast.body) {
-      this.addLine(`ctx = Object.create(ctx);`);
-      this.addLine(`ctx[isBoundary] = 1;`);
+      this.addLine(`${ctxVar} = Object.create(${ctxVar});`);
+      this.addLine(`${ctxVar}[isBoundary] = 1;`);
       this.helpers.add("isBoundary");
       const nextId = BlockDescription.nextBlockId;
-      const subCtx: Context = createContext(ctx, { preventRoot: true });
+      const subCtx: Context = 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 +994,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}, ctx, node, ${key})`, block!, {
+      this.insertBlock(`call(this, ${templateVar}, ${ctxVar}, node, ${key})`, block!, {
         ...ctx,
         forceNewBlock: !block,
       });
     } else {
-      const id = this.generateId(`callTemplate_`);
-      this.helpers.add("getTemplate");
-      this.staticDefs.push({ id, expr: `getTemplate(${subTemplate})` });
+      const id = generateId(`callTemplate_`);
+      this.staticDefs.push({ id, expr: `app.getTemplate(${subTemplate})` });
       block = this.createBlock(block, "multi", ctx);
-      this.insertBlock(`${id}.call(this, ctx, node, ${key})`, block!, {
+      this.insertBlock(`${id}.call(this, ${ctxVar}, node, ${key})`, block!, {
         ...ctx,
         forceNewBlock: !block,
       });
     }
     if (ast.body && !ctx.isLast) {
-      this.addLine(`ctx = ctx.__proto__;`);
+      this.addLine(`${ctxVar} = ${ctxVar}.__proto__;`);
     }
   }
 
@@ -1031,7 +1037,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 +1052,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,44 +1091,49 @@ export class CodeGenerator {
     return `${name}: ${value || undefined}`;
   }
 
-  formatPropObject(obj: { [prop: string]: any }): string {
-    const params = [];
-    for (const [n, v] of Object.entries(obj)) {
-      params.push(this.formatProp(n, v));
+  formatPropObject(obj: { [prop: string]: any }): string[] {
+    return Object.entries(obj).map(([k, v]) => this.formatProp(k, 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 propExpr = this.formatPropObject(ast.props || {});
-    if (propExpr) {
-      props.push(propExpr);
-    }
+    const props: string[] = ast.props ? this.formatPropObject(ast.props) : [];
 
     // 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)`);
       }
       let slotStr: string[] = [];
       for (let slotName in ast.slots) {
         const slotAst = ast.slots[slotName];
-        const name = this.compileInNewTarget("slot", slotAst.content, ctx, slotAst.on);
-        const params = [`__render: ${name}, __ctx: ${ctxStr}`];
+        const params = [];
+        if (slotAst.content) {
+          const name = this.compileInNewTarget("slot", slotAst.content, ctx, slotAst.on);
+          params.push(`__render: ${name}, __ctx: ${ctxStr}`);
+        }
         const scope = ast.slots[slotName].scope;
         if (scope) {
           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}`);
@@ -1135,18 +1146,11 @@ export class CodeGenerator {
       props.push(`slots: markRaw(${slotDef})`);
     }
 
-    const propStr = `{${props.join(",")}}`;
-
-    let propString = propStr;
-    if (ast.dynamicProps) {
-      propString = `Object.assign({}, ${compileExpr(ast.dynamicProps)}${
-        props.length ? ", " + propStr : ""
-      })`;
-    }
+    let propString = this.getPropString(props, ast.dynamicProps);
 
     let propVar: string;
     if ((slotDef && (ast.dynamicProps || hasSlotsProp)) || this.dev) {
-      propVar = this.generateId("props");
+      propVar = generateId("props");
       this.define(propVar!, propString);
       propString = propVar!;
     }
@@ -1160,7 +1164,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}\``;
@@ -1179,8 +1183,17 @@ export class CodeGenerator {
     if (ctx.tKeyExpr) {
       keyArg = `${ctx.tKeyExpr} + ${keyArg}`;
     }
-    const blockArgs = `${expr}, ${propString}, ${keyArg}, node, ctx`;
-    let blockExpr = `component(${blockArgs})`;
+    let id = generateId("comp");
+    this.staticDefs.push({
+      id,
+      expr: `app.createComponent(${
+        ast.isDynamic ? null : expr
+      }, ${!ast.isDynamic}, ${!!ast.slots}, ${!!ast.dynamicProps}, ${
+        !ast.props && !ast.dynamicProps
+      })`,
+    });
+
+    let blockExpr = `${id}(${propString}, ${keyArg}, node, this, ${ast.isDynamic ? expr : null})`;
     if (ast.isDynamic) {
       blockExpr = `toggler(${expr}, ${blockExpr})`;
     }
@@ -1196,11 +1209,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]);
@@ -1222,16 +1235,20 @@ export class CodeGenerator {
     } else {
       slotName = "'" + ast.name + "'";
     }
-
-    const scope = ast.attrs ? `{${this.formatPropObject(ast.attrs)}}` : null;
+    const dynProps = ast.attrs ? ast.attrs["t-props"] : 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})`;
+        blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}, ${dynamic}, ${scope}))`;
       } else {
         blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope})`;
       }
@@ -1254,18 +1271,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
-const OPERATORS = "...,.,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=,;,in ".split(",");
+// expression has a space after typeof. Currently we don't support delete and void
+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;
-const INTERP_GROUP_REGEXP = /\{\{.*?\}\}/g;
+export const INTERP_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,10 +115,11 @@ export interface ASTTCall {
   type: ASTType.TCall;
   name: string;
   body: AST[] | null;
+  context: string | null;
 }
 
 interface SlotDefinition {
-  content: AST;
+  content: AST | null;
   scope: string | null;
   on: EventHandlers | null;
   attrs: Attrs | null;
@@ -557,11 +558,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 +582,7 @@ function parseTCall(node: Element, ctx: ParsingContext): AST | null {
     type: ASTType.TCall,
     name: subTemplate,
     body: body.length ? body : null,
+    context,
   };
 }
 
@@ -749,26 +753,24 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
       slotNode.removeAttribute("t-set-slot");
       slotNode.remove();
       const slotAst = parseNode(slotNode, ctx);
-      if (slotAst) {
-        let on: SlotDefinition["on"] = null;
-        let attrs: Attrs | null = null;
-        let scope: string | null = null;
-        for (let attributeName of slotNode.getAttributeNames()) {
-          const value = slotNode.getAttribute(attributeName)!;
-          if (attributeName === "t-slot-scope") {
-            scope = value;
-            continue;
-          } else if (attributeName.startsWith("t-on-")) {
-            on = on || {};
-            on[attributeName.slice(5)] = value;
-          } else {
-            attrs = attrs || {};
-            attrs[attributeName] = value;
-          }
+      let on: SlotDefinition["on"] = null;
+      let attrs: Attrs | null = null;
+      let scope: string | null = null;
+      for (let attributeName of slotNode.getAttributeNames()) {
+        const value = slotNode.getAttribute(attributeName)!;
+        if (attributeName === "t-slot-scope") {
+          scope = value;
+          continue;
+        } else if (attributeName.startsWith("t-on-")) {
+          on = on || {};
+          on[attributeName.slice(5)] = value;
+        } else {
+          attrs = attrs || {};
+          attrs[attributeName] = value;
         }
-        slots = slots || {};
-        slots[name] = { content: slotAst, on, attrs, scope };
       }
+      slots = slots || {};
+      slots[name] = { content: slotAst, on, attrs, scope };
     }
 
     // default slot

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/component/scheduler.ts

@@ -1,77 +0,0 @@
-import { fibersInError } from "./error_handling";
-import { Fiber, RootFiber } from "./fibers";
-import { STATUS } from "./status";
-
-// -----------------------------------------------------------------------------
-//  Scheduler
-// -----------------------------------------------------------------------------
-
-export class Scheduler {
-  // capture the value of requestAnimationFrame as soon as possible, to avoid
-  // interactions with other code, such as test frameworks that override them
-  static requestAnimationFrame = window.requestAnimationFrame.bind(window);
-  tasks: Set<RootFiber> = new Set();
-  isRunning: boolean = false;
-  requestAnimationFrame: Window["requestAnimationFrame"];
-
-  constructor() {
-    this.requestAnimationFrame = Scheduler.requestAnimationFrame;
-  }
-
-  start() {
-    this.isRunning = true;
-    this.scheduleTasks();
-  }
-
-  stop() {
-    this.isRunning = false;
-  }
-
-  addFiber(fiber: Fiber) {
-    this.tasks.add(fiber.root!);
-    if (!this.isRunning) {
-      this.start();
-    }
-  }
-
-  /**
-   * Process all current tasks. This only applies to the fibers that are ready.
-   * Other tasks are left unchanged.
-   */
-  flush() {
-    this.tasks.forEach((fiber) => {
-      if (fiber.root !== fiber) {
-        this.tasks.delete(fiber);
-        return;
-      }
-      const hasError = fibersInError.has(fiber);
-      if (hasError && fiber.counter !== 0) {
-        this.tasks.delete(fiber);
-        return;
-      }
-      if (fiber.node.status === STATUS.DESTROYED) {
-        this.tasks.delete(fiber);
-        return;
-      }
-
-      if (fiber.counter === 0) {
-        if (!hasError) {
-          fiber.complete();
-        }
-        this.tasks.delete(fiber);
-      }
-    });
-    if (this.tasks.size === 0) {
-      this.stop();
-    }
-  }
-
-  scheduleTasks() {
-    this.requestAnimationFrame(() => {
-      this.flush();
-      if (this.isRunning) {
-        this.scheduleTasks();
-      }
-    });
-  }
-}

src/index.ts

@@ -1,56 +1,16 @@
-import {
-  config,
-  createBlock,
-  html,
-  list,
-  mount as blockMount,
-  multi,
-  patch,
-  remove,
-  text,
-  toggler,
-  comment,
-} from "./blockdom";
-import { mainEventHandler } from "./component/handler";
-export type { Reactive } from "./reactivity";
+import { TemplateSet } from "./runtime/template_set";
+import { compile } from "./compiler";
 
-config.shouldNormalizeDom = false;
-config.mainEventHandler = mainEventHandler;
+export * from "./runtime";
 
-export const blockDom = {
-  config,
-  // bdom entry points
-  mount: blockMount,
-  patch,
-  remove,
-  // bdom block types
-  list,
-  multi,
-  text,
-  toggler,
-  createBlock,
-  html,
-  comment,
+TemplateSet.prototype._compileTemplate = function _compileTemplate(
+  name: string,
+  template: string | Element
+) {
+  return compile(template, {
+    name,
+    dev: this.dev,
+    translateFn: this.translateFn,
+    translatableAttributes: this.translatableAttributes,
+  });
 };
-
-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 { ComponentNode } from "../component/component_node";
-import { MountOptions } from "../component/fibers";
-import { Scheduler } from "../component/scheduler";
+import { Component, ComponentConstructor, Props } from "./component";
+import { ComponentNode } from "./component_node";
+import { nodeErrorHandlers } from "./error_handling";
+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;
@@ -67,7 +74,7 @@ export class App<
   }
 
   makeNode(Component: ComponentConstructor, props: any): ComponentNode {
-    return new ComponentNode(Component, props, this);
+    return new ComponentNode(Component, props, this, null, null);
   }
 
   mountNode(node: ComponentNode, target: HTMLElement, options?: MountOptions) {
@@ -101,9 +108,67 @@ export class App<
 
   destroy() {
     if (this.root) {
+      this.scheduler.flush();
       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;
@@ -139,7 +143,8 @@ export function updateClass(this: HTMLElement, val: any, oldVal: any) {
 
 export function makePropSetter(name: string): Setter<HTMLElement> {
   return function setProp(this: HTMLElement, value: any) {
-    (this as any)[name] = value || "";
+    // support 0, fallback to empty string for other falsy values
+    (this as any)[name] = value === 0 ? 0 : 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[] = [];
-  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;
+  const n = Object.keys(eventsSpec).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 (
@@ -37,6 +39,6 @@ export class Component<Props = any, Env = any> {
   setup() {}
 
   render(deep: boolean = false) {
-    this.__owl__.render(deep);
+    this.__owl__.render(deep === true);
   }
 }

src/runtime/component_node.ts

@@ -1,26 +1,18 @@
-import type { App, Env } from "../app/app";
-import { BDom, VNode } from "../blockdom";
+import type { App, Env } from "./app";
+import { BDom, VNode } from "./blockdom";
+import { Component, ComponentConstructor, Props } from "./component";
+import { fibersInError, handleError } from "./error_handling";
+import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
 import {
   clearReactivesForCallback,
+  getSubscriptions,
+  NonReactive,
   Reactive,
   reactive,
   TARGET,
-  NonReactive,
-  getSubscriptions,
-} from "../reactivity";
-import { batched, Callback } from "../utils";
-import { Component, ComponentConstructor } from "./component";
-import { fibersInError, handleError } from "./error_handling";
-import {
-  Fiber,
-  makeChildFiber,
-  makeRootFiber,
-  MountFiber,
-  MountOptions,
-  RootFiber,
-} from "./fibers";
-import { applyDefaultProps } from "./props_validation";
+} from "./reactivity";
 import { STATUS } from "./status";
+import { Callback } from "./utils";
 
 let currentNode: ComponentNode | null = null;
 
@@ -35,11 +27,21 @@ 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)
 // -----------------------------------------------------------------------------
 
-const batchedRenderFunctions = new WeakMap<ComponentNode, Callback>();
+const renderFunctions = new WeakMap<ComponentNode, Callback>();
 /**
  * Creates a reactive object that will be observed by the current component.
  * Reading data from the returned object (eg during rendering) will cause the
@@ -52,90 +54,23 @@ const batchedRenderFunctions = new WeakMap<ComponentNode, Callback>();
  */
 export function useState<T extends object>(state: T): Reactive<T> | NonReactive<T> {
   const node = getCurrent();
-  let render = batchedRenderFunctions.get(node)!;
+  let render = renderFunctions.get(node)!;
   if (!render) {
-    render = batched(node.render.bind(node));
-    batchedRenderFunctions.set(node, render);
+    render = node.render.bind(node, false);
+    renderFunctions.set(node, render);
     // manual implementation of onWillDestroy to break cyclic dependency
     node.willDestroy.push(clearReactivesForCallback.bind(null, render));
   }
   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) {
-    if (node.status < STATUS.MOUNTED) {
-      node.destroy();
-      node = undefined;
-    } else if (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);
-    ctx.children[key] = node;
-
-    node.initiateRender(new Fiber(node, parentFiber));
-  }
-  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;
@@ -143,6 +78,8 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
   bdom: BDom | null = null;
   status: STATUS = STATUS.NEW;
   forceNextRender: boolean = false;
+  parentKey: string | null;
+  props: P;
 
   renderFn: Function;
   parent: ComponentNode | null;
@@ -159,16 +96,33 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
   patched: LifecycleHook[] = [];
   willDestroy: LifecycleHook[] = [];
 
-  constructor(C: ComponentConstructor<P, E>, props: P, app: App, parent?: ComponentNode) {
+  constructor(
+    C: ComponentConstructor<P, E>,
+    props: P,
+    app: App,
+    parent: ComponentNode | null,
+    parentKey: string | null
+  ) {
     currentNode = this;
     this.app = app;
-    this.parent = parent || null;
+    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);
-    this.component = new C(props, env, this) as any;
+    for (const key in props) {
+      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;
@@ -186,23 +140,33 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
       fiber.root!.mounted.push(fiber);
     }
     const component = this.component;
-    try {
-      await Promise.all(this.willStart.map((f) => f.call(component)));
-    } catch (e) {
-      handleError({ node: this, error: e });
-      return;
+    if (this.willStart.length) {
+      let willStartResults;
+      try {
+        willStartResults = this.willStart.map((f) => f.call(component));
+      } catch (e) {
+        handleError({ node: this, error: e });
+        return;
+      }
+      if (willStartResults.some((result) => result instanceof Promise)) {
+        try {
+          await Promise.all(willStartResults);
+        } catch (e) {
+          handleError({ node: this, error: e });
+          return;
+        }
+      }
     }
     if (this.status === STATUS.NEW && this.fiber === fiber) {
-      this._render(fiber);
+      fiber.render();
     }
   }
 
-  async render(deep: boolean = false) {
+  async render(deep: boolean) {
     let current = this.fiber;
-    if (current && current.root!.locked) {
-      await Promise.resolve();
-      // situation may have changed after the microtask tick
-      current = this.fiber;
+    if (current && (current.root!.locked || current as any).bdom === true) {
+      this.app.scheduler.requestAnimationFrame(() => this.render(deep));
+      return;
     }
     if (current) {
       if (!current.bdom && !fibersInError.has(current)) {
@@ -221,34 +185,28 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
     const fiber = makeRootFiber(this);
     fiber.deep = deep;
     this.fiber = fiber;
-    this.app.scheduler.addFiber(fiber);
-    await Promise.resolve();
-    if (this.status === STATUS.DESTROYED) {
-      return;
-    }
-    // We only want to actually render the component if the following two
-    // conditions are true:
-    // * this.fiber: it could be null, in which case the render has been cancelled
-    // * (current || !fiber.parent): if current is not null, this means that the
-    //   render function was called when a render was already occurring. In this
-    //   case, the pending rendering was cancelled, and the fiber needs to be
-    //   rendered to complete the work.  If current is null, we check that the
-    //   fiber has no parent.  If that is the case, the fiber was downgraded from
-    //   a root fiber to a child fiber in the previous microtick, because it was
-    //   embedded in a rendering coming from above, so the fiber will be rendered
-    //   in the next microtick anyway, so we should not render it again.
-    if (this.fiber === fiber && (current || !fiber.parent)) {
-      this._render(fiber);
-    }
-  }
+    const scheduler = this.app.scheduler;
 
-  _render(fiber: Fiber | RootFiber) {
-    try {
-      fiber.bdom = this.renderFn();
-      fiber.root!.counter--;
-    } catch (e) {
-      handleError({ node: this, error: e });
-    }
+    scheduler.requestAnimationFrame(() => {
+      if (this.status === STATUS.DESTROYED) {
+        return;
+      }
+      // We only want to actually render the component if the following two
+      // conditions are true:
+      // * this.fiber: it could be null, in which case the render has been cancelled
+      // * (current || !fiber.parent): if current is not null, this means that the
+      //   render function was called when a render was already occurring. In this
+      //   case, the pending rendering was cancelled, and the fiber needs to be
+      //   rendered to complete the work.  If current is null, we check that the
+      //   fiber has no parent.  If that is the case, the fiber was downgraded from
+      //   a root fiber to a child fiber in the previous microtick, because it was
+      //   embedded in a rendering coming from above, so the fiber will be rendered
+      //   in the next microtick anyway, so we should not render it again.
+      if (this.fiber === fiber && (current || !fiber.parent)) {
+        fiber.render();
+      }
+    });
+    scheduler.addFiber(fiber);
   }
 
   destroy() {
@@ -269,29 +227,49 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
     for (let child of Object.values(this.children)) {
       child._destroy();
     }
-    for (let cb of this.willDestroy) {
-      cb.call(component);
+    if (this.willDestroy.length) {
+      try {
+        for (let cb of this.willDestroy) {
+          cb.call(component);
+        }
+      } catch (e) {
+        handleError({ error: e, node: this });
+      }
     }
     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;
-    if (fiber !== this.fiber) {
-      return;
+    if (this.willUpdateProps.length) {
+      const willUpdatePropsResults = this.willUpdateProps.map((f) => f.call(component, props));
+      if (willUpdatePropsResults.some((res) => res instanceof Promise)) {
+        await Promise.all(willUpdatePropsResults);
+      }
+      if (fiber !== this.fiber) {
+        return;
+      }
     }
     component.props = props;
-    this._render(fiber);
+    this.props = rawProps;
     const parentRoot = parentFiber.root!;
     if (this.willPatch.length) {
       parentRoot.willPatch.push(fiber);
@@ -299,6 +277,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
     if (this.patched.length) {
       parentRoot.patched.push(fiber);
     }
+    fiber.render();
   }
 
   /**
@@ -341,6 +320,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
     bdom.mount(parent, anchor);
     this.status = STATUS.MOUNTED;
     this.fiber!.appliedToDom = true;
+    this.children = this.fiber!.childrenMap;
     this.fiber = null;
   }
 
@@ -357,12 +337,15 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
     }
   }
   _patch() {
-    const hasChildren = Object.keys(this.children).length > 0;
-    this.bdom!.patch(this!.fiber!.bdom!, hasChildren);
-    if (hasChildren) {
-      this.cleanOutdatedChildren();
+    let hasChildren = false;
+    for (let _k in this.children) {
+      hasChildren = true;
+      break;
     }
-    this.fiber!.appliedToDom = true;
+    const fiber = this.fiber!;
+    this.children = fiber.childrenMap;
+    this.bdom!.patch(fiber.bdom!, hasChildren);
+    fiber.appliedToDom = true;
     this.fiber = null;
   }
 
@@ -374,20 +357,6 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
     this.bdom!.remove();
   }
 
-  cleanOutdatedChildren() {
-    const children = this.children;
-    for (const key in children) {
-      const node = children[key];
-      const status = node.status;
-      if (status !== STATUS.MOUNTED) {
-        delete children[key];
-        if (status !== STATUS.DESTROYED) {
-          node.destroy();
-        }
-      }
-    }
-  }
-
   // ---------------------------------------------------------------------------
   // Some debug helpers
   // ---------------------------------------------------------------------------
@@ -396,7 +365,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
   }
 
   get subscriptions(): ReturnType<typeof getSubscriptions> {
-    const render = batchedRenderFunctions.get(this);
+    const render = renderFunctions.get(this);
     return render ? getSubscriptions(render) : [];
   }
 }

src/runtime/error_handling.ts

@@ -5,7 +5,7 @@ import type { Fiber } from "./fibers";
 export const fibersInError: WeakMap<Fiber, any> = new WeakMap();
 export const nodeErrorHandlers: WeakMap<ComponentNode, ((error: any) => void)[]> = new WeakMap();
 
-function _handleError(node: ComponentNode | null, error: any, isFirstRound = false): boolean {
+function _handleError(node: ComponentNode | null, error: any): boolean {
   if (!node) {
     return false;
   }
@@ -16,22 +16,19 @@ function _handleError(node: ComponentNode | null, error: any, isFirstRound = fal
 
   const errorHandlers = nodeErrorHandlers.get(node);
   if (errorHandlers) {
-    let stopped = false;
+    let handled = false;
     // execute in the opposite order
     for (let i = errorHandlers.length - 1; i >= 0; i--) {
       try {
         errorHandlers[i](error);
-        stopped = true;
+        handled = true;
         break;
       } catch (e) {
         error = e;
       }
     }
 
-    if (stopped) {
-      if (isFirstRound && fiber && fiber.node.fiber) {
-        fiber.root!.counter--;
-      }
+    if (handled) {
       return true;
     }
   }
@@ -54,7 +51,7 @@ export function handleError(params: ErrorParams) {
 
   fibersInError.set(fiber.root!, error);
 
-  const handled = _handleError(node, error, true);
+  const handled = _handleError(node, error);
   if (!handled) {
     console.warn(`[Owl] Unhandled error. Destroying the root component`);
     try {

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";
@@ -16,8 +16,15 @@ export function makeRootFiber(node: ComponentNode): Fiber {
   let current = node.fiber;
   if (current) {
     let root = current.root!;
-    root.counter = root.counter + 1 - cancelFibers(current.children);
+    // lock root fiber because canceling children fibers may destroy components,
+    // which means any arbitrary code can be run in onWillDestroy, which may
+    // trigger new renderings
+    root.locked = true;
+    debugger
+    root.setCounter(root.counter + 1 - cancelFibers(current.children));
+    root.locked = false;
     current.children = [];
+    current.childrenMap = {};
     current.bdom = null;
     if (fibersInError.has(current)) {
       fibersInError.delete(current);
@@ -36,13 +43,24 @@ 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
  */
 function cancelFibers(fibers: Fiber[]): number {
   let result = 0;
   for (let fiber of fibers) {
-    fiber.node.fiber = null;
+    let node = fiber.node;
+    fiber.render = throwOnRender;
+    if (node.status === STATUS.NEW) {
+      console.log('asdfasdfsdf')
+      node.destroy();
+      delete node.parent!.children[node.parentKey!];
+    }
+    node.fiber = null;
     if (fiber.bdom) {
       // if fiber has been rendered, this means that the component props have
       // been updated. however, this fiber will not be patched to the dom, so
@@ -50,7 +68,7 @@ function cancelFibers(fibers: Fiber[]): number {
       // the same props, and skip the render completely. With the next line,
       // we kindly request the component code to force a render, so it works as
       // expected.
-      fiber.node.forceNextRender = true;
+      node.forceNextRender = true;
     } else {
       result++;
     }
@@ -67,6 +85,7 @@ export class Fiber {
   children: Fiber[] = [];
   appliedToDom = false;
   deep: boolean = false;
+  childrenMap: ComponentNode["children"] = {};
 
   constructor(node: ComponentNode, parent: Fiber | null) {
     this.node = node;
@@ -74,13 +93,50 @@ export class Fiber {
     if (parent) {
       this.deep = parent.deep;
       const root = parent.root!;
-      root.counter++;
+      root.setCounter(root.counter + 1);
       this.root = root;
       parent.children.push(this);
     } else {
       this.root = this as any;
     }
   }
+
+  render() {
+    // if some parent has a fiber => register in followup
+    let prev = this.root!.node;
+    let scheduler = prev.app.scheduler;
+    let current = prev.parent;
+    while (current) {
+      if (current.fiber) {
+        let root = current.fiber.root!;
+        if (root.counter === 0 && prev.parentKey! in current.fiber.childrenMap) {
+          current = root.node;
+        } else {
+          scheduler.delayedRenders.push(this);
+          return;
+        }
+      }
+      prev = current;
+      current = current.parent;
+    }
+
+    // there are no current rendering from above => we can render
+    this._render();
+  }
+
+  _render() {
+    const node = this.node;
+    const root = this.root;
+    if (root) {
+      try {
+        (this.bdom as any) = true;
+        this.bdom = node.renderFn();
+      } catch (e) {
+        handleError({ node, error: e });
+      }
+      root.setCounter(root.counter - 1);
+    }
+  }
 }
 
 export class RootFiber extends Fiber {
@@ -97,6 +153,7 @@ export class RootFiber extends Fiber {
   complete() {
     const node = this.node;
     this.locked = true;
+    debugger
     let current: Fiber | undefined = undefined;
     try {
       // Step 1: calling all willPatch lifecycle hooks
@@ -144,6 +201,13 @@ export class RootFiber extends Fiber {
       handleError({ fiber: current || this, error: e });
     }
   }
+
+  setCounter(newValue: number) {
+    this.counter = newValue;
+    if (newValue === 0) {
+      this.node.app.scheduler.flush();
+    }
+  }
 }
 
 type Position = "first-child" | "last-child";
@@ -165,6 +229,7 @@ export class MountFiber extends RootFiber {
     let current: Fiber | undefined = this;
     try {
       const node = this.node;
+      node.children = this.childrenMap;
       (node.app.constructor as any).validateTarget(this.target);
       if (node.bdom) {
         // this is a complicated situation: if we mount a fiber with an existing

src/runtime/hooks.ts

@@ -1,6 +1,6 @@
-import type { Env } from "./app/app";
-import { getCurrent } from "./component/component_node";
-import { onMounted, onPatched, onWillUnmount } from "./component/lifecycle_hooks";
+import type { Env } from "./app";
+import { getCurrent } from "./component_node";
+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 { xml } from "./utils";
+import { onWillUnmount } from "./lifecycle_hooks";
 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)) {
@@ -232,6 +232,11 @@ function basicProxyHandler<T extends Target>(callback: Callback): ProxyHandler<T
       if (key === TARGET) {
         return target;
       }
+      // non-writable non-configurable properties cannot be made reactive
+      const desc = Object.getOwnPropertyDescriptor(target, key);
+      if (desc && !desc.writable && !desc.configurable) {
+        return Reflect.get(target, key, proxy);
+      }
       observeTargetKey(target, key, callback);
       return possiblyReactive(Reflect.get(target, key, proxy), callback);
     },

src/runtime/scheduler.ts

@@ -0,0 +1,93 @@
+import { fibersInError } from "./error_handling";
+import { Fiber, RootFiber } from "./fibers";
+import { STATUS } from "./status";
+
+// -----------------------------------------------------------------------------
+//  Scheduler
+// -----------------------------------------------------------------------------
+
+export class Scheduler {
+  // capture the value of requestAnimationFrame as soon as possible, to avoid
+  // interactions with other code, such as test frameworks that override them
+  static requestAnimationFrame = window.requestAnimationFrame.bind(window);
+  tasks: Set<RootFiber> = new Set();
+  _requestAnimationFrame: Window["requestAnimationFrame"];
+  cbs: Function[] = [];
+  frame: number = 0;
+  delayedRenders: Fiber[] = [];
+  shouldFlush = false;
+
+  constructor() {
+    this._requestAnimationFrame = Scheduler.requestAnimationFrame;
+  }
+
+  requestAnimationFrame(cb: Function) {
+    this.cbs.push(cb);
+    if (this.frame === 0) {
+      this.frame = this._requestAnimationFrame(() => {
+        // note that some callbacks may be added to this.cbs while this look is
+        // running, and they will be executed immediately
+        for (let i = 0; i < this.cbs.length; i++) {
+          this.cbs[i]();
+        }
+        this.cbs = [];
+        this.frame = 0;
+      });
+    }
+  }
+
+  addFiber(fiber: Fiber) {
+    this.tasks.add(fiber.root!);
+  }
+
+  /**
+   * Process all current tasks. This only applies to the fibers that are ready.
+   * Other tasks are left unchanged.
+   */
+  flush() {
+    if (this.delayedRenders.length) {
+      let renders = this.delayedRenders;
+      this.delayedRenders = [];
+      for (let f of renders) {
+        if (f.root && f.node.status !== STATUS.DESTROYED && f.node.fiber === f) {
+          f.render();
+        }
+      }
+    }
+    // if (this.shouldFlush === false) {
+    // this.shouldFlush = true;
+    this.requestAnimationFrame(() => {
+      // this.shouldFlush = false;
+      this.tasks.forEach((fiber) => this.processFiber(fiber));
+      for (let task of this.tasks) {
+        if (task.node.status === STATUS.DESTROYED) {
+          this.tasks.delete(task);
+        }
+      }
+    });
+    // }
+  }
+
+  processFiber(fiber: RootFiber) {
+    if (fiber.root !== fiber) {
+      this.tasks.delete(fiber);
+      return;
+    }
+    const hasError = fibersInError.has(fiber);
+    if (hasError && fiber.counter !== 0) {
+      this.tasks.delete(fiber);
+      return;
+    }
+    if (fiber.node.status === STATUS.DESTROYED) {
+      this.tasks.delete(fiber);
+      return;
+    }
+
+    if (fiber.counter === 0) {
+      if (!hasError) {
+        fiber.complete();
+      }
+      this.tasks.delete(fiber);
+    }
+  }
+}

src/runtime/template_helpers.ts

@@ -1,9 +1,11 @@
-import { BDom, multi, text, toggler, createCatcher } from "../blockdom";
-import { validateProps } from "../component/props_validation";
-import { Markup } from "../utils";
-import { html } from "../blockdom/index";
-import { TARGET } from "../reactivity";
+import { BDom, multi, text, toggler, createCatcher } from "./blockdom";
+import { Markup } from "./utils";
+import { html } from "./blockdom/index";
+import { isOptional, validateSchema } from "./validation";
+import type { ComponentConstructor } from "./component";
+import { markRaw } from "./reactivity";
 
+const ObjectCreate = Object.create;
 /**
  * This file contains utility functions that will be injected in each template,
  * to perform various useful tasks in the compiled code.
@@ -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() {
@@ -131,36 +135,49 @@ export function safeOutput(value: any): ReturnType<typeof toggler> {
   }
   let safeKey;
   let block;
-  if (value instanceof Markup) {
-    safeKey = `string_safe`;
-    block = html(value as string);
-  } else if (value instanceof LazyValue) {
-    safeKey = `lazy_value`;
-    block = value.evaluate();
-  } else if (value instanceof String || typeof value === "string") {
-    safeKey = "string_unsafe";
-    block = text(value);
-  } else {
-    // Assuming it is a block
-    safeKey = "block_safe";
-    block = value;
+  switch (typeof value) {
+    case "object":
+      if (value instanceof Markup) {
+        safeKey = `string_safe`;
+        block = html(value as string);
+      } else if (value instanceof LazyValue) {
+        safeKey = `lazy_value`;
+        block = value.evaluate();
+      } else if (value instanceof String) {
+        safeKey = "string_unsafe";
+        block = text(value);
+      } else {
+        // 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 } from "../compiler";
-import { markRaw } from "../reactivity";
-import { Portal } from "../portal";
-import { component, getCurrent } from "../component/component_node";
+import { compile, Template, TemplateFunction } from "../compiler";
+import { comment, createBlock, html, list, multi, text, toggler } from "./blockdom";
+import { getCurrent } from "./component_node";
+import { Portal, portalTemplate } from "./portal";
 import { 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(
-    name: string,
-    template: string | Element,
-    options: { allowDuplicate?: boolean } = {}
-  ) {
-    if (name in this.rawTemplates && !options.allowDuplicate) {
-      throw new Error(`Template ${name} already defined`);
+  addTemplate(name: string, template: string | Element) {
+    if (name in this.rawTemplates) {
+      const rawTemplate = this.rawTemplates[name];
+      const currentAsString =
+        typeof rawTemplate === "string"
+          ? rawTemplate
+          : 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) {
-    return compile(template, {
-      name,
-      dev: this.dev,
-      translateFn: this.translateFn,
-      translatableAttributes: this.translatableAttributes,
-    });
+  _compileTemplate(name: string, template: string | Element): ReturnType<typeof compile> {
+    throw new Error(`Unable to compile a template. Please use owl full build instead`);
+  }
+
+  callTemplate(owner: any, subTemplate: string, ctx: any, parent: any, key: any): any {
+    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

@@ -1,29 +1,5 @@
 export type Callback = () => void;
 
-/**
- * Creates a batched version of a callback so that all calls to it in the same
- * microtick will only call the original callback once.
- *
- * @param callback the callback to batch
- * @returns a batched version of the original callback
- */
-export function batched(callback: Callback): Callback {
-  let called = false;
-  return async () => {
-    // This await blocks all calls to the callback here, then releases them sequentially
-    // in the next microtick. This line decides the granularity of the batch.
-    await Promise.resolve();
-    if (!called) {
-      called = true;
-      callback();
-      // wait for all calls in this microtick to fall through before resetting "called"
-      // so that only the first call to the batched function calls the original callback
-      await Promise.resolve();
-      called = false;
-    }
-  };
-}
-
 export function validateTarget(target: HTMLElement) {
   if (!(target instanceof HTMLElement)) {
     throw new Error("Cannot mount component: the target is not a valid DOM element");
@@ -71,17 +47,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 b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    const b3 = comp2({}, key + \`__2\`, node, this, null);
     return block1([], [b2, b3]);
   }
 }"
 `;
 
 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 b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    const b3 = comp2({}, key + \`__2\`, node, this, null);
     return block1([], [b2, b3]);
   }
 }"
 `;
 
 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 b3 = component(\`Parent\`, {}, key + \`__2\`, node, ctx);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    const b3 = comp2({}, key + \`__2\`, node, this, null);
     return block1([], [b2, b3]);
   }
 }"
 `;
 
 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,10 +341,11 @@ 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>\`);
   
@@ -344,7 +355,7 @@ exports[`Reactivity: useState useless atoms should be deleted 1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`id\`] = v_block2[i1];
       const key1 = ctx['id'];
-      c_block2[i1] = withKey(component(\`Quantity\`, {id: ctx['id']}, key + \`__1__\${key1}\`, node, ctx), key1);
+      c_block2[i1] = withKey(comp1({id: ctx['id']}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     ctx = ctx.__proto__;
     const b2 = list(c_block2);
@@ -356,9 +367,9 @@ exports[`Reactivity: useState useless atoms should be deleted 1`] = `
 `;
 
 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 +381,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 { status } from "../../src/component/status";
+import { App, Component, mount, xml } from "../../src";
+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";
 
 //------------------------------------------------------------------------------
@@ -169,13 +169,25 @@ describe("properties", () => {
     expect(input.value).toBe("potato");
   });
 
-  test("input with value attribute, and undefined given", () => {
+  test("input with value attribute, and falsy value given", () => {
     const block = createBlock(`<input block-attribute-0="value"/>`);
 
     const tree = block([undefined]);
     mount(tree, fixture);
     const input = fixture.querySelector("input")!;
     expect(input.value).toBe("");
+
+    patch(tree, block([null]));
+    expect(input.value).toBe("");
+
+    patch(tree, block([0]));
+    expect(input.value).toBe("0");
+
+    patch(tree, block([""]));
+    expect(input.value).toBe("");
+
+    patch(tree, block([false]));
+    expect(input.value).toBe("");
   });
 
   test("input type=checkbox with checked attribute", () => {

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`] = `
-"function anonymous(bdom, helpers
+exports[`attributes dynamic attributes with backticks 1`] = `
+"function anonymous(app, bdom, helpers
 ) {
-  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`] = `
-"function anonymous(bdom, helpers
+exports[`attributes dynamic class attribute that starts and ends with a space 1`] = `
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, 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,9 +337,9 @@ 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>\`);
@@ -299,9 +355,9 @@ exports[`attributes from object variables set previously 1`] = `
 `;
 
 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\\"/>\`);
@@ -317,9 +373,9 @@ exports[`attributes from variables set previously (no external node) 1`] = `
 `;
 
 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 +391,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 +405,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 +418,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 +430,23 @@ exports[`attributes static attributes on void elements 1`] = `
 }"
 `;
 
-exports[`attributes static attributes with dashes 1`] = `
-"function anonymous(bdom, helpers
+exports[`attributes static attributes with backticks 1`] = `
+"function anonymous(app, bdom, 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 +456,24 @@ exports[`attributes static attributes with dashes 1`] = `
 }"
 `;
 
-exports[`attributes t-att-class and class should combine together 1`] = `
-"function anonymous(bdom, helpers
+exports[`attributes string interpolation, alternate syntax 1`] = `
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
+  
+  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 +485,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 +499,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 +512,24 @@ exports[`attributes t-att-class with multiple classes 2`] = `
 }"
 `;
 
-exports[`attributes t-att-class with multiple classes, some of which are duplicate 1`] = `
-"function anonymous(bdom, helpers
+exports[`attributes t-att-class with multiple classes 3`] = `
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  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 +541,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 +554,38 @@ exports[`attributes t-att-class with object 1`] = `
 }"
 `;
 
-exports[`attributes t-attf-class 1`] = `
-"function anonymous(bdom, helpers
+exports[`attributes t-att-class with object 2`] = `
+"function anonymous(app, bdom, helpers
 ) {
-  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 +597,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 +611,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 +625,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 +639,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 +653,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 +667,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 +680,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 +695,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,9 +709,9 @@ 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\\"/>\`);
   
@@ -600,9 +725,9 @@ exports[`attributes various escapes 1`] = `
 `;
 
 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 +738,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 +752,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 +766,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,9 +780,9 @@ 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>\`);
   
@@ -669,9 +794,9 @@ exports[`special cases for some specific html attributes/properties select with
 `;
 
 exports[`special cases for some specific html attributes/properties textarea with t-att-value 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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,9 +808,9 @@ 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>\`);
   

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,9 +25,9 @@ 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 block2 = createBlock(\`<span>true</span>\`);

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,9 +60,9 @@ 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>\`);
@@ -87,9 +87,9 @@ exports[`t-on can bind handlers with empty object (with non empty inner string)
 `;
 
 exports[`t-on can bind handlers with object arguments 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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,9 +102,9 @@ 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>\`);
   
@@ -117,9 +117,9 @@ exports[`t-on can bind two event handlers 1`] = `
 `;
 
 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,9 +131,9 @@ 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>\`);
@@ -153,11 +153,10 @@ exports[`t-on handler is bound to proper owner, part 2 1`] = `
 `;
 
 exports[`t-on handler is bound to proper owner, part 3 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   return function template(ctx, node, key = \\"\\") {
     return callTemplate_1.call(this, ctx, node, key + \`__1\`);
@@ -166,9 +165,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,11 +179,11 @@ 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 { prepareList, getTemplate, withKey } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, withKey } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -204,9 +203,9 @@ exports[`t-on handler is bound to proper owner, part 4 1`] = `
 `;
 
 exports[`t-on handler is bound to proper owner, part 4 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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 +217,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,9 +231,9 @@ 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>\`);
   
@@ -247,9 +246,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 +261,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,9 +277,9 @@ 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>\`);
   
@@ -293,9 +292,9 @@ 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>\`);
   
@@ -307,9 +306,9 @@ 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>\`);
   
@@ -321,9 +320,9 @@ 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>\`);
   
@@ -337,9 +336,9 @@ 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>\`);
@@ -364,9 +363,9 @@ 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>\`);
   
@@ -378,9 +377,9 @@ 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>\`);
   
@@ -393,9 +392,9 @@ 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>\`);
   
@@ -408,9 +407,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 +422,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 +437,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 +452,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 +468,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 { getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -485,9 +483,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 +497,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 { getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -515,9 +512,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,10 +1,11 @@
 // 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 block2 = createBlock(\`<i class=\\"fa fa-exclamation-triangle\\"/>\`);
@@ -34,7 +35,7 @@ exports[`misc complex template 1`] = `
     for (let i1 = 0; i1 < l_block4; i1++) {
       ctx[\`slot\`] = v_block4[i1];
       const key1 = ctx['slot'].id;
-      c_block4[i1] = withKey(component(\`SlotButton\`, {class: ctx['slot_container'], slot: ctx['slot']}, key + \`__1__\${key1}\`, node, ctx), key1);
+      c_block4[i1] = withKey(comp1({class: ctx['slot_container'],slot: ctx['slot']}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     ctx = ctx.__proto__;
     b4 = list(c_block4);
@@ -79,15 +80,15 @@ exports[`misc complex template 1`] = `
 `;
 
 exports[`misc global 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { prepareList, isBoundary, withDefault, setContextValue, getTemplate, zero, withKey } = helpers;
-  const callTemplate_1 = getTemplate(\`_callee-uses-foo\`);
-  const callTemplate_2 = getTemplate(\`_callee-uses-foo\`);
-  const callTemplate_3 = getTemplate(\`_callee-uses-foo\`);
-  const callTemplate_4 = getTemplate(\`_callee-asc\`);
-  const callTemplate_5 = getTemplate(\`_callee-asc-toto\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, isBoundary, withDefault, setContextValue, zero, withKey } = helpers;
+  const callTemplate_1 = app.getTemplate(\`_callee-uses-foo\`);
+  const callTemplate_2 = app.getTemplate(\`_callee-uses-foo\`);
+  const callTemplate_3 = app.getTemplate(\`_callee-uses-foo\`);
+  const callTemplate_4 = app.getTemplate(\`_callee-asc\`);
+  const callTemplate_5 = app.getTemplate(\`_callee-asc-toto\`);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   let block4 = createBlock(\`<span><block-text-0/></span>\`);
@@ -131,9 +132,9 @@ exports[`misc global 1`] = `
 `;
 
 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 +147,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,9 +163,9 @@ 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 block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -178,11 +179,13 @@ exports[`misc global 4`] = `
 `;
 
 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 { prepareList, withKey, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`LOAD_INFOS_TEMPLATE\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, withKey } = helpers;
+  const callTemplate_1 = app.getTemplate(\`LOAD_INFOS_TEMPLATE\`);
+  const comp1 = app.createComponent(\`BundlesList\`, true, false, false, false);
+  const comp2 = app.createComponent(\`BundlesList\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><header><nav class=\\"navbar navbar-expand-md navbar-light bg-light\\"><a block-attribute-0=\\"href\\"><b style=\\"color:#777;\\"><block-text-1/></b></a><button type=\\"button\\" class=\\"navbar-toggler\\" data-toggle=\\"collapse\\" data-target=\\"#top_menu_collapse\\"><span class=\\"navbar-toggler-icon\\"/></button><div class=\\"collapse navbar-collapse\\" id=\\"top_menu_collapse\\" aria-expanded=\\"false\\"><ul class=\\"nav navbar-nav ml-auto text-right\\" id=\\"top_menu\\"><block-child-0/><li class=\\"nav-item divider\\"/><block-child-1/></ul><div><div class=\\"input-group input-group-sm\\"><div class=\\"input-group-prepend input-group-sm\\"><button class=\\"btn btn-default fa fa-cog\\" title=\\"Settings\\" block-handler-2=\\"click\\"/><button class=\\"btn btn-default\\" block-handler-3=\\"click\\"> More </button><block-child-2/></div><input class=\\"form-control\\" type=\\"text\\" placeholder=\\"Search\\" aria-label=\\"Search\\" name=\\"search\\" block-attribute-4=\\"value\\" block-handler-5=\\"keyup\\" block-handler-6=\\"change\\" block-ref=\\"7\\"/><div class=\\"input-group-append\\"><button class=\\"btn btn-default fa fa-eraser\\" block-handler-8=\\"click\\"/></div></div></div></div></nav></header><div class=\\"container-fluid\\" block-ref=\\"9\\"><div class=\\"row\\"><!--div class=\\"form-group col-md-6\\">
                       <h5>Search options</h5>
@@ -316,8 +319,8 @@ exports[`misc other complex template 1`] = `
     if (!ctx['project']) {
       b24 = block24();
     } else {
-      const b26 = component(\`BundlesList\`, {bundles: ctx['bundles'].sticky, category_custom_views: ctx['category_custom_views'], search: ctx['search']}, key + \`__2\`, node, ctx);
-      const b27 = component(\`BundlesList\`, {bundles: ctx['bundles'].dev, search: ctx['search']}, key + \`__3\`, node, ctx);
+      const b26 = comp1({bundles: ctx['bundles'].sticky,category_custom_views: ctx['category_custom_views'],search: ctx['search']}, key + \`__2\`, node, this, null);
+      const b27 = comp2({bundles: ctx['bundles'].dev,search: ctx['search']}, key + \`__3\`, node, this, null);
       b25 = block25([], [b26, b27]);
     }
     return block1([attr1, txt1, hdlr2, hdlr3, attr8, hdlr4, hdlr5, ref1, hdlr6, ref2], [b2, b4, b14, b17, b22, b23, b24, b25]);

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,9 +309,9 @@ 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>\`);
   
@@ -325,9 +325,9 @@ exports[`simple templates, mostly static template with multiple t tag with multi
 `;
 
 exports[`simple templates, mostly static template with t tag with multiple content 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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 +342,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 +355,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 +368,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,9 +53,9 @@ 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 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>\`);
@@ -73,9 +73,9 @@ exports[`properly support svg svg creates new block if it is within html -- 2 1`
 `;
 
 exports[`properly support svg svg creates new block if it is within html 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><polygon fill=\\"#000000\\" points=\\"0 0 4 4 8 0\\" transform=\\"translate(5 7)\\"/></svg>\`);
@@ -88,11 +88,10 @@ exports[`properly support svg svg creates new block if it is within html 1`] = `
 `;
 
 exports[`properly support svg svg namespace added to sub templates if root tag is path 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`path\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`path\`);
   
   let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
   
@@ -104,9 +103,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 +116,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_call.test.ts.snap

@@ -1,11 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`t-call (template calling) basic caller 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`_basic-callee\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`_basic-callee\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -17,9 +16,9 @@ exports[`t-call (template calling) basic caller 1`] = `
 `;
 
 exports[`t-call (template calling) basic caller 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>ok</span>\`);
   
@@ -30,11 +29,10 @@ exports[`t-call (template calling) basic caller 2`] = `
 `;
 
 exports[`t-call (template calling) basic caller, no parent node 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`_basic-callee\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`_basic-callee\`);
   
   return function template(ctx, node, key = \\"\\") {
     return callTemplate_1.call(this, ctx, node, key + \`__1\`);
@@ -43,9 +41,9 @@ exports[`t-call (template calling) basic caller, no parent node 1`] = `
 `;
 
 exports[`t-call (template calling) basic caller, no parent node 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>ok</span>\`);
   
@@ -56,11 +54,11 @@ exports[`t-call (template calling) basic caller, no parent node 2`] = `
 `;
 
 exports[`t-call (template calling) call with several sub nodes on same line 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, zero, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, zero } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<span>hey</span>\`);
@@ -81,9 +79,9 @@ exports[`t-call (template calling) call with several sub nodes on same line 1`]
 `;
 
 exports[`t-call (template calling) call with several sub nodes on same line 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -96,11 +94,11 @@ exports[`t-call (template calling) call with several sub nodes on same line 2`]
 `;
 
 exports[`t-call (template calling) cascading t-call t-out='0' 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, zero, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`subTemplate\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, zero } = helpers;
+  const callTemplate_1 = app.getTemplate(\`subTemplate\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<span>hey</span>\`);
@@ -121,11 +119,11 @@ exports[`t-call (template calling) cascading t-call t-out='0' 1`] = `
 `;
 
 exports[`t-call (template calling) cascading t-call t-out='0' 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, zero, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`subSubTemplate\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, zero } = helpers;
+  const callTemplate_1 = app.getTemplate(\`subSubTemplate\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<span>cascade 0</span>\`);
@@ -144,11 +142,11 @@ exports[`t-call (template calling) cascading t-call t-out='0' 2`] = `
 `;
 
 exports[`t-call (template calling) cascading t-call t-out='0' 3`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, zero, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`finalTemplate\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, zero } = helpers;
+  const callTemplate_1 = app.getTemplate(\`finalTemplate\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<span>cascade 1</span>\`);
@@ -167,9 +165,9 @@ exports[`t-call (template calling) cascading t-call t-out='0' 3`] = `
 `;
 
 exports[`t-call (template calling) cascading t-call t-out='0' 4`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
   let block1 = createBlock(\`<div><span>cascade 2</span><block-child-0/></div>\`);
@@ -182,11 +180,11 @@ exports[`t-call (template calling) cascading t-call t-out='0' 4`] = `
 `;
 
 exports[`t-call (template calling) cascading t-call t-out='0', without external divs 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, zero, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`subTemplate\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, zero } = helpers;
+  const callTemplate_1 = app.getTemplate(\`subTemplate\`);
   
   let block2 = createBlock(\`<span>hey</span>\`);
   let block4 = createBlock(\`<span>yay</span>\`);
@@ -205,11 +203,11 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
 `;
 
 exports[`t-call (template calling) cascading t-call t-out='0', without external divs 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, zero, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`subSubTemplate\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, zero } = helpers;
+  const callTemplate_1 = app.getTemplate(\`subSubTemplate\`);
   
   let block2 = createBlock(\`<span>cascade 0</span>\`);
   
@@ -226,11 +224,11 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
 `;
 
 exports[`t-call (template calling) cascading t-call t-out='0', without external divs 3`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, zero, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`finalTemplate\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, zero } = helpers;
+  const callTemplate_1 = app.getTemplate(\`finalTemplate\`);
   
   let block2 = createBlock(\`<span>cascade 1</span>\`);
   
@@ -247,9 +245,9 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
 `;
 
 exports[`t-call (template calling) cascading t-call t-out='0', without external divs 4`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
   let block2 = createBlock(\`<span>cascade 2</span>\`);
@@ -263,10 +261,10 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
 `;
 
 exports[`t-call (template calling) dynamic t-call 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { call } = helpers;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const call = app.callTemplate.bind(app);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -279,9 +277,9 @@ exports[`t-call (template calling) dynamic t-call 1`] = `
 `;
 
 exports[`t-call (template calling) dynamic 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(\`<foo><block-text-0/></foo>\`);
   
@@ -293,9 +291,9 @@ exports[`t-call (template calling) dynamic t-call 2`] = `
 `;
 
 exports[`t-call (template calling) dynamic t-call 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(\`<bar><block-text-0/></bar>\`);
   
@@ -307,11 +305,11 @@ exports[`t-call (template calling) dynamic t-call 3`] = `
 `;
 
 exports[`t-call (template calling) inherit context 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -326,9 +324,9 @@ exports[`t-call (template calling) inherit context 1`] = `
 `;
 
 exports[`t-call (template calling) inherit 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;
   
   return function template(ctx, node, key = \\"\\") {
     return text(ctx['foo']);
@@ -337,11 +335,10 @@ exports[`t-call (template calling) inherit context 2`] = `
 `;
 
 exports[`t-call (template calling) recursive template, part 1 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`recursive\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`recursive\`);
   
   let block1 = createBlock(\`<div><span>hey</span><block-child-0/></div>\`);
   
@@ -356,11 +353,11 @@ exports[`t-call (template calling) recursive template, part 1 1`] = `
 `;
 
 exports[`t-call (template calling) recursive template, part 2 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`nodeTemplate\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -377,11 +374,11 @@ exports[`t-call (template calling) recursive template, part 2 1`] = `
 `;
 
 exports[`t-call (template calling) recursive template, part 2 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { prepareList, isBoundary, withDefault, setContextValue, getTemplate, withKey } = helpers;
-  const callTemplate_1 = getTemplate(\`nodeTemplate\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
+  const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
   
   let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/></div>\`);
   
@@ -411,11 +408,11 @@ exports[`t-call (template calling) recursive template, part 2 2`] = `
 `;
 
 exports[`t-call (template calling) recursive template, part 3 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`nodeTemplate\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -432,11 +429,11 @@ exports[`t-call (template calling) recursive template, part 3 1`] = `
 `;
 
 exports[`t-call (template calling) recursive template, part 3 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { prepareList, isBoundary, withDefault, setContextValue, getTemplate, withKey } = helpers;
-  const callTemplate_1 = getTemplate(\`nodeTemplate\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
+  const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
   
   let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/></div>\`);
   
@@ -466,11 +463,11 @@ exports[`t-call (template calling) recursive template, part 3 2`] = `
 `;
 
 exports[`t-call (template calling) recursive template, part 4: with t-set recursive index 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`nodeTemplate\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -488,11 +485,11 @@ exports[`t-call (template calling) recursive template, part 4: with t-set recurs
 `;
 
 exports[`t-call (template calling) recursive template, part 4: with t-set recursive index 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, prepareList, getTemplate, withKey } = helpers;
-  const callTemplate_1 = getTemplate(\`nodeTemplate\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
+  const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
   
   let block1 = createBlock(\`<div><p><block-text-0/> <block-text-1/></p><block-child-0/></div>\`);
   
@@ -524,11 +521,11 @@ exports[`t-call (template calling) recursive template, part 4: with t-set recurs
 `;
 
 exports[`t-call (template calling) scoped parameters 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
@@ -547,9 +544,9 @@ exports[`t-call (template calling) scoped parameters 1`] = `
 `;
 
 exports[`t-call (template calling) scoped parameters 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 = \\"\\") {
     return text(\`ok\`);
@@ -558,11 +555,11 @@ exports[`t-call (template calling) scoped parameters 2`] = `
 `;
 
 exports[`t-call (template calling) scoped parameters, part 2 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
@@ -582,9 +579,9 @@ exports[`t-call (template calling) scoped parameters, part 2 1`] = `
 `;
 
 exports[`t-call (template calling) scoped parameters, part 2 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 = \\"\\") {
     return text(ctx['foo']);
@@ -593,11 +590,10 @@ exports[`t-call (template calling) scoped parameters, part 2 2`] = `
 `;
 
 exports[`t-call (template calling) t-call allowed on a non t node 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -609,9 +605,9 @@ exports[`t-call (template calling) t-call allowed on a non t node 1`] = `
 `;
 
 exports[`t-call (template calling) t-call allowed on a non t node 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>ok</span>\`);
   
@@ -621,12 +617,42 @@ exports[`t-call (template calling) t-call allowed on a non t node 2`] = `
 }"
 `;
 
-exports[`t-call (template calling) t-call with body content as root of a template 1`] = `
-"function anonymous(bdom, helpers
+exports[`t-call (template calling) t-call on a div with t-call-context 1`] = `
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, zero, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`antony\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let ctx1 = ctx['obj'];
+    const b2 = callTemplate_1.call(this, ctx1, node, key + \`__1\`);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-call (template calling) t-call on a div with t-call-context 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['value'];
+    return block1([txt1]);
+  }
+}"
+`;
+
+exports[`t-call (template calling) t-call with body content as root of a template 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, zero } = helpers;
+  const callTemplate_1 = app.getTemplate(\`antony\`);
   
   let block1 = createBlock(\`<p>antony</p>\`);
   
@@ -641,9 +667,9 @@ exports[`t-call (template calling) t-call with body content as root of a templat
 `;
 
 exports[`t-call (template calling) t-call with body content as root of a template 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
   let block1 = createBlock(\`<foo><block-child-0/></foo>\`);
@@ -656,11 +682,10 @@ exports[`t-call (template calling) t-call with body content as root of a templat
 `;
 
 exports[`t-call (template calling) t-call with t-if 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -675,9 +700,9 @@ exports[`t-call (template calling) t-call with t-if 1`] = `
 `;
 
 exports[`t-call (template calling) t-call with t-if 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>ok</span>\`);
   
@@ -688,11 +713,11 @@ exports[`t-call (template calling) t-call with t-if 2`] = `
 `;
 
 exports[`t-call (template calling) t-call with t-set inside and body text content 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -709,9 +734,9 @@ exports[`t-call (template calling) t-call with t-set inside and body text conten
 `;
 
 exports[`t-call (template calling) t-call with t-set inside and body text content 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p><block-text-0/></p>\`);
   
@@ -723,11 +748,11 @@ exports[`t-call (template calling) t-call with t-set inside and body text conten
 `;
 
 exports[`t-call (template calling) t-call with t-set inside and outside 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { prepareList, isBoundary, withDefault, setContextValue, getTemplate, withKey } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -757,9 +782,9 @@ exports[`t-call (template calling) t-call with t-set inside and outside 1`] = `
 `;
 
 exports[`t-call (template calling) t-call with t-set inside and outside 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -771,11 +796,11 @@ exports[`t-call (template calling) t-call with t-set inside and outside 2`] = `
 `;
 
 exports[`t-call (template calling) t-call with t-set inside and outside. 2 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`main\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  const callTemplate_1 = app.getTemplate(\`main\`);
   
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
@@ -790,11 +815,11 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 1`] =
 `;
 
 exports[`t-call (template calling) t-call with t-set inside and outside. 2 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { prepareList, isBoundary, withDefault, setContextValue, getTemplate, withKey } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -824,9 +849,9 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 2`] =
 `;
 
 exports[`t-call (template calling) t-call with t-set inside and outside. 2 3`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = createBlock(\`<span><block-text-0/></span>\`);
   
@@ -840,12 +865,12 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 3`] =
 `;
 
 exports[`t-call (template calling) t-call, conditional and t-set in t-call body 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`callee1\`);
-  const callTemplate_2 = getTemplate(\`callee2\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  const callTemplate_1 = app.getTemplate(\`callee1\`);
+  const callTemplate_2 = app.getTemplate(\`callee2\`);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -869,9 +894,9 @@ exports[`t-call (template calling) t-call, conditional and t-set in t-call body
 `;
 
 exports[`t-call (template calling) t-call, conditional and t-set in t-call body 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>callee1</div>\`);
   
@@ -882,9 +907,9 @@ exports[`t-call (template calling) t-call, conditional and t-set in t-call body
 `;
 
 exports[`t-call (template calling) t-call, conditional and t-set in t-call body 3`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>callee2 <block-text-0/></div>\`);
   
@@ -895,12 +920,73 @@ exports[`t-call (template calling) t-call, conditional and t-set in t-call body
 }"
 `;
 
-exports[`t-call (template calling) t-esc inside t-call, with t-set outside 1`] = `
-"function anonymous(bdom, helpers
+exports[`t-call (template calling) t-call-context 1`] = `
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let ctx1 = ctx['obj'];
+    return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call (template calling) t-call-context 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['value'];
+    return block1([txt1]);
+  }
+}"
+`;
+
+exports[`t-call (template calling) t-call-context and value in body 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    let ctx1 = ctx['obj'];
+    ctx1 = Object.create(ctx1);
+    ctx1[isBoundary] = 1;
+    setContextValue(ctx1, \\"value2\\", ctx['aaron']);
+    return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call (template calling) t-call-context and value in body 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['value1'];
+    let txt2 = ctx['value2'];
+    return block1([txt1, txt2]);
+  }
+}"
+`;
+
+exports[`t-call (template calling) t-esc inside t-call, with t-set outside 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -915,9 +1001,9 @@ exports[`t-call (template calling) t-esc inside t-call, with t-set outside 1`] =
 `;
 
 exports[`t-call (template calling) t-esc inside t-call, with t-set outside 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, 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>\`);
   
@@ -929,11 +1015,11 @@ exports[`t-call (template calling) t-esc inside t-call, with t-set outside 2`] =
 `;
 
 exports[`t-call (template calling) with unused body 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, zero, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, zero } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -946,9 +1032,9 @@ exports[`t-call (template calling) with unused body 1`] = `
 `;
 
 exports[`t-call (template calling) with unused 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 block1 = createBlock(\`<div>ok</div>\`);
   
@@ -959,11 +1045,11 @@ exports[`t-call (template calling) with unused body 2`] = `
 `;
 
 exports[`t-call (template calling) with unused setbody 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -977,9 +1063,9 @@ exports[`t-call (template calling) with unused setbody 1`] = `
 `;
 
 exports[`t-call (template calling) with unused setbody 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>ok</div>\`);
   
@@ -990,11 +1076,11 @@ exports[`t-call (template calling) with unused setbody 2`] = `
 `;
 
 exports[`t-call (template calling) with used body 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, zero, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, zero } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -1007,9 +1093,9 @@ exports[`t-call (template calling) with used body 1`] = `
 `;
 
 exports[`t-call (template calling) with used 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 { zero } = helpers;
   
   let block1 = createBlock(\`<h1><block-text-0/></h1>\`);
@@ -1022,11 +1108,11 @@ exports[`t-call (template calling) with used body 2`] = `
 `;
 
 exports[`t-call (template calling) with used setbody 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
@@ -1043,9 +1129,9 @@ exports[`t-call (template calling) with used setbody 1`] = `
 `;
 
 exports[`t-call (template calling) with used setbody 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 = \\"\\") {
     return text(ctx['foo']);

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 { getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -51,9 +50,9 @@ 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/>\`);

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

@@ -1,9 +1,9 @@
 // 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>\`);
   
@@ -19,9 +19,9 @@ exports[`t-esc div with falsy values 1`] = `
 `;
 
 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 +33,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 +47,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 +62,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,9 +77,9 @@ 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']);
@@ -97,9 +97,9 @@ exports[`t-esc falsy values in text nodes 1`] = `
 `;
 
 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 +111,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 +126,7 @@ exports[`t-esc t-esc is escaped 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`var\`] = new LazyValue(value1, ctx, node);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node);
     let txt1 = ctx['var'];
     return block1([txt1]);
   }
@@ -134,9 +134,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 +148,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 { isBoundary, zero, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, zero } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<p>escaped</p>\`);
@@ -169,9 +169,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>\`);
@@ -184,9 +184,9 @@ exports[`t-esc t-esc=0 is escaped 2`] = `
 `;
 
 exports[`t-esc 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(\`<span><block-text-0/></span>\`);
   

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

@@ -1,9 +1,9 @@
 // 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>\`);
@@ -23,9 +23,9 @@ exports[`t-foreach does not pollute the rendering context 1`] = `
 `;
 
 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>\`);
@@ -47,9 +47,9 @@ exports[`t-foreach iterate on items (on a element node) 1`] = `
 `;
 
 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>\`);
@@ -78,9 +78,9 @@ exports[`t-foreach iterate on items 1`] = `
 `;
 
 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>\`);
@@ -109,9 +109,9 @@ exports[`t-foreach iterate, dict param 1`] = `
 `;
 
 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>\`);
@@ -145,9 +145,9 @@ exports[`t-foreach iterate, position 1`] = `
 `;
 
 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>\`);
@@ -167,9 +167,9 @@ exports[`t-foreach simple iteration (in a node) 1`] = `
 `;
 
 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,9 +186,9 @@ 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>\`);
@@ -212,11 +212,11 @@ exports[`t-foreach simple iteration with two nodes inside 1`] = `
 `;
 
 exports[`t-foreach t-call with body in t-foreach in t-foreach 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { prepareList, isBoundary, withDefault, setContextValue, getTemplate, withKey } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/><span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span></div>\`);
   let block6 = createBlock(\`<span><block-text-0/></span>\`);
@@ -265,9 +265,9 @@ exports[`t-foreach t-call with body in t-foreach in t-foreach 1`] = `
 `;
 
 exports[`t-foreach t-call with body in t-foreach in t-foreach 2`] = `
-"function anonymous(bdom, helpers
+"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(\` [\`);
@@ -283,11 +283,11 @@ exports[`t-foreach t-call with body in t-foreach in t-foreach 2`] = `
 `;
 
 exports[`t-foreach t-call without body in t-foreach in t-foreach 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { prepareList, getTemplate, withKey } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, withKey } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/><span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span></div>\`);
   let block6 = createBlock(\`<span><block-text-0/></span>\`);
@@ -330,9 +330,9 @@ exports[`t-foreach t-call without body in t-foreach in t-foreach 1`] = `
 `;
 
 exports[`t-foreach t-call without body in t-foreach in t-foreach 2`] = `
-"function anonymous(bdom, helpers
+"function 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 = \\"\\") {
@@ -352,9 +352,9 @@ exports[`t-foreach t-call without body in t-foreach in t-foreach 2`] = `
 `;
 
 exports[`t-foreach t-foreach in t-foreach 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -386,9 +386,9 @@ exports[`t-foreach t-foreach in t-foreach 1`] = `
 `;
 
 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>\`);
@@ -412,9 +412,9 @@ exports[`t-foreach t-foreach with t-if inside (no external node) 1`] = `
 `;
 
 exports[`t-foreach t-foreach with t-if inside 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -440,9 +440,9 @@ exports[`t-foreach t-foreach with t-if inside 1`] = `
 `;
 
 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>\`);
@@ -463,9 +463,9 @@ exports[`t-foreach t-key on t-foreach 1`] = `
 `;
 
 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,9 +488,9 @@ 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>\`);

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,9 +39,9 @@ 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;
@@ -60,9 +60,9 @@ exports[`t-if boolean value condition elif (no outside node) 1`] = `
 `;
 
 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>\`);
   
@@ -83,9 +83,9 @@ exports[`t-if boolean value condition elif 1`] = `
 `;
 
 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>\`);
   
@@ -102,9 +102,9 @@ exports[`t-if boolean value condition else 1`] = `
 `;
 
 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>\`);
   
@@ -121,9 +121,9 @@ exports[`t-if boolean value condition false else 1`] = `
 `;
 
 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,9 +138,9 @@ 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>\`);
   
@@ -176,9 +176,9 @@ exports[`t-if can use some boolean operators in expressions 1`] = `
 `;
 
 exports[`t-if div containing a t-if with two inner nodes 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  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 +197,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 +219,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 +234,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 +251,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 +270,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 +289,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 +306,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 +328,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 +345,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 +367,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 +383,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,9 +402,9 @@ 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>\`);
@@ -423,9 +423,9 @@ exports[`t-if t-set, then t-if 1`] = `
 `;
 
 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>\`);
@@ -446,9 +446,9 @@ exports[`t-if t-set, then t-if, part 2 1`] = `
 `;
 
 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>\`);
@@ -472,9 +472,9 @@ exports[`t-if t-set, then t-if, part 3 1`] = `
 `;
 
 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 +490,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 +510,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,9 +46,9 @@ 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>\`);
@@ -70,9 +70,9 @@ 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 block2 = createBlock(\`<span/>\`);
@@ -91,9 +91,9 @@ exports[`t-key t-key on sub dom node pushes a child block in its parent 1`] = `
 `;
 
 exports[`t-key t-key on sub dom node pushes a child block in its parent 2`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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,11 +28,11 @@ 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 { isBoundary, zero, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, zero } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<span>coucou</span>\`);
@@ -49,9 +49,9 @@ exports[`t-out multiple calls to t-out 1`] = `
 `;
 
 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>\`);
@@ -65,9 +65,9 @@ exports[`t-out multiple calls to t-out 2`] = `
 `;
 
 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 +79,27 @@ exports[`t-out not escaping 1`] = `
 }"
 `;
 
-exports[`t-out t-out 0 1`] = `
-"function anonymous(bdom, helpers
+exports[`t-out number literal 1`] = `
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, zero, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`_basic-callee\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { safeOutput } = helpers;
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const 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 +116,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 +131,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 +146,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 +161,7 @@ exports[`t-out t-out bdom 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`var\`] = new LazyValue(value1, ctx, node);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node);
     const b3 = safeOutput(ctx['var']);
     return block1([], [b3]);
   }
@@ -154,9 +169,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 +184,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 +199,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,9 +214,9 @@ 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 block1 = createBlock(\`<span><block-child-0/></span>\`);
@@ -215,9 +230,9 @@ exports[`t-out t-out on a node with a body, as a default 1`] = `
 `;
 
 exports[`t-out t-out on a node with a dom node in body, as a default 1`] = `
-"function anonymous(bdom, helpers
+"function 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 block1 = createBlock(\`<span><block-child-0/></span>\`);
@@ -232,9 +247,9 @@ exports[`t-out t-out on a node with a dom node in body, as a default 1`] = `
 `;
 
 exports[`t-out t-out switch escaped 1`] = `
-"function anonymous(bdom, helpers
+"function 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 +262,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 +277,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,9 +292,9 @@ 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>\`);
@@ -295,7 +310,7 @@ exports[`t-out t-out switch markup on bdom 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     let b3,b5;
-    ctx[\`bdom\`] = new LazyValue(value1, ctx, node);
+    ctx[\`bdom\`] = new LazyValue(value1, ctx, this, node);
     if (ctx['hasBdom']) {
       const b4 = safeOutput(ctx['bdom']);
       b3 = block3([], [b4]);
@@ -309,9 +324,9 @@ exports[`t-out t-out switch markup on bdom 1`] = `
 `;
 
 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 +339,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 +351,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 +366,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 +381,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 +396,9 @@ 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 = \\"\\") {
@@ -393,9 +408,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 +423,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 +438,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 +453,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 +468,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 { getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.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,9 +78,9 @@ 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 block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
@@ -83,9 +98,9 @@ exports[`t-ref ref in a t-if 1`] = `
 `;
 
 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>\`);
@@ -100,7 +115,7 @@ exports[`t-ref refs in a loop 1`] = `
       const key1 = ctx['item'];
       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);
     }
@@ -111,9 +126,9 @@ 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 block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);

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,9 +88,9 @@ 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 = \\"\\") {
@@ -106,16 +106,16 @@ exports[`t-set set from body literal (with t-if/t-else 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`value\`] = new LazyValue(value1, ctx, node);
+    ctx[\`value\`] = new LazyValue(value1, ctx, this, node);
     return text(ctx['value']);
   }
 }"
 `;
 
 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 +128,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 +142,7 @@ exports[`t-set set from body lookup 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`stuff\`] = new LazyValue(value1, ctx, node);
+    ctx[\`stuff\`] = new LazyValue(value1, ctx, this, node);
     let txt1 = ctx['stuff'];
     return block1([txt1]);
   }
@@ -150,9 +150,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,9 +168,9 @@ 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>\`);
@@ -189,9 +189,9 @@ exports[`t-set t-set and t-if 1`] = `
 `;
 
 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>\`);
@@ -206,7 +206,7 @@ exports[`t-set t-set body is evaluated immediately 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"v1\\", 'before');
-    ctx[\`v2\`] = new LazyValue(value1, ctx, node);
+    ctx[\`v2\`] = new LazyValue(value1, ctx, this, node);
     setContextValue(ctx, \\"v1\\", 'after');
     const b3 = safeOutput(ctx['v2']);
     return block1([], [b3]);
@@ -215,11 +215,11 @@ exports[`t-set t-set body is evaluated immediately 1`] = `
 `;
 
 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 { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
   
@@ -236,9 +236,9 @@ exports[`t-set t-set can't alter from within callee 1`] = `
 `;
 
 exports[`t-set t-set can't alter from within callee 2`] = `
-"function anonymous(bdom, helpers
+"function 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,11 +255,11 @@ 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 { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`sub\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
   
   let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
   
@@ -280,9 +280,9 @@ exports[`t-set t-set can't alter in t-call body 1`] = `
 `;
 
 exports[`t-set t-set can't alter in t-call body 2`] = `
-"function anonymous(bdom, helpers
+"function 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 +299,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,9 +317,9 @@ 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>\`);
@@ -336,9 +336,9 @@ exports[`t-set t-set evaluates an expression only once 1`] = `
 `;
 
 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>\`);
@@ -366,9 +366,9 @@ exports[`t-set t-set outside modified in t-foreach 1`] = `
 `;
 
 exports[`t-set t-set outside modified in t-foreach increment-after operator 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -396,9 +396,9 @@ exports[`t-set t-set outside modified in t-foreach increment-after operator 1`]
 `;
 
 exports[`t-set t-set outside modified in t-foreach increment-before operator 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -426,9 +426,9 @@ exports[`t-set t-set outside modified in t-foreach increment-before operator 1`]
 `;
 
 exports[`t-set t-set should reuse variable if possible 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -455,9 +455,9 @@ exports[`t-set t-set should reuse variable if possible 1`] = `
 `;
 
 exports[`t-set t-set with content and sub t-esc 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -471,7 +471,7 @@ exports[`t-set t-set with content and sub t-esc 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`setvar\`] = new LazyValue(value1, ctx, node);
+    ctx[\`setvar\`] = new LazyValue(value1, ctx, this, node);
     let txt1 = ctx['setvar'];
     return block1([txt1]);
   }
@@ -479,9 +479,9 @@ exports[`t-set t-set with content and sub t-esc 1`] = `
 `;
 
 exports[`t-set t-set with t-value (falsy) and body 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, LazyValue, safeOutput } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -497,7 +497,7 @@ exports[`t-set t-set with t-value (falsy) and body 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"v3\\", false);
     setContextValue(ctx, \\"v1\\", 'before');
-    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, node));
+    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node));
     setContextValue(ctx, \\"v1\\", 'after');
     setContextValue(ctx, \\"v3\\", true);
     const b3 = safeOutput(ctx['v2']);
@@ -507,9 +507,9 @@ exports[`t-set t-set with t-value (falsy) and body 1`] = `
 `;
 
 exports[`t-set t-set with t-value (truthy) and body 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, helpers
 ) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, LazyValue, safeOutput } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -525,7 +525,7 @@ exports[`t-set t-set with t-value (truthy) and body 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"v3\\", 'Truthy');
     setContextValue(ctx, \\"v1\\", 'before');
-    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, node));
+    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node));
     setContextValue(ctx, \\"v1\\", 'after');
     setContextValue(ctx, \\"v3\\", false);
     const b3 = safeOutput(ctx['v2']);
@@ -535,9 +535,9 @@ exports[`t-set t-set with t-value (truthy) and body 1`] = `
 `;
 
 exports[`t-set t-set, t-if, and mix of expression/body lookup, 1 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -557,9 +557,9 @@ exports[`t-set t-set, t-if, and mix of expression/body lookup, 1 1`] = `
 `;
 
 exports[`t-set t-set, t-if, and mix of expression/body lookup, 2 1`] = `
-"function anonymous(bdom, helpers
+"function 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>\`);
@@ -579,9 +579,9 @@ exports[`t-set t-set, t-if, and mix of expression/body lookup, 2 1`] = `
 `;
 
 exports[`t-set t-set, t-if, and mix of expression/body lookup, 3 1`] = `
-"function anonymous(bdom, helpers
+"function 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 = \\"\\") {
@@ -600,9 +600,9 @@ exports[`t-set t-set, t-if, and mix of expression/body lookup, 3 1`] = `
 `;
 
 exports[`t-set value priority (with non text body 1`] = `
-"function anonymous(bdom, helpers
+"function 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 +615,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 +623,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,9 +71,9 @@ 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'}>\`);
   
@@ -85,9 +85,9 @@ exports[`qweb t-tag with multiple child nodes 1`] = `
 `;
 
 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 +102,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 { getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`items\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.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 { getTemplate } = helpers;
-  const callTemplate_1 = getTemplate(\`items\`);
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.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,9 +1,9 @@
 // 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>\`);
   
@@ -14,9 +14,9 @@ exports[`translation support can set and remove translatable attributes 1`] = `
 `;
 
 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,9 +27,9 @@ 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>\`);
   
@@ -40,9 +40,9 @@ exports[`translation support does not translate node content if disabled 1`] = `
 `;
 
 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>\`);
   
@@ -53,9 +53,9 @@ exports[`translation support some attributes are translated 1`] = `
 `;
 
 exports[`translation support translation is done on the trimmed text, with extra spaces readded after 1`] = `
-"function anonymous(bdom, helpers
+"function anonymous(app, bdom, 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>\`);
   

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,9 +57,9 @@ 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>\`);
   
@@ -70,9 +70,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,9 +83,9 @@ 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>\`);
   

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 { mount } from "../../src/blockdom";
+import { TemplateSet } from "../../src/runtime/template_set";
+import { mount } from "../../src/runtime/blockdom";
 import { makeTestFixture, renderToBdom, renderToString, snapshotEverything } from "../helpers";
-import { markup } from "../../src/utils";
-import { STATUS } from "../../src/component/status";
+import { markup } from "../../src/runtime/utils";
+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,
       },
     });
   });
@@ -1370,6 +1384,25 @@ describe("qweb parser", () => {
     });
   });
 
+  test("a component with an empty named slot", async () => {
+    expect(parse(`<MyComponent><t t-set-slot="mySlot"></t></MyComponent>`)).toEqual({
+      dynamicProps: null,
+      isDynamic: false,
+      name: "MyComponent",
+      on: null,
+      props: null,
+      slots: {
+        mySlot: {
+          attrs: null,
+          content: null,
+          on: null,
+          scope: null,
+        },
+      },
+      type: 11,
+    });
+  });
+
   test("a component with a named slot", async () => {
     expect(parse(`<MyComponent><t t-set-slot="name">foo</t></MyComponent>`)).toEqual({
       type: ASTType.TComponent,
@@ -1528,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,

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 { createBlock } from "../../src/blockdom/index";
-import { markup } from "../../src/utils";
+import { mount, patch } from "../../src/runtime/blockdom";
+import { createBlock } from "../../src/runtime/blockdom/index";
+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");

tests/compiler/t_ref.test.ts

@@ -1,5 +1,5 @@
-import { TemplateSet } from "../../src/app/template_set";
-import { mount } from "../../src/blockdom";
+import { TemplateSet } from "../../src/runtime/template_set";
+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_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(
-      "already defined"
-    );
+    context.addTemplate("test", `<t/>`);
+    // 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");
   });