From a51b28667106f4f4cf3bbd01f7cf9ac3ae16d6e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Mon, 27 Feb 2023 07:57:33 +0100
Subject: [PATCH] [IMP] implement .alike suffix on props

It is common in Owl components to have anonymous function as props.
However, since each rendering create a different (but equivalent)
closure, Owl will consider the props different, so will update the child
component, but this is (often) not necessary.

This commit will help reduce the problem by introducing a new `.alike`
prop suffix, that will let Owl know that each version of that specific
prop should be considered the same, so, will be ignored by the props
comparison code.

closes #1360
---
 doc/reference/props.md                        |  45 ++++
 src/compiler/code_generator.ts                |  26 ++-
 src/runtime/app.ts                            |  37 ++-
 src/runtime/template_helpers.ts               |  19 --
 tests/__snapshots__/reactivity.test.ts.snap   |  22 +-
 .../compiler/__snapshots__/misc.test.ts.snap  |   6 +-
 .../__snapshots__/basics.test.ts.snap         |  78 +++----
 .../__snapshots__/concurrency.test.ts.snap    | 168 +++++++-------
 .../__snapshots__/error_handling.test.ts.snap |  92 ++++----
 .../__snapshots__/event_handling.test.ts.snap |   4 +-
 .../higher_order_component.test.ts.snap       |  16 +-
 .../__snapshots__/hooks.test.ts.snap          |  14 +-
 .../__snapshots__/lifecycle.test.ts.snap      |  62 ++---
 .../__snapshots__/props.test.ts.snap          | 123 ++++++++--
 .../props_validation.test.ts.snap             | 148 ++++++------
 .../__snapshots__/reactivity.test.ts.snap     |   8 +-
 .../__snapshots__/refs.test.ts.snap           |   4 +-
 .../__snapshots__/rendering.test.ts.snap      |  24 +-
 .../__snapshots__/slots.test.ts.snap          | 212 +++++++++---------
 .../__snapshots__/style_class.test.ts.snap    |  36 +--
 .../__snapshots__/t_call.test.ts.snap         |  28 +--
 .../__snapshots__/t_component.test.ts.snap    |  12 +-
 .../__snapshots__/t_foreach.test.ts.snap      |  24 +-
 .../__snapshots__/t_key.test.ts.snap          |  16 +-
 .../__snapshots__/t_on.test.ts.snap           |  22 +-
 .../__snapshots__/t_out.test.ts.snap          |   2 +-
 .../__snapshots__/t_props.test.ts.snap        |  10 +-
 .../__snapshots__/t_set.test.ts.snap          |  18 +-
 tests/components/props.test.ts                | 163 +++++++++++++-
 tests/misc/__snapshots__/portal.test.ts.snap  |  26 +--
 30 files changed, 879 insertions(+), 586 deletions(-)

