[REL] v2.0.8

# v2.0.8

 - [IMP] implement .alike suffix on props
 - [IMP] release: add version number on App
 - [IMP] app: add name as a config option
 - [FIX] runtime, compiler: fix refs getting set or unset incorrectly
 - [FIX] compiler: call translate function with correct string
 - [FIX] compiler: properly handle readonly attribute/readOnly property
 - [REF] blockdom,compiler: implement properties
 - [REF] tests: move properties tests in own file
 - [FIX] compiler: dynamic value on inputs doesn't turn 0 into empty string

.eslintrc

@@ -0,0 +1,47 @@
+{
+    "env": {
+        "browser": true,
+        "node": true,
+        "es2022": true
+    },
+    "parser": "@typescript-eslint/parser",
+    "plugins": ["@typescript-eslint"],
+    "parserOptions": {
+        "sourceType": "module"
+    },
+    "root": true,
+    "rules": {
+        "no-restricted-globals": ["error", "event", "self"],
+        "no-const-assign": ["error"],
+        "no-debugger": ["error"],
+        "no-dupe-class-members": ["error"],
+        "no-dupe-keys": ["error"],
+        "no-dupe-args": ["error"],
+        "no-dupe-else-if": ["error"],
+        "no-unsafe-negation": ["error"],
+        "no-duplicate-imports": ["error"],
+        "valid-typeof": ["error"],
+        "@typescript-eslint/no-unused-vars": ["error", { "vars": "all", "args": "none", "ignoreRestSiblings": false, "caughtErrors": "all" }],
+        "no-restricted-syntax": [
+            "error",
+            {
+                "selector": "MemberExpression[object.name='test'][property.name='only']",
+                "message": "test.only(...) is forbidden",
+            },
+            {
+                "selector": "MemberExpression[object.name='describe'][property.name='only']",
+                "message": "describe.only(...) is forbidden",
+            }
+        ],
+    },
+    "globals": {
+        "describe": true,
+        "expect": true,
+        "test": true,
+        "beforeEach": true,
+        "beforeAll": true,
+        "afterEach": true,
+        "afterAll": true,
+        "jest": true,
+    },
+}

.github/workflows/deploy.yml

@@ -22,7 +22,8 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    - run: npm install
+    - run: npm ci
     - run: npm run test
     - run: npm run check-formatting
+    - run: npm run lint
     - run: npm run build

.gitignore

@@ -14,9 +14,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-package-lock.json
-yarn.lock
-
 #ide's
 .vscode
 .idea

doc/learning/tutorial_todoapp.md

