From 55ac43c1db7978d1818a9edf0d32d0e01fcd8f58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Thu, 9 Jun 2022 14:55:57 +0200
Subject: [PATCH] [IMP] app: add fast path for when component has no prop

---
 src/compiler/code_generator.ts                |   6 +-
 src/runtime/app.ts                            |   9 +-
 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    | 166 +++++++--------
 .../__snapshots__/error_handling.test.ts.snap |  90 ++++-----
 .../__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          |  22 +-
 .../props_validation.test.ts.snap             | 142 ++++++-------
 .../__snapshots__/reactivity.test.ts.snap     |   6 +-
 .../__snapshots__/refs.test.ts.snap           |   4 +-
 .../__snapshots__/rendering.test.ts.snap      |  24 +--
 .../__snapshots__/slots.test.ts.snap          | 190 +++++++++---------
 .../__snapshots__/style_class.test.ts.snap    |  36 ++--
 .../__snapshots__/t_call.test.ts.snap         |  12 +-
 .../__snapshots__/t_component.test.ts.snap    |  12 +-
 .../__snapshots__/t_foreach.test.ts.snap      |  20 +-
 .../__snapshots__/t_key.test.ts.snap          |  16 +-
 .../__snapshots__/t_on.test.ts.snap           |  20 +-
 .../__snapshots__/t_props.test.ts.snap        |  10 +-
 .../__snapshots__/t_set.test.ts.snap          |  18 +-
 tests/misc/__snapshots__/portal.test.ts.snap  |  84 ++++----
 26 files changed, 548 insertions(+), 541 deletions(-)

diff --git a/src/compiler/code_generator.ts b/src/compiler/code_generator.ts
index f3217687..db7918da 100644
--- a/src/compiler/code_generator.ts
+++ b/src/compiler/code_generator.ts
@@ -1181,7 +1181,9 @@ export class CodeGenerator {
       id,
       expr: `app.createComponent(${
         ast.isDynamic ? null : expr
-      }, ${!ast.isDynamic}, ${!!ast.slots}, ${!!ast.dynamicProps})`,
+      }, ${!ast.isDynamic}, ${!!ast.slots}, ${!!ast.dynamicProps}, ${
+        !ast.props && !ast.dynamicProps
+      })`,
     });
 
     let blockExpr = `${id}(${propString}, ${keyArg}, node, ctx, ${ast.isDynamic ? expr : null})`;
@@ -1278,7 +1280,7 @@ export class CodeGenerator {
     let id = generateId("comp");
     this.staticDefs.push({
       id,
-      expr: `app.createComponent(null, false, true, false)`,
+      expr: `app.createComponent(null, false, true, false, false)`,
     });
 
     const target = compileExpr(ast.target);
diff --git a/src/runtime/app.ts b/src/runtime/app.ts
index 311d2e74..c2974abf 100644
--- a/src/runtime/app.ts
+++ b/src/runtime/app.ts
@@ -118,7 +118,8 @@ export class App<
     name: string | null,
     isStatic: boolean,
     hasSlotsProp: boolean,
-    hasDynamicPropList: boolean
+    hasDynamicPropList: boolean,
+    hasNoProp: boolean
   ) {
     const isDynamic = !isStatic;
     function _arePropsDifferent(props1: Props, props2: Props): boolean {
@@ -129,7 +130,11 @@ export class App<
       }
       return hasDynamicPropList && Object.keys(props1).length !== Object.keys(props2).length;
     }
-    const arePropsDifferent = hasSlotsProp ? () => true : _arePropsDifferent;
+    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/tests/__snapshots__/reactivity.test.ts.snap b/tests/__snapshots__/reactivity.test.ts.snap
index d9ca0e49..4a1e4872 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
-  const comp2 = app.createComponent(\`Child\`, true, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -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);
-  const comp2 = app.createComponent(\`Child\`, true, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -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);
-  const comp2 = app.createComponent(\`Parent\`, true, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(\`Parent\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Quantity\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/> Total: <block-text-0/> Count: <block-text-1/></div>\`);
   
diff --git a/tests/compiler/__snapshots__/misc.test.ts.snap b/tests/compiler/__snapshots__/misc.test.ts.snap
index d20f68a5..0d85de09 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);
+  const comp1 = app.createComponent(\`SlotButton\`, true, false, false, false);
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"><div block-attribute-1=\\"class\\"><div class=\\"batch_header\\"><a block-attribute-2=\\"href\\" block-attribute-3=\\"class\\" title=\\"View Batch\\"><block-text-4/><block-child-0/><i class=\\"arrow fa fa-window-maximize\\"/></a></div><block-child-1/><div class=\\"batch_slots\\"><block-child-2/><block-child-3/></div><div class=\\"batch_commits\\"><block-child-4/></div></div></div>\`);
   let block2 = createBlock(\`<i class=\\"fa fa-exclamation-triangle\\"/>\`);
@@ -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);
-  const comp2 = app.createComponent(\`BundlesList\`, true, false, false);
+  const comp1 = app.createComponent(\`BundlesList\`, true, false, false, false);
+  const comp2 = app.createComponent(\`BundlesList\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><header><nav class=\\"navbar navbar-expand-md navbar-light bg-light\\"><a block-attribute-0=\\"href\\"><b style=\\"color:#777;\\"><block-text-1/></b></a><button type=\\"button\\" class=\\"navbar-toggler\\" data-toggle=\\"collapse\\" data-target=\\"#top_menu_collapse\\"><span class=\\"navbar-toggler-icon\\"/></button><div class=\\"collapse navbar-collapse\\" id=\\"top_menu_collapse\\" aria-expanded=\\"false\\"><ul class=\\"nav navbar-nav ml-auto text-right\\" id=\\"top_menu\\"><block-child-0/><li class=\\"nav-item divider\\"/><block-child-1/></ul><div><div class=\\"input-group input-group-sm\\"><div class=\\"input-group-prepend input-group-sm\\"><button class=\\"btn btn-default fa fa-cog\\" title=\\"Settings\\" block-handler-2=\\"click\\"/><button class=\\"btn btn-default\\" block-handler-3=\\"click\\"> More </button><block-child-2/></div><input class=\\"form-control\\" type=\\"text\\" placeholder=\\"Search\\" aria-label=\\"Search\\" name=\\"search\\" block-attribute-4=\\"value\\" block-handler-5=\\"keyup\\" block-handler-6=\\"change\\" block-ref=\\"7\\"/><div class=\\"input-group-append\\"><button class=\\"btn btn-default fa fa-eraser\\" block-handler-8=\\"click\\"/></div></div></div></div></nav></header><div class=\\"container-fluid\\" block-ref=\\"9\\"><div class=\\"row\\"><!--div class=\\"form-group col-md-6\\">
                       <h5>Search options</h5>
diff --git a/tests/components/__snapshots__/basics.test.ts.snap b/tests/components/__snapshots__/basics.test.ts.snap
index e552299f..ee22d617 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);
+  const comp1 = app.createComponent(null, false, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].counter}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: 42}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({child: ctx['state'].child}, key + \`__1\`, node, ctx, 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);
-  const comp2 = app.createComponent(\`ChildB\`, true, false, false);
+  const comp1 = app.createComponent(\`ChildA\`, true, false, false, true);
+  const comp2 = app.createComponent(\`ChildB\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -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);
-  const comp2 = app.createComponent(\`SubWidget\`, true, false, false);
+  const comp1 = app.createComponent(\`SubWidget\`, true, false, false, true);
+  const comp2 = app.createComponent(\`SubWidget\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
@@ -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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, 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);
-  const comp2 = app.createComponent(\`Child\`, true, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -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);
+  const comp1 = app.createComponent(\`Counter\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, 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);
-  const comp2 = app.createComponent(\`Child\`, true, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><div><block-child-0/></div><div><block-child-1/></div></div>\`);
   
@@ -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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/><span><block-child-2/></span><block-child-3/></div>\`);
   let block2 = createBlock(\`<h1>hey</h1>\`);
@@ -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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   let block2 = createBlock(\`<div>somediv</div>\`);
@@ -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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   let block2 = createBlock(\`<div>somediv</div>\`);
@@ -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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   let block2 = createBlock(\`<div>somediv</div>\`);
@@ -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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
-  const comp2 = app.createComponent(\`Child\`, true, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-child-1/></div>\`);
   
@@ -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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, 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);
-  const comp2 = app.createComponent(\`Child\`, true, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = comp1({}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, true, false);
   
   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);
+  const comp1 = app.createComponent(\`Custom\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({flag: ctx['state'].flag}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`GComp\`, true, false, false, true);
   
   let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
   
diff --git a/tests/components/__snapshots__/concurrency.test.ts.snap b/tests/components/__snapshots__/concurrency.test.ts.snap
index d61a988e..12decd86 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = comp1({}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Element\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`C\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`C\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`TestW\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`ComponentD\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`ComponentD\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   
   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);