diff --git a/doc/reference/props.md b/doc/reference/props.md
index 4fcfbd9b..7d673339 100644
--- a/doc/reference/props.md
+++ b/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:
diff --git a/src/compiler/code_generator.ts b/src/compiler/code_generator.ts
index 626b8e26..18b99314 100644
--- a/src/compiler/code_generator.ts
+++ b/src/compiler/code_generator.ts
@@ -1132,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}'`;
@@ -1237,13 +1240,18 @@ 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) {
diff --git a/src/runtime/app.ts b/src/runtime/app.ts
index 1b4b1946..caca43f5 100644
--- a/src/runtime/app.ts
+++ b/src/runtime/app.ts
@@ -139,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;
 
diff --git a/src/runtime/template_helpers.ts b/src/runtime/template_helpers.ts
index f472a6d5..e786f223 100644
--- a/src/runtime/template_helpers.ts
+++ b/src/runtime/template_helpers.ts
@@ -167,24 +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;
-}
-
 /**
  * Validate the component props (or next props) against the (static) props
  * description.  This is potentially an expensive operation: it may needs to
@@ -260,7 +242,6 @@ export const helpers = {
   validateProps,
   LazyValue,
   safeOutput,
-  bind,
   createCatcher,
   markRaw,
   OwlError,
diff --git a/tests/__snapshots__/reactivity.test.ts.snap b/tests/__snapshots__/reactivity.test.ts.snap
index 01a773a1..9740828b 100644
--- a/tests/__snapshots__/reactivity.test.ts.snap
+++ b/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>\`);
   
diff --git a/tests/compiler/__snapshots__/misc.test.ts.snap b/tests/compiler/__snapshots__/misc.test.ts.snap
index 2d3e8f81..2d4aa3bf 100644
--- a/tests/compiler/__snapshots__/misc.test.ts.snap
+++ b/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,8 +184,8 @@ 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-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>
diff --git a/tests/components/__snapshots__/basics.test.ts.snap b/tests/components/__snapshots__/basics.test.ts.snap
index 47905346..0cb03129 100644
--- a/tests/components/__snapshots__/basics.test.ts.snap
+++ b/tests/components/__snapshots__/basics.test.ts.snap
@@ -4,7 +4,7 @@ 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'];
@@ -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>\`);
   
diff --git a/tests/components/__snapshots__/concurrency.test.ts.snap b/tests/components/__snapshots__/concurrency.test.ts.snap
index 500448ae..9ab6733a 100644
--- a/tests/components/__snapshots__/concurrency.test.ts.snap
+++ b/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\`);
@@ -1217,7 +1217,7 @@ 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, true);
+  const comp1 = app.createComponent(null, false, false, false, []);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(\`A\`);
@@ -1256,7 +1256,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(\`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);
@@ -1268,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);
@@ -1280,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>\`);
   
@@ -1312,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\`);
@@ -1326,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;
@@ -1343,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>\`);
   
@@ -1378,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);
@@ -1390,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);
@@ -1419,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;
@@ -1436,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);
@@ -1465,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);
@@ -1477,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;
@@ -1509,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;
@@ -1551,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;
@@ -1579,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>\`);
   
@@ -1611,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);
@@ -1634,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>\`);
   
@@ -1652,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>\`);
   
@@ -1680,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>\`);
   
@@ -1712,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);
@@ -1735,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\`);
@@ -1751,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;
@@ -1803,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);
@@ -1842,7 +1842,7 @@ 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>\`);
   
@@ -1870,7 +1870,7 @@ 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'];
@@ -1898,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>\`);
   
@@ -1932,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);
@@ -1955,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>\`);
   
@@ -1984,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>\`);
   
diff --git a/tests/components/__snapshots__/error_handling.test.ts.snap b/tests/components/__snapshots__/error_handling.test.ts.snap
index 8e807327..b4417a9f 100644
--- a/tests/components/__snapshots__/error_handling.test.ts.snap
+++ b/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,8 +926,8 @@ 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;
@@ -966,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);
@@ -1005,8 +1005,8 @@ 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];
@@ -1073,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>\`);
   
@@ -1139,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);
@@ -1170,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);
@@ -1201,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>\`);
   
@@ -1244,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>\`);
   
diff --git a/tests/components/__snapshots__/event_handling.test.ts.snap b/tests/components/__snapshots__/event_handling.test.ts.snap
index d111aadc..3884bf07 100644
--- a/tests/components/__snapshots__/event_handling.test.ts.snap
+++ b/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>\`);
   
diff --git a/tests/components/__snapshots__/higher_order_component.test.ts.snap b/tests/components/__snapshots__/higher_order_component.test.ts.snap
index dd69227b..8b5de999 100644
--- a/tests/components/__snapshots__/higher_order_component.test.ts.snap
+++ b/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);
diff --git a/tests/components/__snapshots__/hooks.test.ts.snap b/tests/components/__snapshots__/hooks.test.ts.snap
index 2dc2e9c6..c54cadac 100644
--- a/tests/components/__snapshots__/hooks.test.ts.snap
+++ b/tests/components/__snapshots__/hooks.test.ts.snap
@@ -39,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);
@@ -106,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);
@@ -138,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);
@@ -166,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);
@@ -222,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);
@@ -320,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;
@@ -379,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);
diff --git a/tests/components/__snapshots__/lifecycle.test.ts.snap b/tests/components/__snapshots__/lifecycle.test.ts.snap
index 285e939d..e24b0974 100644
--- a/tests/components/__snapshots__/lifecycle.test.ts.snap
+++ b/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);
diff --git a/tests/components/__snapshots__/props.test.ts.snap b/tests/components/__snapshots__/props.test.ts.snap
index 7f67df30..af9913b7 100644
--- a/tests/components/__snapshots__/props.test.ts.snap
+++ b/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);
   }
 }"
 `;
diff --git a/tests/components/__snapshots__/props_validation.test.ts.snap b/tests/components/__snapshots__/props_validation.test.ts.snap
index 7b167f60..081ab66e 100644
--- a/tests/components/__snapshots__/props_validation.test.ts.snap
+++ b/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>\`);
   
@@ -845,7 +845,7 @@ exports[`props validation props validation does not cause additional subscriptio
 "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\\"]);
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {obj: ctx['obj']};
@@ -872,7 +872,7 @@ 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>\`);
   
@@ -889,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>\`);
   
@@ -906,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>\`);
   
@@ -936,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>\`);
   
@@ -953,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>\`);
   
@@ -970,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>\`);
   
@@ -1000,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>\`);
   
@@ -1017,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>\`);
   
@@ -1034,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>\`);
   
@@ -1064,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>\`);
   
@@ -1081,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>\`);
   
@@ -1098,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>\`);
   
@@ -1128,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>\`);
   
@@ -1145,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>\`);
   
@@ -1162,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>\`);
   
@@ -1192,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>\`);
   
@@ -1209,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>\`);
   
@@ -1226,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>\`);
   
@@ -1256,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>\`);
   
@@ -1273,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>\`);
   
@@ -1290,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>\`);
   
@@ -1320,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>\`);
   
@@ -1337,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>\`);
   
@@ -1354,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>\`);
   
@@ -1384,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>\`);
   
@@ -1401,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>\`);
   
@@ -1418,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>\`);
   
@@ -1448,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>\`);
   
@@ -1465,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>\`);
   
@@ -1482,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>\`);
   
@@ -1512,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>\`);
   
@@ -1529,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>\`);
   
@@ -1546,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>\`);
   
@@ -1576,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>\`);
   
@@ -1593,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>\`);
   
@@ -1610,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>\`);
   
@@ -1640,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>\`);
   
@@ -1657,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>\`);
   
@@ -1674,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>\`);
   
diff --git a/tests/components/__snapshots__/reactivity.test.ts.snap b/tests/components/__snapshots__/reactivity.test.ts.snap
index 7b35b2e9..763ab45f 100644
--- a/tests/components/__snapshots__/reactivity.test.ts.snap
+++ b/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>\`);
   
@@ -156,7 +156,7 @@ exports[`subscriptions subscriptions returns the keys observed by the component
 "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 = \\"\\") {
     const b2 = text(ctx['state'].a);
diff --git a/tests/components/__snapshots__/refs.test.ts.snap b/tests/components/__snapshots__/refs.test.ts.snap
index af83f838..e15027c7 100644
--- a/tests/components/__snapshots__/refs.test.ts.snap
+++ b/tests/components/__snapshots__/refs.test.ts.snap
@@ -59,7 +59,7 @@ 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>\`);
   
@@ -100,7 +100,7 @@ exports[`refs refs are properly bound in 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><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>\`);
diff --git a/tests/components/__snapshots__/rendering.test.ts.snap b/tests/components/__snapshots__/rendering.test.ts.snap
index 7c37bde4..65854d4c 100644
--- a/tests/components/__snapshots__/rendering.test.ts.snap
+++ b/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);
diff --git a/tests/components/__snapshots__/slots.test.ts.snap b/tests/components/__snapshots__/slots.test.ts.snap
index b8fe1a97..ee492341 100644
--- a/tests/components/__snapshots__/slots.test.ts.snap
+++ b/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,8 +159,8 @@ 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\\"/>\`);
   
@@ -205,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);
@@ -218,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);
@@ -245,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);
@@ -286,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>\`);
   
@@ -317,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>\`);
@@ -353,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>\`);
   
@@ -393,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>\`);
   
@@ -432,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>\`);
   
@@ -477,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']);
@@ -506,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;
@@ -544,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\`);
@@ -573,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>\`);
   
@@ -608,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 \`);
@@ -666,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>\`);
@@ -713,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>\`);
@@ -763,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\`);
@@ -793,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>\`);
   
@@ -824,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);
@@ -836,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>\`);
   
@@ -855,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]\`);
@@ -909,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]\`);
@@ -938,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>\`);
@@ -977,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>\`);
@@ -1017,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);
@@ -1071,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>\`);
@@ -1122,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>\`);
@@ -1172,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>\`);
   
@@ -1207,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>\`);
@@ -1267,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>\`);
   
@@ -1336,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);
@@ -1354,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, {});
@@ -1399,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);
@@ -1427,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\`);
@@ -1459,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;
@@ -1497,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());
@@ -1513,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)});
   }
 }"
 `;
@@ -1526,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\`);
@@ -1555,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;
@@ -1595,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);
@@ -1628,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\`);
@@ -1662,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;
@@ -1702,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>\`);
   
@@ -1752,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>\`);
   
@@ -1801,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>\`);
   
@@ -1836,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>\`);
   
@@ -1888,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);
@@ -1906,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);
@@ -1936,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);
@@ -1954,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);
@@ -1983,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>\`);
   
@@ -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);
@@ -2376,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>\`);
@@ -2415,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>\`);
@@ -2463,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>\`);
@@ -2512,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>\`);
   
@@ -2552,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>\`);
@@ -2578,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>\`);
   
@@ -2613,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>\`);
   
@@ -2658,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>\`);
@@ -2717,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>\`);
   
@@ -2765,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>\`);
   
@@ -2802,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>\`);
   
@@ -2841,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\`);
@@ -2872,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);
@@ -2932,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>\`);
   
@@ -2953,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>\`);
   
@@ -3021,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>\`);
   
@@ -3040,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>\`);
   
@@ -3074,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>\`);
   
@@ -3110,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>\`);
   
@@ -3139,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>\`);
   
diff --git a/tests/components/__snapshots__/style_class.test.ts.snap b/tests/components/__snapshots__/style_class.test.ts.snap
index 77665f4d..55f0d25a 100644
--- a/tests/components/__snapshots__/style_class.test.ts.snap
+++ b/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);
@@ -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);
diff --git a/tests/components/__snapshots__/t_call.test.ts.snap b/tests/components/__snapshots__/t_call.test.ts.snap
index 375665ae..4478fc6a 100644
--- a/tests/components/__snapshots__/t_call.test.ts.snap
+++ b/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);
@@ -196,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);
@@ -233,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);
@@ -330,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);
@@ -383,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);
@@ -422,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);
@@ -463,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']};
@@ -534,8 +534,8 @@ 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>\`);
@@ -556,7 +556,7 @@ exports[`t-call t-call-context: ComponentNode is not looked up in the context 2`
     let ref1 = (el) => this.__owl__.setRef((\`myRef\`), el);
     const b2 = block2([ref1]);
     const ctx1 = capture(ctx);
-    const b6 = comp1({prop: bind(this, ctx['method']),slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    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]);
   }
 }"
@@ -592,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']);
diff --git a/tests/components/__snapshots__/t_component.test.ts.snap b/tests/components/__snapshots__/t_component.test.ts.snap
index 8de56c71..6a9ef104 100644
--- a/tests/components/__snapshots__/t_component.test.ts.snap
+++ b/tests/components/__snapshots__/t_component.test.ts.snap
@@ -4,7 +4,7 @@ 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>\`);
   
@@ -46,7 +46,7 @@ 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;
@@ -86,7 +86,7 @@ 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;
@@ -126,7 +126,7 @@ 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>\`);
   
@@ -158,7 +158,7 @@ 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'];
@@ -195,7 +195,7 @@ 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'];
diff --git a/tests/components/__snapshots__/t_foreach.test.ts.snap b/tests/components/__snapshots__/t_foreach.test.ts.snap
index c612e6bf..819b7040 100644
--- a/tests/components/__snapshots__/t_foreach.test.ts.snap
+++ b/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>\`);
   
diff --git a/tests/components/__snapshots__/t_key.test.ts.snap b/tests/components/__snapshots__/t_key.test.ts.snap
index 43488f61..bde84761 100644
--- a/tests/components/__snapshots__/t_key.test.ts.snap
+++ b/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'];
diff --git a/tests/components/__snapshots__/t_on.test.ts.snap b/tests/components/__snapshots__/t_on.test.ts.snap
index 9d710f37..7b81880f 100644
--- a/tests/components/__snapshots__/t_on.test.ts.snap
+++ b/tests/components/__snapshots__/t_on.test.ts.snap
@@ -127,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>\`);
@@ -160,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 = \\"\\") {
@@ -189,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 = \\"\\") {
@@ -227,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>\`);
@@ -259,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 = \\"\\") {
@@ -288,7 +288,7 @@ 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 = \\"\\") {
@@ -321,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>\`);
   
@@ -354,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>\`);
   
@@ -388,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>\`);
@@ -429,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>\`);
   
@@ -467,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>\`);
diff --git a/tests/components/__snapshots__/t_out.test.ts.snap b/tests/components/__snapshots__/t_out.test.ts.snap
index 164ba07f..3e2af694 100644
--- a/tests/components/__snapshots__/t_out.test.ts.snap
+++ b/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);
diff --git a/tests/components/__snapshots__/t_props.test.ts.snap b/tests/components/__snapshots__/t_props.test.ts.snap
index 8b578382..7cc8efda 100644
--- a/tests/components/__snapshots__/t_props.test.ts.snap
+++ b/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>\`);
   
diff --git a/tests/components/__snapshots__/t_set.test.ts.snap b/tests/components/__snapshots__/t_set.test.ts.snap
index e25f5d4b..7f023e06 100644
--- a/tests/components/__snapshots__/t_set.test.ts.snap
+++ b/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>\`);
   
diff --git a/tests/components/props.test.ts b/tests/components/props.test.ts
index 88da8a3a..8b8c7d82 100644
--- a/tests/components/props.test.ts
+++ b/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();
+});
diff --git a/tests/misc/__snapshots__/portal.test.ts.snap b/tests/misc/__snapshots__/portal.test.ts.snap
index a920d8da..5840ced6 100644
--- a/tests/misc/__snapshots__/portal.test.ts.snap
+++ b/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>\`);
@@ -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>\`);