From 7eaecac0b53b4f41f723b2ace5e4bec4ea120ea5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Mon, 20 Dec 2021 11:19:59 +0100
Subject: [PATCH] [REF] tests: improve test helpers

- remove snapshotApp
- remove addTemplates
- simplify helpers
- make sure snapshotted templates are snapshotted with the app config
---
 src/app/template_set.ts                       |   17 +-
 src/compiler/index.ts                         |    1 -
 tests/__snapshots__/reactivity.test.ts.snap   |  158 +-
 .../__snapshots__/error_handling.test.ts.snap |   14 -
 .../__snapshots__/event_handling.test.ts.snap |   68 +-
 .../compiler/__snapshots__/misc.test.ts.snap  |   94 +-
 .../__snapshots__/t_call.test.ts.snap         |  444 +++---
 .../compiler/__snapshots__/t_esc.test.ts.snap |   30 +-
 .../__snapshots__/t_foreach.test.ts.snap      |   48 +-
 .../compiler/__snapshots__/t_out.test.ts.snap |   62 +-
 .../compiler/__snapshots__/t_set.test.ts.snap |   42 +-
 .../__snapshots__/template_set.test.ts.snap   |   46 +-
 tests/compiler/attributes.test.ts             |    8 +-
 tests/compiler/misc.test.ts                   |   13 +-
 tests/compiler/t_debug_log.test.ts            |   10 +-
 tests/compiler/translation.test.ts            |   54 +-
 tests/compiler/validation.test.ts             |    4 +-
 .../__snapshots__/basics.test.ts.snap         |  455 +++---
 .../__snapshots__/concurrency.test.ts.snap    |  664 ++++-----
 .../__snapshots__/error_handling.test.ts.snap |  526 +++----
 .../__snapshots__/event_handling.test.ts.snap |   26 +-
 .../higher_order_component.test.ts.snap       |  112 +-
 .../__snapshots__/hooks.test.ts.snap          |   54 +-
 .../__snapshots__/lifecycle.test.ts.snap      |  376 +++--
 .../__snapshots__/props.test.ts.snap          |  190 +--
 .../props_validation.test.ts.snap             | 1037 +++++++++++++-
 .../__snapshots__/reactivity.test.ts.snap     |   30 +-
 .../__snapshots__/refs.test.ts.snap           |   30 +-
 .../__snapshots__/slots.test.ts.snap          | 1276 ++++++++---------
 .../__snapshots__/style_class.test.ts.snap    |  226 +--
 .../__snapshots__/t_call.test.ts.snap         |  150 +-
 .../__snapshots__/t_component.test.ts.snap    |  193 ++-
 .../__snapshots__/t_foreach.test.ts.snap      |  131 +-
 .../__snapshots__/t_key.test.ts.snap          |  110 +-
 .../__snapshots__/t_on.test.ts.snap           |   28 +-
 .../__snapshots__/t_props.test.ts.snap        |   92 +-
 .../__snapshots__/t_set.test.ts.snap          |   76 +-
 tests/components/error_handling.test.ts       |    1 -
 tests/components/props_validation.test.ts     |  109 +-
 tests/components/slots.test.ts                |   30 +-
 tests/components/style_class.test.ts          |    9 +
 tests/components/t_call.test.ts               |   22 +-
 tests/components/t_foreach.test.ts            |   25 +-
 tests/components/t_key.test.ts                |   27 +-
 tests/helpers.ts                              |  108 +-
 tests/misc/__snapshots__/memo.test.ts.snap    |   27 +-
 tests/misc/__snapshots__/portal.test.ts.snap  |  172 +--
 tests/misc/portal.test.ts                     |   11 +
 48 files changed, 4157 insertions(+), 3279 deletions(-)
 delete mode 100644 tests/compiler/__snapshots__/error_handling.test.ts.snap

diff --git a/src/app/template_set.ts b/src/app/template_set.ts
index 81ea996f..7ff281a1 100644
--- a/src/app/template_set.ts
+++ b/src/app/template_set.ts
@@ -81,13 +81,7 @@ export class TemplateSet {
       if (rawTemplate === undefined) {
         throw new Error(`Missing template: "${name}"`);
       }
-      const templateFn = compile(rawTemplate, {
-        name,
-        dev: this.dev,
-        translateFn: this.translateFn,
-        translatableAttributes: this.translatableAttributes,
-      });
-
+      const templateFn = this._compileTemplate(name, rawTemplate);
       // first add a function to lazily get the template, in case there is a
       // recursive call to the template name
       this.templates[name] = (context, parent) => this.templates[name](context, parent);
@@ -96,4 +90,13 @@ export class TemplateSet {
     }
     return this.templates[name];
   }
+
+  _compileTemplate(name: string, template: string | Node) {
+    return compile(template, {
+      name,
+      dev: this.dev,
+      translateFn: this.translateFn,
+      translatableAttributes: this.translatableAttributes,
+    });
+  }
 }
diff --git a/src/compiler/index.ts b/src/compiler/index.ts
index b6f62466..547c6322 100644
--- a/src/compiler/index.ts
+++ b/src/compiler/index.ts
@@ -22,7 +22,6 @@ export function compile(template: string | Node, options: CompileOptions = {}):
   // code generation
   const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext });
   const code = codeGenerator.generateCode();
-
   // template function
   return new Function("bdom, helpers", code) as TemplateFunction;
 }