@@ -174,9 +174,9 @@ class Root extends Component {
 ```
 
 The template contains a [`t-foreach`](../reference/templates.md#loops) loop to iterate
-through the tasks. It can find the `tasks` list from the component, since the
-component is the rendering context. Note that we use the `id` of each task as a
-`t-key`, which is very common. There are two css classes: `task-list` and `task`,
+through the tasks. It can find the `tasks` list from the component, since the rendering
+context contains the properties of the component. Note that we use the `id` of each task
+as a `t-key`, which is very common. There are two css classes: `task-list` and `task`,
 that we will use in the next section.
 
 Finally, notice the use of the `t-att-checked` attribute:

doc/reference/props.md

@@ -4,6 +4,7 @@
 
 - [Overview](#overview)
 - [Definition](#definition)
+- [Props comparison](#props-comparison)
 - [Binding function props](#binding-function-props)
 - [Dynamic Props](#dynamic-props)
 - [Default Props](#default-props)
@@ -56,6 +57,47 @@ the `props` object contains the following keys:
 - for `ComponentA`: `a` and `b`,
 - for `ComponentB`: `model`,
 
+## Props comparison
+
+Whenever Owl encounters a subcomponent in a template, it performs a shallow
+comparison of all props. If they are all referentially equal, then the subcomponent
+will not even be updated. Otherwise, if at least one props has changed, then
+Owl will update it.
+
+However, in some cases, we know that two values are different, but they have the
+same effect, and should not be considered different by Owl. For example, anonymous
+functions in a template are always different, but most of them should not be
+considered different:
+
+```xml
+<t t-foreach="todos" t-as="todo" t-key="todo.id">
+  <Todo todo="todo" onDelete="() => deleteTodo(todo.id)" />
+</t>
+```
+
+In that case, one can use the `.alike` suffix:
+
+```xml
+<t t-foreach="todos" t-as="todo" t-key="todo.id">
+  <Todo todo="todo" onDelete.alike="() => deleteTodo(todo.id)" />
+</t>
+```
+
+This tells Owl that this specific prop should always be considered equivalent
+(or, in other words, should be removed from the list of comparable props).
+
+Note that even if most anonymous functions should probably be considered `alike`,
+it is not necessarily true in all cases. It depends on what values are captured
+by the anonymous function. The following example shows a case where it is probably
+wrong to use `.alike`.
+
+```xml
+<t t-foreach="todos" t-as="todo" t-key="todo.id">
+  <!-- Probably wrong! todo.isCompleted may change -->
+  <Todo todo="todo" toggle.alike="() => toggleTodo(todo.isCompleted)" />
+</t>
+```
+
 ## Binding function props
 
 It is common to have the need to pass a callback as a prop. Since Owl components
@@ -95,6 +137,9 @@ class SomeComponent extends Component {
 }
 ```
 
+The `.bind` suffix also implies `.alike`, so these props will not cause additional
+renderings.
+
 ## Dynamic Props
 
 The `t-props` directive can be used to specify totally dynamic props:

doc/reference/templates.md

@@ -115,7 +115,7 @@ It is useful to explain the various rules that apply on these expressions:
    <div><p t-if="console.log(1)">NOT valid</p></div>
    ```
 
-2. it can use anything in the rendering context (typically, the component):
+2. it can use anything in the rendering context (which typically contains the properties of the component):
 
    ```xml
    <p t-if="user.birthday === today()">Happy bithday!</p>
@@ -541,9 +541,8 @@ This can be used to define variables scoped to a sub template:
 ```
 
 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:
+rendering context. 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"/>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.0.2",
+  "version": "2.0.8",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "module": "dist/owl.es.js",
@@ -25,6 +25,7 @@
     "playground:watch": "npm-run-all  --parallel playground:serve \"build:* -- --watch\"",
     "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",
+    "lint": "eslint src/**/*.ts tests/**/*.ts",
     "publish": "npm run build && npm publish",
     "release": "node tools/release.js",
     "compile_templates": "node tools/compile_xml.js"
@@ -42,26 +43,25 @@
   "devDependencies": {
     "@types/jest": "^27.0.1",
     "@types/node": "^14.11.8",
+    "@typescript-eslint/eslint-plugin": "5.48.1",
+    "@typescript-eslint/parser": "5.48.1",
     "chalk": "^3.0.0",
-    "cpx": "^1.5.0",
     "current-git-branch": "^1.1.0",
-    "git-rev-sync": "^1.12.0",
+    "eslint": "8.31.0",
+    "git-rev-sync": "^3.0.2",
     "github-api": "^3.3.0",
     "jest": "^27.1.0",
     "jest-diff": "^27.3.1",
     "jest-environment-jsdom": "^27.1.0",
-    "live-server": "^1.2.1",
     "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",
     "source-map-support": "^0.5.10",
     "ts-jest": "^27.0.5",
-    "typescript": "4.5.2",
-    "uglify-es": "^3.3.9"
+    "typescript": "4.5.2"
   },
   "jest": {
     "testEnvironment": "jsdom",

rollup.config.js

@@ -15,7 +15,6 @@ if (pkg.module !== ES_FILENAME || pkg.main !== CJS_FILENAME) {
 }  
 
 const outro = `
-__info__.version = '${pkg.version}';
 __info__.date = '${new Date().toISOString()}';
 __info__.hash = '${git.short()}';
 __info__.url = 'https://github.com/odoo/owl';

src/compiler/code_generator.ts

@@ -1,4 +1,3 @@
-import { isProp } from "../runtime/blockdom/attributes";
 import {
   compileExpr,
   compileExprToArray,
@@ -33,6 +32,7 @@ import {
 import { OwlError } from "../runtime/error_handling";
 
 type BlockType = "block" | "text" | "multi" | "list" | "html" | "comment";
+const whitespaceRE = /\s+/g;
 
 export interface Config {
   translateFn?: (s: string) => string;
@@ -58,6 +58,30 @@ function generateId(prefix: string = "") {
   return prefix + nextDataIds[prefix];
 }
 
+function isProp(tag: string, key: string): boolean {
+  switch (tag) {
+    case "input":
+      return (
+        key === "checked" ||
+        key === "indeterminate" ||
+        key === "value" ||
+        key === "readonly" ||
+        key === "readOnly" ||
+        key === "disabled"
+      );
+    case "option":
+      return key === "selected" || key === "disabled";
+    case "textarea":
+      return key === "value" || key === "readonly" || key === "readOnly" || key === "disabled";
+    case "select":
+      return key === "value" || key === "disabled";
+    case "button":
+    case "optgroup":
+      return key === "disabled";
+  }
+  return false;
+}
+
 // -----------------------------------------------------------------------------
 // BlockDescription
 // -----------------------------------------------------------------------------
@@ -143,6 +167,7 @@ interface Context {
   nameSpace?: string;
   tModelSelectedExpr?: string;
   ctxVar?: string;
+  inPreTag?: boolean;
 }
 
 function createContext(parentCtx: Context, params?: Partial<Context>): Context {
@@ -167,11 +192,9 @@ class CodeTarget {
   code: string[] = [];
   hasRoot = false;
   hasCache = false;
-  hasRef: boolean = false;
-  // maps ref name to [id, expr]
-  refInfo: { [name: string]: [string, string] } = {};
   shouldProtectScope: boolean = false;
   on: EventHandlers | null;
+  hasRefWrapper: boolean = false;
 
   constructor(name: string, on?: EventHandlers | null) {
     this.name = name;
@@ -190,17 +213,13 @@ class CodeTarget {
   generateCode(): string {
     let result: string[] = [];
     result.push(`function ${this.name}(ctx, node, key = "") {`);
-    if (this.hasRef) {
-      result.push(`  const refs = this.__owl__.refs;`);
-      for (let name in this.refInfo) {
-        const [id, expr] = this.refInfo[name];
-        result.push(`  const ${id} = ${expr};`);
-      }
-    }
     if (this.shouldProtectScope) {
       result.push(`  ctx = Object.create(ctx);`);
       result.push(`  ctx[isBoundary] = 1`);
     }
+    if (this.hasRefWrapper) {
+      result.push(`  let refWrapper = makeRefWrapper(this.__owl__);`);
+    }
     if (this.hasCache) {
       result.push(`  let cache = ctx.cache || {};`);
       result.push(`  let nextCache = ctx.cache = {};`);
@@ -511,6 +530,9 @@ export class CodeGenerator {
       const match = translationRE.exec(value) as any;
       value = match[1] + this.translateFn(match[2]) + match[3];
     }
+    if (!ctx.inPreTag) {
+      value = value.replace(whitespaceRE, " ");
+    }
 
     if (!block || forceNewBlock) {
       block = this.createBlock(block, "text", ctx);
@@ -578,19 +600,26 @@ export class CodeGenerator {
         attrName = key === "t-att" ? null : key.slice(6);
         expr = compileExpr(ast.attrs[key]);
         if (attrName && isProp(ast.tag, attrName)) {
+          if (attrName === "readonly") {
+            // the property has a different name than the attribute
+            attrName = "readOnly";
+          }
           // we force a new string or new boolean to bypass the equality check in blockdom when patching same value
           if (attrName === "value") {
-            // When the expression is falsy, fall back to an empty string
-            expr = `new String((${expr}) || "")`;
+            // When the expression is falsy (except 0), fall back to an empty string
+            expr = `new String((${expr}) === 0 ? 0 : ((${expr}) || ""))`;
           } else {
             expr = `new Boolean(${expr})`;
           }
-        }
-        const idx = block!.insertData(expr, "attr");
-        if (key === "t-att") {
-          attrs[`block-attributes`] = String(idx);
+          const idx = block!.insertData(expr, "prop");
+          attrs[`block-property-${idx}`] = attrName!;
         } else {
-          attrs[`block-attribute-${idx}`] = attrName!;
+          const idx = block!.insertData(expr, "attr");
+          if (key === "t-att") {
+            attrs[`block-attributes`] = String(idx);
+          } else {
+            attrs[`block-attribute-${idx}`] = attrName!;
+          }
         }
       } else if (this.translatableAttributes.includes(key)) {
         attrs[key] = this.translateFn(ast.attrs[key]);
@@ -632,15 +661,23 @@ export class CodeGenerator {
 
       let idx: number;
       if (specialInitTargetAttr) {
-        idx = block!.insertData(`${fullExpression} === '${attrs[targetAttr]}'`, "attr");
-        attrs[`block-attribute-${idx}`] = specialInitTargetAttr;
+        let targetExpr = targetAttr in attrs && `'${attrs[targetAttr]}'`;
+        if (!targetExpr && ast.attrs) {
+          // look at the dynamic attribute counterpart
+          const dynamicTgExpr = ast.attrs[`t-att-${targetAttr}`];
+          if (dynamicTgExpr) {
+            targetExpr = compileExpr(dynamicTgExpr);
+          }
+        }
+        idx = block!.insertData(`${fullExpression} === ${targetExpr}`, "prop");
+        attrs[`block-property-${idx}`] = specialInitTargetAttr;
       } else if (hasDynamicChildren) {
         const bValueId = generateId("bValue");
         tModelSelectedExpr = `${bValueId}`;
         this.define(tModelSelectedExpr, fullExpression);
       } else {
-        idx = block!.insertData(`${fullExpression}`, "attr");
-        attrs[`block-attribute-${idx}`] = targetAttr;
+        idx = block!.insertData(`${fullExpression}`, "prop");
+        attrs[`block-property-${idx}`] = targetAttr;
       }
       this.helpers.add("toNumber");
       let valueCode = `ev.target.${targetAttr}`;
@@ -661,28 +698,21 @@ export class CodeGenerator {
 
     // t-ref
     if (ast.ref) {
-      this.target.hasRef = true;
-      const isDynamic = INTERP_REGEXP.test(ast.ref);
-      if (isDynamic) {
-        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;
-        if (name in this.target.refInfo) {
-          // ref has already been defined
-          this.helpers.add("multiRefSetter");
-          const info = this.target.refInfo[name];
-          const index = block!.data.push(info[0]) - 1;
-          attrs["block-ref"] = String(index);
-          info[1] = `multiRefSetter(refs, \`${name}\`)`;
-        } else {
-          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);
-        }
+      if (this.dev) {
+        this.helpers.add("makeRefWrapper");
+        this.target.hasRefWrapper = true;
       }
+      const isDynamic = INTERP_REGEXP.test(ast.ref);
+      let name = `\`${ast.ref}\``;
+      if (isDynamic) {
+        name = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, true));
+      }
+      let setRefStr = `(el) => this.__owl__.setRef((${name}), el)`;
+      if (this.dev) {
+        setRefStr = `refWrapper(${name}, ${setRefStr})`;
+      }
+      const idx = block!.insertData(setRefStr, "ref");
+      attrs["block-ref"] = String(idx);
     }
 
     const dom = xmlDoc.createElement(ast.tag);
@@ -706,6 +736,7 @@ export class CodeGenerator {
           tKeyExpr: ctx.tKeyExpr,
           nameSpace,
           tModelSelectedExpr,
+          inPreTag: ctx.inPreTag || ast.tag === "pre",
         });
         this.compileAST(child, subCtx);
       }
@@ -1101,12 +1132,15 @@ export class CodeGenerator {
     value = this.captureExpression(value);
     if (name.includes(".")) {
       let [_name, suffix] = name.split(".");
-      if (suffix === "bind") {
-        this.helpers.add("bind");
-        name = _name;
-        value = `bind(this, ${value || undefined})`;
-      } else {
-        throw new OwlError("Invalid prop suffix");
+      name = _name;
+      switch (suffix) {
+        case "bind":
+          value = `${value}.bind(this)`;
+          break;
+        case "alike":
+          break;
+        default:
+          throw new OwlError("Invalid prop suffix");
       }
     }
     name = /^[a-z_]+$/i.test(name) ? name : `'${name}'`;
@@ -1206,15 +1240,27 @@ export class CodeGenerator {
       keyArg = `${ctx.tKeyExpr} + ${keyArg}`;
     }
     let id = generateId("comp");
+    const propList: string[] = [];
+    for (let p in ast.props || {}) {
+      let [name, suffix] = p.split(".");
+      if (!suffix) {
+        propList.push(`"${name}"`);
+      }
+    }
     this.staticDefs.push({
       id,
       expr: `app.createComponent(${
         ast.isDynamic ? null : expr
-      }, ${!ast.isDynamic}, ${!!ast.slots}, ${!!ast.dynamicProps}, ${
-        !ast.props && !ast.dynamicProps
-      })`,
+      }, ${!ast.isDynamic}, ${!!ast.slots}, ${!!ast.dynamicProps}, [${propList}])`,
     });
 
+    if (ast.isDynamic) {
+      // If the component class changes, this can cause delayed renders to go
+      // through if the key doesn't change. Use the component name for now.
+      // This means that two component classes with the same name isn't supported
+      // in t-component. We can generate a unique id per class later if needed.
+      keyArg = `(${expr}).name + ${keyArg}`;
+    }
     let blockExpr = `${id}(${propString}, ${keyArg}, node, this, ${ast.isDynamic ? expr : null})`;
     if (ast.isDynamic) {
       blockExpr = `toggler(${expr}, ${blockExpr})`;

src/compiler/inline_expressions.ts

@@ -28,7 +28,7 @@ import { OwlError } from "../runtime/error_handling";
 //------------------------------------------------------------------------------
 
 const RESERVED_WORDS =
-  "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,this,eval,void,Math,RegExp,Array,Object,Date".split(
+  "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,eval,void,Math,RegExp,Array,Object,Date".split(
     ","
   );
 

src/compiler/parser.ts

@@ -261,16 +261,12 @@ function parseTNode(node: Element, ctx: ParsingContext): AST | null {
 // Text and Comment Nodes
 // -----------------------------------------------------------------------------
 const lineBreakRE = /[\r\n]/;
-const whitespaceRE = /\s+/g;
 
 function parseTextCommentNode(node: Node, ctx: ParsingContext): AST | null {
   if (node.nodeType === Node.TEXT_NODE) {
     let value = node.textContent || "";
-    if (!ctx.inPreTag) {
-      if (lineBreakRE.test(value) && !value.trim()) {
-        return null;
-      }
-      value = value.replace(whitespaceRE, " ");
+    if (!ctx.inPreTag && lineBreakRE.test(value) && !value.trim()) {
+      return null;
     }
 
     return { type: ASTType.Text, value };

src/runtime/app.ts

@@ -1,12 +1,12 @@
+import { version } from "../version";
 import { Component, ComponentConstructor, Props } from "./component";
 import { ComponentNode } from "./component_node";
-import { nodeErrorHandlers, OwlError } from "./error_handling";
-import { Fiber, MountOptions } from "./fibers";
+import { nodeErrorHandlers, OwlError, handleError } from "./error_handling";
+import { Fiber, RootFiber, MountOptions } from "./fibers";
 import { Scheduler } from "./scheduler";
 import { validateProps } from "./template_helpers";
 import { TemplateSet, TemplateSetConfig } from "./template_set";
 import { validateTarget } from "./utils";
-import { handleError } from "./error_handling";
 
 // reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f
 
@@ -15,6 +15,7 @@ export interface Env {
 }
 
 export interface AppConfig<P, E> extends TemplateSetConfig {
+  name?: string;
   props?: P;
   env?: E;
   test?: boolean;
@@ -32,13 +33,31 @@ This is not suitable for production use.
 See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration for more information.`;
 };
 
+declare global {
+  interface Window {
+    __OWL_DEVTOOLS__: {
+      apps: Set<App>;
+      Fiber: typeof Fiber;
+      RootFiber: typeof RootFiber;
+    };
+  }
+}
+
+window.__OWL_DEVTOOLS__ ||= {
+  apps: new Set<App>(),
+  Fiber: Fiber,
+  RootFiber: RootFiber,
+};
+
 export class App<
   T extends abstract new (...args: any) => any = any,
   P extends object = any,
   E = any
 > extends TemplateSet {
   static validateTarget = validateTarget;
+  static version = version;
 
+  name: string;
   Root: ComponentConstructor<P, E>;
   props: P;
   env: E;
@@ -48,7 +67,9 @@ export class App<
 
   constructor(Root: ComponentConstructor<P, E>, config: AppConfig<P, E> = {}) {
     super(config);
+    this.name = config.name || "";
     this.Root = Root;
+    window.__OWL_DEVTOOLS__.apps.add(this);
     if (config.test) {
       this.dev = true;
     }
@@ -110,6 +131,7 @@ export class App<
       this.scheduler.flush();
       this.root.destroy();
     }
+    window.__OWL_DEVTOOLS__.apps.delete(this);
   }
 
   createComponent<P extends Props>(
@@ -117,22 +139,35 @@ export class App<
     isStatic: boolean,
     hasSlotsProp: boolean,
     hasDynamicPropList: boolean,
-    hasNoProp: boolean
+    propList: string[]
   ) {
     const isDynamic = !isStatic;
-    function _arePropsDifferent(props1: Props, props2: Props): boolean {
-      for (let k in props1) {
-        if (props1[k] !== props2[k]) {
-          return true;
+    let arePropsDifferent: (p1: Object, p2: Object) => boolean;
+    const hasNoProp = propList.length === 0;
+    if (hasSlotsProp) {
+      arePropsDifferent = (_1, _2) => true;
+    } else if (hasDynamicPropList) {
+      arePropsDifferent = function (props1: Props, props2: Props) {
+        for (let k in props1) {
+          if (props1[k] !== props2[k]) {
+            return true;
+          }
         }
-      }
-      return hasDynamicPropList && Object.keys(props1).length !== Object.keys(props2).length;
+        return Object.keys(props1).length !== Object.keys(props2).length;
+      };
+    } else if (hasNoProp) {
+      arePropsDifferent = (_1: any, _2: any) => false;
+    } else {
+      arePropsDifferent = function (props1: Props, props2: Props) {
+        for (let p of propList) {
+          if (props1[p] !== props2[p]) {
+            return true;
+          }
+        }
+        return false;
+      };
     }
-    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;
 

src/runtime/blockdom/attributes.ts

@@ -140,33 +140,3 @@ export function updateClass(this: HTMLElement, val: any, oldVal: any) {
     }
   }
 }
-
-export function makePropSetter(name: string): Setter<HTMLElement> {
-  return function setProp(this: HTMLElement, value: any) {
-    // support 0, fallback to empty string for other falsy values
-    (this as any)[name] = value === 0 ? 0 : value ? value.valueOf() : "";
-  };
-}
-
-export function isProp(tag: string, key: string): boolean {
-  switch (tag) {
-    case "input":
-      return (
-        key === "checked" ||
-        key === "indeterminate" ||
-        key === "value" ||
-        key === "readonly" ||
-        key === "disabled"
-      );
-    case "option":
-      return key === "selected" || key === "disabled";
-    case "textarea":
-      return key === "value" || key === "readonly" || key === "disabled";
-    case "select":
-      return key === "value" || key === "disabled";
-    case "button":
-    case "optgroup":
-      return key === "disabled";
-  }
-  return false;
-}

src/runtime/blockdom/block_compiler.ts

@@ -1,13 +1,5 @@
 import { OwlError } from "../error_handling";
-import {
-  attrsSetter,
-  attrsUpdater,
-  createAttrUpdater,
-  isProp,
-  makePropSetter,
-  setClass,
-  updateClass,
-} from "./attributes";
+import { attrsSetter, attrsUpdater, createAttrUpdater, setClass, updateClass } from "./attributes";
 import { config } from "./config";
 import { createEventHandler } from "./events";
 import type { VNode } from "./index";
@@ -25,6 +17,13 @@ const nodeGetNextSibling = getDescriptor(nodeProto, "nextSibling").get!;
 
 const NO_OP = () => {};
 
+function makePropSetter(name: string): Setter<HTMLElement> {
+  return function setProp(this: HTMLElement, value: any) {
+    // support 0, fallback to empty string for other falsy values
+    (this as any)[name] = value === 0 ? 0 : value ? value.valueOf() : "";
+  };
+}
+
 // -----------------------------------------------------------------------------
 // Main compiler code
 // -----------------------------------------------------------------------------
@@ -101,7 +100,7 @@ function normalizeNode(node: HTMLElement | Text) {
 interface DynamicInfo {
   idx: number;
   refIdx?: number;
-  type: "text" | "child" | "handler" | "attribute" | "attributes" | "ref";
+  type: "text" | "child" | "handler" | "attribute" | "attributes" | "property" | "ref";
   isOnlyChild?: boolean;
   name?: string;
   tag?: string;
@@ -184,6 +183,14 @@ function buildTree(
               name: attrValue,
               tag: tagName,
             });
+          } else if (attrName.startsWith("block-property-")) {
+            const idx = parseInt(attrName.slice(15), 10);
+            info.push({
+              type: "property",
+              idx,
+              name: attrValue,
+              tag: tagName,
+            });
           } else if (attrName === "block-attributes") {
             info.push({
               type: "attributes",
@@ -377,15 +384,22 @@ function updateCtx(ctx: BlockCtx, tree: IntermediateTree) {
           };
         }
         break;
+      case "property": {
+        const refIdx = info.refIdx!;
+        const setProp = makePropSetter(info.name!);
+        ctx.locations.push({
+          idx: info.idx,
+          refIdx,
+          setData: setProp,
+          updateData: setProp,
+        });
+        break;
+      }
       case "attribute": {
         const refIdx = info.refIdx!;
         let updater: any;
         let setter: any;
-        if (isProp(info.tag!, info.name!)) {
-          const setProp = makePropSetter(info.name!);
-          setter = setProp;
-          updater = setProp;
-        } else if (info.name === "class") {
+        if (info.name === "class") {
           setter = setClass;
           updater = updateClass;
         } else {

src/runtime/component_node.ts

@@ -114,7 +114,8 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
       }
     }
     this.component = new C(props, env, this);
-    this.renderFn = app.getTemplate(C.template).bind(this.component, this.component, this);
+    const ctx = Object.assign(Object.create(this.component), { this: this.component });
+    this.renderFn = app.getTemplate(C.template).bind(this.component, ctx, this);
     this.component.setup();
     currentNode = null;
   }
@@ -280,6 +281,19 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     }
   }
 
+  /**
+   * Sets a ref to a given HTMLElement.
+   *
+   * @param name the name of the ref to set
+   * @param el the HTMLElement to set the ref to. The ref is not set if the el
+   *  is null, but useRef will not return elements that are not in the DOM
+   */
+  setRef(name: string, el: HTMLElement | null) {
+    if (el) {
+      this.refs[name] = el;
+    }
+  }
+
   // ---------------------------------------------------------------------------
   // Block DOM methods
   // ---------------------------------------------------------------------------
@@ -317,6 +331,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
   }
   _patch() {
     let hasChildren = false;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     for (let _k in this.children) {
       hasChildren = true;
       break;

src/runtime/hooks.ts

@@ -15,7 +15,8 @@ export function useRef<T extends HTMLElement = HTMLElement>(name: string): { el:
   const refs = node.refs;
   return {
     get el(): T | null {
-      return refs[name] || null;
+      const el = refs[name];
+      return el?.ownerDocument.contains(el) ? el : null;
     },
   };
 }
@@ -117,7 +118,7 @@ export function useEffect(effect: Effect, computeDependencies: () => any[] = ()
  *  `useExternalListener(window, 'click', this._doSomething);`
  * */
 export function useExternalListener(
-  target: HTMLElement | typeof window,
+  target: EventTarget,
   eventName: string,
   handler: EventListener,
   eventParams?: AddEventListenerOptions

src/runtime/index.ts

@@ -1,3 +1,4 @@
+import { App } from "./app";
 import {
   config,
   createBlock,
@@ -56,4 +57,6 @@ export {
 export { validate } from "./validation";
 export { OwlError } from "./error_handling";
 
-export const __info__ = {};
+export const __info__ = {
+  version: App.version,
+};

src/runtime/reactivity.ts

@@ -1,8 +1,13 @@
-import { Callback } from "./utils";
+import type { Callback } from "./utils";
 import { OwlError } from "./error_handling";
 
 // Special key to subscribe to, to be notified of key creation/deletion
 const KEYCHANGES = Symbol("Key changes");
+// Used to specify the absence of a callback, can be used as WeakMap key but
+// should only be used as a sentinel value and never called.
+const NO_CALLBACK = () => {
+  throw new Error("Called NO_CALLBACK. Owl is broken, please report this to the maintainers.");
+};
 
 // The following types only exist to signify places where objects are expected
 // to be reactive or not, they provide no type checking benefit over "object"
@@ -86,6 +91,9 @@ const targetToKeysToCallbacks = new WeakMap<Target, Map<PropertyKey, Set<Callbac
  * @param callback the function to call when the key changes
  */
 function observeTargetKey(target: Target, key: PropertyKey, callback: Callback): void {
+  if (callback === NO_CALLBACK) {
+    return;
+  }
   if (!targetToKeysToCallbacks.get(target)) {
     targetToKeysToCallbacks.set(target, new Map());
   }
@@ -140,8 +148,11 @@ export function clearReactivesForCallback(callback: Callback): void {
     if (!observedKeys) {
       continue;
     }
-    for (const callbacks of observedKeys.values()) {
+    for (const [key, callbacks] of observedKeys.entries()) {
       callbacks.delete(callback);
+      if (!callbacks.size) {
+        observedKeys.delete(key);
+      }
     }
   }
   targetsToClear.clear();
@@ -151,10 +162,15 @@ export function getSubscriptions(callback: Callback) {
   const targets = callbacksToTargets.get(callback) || [];
   return [...targets].map((target) => {
     const keysToCallbacks = targetToKeysToCallbacks.get(target);
-    return {
-      target,
-      keys: keysToCallbacks ? [...keysToCallbacks.keys()] : [],
-    };
+    let keys = [];
+    if (keysToCallbacks) {
+      for (const [key, cbs] of keysToCallbacks) {
+        if (cbs.has(callback)) {
+          keys.push(key);
+        }
+      }
+    }
+    return { target, keys };
   });
 }
 // Maps reactive objects to the underlying target
@@ -187,7 +203,7 @@ const reactiveCache = new WeakMap<Target, WeakMap<Callback, Reactive<Target>>>()
  *  reactive has changed
  * @returns a proxy that tracks changes to it
  */
-export function reactive<T extends Target>(target: T, callback: Callback = () => {}): T {
+export function reactive<T extends Target>(target: T, callback: Callback = NO_CALLBACK): T {
   if (!canBeMadeReactive(target)) {
     throw new OwlError(`Cannot make the given value reactive`);
   }

src/runtime/template_helpers.ts

@@ -5,6 +5,7 @@ import { isOptional, validateSchema } from "./validation";
 import type { ComponentConstructor } from "./component";
 import { markRaw } from "./reactivity";
 import { OwlError } from "./error_handling";
+import type { ComponentNode } from "./component_node";
 
 const ObjectCreate = Object.create;
 /**
@@ -166,42 +167,6 @@ export function safeOutput(value: any, defaultValue?: any): ReturnType<typeof to
   return toggler(safeKey, block);
 }
 
-let boundFunctions = new WeakMap();
-const WeakMapGet = WeakMap.prototype.get;
-const WeakMapSet = WeakMap.prototype.set;
-
-function bind(component: any, fn: Function): Function {
-  let boundFnMap = WeakMapGet.call(boundFunctions, component);
-  if (!boundFnMap) {
-    boundFnMap = new WeakMap();
-    WeakMapSet.call(boundFunctions, component, boundFnMap);
-  }
-  let boundFn = WeakMapGet.call(boundFnMap, fn);
-  if (!boundFn) {
-    boundFn = fn.bind(component);
-    WeakMapSet.call(boundFnMap, fn, boundFn);
-  }
-  return boundFn;
-}
-
-type RefMap = { [key: string]: HTMLElement | null };
-type RefSetter = (el: HTMLElement | null) => void;
-
-function multiRefSetter(refs: RefMap, name: string): RefSetter {
-  let count = 0;
-  return (el) => {
-    if (el) {
-      count++;
-      if (count > 1) {
-        throw new OwlError("Cannot have 2 elements with same ref name at the same time");
-      }
-    }
-    if (count === 0 || el) {
-      refs[name] = el;
-    }
-  };
-}
-
 /**
  * Validate the component props (or next props) against the (static) props
  * description.  This is potentially an expensive operation: it may needs to
@@ -250,6 +215,19 @@ export function validateProps<P>(name: string | ComponentConstructor<P>, props:
   }
 }
 
+function makeRefWrapper(node: ComponentNode) {
+  let refNames: Set<String> = new Set();
+  return (name: string, fn: Function) => {
+    if (refNames.has(name)) {
+      throw new OwlError(
+        `Cannot set the same ref more than once in the same component, ref "${name}" was set multiple times in ${node.name}`
+      );
+    }
+    refNames.add(name);
+    return fn;
+  };
+}
+
 export const helpers = {
   withDefault,
   zero: Symbol("zero"),
@@ -259,14 +237,13 @@ export const helpers = {
   withKey,
   prepareList,
   setContextValue,
-  multiRefSetter,
   shallowEqual,
   toNumber,
   validateProps,
   LazyValue,
   safeOutput,
-  bind,
   createCatcher,
   markRaw,
   OwlError,
+  makeRefWrapper,
 };

src/runtime/validation.ts

@@ -1,4 +1,5 @@
 import { OwlError } from "./error_handling";
+import { toRaw } from "./reactivity";
 
 type BaseType =
   | typeof String
@@ -84,6 +85,7 @@ export function validateSchema(obj: { [key: string]: any }, schema: Schema): str
   if (Array.isArray(schema)) {
     schema = toSchema(schema);
   }
+  obj = toRaw(obj);
   let errors = [];
   // check if each value in obj has correct shape
   for (let key in obj) {

src/version.ts

@@ -0,0 +1,2 @@
+// do not modify manually. This value is updated by the release script.
+export const version = "2.0.8";

tests/__snapshots__/reactivity.test.ts.snap

@@ -50,7 +50,7 @@ exports[`Reactivity: useState destroyed component before being mounted is inacti
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -82,7 +82,7 @@ exports[`Reactivity: useState destroyed component is inactive 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -129,7 +129,7 @@ exports[`Reactivity: useState parent and children subscribed to same context 1`]
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
@@ -222,8 +222,8 @@ exports[`Reactivity: useState two components are updated in parallel 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -253,8 +253,8 @@ exports[`Reactivity: useState two components can subscribe to same context 1`] =
 "function anonymous(app, bdom, helpers
 ) {
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -284,8 +284,8 @@ exports[`Reactivity: useState two independent components on different levels are
 "function anonymous(app, bdom, helpers
 ) {
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Parent\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -315,7 +315,7 @@ exports[`Reactivity: useState two independent components on different levels are
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -345,7 +345,7 @@ exports[`Reactivity: useState useless atoms should be deleted 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
-  const comp1 = app.createComponent(\`Quantity\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Quantity\`, true, false, false, [\\"id\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/> Total: <block-text-0/> Count: <block-text-1/></div>\`);
   

tests/app/app.test.ts

@@ -69,7 +69,7 @@ describe("app", () => {
       static template = xml`<div t-esc="message"/>`;
     }
 
-    await mount(Root, fixture, { dev: true, props: { messge: "hey" }, warnIfNoStaticProps: true });
+    await mount(Root, fixture, { test: true, props: { messge: "hey" }, warnIfNoStaticProps: true });
 
     console.warn = originalconsoleWarn;
     expect(mockConsoleWarn).toBeCalledWith(

tests/blockdom/block_attributes.test.ts

@@ -145,59 +145,3 @@ test("class attribute (with a preexisting value", async () => {
   patch(tree, block([""]));
   expect(fixture.innerHTML).toBe(`<div class="tomato"></div>`);
 });
-
-describe("properties", () => {
-  test("input with value attribute", () => {
-    // render input with initial value
-    const block = createBlock(`<input block-attribute-0="value"/>`);
-
-    const tree = block(["zucchini"]);
-    mount(tree, fixture);
-    // const bnode1 = renderToBdom(template, { v: "zucchini" });
-    // const fixture = makeTestFixture();
-    // mount(bnode1, fixture);
-    const input = fixture.querySelector("input")!;
-    expect(input.value).toBe("zucchini");
-
-    // change value manually in input, to simulate user input
-    input.value = "tomato";
-    expect(input.value).toBe("tomato");
-
-    // rerender with a different value, and patch actual dom, to check that
-    // input value was properly reset by owl
-    patch(tree, block(["potato"]));
-    expect(input.value).toBe("potato");
-  });
-
-  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", () => {
-    // render input with initial value
-    const block = createBlock(`<input type="checkbox" block-attribute-0="checked"/>`);
-
-    const tree = block([true]);
-    mount(tree, fixture);
-    expect(fixture.innerHTML).toBe(`<input type="checkbox">`);
-    const input = fixture.querySelector("input")!;
-    expect(input.checked).toBe(true);
-  });
-});

tests/blockdom/block_properties.test.ts

@@ -0,0 +1,70 @@
+import { mount, patch, createBlock } from "../../src/runtime/blockdom";
+import { makeTestFixture } from "./helpers";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+test("input with value property", () => {
+  // render input with initial value
+  const block = createBlock(`<input block-property-0="value"/>`);
+
+  const tree = block(["zucchini"]);
+  mount(tree, fixture);
+  // const bnode1 = renderToBdom(template, { v: "zucchini" });
+  // const fixture = makeTestFixture();
+  // mount(bnode1, fixture);
+  const input = fixture.querySelector("input")!;
+  expect(input.value).toBe("zucchini");
+
+  // change value manually in input, to simulate user input
+  input.value = "tomato";
+  expect(input.value).toBe("tomato");
+
+  // rerender with a different value, and patch actual dom, to check that
+  // input value was properly reset by owl
+  patch(tree, block(["potato"]));
+  expect(input.value).toBe("potato");
+});
+
+test("input with value property, and falsy value given", () => {
+  const block = createBlock(`<input block-property-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 property", () => {
+  // render input with initial value
+  const block = createBlock(`<input type="checkbox" block-property-0="checked"/>`);
+
+  const tree = block([true]);
+  mount(tree, fixture);
+  expect(fixture.innerHTML).toBe(`<input type="checkbox">`);
+  const input = fixture.querySelector("input")!;
+  expect(input.checked).toBe(true);
+});

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

@@ -28,20 +28,6 @@ exports[`attributes changing a class with t-att-class 1`] = `
 }"
 `;
 
-exports[`attributes changing an attribute with t-att- 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div block-attribute-0=\\"value\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = ctx['v'];
-    return block1([attr1]);
-  }
-}"
-`;
-
 exports[`attributes class and t-att-class should combine together 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -721,20 +707,6 @@ exports[`attributes updating classes (with obj notation) 1`] = `
 }"
 `;
 
-exports[`attributes updating property with falsy value 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = new String((ctx['v']) || \\"\\");
-    return block1([attr1]);
-  }
-}"
-`;
-
 exports[`attributes various escapes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -763,114 +735,3 @@ exports[`attributes various escapes 2 1`] = `
   }
 }"
 `;
-
-exports[`special cases for some specific html attributes/properties input of type checkbox with t-att-indeterminate 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"indeterminate\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = new Boolean(ctx['v']);
-    return block1([attr1]);
-  }
-}"
-`;
-
-exports[`special cases for some specific html attributes/properties input type= checkbox, with t-att-checked 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = new Boolean(ctx['flag']);
-    return block1([attr1]);
-  }
-}"
-`;
-
-exports[`special cases for some specific html attributes/properties input with t-att-value (patching with same value 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = new String((ctx['v']) || \\"\\");
-    return block1([attr1]);
-  }
-}"
-`;
-
-exports[`special cases for some specific html attributes/properties input with t-att-value 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = new String((ctx['v']) || \\"\\");
-    return block1([attr1]);
-  }
-}"
-`;
-
-exports[`special cases for some specific html attributes/properties input, type checkbox, with t-att-checked (patching with same value 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = new Boolean(ctx['v']);
-    return block1([attr1]);
-  }
-}"
-`;
-
-exports[`special cases for some specific html attributes/properties select with t-att-value 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<select block-attribute-0=\\"value\\"><option value=\\"potato\\">Potato</option><option value=\\"tomato\\">Tomato</option><option value=\\"onion\\">Onion</option></select>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = new String((ctx['value']) || \\"\\");
-    return block1([attr1]);
-  }
-}"
-`;
-
-exports[`special cases for some specific html attributes/properties textarea with t-att-value 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<textarea block-attribute-0=\\"value\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = new String((ctx['v']) || \\"\\");
-    return block1([attr1]);
-  }
-}"
-`;
-
-exports[`special cases for some specific html attributes/properties various boolean html attributes 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, 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>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;

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

@@ -519,8 +519,9 @@ exports[`t-on t-on, with arguments and t-call 2`] = `
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const v1 = ctx['value'];
-    let hdlr1 = [()=>this.update(v1), ctx];
+    const v1 = ctx['this'];
+    const v2 = ctx['value'];
+    let hdlr1 = [()=>v1.update(v2), ctx];
     return block1([hdlr1]);
   }
 }"

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

@@ -5,7 +5,7 @@ exports[`misc complex template 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
-  const comp1 = app.createComponent(\`SlotButton\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SlotButton\`, true, false, false, [\\"class\\",\\"slot\\"]);
   
   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\\"/>\`);
@@ -184,10 +184,10 @@ exports[`misc other complex template 1`] = `
   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);
+  const comp1 = app.createComponent(\`BundlesList\`, true, false, false, [\\"bundles\\",\\"category_custom_views\\",\\"search\\"]);
+  const comp2 = app.createComponent(\`BundlesList\`, true, false, false, [\\"bundles\\",\\"search\\"]);
   
-  let block1 = createBlock(\`<div><header><nav class=\\"navbar navbar-expand-md navbar-light bg-light\\"><a block-attribute-0=\\"href\\"><b style=\\"color:#777;\\"><block-text-1/></b></a><button type=\\"button\\" class=\\"navbar-toggler\\" data-toggle=\\"collapse\\" data-target=\\"#top_menu_collapse\\"><span class=\\"navbar-toggler-icon\\"/></button><div class=\\"collapse navbar-collapse\\" id=\\"top_menu_collapse\\" aria-expanded=\\"false\\"><ul class=\\"nav navbar-nav ml-auto text-right\\" id=\\"top_menu\\"><block-child-0/><li class=\\"nav-item divider\\"/><block-child-1/></ul><div><div class=\\"input-group input-group-sm\\"><div class=\\"input-group-prepend input-group-sm\\"><button class=\\"btn btn-default fa fa-cog\\" title=\\"Settings\\" block-handler-2=\\"click\\"/><button class=\\"btn btn-default\\" block-handler-3=\\"click\\"> More </button><block-child-2/></div><input class=\\"form-control\\" type=\\"text\\" placeholder=\\"Search\\" aria-label=\\"Search\\" name=\\"search\\" block-attribute-4=\\"value\\" block-handler-5=\\"keyup\\" block-handler-6=\\"change\\" block-ref=\\"7\\"/><div class=\\"input-group-append\\"><button class=\\"btn btn-default fa fa-eraser\\" block-handler-8=\\"click\\"/></div></div></div></div></nav></header><div class=\\"container-fluid\\" block-ref=\\"9\\"><div class=\\"row\\"><!--div class=\\"form-group col-md-6\\">
+  let 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-property-4=\\"value\\" block-handler-5=\\"keyup\\" block-handler-6=\\"change\\" block-ref=\\"7\\"/><div class=\\"input-group-append\\"><button class=\\"btn btn-default fa fa-eraser\\" block-handler-8=\\"click\\"/></div></div></div></div></nav></header><div class=\\"container-fluid\\" block-ref=\\"9\\"><div class=\\"row\\"><!--div class=\\"form-group col-md-6\\">
                       <h5>Search options</h5>
                       <input class=\\"form-control\\" type=\\"text\\" name=\\"default_search\\" id=\\"default_search\\" t-att-checked=\\"default_search\\" placeholder=\\"Default search\\"/>
       
@@ -209,17 +209,14 @@ exports[`misc other complex template 1`] = `
   let block12 = createBlock(\`<li class=\\"nav-item divider\\"/>\`);
   let block13 = createBlock(\`<li class=\\"nav-item dropdown\\"><a href=\\"#\\" class=\\"nav-link dropdown-toggle\\" data-toggle=\\"dropdown\\"><b><span><block-text-0/></span></b></a><div class=\\"dropdown-menu js_usermenu\\" role=\\"menu\\"><a class=\\"dropdown-item\\" id=\\"o_logout\\" role=\\"menuitem\\" block-attribute-1=\\"href\\">Logout</a><a class=\\"dropdown-item\\" role=\\"menuitem\\" block-attribute-2=\\"href\\">Web</a></div></li>\`);
   let block14 = createBlock(\`<select class=\\"custom-select\\" name=\\"category\\" id=\\"category\\"><block-child-0/></select>\`);
-  let block16 = createBlock(\`<option block-attribute-0=\\"value\\" block-attribute-1=\\"selected\\"><block-text-2/></option>\`);
-  let block20 = createBlock(\`<div class=\\"form-check\\"><input class=\\"form-check-input\\" type=\\"checkbox\\" block-attribute-0=\\"name\\" block-attribute-1=\\"id\\" block-attribute-2=\\"checked\\" block-attribute-3=\\"data-trigger_id\\" block-handler-4=\\"change\\"/><label class=\\"form-check-label\\" block-attribute-5=\\"for\\"><block-text-6/></label></div>\`);
+  let block16 = createBlock(\`<option block-attribute-0=\\"value\\" block-property-1=\\"selected\\"><block-text-2/></option>\`);
+  let block20 = createBlock(\`<div class=\\"form-check\\"><input class=\\"form-check-input\\" type=\\"checkbox\\" block-attribute-0=\\"name\\" block-attribute-1=\\"id\\" block-property-2=\\"checked\\" block-attribute-3=\\"data-trigger_id\\" block-handler-4=\\"change\\"/><label class=\\"form-check-label\\" block-attribute-5=\\"for\\"><block-text-6/></label></div>\`);
   let block21 = createBlock(\`<div><button class=\\"btn btn-sm btn-default\\" block-handler-0=\\"click\\">All</button><button class=\\"btn btn-sm btn-default\\" block-handler-1=\\"click\\">None</button><button class=\\"btn btn-sm btn-info\\" block-handler-2=\\"click\\">Default</button><button class=\\"btn btn-sm btn-default\\" block-handler-3=\\"click\\">Close</button></div>\`);
   let block23 = createBlock(\`<div class=\\"alert alert-warning\\" role=\\"alert\\"><block-text-0/> <!-- todo fixme--></div>\`);
   let block24 = createBlock(\`<div class=\\"mb32\\"><h1>No project</h1></div>\`);
   let block25 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = (el) => refs[\`search_input\`] = el;
-    const ref2 = (el) => refs[\`settings_menu\`] = el;
     let b2,b4,b14,b17,b22,b23,b24,b25;
     let attr1 = \`/runbot/\${ctx['project'].slug}\`;
     let txt1 = ctx['project'].name;
@@ -269,18 +266,20 @@ exports[`misc other complex template 1`] = `
         ctx[\`category\`] = v_block15[i1];
         const key1 = ctx['category'].id;
         let attr6 = ctx['category'].id;
-        let attr7 = new Boolean(ctx['category'].id==ctx['options'].active_category_id);
+        let prop1 = new Boolean(ctx['category'].id==ctx['options'].active_category_id);
         let txt5 = ctx['category'].name;
-        c_block15[i1] = withKey(block16([attr6, attr7, txt5]), key1);
+        c_block15[i1] = withKey(block16([attr6, prop1, txt5]), key1);
       }
       ctx = ctx.__proto__;
       const b15 = list(c_block15);
       b14 = block14([], [b15]);
     }
-    let attr8 = new String((ctx['search'].value) || \\"\\");
+    let prop2 = new String((ctx['search'].value) === 0 ? 0 : ((ctx['search'].value) || \\"\\"));
     let hdlr4 = [ctx['updateFilter'], ctx];
     let hdlr5 = [ctx['updateFilter'], ctx];
+    let ref1 = (el) => this.__owl__.setRef((\`search_input\`), el);
     let hdlr6 = [ctx['clearSearch'], ctx];
+    let ref2 = (el) => this.__owl__.setRef((\`settings_menu\`), el);
     if (ctx['triggers']) {
       ctx = Object.create(ctx);
       const [k_block18, v_block18, l_block18, c_block18] = prepareList(ctx['triggers']);;
@@ -289,14 +288,14 @@ exports[`misc other complex template 1`] = `
         const key1 = ctx['trigger'].id;
         let b20;
         if (!ctx['trigger'].manual&&ctx['trigger'].project_id===ctx['project'].id&&ctx['trigger'].category_id===ctx['options'].active_category_id) {
-          let attr9 = \`trigger_\${ctx['trigger'].id}\`;
-          let attr10 = \`trigger_\${ctx['trigger'].id}\`;
-          let attr11 = new Boolean(ctx['options'].trigger_display[ctx['trigger'].id]);
-          let attr12 = ctx['trigger'].id;
+          let attr7 = \`trigger_\${ctx['trigger'].id}\`;
+          let attr8 = \`trigger_\${ctx['trigger'].id}\`;
+          let prop3 = new Boolean(ctx['options'].trigger_display[ctx['trigger'].id]);
+          let attr9 = ctx['trigger'].id;
           let hdlr7 = [ctx['updateTriggerDisplay'], ctx];
-          let attr13 = \`trigger_\${ctx['trigger'].id}\`;
+          let attr10 = \`trigger_\${ctx['trigger'].id}\`;
           let txt6 = ctx['trigger'].name;
-          b20 = block20([attr9, attr10, attr11, attr12, hdlr7, attr13, txt6]);
+          b20 = block20([attr7, attr8, prop3, attr9, hdlr7, attr10, txt6]);
         }
         c_block18[i1] = withKey(multi([b20]), key1);
       }
@@ -323,7 +322,7 @@ exports[`misc other complex template 1`] = `
       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]);
+    return block1([attr1, txt1, hdlr2, hdlr3, prop2, hdlr4, hdlr5, ref1, hdlr6, ref2], [b2, b4, b14, b17, b22, b23, b24, b25]);
   }
 }"
 `;

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

@@ -0,0 +1,250 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`changing an attribute with t-att- 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['v'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`dynamic input value: falsy values 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-property-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let prop1 = new String((0) === 0 ? 0 : ((0) || \\"\\"));
+    return block1([prop1]);
+  }
+}"
+`;
+
+exports[`dynamic input value: falsy values 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-property-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let prop1 = new String((false) === 0 ? 0 : ((false) || \\"\\"));
+    return block1([prop1]);
+  }
+}"
+`;
+
+exports[`dynamic input value: falsy values 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-property-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let prop1 = new String((undefined) === 0 ? 0 : ((undefined) || \\"\\"));
+    return block1([prop1]);
+  }
+}"
+`;
+
+exports[`dynamic input value: falsy values 4`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-property-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let prop1 = new String(('') === 0 ? 0 : (('') || \\"\\"));
+    return block1([prop1]);
+  }
+}"
+`;
+
+exports[`input of type checkbox with t-att-indeterminate 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input type=\\"checkbox\\" block-property-0=\\"indeterminate\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let prop1 = new Boolean(ctx['v']);
+    return block1([prop1]);
+  }
+}"
+`;
+
+exports[`input type= checkbox, with t-att-checked 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input type=\\"checkbox\\" block-property-0=\\"checked\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let prop1 = new Boolean(ctx['flag']);
+    return block1([prop1]);
+  }
+}"
+`;
+
+exports[`input with t-att-value (patching with same value 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-property-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let prop1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
+    return block1([prop1]);
+  }
+}"
+`;
+
+exports[`input with t-att-value 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-property-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let prop1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
+    return block1([prop1]);
+  }
+}"
+`;
+
+exports[`input, type checkbox, with t-att-checked (patching with same value 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input type=\\"checkbox\\" block-property-0=\\"checked\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let prop1 = new Boolean(ctx['v']);
+    return block1([prop1]);
+  }
+}"
+`;
+
+exports[`readonly and readOnly are both interpreted as the readOnly property 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input readonly=\\"\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`readonly and readOnly are both interpreted as the readOnly property 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input readOnly=\\"\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`readonly and readOnly are both interpreted as the readOnly property 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-property-0=\\"readOnly\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let prop1 = new Boolean(ctx['val']);
+    return block1([prop1]);
+  }
+}"
+`;
+
+exports[`readonly and readOnly are both interpreted as the readOnly property 4`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-property-0=\\"readOnly\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let prop1 = new Boolean(ctx['val']);
+    return block1([prop1]);
+  }
+}"
+`;
+
+exports[`select with t-att-value 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<select block-property-0=\\"value\\"><option value=\\"potato\\">Potato</option><option value=\\"tomato\\">Tomato</option><option value=\\"onion\\">Onion</option></select>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let prop1 = new String((ctx['value']) === 0 ? 0 : ((ctx['value']) || \\"\\"));
+    return block1([prop1]);
+  }
+}"
+`;
+
+exports[`textarea with t-att-value 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<textarea block-property-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let prop1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
+    return block1([prop1]);
+  }
+}"
+`;
+
+exports[`updating property with falsy value 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-property-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let prop1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
+    return block1([prop1]);
+  }
+}"
+`;
+
+exports[`various boolean html attributes 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  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>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;

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

@@ -8,9 +8,8 @@ exports[`t-ref can get a dynamic ref on a node 1`] = `
   let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
     const v1 = ctx['id'];
-    let ref1 = (el) => refs[\`myspan\${v1}\`] = el;
+    let ref1 = (el) => this.__owl__.setRef((\`myspan\${v1}\`), el);
     return block1([ref1]);
   }
 }"
@@ -24,9 +23,8 @@ exports[`t-ref can get a dynamic ref on a node, alternate syntax 1`] = `
   let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
     const v1 = ctx['id'];
-    let ref1 = (el) => refs[\`myspan\${v1}\`] = el;
+    let ref1 = (el) => this.__owl__.setRef((\`myspan\${v1}\`), el);
     return block1([ref1]);
   }
 }"
@@ -40,8 +38,7 @@ exports[`t-ref can get a ref on a node 1`] = `
   let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = (el) => refs[\`myspan\`] = el;
+    let ref1 = (el) => this.__owl__.setRef((\`myspan\`), el);
     return block1([ref1]);
   }
 }"
@@ -70,8 +67,7 @@ exports[`t-ref ref in a t-call 2`] = `
   let block1 = createBlock(\`<div>1<span block-ref=\\"0\\"/>2</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = (el) => refs[\`name\`] = el;
+    let ref1 = (el) => this.__owl__.setRef((\`name\`), el);
     return block1([ref1]);
   }
 }"
@@ -86,10 +82,9 @@ exports[`t-ref ref in a t-if 1`] = `
   let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = (el) => refs[\`name\`] = el;
     let b2;
     if (ctx['condition']) {
+      let ref1 = (el) => this.__owl__.setRef((\`name\`), el);
       b2 = block2([ref1]);
     }
     return block1([], [b2]);
@@ -107,7 +102,6 @@ exports[`t-ref refs in a loop 1`] = `
   let block3 = createBlock(\`<div block-ref=\\"0\\"><block-text-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
     ctx = Object.create(ctx);
     const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
@@ -115,7 +109,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) => this.__owl__.setRef(((v1)), el);
       let txt1 = ctx['item'];
       c_block2[i1] = withKey(block3([ref1, txt1]), tKey_1 + key1);
     }
@@ -134,13 +128,12 @@ exports[`t-ref two refs, one in a t-if 1`] = `
   let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = (el) => refs[\`name\`] = el;
-    const ref2 = (el) => refs[\`p\`] = el;
     let b2;
     if (ctx['condition']) {
+      let ref1 = (el) => this.__owl__.setRef((\`name\`), el);
       b2 = block2([ref1]);
     }
+    let ref2 = (el) => this.__owl__.setRef((\`p\`), el);
     return block1([ref2], [b2]);
   }
 }"

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

@@ -64,3 +64,16 @@ exports[`translation support translation is done on the trimmed text, with extra
   }
 }"
 `;
+
+exports[`translation support translation works, even if initial string has inner consecutive white space 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>un mot</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;

tests/compiler/attributes.test.ts

@@ -315,54 +315,6 @@ describe("attributes", () => {
     ).toBe('<div class="a b d"></div>');
   });
 
-  test("changing an attribute with t-att-", () => {
-    // render input with initial value
-    const template = `<div t-att-value="v"/>`;
-    const bnode1 = renderToBdom(template, { v: "zucchini" });
-    const fixture = makeTestFixture();
-    mount(bnode1, fixture);
-
-    expect(fixture.innerHTML).toBe('<div value="zucchini"></div>');
-
-    const bnode2 = renderToBdom(template, { v: "potato" });
-    patch(bnode1, bnode2);
-    expect(fixture.innerHTML).toBe('<div value="potato"></div>');
-
-    const bnode3 = renderToBdom(template, { v: "" });
-    patch(bnode1, bnode3);
-    // not sure about this. maybe we want to remove the attribute?
-    expect(fixture.innerHTML).toBe('<div value=""></div>');
-  });
-
-  test("updating property with falsy value", async () => {
-    // render input with initial value
-    const template = `<input t-att-value="v"></input>`;
-    const bnode1 = renderToBdom(template, { v: false });
-    const fixture = makeTestFixture();
-    mount(bnode1, fixture);
-
-    const input = fixture.querySelector("input")!;
-    expect(input.value).toBe("");
-
-    patch(bnode1, renderToBdom(template, { v: "owl" }));
-    expect(input.value).toBe("owl");
-
-    patch(bnode1, renderToBdom(template, { v: false }));
-    expect(input.value).toBe("");
-
-    patch(bnode1, renderToBdom(template, { v: "owl" }));
-    expect(input.value).toBe("owl");
-
-    patch(bnode1, renderToBdom(template, { v: undefined }));
-    expect(input.value).toBe("");
-
-    patch(bnode1, renderToBdom(template, { v: "owl" }));
-    expect(input.value).toBe("owl");
-
-    patch(bnode1, renderToBdom(template, { v: null }));
-    expect(input.value).toBe("");
-  });
-
   test("changing a class with t-att-class", () => {
     // render input with initial value
     const template = `<div t-att-class="v"/>`;
@@ -420,134 +372,3 @@ describe("attributes", () => {
     expect(fixture.innerHTML).toBe('<div class="hoy a b"></div>');
   });
 });
-
-describe("special cases for some specific html attributes/properties", () => {
-  test("input type= checkbox, with t-att-checked", () => {
-    const template = `<input type="checkbox" t-att-checked="flag"/>`;
-    const result = renderToString(template, { flag: true });
-    expect(result).toBe(`<input type="checkbox">`);
-  });
-
-  test("various boolean html attributes", () => {
-    // will cause the template to be snapshotted
-    renderToString(`
-      <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>
-      `);
-  });
-
-  test("input with t-att-value", () => {
-    // render input with initial value
-    const template = `<input  t-att-value="v"/>`;
-    const bnode1 = renderToBdom(template, { v: "zucchini" });
-    const fixture = makeTestFixture();
-    mount(bnode1, fixture);
-    const input = fixture.querySelector("input")!;
-    expect(input.value).toBe("zucchini");
-
-    // change value manually in input, to simulate user input
-    input.value = "tomato";
-    expect(input.value).toBe("tomato");
-
-    // rerender with a different value, and patch actual dom, to check that
-    // input value was properly reset by owl
-    const bnode2 = renderToBdom(template, { v: "potato" });
-    patch(bnode1, bnode2);
-    expect(input.value).toBe("potato");
-  });
-
-  test("input with t-att-value (patching with same value", () => {
-    // render input with initial value
-    const template = `<input t-att-value="v"/>`;
-    const bnode1 = renderToBdom(template, { v: "zucchini" });
-    const fixture = makeTestFixture();
-    mount(bnode1, fixture);
-    const input = fixture.querySelector("input")!;
-    expect(input.value).toBe("zucchini");
-
-    // change value manually in input, to simulate user input
-    input.value = "tomato";
-    expect(input.value).toBe("tomato");
-
-    const bnode2 = renderToBdom(template, { v: "zucchini" });
-    patch(bnode1, bnode2);
-    expect(input.value).toBe("zucchini");
-  });
-
-  test("input, type checkbox, with t-att-checked (patching with same value", () => {
-    // render input with initial value
-    const template = `<input type="checkbox" t-att-checked="v"/>`;
-    const bnode1 = renderToBdom(template, { v: true });
-    const fixture = makeTestFixture();
-    mount(bnode1, fixture);
-    const input = fixture.querySelector("input")!;
-    expect(input.checked).toBe(true);
-
-    // change checked manually in input, to simulate user input
-    input.checked = false;
-    expect(input.checked).toBe(false);
-
-    const bnode2 = renderToBdom(template, { v: true });
-    patch(bnode1, bnode2);
-    expect(input.checked).toBe(true);
-  });
-
-  test("input of type checkbox with t-att-indeterminate", () => {
-    const template = `<input type="checkbox" t-att-indeterminate="v"/>`;
-    const bnode1 = renderToBdom(template, { v: true });
-    const fixture = makeTestFixture();
-    mount(bnode1, fixture);
-    const input = fixture.querySelector("input")!;
-    expect(input.indeterminate).toBe(true);
-  });
-
-  test("textarea with t-att-value", () => {
-    // render textarea with initial value
-    const template = `<textarea t-att-value="v"/>`;
-    const bnode1 = renderToBdom(template, { v: "zucchini" });
-    const fixture = makeTestFixture();
-    mount(bnode1, fixture);
-    const elm = fixture.querySelector("textarea")!;
-    expect(elm.value).toBe("zucchini");
-
-    // change value manually in textarea, to simulate user textarea
-    elm.value = "tomato";
-    expect(elm.value).toBe("tomato");
-
-    // rerender with a different value, and patch actual dom, to check that
-    // textarea value was properly reset by owl
-    const bnode2 = renderToBdom(template, { v: "potato" });
-    patch(bnode1, bnode2);
-    expect(elm.value).toBe("potato");
-  });
-
-  test("select with t-att-value", () => {
-    const template = `
-      <select t-att-value="value">
-        <option value="potato">Potato</option>
-        <option value="tomato">Tomato</option>
-        <option value="onion">Onion</option>
-      </select>`;
-    const bnode1 = renderToBdom(template, { value: "tomato" });
-    const fixture = makeTestFixture();
-    mount(bnode1, fixture);
-    const elm = fixture.querySelector("select")!;
-    expect(elm.value).toBe("tomato");
-
-    elm.value = "potato";
-    expect(elm.value).toBe("potato");
-
-    // rerender with a different value, and patch actual dom, to check that
-    // select value was properly reset by owl
-    const bnode2 = renderToBdom(template, { value: "onion" });
-    patch(bnode1, bnode2);
-    expect(elm.value).toBe("onion");
-  });
-});

tests/compiler/event_handling.test.ts

@@ -284,6 +284,9 @@ describe("t-on", () => {
         expect(this).toBe(owner);
         expect(val).toBe(444);
       },
+      get this() {
+        return owner;
+      },
       value: 444,
     };
 

tests/compiler/parser.test.ts

@@ -26,10 +26,10 @@ describe("qweb parser", () => {
     });
   });
 
-  test("white spaces are condensed into a single space", async () => {
+  test("white spaces are maintained", async () => {
     expect(parse("   ")).toEqual({
       type: ASTType.Text,
-      value: " ",
+      value: "   ",
     });
   });
 

tests/compiler/properties.test.ts

@@ -0,0 +1,213 @@
+import { mount, patch } from "../../src/runtime/blockdom";
+import { makeTestFixture, renderToBdom, renderToString, snapshotEverything } from "../helpers";
+
+snapshotEverything();
+test("changing an attribute with t-att-", () => {
+  // render input with initial value
+  const template = `<div t-att-value="v"/>`;
+  const bnode1 = renderToBdom(template, { v: "zucchini" });
+  const fixture = makeTestFixture();
+  mount(bnode1, fixture);
+
+  expect(fixture.innerHTML).toBe('<div value="zucchini"></div>');
+
+  const bnode2 = renderToBdom(template, { v: "potato" });
+  patch(bnode1, bnode2);
+  expect(fixture.innerHTML).toBe('<div value="potato"></div>');
+
+  const bnode3 = renderToBdom(template, { v: "" });
+  patch(bnode1, bnode3);
+  // not sure about this. maybe we want to remove the attribute?
+  expect(fixture.innerHTML).toBe('<div value=""></div>');
+});
+
+test("dynamic input value: falsy values", () => {
+  // 0 doesn't fall back to empty string
+  expect(renderToBdom(`<input t-att-value="0"/>`)).toEqual({ data: [new String("0")] });
+  expect(renderToBdom(`<input t-att-value="false"/>`)).toEqual({ data: [new String("")] });
+  expect(renderToBdom(`<input t-att-value="undefined"/>`)).toEqual({ data: [new String("")] });
+  expect(renderToBdom(`<input t-att-value="''"/>`)).toEqual({ data: [new String("")] });
+});
+
+test("updating property with falsy value", async () => {
+  // render input with initial value
+  const template = `<input t-att-value="v"></input>`;
+  const bnode1 = renderToBdom(template, { v: false });
+  const fixture = makeTestFixture();
+  mount(bnode1, fixture);
+
+  const input = fixture.querySelector("input")!;
+  expect(input.value).toBe("");
+
+  patch(bnode1, renderToBdom(template, { v: "owl" }));
+  expect(input.value).toBe("owl");
+
+  patch(bnode1, renderToBdom(template, { v: false }));
+  expect(input.value).toBe("");
+
+  patch(bnode1, renderToBdom(template, { v: "owl" }));
+  expect(input.value).toBe("owl");
+
+  patch(bnode1, renderToBdom(template, { v: undefined }));
+  expect(input.value).toBe("");
+
+  patch(bnode1, renderToBdom(template, { v: "owl" }));
+  expect(input.value).toBe("owl");
+
+  patch(bnode1, renderToBdom(template, { v: null }));
+  expect(input.value).toBe("");
+});
+
+test("input type= checkbox, with t-att-checked", () => {
+  const template = `<input type="checkbox" t-att-checked="flag"/>`;
+  const result = renderToString(template, { flag: true });
+  expect(result).toBe(`<input type="checkbox">`);
+});
+
+test("various boolean html attributes", () => {
+  // will cause the template to be snapshotted
+  renderToString(`
+      <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>
+      `);
+});
+
+test("input with t-att-value", () => {
+  // render input with initial value
+  const template = `<input  t-att-value="v"/>`;
+  const bnode1 = renderToBdom(template, { v: "zucchini" });
+  const fixture = makeTestFixture();
+  mount(bnode1, fixture);
+  const input = fixture.querySelector("input")!;
+  expect(input.value).toBe("zucchini");
+
+  // change value manually in input, to simulate user input
+  input.value = "tomato";
+  expect(input.value).toBe("tomato");
+
+  // rerender with a different value, and patch actual dom, to check that
+  // input value was properly reset by owl
+  const bnode2 = renderToBdom(template, { v: "potato" });
+  patch(bnode1, bnode2);
+  expect(input.value).toBe("potato");
+});
+
+test("input with t-att-value (patching with same value", () => {
+  // render input with initial value
+  const template = `<input t-att-value="v"/>`;
+  const bnode1 = renderToBdom(template, { v: "zucchini" });
+  const fixture = makeTestFixture();
+  mount(bnode1, fixture);
+  const input = fixture.querySelector("input")!;
+  expect(input.value).toBe("zucchini");
+
+  // change value manually in input, to simulate user input
+  input.value = "tomato";
+  expect(input.value).toBe("tomato");
+
+  const bnode2 = renderToBdom(template, { v: "zucchini" });
+  patch(bnode1, bnode2);
+  expect(input.value).toBe("zucchini");
+});
+
+test("input, type checkbox, with t-att-checked (patching with same value", () => {
+  // render input with initial value
+  const template = `<input type="checkbox" t-att-checked="v"/>`;
+  const bnode1 = renderToBdom(template, { v: true });
+  const fixture = makeTestFixture();
+  mount(bnode1, fixture);
+  const input = fixture.querySelector("input")!;
+  expect(input.checked).toBe(true);
+
+  // change checked manually in input, to simulate user input
+  input.checked = false;
+  expect(input.checked).toBe(false);
+
+  const bnode2 = renderToBdom(template, { v: true });
+  patch(bnode1, bnode2);
+  expect(input.checked).toBe(true);
+});
+
+test("input of type checkbox with t-att-indeterminate", () => {
+  const template = `<input type="checkbox" t-att-indeterminate="v"/>`;
+  const bnode1 = renderToBdom(template, { v: true });
+  const fixture = makeTestFixture();
+  mount(bnode1, fixture);
+  const input = fixture.querySelector("input")!;
+  expect(input.indeterminate).toBe(true);
+});
+
+test("textarea with t-att-value", () => {
+  // render textarea with initial value
+  const template = `<textarea t-att-value="v"/>`;
+  const bnode1 = renderToBdom(template, { v: "zucchini" });
+  const fixture = makeTestFixture();
+  mount(bnode1, fixture);
+  const elm = fixture.querySelector("textarea")!;
+  expect(elm.value).toBe("zucchini");
+
+  // change value manually in textarea, to simulate user textarea
+  elm.value = "tomato";
+  expect(elm.value).toBe("tomato");
+
+  // rerender with a different value, and patch actual dom, to check that
+  // textarea value was properly reset by owl
+  const bnode2 = renderToBdom(template, { v: "potato" });
+  patch(bnode1, bnode2);
+  expect(elm.value).toBe("potato");
+});
+
+test("select with t-att-value", () => {
+  const template = `
+      <select t-att-value="value">
+        <option value="potato">Potato</option>
+        <option value="tomato">Tomato</option>
+        <option value="onion">Onion</option>
+      </select>`;
+  const bnode1 = renderToBdom(template, { value: "tomato" });
+  const fixture = makeTestFixture();
+  mount(bnode1, fixture);
+  const elm = fixture.querySelector("select")!;
+  expect(elm.value).toBe("tomato");
+
+  elm.value = "potato";
+  expect(elm.value).toBe("potato");
+
+  // rerender with a different value, and patch actual dom, to check that
+  // select value was properly reset by owl
+  const bnode2 = renderToBdom(template, { value: "onion" });
+  patch(bnode1, bnode2);
+  expect(elm.value).toBe("onion");
+});
+
+test("readonly and readOnly are both interpreted as the readOnly property", () => {
+  // render input with initial value
+  const staticTemplates = [`<input readonly=""/>`, `<input readOnly=""/>`];
+  for (let template of staticTemplates) {
+    const fixture = makeTestFixture();
+    const bnode1 = renderToBdom(template);
+    mount(bnode1, fixture);
+    const input = fixture.querySelector("input")!;
+    expect(input.readOnly).toBe(true);
+  }
+
+  const dynamicTemplates = [`<input t-att-readonly="val"/>`, `<input t-att-readOnly="val"/>`];
+  for (let template of dynamicTemplates) {
+    const fixture = makeTestFixture();
+    const bnode1 = renderToBdom(template, { val: true });
+    mount(bnode1, fixture);
+    const input = fixture.querySelector("input")!;
+    expect(input.readOnly).toBe(true);
+
+    const bnode2 = renderToBdom(template, { val: false });
+    patch(bnode1, bnode2);
+    expect(input.readOnly).toBe(false);
+  }
+});

tests/compiler/t_ref.test.ts

@@ -2,6 +2,17 @@ import { TemplateSet } from "../../src/runtime/template_set";
 import { mount } from "../../src/runtime/blockdom";
 import { renderToBdom, snapshotEverything } from "../helpers";
 
+function mockNode() {
+  return {
+    refs: {} as { [key: string]: HTMLElement | null },
+    setRef(name: string, value: HTMLElement | null) {
+      if (value) {
+        this.refs[name] = value;
+      }
+    },
+  };
+}
+
 snapshotEverything();
 
 // -----------------------------------------------------------------------------
@@ -11,29 +22,29 @@ snapshotEverything();
 describe("t-ref", () => {
   test("can get a ref on a node", () => {
     const template = `<div><span t-ref="myspan"/></div>`;
-    const refs: any = {};
-    const bdom = renderToBdom(template, { __owl__: { refs } });
-    expect(refs).toEqual({});
+    const node = mockNode();
+    const bdom = renderToBdom(template, { __owl__: node });
+    expect(node.refs).toEqual({});
     mount(bdom, document.createElement("div"));
-    expect(refs.myspan.tagName).toBe("SPAN");
+    expect(node.refs.myspan!.tagName).toBe("SPAN");
   });
 
   test("can get a dynamic ref on a node", () => {
     const template = `<div><span t-ref="myspan{{id}}"/></div>`;
-    const refs: any = {};
-    const bdom = renderToBdom(template, { id: 3, __owl__: { refs } });
-    expect(refs).toEqual({});
+    const node = mockNode();
+    const bdom = renderToBdom(template, { id: 3, __owl__: node });
+    expect(node.refs).toEqual({});
     mount(bdom, document.createElement("div"));
-    expect(refs.myspan3.tagName).toBe("SPAN");
+    expect(node.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({});
+    const node = mockNode();
+    const bdom = renderToBdom(template, { id: 3, __owl__: node });
+    expect(node.refs).toEqual({});
     mount(bdom, document.createElement("div"));
-    expect(refs.myspan3.tagName).toBe("SPAN");
+    expect(node.refs.myspan3!.tagName).toBe("SPAN");
   });
 
   test("refs in a loop", () => {
@@ -42,11 +53,11 @@ describe("t-ref", () => {
           <div t-ref="{{item}}" t-key="item"><t t-esc="item"/></div>
         </t>
       </div>`;
-    const refs: any = {};
-    const bdom = renderToBdom(template, { items: [1, 2, 3], __owl__: { refs } });
-    expect(refs).toEqual({});
+    const node = mockNode();
+    const bdom = renderToBdom(template, { items: [1, 2, 3], __owl__: node });
+    expect(node.refs).toEqual({});
     mount(bdom, document.createElement("div"));
-    expect(Object.keys(refs)).toEqual(["1", "2", "3"]);
+    expect(Object.keys(node.refs)).toEqual(["1", "2", "3"]);
   });
 
   test("ref in a t-if", () => {
@@ -57,22 +68,23 @@ describe("t-ref", () => {
         </t>
       </div>`;
 
-    const refs: any = {};
+    const node = mockNode();
     // false
-    const bdom = renderToBdom(template, { condition: false, __owl__: { refs } });
-    expect(refs).toEqual({});
+    const bdom = renderToBdom(template, { condition: false, __owl__: node });
+    expect(node.refs).toEqual({});
     mount(bdom, document.createElement("div"));
-    expect(refs).toEqual({});
+    expect(node.refs).toEqual({});
 
     // true now
-    const bdom2 = renderToBdom(template, { condition: true, __owl__: { refs } });
+    const bdom2 = renderToBdom(template, { condition: true, __owl__: node });
     bdom.patch(bdom2, true);
-    expect(refs.name.tagName).toBe("SPAN");
+    expect(node.refs.name!.tagName).toBe("SPAN");
 
     // false again
-    const bdom3 = renderToBdom(template, { condition: false, __owl__: { refs } });
+    const bdom3 = renderToBdom(template, { condition: false, __owl__: node });
     bdom.patch(bdom3, true);
-    expect(refs).toEqual({ name: null });
+    const span = node.refs.name;
+    expect(span!.ownerDocument.contains(span)).toBe(false);
   });
 
   test("two refs, one in a t-if", () => {
@@ -84,40 +96,41 @@ describe("t-ref", () => {
         <p t-ref="p"/>
       </div>`;
 
-    const refs: any = {};
+    const node = mockNode();
 
     // false
-    const bdom = renderToBdom(template, { condition: false, __owl__: { refs } });
-    expect(Object.keys(refs)).toEqual([]);
+    const bdom = renderToBdom(template, { condition: false, __owl__: node });
+    expect(Object.keys(node.refs)).toEqual([]);
     mount(bdom, document.createElement("div"));
-    expect(Object.keys(refs)).toEqual(["p"]);
+    expect(Object.keys(node.refs)).toEqual(["p"]);
 
     // true now
-    const bdom2 = renderToBdom(template, { condition: true, __owl__: { refs } });
+    const bdom2 = renderToBdom(template, { condition: true, __owl__: node });
     bdom.patch(bdom2, true);
-    expect(Object.keys(refs)).toEqual(["p", "name"]);
+    expect(Object.keys(node.refs)).toEqual(["p", "name"]);
 
     // false again
-    const bdom3 = renderToBdom(template, { condition: false, __owl__: { refs } });
+    const bdom3 = renderToBdom(template, { condition: false, __owl__: node });
     bdom.patch(bdom3, true);
-    expect(Object.keys(refs)).toEqual(["p", "name"]);
-    expect(refs.name).toBeNull();
+    expect(Object.keys(node.refs)).toEqual(["p", "name"]);
+    const span = node.refs.name;
+    expect(span!.ownerDocument.contains(span)).toBe(false);
   });
 
   test("ref in a t-call", () => {
     const main = `<div><t t-call="sub"/></div>`;
     const sub = `<div>1<span t-ref="name"/>2</div>`;
 
-    const refs: any = {};
+    const node = mockNode();
 
     const app = new TemplateSet();
     app.addTemplate("main", main);
     app.addTemplate("sub", sub);
 
-    const comp = { __owl__: { refs } };
+    const comp = { __owl__: node };
     const bdom = app.getTemplate("main").call(comp, comp, {});
     mount(bdom, document.createElement("div"));
 
-    expect(refs.name.tagName).toBe("SPAN");
+    expect(node.refs.name!.tagName).toBe("SPAN");
   });
 });

tests/compiler/translation.test.ts

@@ -88,4 +88,16 @@ describe("translation support", () => {
     expect(fixture.innerHTML).toBe("<div> mot </div>");
     expect(translateFn).toHaveBeenCalledWith("word");
   });
+
+  test("translation works, even if initial string has inner consecutive white space", async () => {
+    class SomeComponent extends Component {
+      static template = xml`<div>some  word</div>`;
+    }
+
+    const translateFn = jest.fn((expr: string) => (expr === "some  word" ? "un mot" : expr));
+
+    await mount(SomeComponent, fixture, { translateFn });
+    expect(translateFn).toHaveBeenCalledWith("some  word");
+    expect(fixture.innerHTML).toBe("<div>un mot</div>");
+  });
 });

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

@@ -4,11 +4,11 @@ exports[`basics GrandChild display is controlled by its GrandParent 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(null, false, false, false, false);
+  const comp1 = app.createComponent(null, false, false, false, [\\"displayGrandChild\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     const Comp1 = ctx['myComp'];
-    return toggler(Comp1, comp1({displayGrandChild: ctx['displayGrandChild']}, key + \`__1\`, node, this, Comp1));
+    return toggler(Comp1, comp1({displayGrandChild: ctx['displayGrandChild']}, (Comp1).name + key + \`__1\`, node, this, Comp1));
   }
 }"
 `;
@@ -17,7 +17,7 @@ exports[`basics GrandChild display is controlled by its GrandParent 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
+  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
@@ -63,7 +63,7 @@ exports[`basics a class component inside a class component, no external dom 1`]
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -101,7 +101,7 @@ exports[`basics a component inside a component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
@@ -145,7 +145,7 @@ exports[`basics can handle empty props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -265,7 +265,7 @@ exports[`basics child can be updated 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].counter}, key + \`__1\`, node, this, null);
@@ -302,7 +302,7 @@ exports[`basics class parent, class child component with props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: 42}, key + \`__1\`, node, this, null);
@@ -328,7 +328,7 @@ exports[`basics component children doesn't leak (if case) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
@@ -357,7 +357,7 @@ exports[`basics component children doesn't leak (t-key case) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['keyVar'];
@@ -424,7 +424,7 @@ exports[`basics higher order components parent and child 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"child\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({child: ctx['state'].child}, key + \`__1\`, node, this, null);
@@ -436,8 +436,8 @@ exports[`basics higher order components parent and child 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ChildA\`, true, false, false, true);
-  const comp2 = app.createComponent(\`ChildB\`, true, false, false, true);
+  const comp1 = app.createComponent(\`ChildA\`, true, false, false, []);
+  const comp2 = app.createComponent(\`ChildB\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -482,8 +482,8 @@ exports[`basics list of two sub components inside other nodes 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
-  const comp1 = app.createComponent(\`SubWidget\`, true, false, false, true);
-  const comp2 = app.createComponent(\`SubWidget\`, true, false, false, true);
+  const comp1 = app.createComponent(\`SubWidget\`, true, false, false, []);
+  const comp2 = app.createComponent(\`SubWidget\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
@@ -521,7 +521,7 @@ exports[`basics parent, child and grandchild 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -533,7 +533,7 @@ exports[`basics parent, child and grandchild 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
+  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -597,8 +597,8 @@ exports[`basics reconciliation alg is not confused in some specific situation 1`
 "function anonymous(app, bdom, helpers
 ) {
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -628,7 +628,7 @@ exports[`basics rerendering a widget with a sub widget 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Counter\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Counter\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -656,8 +656,8 @@ exports[`basics same t-keys in two different places 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
-  const comp2 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"blip\\"]);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, [\\"blip\\"]);
   
   let block1 = createBlock(\`<div><div><block-child-0/></div><div><block-child-1/></div></div>\`);
   
@@ -730,7 +730,7 @@ exports[`basics sub components between t-ifs 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/><span><block-child-2/></span><block-child-3/></div>\`);
   let block2 = createBlock(\`<h1>hey</h1>\`);
@@ -770,7 +770,7 @@ exports[`basics t-elif works with t-component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   let block2 = createBlock(\`<div>somediv</div>\`);
@@ -804,7 +804,7 @@ exports[`basics t-else with empty string works with t-component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   let block2 = createBlock(\`<div>somediv</div>\`);
@@ -838,7 +838,7 @@ exports[`basics t-else works with t-component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   let block2 = createBlock(\`<div>somediv</div>\`);
@@ -872,7 +872,7 @@ exports[`basics t-if works with t-component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -903,8 +903,8 @@ exports[`basics t-key on a component with t-if, and a sibling component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  const comp2 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-child-1/></div>\`);
   
@@ -937,7 +937,7 @@ exports[`basics text after a conditional component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><span><block-text-0/></span></div>\`);
   
@@ -969,7 +969,7 @@ exports[`basics three level of components with collapsing root nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -981,7 +981,7 @@ exports[`basics three level of components with collapsing root nodes 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
+  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -1006,8 +1006,8 @@ exports[`basics two child components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = comp1({}, key + \`__1\`, node, this, null);
@@ -1034,7 +1034,7 @@ exports[`basics update props of component without concrete own node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, true, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1050,7 +1050,7 @@ exports[`basics update props of component without concrete own node 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Custom\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Custom\`, true, false, false, [\\"key\\",\\"subKey\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['props'].subKey;
@@ -1097,7 +1097,7 @@ exports[`basics updating widget immediately 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"flag\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({flag: ctx['state'].flag}, key + \`__1\`, node, this, null);
@@ -1127,7 +1127,7 @@ exports[`basics widget after a t-foreach 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
-  const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, true);
+  const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -1165,7 +1165,7 @@ exports[`basics zero or one child components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
@@ -1246,7 +1246,7 @@ exports[`support svg components add proper namespace to svg 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`GComp\`, true, false, false, true);
+  const comp1 = app.createComponent(\`GComp\`, true, false, false, []);
   
   let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
   

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

@@ -5,7 +5,7 @@ exports[`Cascading renders after microtaskTick 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = comp1({}, key + \`__1\`, node, this, null);
@@ -28,7 +28,7 @@ exports[`Cascading renders after microtaskTick 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
-  const comp1 = app.createComponent(\`Element\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Element\`, true, false, false, [\\"id\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -58,7 +58,7 @@ exports[`another scenario with delayed rendering 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, false);
+  const comp1 = app.createComponent(\`B\`, true, false, false, [\\"value\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -75,7 +75,7 @@ exports[`another scenario with delayed rendering 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`C\`, true, false, false, true);
+  const comp1 = app.createComponent(\`C\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['props'].value);
@@ -117,7 +117,7 @@ exports[`calling render in destroy 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, false);
+  const comp1 = app.createComponent(\`B\`, true, false, false, [\\"fromA\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
@@ -130,7 +130,7 @@ exports[`calling render in destroy 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`C\`, true, false, false, false);
+  const comp1 = app.createComponent(\`C\`, true, false, false, [\\"fromA\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({fromA: ctx['props'].fromA}, key + \`__1\`, node, this, null);
@@ -170,7 +170,7 @@ exports[`changing state before first render does not trigger a render (with pare
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`TestW\`, true, false, false, true);
+  const comp1 = app.createComponent(\`TestW\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -216,7 +216,7 @@ exports[`concurrent renderings scenario 1 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"fromA\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -231,7 +231,7 @@ exports[`concurrent renderings scenario 1 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, [\\"fromA\\",\\"fromB\\"]);
   
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
@@ -261,7 +261,7 @@ exports[`concurrent renderings scenario 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"fromA\\"]);
   
   let block1 = createBlock(\`<div><block-text-0/><block-child-0/></div>\`);
   
@@ -277,7 +277,7 @@ exports[`concurrent renderings scenario 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, [\\"fromA\\",\\"fromB\\"]);
   
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
@@ -307,7 +307,7 @@ exports[`concurrent renderings scenario 2bis 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"fromA\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -322,7 +322,7 @@ exports[`concurrent renderings scenario 2bis 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, [\\"fromA\\",\\"fromB\\"]);
   
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
@@ -352,7 +352,7 @@ exports[`concurrent renderings scenario 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"fromA\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -367,7 +367,7 @@ exports[`concurrent renderings scenario 3 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, [\\"fromA\\"]);
   
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
@@ -382,7 +382,7 @@ exports[`concurrent renderings scenario 3 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentD\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ComponentD\`, true, false, false, [\\"fromA\\",\\"fromC\\"]);
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
@@ -412,7 +412,7 @@ exports[`concurrent renderings scenario 4 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"fromA\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -427,7 +427,7 @@ exports[`concurrent renderings scenario 4 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, [\\"fromA\\"]);
   
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
@@ -442,7 +442,7 @@ exports[`concurrent renderings scenario 4 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentD\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ComponentD\`, true, false, false, [\\"fromA\\",\\"fromC\\"]);
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
@@ -472,7 +472,7 @@ exports[`concurrent renderings scenario 5 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"fromA\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -501,7 +501,7 @@ exports[`concurrent renderings scenario 6 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"fromA\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -530,7 +530,7 @@ exports[`concurrent renderings scenario 7 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"fromA\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -560,7 +560,7 @@ exports[`concurrent renderings scenario 8 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"fromA\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -590,8 +590,8 @@ exports[`concurrent renderings scenario 9 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
-  const comp2 = app.createComponent(\`ComponentC\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"fromA\\"]);
+  const comp2 = app.createComponent(\`ComponentC\`, true, false, false, [\\"fromA\\"]);
   
   let block1 = createBlock(\`<div><block-text-0/><block-child-0/><block-child-1/></div>\`);
   
@@ -622,7 +622,7 @@ exports[`concurrent renderings scenario 9 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentD\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ComponentD\`, true, false, false, [\\"fromA\\",\\"fromC\\"]);
   
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
@@ -652,7 +652,7 @@ exports[`concurrent renderings scenario 10 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, [\\"value\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -667,7 +667,7 @@ exports[`concurrent renderings scenario 10 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, [\\"value\\"]);
   
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
@@ -699,7 +699,7 @@ exports[`concurrent renderings scenario 11 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -729,7 +729,7 @@ exports[`concurrent renderings scenario 12 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -758,8 +758,8 @@ exports[`concurrent renderings scenario 13 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -792,7 +792,7 @@ exports[`concurrent renderings scenario 14 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, false);
+  const comp1 = app.createComponent(\`B\`, true, false, false, [\\"fromA\\"]);
   
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
@@ -807,7 +807,7 @@ exports[`concurrent renderings scenario 14 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`C\`, true, false, false, false);
+  const comp1 = app.createComponent(\`C\`, true, false, false, [\\"fromB\\",\\"fromA\\"]);
   
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
@@ -838,7 +838,7 @@ exports[`concurrent renderings scenario 15 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, false);
+  const comp1 = app.createComponent(\`B\`, true, false, false, [\\"fromA\\"]);
   
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
@@ -853,7 +853,7 @@ exports[`concurrent renderings scenario 15 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`C\`, true, false, false, false);
+  const comp1 = app.createComponent(\`C\`, true, false, false, [\\"fromB\\",\\"fromA\\"]);
   
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
@@ -884,7 +884,7 @@ exports[`concurrent renderings scenario 16 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, false);
+  const comp1 = app.createComponent(\`B\`, true, false, false, [\\"fromA\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, this, null);
@@ -896,7 +896,7 @@ exports[`concurrent renderings scenario 16 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`C\`, true, false, false, false);
+  const comp1 = app.createComponent(\`C\`, true, false, false, [\\"fromB\\",\\"fromA\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({fromB: ctx['state'].fromB,fromA: ctx['props'].fromA}, key + \`__1\`, node, this, null);
@@ -908,7 +908,7 @@ exports[`concurrent renderings scenario 16 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`D\`, true, false, false, true);
+  const comp1 = app.createComponent(\`D\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3,b4,b5,b6,b7,b8;
@@ -941,8 +941,8 @@ exports[`creating two async components, scenario 1 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ChildA\`, true, false, false, true);
-  const comp2 = app.createComponent(\`ChildB\`, true, false, false, true);
+  const comp1 = app.createComponent(\`ChildA\`, true, false, false, []);
+  const comp2 = app.createComponent(\`ChildB\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -988,8 +988,8 @@ exports[`creating two async components, scenario 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
-  const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ChildA\`, true, false, false, [\\"val\\"]);
+  const comp2 = app.createComponent(\`ChildB\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -1036,8 +1036,8 @@ exports[`creating two async components, scenario 3 (patching in the same frame)
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
-  const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ChildA\`, true, false, false, [\\"val\\"]);
+  const comp2 = app.createComponent(\`ChildB\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -1084,7 +1084,7 @@ exports[`delay willUpdateProps 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
@@ -1110,7 +1110,7 @@ exports[`delay willUpdateProps with rendering grandchild 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Parent\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Parent\`, true, false, false, [\\"state\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({state: ctx['state']}, key + \`__1\`, node, this, null);
@@ -1122,8 +1122,8 @@ exports[`delay willUpdateProps with rendering grandchild 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`DelayedChild\`, true, false, false, false);
-  const comp2 = app.createComponent(\`ReactiveChild\`, true, false, false, true);
+  const comp1 = app.createComponent(\`DelayedChild\`, true, false, false, [\\"value\\"]);
+  const comp2 = app.createComponent(\`ReactiveChild\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = comp1({value: ctx['props'].state.value}, key + \`__1\`, node, this, null);
@@ -1164,7 +1164,7 @@ exports[`delayed fiber does not get rendered if it was cancelled 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, true);
+  const comp1 = app.createComponent(\`B\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(\`A\`);
@@ -1178,7 +1178,7 @@ exports[`delayed fiber does not get rendered if it was cancelled 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`C\`, true, false, false, true);
+  const comp1 = app.createComponent(\`C\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(\`B\`);
@@ -1192,7 +1192,7 @@ exports[`delayed fiber does not get rendered if it was cancelled 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`D\`, true, false, false, true);
+  const comp1 = app.createComponent(\`D\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(\`C\`);
@@ -1213,11 +1213,50 @@ exports[`delayed fiber does not get rendered if it was cancelled 4`] = `
 }"
 `;
 
+exports[`delayed render does not go through when t-component value changed 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(null, false, false, false, []);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`A\`);
+    const Comp1 = ctx['state'].component;
+    const b3 = toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`delayed render does not go through when t-component value changed 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`B\`);
+    const b3 = text(ctx['state'].val);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`delayed render does not go through when t-component value changed 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`C\`);
+  }
+}"
+`;
+
 exports[`delayed rendering, but then initial rendering is cancelled by yet another render 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, false);
+  const comp1 = app.createComponent(\`B\`, true, false, false, [\\"value\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
@@ -1229,7 +1268,7 @@ exports[`delayed rendering, but then initial rendering is cancelled by yet anoth
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`C\`, true, false, false, false);
+  const comp1 = app.createComponent(\`C\`, true, false, false, [\\"value\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].someValue+ctx['props'].value}, key + \`__1\`, node, this, null);
@@ -1241,7 +1280,7 @@ exports[`delayed rendering, but then initial rendering is cancelled by yet anoth
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`D\`, true, false, false, true);
+  const comp1 = app.createComponent(\`D\`, true, false, false, []);
   
   let block3 = createBlock(\`<p><block-text-0/></p>\`);
   
@@ -1273,7 +1312,7 @@ exports[`delayed rendering, destruction, stuff happens 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, false);
+  const comp1 = app.createComponent(\`B\`, true, false, false, [\\"value\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(\`A\`);
@@ -1287,7 +1326,7 @@ exports[`delayed rendering, destruction, stuff happens 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`C\`, true, false, false, false);
+  const comp1 = app.createComponent(\`C\`, true, false, false, [\\"value\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -1304,7 +1343,7 @@ exports[`delayed rendering, destruction, stuff happens 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`D\`, true, false, false, true);
+  const comp1 = app.createComponent(\`D\`, true, false, false, []);
   
   let block4 = createBlock(\`<p><block-text-0/></p>\`);
   
@@ -1339,7 +1378,7 @@ exports[`delayed rendering, reusing fiber and stuff 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, false);
+  const comp1 = app.createComponent(\`B\`, true, false, false, [\\"value\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
@@ -1351,7 +1390,7 @@ exports[`delayed rendering, reusing fiber and stuff 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`C\`, true, false, false, true);
+  const comp1 = app.createComponent(\`C\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['props'].value);
@@ -1380,7 +1419,7 @@ exports[`delayed rendering, reusing fiber then component is destroyed and  stuff
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, false);
+  const comp1 = app.createComponent(\`B\`, true, false, false, [\\"value\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -1397,7 +1436,7 @@ exports[`delayed rendering, reusing fiber then component is destroyed and  stuff
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`C\`, true, false, false, true);
+  const comp1 = app.createComponent(\`C\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['props'].value);
@@ -1426,7 +1465,7 @@ exports[`delayed rendering, then component is destroyed and  stuff 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, false);
+  const comp1 = app.createComponent(\`B\`, true, false, false, [\\"value\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
@@ -1438,7 +1477,7 @@ exports[`delayed rendering, then component is destroyed and  stuff 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`C\`, true, false, false, true);
+  const comp1 = app.createComponent(\`C\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -1470,8 +1509,8 @@ exports[`destroyed component causes other soon to be destroyed component to rere
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, false);
-  const comp2 = app.createComponent(\`C\`, true, false, false, false);
+  const comp1 = app.createComponent(\`B\`, true, false, false, [\\"value\\"]);
+  const comp2 = app.createComponent(\`C\`, true, false, false, [\\"value\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -1512,7 +1551,7 @@ exports[`destroying/recreating a subcomponent, other scenario 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -1540,7 +1579,7 @@ exports[`destroying/recreating a subwidget with different props (if start is not
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1572,7 +1611,7 @@ exports[`parent and child rendered at exact same time 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
@@ -1595,7 +1634,7 @@ exports[`properly behave when destroyed/unmounted while rendering  1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1613,7 +1652,7 @@ exports[`properly behave when destroyed/unmounted while rendering  2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubChild\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubChild\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1641,7 +1680,7 @@ exports[`rendering component again in next microtick 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><button block-handler-0=\\"click\\">Click</button><block-child-0/></div>\`);
   
@@ -1673,7 +1712,7 @@ exports[`rendering parent twice, with different props on child and stuff 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
@@ -1696,8 +1735,8 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 1`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, false);
-  const comp2 = app.createComponent(\`D\`, true, false, false, true);
+  const comp1 = app.createComponent(\`B\`, true, false, false, [\\"value\\"]);
+  const comp2 = app.createComponent(\`D\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(\`A\`);
@@ -1712,7 +1751,7 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 2`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`C\`, true, false, false, true);
+  const comp1 = app.createComponent(\`C\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -1764,7 +1803,7 @@ exports[`t-foreach with dynamic async component 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
-  const comp1 = app.createComponent(null, false, false, false, false);
+  const comp1 = app.createComponent(null, false, false, false, [\\"key\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -1776,7 +1815,7 @@ exports[`t-foreach with dynamic async component 1`] = `
       let b3;
       if (ctx['arr']) {
         const Comp1 = ctx['myComp'];
-        b3 = toggler(Comp1, comp1({key: ctx['arr'][0]}, key + \`__1__\${key1}\`, node, this, Comp1));
+        b3 = toggler(Comp1, comp1({key: ctx['arr'][0]}, (Comp1).name + key + \`__1__\${key1}\`, node, this, Comp1));
       }
       c_block1[i1] = withKey(multi([b3]), key1);
     }
@@ -1803,14 +1842,14 @@ exports[`t-key on dom node having a component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(null, false, false, false, false);
+  const comp1 = app.createComponent(null, false, false, false, [\\"key\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
     const Comp1 = ctx['myComp'];
-    const b2 = toggler(tKey_1, toggler(Comp1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, this, Comp1)));
+    const b2 = toggler(tKey_1, toggler(Comp1, comp1({key: ctx['key']}, (Comp1).name + tKey_1 + key + \`__1\`, node, this, Comp1)));
     return toggler(tKey_1, block1([], [b2]));
   }
 }"
@@ -1831,12 +1870,12 @@ exports[`t-key on dynamic async component (toggler is never patched) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(null, false, false, false, false);
+  const comp1 = app.createComponent(null, false, false, false, [\\"key\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
     const Comp1 = ctx['myComp'];
-    return toggler(tKey_1, toggler(Comp1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, this, Comp1)));
+    return toggler(tKey_1, toggler(Comp1, comp1({key: ctx['key']}, (Comp1).name + tKey_1 + key + \`__1\`, node, this, Comp1)));
   }
 }"
 `;
@@ -1859,7 +1898,7 @@ exports[`two renderings initiated between willPatch and patched 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Panel\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Panel\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-0/></div>\`);
   
@@ -1893,7 +1932,7 @@ exports[`two sequential renderings before an animation frame 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
@@ -1916,7 +1955,7 @@ exports[`update a sub-component twice in the same frame 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ChildA\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1945,7 +1984,7 @@ exports[`update a sub-component twice in the same frame, 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ChildA\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   

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

@@ -4,7 +4,7 @@ exports[`basics display a nice error if a component is not a component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, true);
+  const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -16,7 +16,7 @@ exports[`basics display a nice error if it cannot find component (in dev mode) 1
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SomeMispelledComponent\`, true, false, false, true);
+  const comp1 = app.createComponent(\`SomeMispelledComponent\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
@@ -30,7 +30,7 @@ exports[`basics display a nice error if it cannot find component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SomeMispelledComponent\`, true, false, false, true);
+  const comp1 = app.createComponent(\`SomeMispelledComponent\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -42,7 +42,7 @@ exports[`basics display a nice error if the components key is missing with subco
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`MissingChild\`, true, false, false, true);
+  const comp1 = app.createComponent(\`MissingChild\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -57,7 +57,7 @@ exports[`basics no component catching error lead to full app destruction 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, [\\"flag\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -86,7 +86,7 @@ exports[`basics simple catchError 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Boom\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -186,7 +186,7 @@ exports[`can catch errors an error in onWillDestroy 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -216,7 +216,7 @@ exports[`can catch errors an error in onWillDestroy, variation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -258,8 +258,8 @@ exports[`can catch errors can catch an error in a component render function 1`]
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, false);
-  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
+  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, [\\"flag\\"]);
+  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -313,8 +313,8 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
-  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
+  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, []);
+  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -354,9 +354,9 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`ClassicCompoent\`, true, false, false, true);
-  const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
-  const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
+  const comp1 = app.createComponent(\`ClassicCompoent\`, true, false, false, []);
+  const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false, []);
+  const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -437,8 +437,8 @@ exports[`can catch errors can catch an error in the initial call of a component
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
-  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
+  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, []);
+  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -492,8 +492,8 @@ exports[`can catch errors can catch an error in the initial call of a component
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
-  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
+  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, []);
+  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -549,7 +549,7 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, true);
+  const comp1 = app.createComponent(\`B\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -561,7 +561,7 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`C\`, true, false, false, true);
+  const comp1 = app.createComponent(\`C\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -576,7 +576,7 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Boom\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -609,7 +609,7 @@ exports[`can catch errors can catch an error in the mounted call (in root compon
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
+  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -643,8 +643,8 @@ exports[`can catch errors can catch an error in the mounted call 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
-  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
+  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, []);
+  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -697,8 +697,8 @@ exports[`can catch errors can catch an error in the willPatch call 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, false);
-  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
+  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, [\\"message\\"]);
+  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><span><block-text-0/></span><block-child-0/></div>\`);
   
@@ -753,8 +753,8 @@ exports[`can catch errors can catch an error in the willStart call 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
-  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
+  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, []);
+  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -807,9 +807,9 @@ exports[`can catch errors can catch an error origination from a child's willStar
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`ClassicCompoent\`, true, false, false, true);
-  const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
-  const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
+  const comp1 = app.createComponent(\`ClassicCompoent\`, true, false, false, []);
+  const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false, []);
+  const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -876,7 +876,7 @@ exports[`can catch errors catchError in catchError 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -896,7 +896,7 @@ exports[`can catch errors catchError in catchError 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Boom\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -926,12 +926,12 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, markRaw, withKey } = helpers;
-  const comp1 = app.createComponent(null, false, false, false, true);
-  const comp2 = app.createComponent(\`ErrorHandler\`, true, true, false, false);
+  const comp1 = app.createComponent(null, false, false, false, []);
+  const comp2 = app.createComponent(\`ErrorHandler\`, true, true, false, [\\"onError\\"]);
   
   function slot1(ctx, node, key = \\"\\") {
     const Comp1 = ctx['cp'].Comp;
-    return toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
+    return toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
   }
   
   return function template(ctx, node, key = \\"\\") {
@@ -940,9 +940,10 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`cp\`] = v_block1[i1];
       const key1 = ctx['cp'].id;
-      const v1 = ctx['cp'];
+      const v1 = ctx['this'];
+      const v2 = ctx['cp'];
       const ctx1 = capture(ctx);
-      c_block1[i1] = withKey(comp2({onError: ()=>this.cleanUp(v1.id),slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1);
+      c_block1[i1] = withKey(comp2({onError: ()=>v1.cleanUp(v2.id),slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1);
     }
     return list(c_block1);
   }
@@ -965,7 +966,7 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
+  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -1004,23 +1005,24 @@ exports[`can catch errors catching in child makes parent render 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, markRaw, withKey } = helpers;
-  const comp1 = app.createComponent(null, false, false, false, false);
-  const comp2 = app.createComponent(\`Catch\`, true, true, false, false);
+  const comp1 = app.createComponent(null, false, false, false, [\\"id\\"]);
+  const comp2 = app.createComponent(\`Catch\`, true, true, false, [\\"onError\\"]);
   
   function slot1(ctx, node, key = \\"\\") {
     const Comp1 = ctx['elem'][1];
-    return toggler(Comp1, comp1({id: ctx['elem'][0]}, key + \`__1\`, node, this, Comp1));
+    return toggler(Comp1, comp1({id: ctx['elem'][0]}, (Comp1).name + key + \`__1\`, node, this, Comp1));
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(Object.entries(this.elements));;
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(Object.entries(ctx['this'].elements));;
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`elem\`] = v_block1[i1];
       const key1 = ctx['elem'][0];
-      const v1 = ctx['elem'];
+      const v1 = ctx['this'];
+      const v2 = ctx['elem'];
       const ctx1 = capture(ctx);
-      c_block1[i1] = withKey(comp2({onError: (_error)=>this.onError(v1[0],_error),slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1);
+      c_block1[i1] = withKey(comp2({onError: (_error)=>v1.onError(v2[0],_error),slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1);
     }
     return list(c_block1);
   }
@@ -1071,9 +1073,9 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`OK\`, true, false, false, true);
-  const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
-  const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
+  const comp1 = app.createComponent(\`OK\`, true, false, false, []);
+  const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false, []);
+  const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -1137,7 +1139,7 @@ exports[`can catch errors onError in class inheritance is called if rethrown 1`]
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Concrete\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Concrete\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -1155,7 +1157,7 @@ exports[`can catch errors onError in class inheritance is called if rethrown 2`]
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     if (!ctx['state'].error) {
-      b2 = text(this.will.crash);
+      b2 = text(ctx['this'].will.crash);
     } else {
       b3 = text(ctx['state'].error);
     }
@@ -1168,7 +1170,7 @@ exports[`can catch errors onError in class inheritance is not called if no rethr
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Concrete\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Concrete\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -1186,7 +1188,7 @@ exports[`can catch errors onError in class inheritance is not called if no rethr
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     if (!ctx['state'].error) {
-      b2 = text(this.will.crash);
+      b2 = text(ctx['this'].will.crash);
     } else {
       b3 = text(ctx['state'].error);
     }
@@ -1199,7 +1201,7 @@ exports[`errors and promises a rendering error in a sub component will reject th
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1218,7 +1220,7 @@ exports[`errors and promises a rendering error in a sub component will reject th
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let txt1 = this.will.crash;
+    let txt1 = ctx['this'].will.crash;
     return block1([txt1]);
   }
 }"
@@ -1232,7 +1234,7 @@ exports[`errors and promises a rendering error will reject the mount promise 1`]
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let txt1 = this.will.crash;
+    let txt1 = ctx['this'].will.crash;
     return block1([txt1]);
   }
 }"
@@ -1242,7 +1244,7 @@ exports[`errors and promises a rendering error will reject the render promise (w
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
@@ -1277,7 +1279,7 @@ exports[`errors and promises a rendering error will reject the render promise 1`
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['flag']) {
-      b2 = text(this.will.crash);
+      b2 = text(ctx['this'].will.crash);
     }
     return block1([], [b2]);
   }

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

@@ -32,7 +32,7 @@ exports[`event handling handler receive the event as argument 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<span block-handler-0=\\"click\\"><block-child-0/><block-text-1/></span>\`);
   
@@ -76,7 +76,7 @@ exports[`event handling input blur event is not called if component is destroyed
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><textarea/></div>\`);
   

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

@@ -4,7 +4,7 @@ exports[`basics basic use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"p\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({p: 1}, key + \`__1\`, node, this, null);
@@ -30,8 +30,8 @@ exports[`basics can select a sub widget  1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  const comp2 = app.createComponent(\`OtherChild\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  const comp2 = app.createComponent(\`OtherChild\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -76,8 +76,8 @@ exports[`basics can select a sub widget, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  const comp2 = app.createComponent(\`OtherChild\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  const comp2 = app.createComponent(\`OtherChild\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -122,7 +122,7 @@ exports[`basics sub widget is interactive 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"p\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({p: 1}, key + \`__1\`, node, this, null);
@@ -149,7 +149,7 @@ exports[`basics top level sub widget with a parent 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, true);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -164,7 +164,7 @@ exports[`basics top level sub widget with a parent 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, true);
+  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);

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

@@ -9,11 +9,10 @@ exports[`hooks autofocus hook input in a t-if 1`] = `
   let block2 = createBlock(\`<input block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = (el) => refs[\`input1\`] = el;
-    const ref2 = (el) => refs[\`input2\`] = el;
     let b2;
+    let ref1 = (el) => this.__owl__.setRef((\`input1\`), el);
     if (ctx['state'].flag) {
+      let ref2 = (el) => this.__owl__.setRef((\`input2\`), el);
       b2 = block2([ref2]);
     }
     return block1([ref1], [b2]);
@@ -29,9 +28,8 @@ exports[`hooks autofocus hook simple input 1`] = `
   let block1 = createBlock(\`<div><input block-ref=\\"0\\"/><input block-ref=\\"1\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = (el) => refs[\`input1\`] = el;
-    const ref2 = (el) => refs[\`input2\`] = el;
+    let ref1 = (el) => this.__owl__.setRef((\`input1\`), el);
+    let ref2 = (el) => this.__owl__.setRef((\`input2\`), el);
     return block1([ref1, ref2]);
   }
 }"
@@ -41,7 +39,7 @@ exports[`hooks can use onWillStart, onWillUpdateProps 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`MyComponent\`, true, false, false, false);
+  const comp1 = app.createComponent(\`MyComponent\`, true, false, false, [\\"value\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
@@ -108,7 +106,7 @@ exports[`hooks parent and child env (with useChildSubEnv then useSubEnv) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['env'].val);
@@ -140,7 +138,7 @@ exports[`hooks parent and child env (with useChildSubEnv) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['env'].val);
@@ -168,7 +166,7 @@ exports[`hooks parent and child env (with useSubEnv) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['env'].val);
@@ -224,7 +222,7 @@ exports[`hooks useChildSubEnv supports arbitrary descriptor 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -268,10 +266,9 @@ exports[`hooks useEffect hook effect can depend on stuff in dom 1`] = `
   let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = (el) => refs[\`div\`] = el;
     let b2;
     if (ctx['state'].value) {
+      let ref1 = (el) => this.__owl__.setRef((\`div\`), el);
       b2 = block2([ref1]);
     }
     return multi([b2]);
@@ -323,7 +320,7 @@ exports[`hooks useExternalListener 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`MyComponent\`, true, false, false, true);
+  const comp1 = app.createComponent(\`MyComponent\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
@@ -357,8 +354,7 @@ exports[`hooks useRef hook: basic use 1`] = `
   let block1 = createBlock(\`<div><button block-ref=\\"0\\"><block-text-1/></button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = (el) => refs[\`button\`] = el;
+    let ref1 = (el) => this.__owl__.setRef((\`button\`), el);
     let txt1 = ctx['value'];
     return block1([ref1, txt1]);
   }
@@ -383,7 +379,7 @@ exports[`hooks useSubEnv supports arbitrary descriptor 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);

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

@@ -17,8 +17,8 @@ exports[`lifecycle hooks component semantics 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, true);
-  const comp2 = app.createComponent(\`C\`, true, false, false, true);
+  const comp1 = app.createComponent(\`B\`, true, false, false, []);
+  const comp2 = app.createComponent(\`C\`, true, false, false, []);
   
   let block1 = createBlock(\`<div>A<block-child-0/><block-child-1/></div>\`);
   
@@ -47,9 +47,9 @@ exports[`lifecycle hooks component semantics 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`D\`, true, false, false, true);
-  const comp2 = app.createComponent(\`E\`, true, false, false, true);
-  const comp3 = app.createComponent(\`F\`, true, false, false, true);
+  const comp1 = app.createComponent(\`D\`, true, false, false, []);
+  const comp2 = app.createComponent(\`E\`, true, false, false, []);
+  const comp3 = app.createComponent(\`F\`, true, false, false, []);
   
   let block1 = createBlock(\`<div>C<block-child-0/><block-child-1/><block-child-2/></div>\`);
   
@@ -109,7 +109,7 @@ exports[`lifecycle hooks components are unmounted and destroyed if no longer in
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"n\\"]);
   
   let block2 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -142,7 +142,7 @@ exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
@@ -171,7 +171,7 @@ exports[`lifecycle hooks destroy new children before being mountged 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3,b4;
@@ -200,7 +200,7 @@ exports[`lifecycle hooks hooks are called in proper order in widget creation/des
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -228,7 +228,7 @@ exports[`lifecycle hooks lifecycle callbacks are bound to component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Test\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Test\`, true, false, false, [\\"rev\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({rev: ctx['rev']}, key + \`__1\`, node, this, null);
@@ -251,7 +251,7 @@ exports[`lifecycle hooks lifecycle semantics 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"a\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -279,7 +279,7 @@ exports[`lifecycle hooks lifecycle semantics, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
@@ -295,7 +295,7 @@ exports[`lifecycle hooks lifecycle semantics, part 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
+  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -320,7 +320,7 @@ exports[`lifecycle hooks lifecycle semantics, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
@@ -336,7 +336,7 @@ exports[`lifecycle hooks lifecycle semantics, part 4 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
@@ -352,7 +352,7 @@ exports[`lifecycle hooks lifecycle semantics, part 4 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
+  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -377,7 +377,7 @@ exports[`lifecycle hooks lifecycle semantics, part 5 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
@@ -406,7 +406,7 @@ exports[`lifecycle hooks lifecycle semantics, part 6 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
@@ -444,7 +444,7 @@ exports[`lifecycle hooks mounted hook is called on every mount, not just the fir
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
@@ -473,7 +473,7 @@ exports[`lifecycle hooks mounted hook is called on subcomponents, in proper orde
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -501,7 +501,7 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -519,7 +519,7 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ChildChild\`, true, false, false, true);
+  const comp1 = app.createComponent(\`ChildChild\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -547,7 +547,7 @@ exports[`lifecycle hooks onWillRender 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"someValue\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({someValue: ctx['state'].value}, key + \`__1\`, node, this, null);
@@ -574,7 +574,7 @@ exports[`lifecycle hooks patched hook is called after updateProps 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"a\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -658,7 +658,7 @@ exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly calle
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
@@ -700,7 +700,7 @@ exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"prop\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {prop: ctx['state'].prop};
@@ -725,7 +725,7 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"n\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -740,7 +740,7 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ChildChild\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ChildChild\`, true, false, false, [\\"n\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -769,7 +769,7 @@ exports[`lifecycle hooks willStart hook is called on sub component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -820,7 +820,7 @@ exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   let block3 = createBlock(\`<div/>\`);
@@ -854,7 +854,7 @@ exports[`lifecycle hooks willUpdateProps hook is called 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"n\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);

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

@@ -1,10 +1,76 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`.alike suffix in a list 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, withKey } = helpers;
+  const comp1 = app.createComponent(\`Todo\`, true, false, false, [\\"todo\\"]);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['state'].elems);;
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`elem\`] = v_block1[i1];
+      const key1 = ctx['elem'].id;
+      const v1 = ctx['this'];
+      const v2 = ctx['elem'];
+      c_block1[i1] = withKey(comp1({todo: ctx['elem'],toggle: ()=>v1.toggle(v2.id)}, key + \`__1__\${key1}\`, node, this, null), key1);
+    }
+    return list(c_block1);
+  }
+}"
+`;
+
+exports[`.alike suffix in a list 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/><block-child-0/></button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    let hdlr1 = [ctx['props'].toggle, ctx];
+    let txt1 = ctx['props'].todo.id;
+    if (ctx['props'].todo.isChecked) {
+      b2 = text(\`V\`);
+    }
+    return block1([hdlr1, txt1], [b2]);
+  }
+}"
+`;
+
+exports[`.alike suffix in a simple case 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(ctx['state'].counter);
+    const b3 = comp1({fn: ()=>1}, key + \`__1\`, node, this, null);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`.alike suffix in a simple case 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['props'].fn());
+  }
+}"
+`;
+
 exports[`basics accept ES6-like syntax for props (with getters) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"greetings\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -34,7 +100,7 @@ exports[`basics arrow functions as prop correctly capture their scope 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"onClick\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -69,7 +135,7 @@ exports[`basics explicit object prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -98,7 +164,7 @@ exports[`basics prop names can contain - 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"prop-name\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({'prop-name': 7}, key + \`__1\`, node, this, null);
@@ -124,7 +190,7 @@ exports[`basics support prop names that aren't valid bare object property names
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"some-dashed-prop\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({'some-dashed-prop': 5}, key + \`__1\`, node, this, null);
@@ -151,7 +217,7 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<p>43</p>\`);
@@ -191,7 +257,7 @@ exports[`basics t-set with a body expression can be used as textual prop 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -224,7 +290,7 @@ exports[`basics t-set works  1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -256,7 +322,7 @@ exports[`basics template string in prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"propName\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({propName: \`1\${ctx['someVal']}3\`}, key + \`__1\`, node, this, null);
@@ -275,20 +341,44 @@ exports[`basics template string in prop 2`] = `
 }"
 `;
 
-exports[`bound functions is referentially equal after update 1`] = `
+exports[`bound functions are considered 'alike' 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { bind } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({val: ctx['state'].val,fn: bind(this, ctx['someFunction'])}, key + \`__1\`, node, this, null);
+    const b2 = text(ctx['state'].val);
+    const b3 = comp1({fn: ctx['someFunction'].bind(this)}, key + \`__1\`, node, this, null);
+    return multi([b2, b3]);
   }
 }"
 `;
 
-exports[`bound functions is referentially equal after update 2`] = `
+exports[`bound functions are considered 'alike' 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`child\`);
+  }
+}"
+`;
+
+exports[`bound functions is not referentially equal after update 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return comp1({val: ctx['state'].val,fn: ctx['someFunction'].bind(this)}, key + \`__1\`, node, this, null);
+  }
+}"
+`;
+
+exports[`bound functions is not referentially equal after update 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -303,11 +393,10 @@ exports[`can bind function prop with bind suffix 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { bind } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({doSomething: bind(this, ctx['doSomething'])}, key + \`__1\`, node, this, null);
+    return comp1({doSomething: ctx['doSomething'].bind(this)}, key + \`__1\`, node, this, null);
   }
 }"
 `;

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

@@ -4,7 +4,7 @@ exports[`default props a default prop cannot be defined on a mandatory prop 1`]
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
@@ -18,7 +18,7 @@ exports[`default props can set default boolean values 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, true);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -55,7 +55,7 @@ exports[`default props can set default values 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, true);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -86,7 +86,7 @@ exports[`default props default values are also set whenever component is updated
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -117,7 +117,7 @@ exports[`props validation can specify that additional props are allowed (array)
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"message\\",\\"otherProp\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {message: 'm',otherProp: 'o'};
@@ -144,7 +144,7 @@ exports[`props validation can specify that additional props are allowed (object)
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"message\\",\\"otherProp\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {message: 'm',otherProp: 'o'};
@@ -171,7 +171,7 @@ exports[`props validation can validate a prop with multiple types 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -201,7 +201,7 @@ exports[`props validation can validate a prop with multiple types 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -231,7 +231,7 @@ exports[`props validation can validate a prop with multiple types 5`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -248,7 +248,7 @@ exports[`props validation can validate an array with given primitive type 1`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -278,7 +278,7 @@ exports[`props validation can validate an array with given primitive type 3`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -308,7 +308,7 @@ exports[`props validation can validate an array with given primitive type 5`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -325,7 +325,7 @@ exports[`props validation can validate an array with given primitive type 6`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -342,7 +342,7 @@ exports[`props validation can validate an array with multiple sub element types
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -372,7 +372,7 @@ exports[`props validation can validate an array with multiple sub element types
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -402,7 +402,7 @@ exports[`props validation can validate an array with multiple sub element types
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -432,7 +432,7 @@ exports[`props validation can validate an array with multiple sub element types
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -449,7 +449,7 @@ exports[`props validation can validate an object with simple shape 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -479,7 +479,7 @@ exports[`props validation can validate an object with simple shape 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -496,7 +496,7 @@ exports[`props validation can validate an object with simple shape 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -513,7 +513,7 @@ exports[`props validation can validate an object with simple shape 5`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -530,7 +530,7 @@ exports[`props validation can validate an optional props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -560,7 +560,7 @@ exports[`props validation can validate an optional props 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -590,7 +590,7 @@ exports[`props validation can validate an optional props 5`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -607,7 +607,7 @@ exports[`props validation can validate recursively complicated prop def 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -637,7 +637,7 @@ exports[`props validation can validate recursively complicated prop def 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -667,7 +667,7 @@ exports[`props validation can validate recursively complicated prop def 5`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -685,8 +685,8 @@ exports[`props validation can validate through slots 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  const comp2 = app.createComponent(\`Wrapper\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Wrapper\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     const props1 = {};
@@ -718,7 +718,7 @@ exports[`props validation default values are applied before validating props at
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -749,7 +749,7 @@ exports[`props validation missing required boolean prop causes an error 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, true);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -766,7 +766,7 @@ exports[`props validation mix of optional and mandatory 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -783,7 +783,7 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"message\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -814,7 +814,7 @@ exports[`props validation props are validated whenever component is updated 1`]
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -841,11 +841,38 @@ exports[`props validation props are validated whenever component is updated 2`]
 }"
 `;
 
+exports[`props validation props validation does not cause additional subscription 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"obj\\"]);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {obj: ctx['obj']};
+    helpers.validateProps(\`Child\`, props1, this);
+    const b2 = comp1(props1, key + \`__1\`, node, this, null);
+    const b3 = text(ctx['obj'].otherValue);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`props validation props validation does not cause additional subscription 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['props'].obj.value);
+  }
+}"
+`;
+
 exports[`props validation props: list of strings 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, true);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -862,7 +889,7 @@ exports[`props validation validate simple types 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -879,7 +906,7 @@ exports[`props validation validate simple types 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -909,7 +936,7 @@ exports[`props validation validate simple types 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -926,7 +953,7 @@ exports[`props validation validate simple types 5`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -943,7 +970,7 @@ exports[`props validation validate simple types 6`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -973,7 +1000,7 @@ exports[`props validation validate simple types 8`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -990,7 +1017,7 @@ exports[`props validation validate simple types 9`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1007,7 +1034,7 @@ exports[`props validation validate simple types 10`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1037,7 +1064,7 @@ exports[`props validation validate simple types 12`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1054,7 +1081,7 @@ exports[`props validation validate simple types 13`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1071,7 +1098,7 @@ exports[`props validation validate simple types 14`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1101,7 +1128,7 @@ exports[`props validation validate simple types 16`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1118,7 +1145,7 @@ exports[`props validation validate simple types 17`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1135,7 +1162,7 @@ exports[`props validation validate simple types 18`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1165,7 +1192,7 @@ exports[`props validation validate simple types 20`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1182,7 +1209,7 @@ exports[`props validation validate simple types 21`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1199,7 +1226,7 @@ exports[`props validation validate simple types 22`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1229,7 +1256,7 @@ exports[`props validation validate simple types 24`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1246,7 +1273,7 @@ exports[`props validation validate simple types, alternate form 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1263,7 +1290,7 @@ exports[`props validation validate simple types, alternate form 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1293,7 +1320,7 @@ exports[`props validation validate simple types, alternate form 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1310,7 +1337,7 @@ exports[`props validation validate simple types, alternate form 5`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1327,7 +1354,7 @@ exports[`props validation validate simple types, alternate form 6`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1357,7 +1384,7 @@ exports[`props validation validate simple types, alternate form 8`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1374,7 +1401,7 @@ exports[`props validation validate simple types, alternate form 9`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1391,7 +1418,7 @@ exports[`props validation validate simple types, alternate form 10`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1421,7 +1448,7 @@ exports[`props validation validate simple types, alternate form 12`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1438,7 +1465,7 @@ exports[`props validation validate simple types, alternate form 13`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1455,7 +1482,7 @@ exports[`props validation validate simple types, alternate form 14`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1485,7 +1512,7 @@ exports[`props validation validate simple types, alternate form 16`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1502,7 +1529,7 @@ exports[`props validation validate simple types, alternate form 17`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1519,7 +1546,7 @@ exports[`props validation validate simple types, alternate form 18`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1549,7 +1576,7 @@ exports[`props validation validate simple types, alternate form 20`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1566,7 +1593,7 @@ exports[`props validation validate simple types, alternate form 21`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1583,7 +1610,7 @@ exports[`props validation validate simple types, alternate form 22`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1613,7 +1640,7 @@ exports[`props validation validate simple types, alternate form 24`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, [\\"p\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1630,7 +1657,7 @@ exports[`props validation validation is only done in dev mode 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, true);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1647,7 +1674,7 @@ exports[`props validation validation is only done in dev mode 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`SubComp\`, true, false, false, true);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   

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

@@ -4,7 +4,7 @@ exports[`reactivity in lifecycle Child component doesn't render when state they
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"state\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
@@ -31,7 +31,7 @@ exports[`reactivity in lifecycle Component is automatically subscribed to reacti
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"obj\\",\\"reactiveObj\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({obj: ctx['obj'],reactiveObj: ctx['reactiveObj']}, key + \`__1\`, node, this, null);
@@ -112,7 +112,7 @@ exports[`reactivity in lifecycle state changes in willUnmount do not trigger rer
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -140,3 +140,39 @@ exports[`reactivity in lifecycle state changes in willUnmount do not trigger rer
   }
 }"
 `;
+
+exports[`subscriptions subscriptions returns the keys and targets observed by the component 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['state'].a);
+  }
+}"
+`;
+
+exports[`subscriptions subscriptions returns the keys observed by the component 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"state\\"]);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(ctx['state'].a);
+    const b3 = comp1({state: ctx['state']}, key + \`__1\`, node, this, null);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`subscriptions subscriptions returns the keys observed by the component 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['props'].state.b);
+  }
+}"
+`;

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

@@ -8,8 +8,7 @@ exports[`refs basic use 1`] = `
   let block1 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = (el) => refs[\`div\`] = el;
+    let ref1 = (el) => this.__owl__.setRef((\`div\`), el);
     return block1([ref1]);
   }
 }"
@@ -19,37 +18,54 @@ exports[`refs can use 2 refs with same name in a t-if/t-else situation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { multiRefSetter } = helpers;
   
   let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   let block3 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = multiRefSetter(refs, \`coucou\`);
     let b2,b3;
     if (ctx['state'].value) {
+      let ref1 = (el) => this.__owl__.setRef((\`coucou\`), el);
       b2 = block2([ref1]);
     } else {
-      b3 = block3([ref1]);
+      let ref2 = (el) => this.__owl__.setRef((\`coucou\`), el);
+      b3 = block3([ref2]);
     }
     return multi([b2, b3]);
   }
 }"
 `;
 
+exports[`refs ref is unset when t-if goes to false after unrelated render 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block2 = createBlock(\`<div block-attribute-0=\\"class\\" block-ref=\\"1\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].show) {
+      let attr1 = ctx['state'].class;
+      let ref1 = (el) => this.__owl__.setRef((\`coucou\`), el);
+      b2 = block2([attr1, ref1]);
+    }
+    return multi([b2]);
+  }
+}"
+`;
+
 exports[`refs refs and recursive templates 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Test\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Test\`, true, false, false, [\\"tree\\"]);
   
   let block1 = createBlock(\`<p block-ref=\\"0\\"><block-text-1/><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = (el) => refs[\`root\`] = el;
     let b2;
+    let ref1 = (el) => this.__owl__.setRef((\`root\`), el);
     let txt1 = ctx['props'].tree.value;
     if (ctx['props'].tree.child) {
       b2 = comp1({tree: ctx['props'].tree.child}, key + \`__1\`, node, this, null);
@@ -59,20 +75,39 @@ exports[`refs refs and recursive templates 1`] = `
 }"
 `;
 
+exports[`refs refs and t-key 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block2 = createBlock(\`<button block-handler-0=\\"click\\"/>\`);
+  let block3 = createBlock(\`<p block-ref=\\"0\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['state'];
+    let hdlr1 = [()=>v1.renderId++, ctx];
+    const b2 = block2([hdlr1]);
+    const tKey_1 = ctx['state'].renderId;
+    let ref1 = (el) => this.__owl__.setRef((\`root\`), el);
+    const b3 = toggler(tKey_1, block3([ref1]));
+    return multi([b2, b3]);
+  }
+}"
+`;
+
 exports[`refs refs are properly bound in slots 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><span class=\\"counter\\"><block-text-0/></span><block-child-0/></div>\`);
   let block2 = createBlock(\`<button block-handler-0=\\"click\\" block-ref=\\"1\\">do something</button>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = (el) => refs[\`myButton\`] = el;
     let hdlr1 = [ctx['doSomething'], ctx];
+    let ref1 = (el) => this.__owl__.setRef((\`myButton\`), el);
     return block2([hdlr1, ref1]);
   }
   
@@ -104,16 +139,17 @@ exports[`refs throws if there are 2 same refs at the same time 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { multiRefSetter } = helpers;
+  let { makeRefWrapper } = helpers;
   
   let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   let block3 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = multiRefSetter(refs, \`coucou\`);
+    let refWrapper = makeRefWrapper(this.__owl__);
+    let ref1 = refWrapper(\`coucou\`, (el) => this.__owl__.setRef((\`coucou\`), el));
     const b2 = block2([ref1]);
-    const b3 = block3([ref1]);
+    let ref2 = refWrapper(\`coucou\`, (el) => this.__owl__.setRef((\`coucou\`), el));
+    const b3 = block3([ref2]);
     return multi([b2, b3]);
   }
 }"

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

@@ -4,7 +4,7 @@ exports[`children, default props and renderings 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['state'].value);
@@ -29,7 +29,7 @@ exports[`force render in case of existing render 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, false);
+  const comp1 = app.createComponent(\`B\`, true, false, false, [\\"val\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
@@ -41,7 +41,7 @@ exports[`force render in case of existing render 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`C\`, true, false, false, true);
+  const comp1 = app.createComponent(\`C\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = comp1({}, key + \`__1\`, node, this, null);
@@ -66,7 +66,7 @@ exports[`rendering semantics can force a render to update sub tree 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['state'].value);
@@ -91,7 +91,7 @@ exports[`rendering semantics can render a parent without rendering child 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['state'].value);
@@ -116,7 +116,7 @@ exports[`rendering semantics props are reactive (nested prop) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"a\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
@@ -139,7 +139,7 @@ exports[`rendering semantics props are reactive 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"a\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
@@ -162,7 +162,7 @@ exports[`rendering semantics render need a boolean = true to be 'deep' 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['state'].value);
@@ -187,7 +187,7 @@ exports[`rendering semantics render with deep=true followed by render with deep=
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(\`parent\`);
@@ -215,7 +215,7 @@ exports[`rendering semantics rendering is atomic (for one subtree) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`B\`, true, false, false, false);
+  const comp1 = app.createComponent(\`B\`, true, false, false, [\\"obj\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['state'].obj.val);
@@ -229,7 +229,7 @@ exports[`rendering semantics rendering is atomic (for one subtree) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`C\`, true, false, false, false);
+  const comp1 = app.createComponent(\`C\`, true, false, false, [\\"obj\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({obj: ctx['props'].obj}, key + \`__1\`, node, this, null);
@@ -252,7 +252,7 @@ exports[`rendering semantics works as expected for dynamic number of props 1`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, true, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1(Object.assign({}, ctx['state']), key + \`__1\`, node, this, null);

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

@@ -4,7 +4,7 @@ exports[`slots can define a default content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Dialog\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -39,7 +39,7 @@ exports[`slots can define and call slots 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<span>header</span>\`);
@@ -81,8 +81,8 @@ exports[`slots can define and call slots with bound params 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, bind, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  let { capture, markRaw } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     return text(\`abc\`);
@@ -90,7 +90,7 @@ exports[`slots can define and call slots with bound params 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'abc': {__render: slot1.bind(this), __ctx: ctx1, getValue: bind(this, ctx['getValue'])}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'abc': {__render: slot1.bind(this), __ctx: ctx1, getValue: ctx['getValue'].bind(this)}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -114,7 +114,7 @@ exports[`slots can define and call slots with params 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<span>header</span>\`);
@@ -159,14 +159,13 @@ exports[`slots can render node with t-ref and Component in same slot 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  const comp2 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = (el) => refs[\`div\`] = el;
+    let ref1 = (el) => this.__owl__.setRef((\`div\`), el);
     const b2 = block2([ref1]);
     const b3 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
@@ -206,7 +205,7 @@ exports[`slots can use component in default-content of t-slot 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -219,7 +218,7 @@ exports[`slots can use component in default-content of t-slot 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
-  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
+  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
   
   function defaultContent1(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -246,7 +245,7 @@ exports[`slots can use t-call in default-content of t-slot 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -287,7 +286,7 @@ exports[`slots content is the default slot (variation) 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<span>sts rocks</span>\`);
   
@@ -318,7 +317,7 @@ exports[`slots content is the default slot 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<span>sts rocks</span>\`);
@@ -354,7 +353,7 @@ exports[`slots default content is not rendered if named slot is provided 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -394,7 +393,7 @@ exports[`slots default content is not rendered if slot is provided 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -433,7 +432,7 @@ exports[`slots default slot next to named slot, with default content 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -478,7 +477,7 @@ exports[`slots default slot with params with - in it 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     return text(ctx['slotScope']['some-value']);
@@ -507,7 +506,7 @@ exports[`slots default slot with slot scope: shorthand syntax 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -545,7 +544,7 @@ exports[`slots default slot work with text nodes (variation) 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     return text(\`sts rocks\`);
@@ -574,7 +573,7 @@ exports[`slots default slot work with text nodes 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -609,8 +608,8 @@ exports[`slots dynamic slot in multiple locations 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  const comp2 = app.createComponent(\`Slotter\`, true, true, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Slotter\`, true, true, false, [\\"location\\"]);
   
   function slot1(ctx, node, key = \\"\\") {
     const b2 = text(\`hello \`);
@@ -667,7 +666,7 @@ exports[`slots dynamic t-slot call 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Toggler\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Toggler\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<p>slot1</p>\`);
@@ -714,7 +713,7 @@ exports[`slots dynamic t-slot call with default 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Toggler\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Toggler\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<p>slot1</p>\`);
@@ -764,7 +763,7 @@ exports[`slots fun: two calls to the same slot 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     return text(\`some text\`);
@@ -794,7 +793,7 @@ exports[`slots missing slots are ignored 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Dialog\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -825,7 +824,7 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`P\`, true, false, false, true);
+  const comp1 = app.createComponent(\`P\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -837,7 +836,7 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`A\`, true, false, false, false);
+  const comp1 = app.createComponent(\`A\`, true, false, false, [\\"number\\"]);
   
   let block2 = createBlock(\`<button block-handler-0=\\"click\\">inc</button>\`);
   
@@ -856,7 +855,7 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
   const callTemplate_1 = app.getTemplate(\`__template__1002\`);
-  const comp1 = app.createComponent(\`B\`, true, true, false, true);
+  const comp1 = app.createComponent(\`B\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     const b2 = text(\`[A]\`);
@@ -910,7 +909,7 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`C\`, true, false, false, false);
+  const comp1 = app.createComponent(\`C\`, true, false, false, [\\"slots\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(\`[B]\`);
@@ -939,7 +938,7 @@ exports[`slots multiple roots are allowed in a default slot 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<span>sts</span>\`);
@@ -978,7 +977,7 @@ exports[`slots multiple roots are allowed in a named slot 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<span>sts</span>\`);
@@ -1018,9 +1017,9 @@ exports[`slots multiple slots containing components 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`C\`, true, false, false, false);
-  const comp2 = app.createComponent(\`C\`, true, false, false, false);
-  const comp3 = app.createComponent(\`B\`, true, true, false, true);
+  const comp1 = app.createComponent(\`C\`, true, false, false, [\\"val\\"]);
+  const comp2 = app.createComponent(\`C\`, true, false, false, [\\"val\\"]);
+  const comp3 = app.createComponent(\`B\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     return comp1({val: 1}, key + \`__1\`, node, this, null);
@@ -1072,8 +1071,8 @@ exports[`slots named slot inside slot 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
-  const comp2 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
+  const comp2 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<p>A<block-text-0/></p>\`);
@@ -1123,8 +1122,8 @@ exports[`slots named slot inside slot, part 3 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
-  const comp2 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
+  const comp2 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<p>A<block-text-0/></p>\`);
@@ -1173,7 +1172,7 @@ exports[`slots named slots can define a default content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Dialog\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1208,8 +1207,8 @@ exports[`slots named slots inside slot, again 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
-  const comp2 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
+  const comp2 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<p>A<block-text-0/></p>\`);
@@ -1268,9 +1267,9 @@ exports[`slots nested slots in same template 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child3\`, true, false, false, true);
-  const comp2 = app.createComponent(\`Child2\`, true, true, false, true);
-  const comp3 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child3\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Child2\`, true, true, false, []);
+  const comp3 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block1 = createBlock(\`<span id=\\"parent\\"><block-child-0/></span>\`);
   
@@ -1337,8 +1336,8 @@ exports[`slots nested slots: evaluation context and parented relationship 1`] =
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Slot\`, true, false, false, false);
-  const comp2 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Slot\`, true, false, false, [\\"val\\"]);
+  const comp2 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     return comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
@@ -1355,7 +1354,7 @@ exports[`slots nested slots: evaluation context and parented relationship 2`] =
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot, markRaw } = helpers;
-  const comp1 = app.createComponent(\`GrandChild\`, true, true, false, true);
+  const comp1 = app.createComponent(\`GrandChild\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     return callSlot(ctx, node, key, 'default', false, {});
@@ -1400,7 +1399,7 @@ exports[`slots no named slot content => just no children 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Dialog\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -1428,7 +1427,7 @@ exports[`slots simple default slot 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     return text(\`some text\`);
@@ -1460,7 +1459,7 @@ exports[`slots simple default slot with params 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -1498,7 +1497,7 @@ exports[`slots simple default slot with params and bound function 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     return text(ctx['slotScope'].fn());
@@ -1514,10 +1513,10 @@ exports[`slots simple default slot with params and bound function 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { callSlot, bind } = helpers;
+  let { callSlot } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {fn: bind(this, ctx['getValue'])});
+    return callSlot(ctx, node, key, 'default', false, {fn: ctx['getValue'].bind(this)});
   }
 }"
 `;
@@ -1527,7 +1526,7 @@ exports[`slots simple default slot, variation 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     return text(\`some text\`);
@@ -1556,7 +1555,7 @@ exports[`slots simple dynamic slot with slot scope 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -1596,7 +1595,7 @@ exports[`slots simple named and empty slot -- 2 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
@@ -1629,7 +1628,7 @@ exports[`slots simple named and empty slot 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     return text(\`some text\`);
@@ -1663,7 +1662,7 @@ exports[`slots simple slot with slot scope 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -1703,7 +1702,7 @@ exports[`slots slot and (inline) t-call 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
   const callTemplate_1 = app.getTemplate(\`__template__999\`);
-  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1753,7 +1752,7 @@ exports[`slots slot and t-call 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
   const callTemplate_1 = app.getTemplate(\`__template__999\`);
-  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1802,7 +1801,7 @@ exports[`slots slot and t-esc 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1837,8 +1836,8 @@ exports[`slots slot are properly rendered if inner props are changed 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, false);
-  const comp2 = app.createComponent(\`GenericComponent\`, true, true, false, true);
+  const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, [\\"val\\"]);
+  const comp2 = app.createComponent(\`GenericComponent\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><button block-handler-0=\\"click\\">Inc[<block-text-1/>]</button><block-child-0/></div>\`);
   
@@ -1889,8 +1888,8 @@ exports[`slots slot content has different key from other content -- dynamic slot
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
-  const comp2 = app.createComponent(\`SlotDisplay\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"parent\\"]);
+  const comp2 = app.createComponent(\`SlotDisplay\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     return comp1({parent: 'Parent'}, key + \`__1\`, node, this, null);
@@ -1907,7 +1906,7 @@ exports[`slots slot content has different key from other content -- dynamic slot
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"parent\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = comp1({parent: 'SlotDisplay'}, key + \`__1\`, node, this, null);
@@ -1937,8 +1936,8 @@ exports[`slots slot content has different key from other content -- static slot
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
-  const comp2 = app.createComponent(\`SlotDisplay\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"parent\\"]);
+  const comp2 = app.createComponent(\`SlotDisplay\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     return comp1({parent: 'Parent'}, key + \`__1\`, node, this, null);
@@ -1955,7 +1954,7 @@ exports[`slots slot content has different key from other content -- static slot
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"parent\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = comp1({parent: 'SlotDisplay'}, key + \`__1\`, node, this, null);
@@ -1984,7 +1983,7 @@ exports[`slots slot content is bound to caller (variation) 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, isBoundary, withDefault, setContextValue, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">some text</button>\`);
   
@@ -1992,7 +1991,8 @@ exports[`slots slot content is bound to caller (variation) 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"var\\", 1);
-    let hdlr1 = [()=>this.inc(), ctx];
+    const v1 = ctx['this'];
+    let hdlr1 = [()=>v1.inc(), ctx];
     return block1([hdlr1]);
   }
   
@@ -2023,7 +2023,7 @@ exports[`slots slot content is bound to caller 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">some text</button>\`);
   
@@ -2058,8 +2058,8 @@ exports[`slots slot in multiple locations 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  const comp2 = app.createComponent(\`Slotter\`, true, true, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Slotter\`, true, true, false, [\\"location\\"]);
   
   function slot1(ctx, node, key = \\"\\") {
     const b2 = text(\` hello \`);
@@ -2113,8 +2113,8 @@ exports[`slots slot in t-foreach locations 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  const comp2 = app.createComponent(\`Slotter\`, true, true, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Slotter\`, true, true, false, [\\"list\\"]);
   
   function slot1(ctx, node, key = \\"\\") {
     const b2 = text(\` hello \`);
@@ -2170,8 +2170,8 @@ exports[`slots slot preserves properly parented relationship 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
-  const comp2 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -2215,7 +2215,7 @@ exports[`slots slot preserves properly parented relationship, even through t-cal
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -2235,7 +2235,7 @@ exports[`slots slot preserves properly parented relationship, even through t-cal
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
+  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -2271,7 +2271,7 @@ exports[`slots slot with slot scope and t-props 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block2 = createBlock(\`<p><block-text-0/></p>\`);
   let block3 = createBlock(\`<p><block-text-0/></p>\`);
@@ -2308,7 +2308,7 @@ exports[`slots slots and wrapper components 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Link\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Link\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     return text(\`hey\`);
@@ -2339,7 +2339,7 @@ exports[`slots slots are properly bound to correct component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -2359,7 +2359,8 @@ exports[`slots slots are properly bound to correct component 2`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"var\\", 1);
-    let hdlr1 = [()=>this.increment(), ctx];
+    const v1 = ctx['this'];
+    let hdlr1 = [()=>v1.increment(), ctx];
     let txt1 = ctx['state'].value;
     return block1([hdlr1, txt1]);
   }
@@ -2375,7 +2376,7 @@ exports[`slots slots are rendered with proper context 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><span class=\\"counter\\"><block-text-0/></span><block-child-0/></div>\`);
   let block2 = createBlock(\`<button block-handler-0=\\"click\\">do something</button>\`);
@@ -2414,7 +2415,7 @@ exports[`slots slots are rendered with proper context, part 2 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, markRaw, withKey } = helpers;
-  const comp1 = app.createComponent(\`Link\`, true, true, false, false);
+  const comp1 = app.createComponent(\`Link\`, true, true, false, [\\"to\\"]);
   
   let block1 = createBlock(\`<div><u><block-child-0/></u></div>\`);
   let block3 = createBlock(\`<li><block-child-0/></li>\`);
@@ -2462,7 +2463,7 @@ exports[`slots slots are rendered with proper context, part 3 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, isBoundary, withDefault, setContextValue, capture, markRaw, withKey } = helpers;
-  const comp1 = app.createComponent(\`Link\`, true, true, false, false);
+  const comp1 = app.createComponent(\`Link\`, true, true, false, [\\"to\\"]);
   
   let block1 = createBlock(\`<div><u><block-child-0/></u></div>\`);
   let block3 = createBlock(\`<li><block-child-0/></li>\`);
@@ -2511,7 +2512,7 @@ exports[`slots slots are rendered with proper context, part 4 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Link\`, true, true, false, false);
+  const comp1 = app.createComponent(\`Link\`, true, true, false, [\\"to\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -2551,7 +2552,7 @@ exports[`slots slots in slots, with vars 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`A\`, true, true, false, true);
+  const comp1 = app.createComponent(\`A\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<p>hey<block-text-0/></p>\`);
@@ -2577,7 +2578,7 @@ exports[`slots slots in slots, with vars 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot, markRaw } = helpers;
-  const comp1 = app.createComponent(\`B\`, true, true, false, true);
+  const comp1 = app.createComponent(\`B\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -2612,7 +2613,7 @@ exports[`slots slots in t-foreach and re-rendering 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, markRaw, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -2657,7 +2658,7 @@ exports[`slots slots in t-foreach in t-foreach 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, markRaw, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block4 = createBlock(\`<div><block-text-0/></div>\`);
@@ -2716,7 +2717,7 @@ exports[`slots slots in t-foreach with t-set and re-rendering 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, isBoundary, withDefault, setContextValue, capture, markRaw, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -2764,7 +2765,7 @@ exports[`slots t-debug on a t-set-slot (defining a slot) 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -2801,7 +2802,7 @@ exports[`slots t-set t-value in a slot 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, isBoundary, withDefault, setContextValue, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -2840,7 +2841,7 @@ exports[`slots t-set-slot=default has priority over rest of the content 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     return text(\`some other text\`);
@@ -2871,7 +2872,7 @@ exports[`slots t-slot in recursive templates 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, prepareList, isBoundary, withDefault, setContextValue, withKey, markRaw } = helpers;
   const callTemplate_1 = app.getTemplate(\`_test_recursive_template\`);
-  const comp1 = app.createComponent(\`Wrapper\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Wrapper\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -2931,8 +2932,8 @@ exports[`slots t-slot nested within another slot 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child3\`, true, false, false, true);
-  const comp2 = app.createComponent(\`Dialog\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child3\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<span id=\\"c1\\"><block-child-0/></span>\`);
   
@@ -2952,8 +2953,8 @@ exports[`slots t-slot nested within another slot 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Portal\`, true, true, false, true);
-  const comp2 = app.createComponent(\`Modal\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Portal\`, true, true, false, []);
+  const comp2 = app.createComponent(\`Modal\`, true, true, false, []);
   
   let block1 = createBlock(\`<span id=\\"c2\\"><block-child-0/></span>\`);
   
@@ -3020,7 +3021,7 @@ exports[`slots t-slot scope context 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, []);
   
   let block1 = createBlock(\`<button>The Button</button>\`);
   
@@ -3039,7 +3040,7 @@ exports[`slots t-slot scope context 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Wrapper\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Wrapper\`, true, true, false, []);
   
   let block1 = createBlock(\`<div block-handler-0=\\"click\\"><block-child-0/></div>\`);
   
@@ -3073,7 +3074,7 @@ exports[`slots t-slot within dynamic t-call 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
   const call = app.callTemplate.bind(app);
-  const comp1 = app.createComponent(\`Slotted\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Slotted\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -3109,7 +3110,7 @@ exports[`slots t-slot within dynamic t-call 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div class=\\"slot\\"><block-child-0/></div>\`);
   
@@ -3138,8 +3139,8 @@ exports[`slots template can just return a slot 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
-  const comp2 = app.createComponent(\`SlotComponent\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
+  const comp2 = app.createComponent(\`SlotComponent\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   

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

@@ -4,7 +4,7 @@ exports[`style and class handling can set class on multi root component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: 'fromparent'}, key + \`__1\`, node, this, null);
@@ -33,7 +33,7 @@ exports[`style and class handling can set class on sub component, as prop 1`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: 'some-class'}, key + \`__1\`, node, this, null);
@@ -59,7 +59,7 @@ exports[`style and class handling can set class on sub sub component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: 'fromparent'}, key + \`__1\`, node, this, null);
@@ -71,7 +71,7 @@ exports[`style and class handling can set class on sub sub component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ChildChild\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ChildChild\`, true, false, false, [\\"class\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: (ctx['props'].class||'')+' fromchild'}, key + \`__1\`, node, this, null);
@@ -97,7 +97,7 @@ exports[`style and class handling can set more than one class on sub component 1
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: 'a  b'}, key + \`__1\`, node, this, null);
@@ -150,7 +150,7 @@ exports[`style and class handling class on sub component, which is switched to a
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\",\\"child\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: 'someclass',child: ctx['state'].child}, key + \`__1\`, node, this, null);
@@ -162,8 +162,8 @@ exports[`style and class handling class on sub component, which is switched to a
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
-  const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
+  const comp1 = app.createComponent(\`ChildA\`, true, false, false, [\\"class\\"]);
+  const comp2 = app.createComponent(\`ChildB\`, true, false, false, [\\"class\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -209,7 +209,7 @@ exports[`style and class handling class with extra whitespaces (variation) 1`] =
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
@@ -238,7 +238,7 @@ exports[`style and class handling class with extra whitespaces 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: 'a  b c   d'}, key + \`__1\`, node, this, null);
@@ -264,7 +264,7 @@ exports[`style and class handling component class and parent class combine toget
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: 'from parent'}, key + \`__1\`, node, this, null);
@@ -317,7 +317,7 @@ exports[`style and class handling empty class attribute is not added on widget r
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -346,7 +346,7 @@ exports[`style and class handling error in subcomponent with class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: 'a'}, key + \`__1\`, node, this, null);
@@ -363,7 +363,7 @@ exports[`style and class handling error in subcomponent with class 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let attr1 = ctx['props'].class;
-    let txt1 = this.will.crash;
+    let txt1 = ctx['this'].will.crash;
     return block1([attr1, txt1]);
   }
 }"
@@ -373,7 +373,7 @@ exports[`style and class handling no class is set is child ignores it 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: 'hey'}, key + \`__1\`, node, this, null);
@@ -398,7 +398,7 @@ exports[`style and class handling no class is set is parent does not give it as
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -424,7 +424,7 @@ exports[`style and class handling style is properly added on widget root el 1`]
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"style\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({style: 'font-weight: bold;'}, key + \`__1\`, node, this, null);
@@ -450,7 +450,7 @@ exports[`style and class handling t-att-class is properly added/removed on widge
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -479,7 +479,7 @@ exports[`style and class handling t-att-class is properly added/removed on widge
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"class\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: {a:true,b:ctx['state'].b}}, key + \`__1\`, node, this, null);

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

@@ -46,7 +46,7 @@ exports[`t-call dynamic t-call: key is propagated 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   const call = app.callTemplate.bind(app);
   
   return function template(ctx, node, key = \\"\\") {
@@ -76,7 +76,7 @@ exports[`t-call dynamic t-call: key is propagated 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -109,7 +109,8 @@ exports[`t-call handlers are properly bound through a dynamic t-call 2`] = `
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [()=>this.update(), ctx];
+    const v1 = ctx['this'];
+    let hdlr1 = [()=>v1.update(), ctx];
     return block1([hdlr1]);
   }
 }"
@@ -168,8 +169,9 @@ exports[`t-call handlers with arguments are properly bound through a t-call 2`]
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const v1 = ctx['a'];
-    let hdlr1 = [()=>this.update(v1), ctx];
+    const v1 = ctx['this'];
+    const v2 = ctx['a'];
+    let hdlr1 = [()=>v1.update(v2), ctx];
     return block1([hdlr1]);
   }
 }"
@@ -194,7 +196,7 @@ exports[`t-call parent is set within t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -231,7 +233,7 @@ exports[`t-call parent is set within t-call with no parentNode 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);
@@ -287,7 +289,7 @@ exports[`t-call recursive t-call binding this -- static t-call 2`] = `
     ctx[isBoundary] = 1
     let b2;
     if (ctx['level']<2) {
-      let hdlr1 = [\\"stop\\", ctx['onClicked'].bind(this), ctx];
+      let hdlr1 = [\\"stop\\", ctx['onClicked'].bind(ctx['this']), ctx];
       let txt1 = ctx['level'];
       const b3 = block3([hdlr1, txt1]);
       ctx = Object.create(ctx);
@@ -328,7 +330,7 @@ exports[`t-call sub components in two t-calls 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
@@ -381,7 +383,7 @@ exports[`t-call t-call in t-foreach and children component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({val: ctx['val']}, key + \`__1\`, node, this, null);
@@ -420,8 +422,8 @@ exports[`t-call t-call with t-call-context and subcomponent 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
-  const comp2 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"name\\"]);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, [\\"name\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = comp1({name: ctx['aab']}, key + \`__1\`, node, this, null);
@@ -461,8 +463,8 @@ exports[`t-call t-call with t-call-context and subcomponent, in dev mode 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
-  const comp2 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"name\\"]);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, [\\"name\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {name: ctx['aab']};
@@ -532,35 +534,30 @@ exports[`t-call t-call-context: ComponentNode is not looked up in the context 2`
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { bind, capture, isBoundary, withDefault, setContextValue, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, false);
+  let { capture, isBoundary, withDefault, setContextValue, markRaw } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block2 = createBlock(\`<div block-ref=\\"0\\">outside slot</div>\`);
   let block4 = createBlock(\`<div block-ref=\\"0\\">I'm the default slot</div>\`);
   let block5 = createBlock(\`<div><block-text-0/></div>\`);
-  let block6 = createBlock(\`<div><block-text-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref2 = (el) => refs[\`myRef2\`] = el;
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
+    let ref2 = (el) => this.__owl__.setRef((\`myRef2\`), el);
     const b4 = block4([ref2]);
     setContextValue(ctx, \\"test\\", 3);
-    let txt1 = this.__owl__.name;
+    let txt1 = ctx['test'];
     const b5 = block5([txt1]);
-    let txt2 = ctx['test'];
-    const b6 = block6([txt2]);
-    return multi([b4, b5, b6]);
+    return multi([b4, b5]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = (el) => refs[\`myRef\`] = el;
+    let ref1 = (el) => this.__owl__.setRef((\`myRef\`), el);
     const b2 = block2([ref1]);
     const ctx1 = capture(ctx);
-    const b7 = comp1({prop: bind(this, ctx['method']),slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
-    return multi([b2, b7]);
+    const b6 = comp1({prop: ctx['method'].bind(this),slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    return multi([b2, b6]);
   }
 }"
 `;
@@ -595,7 +592,7 @@ exports[`t-call t-call-context: slots don't make component available again when
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     return text(ctx['someValue']);
@@ -624,3 +621,27 @@ exports[`t-call t-call-context: slots don't make component available again when
   }
 }"
 `;
+
+exports[`t-call t-call-context: this is not available inside t-call-context 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`someTemplate\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let ctx1 = {};
+    return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call t-call-context: this is not available inside t-call-context 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['this']);
+  }
+}"
+`;

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

@@ -4,13 +4,13 @@ exports[`t-component can switch between dynamic components without the need for
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(null, false, false, false, true);
+  const comp1 = app.createComponent(null, false, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const Comp1 = ctx['constructor'].components[ctx['state'].child];
-    const b2 = toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
+    const b2 = toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
     return block1([], [b2]);
   }
 }"
@@ -46,12 +46,12 @@ exports[`t-component can use dynamic components (the class) if given (with diffe
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(null, false, false, false, true);
+  const comp1 = app.createComponent(null, false, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['state'].child;
     const Comp1 = ctx['myComponent'];
-    return toggler(tKey_1, toggler(Comp1, comp1({}, tKey_1 + key + \`__1\`, node, this, Comp1)));
+    return toggler(tKey_1, toggler(Comp1, comp1({}, (Comp1).name + tKey_1 + key + \`__1\`, node, this, Comp1)));
   }
 }"
 `;
@@ -86,12 +86,12 @@ exports[`t-component can use dynamic components (the class) if given 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(null, false, false, false, true);
+  const comp1 = app.createComponent(null, false, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['state'].child;
     const Comp1 = ctx['myComponent'];
-    return toggler(tKey_1, toggler(Comp1, comp1({}, tKey_1 + key + \`__1\`, node, this, Comp1)));
+    return toggler(tKey_1, toggler(Comp1, comp1({}, (Comp1).name + tKey_1 + key + \`__1\`, node, this, Comp1)));
   }
 }"
 `;
@@ -126,13 +126,13 @@ exports[`t-component modifying a sub widget 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(null, false, false, false, true);
+  const comp1 = app.createComponent(null, false, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const Comp1 = ctx['Counter'];
-    const b2 = toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
+    const b2 = toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
     return block1([], [b2]);
   }
 }"
@@ -158,11 +158,11 @@ exports[`t-component switching dynamic component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(null, false, false, false, true);
+  const comp1 = app.createComponent(null, false, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const Comp1 = ctx['Child'];
-    return toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
+    return toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
   }
 }"
 `;
@@ -195,11 +195,11 @@ exports[`t-component t-component works in simple case 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(null, false, false, false, true);
+  const comp1 = app.createComponent(null, false, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const Comp1 = ctx['Child'];
-    return toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
+    return toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
   }
 }"
 `;

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

@@ -5,7 +5,7 @@ exports[`list of components components in a node in a t-foreach  1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"item\\"]);
   
   let block1 = createBlock(\`<div><ul><block-child-0/></ul></div>\`);
   let block3 = createBlock(\`<li><block-child-0/></li>\`);
@@ -44,7 +44,7 @@ exports[`list of components crash on duplicate key in dev mode 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, OwlError, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -80,7 +80,7 @@ exports[`list of components crash when using object as keys that serialize to th
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, OwlError, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -116,7 +116,7 @@ exports[`list of components list of sub components inside other nodes 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
-  const comp1 = app.createComponent(\`SubComponent\`, true, false, false, true);
+  const comp1 = app.createComponent(\`SubComponent\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<div><block-child-0/></div>\`);
@@ -154,7 +154,7 @@ exports[`list of components order is correct when slots are not of same type 1`]
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block2 = createBlock(\`<div>A</div>\`);
   
@@ -206,7 +206,7 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"blip\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -253,7 +253,7 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach,
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"row\\",\\"col\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<p><block-child-0/></p>\`);
@@ -302,7 +302,7 @@ exports[`list of components simple list 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -336,7 +336,7 @@ exports[`list of components sub components rendered in a loop 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"n\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -373,7 +373,7 @@ exports[`list of components sub components with some state rendered in a loop 1`
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -410,7 +410,7 @@ exports[`list of components switch component position 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
@@ -447,7 +447,7 @@ exports[`list of components t-foreach with t-component, and update 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   

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

@@ -5,7 +5,7 @@ exports[`t-key t-foreach with t-key switch component position 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
@@ -42,7 +42,7 @@ exports[`t-key t-key on Component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
@@ -69,7 +69,7 @@ exports[`t-key t-key on Component as a function 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
@@ -99,8 +99,8 @@ exports[`t-key t-key on multiple Components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
-  const comp2 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
   
   let block1 = createBlock(\`<span><block-child-0/><block-child-1/></span>\`);
   
@@ -159,7 +159,7 @@ exports[`t-key t-key on multiple Components with t-call 1 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
@@ -201,8 +201,8 @@ exports[`t-key t-key on multiple Components with t-call 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
-  const comp2 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, [\\"key\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key1'];

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

@@ -6,15 +6,15 @@ exports[`t-model directive .lazy modifier 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"change\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"change\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
-    let attr1 = bExpr1[expr1];
+    let prop1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].text;
-    return block1([attr1, hdlr1, txt1]);
+    return block1([prop1, hdlr1, txt1]);
   }
 }"
 `;
@@ -25,15 +25,15 @@ exports[`t-model directive .number modifier 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'number';
-    let attr1 = bExpr1[expr1];
+    let prop1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = toNumber(ev.target.value); }];
     let txt1 = ctx['state'].number;
-    return block1([attr1, hdlr1, txt1]);
+    return block1([prop1, hdlr1, txt1]);
   }
 }"
 `;
@@ -44,15 +44,15 @@ exports[`t-model directive .trim modifier 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
-    let attr1 = bExpr1[expr1];
+    let prop1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value.trim(); }];
     let txt1 = ctx['state'].text;
-    return block1([attr1, hdlr1, txt1]);
+    return block1([prop1, hdlr1, txt1]);
   }
 }"
 `;
@@ -63,15 +63,15 @@ exports[`t-model directive basic use, on an input 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
-    let attr1 = bExpr1[expr1];
+    let prop1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].text;
-    return block1([attr1, hdlr1, txt1]);
+    return block1([prop1, hdlr1, txt1]);
   }
 }"
 `;
@@ -82,15 +82,15 @@ exports[`t-model directive basic use, on an input with bracket expression 1`] =
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
-    let attr1 = bExpr1[expr1];
+    let prop1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].text;
-    return block1([attr1, hdlr1, txt1]);
+    return block1([prop1, hdlr1, txt1]);
   }
 }"
 `;
@@ -101,15 +101,15 @@ exports[`t-model directive basic use, on another key in component 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['some'];
     const expr1 = 'text';
-    let attr1 = bExpr1[expr1];
+    let prop1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['some'].text;
-    return block1([attr1, hdlr1, txt1]);
+    return block1([prop1, hdlr1, txt1]);
   }
 }"
 `;
@@ -120,15 +120,15 @@ exports[`t-model directive can also define t-on directive on same event, part 1
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\" block-handler-2=\\"input\\"/></div>\`);
+  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\" block-handler-2=\\"input\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
-    let attr1 = bExpr1[expr1];
+    let prop1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let hdlr2 = [ctx['onInput'], ctx];
-    return block1([attr1, hdlr1, hdlr2]);
+    return block1([prop1, hdlr1, hdlr2]);
   }
 }"
 `;
@@ -139,25 +139,25 @@ exports[`t-model directive can also define t-on directive on same event, part 2
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\" block-handler-2=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-3=\\"checked\\" block-handler-4=\\"click\\" block-handler-5=\\"click\\"/><input type=\\"radio\\" id=\\"three\\" value=\\"Three\\" block-attribute-6=\\"checked\\" block-handler-7=\\"click\\" block-handler-8=\\"click\\"/></div>\`);
+  let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-property-0=\\"checked\\" block-handler-1=\\"click\\" block-handler-2=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-property-3=\\"checked\\" block-handler-4=\\"click\\" block-handler-5=\\"click\\"/><input type=\\"radio\\" id=\\"three\\" value=\\"Three\\" block-property-6=\\"checked\\" block-handler-7=\\"click\\" block-handler-8=\\"click\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'choice';
-    let attr1 = bExpr1[expr1] === 'One';
+    let prop1 = bExpr1[expr1] === 'One';
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let hdlr2 = [ctx['onClick'], ctx];
     const bExpr2 = ctx['state'];
     const expr2 = 'choice';
-    let attr2 = bExpr2[expr2] === 'Two';
+    let prop2 = bExpr2[expr2] === 'Two';
     let hdlr3 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
     let hdlr4 = [ctx['onClick'], ctx];
     const bExpr3 = ctx['state'];
     const expr3 = 'choice';
-    let attr3 = bExpr3[expr3] === 'Three';
+    let prop3 = bExpr3[expr3] === 'Three';
     let hdlr5 = [(ev) => { bExpr3[expr3] = ev.target.value; }];
     let hdlr6 = [ctx['onClick'], ctx];
-    return block1([attr1, hdlr1, hdlr2, attr2, hdlr3, hdlr4, attr3, hdlr5, hdlr6]);
+    return block1([prop1, hdlr1, hdlr2, prop2, hdlr3, hdlr4, prop3, hdlr5, hdlr6]);
   }
 }"
 `;
@@ -168,7 +168,7 @@ exports[`t-model directive following a scope protecting directive (e.g. t-set) 1
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/></div>\`);
+  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -176,9 +176,9 @@ exports[`t-model directive following a scope protecting directive (e.g. t-set) 1
     setContextValue(ctx, \\"admiral\\", 'Bruno');
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
-    let attr1 = bExpr1[expr1];
+    let prop1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    return block1([attr1, hdlr1]);
+    return block1([prop1, hdlr1]);
   }
 }"
 `;
@@ -190,7 +190,7 @@ exports[`t-model directive in a t-foreach 1`] = `
   let { prepareList, toNumber, withKey } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\" block-handler-1=\\"input\\"/>\`);
+  let block3 = createBlock(\`<input type=\\"checkbox\\" block-property-0=\\"checked\\" block-handler-1=\\"input\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -200,9 +200,9 @@ exports[`t-model directive in a t-foreach 1`] = `
       const key1 = ctx['thing'].id;
       const bExpr1 = ctx['thing'];
       const expr1 = 'f';
-      let attr1 = bExpr1[expr1];
+      let prop1 = bExpr1[expr1];
       let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.checked; }];
-      c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
+      c_block2[i1] = withKey(block3([prop1, hdlr1]), key1);
     }
     const b2 = list(c_block2);
     return block1([], [b2]);
@@ -217,7 +217,7 @@ exports[`t-model directive in a t-foreach, part 2 1`] = `
   let { prepareList, toNumber, withKey } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
+  let block3 = createBlock(\`<input block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -228,9 +228,9 @@ exports[`t-model directive in a t-foreach, part 2 1`] = `
       const key1 = ctx['thing_index'];
       const bExpr1 = ctx['state'];
       const expr1 = ctx['thing_index'];
-      let attr1 = bExpr1[expr1];
+      let prop1 = bExpr1[expr1];
       let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-      c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
+      c_block2[i1] = withKey(block3([prop1, hdlr1]), key1);
     }
     const b2 = list(c_block2);
     return block1([], [b2]);
@@ -245,7 +245,7 @@ exports[`t-model directive in a t-foreach, part 3 1`] = `
   let { prepareList, toNumber, withKey } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
+  let block3 = createBlock(\`<input block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -256,9 +256,9 @@ exports[`t-model directive in a t-foreach, part 3 1`] = `
       const key1 = ctx['name_index'];
       const bExpr1 = ctx['state'].values;
       const expr1 = ctx['name'];
-      let attr1 = bExpr1[expr1];
+      let prop1 = bExpr1[expr1];
       let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-      c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
+      c_block2[i1] = withKey(block3([prop1, hdlr1]), key1);
     }
     const b2 = list(c_block2);
     return block1([], [b2]);
@@ -272,15 +272,15 @@ exports[`t-model directive on a select 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><select block-attribute-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"\\">Please select one</option><option value=\\"red\\">Red</option><option value=\\"blue\\">Blue</option></select><span>Choice: <block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><select block-property-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"\\">Please select one</option><option value=\\"red\\">Red</option><option value=\\"blue\\">Blue</option></select><span>Choice: <block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'color';
-    let attr1 = bExpr1[expr1];
+    let prop1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].color;
-    return block1([attr1, hdlr1, txt1]);
+    return block1([prop1, hdlr1, txt1]);
   }
 }"
 `;
@@ -291,14 +291,14 @@ exports[`t-model directive on a select, initial state 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><select block-attribute-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"\\">Please select one</option><option value=\\"red\\">Red</option><option value=\\"blue\\">Blue</option></select></div>\`);
+  let block1 = createBlock(\`<div><select block-property-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"\\">Please select one</option><option value=\\"red\\">Red</option><option value=\\"blue\\">Blue</option></select></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'color';
-    let attr1 = bExpr1[expr1];
+    let prop1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    return block1([attr1, hdlr1]);
+    return block1([prop1, hdlr1]);
   }
 }"
 `;
@@ -309,15 +309,15 @@ exports[`t-model directive on a sub state key 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'].something;
     const expr1 = 'text';
-    let attr1 = bExpr1[expr1];
+    let prop1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].something.text;
-    return block1([attr1, hdlr1, txt1]);
+    return block1([prop1, hdlr1, txt1]);
   }
 }"
 `;
@@ -328,19 +328,19 @@ exports[`t-model directive on an input type=radio 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/><span>Choice: <block-text-4/></span></div>\`);
+  let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-property-0=\\"checked\\" block-handler-1=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-property-2=\\"checked\\" block-handler-3=\\"click\\"/><span>Choice: <block-text-4/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'choice';
-    let attr1 = bExpr1[expr1] === 'One';
+    let prop1 = bExpr1[expr1] === 'One';
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     const bExpr2 = ctx['state'];
     const expr2 = 'choice';
-    let attr2 = bExpr2[expr2] === 'Two';
+    let prop2 = bExpr2[expr2] === 'Two';
     let hdlr2 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
     let txt1 = ctx['state'].choice;
-    return block1([attr1, hdlr1, attr2, hdlr2, txt1]);
+    return block1([prop1, hdlr1, prop2, hdlr2, txt1]);
   }
 }"
 `;
@@ -351,18 +351,18 @@ exports[`t-model directive on an input type=radio, with initial value 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/></div>\`);
+  let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-property-0=\\"checked\\" block-handler-1=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-property-2=\\"checked\\" block-handler-3=\\"click\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'choice';
-    let attr1 = bExpr1[expr1] === 'One';
+    let prop1 = bExpr1[expr1] === 'One';
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     const bExpr2 = ctx['state'];
     const expr2 = 'choice';
-    let attr2 = bExpr2[expr2] === 'Two';
+    let prop2 = bExpr2[expr2] === 'Two';
     let hdlr2 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
-    return block1([attr1, hdlr1, attr2, hdlr2]);
+    return block1([prop1, hdlr1, prop2, hdlr2]);
   }
 }"
 `;
@@ -373,20 +373,20 @@ exports[`t-model directive on an input, type=checkbox 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input type=\\"checkbox\\" block-attribute-0=\\"checked\\" block-handler-1=\\"input\\"/><span><block-child-0/><block-child-1/></span></div>\`);
+  let block1 = createBlock(\`<div><input type=\\"checkbox\\" block-property-0=\\"checked\\" block-handler-1=\\"input\\"/><span><block-child-0/><block-child-1/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     const bExpr1 = ctx['state'];
     const expr1 = 'flag';
-    let attr1 = bExpr1[expr1];
+    let prop1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.checked; }];
     if (ctx['state'].flag) {
       b2 = text(\`yes\`);
     } else {
       b3 = text(\`no\`);
     }
-    return block1([attr1, hdlr1], [b2, b3]);
+    return block1([prop1, hdlr1], [b2, b3]);
   }
 }"
 `;
@@ -397,15 +397,15 @@ exports[`t-model directive on an textarea 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><textarea block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><textarea block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
-    let attr1 = bExpr1[expr1];
+    let prop1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].text;
-    return block1([attr1, hdlr1, txt1]);
+    return block1([prop1, hdlr1, txt1]);
   }
 }"
 `;
@@ -416,15 +416,15 @@ exports[`t-model directive t-model is applied before t-on-input 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\" block-handler-2=\\"input\\"/></div>\`);
+  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\" block-handler-2=\\"input\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
-    let attr1 = bExpr1[expr1];
+    let prop1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let hdlr2 = [ctx['onInput'], ctx];
-    return block1([attr1, hdlr1, hdlr2]);
+    return block1([prop1, hdlr1, hdlr2]);
   }
 }"
 `;
@@ -435,14 +435,14 @@ exports[`t-model directive t-model on an input with an undefined value 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
+  let block1 = createBlock(\`<input block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
-    let attr1 = bExpr1[expr1];
+    let prop1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    return block1([attr1, hdlr1]);
+    return block1([prop1, hdlr1]);
   }
 }"
 `;
@@ -453,17 +453,17 @@ exports[`t-model directive t-model on select with static options 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><select block-attribute-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"a\\"><block-text-2/></option><option value=\\"b\\"><block-text-3/></option><option value=\\"c\\"><block-text-4/></option></select></div>\`);
+  let block1 = createBlock(\`<div><select block-property-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"a\\"><block-text-2/></option><option value=\\"b\\"><block-text-3/></option><option value=\\"c\\"><block-text-4/></option></select></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'model';
-    let attr1 = bExpr1[expr1];
+    let prop1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = 'a';
     let txt2 = 'b';
     let txt3 = 'c';
-    return block1([attr1, hdlr1, txt1, txt2, txt3]);
+    return block1([prop1, hdlr1, txt1, txt2, txt3]);
   }
 }"
 `;
@@ -569,6 +569,36 @@ exports[`t-model directive t-model with dynamic values on select options in fore
 }"
 `;
 
+exports[`t-model directive t-model with radio button group in t-foreach 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, toNumber, withKey } = helpers;
+  
+  let block1 = createBlock(\`<div id=\\"get_data\\" block-handler-0=\\"click\\"><block-child-0/></div>\`);
+  let block3 = createBlock(\`<input type=\\"radio\\" name=\\"radio_group\\" block-property-0=\\"value\\" block-attribute-1=\\"id\\" block-property-2=\\"checked\\" block-handler-3=\\"click\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['getData'], ctx];
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['options']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`opt\`] = v_block2[i1];
+      const key1 = ctx['opt'];
+      let prop1 = new String((ctx['opt']) === 0 ? 0 : ((ctx['opt']) || \\"\\"));
+      let attr1 = ctx['opt'];
+      const bExpr1 = ctx['state'];
+      const expr1 = 'group';
+      let prop2 = bExpr1[expr1] === ctx['opt'];
+      let hdlr2 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
+      c_block2[i1] = withKey(block3([prop1, attr1, prop2, hdlr2]), key1);
+    }
+    const b2 = list(c_block2);
+    return block1([hdlr1], [b2]);
+  }
+}"
+`;
+
 exports[`t-model directive two inputs in a div alternating with a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -576,24 +606,24 @@ exports[`t-model directive two inputs in a div alternating with a t-if 1`] = `
   let { toNumber } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
-  let block2 = createBlock(\`<input class=\\"a\\" block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
-  let block3 = createBlock(\`<input class=\\"b\\" block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
+  let block2 = createBlock(\`<input class=\\"a\\" block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
+  let block3 = createBlock(\`<input class=\\"b\\" block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     if (ctx['state'].flag) {
       const bExpr1 = ctx['state'];
       const expr1 = 'text1';
-      let attr1 = bExpr1[expr1];
+      let prop1 = bExpr1[expr1];
       let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-      b2 = block2([attr1, hdlr1]);
+      b2 = block2([prop1, hdlr1]);
     }
     if (!ctx['state'].flag) {
       const bExpr2 = ctx['state'];
       const expr2 = 'text2';
-      let attr2 = bExpr2[expr2];
+      let prop2 = bExpr2[expr2];
       let hdlr2 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
-      b3 = block3([attr2, hdlr2]);
+      b3 = block3([prop2, hdlr2]);
     }
     return block1([], [b2, b3]);
   }
@@ -606,15 +636,15 @@ exports[`t-model directive with expression having a changing key 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'].something;
     const expr1 = ctx['text'].key;
-    let attr1 = bExpr1[expr1];
+    let prop1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].something[ctx['text'].key];
-    return block1([attr1, hdlr1, txt1]);
+    return block1([prop1, hdlr1, txt1]);
   }
 }"
 `;

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

@@ -111,8 +111,9 @@ exports[`t-on t-on method call in t-foreach 1`] = `
       const key1 = ctx['val'];
       let txt1 = ctx['val_index'];
       let txt2 = ctx['val']+'';
-      const v1 = ctx['val'];
-      let hdlr1 = [()=>this.addVal(v1), ctx];
+      const v1 = ctx['this'];
+      const v2 = ctx['val'];
+      let hdlr1 = [()=>v1.addVal(v2), ctx];
       c_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
     }
     const b2 = list(c_block2);
@@ -126,7 +127,7 @@ exports[`t-on t-on on component next to t-on on div 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { createCatcher } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   const catcher1 = createCatcher({\\"click\\":0});
   
   let block1 = createBlock(\`<div><block-child-0/><p block-handler-0=\\"click\\">dec</p></div>\`);
@@ -159,7 +160,7 @@ exports[`t-on t-on on components 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { createCatcher } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   const catcher1 = createCatcher({\\"click\\":0});
   
   return function template(ctx, node, key = \\"\\") {
@@ -188,7 +189,7 @@ exports[`t-on t-on on components and t-foreach 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, createCatcher, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   const catcher1 = createCatcher({\\"click\\":0});
   
   return function template(ctx, node, key = \\"\\") {
@@ -197,8 +198,9 @@ exports[`t-on t-on on components and t-foreach 1`] = `
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`name\`] = v_block1[i1];
       const key1 = ctx['name'];
-      const v1 = ctx['name'];
-      const hdlr1 = [()=>this.log(v1), ctx];
+      const v1 = ctx['this'];
+      const v2 = ctx['name'];
+      const hdlr1 = [()=>v1.log(v2), ctx];
       c_block1[i1] = withKey(catcher1(comp1({value: ctx['name']}, key + \`__1__\${key1}\`, node, this, null), [hdlr1]), key1);
     }
     return list(c_block1);
@@ -225,7 +227,7 @@ exports[`t-on t-on on components, variation 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { createCatcher } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   const catcher1 = createCatcher({\\"click\\":0});
   
   let block1 = createBlock(\`<div><span/><block-child-0/><p/></div>\`);
@@ -257,7 +259,7 @@ exports[`t-on t-on on components, with 'prevent' modifier 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { createCatcher } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   const catcher1 = createCatcher({\\"click.prevent\\":0});
   
   return function template(ctx, node, key = \\"\\") {
@@ -286,15 +288,16 @@ exports[`t-on t-on on components, with a handler update 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, createCatcher } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"value\\"]);
   const catcher1 = createCatcher({\\"click\\":0});
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"name\\", ctx['state'].name);
-    const v1 = ctx['name'];
-    const hdlr1 = [()=>this.log(v1), ctx];
+    const v1 = ctx['this'];
+    const v2 = ctx['name'];
+    const hdlr1 = [()=>v1.log(v2), ctx];
     return catcher1(comp1({value: ctx['name']}, key + \`__1\`, node, this, null), [hdlr1]);
   }
 }"
@@ -318,7 +321,7 @@ exports[`t-on t-on on destroyed components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -351,7 +354,7 @@ exports[`t-on t-on on slot, with 'prevent' modifier 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block1 = createBlock(\`<button>button</button>\`);
   
@@ -385,7 +388,7 @@ exports[`t-on t-on on t-set-slots 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, createCatcher, markRaw } = helpers;
   const catcher1 = createCatcher({\\"click\\":0});
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block6 = createBlock(\`<p>something</p>\`);
   let block7 = createBlock(\`<p>paragraph</p>\`);
@@ -393,7 +396,8 @@ exports[`t-on t-on on t-set-slots 1`] = `
   function slot1(ctx, node, key = \\"\\") {
     const b6 = block6();
     const b7 = block7();
-    const hdlr1 = [()=>this.state.count++, ctx];
+    const v1 = ctx['this'];
+    const hdlr1 = [()=>v1.state.count++, ctx];
     return catcher1(multi([b6, b7]), [hdlr1]);
   }
   
@@ -425,7 +429,7 @@ exports[`t-on t-on on t-slots 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block1 = createBlock(\`<p>something</p>\`);
   
@@ -450,7 +454,8 @@ exports[`t-on t-on on t-slots 2`] = `
     const b2 = text(\` [\`);
     const b3 = text(ctx['state'].count);
     const b4 = text(\`] \`);
-    const hdlr1 = [()=>this.state.count++, ctx];
+    const v1 = ctx['this'];
+    const hdlr1 = [()=>v1.state.count++, ctx];
     const b5 = catcher1(callSlot(ctx, node, key, 'default', false, {}), [hdlr1]);
     return multi([b2, b3, b4, b5]);
   }
@@ -462,7 +467,7 @@ exports[`t-on t-on when first component child is an empty component 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { createCatcher } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"list\\"]);
   const catcher1 = createCatcher({\\"click\\":0});
   
   let block1 = createBlock(\`<div block-handler-0=\\"click\\"><block-child-0/></div>\`);

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

@@ -5,7 +5,7 @@ exports[`components in t-out simple list 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, isBoundary, withDefault, LazyValue, safeOutput, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   function value1(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, this, null);

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

@@ -4,7 +4,7 @@ exports[`t-props basic use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, true, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -33,7 +33,7 @@ exports[`t-props child receives a copy of the t-props object, not the original 1
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, true, []);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1(Object.assign({}, ctx['childProps']), key + \`__1\`, node, this, null);
@@ -58,7 +58,7 @@ exports[`t-props t-props and other props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Comp\`, true, false, true, false);
+  const comp1 = app.createComponent(\`Comp\`, true, false, true, [\\"a\\"]);
   
   let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
   
@@ -88,7 +88,7 @@ exports[`t-props t-props only 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Comp\`, true, false, true, false);
+  const comp1 = app.createComponent(\`Comp\`, true, false, true, []);
   
   let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
   
@@ -117,7 +117,7 @@ exports[`t-props t-props with props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, true, [\\"a\\",\\"b\\"]);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   

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

@@ -5,7 +5,7 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Childcomp\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Childcomp\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
   
@@ -53,8 +53,8 @@ exports[`t-set slots with a t-set with a component in body 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, isBoundary, withDefault, LazyValue, safeOutput, markRaw } = helpers;
-  const comp1 = app.createComponent(\`C\`, true, false, false, true);
-  const comp2 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`C\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -106,8 +106,8 @@ exports[`t-set slots with an t-set with a component in body 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, isBoundary, withDefault, LazyValue, safeOutput, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  const comp2 = app.createComponent(\`Blorg\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Blorg\`, true, true, false, []);
   
   let block4 = createBlock(\`<div>coffee</div>\`);
   
@@ -163,8 +163,8 @@ exports[`t-set slots with an unused t-set with a component in body 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, isBoundary, withDefault, LazyValue, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  const comp2 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  const comp2 = app.createComponent(\`Child\`, true, true, false, []);
   
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -266,7 +266,7 @@ exports[`t-set t-set not altered by child comp 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
-  const comp1 = app.createComponent(\`Childcomp\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Childcomp\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
   
@@ -332,7 +332,7 @@ exports[`t-set t-set with a component in body 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
   

tests/components/concurrency.test.ts

@@ -1,6 +1,7 @@
 import {
   App,
   Component,
+  ComponentConstructor,
   mount,
   onMounted,
   onRendered,
@@ -4067,6 +4068,64 @@ test("renderings, destruction, patch, stuff, ... yet another variation", async (
   expect(fixture.innerHTML).toBe("ABD<p>2</p>");
 });
 
+test("delayed render does not go through when t-component value changed", async () => {
+  class C extends Component {
+    static template = xml`C`;
+    setup() {
+      useLogLifecycle("", true);
+    }
+  }
+
+  class B extends Component {
+    static template = xml`B<t t-esc="state.val"/>`;
+    state = useState({ val: 1 });
+    setup() {
+      useLogLifecycle("", true);
+      b = this;
+    }
+  }
+  let b: B;
+
+  class A extends Component {
+    static template = xml`A<t t-component="state.component"/>`;
+    state: { component: ComponentConstructor } = useState({ component: B });
+    setup() {
+      useLogLifecycle("", true);
+    }
+  }
+
+  const a = await mount(A, fixture);
+  expect(fixture.innerHTML).toBe("AB1");
+  expect([
+    "A:setup",
+    "A:willRender",
+    "B:setup",
+    "A:rendered",
+    "B:willRender",
+    "B:rendered",
+    "B:mounted",
+    "A:mounted",
+  ]).toBeLogged();
+  // start a render in B
+  b!.state.val = 2;
+  // start a render in A, invalidating the scheduled render of B, which could crash if executed.
+  a.state.component = C;
+  await nextTick();
+  expect(fixture.innerHTML).toBe("AC");
+  expect([
+    "A:willRender",
+    "C:setup",
+    "A:rendered",
+    "C:willRender",
+    "C:rendered",
+    "A:willPatch",
+    "B:willUnmount",
+    "B:willDestroy",
+    "C:mounted",
+    "A:patched",
+  ]).toBeLogged();
+});
+
 //   test.skip("components with shouldUpdate=false", async () => {
 //     const state = { p: 1, cc: 10 };
 

tests/components/props.test.ts

@@ -1,5 +1,5 @@
 import { Component, mount, onWillUpdateProps, useState, xml } from "../../src";
-import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
 
 let fixture: HTMLElement;
 
@@ -200,7 +200,7 @@ test("can bind function prop with bind suffix", async () => {
   expect(fixture.innerHTML).toBe("child");
 });
 
-test("bound functions is referentially equal after update", async () => {
+test("bound functions is not referentially equal after update", async () => {
   let isEqual = false;
   class Child extends Component {
     static template = xml`<t t-esc="props.val"/>`;
@@ -222,7 +222,52 @@ test("bound functions is referentially equal after update", async () => {
   parent.state.val = 3;
   await nextTick();
   expect(fixture.innerHTML).toBe("3");
-  expect(isEqual).toBe(true);
+  expect(isEqual).toBe(false);
+});
+
+test("bound functions are considered 'alike'", async () => {
+  class Child extends Component {
+    static template = xml`child`;
+    setup() {
+      useLogLifecycle();
+    }
+  }
+
+  class Parent extends Component {
+    static template = xml`
+      <t t-esc="state.val"/>
+      <Child fn.bind="someFunction"/>`;
+    static components = { Child };
+    state = useState({ val: 1 });
+    setup() {
+      useLogLifecycle();
+    }
+    someFunction() {}
+  }
+
+  const parent = await mount(Parent, fixture);
+  expect(fixture.innerHTML).toBe("1child");
+  expect([
+    "Parent:setup",
+    "Parent:willStart",
+    "Parent:willRender",
+    "Child:setup",
+    "Child:willStart",
+    "Parent:rendered",
+    "Child:willRender",
+    "Child:rendered",
+    "Child:mounted",
+    "Parent:mounted",
+  ]).toBeLogged();
+  parent.state.val = 3;
+  await nextTick();
+  expect([
+    "Parent:willRender",
+    "Parent:rendered",
+    "Parent:willPatch",
+    "Parent:patched",
+  ]).toBeLogged();
+  expect(fixture.innerHTML).toBe("3child");
 });
 
 test("throw if prop uses an unknown suffix", async () => {
@@ -239,3 +284,115 @@ test("throw if prop uses an unknown suffix", async () => {
     await mount(Parent, fixture);
   }).rejects.toThrowError("Invalid prop suffix");
 });
+
+test(".alike suffix in a simple case", async () => {
+  class Child extends Component {
+    static template = xml`<t t-esc="props.fn()"/>`;
+    setup() {
+      useLogLifecycle();
+    }
+  }
+
+  class Parent extends Component {
+    static template = xml`
+      <t t-esc="state.counter"/>
+      <Child fn.alike="() => 1"/>`;
+    static components = { Child };
+    state = useState({ counter: 0 });
+    setup() {
+      useLogLifecycle();
+    }
+  }
+
+  const parent = await mount(Parent, fixture);
+  expect([
+    "Parent:setup",
+    "Parent:willStart",
+    "Parent:willRender",
+    "Child:setup",
+    "Child:willStart",
+    "Parent:rendered",
+    "Child:willRender",
+    "Child:rendered",
+    "Child:mounted",
+    "Parent:mounted",
+  ]).toBeLogged();
+
+  expect(fixture.innerHTML).toBe("01");
+  parent.state.counter++;
+  await nextTick();
+  expect(fixture.innerHTML).toBe("11");
+  expect([
+    "Parent:willRender",
+    "Parent:rendered",
+    "Parent:willPatch",
+    "Parent:patched",
+  ]).toBeLogged();
+});
+
+test(".alike suffix in a list", async () => {
+  class Todo extends Component {
+    static template = xml`
+      <button t-on-click="props.toggle">
+        <t t-esc="props.todo.id"/><t t-if="props.todo.isChecked">V</t>
+      </button>`;
+    setup() {
+      useLogLifecycle();
+    }
+  }
+
+  class Parent extends Component {
+    static template = xml`
+      <t t-foreach="state.elems" t-as="elem" t-key="elem.id">
+        <Todo todo="elem" toggle.alike="() => this.toggle(elem.id)"/>
+      </t>`;
+    static components = { Todo };
+    state = useState({
+      elems: [
+        { id: 1, isChecked: false },
+        { id: 2, isChecked: true },
+      ],
+    });
+    setup() {
+      useLogLifecycle();
+    }
+    toggle(id: number) {
+      const todo = this.state.elems.find((el) => el.id === id)!;
+      todo.isChecked = !todo.isChecked;
+    }
+  }
+
+  await mount(Parent, fixture);
+  expect([
+    "Parent:setup",
+    "Parent:willStart",
+    "Parent:willRender",
+    "Todo:setup",
+    "Todo:willStart",
+    "Todo:setup",
+    "Todo:willStart",
+    "Parent:rendered",
+    "Todo:willRender",
+    "Todo:rendered",
+    "Todo:willRender",
+    "Todo:rendered",
+    "Todo:mounted",
+    "Todo:mounted",
+    "Parent:mounted",
+  ]).toBeLogged();
+
+  expect(fixture.innerHTML).toBe("<button>1</button><button>2V</button>");
+  fixture.querySelector("button")?.click();
+  await nextTick();
+  expect(fixture.innerHTML).toBe("<button>1V</button><button>2V</button>");
+  expect([
+    "Parent:willRender",
+    "Parent:rendered",
+    "Todo:willRender",
+    "Todo:rendered",
+    "Todo:willPatch",
+    "Todo:patched",
+    "Parent:willPatch",
+    "Parent:patched",
+  ]).toBeLogged();
+});

tests/components/props_validation.test.ts

@@ -1,5 +1,5 @@
 import { makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
-import { Component, onError, xml, mount, OwlError } from "../../src";
+import { Component, onError, xml, mount, OwlError, useState } from "../../src";
 import { App, DEV_MSG } from "../../src/runtime/app";
 import { validateProps } from "../../src/runtime/template_helpers";
 import { Schema } from "../../src/runtime/validation";
@@ -682,6 +682,29 @@ describe("props validation", () => {
     expect(error!.message).toBe("Invalid props for component 'SubComp': 'p' is missing");
   });
 
+  test("props validation does not cause additional subscription", async () => {
+    let obj = {
+      value: 1,
+      otherValue: 2,
+    };
+    class Child extends Component {
+      static props = {
+        obj: { type: Object, shape: { value: Number, otherValue: Number } },
+      };
+      static template = xml`<t t-esc="props.obj.value"/>`;
+    }
+    class Parent extends Component {
+      static template = xml`<Child obj="obj"/><t t-esc="obj.otherValue"/>`;
+      static components = { Child };
+
+      obj = useState(obj);
+    }
+    const app = new App(Parent, { test: true });
+    await app.mount(fixture);
+    expect(fixture.innerHTML).toBe("12");
+    expect(app.root!.subscriptions).toEqual([{ keys: ["otherValue"], target: obj }]);
+  });
+
   test("props are validated whenever component is updated", async () => {
     let error: Error;
     class SubComp extends Component {

tests/components/reactivity.test.ts

@@ -7,6 +7,7 @@ import {
   onWillUnmount,
   useState,
   xml,
+  toRaw,
 } from "../../src";
 import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
 
@@ -232,3 +233,34 @@ describe("reactivity in lifecycle", () => {
     expect(fixture.innerHTML).toBe("34");
   });
 });
+
+describe("subscriptions", () => {
+  test("subscriptions returns the keys and targets observed by the component", async () => {
+    class Comp extends Component {
+      static template = xml`<t t-esc="state.a"/>`;
+      state = useState({ a: 1, b: 2 });
+    }
+    const comp = await mount(Comp, fixture);
+    expect(fixture.innerHTML).toBe("1");
+    expect(comp.__owl__.subscriptions).toEqual([{ keys: ["a"], target: toRaw(comp.state) }]);
+  });
+
+  test("subscriptions returns the keys observed by the component", async () => {
+    class Child extends Component {
+      static template = xml`<t t-esc="props.state.b"/>`;
+      setup() {
+        child = this;
+      }
+    }
+    let child: Child;
+    class Parent extends Component {
+      static template = xml`<t t-esc="state.a"/><Child state="state"/>`;
+      static components = { Child };
+      state = useState({ a: 1, b: 2 });
+    }
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("12");
+    expect(parent.__owl__.subscriptions).toEqual([{ keys: ["a"], target: toRaw(parent.state) }]);
+    expect(child!.__owl__.subscriptions).toEqual([{ keys: ["b"], target: toRaw(parent.state) }]);
+  });
+});

tests/components/refs.test.ts

@@ -1,6 +1,14 @@
-import { App, Component, mount, onMounted, useRef, useState } from "../../src/index";
+import {
+  App,
+  Component,
+  mount,
+  onMounted,
+  onPatched,
+  useRef,
+  useState,
+  xml,
+} from "../../src/index";
 import { logStep, makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
-import { xml } from "../../src/index";
 
 snapshotEverything();
 let fixture: HTMLElement;
@@ -82,6 +90,28 @@ describe("refs", () => {
     expect(test.ref.el!.tagName).toBe("DIV");
   });
 
+  test("ref is unset when t-if goes to false after unrelated render", async () => {
+    class Comp extends Component {
+      static template = xml`<div t-if="state.show" t-att-class="state.class" t-ref="coucou"/>`;
+      state = useState({ show: true, class: "test" });
+      ref = useRef("coucou");
+    }
+
+    const comp = await mount(Comp, fixture);
+    expect(comp.ref.el).not.toBeNull();
+
+    comp.state.class = "test2";
+    await nextTick();
+
+    comp.state.show = false;
+    await nextTick();
+    expect(comp!.ref.el).toBeNull();
+
+    comp.state.show = true;
+    await nextTick();
+    expect(comp!.ref.el).not.toBeNull();
+  });
+
   test("throws if there are 2 same refs at the same time", async () => {
     const consoleWarn = console.warn;
     console.warn = jest.fn();
@@ -96,10 +126,10 @@ describe("refs", () => {
 
     const app = new App(Test, { test: true });
     const mountProm = expect(app.mount(fixture)).rejects.toThrowError(
-      "Cannot have 2 elements with same ref name at the same time"
+      'Cannot set the same ref more than once in the same component, ref "coucou" was set multiple times in Test'
     );
     await expect(nextAppError(app)).resolves.toThrow(
-      "Cannot have 2 elements with same ref name at the same time"
+      'Cannot set the same ref more than once in the same component, ref "coucou" was set multiple times in Test'
     );
     await mountProm;
     expect(console.warn).toBeCalledTimes(1);
@@ -128,4 +158,33 @@ describe("refs", () => {
     expect(fixture.innerHTML).toBe("<p>a<p>b</p></p>");
     expect(["<p>b</p>", "<p>a<p>b</p></p>"]).toBeLogged();
   });
+
+  test("refs and t-key", async () => {
+    let el;
+    class Test extends Component {
+      static components = {};
+      static template = xml`
+        <button t-on-click="() => state.renderId++" />
+        <p t-ref="root" t-key="state.renderId"/>`;
+      root = useRef("root");
+      state = useState({ renderId: 1 });
+
+      setup() {
+        onMounted(() => {
+          el = this.root.el;
+        });
+        onPatched(() => {
+          el = this.root.el;
+        });
+      }
+    }
+    await mount(Test, fixture);
+
+    expect(el).toBe(fixture.querySelector("p"));
+    const _el = el;
+    fixture.querySelector("button")!.click();
+    await nextTick();
+    expect(el).not.toBe(_el);
+    expect(el).toBe(fixture.querySelector("p"));
+  });
 });

tests/components/t_call.test.ts

@@ -345,14 +345,13 @@ describe("t-call", () => {
             <Child prop.bind="method">
               <div t-ref="myRef2">I'm the default slot</div>
               <t t-set="test" t-value="3"/>
-              <div t-esc="this.__owl__.name"/>
               <div t-esc="test"/>
             </Child>
           </t>
         </templates>`,
     });
     expect(fixture.innerHTML).toBe(
-      "<div>outside slot</div><div>I'm the default slot</div><div>Root</div><div>3</div>"
+      "<div>outside slot</div><div>I'm the default slot</div><div>3</div>"
     );
     expect(Object.keys(child.__owl__.refs)).toEqual([]);
     expect(Object.keys(root.__owl__.refs)).toEqual(["myRef", "myRef2"]);
@@ -383,4 +382,20 @@ describe("t-call", () => {
     });
     expect(fixture.innerHTML).toBe("");
   });
+
+  test("t-call-context: this is not available inside t-call-context", async () => {
+    class Root extends Component {
+      static template = xml`<t t-call="someTemplate" t-call-context="{}"/>`;
+    }
+
+    await mount(Root, fixture, {
+      templates: `
+        <templates>
+          <t t-name="someTemplate">
+            <t t-esc="this"/>
+          </t>
+        </templates>`,
+    });
+    expect(fixture.innerHTML).toBe("");
+  });
 });

tests/components/t_model.test.ts

@@ -644,4 +644,35 @@ describe("t-model directive", () => {
     const input = fixture.querySelector("input")!;
     await editInput(input, "Beam me up, Scotty");
   });
+
+  test("t-model with radio button group in t-foreach", async () => {
+    expect.assertions(6);
+    const steps: string[] = [];
+    class SomeComponent extends Component {
+      static template = xml`
+        <div t-on-click="getData" id="get_data">
+          <t t-foreach="options" t-as="opt" t-key="opt">
+            <input type="radio" name="radio_group" t-model="state.group" t-att-value="opt" t-att-id="opt"/>
+          </t>
+        </div>
+      `;
+      state = useState({ group: "scotty" });
+      options = ["beam", "scotty"];
+
+      getData() {
+        steps.push(`group: ${this.state.group}`);
+      }
+    }
+    await mount(SomeComponent, fixture);
+    const divEl = fixture.querySelector("#get_data") as HTMLElement;
+    expect(fixture.querySelector("input:checked")!.getAttribute("id")).toBe("scotty");
+    divEl.click();
+    expect(steps).toEqual(["group: scotty"]);
+    fixture.querySelector("input")!.click();
+    expect(steps).toEqual(["group: scotty", "group: beam"]);
+    await nextTick();
+    expect(fixture.querySelector("input:checked")!.getAttribute("id")).toBe("beam");
+    divEl.click();
+    expect(steps).toEqual(["group: scotty", "group: beam", "group: beam"]);
+  });
 });

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

@@ -159,7 +159,7 @@ exports[`Portal Child and Portal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block3 = createBlock(\`<div class=\\"portal\\"/>\`);
   
@@ -198,8 +198,8 @@ exports[`Portal Portal composed with t-slot 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child2\`, true, false, false, false);
-  const comp2 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp1 = app.createComponent(\`Child2\`, true, false, false, [\\"customHandler\\"]);
+  const comp2 = app.createComponent(\`Child\`, true, true, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -335,7 +335,7 @@ exports[`Portal conditional use of Portal (with sub Component) 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   const comp2 = app.createComponent(null, false, true, false, false);
   
   let block2 = createBlock(\`<span>1</span>\`);
@@ -398,7 +398,7 @@ exports[`Portal conditional use of Portal with child and div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
@@ -444,7 +444,7 @@ exports[`Portal conditional use of Portal with child and div, variation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block2 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -520,7 +520,7 @@ exports[`Portal lifecycle hooks of portal sub component are properly called 1`]
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   const comp2 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-0/></div>\`);
@@ -557,7 +557,7 @@ exports[`Portal portal and Child 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   let block2 = createBlock(\`<div class=\\"portal\\"/>\`);
   
@@ -622,7 +622,7 @@ exports[`Portal portal destroys on crash 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"error\\"]);
   const comp2 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -646,7 +646,7 @@ exports[`Portal portal destroys on crash 2`] = `
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['props'].error&&this.will.crash;
+    let txt1 = ctx['props'].error&&ctx['this'].will.crash;
     return block1([txt1]);
   }
 }"
@@ -657,7 +657,7 @@ exports[`Portal portal with child and props 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   const comp2 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -810,7 +810,7 @@ exports[`Portal portal's parent's env is not polluted 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   const comp2 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -843,7 +843,7 @@ exports[`Portal simple catchError with portal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
+  const comp1 = app.createComponent(\`Boom\`, true, false, false, []);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -970,7 +970,7 @@ exports[`Portal: UI/UX focus is kept across re-renders 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"val\\"]);
   const comp2 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);

tools/compile_xml.js

@@ -48,7 +48,7 @@ function writeToFile(filepath, data) {
 }
 
 // adapted from https://medium.com/@mhagemann/the-ultimate-way-to-slugify-a-url-string-in-javascript-b8e4a0d849e1
-const a = "·_,:;";
+const a = "·-_,:;";
 const p = new RegExp(a.split("").join("|"), "g");
 
 function slugify(str) {

tools/release.js

@@ -47,6 +47,18 @@ async function startRelease() {
   let file = await ask(`Release notes (${REL_NOTES_FILE}): `);
   file = file || REL_NOTES_FILE;
   let content;
+  if (!fs.existsSync(`./${file}`)) {
+    let lastRelease = await getOutput("git log --grep='\\[REL\\]' -n 1 --pretty=%H");
+    const commitsSinceLastRelease = await getOutput(`git log ${lastRelease.trim()}..HEAD --pretty=%s`);
+    const commitsAsMdList = commitsSinceLastRelease.trim().split("\n").map(l => " - " + l).join("\n");
+    log(`${file} did not exist, created a template containing all commits since last release.`)
+    fs.writeFileSync(file, `# v${next}\n\n${commitsAsMdList}`);
+    const shouldContinue = await ask(`Check that the contents of ${file} is correct, then press y to continue: `);
+    if (shouldContinue.toLowerCase() !== "y") {
+      log("aborted");
+      return;
+    }
+  }
   try {
     content = await readFile("./" + file);
   } catch (e) {
@@ -74,6 +86,7 @@ async function startRelease() {
   // ---------------------------------------------------------------------------
   log(`Step 3/${STEPS}: updating package.json...`);
   await replaceInFile("./package.json", current, next);
+  await replaceInFile("./src/version.ts", current, next);
 
   // ---------------------------------------------------------------------------
   log(`Step 4/${STEPS}: creating git commit...`);
@@ -104,7 +117,7 @@ async function startRelease() {
   // ---------------------------------------------------------------------------
 
   log(`Step 7/${STEPS}: Creating the release...`);
-  const relaseResult = await execCommand(`gh release create v${next} dist/*.js ${draft} -F ${REL_NOTES_FILE}`);
+  const relaseResult = await execCommand(`gh release create v${next} dist/*.js ${draft} -F ${file}`);
   if (relaseResult !== 0) {
     logError("github release failed. Aborting.");
     return;
@@ -120,7 +133,7 @@ async function startRelease() {
   if (shouldUploadPlayground) {
     log(`Bonus step: publishing new release on playground...`);
     let owl_code = null;
-    status = 0
+    let status = 0
 
     try {
       owl_code = await readFile("dist/owl.iife.js");
@@ -130,7 +143,8 @@ async function startRelease() {
       return;
     }
 
-    status += await execCommand("git checkout gh-pages");
+    status |= await execCommand("git checkout gh-pages");
+    status |= await execCommand("git pull --rebase");
     
     if (status !== 0) {
       logError("Couldn't switch to gh-pages branch")
@@ -144,9 +158,9 @@ async function startRelease() {
       return;
     }
     
-    status += await execCommand(`git commit -am "[IMP] update owl to v${next}"`);
-    status += await execCommand(`git push origin gh-pages`);
-    status += await execCommand("git checkout -");
+    status |= await execCommand(`git commit -am "[IMP] update owl to v${next}"`);
+    status |= await execCommand(`git push origin gh-pages`);
+    status |= await execCommand("git checkout -");
     if (status !== 0) {
       logError("Something went wrong for the playground update.")
     }
@@ -231,3 +245,19 @@ async function replaceInFile(file, from, to) {
     });
   });
 }
+
+async function getOutput(command) {
+  return new Promise((resolve, reject) => {
+    const childProcess = exec(command, (err, stdout, stderr) => {
+      if (err) {
+        reject(err);
+      }
+      resolve(stdout);
+    });
+    childProcess.on("exit", code => {
+      if (code !== 0) {
+        reject(code);
+      }
+    });
+  });
+}