-  const comp2 = app.createComponent(\`ComponentC\`, true, false, false);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
+  const comp2 = app.createComponent(\`ComponentC\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`ComponentD\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   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);
-  const comp2 = app.createComponent(\`Child\`, true, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -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);
+  const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`C\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`C\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`C\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({fromB: ctx['state'].fromB,fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`D\`, true, false, false, true);
   
   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);
-  const comp2 = app.createComponent(\`ChildB\`, true, false, false);
+  const comp1 = app.createComponent(\`ChildA\`, true, false, false, true);
+  const comp2 = app.createComponent(\`ChildB\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -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);
-  const comp2 = app.createComponent(\`ChildB\`, true, false, false);
+  const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
+  const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
   
   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);
-  const comp2 = app.createComponent(\`ChildB\`, true, false, false);
+  const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
+  const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].value}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Parent\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({state: ctx['state']}, key + \`__1\`, node, ctx, 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);
-  const comp2 = app.createComponent(\`ReactiveChild\`, true, false, false);
+  const comp1 = app.createComponent(\`DelayedChild\`, true, false, false, false);
+  const comp2 = app.createComponent(\`ReactiveChild\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = comp1({value: ctx['props'].state.value}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`B\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`C\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`D\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(\`C\`);
@@ -1217,7 +1217,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);
+  const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].value}, key + \`__1\`, node, ctx, null);
@@ -1229,7 +1229,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);
+  const comp1 = app.createComponent(\`C\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].someValue+ctx['props'].value}, key + \`__1\`, node, ctx, null);
@@ -1241,7 +1241,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);
+  const comp1 = app.createComponent(\`D\`, true, false, false, true);
   
   let block3 = createBlock(\`<p><block-text-0/></p>\`);
   
@@ -1273,7 +1273,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);
+  const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(\`A\`);
@@ -1287,7 +1287,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);
+  const comp1 = app.createComponent(\`C\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -1304,7 +1304,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);
+  const comp1 = app.createComponent(\`D\`, true, false, false, true);
   
   let block4 = createBlock(\`<p><block-text-0/></p>\`);
   
@@ -1339,7 +1339,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);
+  const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].value}, key + \`__1\`, node, ctx, null);
@@ -1351,7 +1351,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);
+  const comp1 = app.createComponent(\`C\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['props'].value);
@@ -1380,7 +1380,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);
+  const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -1397,7 +1397,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);
+  const comp1 = app.createComponent(\`C\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['props'].value);
@@ -1426,7 +1426,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);
+  const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].value}, key + \`__1\`, node, ctx, null);
@@ -1438,7 +1438,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);
+  const comp1 = app.createComponent(\`C\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -1470,8 +1470,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);
-  const comp2 = app.createComponent(\`C\`, true, false, false);
+  const comp1 = app.createComponent(\`B\`, true, false, false, false);
+  const comp2 = app.createComponent(\`C\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -1512,7 +1512,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -1540,7 +1540,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1572,7 +1572,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].value}, key + \`__1\`, node, ctx, null);
@@ -1595,7 +1595,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1613,7 +1613,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);
+  const comp1 = app.createComponent(\`SubChild\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1641,7 +1641,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><button block-handler-0=\\"click\\">Click</button><block-child-0/></div>\`);
   
@@ -1673,7 +1673,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].value}, key + \`__1\`, node, ctx, null);
@@ -1696,8 +1696,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);
-  const comp2 = app.createComponent(\`D\`, true, false, false);
+  const comp1 = app.createComponent(\`B\`, true, false, false, false);
+  const comp2 = app.createComponent(\`D\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(\`A\`);
@@ -1712,7 +1712,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);
+  const comp1 = app.createComponent(\`C\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -1764,7 +1764,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);
+  const comp1 = app.createComponent(null, false, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -1803,7 +1803,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);
+  const comp1 = app.createComponent(null, false, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1831,7 +1831,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);
+  const comp1 = app.createComponent(null, false, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
@@ -1859,7 +1859,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);
+  const comp1 = app.createComponent(\`Panel\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-0/></div>\`);
   
@@ -1893,7 +1893,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].value}, key + \`__1\`, node, ctx, null);
@@ -1916,7 +1916,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);
+  const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1945,7 +1945,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);
+  const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
   
   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 7464cbdd..15586fb1 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);
+  const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`SomeMispelledComponent\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`SomeMispelledComponent\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, null);
@@ -42,7 +42,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);
+  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -71,7 +71,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);
+  const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -105,7 +105,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -135,7 +135,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -177,8 +177,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);
-  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false);
+  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, false);
+  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -232,8 +232,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);
-  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false);
+  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
+  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -273,9 +273,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);
-  const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false);
-  const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false);
+  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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -356,8 +356,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);
-  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false);
+  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
+  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -411,8 +411,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);
-  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false);
+  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
+  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -468,7 +468,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);
+  const comp1 = app.createComponent(\`B\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, null);
@@ -480,7 +480,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);
+  const comp1 = app.createComponent(\`C\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -495,7 +495,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);
+  const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -528,7 +528,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);
+  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -562,8 +562,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);
-  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false);
+  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
+  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -616,8 +616,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);
-  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false);
+  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, false);
+  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><span><block-text-0/></span><block-child-0/></div>\`);
   
@@ -672,8 +672,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);
-  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false);
+  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
+  const comp2 = app.createComponent(\`ErrorBoundary\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -726,9 +726,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);
-  const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false);
-  const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false);
+  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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -795,7 +795,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -815,7 +815,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);
+  const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -845,8 +845,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);
-  const comp2 = app.createComponent(\`ErrorHandler\`, true, true, false);
+  const comp1 = app.createComponent(null, false, false, false, true);
+  const comp2 = app.createComponent(\`ErrorHandler\`, true, true, false, false);
   
   function slot1(ctx, node, key = \\"\\") {
     const Comp1 = ctx['cp'].Comp;
@@ -884,7 +884,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);
+  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, null);
@@ -923,8 +923,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);
-  const comp2 = app.createComponent(\`Catch\`, true, true, false);
+  const comp1 = app.createComponent(null, false, false, false, false);
+  const comp2 = app.createComponent(\`Catch\`, true, true, false, false);
   
   function slot1(ctx, node, key = \\"\\") {
     const Comp1 = ctx['elem'][1];
@@ -990,9 +990,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);
-  const comp2 = app.createComponent(\`ErrorComponent\`, true, false, false);
-  const comp3 = app.createComponent(\`ErrorBoundary\`, true, true, false);
+  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);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -1056,7 +1056,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);
+  const comp1 = app.createComponent(\`Concrete\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, null);
@@ -1087,7 +1087,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);
+  const comp1 = app.createComponent(\`Concrete\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, null);
@@ -1118,7 +1118,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1161,7 +1161,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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 745c1f3e..49f9a575 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<span block-handler-0=\\"click\\"><block-child-0/><block-text-1/></span>\`);
   
@@ -62,7 +62,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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 6b12938b..aa8fc709 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({p: 1}, key + \`__1\`, node, ctx, 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);
-  const comp2 = app.createComponent(\`OtherChild\`, true, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(\`OtherChild\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -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);
-  const comp2 = app.createComponent(\`OtherChild\`, true, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(\`OtherChild\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({p: 1}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, null);
diff --git a/tests/components/__snapshots__/hooks.test.ts.snap b/tests/components/__snapshots__/hooks.test.ts.snap
index f39eb3af..a1c42fb7 100644
--- a/tests/components/__snapshots__/hooks.test.ts.snap
+++ b/tests/components/__snapshots__/hooks.test.ts.snap
@@ -41,7 +41,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);
+  const comp1 = app.createComponent(\`MyComponent\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].value}, key + \`__1\`, node, ctx, null);
@@ -108,7 +108,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['env'].val);
@@ -140,7 +140,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['env'].val);
@@ -168,7 +168,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['env'].val);
@@ -224,7 +224,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, null);
@@ -323,7 +323,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);
+  const comp1 = app.createComponent(\`MyComponent\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
@@ -383,7 +383,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, null);
diff --git a/tests/components/__snapshots__/lifecycle.test.ts.snap b/tests/components/__snapshots__/lifecycle.test.ts.snap
index 0dad2084..1bb2a9ed 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);
-  const comp2 = app.createComponent(\`C\`, true, false, false);
+  const comp1 = app.createComponent(\`B\`, true, false, false, true);
+  const comp2 = app.createComponent(\`C\`, true, false, false, true);
   
   let block1 = createBlock(\`<div>A<block-child-0/><block-child-1/></div>\`);
   
@@ -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);
-  const comp2 = app.createComponent(\`E\`, true, false, false);
-  const comp3 = app.createComponent(\`F\`, true, false, false);
+  const comp1 = app.createComponent(\`D\`, true, false, false, true);
+  const comp2 = app.createComponent(\`E\`, true, false, false, true);
+  const comp3 = app.createComponent(\`F\`, true, false, false, true);
   
   let block1 = createBlock(\`<div>C<block-child-0/><block-child-1/><block-child-2/></div>\`);
   
@@ -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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Test\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({rev: ctx['rev']}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({value: ctx['state'].value}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`ChildChild\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({someValue: ctx['state'].value}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`ChildChild\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({n: ctx['state'].n}, key + \`__1\`, node, ctx, null);
diff --git a/tests/components/__snapshots__/props.test.ts.snap b/tests/components/__snapshots__/props.test.ts.snap
index 4c4dfbf3..7dec1359 100644
--- a/tests/components/__snapshots__/props.test.ts.snap
+++ b/tests/components/__snapshots__/props.test.ts.snap
@@ -4,7 +4,7 @@ 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -34,7 +34,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -69,7 +69,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -98,7 +98,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({'prop-name': 7}, key + \`__1\`, node, ctx, null);
@@ -124,7 +124,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({'some-dashed-prop': 5}, key + \`__1\`, node, ctx, null);
@@ -151,7 +151,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<p>43</p>\`);
@@ -191,7 +191,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -224,7 +224,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -256,7 +256,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({propName: \`1\${ctx['someVal']}3\`}, key + \`__1\`, node, ctx, null);
@@ -280,7 +280,7 @@ exports[`bound functions is referentially equal after update 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { bind } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({val: ctx['state'].val,fn: bind(ctx, ctx['someFunction'])}, key + \`__1\`, node, ctx, null);
@@ -304,7 +304,7 @@ exports[`can bind function prop with bind suffix 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { bind } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({doSomething: bind(ctx, ctx['doSomething'])}, key + \`__1\`, node, ctx, null);
diff --git a/tests/components/__snapshots__/props_validation.test.ts.snap b/tests/components/__snapshots__/props_validation.test.ts.snap
index 46f0e1d3..88b843aa 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -684,7 +684,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -715,7 +715,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -732,7 +732,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -749,7 +749,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -780,7 +780,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -811,7 +811,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -828,7 +828,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -845,7 +845,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -875,7 +875,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -892,7 +892,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -909,7 +909,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -939,7 +939,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -956,7 +956,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -973,7 +973,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1003,7 +1003,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1020,7 +1020,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1037,7 +1037,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1067,7 +1067,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1084,7 +1084,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1101,7 +1101,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1131,7 +1131,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1148,7 +1148,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1165,7 +1165,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1195,7 +1195,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1212,7 +1212,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1229,7 +1229,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1259,7 +1259,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1276,7 +1276,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1293,7 +1293,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1323,7 +1323,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1340,7 +1340,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1357,7 +1357,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1387,7 +1387,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1404,7 +1404,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1421,7 +1421,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1451,7 +1451,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1468,7 +1468,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1485,7 +1485,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1515,7 +1515,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1532,7 +1532,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1549,7 +1549,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1579,7 +1579,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1596,7 +1596,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1613,7 +1613,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);
+  const comp1 = app.createComponent(\`SubComp\`, true, false, false, true);
   
   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 104845a3..d85f81b6 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({obj: ctx['obj'],reactiveObj: ctx['reactiveObj']}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
diff --git a/tests/components/__snapshots__/refs.test.ts.snap b/tests/components/__snapshots__/refs.test.ts.snap
index deb32d7d..2c443162 100644
--- a/tests/components/__snapshots__/refs.test.ts.snap
+++ b/tests/components/__snapshots__/refs.test.ts.snap
@@ -42,7 +42,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);
+  const comp1 = app.createComponent(\`Test\`, true, false, false, false);
   
   let block1 = createBlock(\`<p block-ref=\\"0\\"><block-text-1/><block-child-0/></p>\`);
   
@@ -64,7 +64,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);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><span class=\\"counter\\"><block-text-0/></span><block-child-0/></div>\`);
   let block2 = createBlock(\`<button block-handler-0=\\"click\\" block-ref=\\"1\\">do something</button>\`);
diff --git a/tests/components/__snapshots__/rendering.test.ts.snap b/tests/components/__snapshots__/rendering.test.ts.snap
index 0aa8f1e0..c161d792 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({val: ctx['state'].val}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`C\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = comp1({}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({a: ctx['state']}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({a: ctx['state']}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`C\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({obj: ctx['props'].obj}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, true, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1(Object.assign({}, ctx['state']), key + \`__1\`, node, ctx, null);
diff --git a/tests/components/__snapshots__/slots.test.ts.snap b/tests/components/__snapshots__/slots.test.ts.snap
index f60a5e5b..4e9bfc49 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);
+  const comp1 = app.createComponent(\`Dialog\`, true, false, false, true);
   
   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);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<span>header</span>\`);
@@ -82,7 +82,7 @@ exports[`slots can define and call slots with bound params 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, bind, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     return text(\`abc\`);
@@ -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);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   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);
-  const comp2 = app.createComponent(\`Child\`, true, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(\`Child\`, true, true, false, true);
   
   let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   
@@ -206,7 +206,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, null);
@@ -219,7 +219,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);
+  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
   
   function defaultContent1(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, null);
@@ -246,7 +246,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, null);
@@ -287,7 +287,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);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   let block1 = createBlock(\`<span>sts rocks</span>\`);
   
@@ -318,7 +318,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);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<span>sts rocks</span>\`);
@@ -354,7 +354,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);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -394,7 +394,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);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -433,7 +433,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);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -478,7 +478,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     return text(ctx['slotScope']['some-value']);
@@ -507,7 +507,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -545,7 +545,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);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     return text(\`sts rocks\`);
@@ -574,7 +574,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);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -609,7 +609,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);
+  const comp1 = app.createComponent(\`Toggler\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<p>slot1</p>\`);
@@ -656,7 +656,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);
+  const comp1 = app.createComponent(\`Toggler\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<p>slot1</p>\`);
@@ -706,7 +706,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     return text(\`some text\`);
@@ -736,7 +736,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);
+  const comp1 = app.createComponent(\`Dialog\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -767,7 +767,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);
+  const comp1 = app.createComponent(\`P\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, null);
@@ -779,7 +779,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);
+  const comp1 = app.createComponent(\`A\`, true, false, false, false);
   
   let block2 = createBlock(\`<button block-handler-0=\\"click\\">inc</button>\`);
   
@@ -798,7 +798,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);
+  const comp1 = app.createComponent(\`B\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     const b2 = text(\`[A]\`);
@@ -852,7 +852,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);
+  const comp1 = app.createComponent(\`C\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(\`[B]\`);
@@ -881,7 +881,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);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<span>sts</span>\`);
@@ -920,7 +920,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);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<span>sts</span>\`);
@@ -960,9 +960,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);
-  const comp2 = app.createComponent(\`C\`, true, false, false);
-  const comp3 = app.createComponent(\`B\`, true, true, false);
+  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);
   
   function slot1(ctx, node, key = \\"\\") {
     return comp1({val: 1}, key + \`__1\`, node, ctx, null);
@@ -1014,8 +1014,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);
-  const comp2 = app.createComponent(\`Child\`, true, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp2 = app.createComponent(\`Child\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<p>A<block-text-0/></p>\`);
@@ -1065,8 +1065,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);
-  const comp2 = app.createComponent(\`Child\`, true, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp2 = app.createComponent(\`Child\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<p>A<block-text-0/></p>\`);
@@ -1115,7 +1115,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);
+  const comp1 = app.createComponent(\`Dialog\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1150,8 +1150,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);
-  const comp2 = app.createComponent(\`Child\`, true, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  const comp2 = app.createComponent(\`Child\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<p>A<block-text-0/></p>\`);
@@ -1210,9 +1210,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);
-  const comp2 = app.createComponent(\`Child2\`, true, true, false);
-  const comp3 = app.createComponent(\`Child\`, true, true, false);
+  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);
   
   let block1 = createBlock(\`<span id=\\"parent\\"><block-child-0/></span>\`);
   
@@ -1279,8 +1279,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);
-  const comp2 = app.createComponent(\`Child\`, true, true, false);
+  const comp1 = app.createComponent(\`Slot\`, true, false, false, false);
+  const comp2 = app.createComponent(\`Child\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     return comp1({val: ctx['state'].val}, key + \`__1\`, node, ctx, null);
@@ -1297,7 +1297,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);
+  const comp1 = app.createComponent(\`GrandChild\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     return callSlot(ctx, node, key, 'default', false, {});
@@ -1342,7 +1342,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);
+  const comp1 = app.createComponent(\`Dialog\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, null);
@@ -1370,7 +1370,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     return text(\`some text\`);
@@ -1402,7 +1402,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -1440,7 +1440,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     return text(ctx['slotScope'].fn());
@@ -1469,7 +1469,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     return text(\`some text\`);
@@ -1498,7 +1498,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -1538,7 +1538,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
@@ -1571,7 +1571,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     return text(\`some text\`);
@@ -1605,7 +1605,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -1645,7 +1645,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);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1695,7 +1695,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);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1744,7 +1744,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);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1779,8 +1779,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);
-  const comp2 = app.createComponent(\`GenericComponent\`, true, true, false);
+  const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, false);
+  const comp2 = app.createComponent(\`GenericComponent\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><button block-handler-0=\\"click\\">Inc[<block-text-1/>]</button><block-child-0/></div>\`);
   
@@ -1831,8 +1831,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);
-  const comp2 = app.createComponent(\`SlotDisplay\`, true, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp2 = app.createComponent(\`SlotDisplay\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     return comp1({parent: 'Parent'}, key + \`__1\`, node, ctx, null);
@@ -1849,7 +1849,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = comp1({parent: 'SlotDisplay'}, key + \`__1\`, node, ctx, null);
@@ -1879,8 +1879,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);
-  const comp2 = app.createComponent(\`SlotDisplay\`, true, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp2 = app.createComponent(\`SlotDisplay\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     return comp1({parent: 'Parent'}, key + \`__1\`, node, ctx, null);
@@ -1897,7 +1897,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = comp1({parent: 'SlotDisplay'}, key + \`__1\`, node, ctx, null);
@@ -1926,7 +1926,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">some text</button>\`);
   
@@ -1965,7 +1965,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">some text</button>\`);
   
@@ -2000,8 +2000,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);
-  const comp2 = app.createComponent(\`Child\`, true, true, false);
+  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
+  const comp2 = app.createComponent(\`Child\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -2045,7 +2045,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -2065,7 +2065,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);
+  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, null);
@@ -2101,7 +2101,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   let block2 = createBlock(\`<p><block-text-0/></p>\`);
   let block3 = createBlock(\`<p><block-text-0/></p>\`);
@@ -2138,7 +2138,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);
+  const comp1 = app.createComponent(\`Link\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     return text(\`hey\`);
@@ -2169,7 +2169,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, null);
@@ -2205,7 +2205,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);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><span class=\\"counter\\"><block-text-0/></span><block-child-0/></div>\`);
   let block2 = createBlock(\`<button block-handler-0=\\"click\\">do something</button>\`);
@@ -2244,7 +2244,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);
+  const comp1 = app.createComponent(\`Link\`, true, true, false, false);
   
   let block1 = createBlock(\`<div><u><block-child-0/></u></div>\`);
   let block3 = createBlock(\`<li><block-child-0/></li>\`);
@@ -2292,7 +2292,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);
+  const comp1 = app.createComponent(\`Link\`, true, true, false, false);
   
   let block1 = createBlock(\`<div><u><block-child-0/></u></div>\`);
   let block3 = createBlock(\`<li><block-child-0/></li>\`);
@@ -2341,7 +2341,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);
+  const comp1 = app.createComponent(\`Link\`, true, true, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -2381,7 +2381,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);
+  const comp1 = app.createComponent(\`A\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<p>hey<block-text-0/></p>\`);
@@ -2407,7 +2407,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);
+  const comp1 = app.createComponent(\`B\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -2442,7 +2442,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -2487,7 +2487,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block4 = createBlock(\`<div><block-text-0/></div>\`);
@@ -2546,7 +2546,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -2594,7 +2594,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);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -2631,7 +2631,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);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -2671,7 +2671,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);
+  const comp1 = app.createComponent(\`Wrapper\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -2731,8 +2731,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);
-  const comp2 = app.createComponent(\`Dialog\`, true, true, false);
+  const comp1 = app.createComponent(\`Child3\`, true, false, false, true);
+  const comp2 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   let block1 = createBlock(\`<span id=\\"c1\\"><block-child-0/></span>\`);
   
@@ -2752,8 +2752,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);
-  const comp2 = app.createComponent(\`Modal\`, true, true, false);
+  const comp1 = app.createComponent(\`Portal\`, true, true, false, true);
+  const comp2 = app.createComponent(\`Modal\`, true, true, false, true);
   
   let block1 = createBlock(\`<span id=\\"c2\\"><block-child-0/></span>\`);
   
@@ -2820,7 +2820,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);
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   let block1 = createBlock(\`<button>The Button</button>\`);
   
@@ -2839,7 +2839,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);
+  const comp1 = app.createComponent(\`Wrapper\`, true, true, false, true);
   
   let block1 = createBlock(\`<div block-handler-0=\\"click\\"><block-child-0/></div>\`);
   
@@ -2873,7 +2873,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);
+  const comp1 = app.createComponent(\`Slotted\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -2909,7 +2909,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div class=\\"slot\\"><block-child-0/></div>\`);
   
@@ -2938,8 +2938,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);
-  const comp2 = app.createComponent(\`SlotComponent\`, true, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp2 = app.createComponent(\`SlotComponent\`, true, true, false, true);
   
   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 5064939c..e35edcf5 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: 'fromparent'}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: 'some-class'}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: 'fromparent'}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`ChildChild\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: (ctx['props'].class||'')+' fromchild'}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: 'a  b'}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: 'someclass',child: ctx['state'].child}, key + \`__1\`, node, ctx, 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);
-  const comp2 = app.createComponent(\`ChildB\`, true, false, false);
+  const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
+  const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
@@ -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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: 'a  b c   d'}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: 'from parent'}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: 'a'}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: 'hey'}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({style: 'font-weight: bold;'}, key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({class: {a:true,b:ctx['state'].b}}, key + \`__1\`, node, ctx, null);
diff --git a/tests/components/__snapshots__/t_call.test.ts.snap b/tests/components/__snapshots__/t_call.test.ts.snap
index 3c8300dc..d87a829f 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, null);
@@ -194,7 +194,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, null);
@@ -231,7 +231,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({}, key + \`__1\`, node, ctx, null);
@@ -328,7 +328,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({val: ctx['state'].val}, key + \`__1\`, node, ctx, null);
@@ -381,7 +381,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1({val: ctx['val']}, key + \`__1\`, node, ctx, null);
diff --git a/tests/components/__snapshots__/t_component.test.ts.snap b/tests/components/__snapshots__/t_component.test.ts.snap
index bbed735a..0fb3f5a3 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);
+  const comp1 = app.createComponent(null, false, false, false, true);
   
   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);
+  const comp1 = app.createComponent(null, false, false, false, true);
   
   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);
+  const comp1 = app.createComponent(null, false, false, false, true);
   
   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);
+  const comp1 = app.createComponent(null, false, false, false, true);
   
   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);
+  const comp1 = app.createComponent(null, false, false, false, true);
   
   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);
+  const comp1 = app.createComponent(null, false, false, false, true);
   
   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 e937aee4..2719e02d 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><ul><block-child-0/></ul></div>\`);
   let block3 = createBlock(\`<li><block-child-0/></li>\`);
@@ -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, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -80,7 +80,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);
+  const comp1 = app.createComponent(\`SubComponent\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<div><block-child-0/></div>\`);
@@ -118,7 +118,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -165,7 +165,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<p><block-child-0/></p>\`);
@@ -214,7 +214,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -248,7 +248,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -285,7 +285,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -322,7 +322,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
@@ -359,7 +359,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   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 d5b26b97..9bcc2a78 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   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);
-  const comp2 = app.createComponent(\`Child\`, true, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, false);
   
   let block1 = createBlock(\`<span><block-child-0/><block-child-1/></span>\`);
   
@@ -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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   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);
-  const comp2 = app.createComponent(\`Child\`, true, false, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key1'];
diff --git a/tests/components/__snapshots__/t_on.test.ts.snap b/tests/components/__snapshots__/t_on.test.ts.snap
index 663bf014..9b7f3490 100644
--- a/tests/components/__snapshots__/t_on.test.ts.snap
+++ b/tests/components/__snapshots__/t_on.test.ts.snap
@@ -126,7 +126,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   const catcher1 = createCatcher({\\"click\\":0});
   
   let block1 = createBlock(\`<div><block-child-0/><p block-handler-0=\\"click\\">dec</p></div>\`);
@@ -159,7 +159,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   const catcher1 = createCatcher({\\"click\\":0});
   
   return function template(ctx, node, key = \\"\\") {
@@ -188,7 +188,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   const catcher1 = createCatcher({\\"click\\":0});
   
   return function template(ctx, node, key = \\"\\") {
@@ -225,7 +225,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   const catcher1 = createCatcher({\\"click\\":0});
   
   let block1 = createBlock(\`<div><span/><block-child-0/><p/></div>\`);
@@ -257,7 +257,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   const catcher1 = createCatcher({\\"click.prevent\\":0});
   
   return function template(ctx, node, key = \\"\\") {
@@ -286,7 +286,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   const catcher1 = createCatcher({\\"click\\":0});
   
   return function template(ctx, node, key = \\"\\") {
@@ -318,7 +318,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -351,7 +351,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   let block1 = createBlock(\`<button>button</button>\`);
   
@@ -385,7 +385,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   let block6 = createBlock(\`<p>something</p>\`);
   let block7 = createBlock(\`<p>paragraph</p>\`);
@@ -425,7 +425,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);
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   let block1 = createBlock(\`<p>something</p>\`);
   
diff --git a/tests/components/__snapshots__/t_props.test.ts.snap b/tests/components/__snapshots__/t_props.test.ts.snap
index 5316949f..4f78687f 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);
+  const comp1 = app.createComponent(\`Child\`, true, false, true, false);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, true, false);
   
   return function template(ctx, node, key = \\"\\") {
     return comp1(Object.assign({}, ctx['childProps']), key + \`__1\`, node, ctx, 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);
+  const comp1 = app.createComponent(\`Comp\`, true, false, true, false);
   
   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);
+  const comp1 = app.createComponent(\`Comp\`, true, false, true, false);
   
   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);
+  const comp1 = app.createComponent(\`Child\`, true, false, true, false);
   
   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 00958ae2..2312d7c8 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);
+  const comp1 = app.createComponent(\`Childcomp\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
   
@@ -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);
-  const comp2 = app.createComponent(\`Child\`, true, true, false);
+  const comp1 = app.createComponent(\`C\`, true, false, false, true);
+  const comp2 = app.createComponent(\`Child\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -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);
-  const comp2 = app.createComponent(\`Blorg\`, true, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(\`Blorg\`, true, true, false, true);
   
   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);
-  const comp2 = app.createComponent(\`Child\`, true, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(\`Child\`, true, true, false, true);
   
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -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);
+  const comp1 = app.createComponent(\`Childcomp\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
   
@@ -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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
   
diff --git a/tests/misc/__snapshots__/portal.test.ts.snap b/tests/misc/__snapshots__/portal.test.ts.snap
index c40458b7..621ebeb9 100644
--- a/tests/misc/__snapshots__/portal.test.ts.snap
+++ b/tests/misc/__snapshots__/portal.test.ts.snap
@@ -6,7 +6,7 @@ exports[`Portal Add and remove portals 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, withKey } = helpers;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   function slot1(ctx, node, key = \\"\\") {
     const b3 = text(\` Portal\`);
@@ -34,7 +34,7 @@ exports[`Portal Add and remove portals on div 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, withKey } = helpers;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block2 = createBlock(\`<div> Portal<block-text-0/></div>\`);
   
@@ -63,7 +63,7 @@ exports[`Portal Add and remove portals with t-foreach 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, withKey } = helpers;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block2 = createBlock(\`<div><block-text-0/><block-child-0/></div>\`);
   
@@ -95,7 +95,7 @@ exports[`Portal Add and remove portals with t-foreach and destroy 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, withKey } = helpers;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block2 = createBlock(\`<div><block-text-0/><block-child-0/></div>\`);
   
@@ -127,7 +127,7 @@ exports[`Portal Add and remove portals with t-foreach inside div 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, withKey } = helpers;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<div><block-text-0/><block-child-0/></div>\`);
@@ -160,8 +160,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);
-  const comp2 = app.createComponent(\`Child\`, true, true, false);
+  const comp1 = app.createComponent(\`Child2\`, true, false, false, false);
+  const comp2 = app.createComponent(\`Child\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -182,7 +182,7 @@ exports[`Portal Portal composed with t-slot 2`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   function slot1(ctx, node, key = \\"\\") {
     return callSlot(ctx, node, key, 'default', false, {});
@@ -213,7 +213,7 @@ exports[`Portal basic use of portal 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><span>1</span><block-child-0/></div>\`);
   let block2 = createBlock(\`<p>2</p>\`);
@@ -234,7 +234,7 @@ exports[`Portal basic use of portal in dev mode 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><span>1</span><block-child-0/></div>\`);
   let block2 = createBlock(\`<p>2</p>\`);
@@ -255,7 +255,7 @@ exports[`Portal basic use of portal on div 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><span>1</span><block-child-0/></div>\`);
   let block2 = createBlock(\`<div><p>2</p></div>\`);
@@ -276,7 +276,7 @@ exports[`Portal basic use of portal, variation 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><span>1</span><block-child-0/></div>\`);
   let block2 = createBlock(\`<p>2</p>\`);
@@ -297,8 +297,8 @@ 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);
-  const comp2 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp2 = app.createComponent(null, false, true, false, false);
   
   let block2 = createBlock(\`<span>1</span>\`);
   
@@ -336,7 +336,7 @@ exports[`Portal conditional use of Portal 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block2 = createBlock(\`<span>1</span>\`);
   let block3 = createBlock(\`<p>2</p>\`);
@@ -360,7 +360,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
@@ -378,7 +378,7 @@ exports[`Portal conditional use of Portal with child and div 2`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, withKey } = helpers;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><span>hasPortal</span><block-child-0/></div>\`);
   let block3 = createBlock(\`<p>thePortal</p>\`);
@@ -406,7 +406,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);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   let block2 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -427,7 +427,7 @@ exports[`Portal conditional use of Portal with child and div, variation 2`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, withKey } = helpers;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block2 = createBlock(\`<span>hasPortal</span>\`);
   let block4 = createBlock(\`<p>thePortal</p>\`);
@@ -457,7 +457,7 @@ exports[`Portal conditional use of Portal with div 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block2 = createBlock(\`<div><span>hasPortal</span><block-child-0/></div>\`);
   let block3 = createBlock(\`<p>thePortal</p>\`);
@@ -482,8 +482,8 @@ 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);
-  const comp2 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp2 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-0/></div>\`);
   
@@ -520,7 +520,7 @@ exports[`Portal portal could have dynamically no content 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<span><block-text-0/></span>\`);
@@ -546,8 +546,8 @@ 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);
-  const comp2 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp2 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -581,8 +581,8 @@ 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);
-  const comp2 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp2 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -616,7 +616,7 @@ exports[`Portal portal with dynamic body 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<span><block-text-0/></span>\`);
@@ -645,7 +645,7 @@ exports[`Portal portal with many children 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<div>1</div>\`);
@@ -669,7 +669,7 @@ exports[`Portal portal with no content 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -693,7 +693,7 @@ exports[`Portal portal with only text as content 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -713,7 +713,7 @@ exports[`Portal portal with target not in dom 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<div>2</div>\`);
@@ -734,8 +734,8 @@ 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);
-  const comp2 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -767,7 +767,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);
+  const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
@@ -788,7 +788,7 @@ exports[`Portal simple catchError with portal 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><span>1</span><block-child-0/></div>\`);
   let block2 = createBlock(\`<p><block-text-0/></p>\`);
@@ -810,7 +810,7 @@ exports[`Portal with target in template (after portal) 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><span>1</span><block-child-0/><div id=\\"local-target\\"/></div>\`);
   let block2 = createBlock(\`<p>2</p>\`);
@@ -831,7 +831,7 @@ exports[`Portal with target in template (before portal) 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><div id=\\"local-target\\"/><span>1</span><block-child-0/></div>\`);
   let block2 = createBlock(\`<p>2</p>\`);
@@ -852,7 +852,7 @@ exports[`Portal: Props validation target must be a valid selector 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<div>2</div>\`);
@@ -873,7 +873,7 @@ exports[`Portal: Props validation target must be a valid selector 2 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<div>2</div>\`);
@@ -894,8 +894,8 @@ 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);
-  const comp2 = app.createComponent(null, false, true, false);
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp2 = app.createComponent(null, false, true, false, false);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);