diff --git a/tests/__snapshots__/reactivity.test.ts.snap b/tests/__snapshots__/reactivity.test.ts.snap
index 69bb5cf4..e2c36b4a 100644
--- a/tests/__snapshots__/reactivity.test.ts.snap
+++ b/tests/__snapshots__/reactivity.test.ts.snap
@@ -51,11 +51,14 @@ exports[`Reactivity: useState destroyed component before being mounted is inacti
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['contextObj'].a;
-    return block1([d1]);
+    let b2;
+    if (ctx['state'].flag) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return block1([], [b2]);
   }
 }"
 `;
@@ -65,23 +68,6 @@ exports[`Reactivity: useState destroyed component before being mounted is inacti
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2;
-    if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    }
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState destroyed component is inactive 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -91,7 +77,7 @@ exports[`Reactivity: useState destroyed component is inactive 1`] = `
 }"
 `;
 
-exports[`Reactivity: useState destroyed component is inactive 2`] = `
+exports[`Reactivity: useState destroyed component is inactive 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -108,6 +94,20 @@ exports[`Reactivity: useState destroyed component is inactive 2`] = `
 }"
 `;
 
+exports[`Reactivity: useState destroyed component is inactive 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['contextObj'].a;
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`Reactivity: useState one components can subscribe twice to same context 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -128,11 +128,12 @@ exports[`Reactivity: useState parent and children subscribed to same context 1`]
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['contextObj'].a;
-    return block1([d1]);
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let d1 = ctx['contextObj'].b;
+    return block1([d1], [b2]);
   }
 }"
 `;
@@ -142,12 +143,11 @@ exports[`Reactivity: useState parent and children subscribed to same context 2`]
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    let d1 = ctx['contextObj'].b;
-    return block1([d1], [b2]);
+    let d1 = ctx['contextObj'].a;
+    return block1([d1]);
   }
 }"
 `;
@@ -220,11 +220,12 @@ exports[`Reactivity: useState two components are updated in parallel 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['contextObj'].value;
-    return block1([d1]);
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -234,12 +235,11 @@ exports[`Reactivity: useState two components are updated in parallel 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    let b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
-    return block1([], [b2, b3]);
+    let d1 = ctx['contextObj'].value;
+    return block1([d1]);
   }
 }"
 `;
@@ -249,20 +249,6 @@ exports[`Reactivity: useState two components can subscribe to same context 1`] =
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['contextObj'].value;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState two components can subscribe to same context 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -273,7 +259,7 @@ exports[`Reactivity: useState two components can subscribe to same context 2`] =
 }"
 `;
 
-exports[`Reactivity: useState two independent components on different levels are updated in parallel 1`] = `
+exports[`Reactivity: useState two components can subscribe to same context 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -287,21 +273,7 @@ exports[`Reactivity: useState two independent components on different levels are
 }"
 `;
 
-exports[`Reactivity: useState two independent components on different levels are updated in parallel 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState two independent components on different levels are updated in parallel 3`] = `
+exports[`Reactivity: useState two independent components on different levels are updated in parallel 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -316,6 +288,34 @@ exports[`Reactivity: useState two independent components on different levels are
 }"
 `;
 
+exports[`Reactivity: useState two independent components on different levels are updated in parallel 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['contextObj'].value;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState two independent components on different levels are updated in parallel 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`Reactivity: useState useContext=useState hook is reactive, for one component 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -332,20 +332,6 @@ exports[`Reactivity: useState useContext=useState hook is reactive, for one comp
 
 exports[`Reactivity: useState useless atoms should be deleted 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['state'].quantity;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState useless atoms should be deleted 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { prepareList, withKey } = helpers;
@@ -369,6 +355,20 @@ exports[`Reactivity: useState useless atoms should be deleted 2`] = `
 }"
 `;
 
+exports[`Reactivity: useState useless atoms should be deleted 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['state'].quantity;
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`Reactivity: useState very simple use, with initial value 1`] = `
 "function anonymous(bdom, helpers
 ) {
diff --git a/tests/compiler/__snapshots__/error_handling.test.ts.snap b/tests/compiler/__snapshots__/error_handling.test.ts.snap
deleted file mode 100644
index 32e3fd3e..00000000
--- a/tests/compiler/__snapshots__/error_handling.test.ts.snap
+++ /dev/null
@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`error handling cannot add twice the same template 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
diff --git a/tests/compiler/__snapshots__/event_handling.test.ts.snap b/tests/compiler/__snapshots__/event_handling.test.ts.snap
index d8b4d76f..5c9f8b77 100644
--- a/tests/compiler/__snapshots__/event_handling.test.ts.snap
+++ b/tests/compiler/__snapshots__/event_handling.test.ts.snap
@@ -154,20 +154,6 @@ exports[`t-on handler is bound to proper owner, part 2 1`] = `
 
 exports[`t-on handler is bound to proper owner, part 3 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = [ctx['add'], ctx];
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`t-on handler is bound to proper owner, part 3 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { getTemplate } = helpers;
@@ -179,7 +165,7 @@ exports[`t-on handler is bound to proper owner, part 3 2`] = `
 }"
 `;
 
-exports[`t-on handler is bound to proper owner, part 4 1`] = `
+exports[`t-on handler is bound to proper owner, part 3 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -193,7 +179,7 @@ exports[`t-on handler is bound to proper owner, part 4 1`] = `
 }"
 `;
 
-exports[`t-on handler is bound to proper owner, part 4 2`] = `
+exports[`t-on handler is bound to proper owner, part 4 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -217,6 +203,20 @@ exports[`t-on handler is bound to proper owner, part 4 2`] = `
 }"
 `;
 
+exports[`t-on handler is bound to proper owner, part 4 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [ctx['add'], ctx];
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`t-on receive event in first argument 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -470,6 +470,22 @@ exports[`t-on t-on with inline statement, part 3 1`] = `
 
 exports[`t-on t-on with t-call 1`] = `
 "function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { getTemplate } = helpers;
+  const callTemplate_2 = getTemplate(\`sub\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callTemplate_2.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-on t-on with t-call 2`] = `
+"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
@@ -482,7 +498,7 @@ exports[`t-on t-on with t-call 1`] = `
 }"
 `;
 
-exports[`t-on t-on with t-call 2`] = `
+exports[`t-on t-on, with arguments and t-call 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -498,7 +514,7 @@ exports[`t-on t-on with t-call 2`] = `
 }"
 `;
 
-exports[`t-on t-on, with arguments and t-call 1`] = `
+exports[`t-on t-on, with arguments and t-call 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -512,19 +528,3 @@ exports[`t-on t-on, with arguments and t-call 1`] = `
   }
 }"
 `;
-
-exports[`t-on t-on, with arguments and t-call 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { getTemplate } = helpers;
-  const callTemplate_2 = getTemplate(\`sub\`);
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = callTemplate_2.call(this, ctx, node, key + \`__1\`);
-    return block1([], [b2]);
-  }
-}"
-`;
diff --git a/tests/compiler/__snapshots__/misc.test.ts.snap b/tests/compiler/__snapshots__/misc.test.ts.snap
index 0e5ab60b..fa5386f0 100644
--- a/tests/compiler/__snapshots__/misc.test.ts.snap
+++ b/tests/compiler/__snapshots__/misc.test.ts.snap
@@ -80,53 +80,6 @@ exports[`misc complex template 1`] = `
 
 exports[`misc global 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { zero } = helpers;
-  
-  let block1 = createBlock(\`<año block-attribute-0=\\"falló\\"><block-child-0/></año>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = 'agüero';
-    let b2 = ctx[zero];
-    return block1([d1], [b2]);
-  }
-}"
-`;
-
-exports[`misc global 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { withDefault } = helpers;
-  
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = withDefault(ctx['foo'], \`foo default\`);
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`misc global 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { safeOutput, withDefault } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b3 = text(\`toto default\`);
-    let b2 = withDefault(safeOutput(ctx['toto']), b3);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`misc global 4`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { prepareList, isBoundary, withDefault, setContextValue, getTemplate, zero, withKey } = helpers;
@@ -177,6 +130,53 @@ exports[`misc global 4`] = `
 }"
 `;
 
+exports[`misc global 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { withDefault } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = withDefault(ctx['foo'], \`foo default\`);
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`misc global 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { zero } = helpers;
+  
+  let block1 = createBlock(\`<año block-attribute-0=\\"falló\\"><block-child-0/></año>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = 'agüero';
+    let b2 = ctx[zero];
+    return block1([d1], [b2]);
+  }
+}"
+`;
+
+exports[`misc global 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { safeOutput, withDefault } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b3 = text(\`toto default\`);
+    let b2 = withDefault(safeOutput(ctx['toto']), b3);
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`misc other complex template 1`] = `
 "function anonymous(bdom, helpers
 ) {
diff --git a/tests/compiler/__snapshots__/t_call.test.ts.snap b/tests/compiler/__snapshots__/t_call.test.ts.snap
index d2606728..a657b52b 100644
--- a/tests/compiler/__snapshots__/t_call.test.ts.snap
+++ b/tests/compiler/__snapshots__/t_call.test.ts.snap
@@ -2,19 +2,6 @@
 
 exports[`t-call (template calling) basic caller 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<span>ok</span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`t-call (template calling) basic caller 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { getTemplate } = helpers;
@@ -29,7 +16,7 @@ exports[`t-call (template calling) basic caller 2`] = `
 }"
 `;
 
-exports[`t-call (template calling) basic caller, no parent node 1`] = `
+exports[`t-call (template calling) basic caller 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -42,7 +29,7 @@ exports[`t-call (template calling) basic caller, no parent node 1`] = `
 }"
 `;
 
-exports[`t-call (template calling) basic caller, no parent node 2`] = `
+exports[`t-call (template calling) basic caller, no parent node 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -55,22 +42,20 @@ exports[`t-call (template calling) basic caller, no parent node 2`] = `
 }"
 `;
 
-exports[`t-call (template calling) call with several sub nodes on same line 1`] = `
+exports[`t-call (template calling) basic caller, no parent node 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { zero } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<span>ok</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = ctx[zero];
-    return block1([], [b2]);
+    return block1();
   }
 }"
 `;
 
-exports[`t-call (template calling) call with several sub nodes on same line 2`] = `
+exports[`t-call (template calling) call with several sub nodes on same line 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -95,13 +80,13 @@ exports[`t-call (template calling) call with several sub nodes on same line 2`]
 }"
 `;
 
-exports[`t-call (template calling) cascading t-call t-out='0' 1`] = `
+exports[`t-call (template calling) call with several sub nodes on same line 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { zero } = helpers;
   
-  let block1 = createBlock(\`<div><span>cascade 2</span><block-child-0/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2 = ctx[zero];
@@ -110,30 +95,32 @@ exports[`t-call (template calling) cascading t-call t-out='0' 1`] = `
 }"
 `;
 
-exports[`t-call (template calling) cascading t-call t-out='0' 2`] = `
+exports[`t-call (template calling) cascading t-call t-out='0' 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { isBoundary, zero, getTemplate } = helpers;
-  const callTemplate_2 = getTemplate(\`finalTemplate\`);
+  const callTemplate_2 = getTemplate(\`subTemplate\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<span>cascade 1</span>\`);
+  let block3 = createBlock(\`<span>hey</span>\`);
+  let block5 = createBlock(\`<span>yay</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
     let b3 = block3();
-    let b4 = ctx[zero];
-    let b2 = multi([b3, b4]);
+    let b4 = text(\` \`);
+    let b5 = block5();
+    let b2 = multi([b3, b4, b5]);
     ctx[zero] = b2;
-    let b5 = callTemplate_2.call(this, ctx, node, key + \`__1\`);
-    return block1([], [b5]);
+    let b6 = callTemplate_2.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b6]);
   }
 }"
 `;
 
-exports[`t-call (template calling) cascading t-call t-out='0' 3`] = `
+exports[`t-call (template calling) cascading t-call t-out='0' 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -156,90 +143,45 @@ exports[`t-call (template calling) cascading t-call t-out='0' 3`] = `
 }"
 `;
 
-exports[`t-call (template calling) cascading t-call t-out='0' 4`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, zero, getTemplate } = helpers;
-  const callTemplate_2 = getTemplate(\`subTemplate\`);
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<span>hey</span>\`);
-  let block5 = createBlock(\`<span>yay</span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1;
-    let b3 = block3();
-    let b4 = text(\` \`);
-    let b5 = block5();
-    let b2 = multi([b3, b4, b5]);
-    ctx[zero] = b2;
-    let b6 = callTemplate_2.call(this, ctx, node, key + \`__1\`);
-    return block1([], [b6]);
-  }
-}"
-`;
-
-exports[`t-call (template calling) cascading t-call t-out='0', without external divs 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { zero } = helpers;
-  
-  let block2 = createBlock(\`<span>cascade 2</span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = block2();
-    let b3 = ctx[zero];
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`t-call (template calling) cascading t-call t-out='0', without external divs 2`] = `
+exports[`t-call (template calling) cascading t-call t-out='0' 3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { isBoundary, zero, getTemplate } = helpers;
   const callTemplate_2 = getTemplate(\`finalTemplate\`);
   
-  let block2 = createBlock(\`<span>cascade 1</span>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<span>cascade 1</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    let b2 = block2();
-    let b3 = ctx[zero];
-    let b1 = multi([b2, b3]);
-    ctx[zero] = b1;
-    return callTemplate_2.call(this, ctx, node, key + \`__1\`);
+    let b3 = block3();
+    let b4 = ctx[zero];
+    let b2 = multi([b3, b4]);
+    ctx[zero] = b2;
+    let b5 = callTemplate_2.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b5]);
   }
 }"
 `;
 
-exports[`t-call (template calling) cascading t-call t-out='0', without external divs 3`] = `
+exports[`t-call (template calling) cascading t-call t-out='0' 4`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, zero, getTemplate } = helpers;
-  const callTemplate_2 = getTemplate(\`subSubTemplate\`);
+  let { zero } = helpers;
   
-  let block2 = createBlock(\`<span>cascade 0</span>\`);
+  let block1 = createBlock(\`<div><span>cascade 2</span><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1;
-    let b2 = block2();
-    let b3 = ctx[zero];
-    let b1 = multi([b2, b3]);
-    ctx[zero] = b1;
-    return callTemplate_2.call(this, ctx, node, key + \`__1\`);
+    let b2 = ctx[zero];
+    return block1([], [b2]);
   }
 }"
 `;
 
-exports[`t-call (template calling) cascading t-call t-out='0', without external divs 4`] = `
+exports[`t-call (template calling) cascading t-call t-out='0', without external divs 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -262,36 +204,66 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
 }"
 `;
 
+exports[`t-call (template calling) cascading t-call t-out='0', without external divs 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { isBoundary, zero, getTemplate } = helpers;
+  const callTemplate_2 = getTemplate(\`subSubTemplate\`);
+  
+  let block2 = createBlock(\`<span>cascade 0</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1;
+    let b2 = block2();
+    let b3 = ctx[zero];
+    let b1 = multi([b2, b3]);
+    ctx[zero] = b1;
+    return callTemplate_2.call(this, ctx, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call (template calling) cascading t-call t-out='0', without external divs 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { isBoundary, zero, getTemplate } = helpers;
+  const callTemplate_2 = getTemplate(\`finalTemplate\`);
+  
+  let block2 = createBlock(\`<span>cascade 1</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1;
+    let b2 = block2();
+    let b3 = ctx[zero];
+    let b1 = multi([b2, b3]);
+    ctx[zero] = b1;
+    return callTemplate_2.call(this, ctx, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call (template calling) cascading t-call t-out='0', without external divs 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { zero } = helpers;
+  
+  let block2 = createBlock(\`<span>cascade 2</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = block2();
+    let b3 = ctx[zero];
+    return multi([b2, b3]);
+  }
+}"
+`;
+
 exports[`t-call (template calling) dynamic t-call 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<foo><block-text-0/></foo>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['val'];
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`t-call (template calling) dynamic t-call 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<bar><block-text-0/></bar>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['val'];
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`t-call (template calling) dynamic t-call 3`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { call } = helpers;
@@ -306,18 +278,35 @@ exports[`t-call (template calling) dynamic t-call 3`] = `
 }"
 `;
 
-exports[`t-call (template calling) inherit context 1`] = `
+exports[`t-call (template calling) dynamic t-call 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<foo><block-text-0/></foo>\`);
+  
   return function template(ctx, node, key = \\"\\") {
-    return text(ctx['foo']);
+    let d1 = ctx['val'];
+    return block1([d1]);
   }
 }"
 `;
 
-exports[`t-call (template calling) inherit context 2`] = `
+exports[`t-call (template calling) dynamic t-call 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<bar><block-text-0/></bar>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['val'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`t-call (template calling) inherit context 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -336,6 +325,17 @@ exports[`t-call (template calling) inherit context 2`] = `
 }"
 `;
 
+exports[`t-call (template calling) inherit context 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['foo']);
+  }
+}"
+`;
+
 exports[`t-call (template calling) recursive template, part 1 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -525,17 +525,6 @@ exports[`t-call (template calling) recursive template, part 4: with t-set recurs
 
 exports[`t-call (template calling) scoped parameters 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(\`ok\`);
-  }
-}"
-`;
-
-exports[`t-call (template calling) scoped parameters 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
@@ -557,18 +546,18 @@ exports[`t-call (template calling) scoped parameters 2`] = `
 }"
 `;
 
-exports[`t-call (template calling) scoped parameters, part 2 1`] = `
+exports[`t-call (template calling) scoped parameters 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return text(ctx['foo']);
+    return text(\`ok\`);
   }
 }"
 `;
 
-exports[`t-call (template calling) scoped parameters, part 2 2`] = `
+exports[`t-call (template calling) scoped parameters, part 2 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -592,6 +581,17 @@ exports[`t-call (template calling) scoped parameters, part 2 2`] = `
 }"
 `;
 
+exports[`t-call (template calling) scoped parameters, part 2 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['foo']);
+  }
+}"
+`;
+
 exports[`t-call (template calling) t-call allowed on a non t node 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -623,21 +623,6 @@ exports[`t-call (template calling) t-call allowed on a non t node 2`] = `
 
 exports[`t-call (template calling) t-call with body content as root of a template 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { zero } = helpers;
-  
-  let block1 = createBlock(\`<foo><block-child-0/></foo>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = ctx[zero];
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`t-call (template calling) t-call with body content as root of a template 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { isBoundary, zero, getTemplate } = helpers;
@@ -655,6 +640,21 @@ exports[`t-call (template calling) t-call with body content as root of a templat
 }"
 `;
 
+exports[`t-call (template calling) t-call with body content as root of a template 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { zero } = helpers;
+  
+  let block1 = createBlock(\`<foo><block-child-0/></foo>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = ctx[zero];
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`t-call (template calling) t-call with t-if 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -772,6 +772,25 @@ exports[`t-call (template calling) t-call with t-set inside and outside 2`] = `
 
 exports[`t-call (template calling) t-call with t-set inside and outside. 2 1`] = `
 "function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
+  const callTemplate_2 = getTemplate(\`main\`);
+  
+  let block1 = createBlock(\`<p><block-child-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"w\\", 'fromwrapper');
+    let b2 = callTemplate_2.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-call (template calling) t-call with t-set inside and outside. 2 2`] = `
+"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { prepareList, isBoundary, withDefault, setContextValue, getTemplate, withKey } = helpers;
@@ -804,7 +823,7 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 1`] =
 }"
 `;
 
-exports[`t-call (template calling) t-call with t-set inside and outside. 2 2`] = `
+exports[`t-call (template calling) t-call with t-set inside and outside. 2 3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -820,54 +839,8 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 2`] =
 }"
 `;
 
-exports[`t-call (template calling) t-call with t-set inside and outside. 2 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
-  const callTemplate_2 = getTemplate(\`main\`);
-  
-  let block1 = createBlock(\`<p><block-child-0/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1
-    setContextValue(ctx, \\"w\\", 'fromwrapper');
-    let b2 = callTemplate_2.call(this, ctx, node, key + \`__1\`);
-    return block1([], [b2]);
-  }
-}"
-`;
-
 exports[`t-call (template calling) t-call, conditional and t-set in t-call body 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>callee1</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`t-call (template calling) t-call, conditional and t-set in t-call body 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>callee2 <block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['v'];
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`t-call (template calling) t-call, conditional and t-set in t-call body 3`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
@@ -895,6 +868,33 @@ exports[`t-call (template calling) t-call, conditional and t-set in t-call body
 }"
 `;
 
+exports[`t-call (template calling) t-call, conditional and t-set in t-call body 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>callee1</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`t-call (template calling) t-call, conditional and t-set in t-call body 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>callee2 <block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['v'];
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`t-call (template calling) t-esc inside t-call, with t-set outside 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -930,19 +930,6 @@ exports[`t-call (template calling) t-esc inside t-call, with t-set outside 2`] =
 
 exports[`t-call (template calling) with unused body 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>ok</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`t-call (template calling) with unused body 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { isBoundary, zero, getTemplate } = helpers;
@@ -958,7 +945,7 @@ exports[`t-call (template calling) with unused body 2`] = `
 }"
 `;
 
-exports[`t-call (template calling) with unused setbody 1`] = `
+exports[`t-call (template calling) with unused body 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -971,7 +958,7 @@ exports[`t-call (template calling) with unused setbody 1`] = `
 }"
 `;
 
-exports[`t-call (template calling) with unused setbody 2`] = `
+exports[`t-call (template calling) with unused setbody 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -989,22 +976,20 @@ exports[`t-call (template calling) with unused setbody 2`] = `
 }"
 `;
 
-exports[`t-call (template calling) with used body 1`] = `
+exports[`t-call (template calling) with unused setbody 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { zero } = helpers;
   
-  let block1 = createBlock(\`<h1><block-text-0/></h1>\`);
+  let block1 = createBlock(\`<div>ok</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx[zero];
-    return block1([d1]);
+    return block1();
   }
 }"
 `;
 
-exports[`t-call (template calling) with used body 2`] = `
+exports[`t-call (template calling) with used body 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1021,18 +1006,22 @@ exports[`t-call (template calling) with used body 2`] = `
 }"
 `;
 
-exports[`t-call (template calling) with used setbody 1`] = `
+exports[`t-call (template calling) with used body 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { zero } = helpers;
+  
+  let block1 = createBlock(\`<h1><block-text-0/></h1>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return text(ctx['foo']);
+    let d1 = ctx[zero];
+    return block1([d1]);
   }
 }"
 `;
 
-exports[`t-call (template calling) with used setbody 2`] = `
+exports[`t-call (template calling) with used setbody 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1052,3 +1041,14 @@ exports[`t-call (template calling) with used setbody 2`] = `
   }
 }"
 `;
+
+exports[`t-call (template calling) with used setbody 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['foo']);
+  }
+}"
+`;
diff --git a/tests/compiler/__snapshots__/t_esc.test.ts.snap b/tests/compiler/__snapshots__/t_esc.test.ts.snap
index c0c25ced..bb2b01d0 100644
--- a/tests/compiler/__snapshots__/t_esc.test.ts.snap
+++ b/tests/compiler/__snapshots__/t_esc.test.ts.snap
@@ -146,21 +146,6 @@ exports[`t-esc t-esc work with spread operator 1`] = `
 
 exports[`t-esc t-esc=0 is escaped 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { zero } = helpers;
-  
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx[zero];
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`t-esc t-esc=0 is escaped 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { isBoundary, zero, getTemplate } = helpers;
@@ -180,6 +165,21 @@ exports[`t-esc t-esc=0 is escaped 2`] = `
 }"
 `;
 
+exports[`t-esc t-esc=0 is escaped 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { zero } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx[zero];
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`t-esc variable 1`] = `
 "function anonymous(bdom, helpers
 ) {
diff --git a/tests/compiler/__snapshots__/t_foreach.test.ts.snap b/tests/compiler/__snapshots__/t_foreach.test.ts.snap
index 74f720ee..731d7509 100644
--- a/tests/compiler/__snapshots__/t_foreach.test.ts.snap
+++ b/tests/compiler/__snapshots__/t_foreach.test.ts.snap
@@ -213,24 +213,6 @@ exports[`t-foreach simple iteration with two nodes inside 1`] = `
 
 exports[`t-foreach t-call with body in t-foreach in t-foreach 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = text(\` [\`);
-    let b3 = text(ctx['a']);
-    let b4 = text(\`] [\`);
-    let b5 = text(ctx['b']);
-    let b6 = text(\`] [\`);
-    let b7 = text(ctx['c']);
-    let b8 = text(\`] \`);
-    return multi([b2, b3, b4, b5, b6, b7, b8]);
-  }
-}"
-`;
-
-exports[`t-foreach t-call with body in t-foreach in t-foreach 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { prepareList, isBoundary, withDefault, setContextValue, getTemplate, withKey } = helpers;
@@ -282,16 +264,12 @@ exports[`t-foreach t-call with body in t-foreach in t-foreach 2`] = `
 }"
 `;
 
-exports[`t-foreach t-call without body in t-foreach in t-foreach 1`] = `
+exports[`t-foreach t-call with body in t-foreach in t-foreach 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1
-    setContextValue(ctx, \\"c\\", 'x'+'_'+ctx['a']+'_'+ctx['b']);
     let b2 = text(\` [\`);
     let b3 = text(ctx['a']);
     let b4 = text(\`] [\`);
@@ -304,7 +282,7 @@ exports[`t-foreach t-call without body in t-foreach in t-foreach 1`] = `
 }"
 `;
 
-exports[`t-foreach t-call without body in t-foreach in t-foreach 2`] = `
+exports[`t-foreach t-call without body in t-foreach in t-foreach 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -351,6 +329,28 @@ exports[`t-foreach t-call without body in t-foreach in t-foreach 2`] = `
 }"
 `;
 
+exports[`t-foreach t-call without body in t-foreach in t-foreach 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"c\\", 'x'+'_'+ctx['a']+'_'+ctx['b']);
+    let b2 = text(\` [\`);
+    let b3 = text(ctx['a']);
+    let b4 = text(\`] [\`);
+    let b5 = text(ctx['b']);
+    let b6 = text(\`] [\`);
+    let b7 = text(ctx['c']);
+    let b8 = text(\`] \`);
+    return multi([b2, b3, b4, b5, b6, b7, b8]);
+  }
+}"
+`;
+
 exports[`t-foreach t-foreach in t-foreach 1`] = `
 "function anonymous(bdom, helpers
 ) {
diff --git a/tests/compiler/__snapshots__/t_out.test.ts.snap b/tests/compiler/__snapshots__/t_out.test.ts.snap
index 2049d607..4c0b4a9b 100644
--- a/tests/compiler/__snapshots__/t_out.test.ts.snap
+++ b/tests/compiler/__snapshots__/t_out.test.ts.snap
@@ -29,22 +29,6 @@ exports[`t-out literal, no outside html element 1`] = `
 
 exports[`t-out multiple calls to t-out 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { zero } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/><div>Greeter</div><block-child-1/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = ctx[zero];
-    let b3 = ctx[zero];
-    return block1([], [b2, b3]);
-  }
-}"
-`;
-
-exports[`t-out multiple calls to t-out 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { isBoundary, zero, getTemplate } = helpers;
@@ -64,6 +48,22 @@ exports[`t-out multiple calls to t-out 2`] = `
 }"
 `;
 
+exports[`t-out multiple calls to t-out 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { zero } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><div>Greeter</div><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = ctx[zero];
+    let b3 = ctx[zero];
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
 exports[`t-out not escaping 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -81,21 +81,6 @@ exports[`t-out not escaping 1`] = `
 
 exports[`t-out t-out 0 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { zero } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = ctx[zero];
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`t-out t-out 0 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { isBoundary, zero, getTemplate } = helpers;
@@ -115,6 +100,21 @@ exports[`t-out t-out 0 2`] = `
 }"
 `;
 
+exports[`t-out t-out 0 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { zero } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = ctx[zero];
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`t-out t-out and another sibling node 1`] = `
 "function anonymous(bdom, helpers
 ) {
diff --git a/tests/compiler/__snapshots__/t_set.test.ts.snap b/tests/compiler/__snapshots__/t_set.test.ts.snap
index 9323c93b..4acdc02b 100644
--- a/tests/compiler/__snapshots__/t_set.test.ts.snap
+++ b/tests/compiler/__snapshots__/t_set.test.ts.snap
@@ -185,25 +185,6 @@ exports[`t-set t-set body is evaluated immediately 1`] = `
 
 exports[`t-set t-set can't alter from within callee 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue } = helpers;
-  
-  let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1
-    let d1 = ctx['iter'];
-    setContextValue(ctx, \\"iter\\", 'called');
-    let d2 = ctx['iter'];
-    return block1([d1, d2]);
-  }
-}"
-`;
-
-exports[`t-set t-set can't alter from within callee 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, getTemplate } = helpers;
@@ -223,7 +204,7 @@ exports[`t-set t-set can't alter from within callee 2`] = `
 }"
 `;
 
-exports[`t-set t-set can't alter in t-call body 1`] = `
+exports[`t-set t-set can't alter from within callee 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -242,7 +223,7 @@ exports[`t-set t-set can't alter in t-call body 1`] = `
 }"
 `;
 
-exports[`t-set t-set can't alter in t-call body 2`] = `
+exports[`t-set t-set can't alter in t-call body 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -267,6 +248,25 @@ exports[`t-set t-set can't alter in t-call body 2`] = `
 }"
 `;
 
+exports[`t-set t-set can't alter in t-call body 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    let d1 = ctx['iter'];
+    setContextValue(ctx, \\"iter\\", 'called');
+    let d2 = ctx['iter'];
+    return block1([d1, d2]);
+  }
+}"
+`;
+
 exports[`t-set t-set does not modify render context existing key values 1`] = `
 "function anonymous(bdom, helpers
 ) {
diff --git a/tests/compiler/__snapshots__/template_set.test.ts.snap b/tests/compiler/__snapshots__/template_set.test.ts.snap
index 90d6937f..32ceedd5 100644
--- a/tests/compiler/__snapshots__/template_set.test.ts.snap
+++ b/tests/compiler/__snapshots__/template_set.test.ts.snap
@@ -30,14 +30,14 @@ exports[`loading templates can load a few templates from a xml string 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { getTemplate } = helpers;
+  const callTemplate_2 = getTemplate(\`items\`);
   
-  let block2 = createBlock(\`<li>ok</li>\`);
-  let block3 = createBlock(\`<li>foo</li>\`);
+  let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = block2();
-    let b3 = block3();
-    return multi([b2, b3]);
+    let b2 = callTemplate_2.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -47,16 +47,35 @@ exports[`loading templates can load a few templates from a xml string 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<ul/>\`);
+  let block2 = createBlock(\`<li>ok</li>\`);
+  let block3 = createBlock(\`<li>foo</li>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    let b2 = block2();
+    let b3 = block3();
+    return multi([b2, b3]);
   }
 }"
 `;
 
 exports[`loading templates can load a few templates from an XMLDocument 1`] = `
 "function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { getTemplate } = helpers;
+  const callTemplate_2 = getTemplate(\`items\`);
+  
+  let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callTemplate_2.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`loading templates can load a few templates from an XMLDocument 2`] = `
+"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
@@ -70,16 +89,3 @@ exports[`loading templates can load a few templates from an XMLDocument 1`] = `
   }
 }"
 `;
-
-exports[`loading templates can load a few templates from an XMLDocument 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<ul/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
diff --git a/tests/compiler/attributes.test.ts b/tests/compiler/attributes.test.ts
index 6157d733..bb0673e8 100644
--- a/tests/compiler/attributes.test.ts
+++ b/tests/compiler/attributes.test.ts
@@ -1,4 +1,3 @@
-import { xml } from "../../src";
 import { mount, patch } from "../../src/blockdom";
 import { makeTestFixture, renderToBdom, renderToString, snapshotEverything } from "../helpers";
 
@@ -348,9 +347,8 @@ describe("special cases for some specific html attributes/properties", () => {
   });
 
   test("various boolean html attributes", () => {
-    // the unique assertion here is the code snapshot automatically done by
-    // renderToString
-    xml`
+    // will cause the template to be snapshotted
+    renderToString(`
       <div>
         <input type="checkbox" checked="checked"/>
         <input checked="checked"/>
@@ -360,7 +358,7 @@ describe("special cases for some specific html attributes/properties", () => {
         <input readonly="readonly"/>
         <button disabled="disabled"/>
       </div>
-      `;
+      `);
   });
 
   test("input with t-att-value", () => {
diff --git a/tests/compiler/misc.test.ts b/tests/compiler/misc.test.ts
index 9c86d940..2ab26e7f 100644
--- a/tests/compiler/misc.test.ts
+++ b/tests/compiler/misc.test.ts
@@ -1,5 +1,10 @@
-import { xml } from "../../src";
-import { renderToString, snapshotEverything, TestContext, trim } from "../helpers";
+import {
+  renderToString,
+  snapshotEverything,
+  snapshotTemplate,
+  TestContext,
+  trim,
+} from "../helpers";
 
 snapshotEverything();
 
@@ -116,7 +121,7 @@ describe("misc", () => {
   });
 
   test("other complex template", () => {
-    xml`
+    snapshotTemplate(`
         <div>
           <header>
               <nav class="navbar navbar-expand-md navbar-light bg-light">
@@ -257,6 +262,6 @@ describe("misc", () => {
                   </div>
               </div>
           </div>
-      </div>`;
+      </div>`);
   });
 });
diff --git a/tests/compiler/t_debug_log.test.ts b/tests/compiler/t_debug_log.test.ts
index ee466b5c..97bc8ada 100644
--- a/tests/compiler/t_debug_log.test.ts
+++ b/tests/compiler/t_debug_log.test.ts
@@ -1,4 +1,4 @@
-import { renderToString, snapshotTemplateCode } from "../helpers";
+import { renderToString, snapshotTemplate } from "../helpers";
 
 // -----------------------------------------------------------------------------
 // debugging
@@ -9,7 +9,7 @@ describe("debugging", () => {
     const consoleLog = console.log;
     console.log = jest.fn();
     const template = `<div t-debug=""><t t-if="true"><span t-debug="">hey</span></t></div>`;
-    snapshotTemplateCode(template);
+    snapshotTemplate(template);
     expect(console.log).toHaveBeenCalledTimes(1);
     console.log = consoleLog;
   });
@@ -18,9 +18,9 @@ describe("debugging", () => {
     const consoleLog = console.log;
     console.log = jest.fn();
     let template = `<p t-debug="">coucou</p>`;
-    snapshotTemplateCode(template);
+    snapshotTemplate(template);
     template = `<div><t t-call="sub"/></div>`;
-    snapshotTemplateCode(template);
+    snapshotTemplate(template);
     expect(console.log).toHaveBeenCalledTimes(1);
     console.log = consoleLog;
   });
@@ -33,7 +33,7 @@ describe("debugging", () => {
             <t t-set="foo" t-value="42"/>
             <t t-log="foo + 3"/>
           </div>`;
-    snapshotTemplateCode(template);
+    snapshotTemplate(template);
     renderToString(template);
     expect(console.log).toHaveBeenCalledWith(45);
     console.log = consoleLog;
diff --git a/tests/compiler/translation.test.ts b/tests/compiler/translation.test.ts
index 2ef4008e..5dcf3a00 100644
--- a/tests/compiler/translation.test.ts
+++ b/tests/compiler/translation.test.ts
@@ -1,9 +1,11 @@
-import { App, Component } from "../../src";
-import { makeTestFixture, snapshotApp } from "../helpers";
+import { Component, mount } from "../../src";
+import { makeTestFixture, snapshotEverything } from "../helpers";
 import { xml } from "../../src/tags";
 
 let fixture: HTMLElement;
 
+snapshotEverything();
+
 beforeEach(() => {
   fixture = makeTestFixture();
 });
@@ -14,16 +16,10 @@ describe("translation support", () => {
       static template = xml`<div>word</div>`;
     }
 
-    const app = new App(SomeComponent);
-    app.configure({
+    await mount(SomeComponent, fixture, {
       translateFn: (expr: string) => (expr === "word" ? "mot" : expr),
     });
-    const comp = await app.mount(fixture);
-
-    const el = comp.el as HTMLElement;
-
-    expect(el.outerHTML).toBe("<div>mot</div>");
-    snapshotApp(app);
+    expect(fixture.innerHTML).toBe("<div>mot</div>");
   });
 
   test("does not translate node content if disabled", async () => {
@@ -36,16 +32,11 @@ describe("translation support", () => {
       `;
     }
 
-    const app = new App(SomeComponent);
-    app.configure({
+    await mount(SomeComponent, fixture, {
       translateFn: (expr: string) => (expr === "word" ? "mot" : expr),
     });
-    const comp = await app.mount(fixture);
 
-    const el = comp.el as HTMLElement;
-
-    expect(el.outerHTML).toBe("<div><span>mot</span><span>word</span></div>");
-    snapshotApp(app);
+    expect(fixture.innerHTML).toBe("<div><span>mot</span><span>word</span></div>");
   });
 
   test("some attributes are translated", async () => {
@@ -61,18 +52,12 @@ describe("translation support", () => {
       `;
     }
 
-    const app = new App(SomeComponent);
-    app.configure({
+    await mount(SomeComponent, fixture, {
       translateFn: (expr: string) => (expr === "word" ? "mot" : expr),
     });
-    const comp = await app.mount(fixture);
-
-    const el = comp.el as HTMLElement;
-
-    expect(el.outerHTML).toBe(
+    expect(fixture.innerHTML).toBe(
       '<div><p label="mot">mot</p><p title="mot">mot</p><p placeholder="mot">mot</p><p alt="mot">mot</p><p something="word">mot</p></div>'
     );
-    snapshotApp(app);
   });
 
   test("can set translatable attributes", async () => {
@@ -82,16 +67,11 @@ describe("translation support", () => {
       `;
     }
 
-    const app = new App(SomeComponent);
-    app.configure({
+    await mount(SomeComponent, fixture, {
       translateFn: (expr: string) => (expr === "word" ? "mot" : expr),
       translatableAttributes: ["potato"],
     });
-    const comp = await app.mount(fixture);
-
-    const el = comp.el as HTMLElement;
-    expect(el.outerHTML).toBe('<div tomato="word" potato="mot" title="word">text</div>');
-    snapshotApp(app);
+    expect(fixture.innerHTML).toBe('<div tomato="word" potato="mot" title="word">text</div>');
   });
 
   test("translation is done on the trimmed text, with extra spaces readded after", async () => {
@@ -103,14 +83,8 @@ describe("translation support", () => {
 
     const translateFn = jest.fn((expr: string) => (expr === "word" ? "mot" : expr));
 
-    const app = new App(SomeComponent);
-    app.configure({ translateFn });
-    const comp = await app.mount(fixture);
-
-    const el = comp.el as HTMLElement;
-
-    expect(el.outerHTML).toBe("<div> mot </div>");
+    await mount(SomeComponent, fixture, { translateFn });
+    expect(fixture.innerHTML).toBe("<div> mot </div>");
     expect(translateFn).toHaveBeenCalledWith("word");
-    snapshotApp(app);
   });
 });
diff --git a/tests/compiler/validation.test.ts b/tests/compiler/validation.test.ts
index db5680fe..9c3499a6 100644
--- a/tests/compiler/validation.test.ts
+++ b/tests/compiler/validation.test.ts
@@ -1,5 +1,5 @@
 import { TemplateSet } from "../../src/app/template_set";
-import { renderToString, TestContext, compile } from "../helpers";
+import { renderToString, snapshotTemplate, TestContext } from "../helpers";
 
 // -----------------------------------------------------------------------------
 // basic validation
@@ -21,7 +21,7 @@ describe("basic validation", () => {
 
   test("invalid xml", () => {
     const template = "<div>";
-    expect(() => compile(template)).toThrow("Invalid XML in template");
+    expect(() => snapshotTemplate(template)).toThrow("Invalid XML in template");
   });
 
   test("missing template in template set", () => {
diff --git a/tests/components/__snapshots__/basics.test.ts.snap b/tests/components/__snapshots__/basics.test.ts.snap
index bbf9930e..58657a1e 100644
--- a/tests/components/__snapshots__/basics.test.ts.snap
+++ b/tests/components/__snapshots__/basics.test.ts.snap
@@ -22,10 +22,8 @@ exports[`basics a class component inside a class component, no external dom 1`]
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>simple vnode</div>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -35,18 +33,7 @@ exports[`basics a class component inside a class component, no external dom 2`]
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
-exports[`basics a component cannot be mounted in a detached node 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div/>\`);
+  let block1 = createBlock(\`<div>simple vnode</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     return block1();
@@ -59,10 +46,11 @@ exports[`basics a component inside a component 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>simple vnode</div>\`);
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -72,11 +60,10 @@ exports[`basics a component inside a component 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  let block1 = createBlock(\`<div>simple vnode</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
+    return block1();
   }
 }"
 `;
@@ -102,20 +89,6 @@ exports[`basics can handle empty props 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].val;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`basics can handle empty props 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -125,8 +98,35 @@ exports[`basics can handle empty props 2`] = `
 }"
 `;
 
+exports[`basics can handle empty props 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].val;
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`basics can inject values in tagged templates 1`] = `
 "function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { getTemplate } = helpers;
+  const callTemplate_2 = getTemplate(\`__template__73\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return callTemplate_2.call(this, ctx, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`basics can inject values in tagged templates 2`] = `
+"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
@@ -139,19 +139,6 @@ exports[`basics can inject values in tagged templates 1`] = `
 }"
 `;
 
-exports[`basics can inject values in tagged templates 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { getTemplate } = helpers;
-  const callTemplate_2 = getTemplate(\`__template__9\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return callTemplate_2.call(this, ctx, node, key + \`__1\`);
-  }
-}"
-`;
-
 exports[`basics can mount a component with just some text 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -217,26 +204,13 @@ exports[`basics can mount a simple component with props 1`] = `
 }"
 `;
 
-exports[`basics cannot mount on a documentFragment 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>content</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
 exports[`basics child can be updated 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return text(ctx['props'].value);
+    return component(\`Child\`, {value: ctx['state'].counter}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -247,7 +221,7 @@ exports[`basics child can be updated 2`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {value: ctx['state'].counter}, key + \`__1\`, node, ctx);
+    return text(ctx['props'].value);
   }
 }"
 `;
@@ -271,11 +245,8 @@ exports[`basics class parent, class child component with props 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].value;
-    return block1([d1]);
+    return component(\`Child\`, {value: 42}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -285,8 +256,11 @@ exports[`basics class parent, class child component with props 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {value: 42}, key + \`__1\`, node, ctx);
+    let d1 = ctx['props'].value;
+    return block1([d1]);
   }
 }"
 `;
@@ -350,10 +324,8 @@ exports[`basics higher order components parent and child 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>a</div>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    return component(\`Child\`, {child: ctx['state'].child}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -363,19 +335,6 @@ exports[`basics higher order components parent and child 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span>b</span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`basics higher order components parent and child 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     if (ctx['props'].child==='a') {
@@ -388,23 +347,12 @@ exports[`basics higher order components parent and child 3`] = `
 }"
 `;
 
-exports[`basics higher order components parent and child 4`] = `
+exports[`basics higher order components parent and child 3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {child: ctx['state'].child}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
-exports[`basics list of two sub components inside other nodes 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<span>asdf</span>\`);
+  let block1 = createBlock(\`<div>a</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     return block1();
@@ -412,7 +360,20 @@ exports[`basics list of two sub components inside other nodes 1`] = `
 }"
 `;
 
-exports[`basics list of two sub components inside other nodes 2`] = `
+exports[`basics higher order components parent and child 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span>b</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics list of two sub components inside other nodes 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -437,15 +398,26 @@ exports[`basics list of two sub components inside other nodes 2`] = `
 }"
 `;
 
+exports[`basics list of two sub components inside other nodes 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span>asdf</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`basics parent, child and grandchild 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>hey</div>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -466,8 +438,10 @@ exports[`basics parent, child and grandchild 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return block1();
   }
 }"
 `;
@@ -490,19 +464,6 @@ exports[`basics reconciliation alg is not confused in some specific situation 1`
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span>child</span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`basics reconciliation alg is not confused in some specific situation 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -514,11 +475,35 @@ exports[`basics reconciliation alg is not confused in some specific situation 2`
 }"
 `;
 
+exports[`basics reconciliation alg is not confused in some specific situation 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span>child</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`basics rerendering a widget with a sub widget 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Counter\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics rerendering a widget with a sub widget 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -530,36 +515,11 @@ exports[`basics rerendering a widget with a sub widget 1`] = `
 }"
 `;
 
-exports[`basics rerendering a widget with a sub widget 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`Counter\`, {}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
 exports[`basics same t-keys in two different places 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].blip;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`basics same t-keys in two different places 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><div><block-child-0/></div><div><block-child-1/></div></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -572,6 +532,20 @@ exports[`basics same t-keys in two different places 2`] = `
 }"
 `;
 
+exports[`basics same t-keys in two different places 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].blip;
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`basics simple component with a dynamic text 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -618,19 +592,6 @@ exports[`basics sub components between t-ifs 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span>child</span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`basics sub components between t-ifs 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   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>\`);
   let block3 = createBlock(\`<h2>noo</h2>\`);
@@ -652,12 +613,12 @@ exports[`basics sub components between t-ifs 2`] = `
 }"
 `;
 
-exports[`basics t-elif works with t-component 1`] = `
+exports[`basics sub components between t-ifs 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span>hey</span>\`);
+  let block1 = createBlock(\`<span>child</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     return block1();
@@ -665,7 +626,7 @@ exports[`basics t-elif works with t-component 1`] = `
 }"
 `;
 
-exports[`basics t-elif works with t-component 2`] = `
+exports[`basics t-elif works with t-component 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -685,7 +646,7 @@ exports[`basics t-elif works with t-component 2`] = `
 }"
 `;
 
-exports[`basics t-else with empty string works with t-component 1`] = `
+exports[`basics t-elif works with t-component 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -698,22 +659,35 @@ exports[`basics t-else with empty string works with t-component 1`] = `
 }"
 `;
 
+exports[`basics t-else with empty string works with t-component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block2 = createBlock(\`<div>somediv</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['state'].flag) {
+      b2 = block2();
+    } else {
+      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
 exports[`basics t-else with empty string works with t-component 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
-  let block2 = createBlock(\`<div>somediv</div>\`);
+  let block1 = createBlock(\`<span>hey</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
-    if (ctx['state'].flag) {
-      b2 = block2();
-    } else {
-      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    }
-    return block1([], [b2, b3]);
+    return block1();
   }
 }"
 `;
@@ -723,19 +697,6 @@ exports[`basics t-else works with t-component 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span>hey</span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`basics t-else works with t-component 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   let block2 = createBlock(\`<div>somediv</div>\`);
   
@@ -751,7 +712,7 @@ exports[`basics t-else works with t-component 2`] = `
 }"
 `;
 
-exports[`basics t-if works with t-component 1`] = `
+exports[`basics t-else works with t-component 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -764,7 +725,7 @@ exports[`basics t-if works with t-component 1`] = `
 }"
 `;
 
-exports[`basics t-if works with t-component 2`] = `
+exports[`basics t-if works with t-component 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -781,12 +742,12 @@ exports[`basics t-if works with t-component 2`] = `
 }"
 `;
 
-exports[`basics t-key on a component with t-if, and a sibling component 1`] = `
+exports[`basics t-if works with t-component 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span>child</span>\`);
+  let block1 = createBlock(\`<span>hey</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     return block1();
@@ -794,7 +755,7 @@ exports[`basics t-key on a component with t-if, and a sibling component 1`] = `
 }"
 `;
 
-exports[`basics t-key on a component with t-if, and a sibling component 2`] = `
+exports[`basics t-key on a component with t-if, and a sibling component 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -813,12 +774,12 @@ exports[`basics t-key on a component with t-if, and a sibling component 2`] = `
 }"
 `;
 
-exports[`basics text after a conditional component 1`] = `
+exports[`basics t-key on a component with t-if, and a sibling component 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<p>simple vnode</p>\`);
+  let block1 = createBlock(\`<span>child</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     return block1();
@@ -826,7 +787,7 @@ exports[`basics text after a conditional component 1`] = `
 }"
 `;
 
-exports[`basics text after a conditional component 2`] = `
+exports[`basics text after a conditional component 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -844,15 +805,26 @@ exports[`basics text after a conditional component 2`] = `
 }"
 `;
 
+exports[`basics text after a conditional component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<p>simple vnode</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`basics three level of components with collapsing root nodes 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>2</div>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -873,18 +845,7 @@ exports[`basics three level of components with collapsing root nodes 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
-exports[`basics throws if mounting on target=null 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<span>simple vnode</span>\`);
+  let block1 = createBlock(\`<div>2</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     return block1();
@@ -897,10 +858,10 @@ exports[`basics two child components 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>simple vnode</div>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -910,10 +871,10 @@ exports[`basics two child components 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div>simple vnode</div>\`);
+  
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    let b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
-    return multi([b2, b3]);
+    return block1();
   }
 }"
 `;
@@ -923,12 +884,12 @@ exports[`basics update props of component without concrete own node 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div class=\\"widget-subkey\\"><block-text-0/>__<block-text-1/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].key;
-    let d2 = ctx['props'].subKey;
-    return block1([d1, d2]);
+    const tKey_1 = ctx['childProps'].key;
+    let b2 = toggler(tKey_1, component(\`Child\`, ctx['childProps'], tKey_1 + key + \`__2\`, node, ctx));
+    return block1([], [b2]);
   }
 }"
 `;
@@ -950,12 +911,12 @@ exports[`basics update props of component without concrete own node 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<div class=\\"widget-subkey\\"><block-text-0/>__<block-text-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const tKey_1 = ctx['childProps'].key;
-    let b2 = toggler(tKey_1, component(\`Child\`, ctx['childProps'], tKey_1 + key + \`__2\`, node, ctx));
-    return block1([], [b2]);
+    let d1 = ctx['props'].key;
+    let d2 = ctx['props'].subKey;
+    return block1([d1, d2]);
   }
 }"
 `;
@@ -984,6 +945,17 @@ exports[`basics updating widget immediately 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {flag: ctx['state'].flag}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics updating widget immediately 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   let block1 = createBlock(\`<span>abc<block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -996,32 +968,8 @@ exports[`basics updating widget immediately 1`] = `
 }"
 `;
 
-exports[`basics updating widget immediately 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {flag: ctx['state'].flag}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
 exports[`basics widget after a t-foreach 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`basics widget after a t-foreach 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { prepareList, withKey } = helpers;
@@ -1045,12 +993,12 @@ exports[`basics widget after a t-foreach 2`] = `
 }"
 `;
 
-exports[`basics zero or one child components 1`] = `
+exports[`basics widget after a t-foreach 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>simple vnode</div>\`);
+  let block1 = createBlock(\`<div/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     return block1();
@@ -1058,7 +1006,7 @@ exports[`basics zero or one child components 1`] = `
 }"
 `;
 
-exports[`basics zero or one child components 2`] = `
+exports[`basics zero or one child components 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1073,6 +1021,19 @@ exports[`basics zero or one child components 2`] = `
 }"
 `;
 
+exports[`basics zero or one child components 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>simple vnode</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`mount targets can mount a component (with default position='last-child') 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -1117,10 +1078,11 @@ exports[`support svg components add proper namespace to svg 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<g block-ns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/></g>\`);
+  let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    let b2 = component(\`GComp\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -1130,11 +1092,10 @@ exports[`support svg components add proper namespace to svg 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
+  let block1 = createBlock(\`<g block-ns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/></g>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`GComp\`, {}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
+    return block1();
   }
 }"
 `;
diff --git a/tests/components/__snapshots__/concurrency.test.ts.snap b/tests/components/__snapshots__/concurrency.test.ts.snap
index 09920084..101f87ec 100644
--- a/tests/components/__snapshots__/concurrency.test.ts.snap
+++ b/tests/components/__snapshots__/concurrency.test.ts.snap
@@ -18,11 +18,9 @@ exports[`calling render in destroy 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].fromA;
-    return block1([d1]);
+    const tKey_1 = ctx['key'];
+    return toggler(tKey_1, component(\`B\`, {fromA: ctx['state']}, tKey_1 + key + \`__2\`, node, ctx));
   }
 }"
 `;
@@ -43,9 +41,11 @@ exports[`calling render in destroy 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
   return function template(ctx, node, key = \\"\\") {
-    const tKey_1 = ctx['key'];
-    return toggler(tKey_1, component(\`B\`, {fromA: ctx['state']}, tKey_1 + key + \`__2\`, node, ctx));
+    let d1 = ctx['props'].fromA;
+    return block1([d1]);
   }
 }"
 `;
@@ -69,11 +69,14 @@ exports[`changing state before first render does not trigger a render (with pare
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['value'];
-    return block1([d1]);
+    let b2;
+    if (ctx['state'].flag) {
+      b2 = component(\`TestW\`, {}, key + \`__1\`, node, ctx);
+    }
+    return block1([], [b2]);
   }
 }"
 `;
@@ -83,14 +86,11 @@ exports[`changing state before first render does not trigger a render (with pare
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2;
-    if (ctx['state'].flag) {
-      b2 = component(\`TestW\`, {}, key + \`__1\`, node, ctx);
-    }
-    return block1([], [b2]);
+    let d1 = ctx['value'];
+    return block1([d1]);
   }
 }"
 `;
@@ -114,12 +114,11 @@ exports[`concurrent renderings scenario 1 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].fromA;
-    let d2 = ctx['someValue']();
-    return block1([d1, d2]);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -143,11 +142,12 @@ exports[`concurrent renderings scenario 1 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
+    let d1 = ctx['props'].fromA;
+    let d2 = ctx['someValue']();
+    return block1([d1, d2]);
   }
 }"
 `;
@@ -157,12 +157,12 @@ exports[`concurrent renderings scenario 2 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
+  let block1 = createBlock(\`<div><block-text-0/><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].fromA;
-    let d2 = ctx['props'].fromB;
-    return block1([d1, d2]);
+    let d1 = ctx['state'].fromA;
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    return block1([d1], [b2]);
   }
 }"
 `;
@@ -186,12 +186,12 @@ exports[`concurrent renderings scenario 2 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/><block-child-0/></div>\`);
+  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['state'].fromA;
-    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
-    return block1([d1], [b2]);
+    let d1 = ctx['props'].fromA;
+    let d2 = ctx['props'].fromB;
+    return block1([d1, d2]);
   }
 }"
 `;
@@ -201,12 +201,11 @@ exports[`concurrent renderings scenario 2bis 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].fromA;
-    let d2 = ctx['props'].fromB;
-    return block1([d1, d2]);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -230,11 +229,12 @@ exports[`concurrent renderings scenario 2bis 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
+    let d1 = ctx['props'].fromA;
+    let d2 = ctx['props'].fromB;
+    return block1([d1, d2]);
   }
 }"
 `;
@@ -244,12 +244,11 @@ exports[`concurrent renderings scenario 3 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<i><block-text-0/><block-text-1/></i>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].fromA;
-    let d2 = ctx['someValue']();
-    return block1([d1, d2]);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -259,10 +258,10 @@ exports[`concurrent renderings scenario 3 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA,fromC: ctx['state'].fromC}, key + \`__1\`, node, ctx);
+    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -273,10 +272,10 @@ exports[`concurrent renderings scenario 3 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<p><block-child-0/></p>\`);
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
+    let b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA,fromC: ctx['state'].fromC}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -287,20 +286,6 @@ exports[`concurrent renderings scenario 3 4`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`concurrent renderings scenario 4 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<i><block-text-0/><block-text-1/></i>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -311,21 +296,21 @@ exports[`concurrent renderings scenario 4 1`] = `
 }"
 `;
 
-exports[`concurrent renderings scenario 4 2`] = `
+exports[`concurrent renderings scenario 4 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA,fromC: ctx['state'].fromC}, key + \`__1\`, node, ctx);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
 `;
 
-exports[`concurrent renderings scenario 4 3`] = `
+exports[`concurrent renderings scenario 4 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -339,16 +324,31 @@ exports[`concurrent renderings scenario 4 3`] = `
 }"
 `;
 
+exports[`concurrent renderings scenario 4 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA,fromC: ctx['state'].fromC}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`concurrent renderings scenario 4 4`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<i><block-text-0/><block-text-1/></i>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
+    let d1 = ctx['props'].fromA;
+    let d2 = ctx['someValue']();
+    return block1([d1, d2]);
   }
 }"
 `;
@@ -358,11 +358,11 @@ exports[`concurrent renderings scenario 5 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<p><block-text-0/></p>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['someValue']();
-    return block1([d1]);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -372,6 +372,20 @@ exports[`concurrent renderings scenario 5 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<p><block-text-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['someValue']();
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`concurrent renderings scenario 6 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -381,7 +395,7 @@ exports[`concurrent renderings scenario 5 2`] = `
 }"
 `;
 
-exports[`concurrent renderings scenario 6 1`] = `
+exports[`concurrent renderings scenario 6 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -395,7 +409,7 @@ exports[`concurrent renderings scenario 6 1`] = `
 }"
 `;
 
-exports[`concurrent renderings scenario 6 2`] = `
+exports[`concurrent renderings scenario 7 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -409,7 +423,7 @@ exports[`concurrent renderings scenario 6 2`] = `
 }"
 `;
 
-exports[`concurrent renderings scenario 7 1`] = `
+exports[`concurrent renderings scenario 7 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -424,7 +438,7 @@ exports[`concurrent renderings scenario 7 1`] = `
 }"
 `;
 
-exports[`concurrent renderings scenario 7 2`] = `
+exports[`concurrent renderings scenario 8 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -438,7 +452,7 @@ exports[`concurrent renderings scenario 7 2`] = `
 }"
 `;
 
-exports[`concurrent renderings scenario 8 1`] = `
+exports[`concurrent renderings scenario 8 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -453,68 +467,11 @@ exports[`concurrent renderings scenario 8 1`] = `
 }"
 `;
 
-exports[`concurrent renderings scenario 8 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
-  }
-}"
-`;
-
 exports[`concurrent renderings scenario 9 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].fromA;
-    let d2 = ctx['props'].fromC;
-    return block1([d1, d2]);
-  }
-}"
-`;
-
-exports[`concurrent renderings scenario 9 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<p><block-child-0/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA,fromC: ctx['state'].fromC}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`concurrent renderings scenario 9 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<b><block-text-0/></b>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].fromA;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`concurrent renderings scenario 9 4`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-text-0/><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -526,16 +483,59 @@ exports[`concurrent renderings scenario 9 4`] = `
 }"
 `;
 
+exports[`concurrent renderings scenario 9 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<b><block-text-0/></b>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].fromA;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`concurrent renderings scenario 9 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<p><block-child-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA,fromC: ctx['state'].fromC}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`concurrent renderings scenario 9 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].fromA;
+    let d2 = ctx['props'].fromC;
+    return block1([d1, d2]);
+  }
+}"
+`;
+
 exports[`concurrent renderings scenario 10 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['value'];
-    return block1([d1]);
+    let b2 = component(\`ComponentB\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -562,11 +562,11 @@ exports[`concurrent renderings scenario 10 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentB\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
+    let d1 = ctx['value'];
+    return block1([d1]);
   }
 }"
 `;
@@ -576,6 +576,20 @@ exports[`concurrent renderings scenario 11 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {val: ctx['state'].valA}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`concurrent renderings scenario 11 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   let block1 = createBlock(\`<span><block-text-0/>|<block-text-1/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -586,39 +600,11 @@ exports[`concurrent renderings scenario 11 1`] = `
 }"
 `;
 
-exports[`concurrent renderings scenario 11 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {val: ctx['state'].valA}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
-  }
-}"
-`;
-
 exports[`concurrent renderings scenario 12 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].val;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`concurrent renderings scenario 12 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -628,7 +614,7 @@ exports[`concurrent renderings scenario 12 2`] = `
 }"
 `;
 
-exports[`concurrent renderings scenario 13 1`] = `
+exports[`concurrent renderings scenario 12 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -636,13 +622,13 @@ exports[`concurrent renderings scenario 13 1`] = `
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['state'].val;
+    let d1 = ctx['props'].val;
     return block1([d1]);
   }
 }"
 `;
 
-exports[`concurrent renderings scenario 13 2`] = `
+exports[`concurrent renderings scenario 13 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -660,18 +646,30 @@ exports[`concurrent renderings scenario 13 2`] = `
 }"
 `;
 
+exports[`concurrent renderings scenario 13 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['state'].val;
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`concurrent renderings scenario 14 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<p><span><block-text-0/></span><span><block-text-1/></span><span><block-text-2/></span></p>\`);
+  let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].fromA;
-    let d2 = ctx['props'].fromB;
-    let d3 = ctx['state'].fromC;
-    return block1([d1, d2, d3]);
+    let b2 = component(\`B\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -695,11 +693,13 @@ exports[`concurrent renderings scenario 14 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<p><block-child-0/></p>\`);
+  let block1 = createBlock(\`<p><span><block-text-0/></span><span><block-text-1/></span><span><block-text-2/></span></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`B\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
+    let d1 = ctx['props'].fromA;
+    let d2 = ctx['props'].fromB;
+    let d3 = ctx['state'].fromC;
+    return block1([d1, d2, d3]);
   }
 }"
 `;
@@ -709,13 +709,11 @@ exports[`concurrent renderings scenario 15 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<p><span><block-text-0/></span><span><block-text-1/></span><span><block-text-2/></span></p>\`);
+  let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].fromA;
-    let d2 = ctx['props'].fromB;
-    let d3 = ctx['state'].fromC;
-    return block1([d1, d2, d3]);
+    let b2 = component(\`B\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -739,11 +737,13 @@ exports[`concurrent renderings scenario 15 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<p><block-child-0/></p>\`);
+  let block1 = createBlock(\`<p><span><block-text-0/></span><span><block-text-1/></span><span><block-text-2/></span></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`B\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
+    let d1 = ctx['props'].fromA;
+    let d2 = ctx['props'].fromB;
+    let d3 = ctx['state'].fromC;
+    return block1([d1, d2, d3]);
   }
 }"
 `;
@@ -754,7 +754,7 @@ exports[`concurrent renderings scenario 16 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return text(\`D\`);
+    return component(\`B\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -764,6 +764,17 @@ exports[`concurrent renderings scenario 16 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`C\`, {fromB: ctx['state'].fromB,fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`concurrent renderings scenario 16 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   return function template(ctx, node, key = \\"\\") {
     let b2,b3,b4,b5,b6,b7,b8;
     b2 = text(ctx['props'].fromA);
@@ -780,24 +791,13 @@ exports[`concurrent renderings scenario 16 2`] = `
 }"
 `;
 
-exports[`concurrent renderings scenario 16 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`C\`, {fromB: ctx['state'].fromB,fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
 exports[`concurrent renderings scenario 16 4`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`B\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    return text(\`D\`);
   }
 }"
 `;
@@ -807,33 +807,6 @@ exports[`creating two async components, scenario 1 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['getValue']();
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`creating two async components, scenario 1 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<span>b</span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`creating two async components, scenario 1 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     if (ctx['state'].flagA) {
@@ -847,16 +820,47 @@ exports[`creating two async components, scenario 1 3`] = `
 }"
 `;
 
+exports[`creating two async components, scenario 1 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['getValue']();
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`creating two async components, scenario 1 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span>b</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`creating two async components, scenario 2 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span>a<block-text-0/></span>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].val;
-    return block1([d1]);
+    let b2,b3;
+    b2 = component(\`ChildA\`, {val: ctx['state'].valA}, key + \`__1\`, node, ctx);
+    if (ctx['state'].flagB) {
+      b3 = component(\`ChildB\`, {val: ctx['state'].valB}, key + \`__2\`, node, ctx);
+    }
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -866,7 +870,7 @@ exports[`creating two async components, scenario 2 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span>b<block-text-0/></span>\`);
+  let block1 = createBlock(\`<span>a<block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let d1 = ctx['props'].val;
@@ -880,6 +884,20 @@ exports[`creating two async components, scenario 2 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<span>b<block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].val;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`creating two async components, scenario 3 (patching in the same frame) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -893,7 +911,7 @@ exports[`creating two async components, scenario 2 3`] = `
 }"
 `;
 
-exports[`creating two async components, scenario 3 (patching in the same frame) 1`] = `
+exports[`creating two async components, scenario 3 (patching in the same frame) 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -907,7 +925,7 @@ exports[`creating two async components, scenario 3 (patching in the same frame)
 }"
 `;
 
-exports[`creating two async components, scenario 3 (patching in the same frame) 2`] = `
+exports[`creating two async components, scenario 3 (patching in the same frame) 3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -921,50 +939,18 @@ exports[`creating two async components, scenario 3 (patching in the same frame)
 }"
 `;
 
-exports[`creating two async components, scenario 3 (patching in the same frame) 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
-    b2 = component(\`ChildA\`, {val: ctx['state'].valA}, key + \`__1\`, node, ctx);
-    if (ctx['state'].flagB) {
-      b3 = component(\`ChildB\`, {val: ctx['state'].valB}, key + \`__2\`, node, ctx);
-    }
-    return block1([], [b2, b3]);
-  }
-}"
-`;
-
 exports[`delay willUpdateProps 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = text(ctx['props'].value);
-    let b3 = text(\`_\`);
-    let b4 = text(ctx['state'].int);
-    return multi([b2, b3, b4]);
-  }
-}"
-`;
-
-exports[`delay willUpdateProps 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   return function template(ctx, node, key = \\"\\") {
     return component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
   }
 }"
 `;
 
-exports[`delay willUpdateProps with rendering grandchild 1`] = `
+exports[`delay willUpdateProps 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -978,20 +964,18 @@ exports[`delay willUpdateProps with rendering grandchild 1`] = `
 }"
 `;
 
-exports[`delay willUpdateProps with rendering grandchild 2`] = `
+exports[`delay willUpdateProps with rendering grandchild 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div/>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    return component(\`Parent\`, {state: ctx['state']}, key + \`__1\`, node, ctx);
   }
 }"
 `;
 
-exports[`delay willUpdateProps with rendering grandchild 3`] = `
+exports[`delay willUpdateProps with rendering grandchild 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1004,13 +988,29 @@ exports[`delay willUpdateProps with rendering grandchild 3`] = `
 }"
 `;
 
+exports[`delay willUpdateProps with rendering grandchild 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = text(ctx['props'].value);
+    let b3 = text(\`_\`);
+    let b4 = text(ctx['state'].int);
+    return multi([b2, b3, b4]);
+  }
+}"
+`;
+
 exports[`delay willUpdateProps with rendering grandchild 4`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div/>\`);
+  
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Parent\`, {state: ctx['state']}, key + \`__1\`, node, ctx);
+    return block1();
   }
 }"
 `;
@@ -1020,20 +1020,6 @@ exports[`destroying/recreating a subwidget with different props (if start is not
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span>child:<block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].val;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`destroying/recreating a subwidget with different props (if start is not over) 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -1046,18 +1032,21 @@ exports[`destroying/recreating a subwidget with different props (if start is not
 }"
 `;
 
-exports[`parent and child rendered at exact same time 1`] = `
+exports[`destroying/recreating a subwidget with different props (if start is not over) 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<span>child:<block-text-0/></span>\`);
+  
   return function template(ctx, node, key = \\"\\") {
-    return text(ctx['props'].value);
+    let d1 = ctx['props'].val;
+    return block1([d1]);
   }
 }"
 `;
 
-exports[`parent and child rendered at exact same time 2`] = `
+exports[`parent and child rendered at exact same time 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1068,15 +1057,30 @@ exports[`parent and child rendered at exact same time 2`] = `
 }"
 `;
 
+exports[`parent and child rendered at exact same time 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['props'].value);
+  }
+}"
+`;
+
 exports[`properly behave when destroyed/unmounted while rendering  1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div/>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    let b2;
+    if (ctx['state'].flag) {
+      b2 = component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
+    }
+    return block1([], [b2]);
   }
 }"
 `;
@@ -1100,24 +1104,7 @@ exports[`properly behave when destroyed/unmounted while rendering  3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2;
-    if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
-    }
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`rendering component again in next microtick 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>Child</div>\`);
+  let block1 = createBlock(\`<div/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     return block1();
@@ -1125,7 +1112,7 @@ exports[`rendering component again in next microtick 1`] = `
 }"
 `;
 
-exports[`rendering component again in next microtick 2`] = `
+exports[`rendering component again in next microtick 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1143,22 +1130,20 @@ exports[`rendering component again in next microtick 2`] = `
 }"
 `;
 
-exports[`two renderings initiated between willPatch and patched 1`] = `
+exports[`rendering component again in next microtick 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<abc><block-text-0/><block-text-1/></abc>\`);
+  let block1 = createBlock(\`<div>Child</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].val;
-    let d2 = ctx['mounted'];
-    return block1([d1, d2]);
+    return block1();
   }
 }"
 `;
 
-exports[`two renderings initiated between willPatch and patched 2`] = `
+exports[`two renderings initiated between willPatch and patched 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1176,18 +1161,22 @@ exports[`two renderings initiated between willPatch and patched 2`] = `
 }"
 `;
 
-exports[`two sequential renderings before an animation frame 1`] = `
+exports[`two renderings initiated between willPatch and patched 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<abc><block-text-0/><block-text-1/></abc>\`);
+  
   return function template(ctx, node, key = \\"\\") {
-    return text(ctx['props'].value);
+    let d1 = ctx['props'].val;
+    let d2 = ctx['mounted'];
+    return block1([d1, d2]);
   }
 }"
 `;
 
-exports[`two sequential renderings before an animation frame 2`] = `
+exports[`two sequential renderings before an animation frame 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1198,11 +1187,36 @@ exports[`two sequential renderings before an animation frame 2`] = `
 }"
 `;
 
+exports[`two sequential renderings before an animation frame 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['props'].value);
+  }
+}"
+`;
+
 exports[`update a sub-component twice in the same frame 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`ChildA\`, {val: ctx['state'].valA}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`update a sub-component twice in the same frame 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -1212,7 +1226,7 @@ exports[`update a sub-component twice in the same frame 1`] = `
 }"
 `;
 
-exports[`update a sub-component twice in the same frame 2`] = `
+exports[`update a sub-component twice in the same frame, 2 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1226,7 +1240,7 @@ exports[`update a sub-component twice in the same frame 2`] = `
 }"
 `;
 
-exports[`update a sub-component twice in the same frame, 2 1`] = `
+exports[`update a sub-component twice in the same frame, 2 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1239,17 +1253,3 @@ exports[`update a sub-component twice in the same frame, 2 1`] = `
   }
 }"
 `;
-
-exports[`update a sub-component twice in the same frame, 2 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ChildA\`, {val: ctx['state'].valA}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
-  }
-}"
-`;
diff --git a/tests/components/__snapshots__/error_handling.test.ts.snap b/tests/components/__snapshots__/error_handling.test.ts.snap
index 55831a9a..ddf47998 100644
--- a/tests/components/__snapshots__/error_handling.test.ts.snap
+++ b/tests/components/__snapshots__/error_handling.test.ts.snap
@@ -16,20 +16,6 @@ exports[`basics no component catching error lead to full app destruction 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].flag&&ctx['state'].this.will.crash;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`basics no component catching error lead to full app destruction 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -39,21 +25,21 @@ exports[`basics no component catching error lead to full app destruction 2`] = `
 }"
 `;
 
-exports[`basics simple catchError 1`] = `
+exports[`basics no component catching error lead to full app destruction 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['a'].b.c;
+    let d1 = ctx['props'].flag&&ctx['state'].this.will.crash;
     return block1([d1]);
   }
 }"
 `;
 
-exports[`basics simple catchError 2`] = `
+exports[`basics simple catchError 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -72,16 +58,34 @@ exports[`basics simple catchError 2`] = `
 }"
 `;
 
+exports[`basics simple catchError 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['a'].b.c;
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`can catch errors can catch an error in a component render function 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return component(\`ErrorComponent\`, {flag: ctx['state'].flag}, key + \`__2\`, node, ctx);
+  }
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].flag&&ctx['state'].this.will.crash;
-    return block1([d1]);
+    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
+    return block1([], [b3]);
   }
 }"
 `;
@@ -111,15 +115,11 @@ exports[`can catch errors can catch an error in a component render function 3`]
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    return component(\`ErrorComponent\`, {flag: ctx['state'].flag}, key + \`__2\`, node, ctx);
-  }
+  let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
-    return block1([], [b3]);
+    let d1 = ctx['props'].flag&&ctx['state'].this.will.crash;
+    return block1([d1]);
   }
 }"
 `;
@@ -129,10 +129,15 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>Some text</div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
+  }
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
+    return block1([], [b3]);
   }
 }"
 `;
@@ -162,29 +167,23 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>classic</div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    let b3 = component(\`ClassicCompoent\`, {}, key + \`__2\`, node, ctx);
+    let b4 = component(\`ErrorComponent\`, {}, key + \`__3\`, node, ctx);
+    return multi([b3, b4]);
+  }
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    let b5 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__4\`, node, ctx);
+    return block1([], [b5]);
   }
 }"
 `;
 
 exports[`can catch errors can catch an error in the constructor call of a component render function 2 2`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>Some text</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`can catch errors can catch an error in the constructor call of a component render function 2 3`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
@@ -203,22 +202,28 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 }"
 `;
 
+exports[`can catch errors can catch an error in the constructor call of a component render function 2 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>classic</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`can catch errors can catch an error in the constructor call of a component render function 2 4`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    let b3 = component(\`ClassicCompoent\`, {}, key + \`__2\`, node, ctx);
-    let b4 = component(\`ErrorComponent\`, {}, key + \`__3\`, node, ctx);
-    return multi([b3, b4]);
-  }
+  let block1 = createBlock(\`<div>Some text</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b5 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__4\`, node, ctx);
-    return block1([], [b5]);
+    return block1();
   }
 }"
 `;
@@ -228,6 +233,19 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div>Some text</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`can catch errors can catch an error in the initial call of a component render function (parent mounted) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
@@ -241,20 +259,6 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 }"
 `;
 
-exports[`can catch errors can catch an error in the initial call of a component render function (parent mounted) 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['state'].this.will.crash;
-    return block1([d1]);
-  }
-}"
-`;
-
 exports[`can catch errors can catch an error in the initial call of a component render function (parent mounted) 2`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -280,15 +284,11 @@ exports[`can catch errors can catch an error in the initial call of a component
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    return component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
-  }
+  let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
-    return block1([], [b3]);
+    let d1 = ctx['state'].this.will.crash;
+    return block1([d1]);
   }
 }"
 `;
@@ -298,11 +298,18 @@ exports[`can catch errors can catch an error in the initial call of a component
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
+  }
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['state'].this.will.crash;
-    return block1([d1]);
+    let b3;
+    if (ctx['state'].flag) {
+      b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
+    }
+    return block1([], [b3]);
   }
 }"
 `;
@@ -332,18 +339,11 @@ exports[`can catch errors can catch an error in the initial call of a component
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    return component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
-  }
+  let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b3;
-    if (ctx['state'].flag) {
-      b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
-    }
-    return block1([], [b3]);
+    let d1 = ctx['state'].this.will.crash;
+    return block1([d1]);
   }
 }"
 `;
@@ -353,10 +353,8 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>Some text</div>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    return component(\`B\`, {}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -366,6 +364,20 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`C\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`can catch errors can catch an error in the mounted call (in child of child) 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -380,36 +392,11 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
 }"
 `;
 
-exports[`can catch errors can catch an error in the mounted call (in child of child) 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`C\`, {}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
-  }
-}"
-`;
-
 exports[`can catch errors can catch an error in the mounted call (in child of child) 4`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`B\`, {}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
-exports[`can catch errors can catch an error in the mounted call (in root component) 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div>Some text</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -418,7 +405,7 @@ exports[`can catch errors can catch an error in the mounted call (in root compon
 }"
 `;
 
-exports[`can catch errors can catch an error in the mounted call (in root component) 2`] = `
+exports[`can catch errors can catch an error in the mounted call (in root component) 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -437,7 +424,7 @@ exports[`can catch errors can catch an error in the mounted call (in root compon
 }"
 `;
 
-exports[`can catch errors can catch an error in the mounted call 1`] = `
+exports[`can catch errors can catch an error in the mounted call (in root component) 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -450,6 +437,24 @@ exports[`can catch errors can catch an error in the mounted call 1`] = `
 }"
 `;
 
+exports[`can catch errors can catch an error in the mounted call 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
+    return block1([], [b3]);
+  }
+}"
+`;
+
 exports[`can catch errors can catch an error in the mounted call 2`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -475,15 +480,10 @@ exports[`can catch errors can catch an error in the mounted call 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    return component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
-  }
+  let block1 = createBlock(\`<div>Some text</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
-    return block1([], [b3]);
+    return block1();
   }
 }"
 `;
@@ -493,11 +493,16 @@ exports[`can catch errors can catch an error in the willPatch call 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  let block1 = createBlock(\`<div><span><block-text-0/></span><block-child-0/></div>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return component(\`ErrorComponent\`, {message: ctx['state'].message}, key + \`__2\`, node, ctx);
+  }
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].message;
-    return block1([d1]);
+    let d1 = ctx['state'].message;
+    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
+    return block1([d1], [b3]);
   }
 }"
 `;
@@ -527,16 +532,11 @@ exports[`can catch errors can catch an error in the willPatch call 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><span><block-text-0/></span><block-child-0/></div>\`);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    return component(\`ErrorComponent\`, {message: ctx['state'].message}, key + \`__2\`, node, ctx);
-  }
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['state'].message;
-    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
-    return block1([d1], [b3]);
+    let d1 = ctx['props'].message;
+    return block1([d1]);
   }
 }"
 `;
@@ -546,10 +546,15 @@ exports[`can catch errors can catch an error in the willStart call 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>Some text</div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
+  }
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
+    return block1([], [b3]);
   }
 }"
 `;
@@ -579,37 +584,6 @@ exports[`can catch errors can catch an error in the willStart call 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    return component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
-    return block1([], [b3]);
-  }
-}"
-`;
-
-exports[`can catch errors can catch an error origination from a child's willStart function 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>classic</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`can catch errors can catch an error origination from a child's willStart function 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div>Some text</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -618,27 +592,7 @@ exports[`can catch errors can catch an error origination from a child's willStar
 }"
 `;
 
-exports[`can catch errors can catch an error origination from a child's willStart function 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
-    if (ctx['state'].error) {
-      b2 = text(\`Error handled\`);
-    } else {
-      b3 = callSlot(ctx, node, key, 'default', false, {});
-    }
-    return block1([], [b2, b3]);
-  }
-}"
-`;
-
-exports[`can catch errors can catch an error origination from a child's willStart function 4`] = `
+exports[`can catch errors can catch an error origination from a child's willStart function 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -658,16 +612,67 @@ exports[`can catch errors can catch an error origination from a child's willStar
 }"
 `;
 
+exports[`can catch errors can catch an error origination from a child's willStart function 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['state'].error) {
+      b2 = text(\`Error handled\`);
+    } else {
+      b3 = callSlot(ctx, node, key, 'default', false, {});
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`can catch errors can catch an error origination from a child's willStart function 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>classic</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`can catch errors can catch an error origination from a child's willStart function 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>Some text</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`can catch errors catchError in catchError 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['a'].b.c;
-    return block1([d1]);
+    let b2,b3;
+    if (ctx['error']) {
+      b2 = text(\`Error\`);
+    } else {
+      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -691,16 +696,11 @@ exports[`can catch errors catchError in catchError 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
-    if (ctx['error']) {
-      b2 = text(\`Error\`);
-    } else {
-      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    }
-    return block1([], [b2, b3]);
+    let d1 = ctx['a'].b.c;
+    return block1([d1]);
   }
 }"
 `;
@@ -710,16 +710,33 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>Some text</div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  function slot2(ctx, node, key = \\"\\") {
+    return component(\`ErrorComponent\`, {}, key + \`__3\`, node, ctx);
+  }
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    let b2 = component(\`OK\`, {}, key + \`__1\`, node, ctx);
+    let b4 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot2, __ctx: ctx}}}, key + \`__4\`, node, ctx);
+    return block1([], [b2, b4]);
   }
 }"
 `;
 
 exports[`can catch errors error in mounted on a component with a sibling (properly mounted) 2`] = `
 "function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`OK\`);
+  }
+}"
+`;
+
+exports[`can catch errors error in mounted on a component with a sibling (properly mounted) 3`] = `
+"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
@@ -738,32 +755,15 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
 }"
 `;
 
-exports[`can catch errors error in mounted on a component with a sibling (properly mounted) 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(\`OK\`);
-  }
-}"
-`;
-
 exports[`can catch errors error in mounted on a component with a sibling (properly mounted) 4`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
-  
-  function slot2(ctx, node, key = \\"\\") {
-    return component(\`ErrorComponent\`, {}, key + \`__3\`, node, ctx);
-  }
+  let block1 = createBlock(\`<div>Some text</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`OK\`, {}, key + \`__1\`, node, ctx);
-    let b4 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot2, __ctx: ctx}}}, key + \`__4\`, node, ctx);
-    return block1([], [b2, b4]);
+    return block1();
   }
 }"
 `;
@@ -773,16 +773,8 @@ exports[`can catch errors onError in class inheritance is called if rethrown 1`]
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
-    if (!ctx['state'].error) {
-      b2 = text(this.will.crash);
-    } else {
-      b3 = text(ctx['state'].error);
-    }
-    return block1([], [b2, b3]);
+    return component(\`Concrete\`, {}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -792,13 +784,32 @@ exports[`can catch errors onError in class inheritance is called if rethrown 2`]
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (!ctx['state'].error) {
+      b2 = text(this.will.crash);
+    } else {
+      b3 = text(ctx['state'].error);
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`can catch errors onError in class inheritance is not called if no rethrown 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   return function template(ctx, node, key = \\"\\") {
     return component(\`Concrete\`, {}, key + \`__1\`, node, ctx);
   }
 }"
 `;
 
-exports[`can catch errors onError in class inheritance is not called if no rethrown 1`] = `
+exports[`can catch errors onError in class inheritance is not called if no rethrown 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -817,36 +828,11 @@ exports[`can catch errors onError in class inheritance is not called if no rethr
 }"
 `;
 
-exports[`can catch errors onError in class inheritance is not called if no rethrown 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`Concrete\`, {}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
 exports[`errors and promises a rendering error in a sub component will reject the mount promise 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = this.will.crash;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`errors and promises a rendering error in a sub component will reject the mount promise 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -856,6 +842,20 @@ exports[`errors and promises a rendering error in a sub component will reject th
 }"
 `;
 
+exports[`errors and promises a rendering error in a sub component will reject the mount promise 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = this.will.crash;
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`errors and promises a rendering error will reject the mount promise 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -875,10 +875,12 @@ exports[`errors and promises a rendering error will reject the render promise (w
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span/>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let d1 = ctx['x'].y;
+    return block1([d1], [b2]);
   }
 }"
 `;
@@ -888,12 +890,10 @@ exports[`errors and promises a rendering error will reject the render promise (w
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
+  let block1 = createBlock(\`<span/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    let d1 = ctx['x'].y;
-    return block1([d1], [b2]);
+    return block1();
   }
 }"
 `;
diff --git a/tests/components/__snapshots__/event_handling.test.ts.snap b/tests/components/__snapshots__/event_handling.test.ts.snap
index 4917dded..8fcefae0 100644
--- a/tests/components/__snapshots__/event_handling.test.ts.snap
+++ b/tests/components/__snapshots__/event_handling.test.ts.snap
@@ -5,19 +5,6 @@ exports[`event handling handler receive the event as argument 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>simple vnode</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`event handling handler receive the event as argument 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<span block-handler-0=\\"click\\"><block-child-0/><block-text-1/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -29,6 +16,19 @@ exports[`event handling handler receive the event as argument 2`] = `
 }"
 `;
 
+exports[`event handling handler receive the event as argument 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>simple vnode</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`event handling objects from scope are properly captured by t-on 1`] = `
 "function anonymous(bdom, helpers
 ) {
diff --git a/tests/components/__snapshots__/higher_order_component.test.ts.snap b/tests/components/__snapshots__/higher_order_component.test.ts.snap
index 10aa0112..2e5d6283 100644
--- a/tests/components/__snapshots__/higher_order_component.test.ts.snap
+++ b/tests/components/__snapshots__/higher_order_component.test.ts.snap
@@ -5,6 +5,17 @@ exports[`basics basic use 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {p: 1}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics basic use 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   let block1 = createBlock(\`<span>child<block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -14,48 +25,11 @@ exports[`basics basic use 1`] = `
 }"
 `;
 
-exports[`basics basic use 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {p: 1}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
 exports[`basics can select a sub widget  1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span>CHILD 1</span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`basics can select a sub widget  2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>CHILD 2</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`basics can select a sub widget  3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     if (ctx['env'].options.flag) {
@@ -69,7 +43,7 @@ exports[`basics can select a sub widget  3`] = `
 }"
 `;
 
-exports[`basics can select a sub widget, part 2 1`] = `
+exports[`basics can select a sub widget  2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -82,7 +56,7 @@ exports[`basics can select a sub widget, part 2 1`] = `
 }"
 `;
 
-exports[`basics can select a sub widget, part 2 2`] = `
+exports[`basics can select a sub widget  3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -95,7 +69,7 @@ exports[`basics can select a sub widget, part 2 2`] = `
 }"
 `;
 
-exports[`basics can select a sub widget, part 2 3`] = `
+exports[`basics can select a sub widget, part 2 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -113,11 +87,48 @@ exports[`basics can select a sub widget, part 2 3`] = `
 }"
 `;
 
+exports[`basics can select a sub widget, part 2 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span>CHILD 1</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics can select a sub widget, part 2 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>CHILD 2</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`basics sub widget is interactive 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {p: 1}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics sub widget is interactive 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   let block1 = createBlock(\`<span><button block-handler-0=\\"click\\">click</button>child<block-text-1/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -128,26 +139,16 @@ exports[`basics sub widget is interactive 1`] = `
 }"
 `;
 
-exports[`basics sub widget is interactive 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {p: 1}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
 exports[`basics top level sub widget with a parent 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span>Hello</span>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    let b2 = component(\`ComponentB\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -168,11 +169,10 @@ exports[`basics top level sub widget with a parent 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<span>Hello</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentB\`, {}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
+    return block1();
   }
 }"
 `;
diff --git a/tests/components/__snapshots__/hooks.test.ts.snap b/tests/components/__snapshots__/hooks.test.ts.snap
index f9d7c06d..fd988e2a 100644
--- a/tests/components/__snapshots__/hooks.test.ts.snap
+++ b/tests/components/__snapshots__/hooks.test.ts.snap
@@ -42,11 +42,8 @@ exports[`hooks can use onWillStart, onWillUpdateProps 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].value;
-    return block1([d1]);
+    return component(\`MyComponent\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -56,8 +53,11 @@ exports[`hooks can use onWillStart, onWillUpdateProps 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
   return function template(ctx, node, key = \\"\\") {
-    return component(\`MyComponent\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+    let d1 = ctx['props'].value;
+    return block1([d1]);
   }
 }"
 `;
@@ -108,11 +108,10 @@ exports[`hooks parent and child env 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['env'].val;
-    return block1([d1]);
+    let b2 = text(ctx['env'].val);
+    let b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return multi([b2, b3]);
   }
 }"
 `;
@@ -122,10 +121,11 @@ exports[`hooks parent and child env 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
   return function template(ctx, node, key = \\"\\") {
-    let b2 = text(ctx['env'].val);
-    let b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    return multi([b2, b3]);
+    let d1 = ctx['env'].val;
+    return block1([d1]);
   }
 }"
 `;
@@ -163,12 +163,8 @@ exports[`hooks use sub env supports arbitrary descriptor 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/> <block-text-1/></div>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['env'].someVal;
-    let d2 = ctx['env'].someVal2;
-    return block1([d1, d2]);
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -178,8 +174,12 @@ exports[`hooks use sub env supports arbitrary descriptor 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div><block-text-0/> <block-text-1/></div>\`);
+  
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let d1 = ctx['env'].someVal;
+    let d2 = ctx['env'].someVal2;
+    return block1([d1, d2]);
   }
 }"
 `;
@@ -229,11 +229,12 @@ exports[`hooks useExternalListener 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].value;
-    return block1([d1]);
+    let b2;
+    if (ctx['state'].flag) {
+      b2 = component(\`MyComponent\`, {}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2]);
   }
 }"
 `;
@@ -243,12 +244,11 @@ exports[`hooks useExternalListener 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
   return function template(ctx, node, key = \\"\\") {
-    let b2;
-    if (ctx['state'].flag) {
-      b2 = component(\`MyComponent\`, {}, key + \`__1\`, node, ctx);
-    }
-    return multi([b2]);
+    let d1 = ctx['props'].value;
+    return block1([d1]);
   }
 }"
 `;
diff --git a/tests/components/__snapshots__/lifecycle.test.ts.snap b/tests/components/__snapshots__/lifecycle.test.ts.snap
index 1e3c2adb..5aa89049 100644
--- a/tests/components/__snapshots__/lifecycle.test.ts.snap
+++ b/tests/components/__snapshots__/lifecycle.test.ts.snap
@@ -18,10 +18,12 @@ exports[`lifecycle hooks component semantics 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>B</div>\`);
+  let block1 = createBlock(\`<div>A<block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    let b2 = component(\`B\`, {}, key + \`__1\`, node, ctx);
+    let b3 = component(\`C\`, {}, key + \`__2\`, node, ctx);
+    return block1([], [b2, b3]);
   }
 }"
 `;
@@ -31,7 +33,7 @@ exports[`lifecycle hooks component semantics 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>D</div>\`);
+  let block1 = createBlock(\`<div>B</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     return block1();
@@ -44,32 +46,6 @@ exports[`lifecycle hooks component semantics 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>E</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`lifecycle hooks component semantics 4`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>F</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`lifecycle hooks component semantics 5`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div>C<block-child-0/><block-child-1/><block-child-2/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -85,17 +61,41 @@ exports[`lifecycle hooks component semantics 5`] = `
 }"
 `;
 
+exports[`lifecycle hooks component semantics 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>D</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks component semantics 5`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>E</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`lifecycle hooks component semantics 6`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>A<block-child-0/><block-child-1/></div>\`);
+  let block1 = createBlock(\`<div>F</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`B\`, {}, key + \`__1\`, node, ctx);
-    let b3 = component(\`C\`, {}, key + \`__2\`, node, ctx);
-    return block1([], [b2, b3]);
+    return block1();
   }
 }"
 `;
@@ -105,20 +105,6 @@ exports[`lifecycle hooks components are unmounted and destroyed if no longer in
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].n;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`lifecycle hooks components are unmounted and destroyed if no longer in DOM, even after updateprops 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block2 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -132,20 +118,21 @@ exports[`lifecycle hooks components are unmounted and destroyed if no longer in
 }"
 `;
 
-exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM 1`] = `
+exports[`lifecycle hooks components are unmounted and destroyed if no longer in DOM, even after updateprops 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div/>\`);
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    let d1 = ctx['props'].n;
+    return block1([d1]);
   }
 }"
 `;
 
-exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM 2`] = `
+exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -160,7 +147,7 @@ exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM
 }"
 `;
 
-exports[`lifecycle hooks hooks are called in proper order in widget creation/destruction 1`] = `
+exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -173,7 +160,7 @@ exports[`lifecycle hooks hooks are called in proper order in widget creation/des
 }"
 `;
 
-exports[`lifecycle hooks hooks are called in proper order in widget creation/destruction 2`] = `
+exports[`lifecycle hooks hooks are called in proper order in widget creation/destruction 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -187,7 +174,7 @@ exports[`lifecycle hooks hooks are called in proper order in widget creation/des
 }"
 `;
 
-exports[`lifecycle hooks lifecycle semantics 1`] = `
+exports[`lifecycle hooks hooks are called in proper order in widget creation/destruction 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -200,7 +187,7 @@ exports[`lifecycle hooks lifecycle semantics 1`] = `
 }"
 `;
 
-exports[`lifecycle hooks lifecycle semantics 2`] = `
+exports[`lifecycle hooks lifecycle semantics 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -214,7 +201,7 @@ exports[`lifecycle hooks lifecycle semantics 2`] = `
 }"
 `;
 
-exports[`lifecycle hooks lifecycle semantics, part 2 1`] = `
+exports[`lifecycle hooks lifecycle semantics 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -227,6 +214,21 @@ exports[`lifecycle hooks lifecycle semantics, part 2 1`] = `
 }"
 `;
 
+exports[`lifecycle hooks lifecycle semantics, part 2 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].hasChild) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2]);
+  }
+}"
+`;
+
 exports[`lifecycle hooks lifecycle semantics, part 2 2`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -243,21 +245,6 @@ exports[`lifecycle hooks lifecycle semantics, part 2 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  return function template(ctx, node, key = \\"\\") {
-    let b2;
-    if (ctx['state'].hasChild) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    }
-    return multi([b2]);
-  }
-}"
-`;
-
-exports[`lifecycle hooks lifecycle semantics, part 3 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div/>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -266,18 +253,7 @@ exports[`lifecycle hooks lifecycle semantics, part 3 1`] = `
 }"
 `;
 
-exports[`lifecycle hooks lifecycle semantics, part 3 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
-exports[`lifecycle hooks lifecycle semantics, part 3 3`] = `
+exports[`lifecycle hooks lifecycle semantics, part 3 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -297,10 +273,12 @@ exports[`lifecycle hooks lifecycle semantics, part 4 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div/>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    let b2;
+    if (ctx['state'].hasChild) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2]);
   }
 }"
 `;
@@ -321,12 +299,10 @@ exports[`lifecycle hooks lifecycle semantics, part 4 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div/>\`);
+  
   return function template(ctx, node, key = \\"\\") {
-    let b2;
-    if (ctx['state'].hasChild) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    }
-    return multi([b2]);
+    return block1();
   }
 }"
 `;
@@ -336,19 +312,6 @@ exports[`lifecycle hooks lifecycle semantics, part 5 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`lifecycle hooks lifecycle semantics, part 5 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
@@ -359,7 +322,7 @@ exports[`lifecycle hooks lifecycle semantics, part 5 2`] = `
 }"
 `;
 
-exports[`lifecycle hooks lifecycle semantics, part 6 1`] = `
+exports[`lifecycle hooks lifecycle semantics, part 5 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -372,7 +335,7 @@ exports[`lifecycle hooks lifecycle semantics, part 6 1`] = `
 }"
 `;
 
-exports[`lifecycle hooks lifecycle semantics, part 6 2`] = `
+exports[`lifecycle hooks lifecycle semantics, part 6 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -383,6 +346,19 @@ exports[`lifecycle hooks lifecycle semantics, part 6 2`] = `
 }"
 `;
 
+exports[`lifecycle hooks lifecycle semantics, part 6 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`lifecycle hooks mounted hook is called if mounted in DOM 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -401,19 +377,6 @@ exports[`lifecycle hooks mounted hook is called on every mount, not just the fir
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div>child</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`lifecycle hooks mounted hook is called on every mount, not just the first one 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
@@ -424,12 +387,12 @@ exports[`lifecycle hooks mounted hook is called on every mount, not just the fir
 }"
 `;
 
-exports[`lifecycle hooks mounted hook is called on subcomponents, in proper order 1`] = `
+exports[`lifecycle hooks mounted hook is called on every mount, not just the first one 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div/>\`);
+  let block1 = createBlock(\`<div>child</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     return block1();
@@ -437,7 +400,7 @@ exports[`lifecycle hooks mounted hook is called on subcomponents, in proper orde
 }"
 `;
 
-exports[`lifecycle hooks mounted hook is called on subcomponents, in proper order 2`] = `
+exports[`lifecycle hooks mounted hook is called on subcomponents, in proper order 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -451,7 +414,7 @@ exports[`lifecycle hooks mounted hook is called on subcomponents, in proper orde
 }"
 `;
 
-exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper order 1`] = `
+exports[`lifecycle hooks mounted hook is called on subcomponents, in proper order 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -464,6 +427,23 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
 }"
 `;
 
+exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper order 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].flag) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper order 2`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -483,14 +463,10 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<div/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2;
-    if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    }
-    return block1([], [b2]);
+    return block1();
   }
 }"
 `;
@@ -500,6 +476,17 @@ exports[`lifecycle hooks onWillRender 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`lifecycle hooks onWillRender 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -510,35 +497,11 @@ exports[`lifecycle hooks onWillRender 1`] = `
 }"
 `;
 
-exports[`lifecycle hooks onWillRender 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
 exports[`lifecycle hooks patched hook is called after updateProps 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`lifecycle hooks patched hook is called after updateProps 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -548,6 +511,19 @@ exports[`lifecycle hooks patched hook is called after updateProps 2`] = `
 }"
 `;
 
+exports[`lifecycle hooks patched hook is called after updateProps 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`lifecycle hooks patched hook is called after updating State 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -609,19 +585,6 @@ exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly calle
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly called 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
@@ -632,16 +595,29 @@ exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly calle
 }"
 `;
 
+exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly called 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents, in proper order 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].n;
-    return block1([d1]);
+    let b2 = component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
   }
 }"
 `;
@@ -665,11 +641,11 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
+    let d1 = ctx['props'].n;
+    return block1([d1]);
   }
 }"
 `;
@@ -679,10 +655,8 @@ exports[`lifecycle hooks willStart hook is called on sub component 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div/>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -692,8 +666,10 @@ exports[`lifecycle hooks willStart hook is called on sub component 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div/>\`);
+  
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return block1();
   }
 }"
 `;
@@ -729,19 +705,6 @@ exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is mounted in some other position 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   let block3 = createBlock(\`<div/>\`);
   
@@ -757,11 +720,35 @@ exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is
 }"
 `;
 
+exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is mounted in some other position 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`lifecycle hooks willUpdateProps hook is called 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`lifecycle hooks willUpdateProps hook is called 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -770,14 +757,3 @@ exports[`lifecycle hooks willUpdateProps hook is called 1`] = `
   }
 }"
 `;
-
-exports[`lifecycle hooks willUpdateProps hook is called 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
diff --git a/tests/components/__snapshots__/props.test.ts.snap b/tests/components/__snapshots__/props.test.ts.snap
index 9b039092..df0a73b3 100644
--- a/tests/components/__snapshots__/props.test.ts.snap
+++ b/tests/components/__snapshots__/props.test.ts.snap
@@ -5,20 +5,6 @@ exports[`basics accept ES6-like syntax for props (with getters) 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].greetings;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`basics accept ES6-like syntax for props (with getters) 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -28,21 +14,21 @@ exports[`basics accept ES6-like syntax for props (with getters) 2`] = `
 }"
 `;
 
-exports[`basics arrow functions as prop correctly capture their scope 1`] = `
+exports[`basics accept ES6-like syntax for props (with getters) 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<button block-handler-0=\\"click\\"/>\`);
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = [ctx['props'].onClick, ctx];
+    let d1 = ctx['props'].greetings;
     return block1([d1]);
   }
 }"
 `;
 
-exports[`basics arrow functions as prop correctly capture their scope 2`] = `
+exports[`basics arrow functions as prop correctly capture their scope 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -63,60 +49,7 @@ exports[`basics arrow functions as prop correctly capture their scope 2`] = `
 }"
 `;
 
-exports[`basics explicit object prop 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['state'].someval;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`basics explicit object prop 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {value: ctx['state'].val}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`basics prop names can contain - 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props']['prop-name'];
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`basics prop names can contain - 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {'prop-name': 7}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
-exports[`basics support prop names that aren't valid bare object property names 1`] = `
+exports[`basics arrow functions as prop correctly capture their scope 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -130,7 +63,60 @@ exports[`basics support prop names that aren't valid bare object property names
 }"
 `;
 
-exports[`basics support prop names that aren't valid bare object property names 2`] = `
+exports[`basics explicit object prop 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {value: ctx['state'].val}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`basics explicit object prop 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['state'].someval;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics prop names can contain - 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {'prop-name': 7}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics prop names can contain - 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props']['prop-name'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics support prop names that aren't valid bare object property names 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -141,23 +127,21 @@ exports[`basics support prop names that aren't valid bare object property names
 }"
 `;
 
-exports[`basics t-set with a body expression can be passed in props, and then t-out 1`] = `
+exports[`basics support prop names that aren't valid bare object property names 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { safeOutput } = helpers;
   
-  let block1 = createBlock(\`<span><block-text-0/><block-child-0/></span>\`);
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].val;
-    let b2 = safeOutput(ctx['props'].val);
-    return block1([d1], [b2]);
+    let d1 = [ctx['props'].onClick, ctx];
+    return block1([d1]);
   }
 }"
 `;
 
-exports[`basics t-set with a body expression can be passed in props, and then t-out 2`] = `
+exports[`basics t-set with a body expression can be passed in props, and then t-out 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -177,21 +161,23 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
 }"
 `;
 
-exports[`basics t-set with a body expression can be used as textual prop 1`] = `
+exports[`basics t-set with a body expression can be passed in props, and then t-out 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { safeOutput } = helpers;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  let block1 = createBlock(\`<span><block-text-0/><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let d1 = ctx['props'].val;
-    return block1([d1]);
+    let b2 = safeOutput(ctx['props'].val);
+    return block1([d1], [b2]);
   }
 }"
 `;
 
-exports[`basics t-set with a body expression can be used as textual prop 2`] = `
+exports[`basics t-set with a body expression can be used as textual prop 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -209,7 +195,7 @@ exports[`basics t-set with a body expression can be used as textual prop 2`] = `
 }"
 `;
 
-exports[`basics t-set works  1`] = `
+exports[`basics t-set with a body expression can be used as textual prop 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -223,7 +209,7 @@ exports[`basics t-set works  1`] = `
 }"
 `;
 
-exports[`basics t-set works  2`] = `
+exports[`basics t-set works  1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -241,18 +227,21 @@ exports[`basics t-set works  2`] = `
 }"
 `;
 
-exports[`basics template string in prop 1`] = `
+exports[`basics t-set works  2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
   return function template(ctx, node, key = \\"\\") {
-    return text(\`\`);
+    let d1 = ctx['props'].val;
+    return block1([d1]);
   }
 }"
 `;
 
-exports[`basics template string in prop 2`] = `
+exports[`basics template string in prop 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -263,18 +252,18 @@ exports[`basics template string in prop 2`] = `
 }"
 `;
 
-exports[`bound functions is referentially equal after update 1`] = `
+exports[`basics template string in prop 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return text(ctx['props'].val);
+    return text(\`\`);
   }
 }"
 `;
 
-exports[`bound functions is referentially equal after update 2`] = `
+exports[`bound functions is referentially equal after update 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -286,18 +275,18 @@ exports[`bound functions is referentially equal after update 2`] = `
 }"
 `;
 
-exports[`can bind function prop with bind suffix 1`] = `
+exports[`bound functions is referentially equal after update 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return text(\`child\`);
+    return text(ctx['props'].val);
   }
 }"
 `;
 
-exports[`can bind function prop with bind suffix 2`] = `
+exports[`can bind function prop with bind suffix 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -308,3 +297,14 @@ exports[`can bind function prop with bind suffix 2`] = `
   }
 }"
 `;
+
+exports[`can bind function prop with bind suffix 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`child\`);
+  }
+}"
+`;
diff --git a/tests/components/__snapshots__/props_validation.test.ts.snap b/tests/components/__snapshots__/props_validation.test.ts.snap
index 4ed0960d..82dfe1ec 100644
--- a/tests/components/__snapshots__/props_validation.test.ts.snap
+++ b/tests/components/__snapshots__/props_validation.test.ts.snap
@@ -16,6 +16,26 @@ exports[`default props can set default required boolean values 1`] = `
 }"
 `;
 
+exports[`default props can set default required boolean values 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-child-0/><block-child-1/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['props'].p) {
+      b2 = text(\`hey\`);
+    }
+    if (!ctx['props'].q) {
+      b3 = text(\`hey\`);
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
 exports[`default props can set default values 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -32,6 +52,20 @@ exports[`default props can set default values 1`] = `
 }"
 `;
 
+exports[`default props can set default values 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].p;
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`default props default values are also set whenever component is updated 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -48,6 +82,20 @@ exports[`default props default values are also set whenever component is updated
 }"
 `;
 
+exports[`default props default values are also set whenever component is updated 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].p;
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`props validation can validate a prop with multiple types 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -69,6 +117,48 @@ exports[`props validation can validate a prop with multiple types 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation can validate a prop with multiple types 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation can validate a prop with multiple types 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation can validate a prop with multiple types 5`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -101,6 +191,64 @@ exports[`props validation can validate an array with given primitive type 2`] =
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation can validate an array with given primitive type 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation can validate an array with given primitive type 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation can validate an array with given primitive type 5`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation can validate an array with given primitive type 6`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -133,13 +281,10 @@ exports[`props validation can validate an array with multiple sub element types
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<div>hey</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const props1 = {p: ctx['p']}
-    helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
-    return block1([], [b2]);
+    return block1();
   }
 }"
 `;
@@ -160,6 +305,64 @@ exports[`props validation can validate an array with multiple sub element types
 }"
 `;
 
+exports[`props validation can validate an array with multiple sub element types 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation can validate an array with multiple sub element types 5`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation can validate an array with multiple sub element types 6`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation can validate an array with multiple sub element types 7`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`props validation can validate an object with simple shape 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -176,6 +379,67 @@ exports[`props validation can validate an object with simple shape 1`] = `
 }"
 `;
 
+exports[`props validation can validate an object with simple shape 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation can validate an object with simple shape 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation can validate an object with simple shape 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation can validate an object with simple shape 5`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`props validation can validate an optional props 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -197,6 +461,48 @@ exports[`props validation can validate an optional props 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation can validate an optional props 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation can validate an optional props 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation can validate an optional props 5`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -229,6 +535,48 @@ exports[`props validation can validate recursively complicated prop def 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation can validate recursively complicated prop def 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation can validate recursively complicated prop def 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation can validate recursively complicated prop def 5`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -256,6 +604,52 @@ exports[`props validation default values are applied before validating props at
 }"
 `;
 
+exports[`props validation default values are applied before validating props at update 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].p;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`props validation missing required boolean prop causes an error 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation mix of optional and mandatory 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {}
+    helpers.validateProps(\`Child\`, props1, ctx)
+    let b2 = component(\`Child\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`props validation props are validated in dev mode (code snapshot) 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -272,6 +666,20 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
 }"
 `;
 
+exports[`props validation props are validated in dev mode (code snapshot) 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].message;
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`props validation props are validated whenever component is updated 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -288,6 +696,36 @@ exports[`props validation props are validated whenever component is updated 1`]
 }"
 `;
 
+exports[`props validation props are validated whenever component is updated 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].p;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`props validation props: list of strings 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`props validation validate simple types 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -325,13 +763,10 @@ exports[`props validation validate simple types 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<div>hey</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const props1 = {p: ctx['p']}
-    helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
-    return block1([], [b2]);
+    return block1();
   }
 }"
 `;
@@ -384,6 +819,279 @@ exports[`props validation validate simple types 6`] = `
 }"
 `;
 
+exports[`props validation validate simple types 7`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation validate simple types 8`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types 9`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types 10`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types 11`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation validate simple types 12`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types 13`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types 14`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types 15`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation validate simple types 16`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types 17`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types 18`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types 19`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation validate simple types 20`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types 21`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types 22`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types 23`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation validate simple types 24`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`props validation validate simple types, alternate form 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -421,13 +1129,10 @@ exports[`props validation validate simple types, alternate form 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<div>hey</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const props1 = {p: ctx['p']}
-    helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
-    return block1([], [b2]);
+    return block1();
   }
 }"
 `;
@@ -480,6 +1185,279 @@ exports[`props validation validate simple types, alternate form 6`] = `
 }"
 `;
 
+exports[`props validation validate simple types, alternate form 7`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation validate simple types, alternate form 8`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types, alternate form 9`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types, alternate form 10`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types, alternate form 11`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation validate simple types, alternate form 12`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types, alternate form 13`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types, alternate form 14`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types, alternate form 15`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation validate simple types, alternate form 16`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types, alternate form 17`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types, alternate form 18`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types, alternate form 19`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation validate simple types, alternate form 20`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types, alternate form 21`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types, alternate form 22`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validate simple types, alternate form 23`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`props validation validate simple types, alternate form 24`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {p: ctx['p']}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`props validation validation is only done in dev mode 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -487,9 +1465,38 @@ exports[`props validation validation is only done in dev mode 1`] = `
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {}
+    helpers.validateProps(\`SubComp\`, props1, ctx)
+    let b2 = component(\`SubComp\`, props1, key + \`__2\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`props validation validation is only done in dev mode 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
   return function template(ctx, node, key = \\"\\") {
     let b2 = component(\`SubComp\`, {}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
 `;
+
+exports[`props validation validation is only done in dev mode 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
diff --git a/tests/components/__snapshots__/reactivity.test.ts.snap b/tests/components/__snapshots__/reactivity.test.ts.snap
index 6c8e4149..7de8edef 100644
--- a/tests/components/__snapshots__/reactivity.test.ts.snap
+++ b/tests/components/__snapshots__/reactivity.test.ts.snap
@@ -47,21 +47,6 @@ exports[`reactivity in lifecycle state changes in willUnmount do not trigger rer
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].val;
-    let d2 = ctx['state'].n;
-    return block1([d1, d2]);
-  }
-}"
-`;
-
-exports[`reactivity in lifecycle state changes in willUnmount do not trigger rerender 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -73,3 +58,18 @@ exports[`reactivity in lifecycle state changes in willUnmount do not trigger rer
   }
 }"
 `;
+
+exports[`reactivity in lifecycle state changes in willUnmount do not trigger rerender 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].val;
+    let d2 = ctx['state'].n;
+    return block1([d1, d2]);
+  }
+}"
+`;
diff --git a/tests/components/__snapshots__/refs.test.ts.snap b/tests/components/__snapshots__/refs.test.ts.snap
index 8ed61be3..cc99aeab 100644
--- a/tests/components/__snapshots__/refs.test.ts.snap
+++ b/tests/components/__snapshots__/refs.test.ts.snap
@@ -17,21 +17,6 @@ exports[`refs basic use 1`] = `
 
 exports[`refs refs are properly bound in slots 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'footer', false, {});
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`refs refs are properly bound in slots 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { capture } = helpers;
@@ -54,3 +39,18 @@ exports[`refs refs are properly bound in slots 2`] = `
   }
 }"
 `;
+
+exports[`refs refs are properly bound in slots 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callSlot(ctx, node, key, 'footer', false, {});
+    return block1([], [b2]);
+  }
+}"
+`;
diff --git a/tests/components/__snapshots__/slots.test.ts.snap b/tests/components/__snapshots__/slots.test.ts.snap
index f4d9a645..f01ba330 100644
--- a/tests/components/__snapshots__/slots.test.ts.snap
+++ b/tests/components/__snapshots__/slots.test.ts.snap
@@ -2,6 +2,20 @@
 
 exports[`slots can define a default content 1`] = `
 "function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Dialog\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`slots can define a default content 2`] = `
+"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
@@ -19,38 +33,8 @@ exports[`slots can define a default content 1`] = `
 }"
 `;
 
-exports[`slots can define a default content 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Dialog\`, {}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
-  }
-}"
-`;
-
 exports[`slots can define and call slots 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block1 = createBlock(\`<div><div><block-child-0/></div><div><block-child-1/></div></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'header', false, {});
-    let b3 = callSlot(ctx, node, key, 'footer', false, {});
-    return block1([], [b2, b3]);
-  }
-}"
-`;
-
-exports[`slots can define and call slots 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { capture } = helpers;
@@ -75,25 +59,23 @@ exports[`slots can define and call slots 2`] = `
 }"
 `;
 
-exports[`slots can define and call slots with params 1`] = `
+exports[`slots can define and call slots 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<div><block-text-0/><div><block-child-0/></div><block-text-1/><div><block-child-1/></div></div>\`);
+  let block1 = createBlock(\`<div><div><block-child-0/></div><div><block-child-1/></div></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].slots['header'].param;
     let b2 = callSlot(ctx, node, key, 'header', false, {});
-    let d2 = ctx['props'].slots['footer'].param;
     let b3 = callSlot(ctx, node, key, 'footer', false, {});
-    return block1([d1, d2], [b2, b3]);
+    return block1([], [b2, b3]);
   }
 }"
 `;
 
-exports[`slots can define and call slots with params 2`] = `
+exports[`slots can define and call slots with params 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -119,19 +101,25 @@ exports[`slots can define and call slots with params 2`] = `
 }"
 `;
 
-exports[`slots can render node with t-ref and Component in same slot 1`] = `
+exports[`slots can define and call slots with params 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
   
+  let block1 = createBlock(\`<div><block-text-0/><div><block-child-0/></div><block-text-1/><div><block-child-1/></div></div>\`);
+  
   return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {});
+    let d1 = ctx['props'].slots['header'].param;
+    let b2 = callSlot(ctx, node, key, 'header', false, {});
+    let d2 = ctx['props'].slots['footer'].param;
+    let b3 = callSlot(ctx, node, key, 'footer', false, {});
+    return block1([d1, d2], [b2, b3]);
   }
 }"
 `;
 
-exports[`slots can render node with t-ref and Component in same slot 2`] = `
+exports[`slots can render node with t-ref and Component in same slot 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -152,6 +140,18 @@ exports[`slots can render node with t-ref and Component in same slot 2`] = `
 }"
 `;
 
+exports[`slots can render node with t-ref and Component in same slot 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return callSlot(ctx, node, key, 'default', false, {});
+  }
+}"
+`;
+
 exports[`slots can render only empty slot 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -170,7 +170,7 @@ exports[`slots can use component in default-content of t-slot 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return text(\`\`);
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -197,7 +197,7 @@ exports[`slots can use component in default-content of t-slot 3`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return text(\`\`);
   }
 }"
 `;
@@ -208,7 +208,7 @@ exports[`slots can use t-call in default-content of t-slot 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return text(\`\`);
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -218,7 +218,7 @@ exports[`slots can use t-call in default-content of t-slot 2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot, getTemplate } = helpers;
-  const callTemplate_3 = getTemplate(\`__template__9\`);
+  const callTemplate_3 = getTemplate(\`__template__128\`);
   
   function defaultContent1(ctx, node, key = \\"\\") {
     return callTemplate_3.call(this, ctx, node, key + \`__2\`);
@@ -236,25 +236,13 @@ exports[`slots can use t-call in default-content of t-slot 3`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return text(\`\`);
   }
 }"
 `;
 
 exports[`slots content is the default slot (variation) 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {});
-  }
-}"
-`;
-
-exports[`slots content is the default slot (variation) 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
@@ -270,22 +258,19 @@ exports[`slots content is the default slot (variation) 2`] = `
 }"
 `;
 
-exports[`slots content is the default slot 1`] = `
+exports[`slots content is the default slot (variation) 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'default', false, {});
-    return block1([], [b2]);
+    return callSlot(ctx, node, key, 'default', false, {});
   }
 }"
 `;
 
-exports[`slots content is the default slot 2`] = `
+exports[`slots content is the default slot 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -304,26 +289,22 @@ exports[`slots content is the default slot 2`] = `
 }"
 `;
 
-exports[`slots default content is not rendered if named slot is provided 1`] = `
+exports[`slots content is the default slot 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
-  
-  function defaultContent1(ctx, node, key = \\"\\") {
-    return text(\`default content\`);
-  }
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1);
-    return block1([], [b3]);
+    let b2 = callSlot(ctx, node, key, 'default', false, {});
+    return block1([], [b2]);
   }
 }"
 `;
 
-exports[`slots default content is not rendered if named slot is provided 2`] = `
+exports[`slots default content is not rendered if named slot is provided 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -343,8 +324,45 @@ exports[`slots default content is not rendered if named slot is provided 2`] = `
 }"
 `;
 
+exports[`slots default content is not rendered if named slot is provided 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  function defaultContent1(ctx, node, key = \\"\\") {
+    return text(\`default content\`);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1);
+    return block1([], [b3]);
+  }
+}"
+`;
+
 exports[`slots default content is not rendered if slot is provided 1`] = `
 "function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return text(\`hey\`);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    return block1([], [b3]);
+  }
+}"
+`;
+
+exports[`slots default content is not rendered if slot is provided 2`] = `
+"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
@@ -362,25 +380,27 @@ exports[`slots default content is not rendered if slot is provided 1`] = `
 }"
 `;
 
-exports[`slots default content is not rendered if slot is provided 2`] = `
+exports[`slots default slot next to named slot, with default content 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { capture } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  function slot1(ctx, node, key = \\"\\") {
-    return text(\`hey\`);
+  function slot2(ctx, node, key = \\"\\") {
+    return text(\` Overridden footer \`);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    const ctx1 = capture(ctx);
+    let b3 = component(\`Dialog\`, {slots: {'footer': {__render: slot2, __ctx: ctx1}}}, key + \`__3\`, node, ctx);
     return block1([], [b3]);
   }
 }"
 `;
 
-exports[`slots default slot next to named slot, with default content 1`] = `
+exports[`slots default slot next to named slot, with default content 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -404,40 +424,8 @@ exports[`slots default slot next to named slot, with default content 1`] = `
 }"
 `;
 
-exports[`slots default slot next to named slot, with default content 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { capture } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  function slot2(ctx, node, key = \\"\\") {
-    return text(\` Overridden footer \`);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
-    let b3 = component(\`Dialog\`, {slots: {'footer': {__render: slot2, __ctx: ctx1}}}, key + \`__3\`, node, ctx);
-    return block1([], [b3]);
-  }
-}"
-`;
-
 exports[`slots default slot work with text nodes (variation) 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {});
-  }
-}"
-`;
-
-exports[`slots default slot work with text nodes (variation) 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
@@ -451,22 +439,19 @@ exports[`slots default slot work with text nodes (variation) 2`] = `
 }"
 `;
 
-exports[`slots default slot work with text nodes 1`] = `
+exports[`slots default slot work with text nodes (variation) 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'default', false, {});
-    return block1([], [b2]);
+    return callSlot(ctx, node, key, 'default', false, {});
   }
 }"
 `;
 
-exports[`slots default slot work with text nodes 2`] = `
+exports[`slots default slot work with text nodes 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -484,24 +469,22 @@ exports[`slots default slot work with text nodes 2`] = `
 }"
 `;
 
-exports[`slots dynamic t-slot call 1`] = `
+exports[`slots default slot work with text nodes 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-child-0/></button>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = [ctx['toggle'], ctx];
-    const slot1 = (ctx['current'].slot);
-    let b2 = toggler(slot1, callSlot(ctx, node, key, slot1), true, {});
-    return block1([d1], [b2]);
+    let b2 = callSlot(ctx, node, key, 'default', false, {});
+    return block1([], [b2]);
   }
 }"
 `;
 
-exports[`slots dynamic t-slot call 2`] = `
+exports[`slots dynamic t-slot call 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -530,8 +513,54 @@ exports[`slots dynamic t-slot call 2`] = `
 }"
 `;
 
+exports[`slots dynamic t-slot call 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-child-0/></button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [ctx['toggle'], ctx];
+    const slot1 = (ctx['current'].slot);
+    let b2 = toggler(slot1, callSlot(ctx, node, key, slot1), true, {});
+    return block1([d1], [b2]);
+  }
+}"
+`;
+
 exports[`slots dynamic t-slot call with default 1`] = `
 "function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { capture } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<p>slot1</p>\`);
+  let block4 = createBlock(\`<span>content</span>\`);
+  let block5 = createBlock(\`<h1>slot2</h1>\`);
+  
+  function slot2(ctx, node, key = \\"\\") {
+    let b3 = block3();
+    let b4 = block4();
+    return multi([b3, b4]);
+  }
+  
+  function slot3(ctx, node, key = \\"\\") {
+    return block5();
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    const ctx1 = capture(ctx);
+    let b6 = component(\`Toggler\`, {slots: {'slot1': {__render: slot2, __ctx: ctx1}, 'slot2': {__render: slot3, __ctx: ctx1}}}, key + \`__4\`, node, ctx);
+    return block1([], [b6]);
+  }
+}"
+`;
+
+exports[`slots dynamic t-slot call with default 2`] = `
+"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
@@ -550,51 +579,8 @@ exports[`slots dynamic t-slot call with default 1`] = `
 }"
 `;
 
-exports[`slots dynamic t-slot call with default 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { capture } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<p>slot1</p>\`);
-  let block4 = createBlock(\`<span>content</span>\`);
-  let block5 = createBlock(\`<h1>slot2</h1>\`);
-  
-  function slot2(ctx, node, key = \\"\\") {
-    let b3 = block3();
-    let b4 = block4();
-    return multi([b3, b4]);
-  }
-  
-  function slot3(ctx, node, key = \\"\\") {
-    return block5();
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
-    let b6 = component(\`Toggler\`, {slots: {'slot1': {__render: slot2, __ctx: ctx1}, 'slot2': {__render: slot3, __ctx: ctx1}}}, key + \`__4\`, node, ctx);
-    return block1([], [b6]);
-  }
-}"
-`;
-
 exports[`slots fun: two calls to the same slot 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'default', false, {});
-    let b3 = callSlot(ctx, node, key, 'default', false, {});
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`slots fun: two calls to the same slot 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
@@ -608,8 +594,36 @@ exports[`slots fun: two calls to the same slot 2`] = `
 }"
 `;
 
+exports[`slots fun: two calls to the same slot 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callSlot(ctx, node, key, 'default', false, {});
+    let b3 = callSlot(ctx, node, key, 'default', false, {});
+    return multi([b2, b3]);
+  }
+}"
+`;
+
 exports[`slots missing slots are ignored 1`] = `
 "function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Dialog\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`slots missing slots are ignored 2`] = `
+"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
@@ -624,37 +638,8 @@ exports[`slots missing slots are ignored 1`] = `
 }"
 `;
 
-exports[`slots missing slots are ignored 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Dialog\`, {}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
-  }
-}"
-`;
-
 exports[`slots multiple roots are allowed in a default slot 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'default', false, {});
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`slots multiple roots are allowed in a default slot 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
@@ -675,7 +660,7 @@ exports[`slots multiple roots are allowed in a default slot 2`] = `
 }"
 `;
 
-exports[`slots multiple roots are allowed in a named slot 1`] = `
+exports[`slots multiple roots are allowed in a default slot 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -684,13 +669,13 @@ exports[`slots multiple roots are allowed in a named slot 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'content', false, {});
+    let b2 = callSlot(ctx, node, key, 'default', false, {});
     return block1([], [b2]);
   }
 }"
 `;
 
-exports[`slots multiple roots are allowed in a named slot 2`] = `
+exports[`slots multiple roots are allowed in a named slot 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -714,16 +699,38 @@ exports[`slots multiple roots are allowed in a named slot 2`] = `
 }"
 `;
 
+exports[`slots multiple roots are allowed in a named slot 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callSlot(ctx, node, key, 'content', false, {});
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`slots multiple slots containing components 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { capture } = helpers;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  function slot2(ctx, node, key = \\"\\") {
+    return component(\`C\`, {val: 1}, key + \`__3\`, node, ctx);
+  }
+  
+  function slot4(ctx, node, key = \\"\\") {
+    return component(\`C\`, {val: 2}, key + \`__5\`, node, ctx);
+  }
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].val;
-    return block1([d1]);
+    const ctx1 = capture(ctx);
+    return component(\`B\`, {slots: {'s1': {__render: slot2, __ctx: ctx1}, 's2': {__render: slot4, __ctx: ctx1}}}, key + \`__6\`, node, ctx);
   }
 }"
 `;
@@ -748,19 +755,12 @@ exports[`slots multiple slots containing components 3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { capture } = helpers;
   
-  function slot2(ctx, node, key = \\"\\") {
-    return component(\`C\`, {val: 1}, key + \`__3\`, node, ctx);
-  }
-  
-  function slot4(ctx, node, key = \\"\\") {
-    return component(\`C\`, {val: 2}, key + \`__5\`, node, ctx);
-  }
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
-    return component(\`B\`, {slots: {'s1': {__render: slot2, __ctx: ctx1}, 's2': {__render: slot4, __ctx: ctx1}}}, key + \`__6\`, node, ctx);
+    let d1 = ctx['props'].val;
+    return block1([d1]);
   }
 }"
 `;
@@ -769,20 +769,53 @@ exports[`slots named slot inside slot 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
+  let { capture } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<p>A<block-text-0/></p>\`);
+  let block3 = createBlock(\`<p>B<block-text-0/></p>\`);
+  
+  function slot2(ctx, node, key = \\"\\") {
+    let d1 = ctx['value'];
+    return block2([d1]);
+  }
+  
+  function slot3(ctx, node, key = \\"\\") {
+    const ctx4 = capture(ctx);
+    return component(\`Child\`, {slots: {'brol': {__render: slot5, __ctx: ctx4}}}, key + \`__6\`, node, ctx);
+  }
+  
+  function slot5(ctx, node, key = \\"\\") {
+    let d2 = ctx['value'];
+    return block3([d2]);
+  }
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'brol', false, {});
-    let b3 = callSlot(ctx, node, key, 'default', false, {});
-    return block1([], [b2, b3]);
+    const ctx1 = capture(ctx);
+    let b5 = component(\`Child\`, {slots: {'brol': {__render: slot2, __ctx: ctx1}, 'default': {__render: slot3, __ctx: ctx1}}}, key + \`__7\`, node, ctx);
+    return block1([], [b5]);
   }
 }"
 `;
 
 exports[`slots named slot inside slot 2`] = `
 "function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callSlot(ctx, node, key, 'brol', false, {});
+    let b3 = callSlot(ctx, node, key, 'default', false, {});
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`slots named slot inside slot, part 3 1`] = `
+"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { capture } = helpers;
@@ -814,7 +847,7 @@ exports[`slots named slot inside slot 2`] = `
 }"
 `;
 
-exports[`slots named slot inside slot, part 3 1`] = `
+exports[`slots named slot inside slot, part 3 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -830,40 +863,21 @@ exports[`slots named slot inside slot, part 3 1`] = `
 }"
 `;
 
-exports[`slots named slot inside slot, part 3 2`] = `
+exports[`slots named slots can define a default content 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { capture } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block2 = createBlock(\`<p>A<block-text-0/></p>\`);
-  let block3 = createBlock(\`<p>B<block-text-0/></p>\`);
-  
-  function slot2(ctx, node, key = \\"\\") {
-    let d1 = ctx['value'];
-    return block2([d1]);
-  }
-  
-  function slot3(ctx, node, key = \\"\\") {
-    const ctx4 = capture(ctx);
-    return component(\`Child\`, {slots: {'brol': {__render: slot5, __ctx: ctx4}}}, key + \`__6\`, node, ctx);
-  }
-  
-  function slot5(ctx, node, key = \\"\\") {
-    let d2 = ctx['value'];
-    return block3([d2]);
-  }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
-    let b5 = component(\`Child\`, {slots: {'brol': {__render: slot2, __ctx: ctx1}, 'default': {__render: slot3, __ctx: ctx1}}}, key + \`__7\`, node, ctx);
-    return block1([], [b5]);
+    let b2 = component(\`Dialog\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
   }
 }"
 `;
 
-exports[`slots named slots can define a default content 1`] = `
+exports[`slots named slots can define a default content 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -882,47 +896,8 @@ exports[`slots named slots can define a default content 1`] = `
 }"
 `;
 
-exports[`slots named slots can define a default content 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Dialog\`, {}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
-  }
-}"
-`;
-
 exports[`slots named slots inside slot, again 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block1 = createBlock(\`<child><block-child-0/><block-child-1/><block-child-2/></child>\`);
-  
-  function defaultContent1(ctx, node, key = \\"\\") {
-    return text(\`default1\`);
-  }
-  
-  function defaultContent2(ctx, node, key = \\"\\") {
-    return text(\`default2\`);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b3 = callSlot(ctx, node, key, 'brol1', false, {}, defaultContent1);
-    let b5 = callSlot(ctx, node, key, 'brol2', false, {}, defaultContent2);
-    let b6 = callSlot(ctx, node, key, 'default', false, {});
-    return block1([], [b3, b5, b6]);
-  }
-}"
-`;
-
-exports[`slots named slots inside slot, again 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { capture } = helpers;
@@ -954,51 +929,33 @@ exports[`slots named slots inside slot, again 2`] = `
 }"
 `;
 
+exports[`slots named slots inside slot, again 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  let block1 = createBlock(\`<child><block-child-0/><block-child-1/><block-child-2/></child>\`);
+  
+  function defaultContent1(ctx, node, key = \\"\\") {
+    return text(\`default1\`);
+  }
+  
+  function defaultContent2(ctx, node, key = \\"\\") {
+    return text(\`default2\`);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b3 = callSlot(ctx, node, key, 'brol1', false, {}, defaultContent1);
+    let b5 = callSlot(ctx, node, key, 'brol2', false, {}, defaultContent2);
+    let b6 = callSlot(ctx, node, key, 'default', false, {});
+    return block1([], [b3, b5, b6]);
+  }
+}"
+`;
+
 exports[`slots nested slots in same template 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block1 = createBlock(\`<span id=\\"c1\\"><div><block-child-0/></div></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'default', false, {});
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`slots nested slots in same template 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block1 = createBlock(\`<span id=\\"c2\\"><block-child-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'default', false, {});
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`slots nested slots in same template 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<span>Child 3</span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`slots nested slots in same template 4`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
@@ -1019,27 +976,13 @@ exports[`slots nested slots in same template 4`] = `
 }"
 `;
 
-exports[`slots nested slots: evaluation context and parented relationship 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].val;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`slots nested slots: evaluation context and parented relationship 2`] = `
+exports[`slots nested slots in same template 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<span id=\\"c1\\"><div><block-child-0/></div></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2 = callSlot(ctx, node, key, 'default', false, {});
@@ -1048,7 +991,50 @@ exports[`slots nested slots: evaluation context and parented relationship 2`] =
 }"
 `;
 
-exports[`slots nested slots: evaluation context and parented relationship 3`] = `
+exports[`slots nested slots in same template 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  let block1 = createBlock(\`<span id=\\"c2\\"><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callSlot(ctx, node, key, 'default', false, {});
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`slots nested slots in same template 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span>Child 3</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`slots nested slots: evaluation context and parented relationship 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return component(\`Slot\`, {val: ctx['state'].val}, key + \`__2\`, node, ctx);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
+  }
+}"
+`;
+
+exports[`slots nested slots: evaluation context and parented relationship 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1064,23 +1050,48 @@ exports[`slots nested slots: evaluation context and parented relationship 3`] =
 }"
 `;
 
+exports[`slots nested slots: evaluation context and parented relationship 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callSlot(ctx, node, key, 'default', false, {});
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`slots nested slots: evaluation context and parented relationship 4`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  function slot1(ctx, node, key = \\"\\") {
-    return component(\`Slot\`, {val: ctx['state'].val}, key + \`__2\`, node, ctx);
-  }
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
+    let d1 = ctx['props'].val;
+    return block1([d1]);
   }
 }"
 `;
 
 exports[`slots no named slot content => just no children 1`] = `
 "function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Dialog\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`slots no named slot content => just no children 2`] = `
+"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
@@ -1094,34 +1105,8 @@ exports[`slots no named slot content => just no children 1`] = `
 }"
 `;
 
-exports[`slots no named slot content => just no children 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`Dialog\`, {}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
 exports[`slots simple default slot 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'default', false, {});
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`slots simple default slot 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
@@ -1135,7 +1120,7 @@ exports[`slots simple default slot 2`] = `
 }"
 `;
 
-exports[`slots simple default slot with params 1`] = `
+exports[`slots simple default slot 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1144,13 +1129,13 @@ exports[`slots simple default slot with params 1`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'default', false, {bool: ctx['state'].bool});
+    let b2 = callSlot(ctx, node, key, 'default', false, {});
     return block1([], [b2]);
   }
 }"
 `;
 
-exports[`slots simple default slot with params 2`] = `
+exports[`slots simple default slot with params 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1173,7 +1158,7 @@ exports[`slots simple default slot with params 2`] = `
 }"
 `;
 
-exports[`slots simple default slot with params 3`] = `
+exports[`slots simple default slot with params 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1188,7 +1173,7 @@ exports[`slots simple default slot with params 3`] = `
 }"
 `;
 
-exports[`slots simple default slot with params 4`] = `
+exports[`slots simple default slot with params 3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1209,19 +1194,22 @@ exports[`slots simple default slot with params 4`] = `
 }"
 `;
 
-exports[`slots simple default slot, variation 1`] = `
+exports[`slots simple default slot with params 4`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
   
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
   return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {});
+    let b2 = callSlot(ctx, node, key, 'default', false, {bool: ctx['state'].bool});
+    return block1([], [b2]);
   }
 }"
 `;
 
-exports[`slots simple default slot, variation 2`] = `
+exports[`slots simple default slot, variation 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1236,21 +1224,54 @@ exports[`slots simple default slot, variation 2`] = `
 }"
 `;
 
+exports[`slots simple default slot, variation 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return callSlot(ctx, node, key, 'default', false, {});
+  }
+}"
+`;
+
 exports[`slots slot and (inline) t-call 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { capture, getTemplate } = helpers;
+  const callTemplate_4 = getTemplate(\`__template__112\`);
   
-  let block1 = createBlock(\`<p>sokka</p>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  function slot2(ctx, node, key = \\"\\") {
+    return callTemplate_4.call(this, ctx, node, key + \`__3\`);
+  }
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    const ctx1 = capture(ctx);
+    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot2, __ctx: ctx1}}}, key + \`__5\`, node, ctx);
+    return block1([], [b3]);
   }
 }"
 `;
 
 exports[`slots slot and (inline) t-call 2`] = `
 "function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<p>sokka</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`slots slot and (inline) t-call 3`] = `
+"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
@@ -1264,12 +1285,12 @@ exports[`slots slot and (inline) t-call 2`] = `
 }"
 `;
 
-exports[`slots slot and (inline) t-call 3`] = `
+exports[`slots slot and t-call 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { capture, getTemplate } = helpers;
-  const callTemplate_4 = getTemplate(\`__template__9\`);
+  const callTemplate_4 = getTemplate(\`__template__109\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -1285,7 +1306,7 @@ exports[`slots slot and (inline) t-call 3`] = `
 }"
 `;
 
-exports[`slots slot and t-call 1`] = `
+exports[`slots slot and t-call 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1298,7 +1319,7 @@ exports[`slots slot and t-call 1`] = `
 }"
 `;
 
-exports[`slots slot and t-call 2`] = `
+exports[`slots slot and t-call 3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1313,44 +1334,8 @@ exports[`slots slot and t-call 2`] = `
 }"
 `;
 
-exports[`slots slot and t-call 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { capture, getTemplate } = helpers;
-  const callTemplate_4 = getTemplate(\`__template__9\`);
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  function slot2(ctx, node, key = \\"\\") {
-    return callTemplate_4.call(this, ctx, node, key + \`__3\`);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
-    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot2, __ctx: ctx1}}}, key + \`__5\`, node, ctx);
-    return block1([], [b3]);
-  }
-}"
-`;
-
 exports[`slots slot and t-esc 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'default', false, {});
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`slots slot and t-esc 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
@@ -1367,16 +1352,37 @@ exports[`slots slot and t-esc 2`] = `
 }"
 `;
 
+exports[`slots slot and t-esc 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callSlot(ctx, node, key, 'default', false, {});
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`slots slot are properly rendered if inner props are changed 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div> SC:<block-text-0/></div>\`);
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click\\">Inc[<block-text-1/>]</button><block-child-0/></div>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return component(\`SomeComponent\`, {val: ctx['state'].val}, key + \`__2\`, node, ctx);
+  }
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].val;
-    return block1([d1]);
+    let d1 = [ctx['inc'], ctx];
+    let d2 = ctx['state'].val;
+    let b3 = component(\`GenericComponent\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
+    return block1([d1, d2], [b3]);
   }
 }"
 `;
@@ -1401,38 +1407,17 @@ exports[`slots slot are properly rendered if inner props are changed 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><button block-handler-0=\\"click\\">Inc[<block-text-1/>]</button><block-child-0/></div>\`);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    return component(\`SomeComponent\`, {val: ctx['state'].val}, key + \`__2\`, node, ctx);
-  }
+  let block1 = createBlock(\`<div> SC:<block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = [ctx['inc'], ctx];
-    let d2 = ctx['state'].val;
-    let b3 = component(\`GenericComponent\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
-    return block1([d1, d2], [b3]);
+    let d1 = ctx['props'].val;
+    return block1([d1]);
   }
 }"
 `;
 
 exports[`slots slot content is bound to caller (variation) 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'default', false, {});
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`slots slot content is bound to caller (variation) 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { capture, isBoundary, withDefault, setContextValue } = helpers;
@@ -1454,7 +1439,7 @@ exports[`slots slot content is bound to caller (variation) 2`] = `
 }"
 `;
 
-exports[`slots slot content is bound to caller 1`] = `
+exports[`slots slot content is bound to caller (variation) 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1469,7 +1454,7 @@ exports[`slots slot content is bound to caller 1`] = `
 }"
 `;
 
-exports[`slots slot content is bound to caller 2`] = `
+exports[`slots slot content is bound to caller 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1487,30 +1472,22 @@ exports[`slots slot content is bound to caller 2`] = `
 }"
 `;
 
-exports[`slots slot preserves properly parented relationship 1`] = `
+exports[`slots slot content is bound to caller 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
   
-  return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {});
-  }
-}"
-`;
-
-exports[`slots slot preserves properly parented relationship 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return text(\`Grand Child\`);
+    let b2 = callSlot(ctx, node, key, 'default', false, {});
+    return block1([], [b2]);
   }
 }"
 `;
 
-exports[`slots slot preserves properly parented relationship 3`] = `
+exports[`slots slot preserves properly parented relationship 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1528,7 +1505,7 @@ exports[`slots slot preserves properly parented relationship 3`] = `
 }"
 `;
 
-exports[`slots slot preserves properly parented relationship, even through t-call 1`] = `
+exports[`slots slot preserves properly parented relationship 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1540,7 +1517,7 @@ exports[`slots slot preserves properly parented relationship, even through t-cal
 }"
 `;
 
-exports[`slots slot preserves properly parented relationship, even through t-call 2`] = `
+exports[`slots slot preserves properly parented relationship 3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1551,18 +1528,7 @@ exports[`slots slot preserves properly parented relationship, even through t-cal
 }"
 `;
 
-exports[`slots slot preserves properly parented relationship, even through t-call 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
-exports[`slots slot preserves properly parented relationship, even through t-call 4`] = `
+exports[`slots slot preserves properly parented relationship, even through t-call 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1583,22 +1549,41 @@ exports[`slots slot preserves properly parented relationship, even through t-cal
 }"
 `;
 
-exports[`slots slots and wrapper components 1`] = `
+exports[`slots slot preserves properly parented relationship, even through t-call 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`slots slot preserves properly parented relationship, even through t-call 3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<a href=\\"abc\\"><block-child-0/></a>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'default', false, {});
-    return block1([], [b2]);
+    return callSlot(ctx, node, key, 'default', false, {});
   }
 }"
 `;
 
-exports[`slots slots and wrapper components 2`] = `
+exports[`slots slot preserves properly parented relationship, even through t-call 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`Grand Child\`);
+  }
+}"
+`;
+
+exports[`slots slots and wrapper components 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1613,8 +1598,34 @@ exports[`slots slots and wrapper components 2`] = `
 }"
 `;
 
+exports[`slots slots and wrapper components 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  let block1 = createBlock(\`<a href=\\"abc\\"><block-child-0/></a>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callSlot(ctx, node, key, 'default', false, {});
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`slots slots are properly bound to correct component 1`] = `
 "function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`slots slots are properly bound to correct component 2`] = `
+"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot, isBoundary, withDefault, setContextValue } = helpers;
@@ -1636,34 +1647,8 @@ exports[`slots slots are properly bound to correct component 1`] = `
 }"
 `;
 
-exports[`slots slots are properly bound to correct component 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
 exports[`slots slots are rendered with proper context 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'footer', false, {});
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`slots slots are rendered with proper context 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { capture } = helpers;
@@ -1685,23 +1670,22 @@ exports[`slots slots are rendered with proper context 2`] = `
 }"
 `;
 
-exports[`slots slots are rendered with proper context, part 2 1`] = `
+exports[`slots slots are rendered with proper context 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<a block-attribute-0=\\"href\\"><block-child-0/></a>\`);
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].to;
-    let b2 = callSlot(ctx, node, key, 'default', false, {});
-    return block1([d1], [b2]);
+    let b2 = callSlot(ctx, node, key, 'footer', false, {});
+    return block1([], [b2]);
   }
 }"
 `;
 
-exports[`slots slots are rendered with proper context, part 2 2`] = `
+exports[`slots slots are rendered with proper context, part 2 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1732,7 +1716,7 @@ exports[`slots slots are rendered with proper context, part 2 2`] = `
 }"
 `;
 
-exports[`slots slots are rendered with proper context, part 3 1`] = `
+exports[`slots slots are rendered with proper context, part 2 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1748,7 +1732,7 @@ exports[`slots slots are rendered with proper context, part 3 1`] = `
 }"
 `;
 
-exports[`slots slots are rendered with proper context, part 3 2`] = `
+exports[`slots slots are rendered with proper context, part 3 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1780,7 +1764,7 @@ exports[`slots slots are rendered with proper context, part 3 2`] = `
 }"
 `;
 
-exports[`slots slots are rendered with proper context, part 4 1`] = `
+exports[`slots slots are rendered with proper context, part 3 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1796,7 +1780,7 @@ exports[`slots slots are rendered with proper context, part 4 1`] = `
 }"
 `;
 
-exports[`slots slots are rendered with proper context, part 4 2`] = `
+exports[`slots slots are rendered with proper context, part 4 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1819,17 +1803,43 @@ exports[`slots slots are rendered with proper context, part 4 2`] = `
 }"
 `;
 
-exports[`slots slots in slots, with vars 1`] = `
+exports[`slots slots are rendered with proper context, part 4 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  let block1 = createBlock(\`<a block-attribute-0=\\"href\\"><block-child-0/></a>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].to;
     let b2 = callSlot(ctx, node, key, 'default', false, {});
-    return block1([], [b2]);
+    return block1([d1], [b2]);
+  }
+}"
+`;
+
+exports[`slots slots in slots, with vars 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue, capture } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<p>hey<block-text-0/></p>\`);
+  
+  function slot2(ctx, node, key = \\"\\") {
+    let d1 = ctx['test'];
+    return block2([d1]);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"test\\", ctx['state'].name);
+    const ctx1 = capture(ctx);
+    let b3 = component(\`A\`, {slots: {'default': {__render: slot2, __ctx: ctx1}}}, key + \`__3\`, node, ctx);
+    return block1([], [b3]);
   }
 }"
 `;
@@ -1857,45 +1867,19 @@ exports[`slots slots in slots, with vars 3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue, capture } = helpers;
+  let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block2 = createBlock(\`<p>hey<block-text-0/></p>\`);
-  
-  function slot2(ctx, node, key = \\"\\") {
-    let d1 = ctx['test'];
-    return block2([d1]);
-  }
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1
-    setContextValue(ctx, \\"test\\", ctx['state'].name);
-    const ctx1 = capture(ctx);
-    let b3 = component(\`A\`, {slots: {'default': {__render: slot2, __ctx: ctx1}}}, key + \`__3\`, node, ctx);
-    return block1([], [b3]);
+    let b2 = callSlot(ctx, node, key, 'default', false, {});
+    return block1([], [b2]);
   }
 }"
 `;
 
 exports[`slots slots in t-foreach and re-rendering 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block1 = createBlock(\`<span><block-text-0/><block-child-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['state'].val;
-    let b2 = callSlot(ctx, node, key, 'default', false, {});
-    return block1([d1], [b2]);
-  }
-}"
-`;
-
-exports[`slots slots in t-foreach and re-rendering 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { prepareList, capture, withKey } = helpers;
@@ -1922,22 +1906,23 @@ exports[`slots slots in t-foreach and re-rendering 2`] = `
 }"
 `;
 
-exports[`slots slots in t-foreach in t-foreach 1`] = `
+exports[`slots slots in t-foreach and re-rendering 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<span><block-text-0/><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['state'].val;
     let b2 = callSlot(ctx, node, key, 'default', false, {});
-    return block1([], [b2]);
+    return block1([d1], [b2]);
   }
 }"
 `;
 
-exports[`slots slots in t-foreach in t-foreach 2`] = `
+exports[`slots slots in t-foreach in t-foreach 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -1980,23 +1965,22 @@ exports[`slots slots in t-foreach in t-foreach 2`] = `
 }"
 `;
 
-exports[`slots slots in t-foreach with t-set and re-rendering 1`] = `
+exports[`slots slots in t-foreach in t-foreach 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<span><block-text-0/><block-child-0/></span>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['state'].val;
     let b2 = callSlot(ctx, node, key, 'default', false, {});
-    return block1([d1], [b2]);
+    return block1([], [b2]);
   }
 }"
 `;
 
-exports[`slots slots in t-foreach with t-set and re-rendering 2`] = `
+exports[`slots slots in t-foreach with t-set and re-rendering 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -2027,22 +2011,23 @@ exports[`slots slots in t-foreach with t-set and re-rendering 2`] = `
 }"
 `;
 
-exports[`slots t-debug on a t-set-slot (defining a slot) 1`] = `
+exports[`slots slots in t-foreach with t-set and re-rendering 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  let block1 = createBlock(\`<span><block-text-0/><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'content', false, {});
-    return block1([], [b2]);
+    let d1 = ctx['state'].val;
+    let b2 = callSlot(ctx, node, key, 'default', false, {});
+    return block1([d1], [b2]);
   }
 }"
 `;
 
-exports[`slots t-debug on a t-set-slot (defining a slot) 2`] = `
+exports[`slots t-debug on a t-set-slot (defining a slot) 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -2063,7 +2048,7 @@ exports[`slots t-debug on a t-set-slot (defining a slot) 2`] = `
 }"
 `;
 
-exports[`slots t-set t-value in a slot 1`] = `
+exports[`slots t-debug on a t-set-slot (defining a slot) 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -2072,13 +2057,13 @@ exports[`slots t-set t-value in a slot 1`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'default', false, {});
+    let b2 = callSlot(ctx, node, key, 'content', false, {});
     return block1([], [b2]);
   }
 }"
 `;
 
-exports[`slots t-set t-value in a slot 2`] = `
+exports[`slots t-set t-value in a slot 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -2101,13 +2086,13 @@ exports[`slots t-set t-value in a slot 2`] = `
 }"
 `;
 
-exports[`slots t-slot in recursive templates 1`] = `
+exports[`slots t-set t-value in a slot 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<wrapper><block-child-0/></wrapper>\`);
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2 = callSlot(ctx, node, key, 'default', false, {});
@@ -2116,7 +2101,7 @@ exports[`slots t-slot in recursive templates 1`] = `
 }"
 `;
 
-exports[`slots t-slot in recursive templates 2`] = `
+exports[`slots t-slot in recursive templates 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -2161,15 +2146,35 @@ exports[`slots t-slot in recursive templates 2`] = `
 }"
 `;
 
+exports[`slots t-slot in recursive templates 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  let block1 = createBlock(\`<wrapper><block-child-0/></wrapper>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callSlot(ctx, node, key, 'default', false, {});
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`slots t-slot nested within another slot 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span>Child 3</span>\`);
+  let block1 = createBlock(\`<span id=\\"c1\\"><block-child-0/></span>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return component(\`Child3\`, {}, key + \`__2\`, node, ctx);
+  }
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
+    return block1([], [b3]);
   }
 }"
 `;
@@ -2180,36 +2185,6 @@ exports[`slots t-slot nested within another slot 2`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { callSlot } = helpers;
   
-  let block1 = createBlock(\`<span id=\\"modal\\"><block-child-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'default', false, {});
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`slots t-slot nested within another slot 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block1 = createBlock(\`<span id=\\"portal\\"><block-child-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'default', false, {});
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`slots t-slot nested within another slot 4`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
-  
   let block1 = createBlock(\`<span id=\\"c2\\"><block-child-0/></span>\`);
   
   function slot1(ctx, node, key = \\"\\") {
@@ -2227,20 +2202,45 @@ exports[`slots t-slot nested within another slot 4`] = `
 }"
 `;
 
+exports[`slots t-slot nested within another slot 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  let block1 = createBlock(\`<span id=\\"modal\\"><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callSlot(ctx, node, key, 'default', false, {});
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`slots t-slot nested within another slot 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  let block1 = createBlock(\`<span id=\\"portal\\"><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callSlot(ctx, node, key, 'default', false, {});
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`slots t-slot nested within another slot 5`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span id=\\"c1\\"><block-child-0/></span>\`);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    return component(\`Child3\`, {}, key + \`__2\`, node, ctx);
-  }
+  let block1 = createBlock(\`<span>Child 3</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
-    return block1([], [b3]);
+    return block1();
   }
 }"
 `;
@@ -2249,10 +2249,15 @@ exports[`slots t-slot scope context 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
+  
+  let block1 = createBlock(\`<button>The Button</button>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return block1();
+  }
   
   return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {});
+    return component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
   }
 }"
 `;
@@ -2281,15 +2286,10 @@ exports[`slots t-slot scope context 3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<button>The Button</button>\`);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    return block1();
-  }
+  let { callSlot } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    return callSlot(ctx, node, key, 'default', false, {});
   }
 }"
 `;
@@ -2298,11 +2298,19 @@ exports[`slots t-slot within dynamic t-call 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { capture, call } = helpers;
   
-  let block1 = createBlock(\`<div class=\\"child\\"/>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  function slot2(ctx, node, key = \\"\\") {
+    const template4 = (ctx['tcallTemplate']);
+    return call(this, template4, ctx, node, key + \`__3\`);
+  }
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    const ctx1 = capture(ctx);
+    let b3 = component(\`Slotted\`, {slots: {'default': {__render: slot2, __ctx: ctx1}}}, key + \`__5\`, node, ctx);
+    return block1([], [b3]);
   }
 }"
 `;
@@ -2340,19 +2348,11 @@ exports[`slots t-slot within dynamic t-call 4`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { capture, call } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  function slot2(ctx, node, key = \\"\\") {
-    const template4 = (ctx['tcallTemplate']);
-    return call(this, template4, ctx, node, key + \`__3\`);
-  }
+  let block1 = createBlock(\`<div class=\\"child\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
-    let b3 = component(\`Slotted\`, {slots: {'default': {__render: slot2, __ctx: ctx1}}}, key + \`__5\`, node, ctx);
-    return block1([], [b3]);
+    return block1();
   }
 }"
 `;
@@ -2362,11 +2362,15 @@ exports[`slots template can just return a slot 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {value: ctx['state'].value}, key + \`__2\`, node, ctx);
+  }
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].value;
-    return block1([d1]);
+    let b3 = component(\`SlotComponent\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
+    return block1([], [b3]);
   }
 }"
 `;
@@ -2388,15 +2392,11 @@ exports[`slots template can just return a slot 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {value: ctx['state'].value}, key + \`__2\`, node, ctx);
-  }
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`SlotComponent\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
-    return block1([], [b3]);
+    let d1 = ctx['props'].value;
+    return block1([d1]);
   }
 }"
 `;
diff --git a/tests/components/__snapshots__/style_class.test.ts.snap b/tests/components/__snapshots__/style_class.test.ts.snap
index 7c26fcf3..930c933e 100644
--- a/tests/components/__snapshots__/style_class.test.ts.snap
+++ b/tests/components/__snapshots__/style_class.test.ts.snap
@@ -5,6 +5,17 @@ exports[`style and class handling can set class on multi root component 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {class: 'fromparent'}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`style and class handling can set class on multi root component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   let block2 = createBlock(\`<div>a</div>\`);
   let block3 = createBlock(\`<span block-attribute-0=\\"class\\">b</span>\`);
   
@@ -17,18 +28,18 @@ exports[`style and class handling can set class on multi root component 1`] = `
 }"
 `;
 
-exports[`style and class handling can set class on multi root component 2`] = `
+exports[`style and class handling can set class on sub component, as prop 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'fromparent'}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {class: 'some-class'}, key + \`__1\`, node, ctx);
   }
 }"
 `;
 
-exports[`style and class handling can set class on sub component, as prop 1`] = `
+exports[`style and class handling can set class on sub component, as prop 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -42,27 +53,13 @@ exports[`style and class handling can set class on sub component, as prop 1`] =
 }"
 `;
 
-exports[`style and class handling can set class on sub component, as prop 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'some-class'}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
 exports[`style and class handling can set class on sub sub component 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div block-attribute-0=\\"class\\">childchild</div>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].class;
-    return block1([d1]);
+    return component(\`Child\`, {class: 'fromparent'}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -83,8 +80,11 @@ exports[`style and class handling can set class on sub sub component 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\">childchild</div>\`);
+  
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'fromparent'}, key + \`__1\`, node, ctx);
+    let d1 = ctx['props'].class;
+    return block1([d1]);
   }
 }"
 `;
@@ -94,11 +94,8 @@ exports[`style and class handling can set more than one class on sub component 1
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].class;
-    return block1([d1]);
+    return component(\`Child\`, {class: 'a  b'}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -108,8 +105,11 @@ exports[`style and class handling can set more than one class on sub component 2
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
+  
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'a  b'}, key + \`__1\`, node, ctx);
+    let d1 = ctx['props'].class;
+    return block1([d1]);
   }
 }"
 `;
@@ -146,11 +146,8 @@ exports[`style and class handling class on sub component, which is switched to a
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div block-attribute-0=\\"class\\">a</div>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].class;
-    return block1([d1]);
+    return component(\`Child\`, {class: 'someclass',child: ctx['state'].child}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -160,20 +157,6 @@ exports[`style and class handling class on sub component, which is switched to a
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span block-attribute-0=\\"class\\">b</span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].class;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`style and class handling class on sub component, which is switched to another 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     if (ctx['props'].child==='a') {
@@ -186,23 +169,12 @@ exports[`style and class handling class on sub component, which is switched to a
 }"
 `;
 
-exports[`style and class handling class on sub component, which is switched to another 4`] = `
+exports[`style and class handling class on sub component, which is switched to another 3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'someclass',child: ctx['state'].child}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
-exports[`style and class handling class with extra whitespaces (variation) 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\">a</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let d1 = ctx['props'].class;
@@ -211,7 +183,21 @@ exports[`style and class handling class with extra whitespaces (variation) 1`] =
 }"
 `;
 
-exports[`style and class handling class with extra whitespaces (variation) 2`] = `
+exports[`style and class handling class on sub component, which is switched to another 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span block-attribute-0=\\"class\\">b</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].class;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`style and class handling class with extra whitespaces (variation) 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -225,7 +211,7 @@ exports[`style and class handling class with extra whitespaces (variation) 2`] =
 }"
 `;
 
-exports[`style and class handling class with extra whitespaces 1`] = `
+exports[`style and class handling class with extra whitespaces (variation) 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -239,7 +225,7 @@ exports[`style and class handling class with extra whitespaces 1`] = `
 }"
 `;
 
-exports[`style and class handling class with extra whitespaces 2`] = `
+exports[`style and class handling class with extra whitespaces 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -250,16 +236,27 @@ exports[`style and class handling class with extra whitespaces 2`] = `
 }"
 `;
 
+exports[`style and class handling class with extra whitespaces 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].class;
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`style and class handling component class and parent class combine together 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div class=\\"child\\" block-attribute-0=\\"class\\">child</div>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].class;
-    return block1([d1]);
+    return component(\`Child\`, {class: 'from parent'}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -269,8 +266,11 @@ exports[`style and class handling component class and parent class combine toget
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div class=\\"child\\" block-attribute-0=\\"class\\">child</div>\`);
+  
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'from parent'}, key + \`__1\`, node, ctx);
+    let d1 = ctx['props'].class;
+    return block1([d1]);
   }
 }"
 `;
@@ -307,20 +307,6 @@ exports[`style and class handling empty class attribute is not added on widget r
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span block-attribute-0=\\"class\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].class;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`style and class handling empty class attribute is not added on widget root el 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -330,11 +316,36 @@ exports[`style and class handling empty class attribute is not added on widget r
 }"
 `;
 
+exports[`style and class handling empty class attribute is not added on widget root el 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].class;
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`style and class handling error in subcomponent with class 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {class: 'a'}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`style and class handling error in subcomponent with class 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"><block-text-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -345,18 +356,18 @@ exports[`style and class handling error in subcomponent with class 1`] = `
 }"
 `;
 
-exports[`style and class handling error in subcomponent with class 2`] = `
+exports[`style and class handling no class is set is child ignores it 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'a'}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {class: 'hey'}, key + \`__1\`, node, ctx);
   }
 }"
 `;
 
-exports[`style and class handling no class is set is child ignores it 1`] = `
+exports[`style and class handling no class is set is child ignores it 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -369,18 +380,18 @@ exports[`style and class handling no class is set is child ignores it 1`] = `
 }"
 `;
 
-exports[`style and class handling no class is set is child ignores it 2`] = `
+exports[`style and class handling no class is set is parent does not give it as prop 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'hey'}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
   }
 }"
 `;
 
-exports[`style and class handling no class is set is parent does not give it as prop 1`] = `
+exports[`style and class handling no class is set is parent does not give it as prop 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -394,18 +405,18 @@ exports[`style and class handling no class is set is parent does not give it as
 }"
 `;
 
-exports[`style and class handling no class is set is parent does not give it as prop 2`] = `
+exports[`style and class handling style is properly added on widget root el 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {style: 'font-weight: bold;'}, key + \`__1\`, node, ctx);
   }
 }"
 `;
 
-exports[`style and class handling style is properly added on widget root el 1`] = `
+exports[`style and class handling style is properly added on widget root el 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -419,36 +430,11 @@ exports[`style and class handling style is properly added on widget root el 1`]
 }"
 `;
 
-exports[`style and class handling style is properly added on widget root el 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {style: 'font-weight: bold;'}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
 exports[`style and class handling t-att-class is properly added/removed on widget root el (v2) 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span class=\\"c\\" block-attribute-0=\\"class\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = {d:ctx['state'].d,...ctx['props'].class};
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`style and class handling t-att-class is properly added/removed on widget root el (v2) 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -458,7 +444,7 @@ exports[`style and class handling t-att-class is properly added/removed on widge
 }"
 `;
 
-exports[`style and class handling t-att-class is properly added/removed on widget root el (v3) 1`] = `
+exports[`style and class handling t-att-class is properly added/removed on widget root el (v2) 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -472,7 +458,7 @@ exports[`style and class handling t-att-class is properly added/removed on widge
 }"
 `;
 
-exports[`style and class handling t-att-class is properly added/removed on widget root el (v3) 2`] = `
+exports[`style and class handling t-att-class is properly added/removed on widget root el (v3) 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -482,3 +468,17 @@ exports[`style and class handling t-att-class is properly added/removed on widge
   }
 }"
 `;
+
+exports[`style and class handling t-att-class is properly added/removed on widget root el (v3) 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span class=\\"c\\" block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = {d:ctx['state'].d,...ctx['props'].class};
+    return block1([d1]);
+  }
+}"
+`;
diff --git a/tests/components/__snapshots__/t_call.test.ts.snap b/tests/components/__snapshots__/t_call.test.ts.snap
index 6924582d..72ba5cdc 100644
--- a/tests/components/__snapshots__/t_call.test.ts.snap
+++ b/tests/components/__snapshots__/t_call.test.ts.snap
@@ -43,6 +43,23 @@ exports[`t-call dynamic t-call 3`] = `
 
 exports[`t-call handlers are properly bound through a dynamic t-call 1`] = `
 "function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { call } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const template2 = ('__template__8');
+    let b2 = call(this, template2, ctx, node, key + \`__1\`);
+    let d1 = ctx['counter'];
+    return block1([d1], [b2]);
+  }
+}"
+`;
+
+exports[`t-call handlers are properly bound through a dynamic t-call 2`] = `
+"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
@@ -55,24 +72,24 @@ exports[`t-call handlers are properly bound through a dynamic t-call 1`] = `
 }"
 `;
 
-exports[`t-call handlers are properly bound through a dynamic t-call 2`] = `
+exports[`t-call handlers are properly bound through a t-call 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { call } = helpers;
+  let { getTemplate } = helpers;
+  const callTemplate_2 = getTemplate(\`__template__6\`);
   
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const template2 = ('__template__9');
-    let b2 = call(this, template2, ctx, node, key + \`__1\`);
+    let b2 = callTemplate_2.call(this, ctx, node, key + \`__1\`);
     let d1 = ctx['counter'];
     return block1([d1], [b2]);
   }
 }"
 `;
 
-exports[`t-call handlers are properly bound through a t-call 1`] = `
+exports[`t-call handlers are properly bound through a t-call 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -86,24 +103,23 @@ exports[`t-call handlers are properly bound through a t-call 1`] = `
 }"
 `;
 
-exports[`t-call handlers are properly bound through a t-call 2`] = `
+exports[`t-call handlers with arguments are properly bound through a t-call 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { getTemplate } = helpers;
-  const callTemplate_2 = getTemplate(\`__template__9\`);
+  const callTemplate_2 = getTemplate(\`__template__19\`);
   
-  let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2 = callTemplate_2.call(this, ctx, node, key + \`__1\`);
-    let d1 = ctx['counter'];
-    return block1([d1], [b2]);
+    return block1([], [b2]);
   }
 }"
 `;
 
-exports[`t-call handlers with arguments are properly bound through a t-call 1`] = `
+exports[`t-call handlers with arguments are properly bound through a t-call 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -118,12 +134,12 @@ exports[`t-call handlers with arguments are properly bound through a t-call 1`]
 }"
 `;
 
-exports[`t-call handlers with arguments are properly bound through a t-call 2`] = `
+exports[`t-call parent is set within t-call 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { getTemplate } = helpers;
-  const callTemplate_2 = getTemplate(\`__template__9\`);
+  const callTemplate_2 = getTemplate(\`__template__10\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -134,26 +150,13 @@ exports[`t-call handlers with arguments are properly bound through a t-call 2`]
 }"
 `;
 
-exports[`t-call parent is set within t-call 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
 exports[`t-call parent is set within t-call 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span>lucas</span>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -162,20 +165,30 @@ exports[`t-call parent is set within t-call 3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { getTemplate } = helpers;
-  const callTemplate_2 = getTemplate(\`__template__9\`);
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block1 = createBlock(\`<span>lucas</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callTemplate_2.call(this, ctx, node, key + \`__1\`);
-    return block1([], [b2]);
+    return block1();
   }
 }"
 `;
 
 exports[`t-call parent is set within t-call with no parentNode 1`] = `
 "function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { getTemplate } = helpers;
+  const callTemplate_2 = getTemplate(\`__template__16\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return callTemplate_2.call(this, ctx, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call parent is set within t-call with no parentNode 2`] = `
+"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
@@ -185,7 +198,7 @@ exports[`t-call parent is set within t-call with no parentNode 1`] = `
 }"
 `;
 
-exports[`t-call parent is set within t-call with no parentNode 2`] = `
+exports[`t-call parent is set within t-call with no parentNode 3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -198,35 +211,8 @@ exports[`t-call parent is set within t-call with no parentNode 2`] = `
 }"
 `;
 
-exports[`t-call parent is set within t-call with no parentNode 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { getTemplate } = helpers;
-  const callTemplate_2 = getTemplate(\`__template__9\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return callTemplate_2.call(this, ctx, node, key + \`__1\`);
-  }
-}"
-`;
-
 exports[`t-call sub components in two t-calls 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].val;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`t-call sub components in two t-calls 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { getTemplate } = helpers;
@@ -248,7 +234,7 @@ exports[`t-call sub components in two t-calls 2`] = `
 }"
 `;
 
-exports[`t-call sub components in two t-calls 3`] = `
+exports[`t-call sub components in two t-calls 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -259,18 +245,7 @@ exports[`t-call sub components in two t-calls 3`] = `
 }"
 `;
 
-exports[`t-call t-call in t-foreach and children component 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {val: ctx['val']}, key + \`__1\`, node, ctx);
-  }
-}"
-`;
-
-exports[`t-call t-call in t-foreach and children component 2`] = `
+exports[`t-call sub components in two t-calls 3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -284,12 +259,12 @@ exports[`t-call t-call in t-foreach and children component 2`] = `
 }"
 `;
 
-exports[`t-call t-call in t-foreach and children component 3`] = `
+exports[`t-call t-call in t-foreach and children component 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { prepareList, getTemplate, withKey } = helpers;
-  const callTemplate_2 = getTemplate(\`__template__9\`);
+  const callTemplate_2 = getTemplate(\`__template__13\`);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
@@ -310,3 +285,28 @@ exports[`t-call t-call in t-foreach and children component 3`] = `
   }
 }"
 `;
+
+exports[`t-call t-call in t-foreach and children component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {val: ctx['val']}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`t-call t-call in t-foreach and children component 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].val;
+    return block1([d1]);
+  }
+}"
+`;
diff --git a/tests/components/__snapshots__/t_component.test.ts.snap b/tests/components/__snapshots__/t_component.test.ts.snap
index 2cfcd237..d30ace9e 100644
--- a/tests/components/__snapshots__/t_component.test.ts.snap
+++ b/tests/components/__snapshots__/t_component.test.ts.snap
@@ -5,32 +5,6 @@ exports[`t-component can switch between dynamic components without the need for
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span>child a</span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`t-component can switch between dynamic components without the need for a t-key 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<span>child b</span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`t-component can switch between dynamic components without the need for a t-key 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -41,7 +15,7 @@ exports[`t-component can switch between dynamic components without the need for
 }"
 `;
 
-exports[`t-component can use dynamic components (the class) if given (with different root tagname) 1`] = `
+exports[`t-component can switch between dynamic components without the need for a t-key 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -54,46 +28,7 @@ exports[`t-component can use dynamic components (the class) if given (with diffe
 }"
 `;
 
-exports[`t-component can use dynamic components (the class) if given (with different root tagname) 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>child b</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`t-component can use dynamic components (the class) if given (with different root tagname) 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    const tKey_1 = ctx['state'].child;
-    let Comp3 = ctx['myComponent'];
-    return toggler(tKey_1, toggler(Comp3, component(Comp3, {}, tKey_1 + key + \`__2\`, node, ctx)));
-  }
-}"
-`;
-
-exports[`t-component can use dynamic components (the class) if given 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<span>child a</span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`t-component can use dynamic components (the class) if given 2`] = `
+exports[`t-component can switch between dynamic components without the need for a t-key 3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -106,7 +41,7 @@ exports[`t-component can use dynamic components (the class) if given 2`] = `
 }"
 `;
 
-exports[`t-component can use dynamic components (the class) if given 3`] = `
+exports[`t-component can use dynamic components (the class) if given (with different root tagname) 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -119,11 +54,91 @@ exports[`t-component can use dynamic components (the class) if given 3`] = `
 }"
 `;
 
+exports[`t-component can use dynamic components (the class) if given (with different root tagname) 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span>child a</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`t-component can use dynamic components (the class) if given (with different root tagname) 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>child b</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`t-component can use dynamic components (the class) if given 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const tKey_1 = ctx['state'].child;
+    let Comp3 = ctx['myComponent'];
+    return toggler(tKey_1, toggler(Comp3, component(Comp3, {}, tKey_1 + key + \`__2\`, node, ctx)));
+  }
+}"
+`;
+
+exports[`t-component can use dynamic components (the class) if given 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span>child a</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`t-component can use dynamic components (the class) if given 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span>child b</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`t-component modifying a sub widget 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let Comp2 = ctx['Counter'];
+    let b2 = toggler(Comp2, component(Comp2, {}, key + \`__1\`, node, ctx));
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-component modifying a sub widget 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -135,22 +150,19 @@ exports[`t-component modifying a sub widget 1`] = `
 }"
 `;
 
-exports[`t-component modifying a sub widget 2`] = `
+exports[`t-component switching dynamic component 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
   return function template(ctx, node, key = \\"\\") {
-    let Comp2 = ctx['Counter'];
-    let b2 = toggler(Comp2, component(Comp2, {}, key + \`__1\`, node, ctx));
-    return block1([], [b2]);
+    let Comp2 = ctx['Child'];
+    return toggler(Comp2, component(Comp2, {}, key + \`__1\`, node, ctx));
   }
 }"
 `;
 
-exports[`t-component switching dynamic component 1`] = `
+exports[`t-component switching dynamic component 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -163,7 +175,7 @@ exports[`t-component switching dynamic component 1`] = `
 }"
 `;
 
-exports[`t-component switching dynamic component 2`] = `
+exports[`t-component switching dynamic component 3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -174,7 +186,7 @@ exports[`t-component switching dynamic component 2`] = `
 }"
 `;
 
-exports[`t-component switching dynamic component 3`] = `
+exports[`t-component t-component works in simple case 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -186,20 +198,7 @@ exports[`t-component switching dynamic component 3`] = `
 }"
 `;
 
-exports[`t-component t-component not on a <t> node 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<span>1</span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`t-component t-component works in simple case 1`] = `
+exports[`t-component t-component works in simple case 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -211,15 +210,3 @@ exports[`t-component t-component works in simple case 1`] = `
   }
 }"
 `;
-
-exports[`t-component t-component works in simple case 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    let Comp2 = ctx['Child'];
-    return toggler(Comp2, component(Comp2, {}, key + \`__1\`, node, ctx));
-  }
-}"
-`;
diff --git a/tests/components/__snapshots__/t_foreach.test.ts.snap b/tests/components/__snapshots__/t_foreach.test.ts.snap
index 8ae651ae..b885e096 100644
--- a/tests/components/__snapshots__/t_foreach.test.ts.snap
+++ b/tests/components/__snapshots__/t_foreach.test.ts.snap
@@ -2,20 +2,6 @@
 
 exports[`list of components components in a node in a t-foreach  1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].item;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`list of components components in a node in a t-foreach  2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { prepareList, withKey } = helpers;
@@ -38,6 +24,20 @@ exports[`list of components components in a node in a t-foreach  2`] = `
 }"
 `;
 
+exports[`list of components components in a node in a t-foreach  2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].item;
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`list of components crash on duplicate key in dev mode 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -73,40 +73,8 @@ exports[`list of components crash on duplicate key in dev mode 2`] = `
 }"
 `;
 
-exports[`list of components crash on duplicate key in dev mode 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { prepareList, withKey } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1,2]);
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = v_block1[i1];
-      let key1 = 'child';
-      c_block1[i1] = withKey(component(\`Child\`, {}, key + \`__1__\${key1}\`, node, ctx), key1);
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
 exports[`list of components list of sub components inside other nodes 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<span>asdf</span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`list of components list of sub components inside other nodes 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { prepareList, withKey } = helpers;
@@ -129,21 +97,20 @@ exports[`list of components list of sub components inside other nodes 2`] = `
 }"
 `;
 
-exports[`list of components reconciliation alg works for t-foreach in t-foreach 1`] = `
+exports[`list of components list of sub components inside other nodes 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  let block1 = createBlock(\`<span>asdf</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].blip;
-    return block1([d1]);
+    return block1();
   }
 }"
 `;
 
-exports[`list of components reconciliation alg works for t-foreach in t-foreach 2`] = `
+exports[`list of components reconciliation alg works for t-foreach in t-foreach 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -175,7 +142,7 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach
 }"
 `;
 
-exports[`list of components reconciliation alg works for t-foreach in t-foreach, 2 1`] = `
+exports[`list of components reconciliation alg works for t-foreach in t-foreach 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -183,13 +150,13 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach,
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].row+'_'+ctx['props'].col;
+    let d1 = ctx['props'].blip;
     return block1([d1]);
   }
 }"
 `;
 
-exports[`list of components reconciliation alg works for t-foreach in t-foreach, 2 2`] = `
+exports[`list of components reconciliation alg works for t-foreach in t-foreach, 2 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -223,21 +190,21 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach,
 }"
 `;
 
-exports[`list of components simple list 1`] = `
+exports[`list of components reconciliation alg works for t-foreach in t-foreach, 2 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].value;
+    let d1 = ctx['props'].row+'_'+ctx['props'].col;
     return block1([d1]);
   }
 }"
 `;
 
-exports[`list of components simple list 2`] = `
+exports[`list of components simple list 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -256,21 +223,21 @@ exports[`list of components simple list 2`] = `
 }"
 `;
 
-exports[`list of components sub components rendered in a loop 1`] = `
+exports[`list of components simple list 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<p><block-text-0/></p>\`);
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].n;
+    let d1 = ctx['props'].value;
     return block1([d1]);
   }
 }"
 `;
 
-exports[`list of components sub components rendered in a loop 2`] = `
+exports[`list of components sub components rendered in a loop 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -292,7 +259,7 @@ exports[`list of components sub components rendered in a loop 2`] = `
 }"
 `;
 
-exports[`list of components sub components with some state rendered in a loop 1`] = `
+exports[`list of components sub components rendered in a loop 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -300,13 +267,13 @@ exports[`list of components sub components with some state rendered in a loop 1`
   let block1 = createBlock(\`<p><block-text-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['state'].n;
+    let d1 = ctx['props'].n;
     return block1([d1]);
   }
 }"
 `;
 
-exports[`list of components sub components with some state rendered in a loop 2`] = `
+exports[`list of components sub components with some state rendered in a loop 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -328,21 +295,21 @@ exports[`list of components sub components with some state rendered in a loop 2`
 }"
 `;
 
-exports[`list of components switch component position 1`] = `
+exports[`list of components sub components with some state rendered in a loop 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  let block1 = createBlock(\`<p><block-text-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].key;
+    let d1 = ctx['state'].n;
     return block1([d1]);
   }
 }"
 `;
 
-exports[`list of components switch component position 2`] = `
+exports[`list of components switch component position 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -364,22 +331,21 @@ exports[`list of components switch component position 2`] = `
 }"
 `;
 
-exports[`list of components t-foreach with t-component, and update 1`] = `
+exports[`list of components switch component position 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['state'].val;
-    let d2 = ctx['props'].val;
-    return block1([d1, d2]);
+    let d1 = ctx['props'].key;
+    return block1([d1]);
   }
 }"
 `;
 
-exports[`list of components t-foreach with t-component, and update 2`] = `
+exports[`list of components t-foreach with t-component, and update 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -401,3 +367,18 @@ exports[`list of components t-foreach with t-component, and update 2`] = `
   }
 }"
 `;
+
+exports[`list of components t-foreach with t-component, and update 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['state'].val;
+    let d2 = ctx['props'].val;
+    return block1([d1, d2]);
+  }
+}"
+`;
diff --git a/tests/components/__snapshots__/t_key.test.ts.snap b/tests/components/__snapshots__/t_key.test.ts.snap
index ada4b161..69f46f21 100644
--- a/tests/components/__snapshots__/t_key.test.ts.snap
+++ b/tests/components/__snapshots__/t_key.test.ts.snap
@@ -2,20 +2,6 @@
 
 exports[`t-key t-foreach with t-key switch component position 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].key;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`t-key t-foreach with t-key switch component position 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { prepareList, withKey } = helpers;
@@ -37,7 +23,7 @@ exports[`t-key t-foreach with t-key switch component position 2`] = `
 }"
 `;
 
-exports[`t-key t-key on Component 1`] = `
+exports[`t-key t-foreach with t-key switch component position 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -51,17 +37,31 @@ exports[`t-key t-key on Component 1`] = `
 }"
 `;
 
+exports[`t-key t-key on Component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const tKey_1 = ctx['key'];
+    let b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key']}, tKey_1 + key + \`__2\`, node, ctx));
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`t-key t-key on Component 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const tKey_1 = ctx['key'];
-    let b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key']}, tKey_1 + key + \`__2\`, node, ctx));
-    return block1([], [b2]);
+    let d1 = ctx['props'].key;
+    return block1([d1]);
   }
 }"
 `;
@@ -71,20 +71,6 @@ exports[`t-key t-key on Component as a function 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].key;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`t-key t-key on Component as a function 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -95,7 +81,7 @@ exports[`t-key t-key on Component as a function 2`] = `
 }"
 `;
 
-exports[`t-key t-key on multiple Components 1`] = `
+exports[`t-key t-key on Component as a function 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -109,7 +95,7 @@ exports[`t-key t-key on multiple Components 1`] = `
 }"
 `;
 
-exports[`t-key t-key on multiple Components 2`] = `
+exports[`t-key t-key on multiple Components 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -126,7 +112,7 @@ exports[`t-key t-key on multiple Components 2`] = `
 }"
 `;
 
-exports[`t-key t-key on multiple Components with t-call 1 1`] = `
+exports[`t-key t-key on multiple Components 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -140,19 +126,7 @@ exports[`t-key t-key on multiple Components with t-call 1 1`] = `
 }"
 `;
 
-exports[`t-key t-key on multiple Components with t-call 1 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    const tKey_1 = ctx['key'];
-    return toggler(tKey_1, component(\`Child\`, {key: ctx['key']}, tKey_1 + key + \`__2\`, node, ctx));
-  }
-}"
-`;
-
-exports[`t-key t-key on multiple Components with t-call 1 3`] = `
+exports[`t-key t-key on multiple Components with t-call 1 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -179,7 +153,19 @@ exports[`t-key t-key on multiple Components with t-call 1 3`] = `
 }"
 `;
 
-exports[`t-key t-key on multiple Components with t-call 2 1`] = `
+exports[`t-key t-key on multiple Components with t-call 1 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const tKey_1 = ctx['key'];
+    return toggler(tKey_1, component(\`Child\`, {key: ctx['key']}, tKey_1 + key + \`__2\`, node, ctx));
+  }
+}"
+`;
+
+exports[`t-key t-key on multiple Components with t-call 1 3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -193,6 +179,22 @@ exports[`t-key t-key on multiple Components with t-call 2 1`] = `
 }"
 `;
 
+exports[`t-key t-key on multiple Components with t-call 2 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { getTemplate } = helpers;
+  const callTemplate_2 = getTemplate(\`calledTemplate\`);
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callTemplate_2.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`t-key t-key on multiple Components with t-call 2 2`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -212,14 +214,12 @@ exports[`t-key t-key on multiple Components with t-call 2 3`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { getTemplate } = helpers;
-  const callTemplate_2 = getTemplate(\`calledTemplate\`);
   
-  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callTemplate_2.call(this, ctx, node, key + \`__1\`);
-    return block1([], [b2]);
+    let d1 = ctx['props'].key;
+    return block1([d1]);
   }
 }"
 `;
diff --git a/tests/components/__snapshots__/t_on.test.ts.snap b/tests/components/__snapshots__/t_on.test.ts.snap
index de27a89d..1a350f0a 100644
--- a/tests/components/__snapshots__/t_on.test.ts.snap
+++ b/tests/components/__snapshots__/t_on.test.ts.snap
@@ -126,20 +126,6 @@ exports[`t-on t-on on destroyed components 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div block-handler-0=\\"click\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = [ctx['onClick'], ctx];
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`t-on t-on on destroyed components 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -151,3 +137,17 @@ exports[`t-on t-on on destroyed components 2`] = `
   }
 }"
 `;
+
+exports[`t-on t-on on destroyed components 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-handler-0=\\"click\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [ctx['onClick'], ctx];
+    return block1([d1]);
+  }
+}"
+`;
diff --git a/tests/components/__snapshots__/t_props.test.ts.snap b/tests/components/__snapshots__/t_props.test.ts.snap
index f67f9254..68c4daa4 100644
--- a/tests/components/__snapshots__/t_props.test.ts.snap
+++ b/tests/components/__snapshots__/t_props.test.ts.snap
@@ -5,20 +5,6 @@ exports[`t-props basic use 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].a+ctx['props'].b;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`t-props basic use 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -28,11 +14,39 @@ exports[`t-props basic use 2`] = `
 }"
 `;
 
+exports[`t-props basic use 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].a+ctx['props'].b;
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`t-props t-props and other props 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Comp\`, Object.assign({}, ctx['state1'], {a: ctx['a']}), key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-props t-props and other props 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
   let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -43,39 +57,11 @@ exports[`t-props t-props and other props 1`] = `
 }"
 `;
 
-exports[`t-props t-props and other props 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Comp\`, Object.assign({}, ctx['state1'], {a: ctx['a']}), key + \`__1\`, node, ctx);
-    return block1([], [b2]);
-  }
-}"
-`;
-
 exports[`t-props t-props only 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].a;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`t-props t-props only 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -85,20 +71,21 @@ exports[`t-props t-props only 2`] = `
 }"
 `;
 
-exports[`t-props t-props with props 1`] = `
+exports[`t-props t-props only 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div/>\`);
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    return block1();
+    let d1 = ctx['props'].a;
+    return block1([d1]);
   }
 }"
 `;
 
-exports[`t-props t-props with props 2`] = `
+exports[`t-props t-props with props 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -111,3 +98,16 @@ exports[`t-props t-props with props 2`] = `
   }
 }"
 `;
+
+exports[`t-props t-props with props 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
diff --git a/tests/components/__snapshots__/t_set.test.ts.snap b/tests/components/__snapshots__/t_set.test.ts.snap
index c299c457..b490db8e 100644
--- a/tests/components/__snapshots__/t_set.test.ts.snap
+++ b/tests/components/__snapshots__/t_set.test.ts.snap
@@ -2,25 +2,6 @@
 
 exports[`t-set slot setted value (with t-set) not accessible with t-esc 1`] = `
 "function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue } = helpers;
-  
-  let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1
-    let d1 = ctx['iter'];
-    setContextValue(ctx, \\"iter\\", 'called');
-    let d2 = ctx['iter'];
-    return block1([d1, d2]);
-  }
-}"
-`;
-
-exports[`t-set slot setted value (with t-set) not accessible with t-esc 2`] = `
-"function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, capture } = helpers;
@@ -47,6 +28,25 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 2`] = `
 }"
 `;
 
+exports[`t-set slot setted value (with t-set) not accessible with t-esc 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    let d1 = ctx['iter'];
+    setContextValue(ctx, \\"iter\\", 'called');
+    let d2 = ctx['iter'];
+    return block1([d1, d2]);
+  }
+}"
+`;
+
 exports[`t-set t-set can't alter component even if key in component 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -116,25 +116,6 @@ exports[`t-set t-set not altered by child comp 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1
-    let d1 = ctx['iter'];
-    setContextValue(ctx, \\"iter\\", 'called');
-    let d2 = ctx['iter'];
-    return block1([d1, d2]);
-  }
-}"
-`;
-
-exports[`t-set t-set not altered by child comp 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue } = helpers;
-  
   let block1 = createBlock(\`<div><p><block-text-0/></p><block-child-0/><p><block-text-1/></p></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
@@ -149,6 +130,25 @@ exports[`t-set t-set not altered by child comp 2`] = `
 }"
 `;
 
+exports[`t-set t-set not altered by child comp 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    let d1 = ctx['iter'];
+    setContextValue(ctx, \\"iter\\", 'called');
+    let d2 = ctx['iter'];
+    return block1([d1, d2]);
+  }
+}"
+`;
+
 exports[`t-set t-set outside modified in t-if 1`] = `
 "function anonymous(bdom, helpers
 ) {
diff --git a/tests/components/error_handling.test.ts b/tests/components/error_handling.test.ts
index fb8faf55..62df4ae4 100644
--- a/tests/components/error_handling.test.ts
+++ b/tests/components/error_handling.test.ts
@@ -37,7 +37,6 @@ beforeEach(() => {
 afterEach(() => {
   console.error = originalconsoleError;
   console.warn = originalconsoleWarn;
-  fixture = makeTestFixture();
 });
 
 describe("basics", () => {
diff --git a/tests/components/props_validation.test.ts b/tests/components/props_validation.test.ts
index 50d96b99..b21a7ac8 100644
--- a/tests/components/props_validation.test.ts
+++ b/tests/components/props_validation.test.ts
@@ -1,11 +1,14 @@
-import { makeTestFixture, nextTick, snapshotApp } from "../helpers";
-import { Component, onError, xml } from "../../src";
-import { App, DEV_MSG } from "../../src/app/app";
+import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { Component, onError, xml, mount } from "../../src";
+import { DEV_MSG } from "../../src/app/app";
 import { validateProps } from "../../src/component/props_validation";
 
 let fixture: HTMLElement;
 
+snapshotEverything();
 const info = console.info;
+let originalconsoleWarn = console.warn;
+let mockConsoleWarn: any;
 
 beforeAll(() => {
   console.info = (message: any) => {
@@ -22,15 +25,13 @@ afterAll(() => {
 
 beforeEach(() => {
   fixture = makeTestFixture();
+  mockConsoleWarn = jest.fn(() => {});
+  console.warn = mockConsoleWarn;
 });
 
-async function mountApp(Root: any, dev: boolean = true) {
-  const app = new App(Root);
-  app.configure({ dev });
-  await app.mount(fixture);
-  snapshotApp(app);
-  return app;
-}
+afterEach(() => {
+  console.warn = originalconsoleWarn;
+});
 
 //------------------------------------------------------------------------------
 // Props validation
@@ -49,7 +50,7 @@ describe("props validation", () => {
     let error: Error | undefined;
 
     try {
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
@@ -58,7 +59,7 @@ describe("props validation", () => {
     error = undefined;
 
     try {
-      await mountApp(Parent, false);
+      await mount(Parent, fixture, { dev: false });
     } catch (e) {
       error = e as Error;
     }
@@ -77,7 +78,7 @@ describe("props validation", () => {
 
     let error: Error;
     try {
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
@@ -112,7 +113,7 @@ describe("props validation", () => {
       props = {};
 
       try {
-        await mountApp(Parent);
+        await mount(Parent, fixture, { dev: true });
       } catch (e) {
         error = e as Error;
       }
@@ -121,14 +122,14 @@ describe("props validation", () => {
       error = undefined;
       props = { p: test.ok };
       try {
-        await mountApp(Parent);
+        await mount(Parent, fixture, { dev: true });
       } catch (e) {
         error = e as Error;
       }
       expect(error!).toBeUndefined();
       props = { p: test.ko };
       try {
-        await mountApp(Parent);
+        await mount(Parent, fixture, { dev: true });
       } catch (e) {
         error = e as Error;
       }
@@ -162,7 +163,7 @@ describe("props validation", () => {
       let error: Error | undefined;
       props = {};
       try {
-        await mountApp(Parent);
+        await mount(Parent, fixture, { dev: true });
       } catch (e) {
         error = e as Error;
       }
@@ -171,14 +172,14 @@ describe("props validation", () => {
       error = undefined;
       props = { p: test.ok };
       try {
-        await mountApp(Parent);
+        await mount(Parent, fixture, { dev: true });
       } catch (e) {
         error = e as Error;
       }
       expect(error!).toBeUndefined();
       props = { p: test.ko };
       try {
-        await mountApp(Parent);
+        await mount(Parent, fixture, { dev: true });
       } catch (e) {
         error = e as Error;
       }
@@ -203,21 +204,21 @@ describe("props validation", () => {
     let props: { p?: any };
     try {
       props = { p: "string" };
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
     expect(error!).toBeUndefined();
     try {
       props = { p: true };
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
     expect(error!).toBeUndefined();
     try {
       props = { p: 1 };
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
@@ -241,21 +242,21 @@ describe("props validation", () => {
     let props: { p?: any };
     try {
       props = { p: "key" };
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
     expect(error!).toBeUndefined();
     try {
       props = {};
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
     expect(error!).toBeUndefined();
     try {
       props = { p: 1 };
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
@@ -279,21 +280,21 @@ describe("props validation", () => {
     let props: { p?: any };
     try {
       props = { p: [] };
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
     expect(error!).toBeUndefined();
     try {
       props = { p: ["string"] };
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
     expect(error!).toBeUndefined();
     try {
       props = { p: [1] };
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
@@ -301,7 +302,7 @@ describe("props validation", () => {
     error = undefined;
     try {
       props = { p: ["string", 1] };
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
@@ -323,28 +324,28 @@ describe("props validation", () => {
     let props: { p?: any };
     try {
       props = { p: [] };
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
     expect(error!).toBeUndefined();
     try {
       props = { p: ["string"] };
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
     expect(error!).toBeUndefined();
     try {
       props = { p: [false, true, "string"] };
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
     expect(error!).toBeUndefined();
     try {
       props = { p: [true, 1] };
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
@@ -370,14 +371,14 @@ describe("props validation", () => {
     let props: { p?: any };
     try {
       props = { p: { id: 1, url: "url" } };
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
     expect(error!).toBeUndefined();
     try {
       props = { p: { id: 1, url: "url", extra: true } };
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
@@ -385,7 +386,7 @@ describe("props validation", () => {
     expect(error!.message).toBe("Invalid prop 'p' in component SubComp (unknown prop 'extra')");
     try {
       props = { p: { id: "1", url: "url" } };
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
@@ -394,7 +395,7 @@ describe("props validation", () => {
     error = undefined;
     try {
       props = { p: { id: 1 } };
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
@@ -426,21 +427,21 @@ describe("props validation", () => {
     let props: { p?: any };
     try {
       props = { p: { id: 1, url: true } };
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
     expect(error!).toBeUndefined();
     try {
       props = { p: { id: 1, url: [12] } };
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
     expect(error!).toBeUndefined();
     try {
       props = { p: { id: 1, url: [12, true] } };
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
@@ -550,7 +551,7 @@ describe("props validation", () => {
       static components = { Child };
       static template = xml`<div><Child message="1"/></div>`;
     }
-    await mountApp(Parent);
+    await mount(Parent, fixture, { dev: true });
     expect(fixture.innerHTML).toBe("<div><div>1</div></div>");
   });
 
@@ -649,7 +650,7 @@ describe("props validation", () => {
     }
     let error: Error;
     try {
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
@@ -671,10 +672,10 @@ describe("props validation", () => {
         onError((e) => (error = e));
       }
     }
-    const app = await mountApp(Parent);
+    const parent = await mount(Parent, fixture, { dev: true });
     expect(fixture.innerHTML).toBe("<div><div>1</div></div>");
-    (app as any).root.component.state.p = undefined;
-    (app as any).root.component.render();
+    parent.state.p = undefined;
+    parent.render();
     await nextTick();
     expect(error!).toBeDefined();
     expect(error!.message).toBe("Missing props 'p' (component 'SubComp')");
@@ -693,10 +694,10 @@ describe("props validation", () => {
       state: any = { p: 1 };
     }
 
-    const app = await mountApp(Parent);
+    const parent = await mount(Parent, fixture, { dev: true });
     expect(fixture.innerHTML).toBe("<div><div>1</div></div>");
-    (app as any).root.component.state.p = undefined;
-    (app as any).root.component.render();
+    parent.state.p = undefined;
+    parent.render();
     await nextTick();
     expect(fixture.innerHTML).toBe("<div><div>4</div></div>");
   });
@@ -715,7 +716,7 @@ describe("props validation", () => {
     }
     let error: Error;
     try {
-      await mountApp(Parent);
+      await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
@@ -738,7 +739,7 @@ describe("default props", () => {
       static template = xml`<div><SubComp /></div>`;
       static components = { SubComp };
     }
-    await mountApp(Parent);
+    await mount(Parent, fixture, { dev: true });
     expect(fixture.innerHTML).toBe("<div><div>4</div></div>");
   });
 
@@ -752,10 +753,10 @@ describe("default props", () => {
       static components = { SubComp };
       state: any = { p: 1 };
     }
-    const app = await mountApp(Parent);
+    const parent = await mount(Parent, fixture, { dev: true });
     expect(fixture.innerHTML).toBe("<div><div>1</div></div>");
-    (app as any).root.component.state.p = undefined;
-    (app as any).root.component.render();
+    parent.state.p = undefined;
+    parent.render();
     await nextTick();
     expect(fixture.innerHTML).toBe("<div><div>4</div></div>");
   });
@@ -770,7 +771,7 @@ describe("default props", () => {
       static template = xml`<div><SubComp/></div>`;
       static components = { SubComp };
     }
-    await mountApp(Parent);
+    await mount(Parent, fixture, { dev: true });
     expect(fixture.innerHTML).toBe("<div><span>heyhey</span></div>");
   });
 });
diff --git a/tests/components/slots.test.ts b/tests/components/slots.test.ts
index d38445e3..a7bac80a 100644
--- a/tests/components/slots.test.ts
+++ b/tests/components/slots.test.ts
@@ -1,11 +1,19 @@
 import { App, Component, mount, onMounted, useState, xml } from "../../src/index";
-import { addTemplate, children, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { children, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 
 snapshotEverything();
+let originalconsoleWarn = console.warn;
+let mockConsoleWarn: any;
 let fixture: HTMLElement;
 
 beforeEach(() => {
   fixture = makeTestFixture();
+  mockConsoleWarn = jest.fn(() => {});
+  console.warn = mockConsoleWarn;
+});
+
+afterEach(() => {
+  console.warn = originalconsoleWarn;
 });
 
 describe("slots", () => {
@@ -88,6 +96,7 @@ describe("slots", () => {
       error = e;
     }
     expect(error).not.toBeNull();
+    expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 
   test("fun: two calls to the same slot", async () => {
@@ -642,8 +651,6 @@ describe("slots", () => {
       static template = xml`Grand Child`;
     }
 
-    addTemplate("sub", `<GrandChild/>`);
-
     class Parent extends Component {
       static template = xml`
           <div>
@@ -655,7 +662,12 @@ describe("slots", () => {
     }
 
     // throw new Error("boom")
-    const parent = await mount(Parent, fixture);
+    const parent = await mount(Parent, fixture, {
+      templates: `
+        <templates>
+          <t t-name="sub"><GrandChild/></t>
+        </templates>`,
+    });
 
     expect(fixture.innerHTML).toBe("<div>Grand Child</div>");
 
@@ -786,7 +798,6 @@ describe("slots", () => {
       static template = xml`<div class="slotted"><t t-slot="default" /></div>`;
     }
 
-    addTemplate("sometemplate", `<div class="slot"><Child/></div>`);
     class UsingTcallInSlotted extends Component {
       tcallTemplate = "sometemplate";
       static template = xml`
@@ -798,7 +809,14 @@ describe("slots", () => {
       static components = { Slotted, Child };
     }
 
-    const parent = await mount(UsingTcallInSlotted, fixture);
+    const parent = await mount(UsingTcallInSlotted, fixture, {
+      templates: `
+        <templates>
+          <t t-name="sometemplate">
+            <div class="slot"><Child/></div>
+          </t>
+        </templates>`,
+    });
 
     expect(parent).toBeInstanceOf(UsingTcallInSlotted);
     expect(children(parent).length).toBe(1);
diff --git a/tests/components/style_class.test.ts b/tests/components/style_class.test.ts
index 8c1b3f9a..6cf341e8 100644
--- a/tests/components/style_class.test.ts
+++ b/tests/components/style_class.test.ts
@@ -3,9 +3,17 @@ import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 
 snapshotEverything();
 let fixture: HTMLElement;
+let originalconsoleWarn = console.warn;
+let mockConsoleWarn: any;
 
 beforeEach(() => {
   fixture = makeTestFixture();
+  mockConsoleWarn = jest.fn(() => {});
+  console.warn = mockConsoleWarn;
+});
+
+afterEach(() => {
+  console.warn = originalconsoleWarn;
 });
 
 describe("style and class handling", () => {
@@ -349,5 +357,6 @@ describe("style and class handling", () => {
       /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
     expect(error!.message).toMatch(regexp);
     expect(fixture.innerHTML).toBe("");
+    expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 });
diff --git a/tests/components/t_call.test.ts b/tests/components/t_call.test.ts
index 7687a2c6..0239c713 100644
--- a/tests/components/t_call.test.ts
+++ b/tests/components/t_call.test.ts
@@ -1,11 +1,5 @@
 import { App, Component, mount, useState, xml } from "../../src/index";
-import {
-  addTemplate,
-  isDirectChildOf,
-  makeTestFixture,
-  nextTick,
-  snapshotEverything,
-} from "../helpers";
+import { isDirectChildOf, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 
 snapshotEverything();
 
@@ -17,20 +11,24 @@ beforeEach(() => {
 
 describe("t-call", () => {
   test("dynamic t-call", async () => {
-    class App extends Component {
+    class Root extends Component {
       static template = xml`
           <t t-call="{{current.template}}">
             owl
           </t>`;
       current = useState({ template: "foo" });
     }
-    addTemplate("foo", "<div>foo</div>");
-    addTemplate("bar", "bar");
 
-    const app = await mount(App, fixture);
+    const root = await mount(Root, fixture, {
+      templates: `
+        <templates>
+          <t t-name="foo"><div>foo</div></t>
+          <t t-name="bar">bar</t>
+        </templates>`,
+    });
     expect(fixture.innerHTML).toBe("<div>foo</div>");
 
-    app.current.template = "bar";
+    root.current.template = "bar";
     await nextTick();
     expect(fixture.innerHTML).toBe("bar");
   });
diff --git a/tests/components/t_foreach.test.ts b/tests/components/t_foreach.test.ts
index 5b60bc09..680df867 100644
--- a/tests/components/t_foreach.test.ts
+++ b/tests/components/t_foreach.test.ts
@@ -1,18 +1,21 @@
-import { App, Component, mount, onMounted, useState, xml } from "../../src/index";
-import {
-  makeTestFixture,
-  nextTick,
-  snapshotApp,
-  snapshotEverything,
-  useLogLifecycle,
-} from "../helpers";
+import { Component, mount, onMounted, useState, xml } from "../../src/index";
+import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
 
 snapshotEverything();
 
+let originalconsoleWarn = console.warn;
+let mockConsoleWarn: any;
+
 let fixture: HTMLElement;
 
 beforeEach(() => {
   fixture = makeTestFixture();
+  mockConsoleWarn = jest.fn(() => {});
+  console.warn = mockConsoleWarn;
+});
+
+afterEach(() => {
+  console.warn = originalconsoleWarn;
 });
 
 describe("list of components", () => {
@@ -312,12 +315,10 @@ describe("list of components", () => {
       `;
       static components = { Child };
     }
-    const app = new App(Parent);
-    app.configure({ dev: true });
     await expect(async () => {
-      await app.mount(fixture);
+      await mount(Parent, fixture, { dev: true });
     }).rejects.toThrowError("Got duplicate key in t-foreach: child");
-    snapshotApp(app);
     console.info = consoleInfo;
+    expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 });
diff --git a/tests/components/t_key.test.ts b/tests/components/t_key.test.ts
index 0ebfbc9a..249c92d8 100644
--- a/tests/components/t_key.test.ts
+++ b/tests/components/t_key.test.ts
@@ -1,4 +1,4 @@
-import { snapshotEverything, makeTestFixture, addTemplate, nextTick } from "../helpers";
+import { snapshotEverything, makeTestFixture, nextTick } from "../helpers";
 import { Component, mount, xml } from "../../src/index";
 
 snapshotEverything();
@@ -115,8 +115,6 @@ describe("t-key", () => {
       }
     }
 
-    addTemplate("calledTemplate", `<Child t-key="key" key="key" />`);
-
     class Parent extends Component {
       static components = { Child };
       static template = xml`<span>
@@ -128,7 +126,14 @@ describe("t-key", () => {
       key2 = 2;
     }
 
-    const parent = await mount(Parent, fixture);
+    const parent = await mount(Parent, fixture, {
+      templates: `
+        <templates>
+          <t t-name="calledTemplate">
+            <Child t-key="key" key="key" />
+          </t>
+        </templates>`,
+    });
     expect((parent.el as HTMLElement).innerHTML).toBe("<div>1</div><div>2</div>");
 
     parent.key1 = 2;
@@ -149,11 +154,6 @@ describe("t-key", () => {
       }
     }
 
-    addTemplate(
-      "calledTemplate",
-      `<Child t-key="key1" key="key1" /><Child t-key="key2" key="key2" />`
-    );
-
     class Parent extends Component {
       static components = { Child };
       static template = xml`<span>
@@ -164,7 +164,14 @@ describe("t-key", () => {
       key2 = 2;
     }
 
-    const parent = await mount(Parent, fixture);
+    const parent = await mount(Parent, fixture, {
+      templates: `
+        <templates>
+          <t t-name="calledTemplate">
+          <Child t-key="key1" key="key1" /><Child t-key="key2" key="key2" />
+          </t>
+        </templates>`,
+    });
     expect((parent.el as HTMLElement).innerHTML).toBe("<div>1</div><div>2</div>");
 
     parent.key1 = 2;
diff --git a/tests/helpers.ts b/tests/helpers.ts
index fc665d3e..0ac144c7 100644
--- a/tests/helpers.ts
+++ b/tests/helpers.ts
@@ -1,25 +1,23 @@
+import { diff } from "jest-diff";
 import {
-  App,
+  blockDom,
   Component,
-  onWillDestroy,
   onMounted,
   onPatched,
-  onWillRender,
+  onRendered,
+  onWillDestroy,
   onWillPatch,
+  onWillRender,
   onWillStart,
   onWillUnmount,
   onWillUpdateProps,
   status,
   useComponent,
-  onRendered,
 } from "../src";
-import { BDom } from "../src/blockdom";
-import { blockDom } from "../src";
-import { compile as compileTemplate, Template } from "../src/compiler";
-import { CodeGenOptions } from "../src/compiler/code_generator";
 import { UTILS } from "../src/app/template_helpers";
 import { globalTemplates, TemplateSet } from "../src/app/template_set";
-import { xml } from "../src/tags";
+import { BDom } from "../src/blockdom";
+import { compile } from "../src/compiler";
 
 const mount = blockDom.mount;
 
@@ -39,20 +37,6 @@ export function makeTestFixture() {
   return fixture;
 }
 
-export function snapshotTemplateCode(template: string | Node, options?: CodeGenOptions) {
-  expect(compileTemplate(template, options).toString()).toMatchSnapshot();
-}
-
-export function snapshotApp(app: App) {
-  const Root = app.Root;
-  const template = app.rawTemplates[Root.template];
-  snapshotTemplateCode(template, {
-    translateFn: app.translateFn,
-    translatableAttributes: app.translatableAttributes,
-    dev: app.dev,
-  });
-}
-
 export async function nextTick(): Promise<void> {
   await new Promise((resolve) => setTimeout(resolve));
   await new Promise((resolve) => requestAnimationFrame(resolve));
@@ -74,36 +58,29 @@ export function makeDeferred(): Deferred {
   return <Deferred>def;
 }
 
-/**
- * Return the global template xml string corresponding to the given name
- */
-// export function fromName(name: string): string {
-//   return globalTemplates[name];
-// }
-
 export function trim(str: string): string {
   return str.replace(/\s/g, "");
 }
 
-export function addTemplate(name: string, template: string): string {
-  globalTemplates[name] = template;
-  return name;
-}
-
 // -----------------------------------------------------------------------------
 // Helpers
 // -----------------------------------------------------------------------------
 
-export function compile(template: string): Template {
-  // register here the template globally so snapshotEverything
-  // can get it
-  globalTemplates[template] = template;
-  const templateFunction = compileTemplate(template);
-  return templateFunction(blockDom, UTILS);
+let shouldSnapshot = false;
+let snapshottedTemplates: Set<string> = new Set();
+
+export function snapshotTemplate(template: string) {
+  const fn = compile(template);
+  expect(fn.toString()).toMatchSnapshot();
 }
 
 export function renderToBdom(template: string, context: any = {}, node: any = {}): BDom {
-  return compile(template)(context, node);
+  const fn = compile(template);
+  if (shouldSnapshot && !snapshottedTemplates.has(template)) {
+    snapshottedTemplates.add(template);
+    expect(fn.toString()).toMatchSnapshot();
+  }
+  return fn(blockDom, UTILS)(context, node);
 }
 
 export function renderToString(template: string, context: any = {}): string {
@@ -124,41 +101,24 @@ export class TestContext extends TemplateSet {
 }
 
 export function snapshotEverything() {
-  const consolewarn = console.warn;
-
-  const originalAddTemplate = TemplateSet.prototype.addTemplate;
-  TemplateSet.prototype.addTemplate = function (name: string, template: string, options) {
-    originalAddTemplate.call(this, name, template, options);
-    // register it so snapshotEverything can get it
-    globalTemplates[name] = template;
-  };
-
-  let globalSet: any;
-
-  beforeAll(() => {
-    globalSet = new Set(Object.keys(globalTemplates));
-  });
-
+  if (shouldSnapshot) {
+    // this function has already been called
+    return;
+  }
+  const globalTemplateNames = new Set(Object.keys(globalTemplates));
+  shouldSnapshot = true;
   beforeEach(() => {
-    xml.nextId = 9;
+    snapshottedTemplates.clear();
   });
 
-  afterEach(() => {
-    console.warn = () => {};
-    for (let k in globalTemplates) {
-      if (globalSet.has(k)) {
-        // ignore generic templates
-        continue;
-      }
-      try {
-        snapshotTemplateCode(globalTemplates[k]);
-      } catch (e) {
-        // ignore error
-      }
-      delete globalTemplates[k];
+  const originalCompileTemplate = TemplateSet.prototype._compileTemplate;
+  TemplateSet.prototype._compileTemplate = function (name: string, template: string | Node) {
+    const fn = originalCompileTemplate.call(this, "", template);
+    if (!globalTemplateNames.has(name)) {
+      expect(fn.toString()).toMatchSnapshot();
     }
-    console.warn = consolewarn;
-  });
+    return fn;
+  };
 }
 
 const steps: string[] = [];
@@ -232,8 +192,6 @@ export async function editInput(input: HTMLInputElement | HTMLTextAreaElement, v
   return nextTick();
 }
 
-import { diff } from "jest-diff";
-
 afterEach(() => {
   if (steps.length) {
     steps.splice(0);
diff --git a/tests/misc/__snapshots__/memo.test.ts.snap b/tests/misc/__snapshots__/memo.test.ts.snap
index 4cea7459..7c2bea03 100644
--- a/tests/misc/__snapshots__/memo.test.ts.snap
+++ b/tests/misc/__snapshots__/memo.test.ts.snap
@@ -5,17 +5,6 @@ exports[`Memo if no prop change, prevent renderings from above  1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['props'].value);
-  }
-}"
-`;
-
-exports[`Memo if no prop change, prevent renderings from above  2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   function slot1(ctx, node, key = \\"\\") {
     let b6 = text(ctx['state'].a);
     let b7 = text(ctx['state'].b);
@@ -38,8 +27,14 @@ exports[`Memo if no props, prevent renderings from above  1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
+  function slot2(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {value: ctx['state'].value}, key + \`__3\`, node, ctx);
+  }
+  
   return function template(ctx, node, key = \\"\\") {
-    return text(ctx['props'].value);
+    let b2 = component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+    let b4 = component(\`Memo\`, {slots: {'default': {__render: slot2, __ctx: ctx}}}, key + \`__4\`, node, ctx);
+    return multi([b2, b4]);
   }
 }"
 `;
@@ -49,14 +44,8 @@ exports[`Memo if no props, prevent renderings from above  2`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  function slot2(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {value: ctx['state'].value}, key + \`__3\`, node, ctx);
-  }
-  
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
-    let b4 = component(\`Memo\`, {slots: {'default': {__render: slot2, __ctx: ctx}}}, key + \`__4\`, node, ctx);
-    return multi([b2, b4]);
+    return text(ctx['props'].value);
   }
 }"
 `;
diff --git a/tests/misc/__snapshots__/portal.test.ts.snap b/tests/misc/__snapshots__/portal.test.ts.snap
index d25e7b04..2620141a 100644
--- a/tests/misc/__snapshots__/portal.test.ts.snap
+++ b/tests/misc/__snapshots__/portal.test.ts.snap
@@ -5,11 +5,15 @@ exports[`Portal Portal composed with t-slot 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div block-handler-0=\\"custom\\"><span id=\\"childSpan\\">child2</span></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return component(\`Child2\`, {customHandler: ctx['_handled']}, key + \`__2\`, node, ctx);
+  }
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = [ctx['onCustom'], ctx];
-    return block1([d1]);
+    let b3 = component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
+    return block1([], [b3]);
   }
 }"
 `;
@@ -35,15 +39,11 @@ exports[`Portal Portal composed with t-slot 3`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    return component(\`Child2\`, {customHandler: ctx['_handled']}, key + \`__2\`, node, ctx);
-  }
+  let block1 = createBlock(\`<div block-handler-0=\\"custom\\"><span id=\\"childSpan\\">child2</span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
-    return block1([], [b3]);
+    let d1 = [ctx['onCustom'], ctx];
+    return block1([d1]);
   }
 }"
 `;
@@ -72,20 +72,6 @@ exports[`Portal conditional use of Portal (with sub Component) 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<p><block-text-0/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].val;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`Portal conditional use of Portal (with sub Component) 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block2 = createBlock(\`<span>1</span>\`);
   
   function slot1(ctx, node, key = \\"\\") {
@@ -103,6 +89,20 @@ exports[`Portal conditional use of Portal (with sub Component) 2`] = `
 }"
 `;
 
+exports[`Portal conditional use of Portal (with sub Component) 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<p><block-text-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].val;
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`Portal conditional use of Portal 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -131,20 +131,6 @@ exports[`Portal lifecycle hooks of portal sub component are properly called 1`]
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].val;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`Portal lifecycle hooks of portal sub component are properly called 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
@@ -161,6 +147,20 @@ exports[`Portal lifecycle hooks of portal sub component are properly called 2`]
 }"
 `;
 
+exports[`Portal lifecycle hooks of portal sub component are properly called 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].val;
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`Portal portal could have dynamically no content 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -190,20 +190,6 @@ exports[`Portal portal destroys on crash 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].error&&this.will.crash;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`Portal portal destroys on crash 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
@@ -217,7 +203,7 @@ exports[`Portal portal destroys on crash 2`] = `
 }"
 `;
 
-exports[`Portal portal with child and props 1`] = `
+exports[`Portal portal destroys on crash 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -225,13 +211,13 @@ exports[`Portal portal with child and props 1`] = `
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].val;
+    let d1 = ctx['props'].error&&this.will.crash;
     return block1([d1]);
   }
 }"
 `;
 
-exports[`Portal portal with child and props 2`] = `
+exports[`Portal portal with child and props 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
@@ -249,6 +235,20 @@ exports[`Portal portal with child and props 2`] = `
 }"
 `;
 
+exports[`Portal portal with child and props 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].val;
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`Portal portal with dynamic body 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -362,19 +362,6 @@ exports[`Portal portal's parent's env is not polluted 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<button>child</button>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`Portal portal's parent's env is not polluted 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
@@ -388,6 +375,19 @@ exports[`Portal portal's parent's env is not polluted 2`] = `
 }"
 `;
 
+exports[`Portal portal's parent's env is not polluted 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button>child</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`Portal with target in template (after portal) 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -439,7 +439,9 @@ exports[`Portal: Props validation target is mandatory 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Portal\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    const props2 = {slots: {'default': {__render: slot1, __ctx: ctx}}}
+    helpers.validateProps(\`Portal\`, props2, ctx)
+    let b3 = component(\`Portal\`, props2, key + \`__3\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -458,7 +460,9 @@ exports[`Portal: Props validation target is not list 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Portal\`, {target: ['body'],slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    const props2 = {target: ['body'],slots: {'default': {__render: slot1, __ctx: ctx}}}
+    helpers.validateProps(\`Portal\`, props2, ctx)
+    let b3 = component(\`Portal\`, props2, key + \`__3\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -469,20 +473,6 @@ exports[`Portal: UI/UX focus is kept across re-renders 1`] = `
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<input id=\\"target-me\\" block-attribute-0=\\"placeholder\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['props'].val;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`Portal: UI/UX focus is kept across re-renders 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
@@ -495,3 +485,17 @@ exports[`Portal: UI/UX focus is kept across re-renders 2`] = `
   }
 }"
 `;
+
+exports[`Portal: UI/UX focus is kept across re-renders 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<input id=\\"target-me\\" block-attribute-0=\\"placeholder\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].val;
+    return block1([d1]);
+  }
+}"
+`;
diff --git a/tests/misc/portal.test.ts b/tests/misc/portal.test.ts
index 5ce7d497..237ee0da 100644
--- a/tests/misc/portal.test.ts
+++ b/tests/misc/portal.test.ts
@@ -14,6 +14,8 @@ import { xml } from "../../src/tags";
 import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 
 let fixture: HTMLElement;
+let originalconsoleWarn = console.warn;
+let mockConsoleWarn: any;
 
 function addOutsideDiv(fixture: HTMLElement): HTMLElement {
   let outside = document.createElement("div");
@@ -26,6 +28,12 @@ snapshotEverything();
 
 beforeEach(() => {
   fixture = makeTestFixture();
+  mockConsoleWarn = jest.fn(() => {});
+  console.warn = mockConsoleWarn;
+});
+
+afterEach(() => {
+  console.warn = originalconsoleWarn;
 });
 
 describe("Portal", () => {
@@ -171,6 +179,7 @@ describe("Portal", () => {
     expect(error!).toBeDefined();
     expect(error!.message).toBe("invalid portal target");
     expect(fixture.innerHTML).toBe(`<div></div>`);
+    expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 
   test("portal with child and props", async () => {
@@ -531,6 +540,7 @@ describe("Portal: Props validation", () => {
     expect(error!).toBeDefined();
     expect(error!.message).toBe(`Missing props 'target' (component 'Portal')`);
     console.info = consoleInfo;
+    expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 
   test("target is not list", async () => {
@@ -556,5 +566,6 @@ describe("Portal: Props validation", () => {
     expect(error!).toBeDefined();
     expect(error!.message).toBe(`Invalid Prop 'target' in component 'Portal'`);
     console.info = consoleInfo;
+    expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 });