diff --git a/src/compiler/code_generator.ts b/src/compiler/code_generator.ts
index 22196a8e..1ed465f9 100644
--- a/src/compiler/code_generator.ts
+++ b/src/compiler/code_generator.ts
@@ -1102,10 +1102,7 @@ export class CodeGenerator {
       this.insertAnchor(block);
     }
 
-    let keyArg = `key + \`${key}\``;
-    if (ctx.tKeyExpr) {
-      keyArg = `${ctx.tKeyExpr} + ${keyArg}`;
-    }
+    const keyArg = `key+\`${key}\`,${ctx.tKeyExpr}`;
     const blockArgs = `${expr}, ${propString}, ${keyArg}, node, ctx`;
     let blockExpr = `component(${blockArgs})`;
     if (ast.isDynamic) {
diff --git a/src/component/component_node.ts b/src/component/component_node.ts
index 22481b68..fabf14b4 100644
--- a/src/component/component_node.ts
+++ b/src/component/component_node.ts
@@ -27,15 +27,34 @@ export function component(
   name: string | typeof Component,
   props: any,
   key: string,
+  tKey: null | string,
   ctx: ComponentNode,
   parent: any
 ): ComponentNode {
-  let node: any = ctx.children[key];
+  const parentChildren = ctx.children;
+  const destroy = ComponentNode.prototype.destroy;
+
+  if (tKey) {
+    const parentMap = ctx.keyToTkey;
+    const oldTkey = parentMap[key];
+    if (oldTkey && oldTkey !== tKey) {
+      const oldKey = key + oldTkey;
+      const node = parentChildren[oldKey];
+      if (node && node.status < STATUS.MOUNTED) {
+        destroy.call(node);
+        delete parentChildren[oldKey];
+      }
+    }
+    parentMap[key] = tKey;
+    key = key + tKey;
+  }
+
+  let node: any = parentChildren[key];
   let isDynamic = typeof name !== "string";
 
   if (node) {
     if (node.status < STATUS.MOUNTED) {
-      node.destroy();
+      destroy.call(node);
       node = undefined;
     } else if (node.status === STATUS.DESTROYED) {
       node = undefined;
@@ -60,7 +79,7 @@ export function component(
       }
     }
     node = new ComponentNode(C, props, ctx.app, ctx);
-    ctx.children[key] = node;
+    parentChildren[key] = node;
 
     const fiber = makeChildFiber(node, parentFiber);
     node.initiateRender(fiber);
@@ -90,6 +109,7 @@ export class ComponentNode<T extends typeof Component = typeof Component>
   childEnv: Env;
   children: { [key: string]: ComponentNode } = Object.create(null);
   refs: any = {};
+  keyToTkey: any = {};
 
   willStart: LifecycleHook[] = [];
   willUpdateProps: LifecycleHook[] = [];
diff --git a/tests/__snapshots__/reactivity.test.ts.snap b/tests/__snapshots__/reactivity.test.ts.snap
index 112efe77..1c0e4516 100644
--- a/tests/__snapshots__/reactivity.test.ts.snap
+++ b/tests/__snapshots__/reactivity.test.ts.snap
@@ -56,7 +56,7 @@ exports[`Reactivity: useState destroyed component before being mounted is inacti
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     return block1([], [b2]);
   }
@@ -87,7 +87,7 @@ exports[`Reactivity: useState destroyed component is inactive 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     return block1([], [b2]);
   }
@@ -131,7 +131,7 @@ exports[`Reactivity: useState parent and children subscribed to same context 1`]
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     let txt1 = ctx['contextObj'].b;
     return block1([txt1], [b2]);
   }
@@ -223,8 +223,8 @@ exports[`Reactivity: useState two components are updated in parallel 1`] = `
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    let b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    let b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
+    let b3 = component(\`Child\`, {}, key+\`__2\`,null, node, ctx);
     return block1([], [b2, b3]);
   }
 }"
@@ -252,8 +252,8 @@ exports[`Reactivity: useState two components can subscribe to same context 1`] =
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    let b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    let b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
+    let b3 = component(\`Child\`, {}, key+\`__2\`,null, node, ctx);
     return block1([], [b2, b3]);
   }
 }"
@@ -281,8 +281,8 @@ exports[`Reactivity: useState two independent components on different levels are
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    let b3 = component(\`Parent\`, {}, key + \`__2\`, node, ctx);
+    let b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
+    let b3 = component(\`Parent\`, {}, key+\`__2\`,null, node, ctx);
     return block1([], [b2, b3]);
   }
 }"
@@ -310,7 +310,7 @@ exports[`Reactivity: useState two independent components on different levels are
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -344,7 +344,7 @@ exports[`Reactivity: useState useless atoms should be deleted 1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`id\`] = v_block2[i1];
       let key1 = ctx['id'];
-      c_block2[i1] = withKey(component(\`Quantity\`, {id: ctx['id']}, key + \`__1__\${key1}\`, node, ctx), key1);
+      c_block2[i1] = withKey(component(\`Quantity\`, {id: ctx['id']}, key+\`__1__\${key1}\`,null, node, ctx), key1);
     }
     ctx = ctx.__proto__;
     let b2 = list(c_block2);
diff --git a/tests/compiler/__snapshots__/misc.test.ts.snap b/tests/compiler/__snapshots__/misc.test.ts.snap
index 741a11b1..d22a226c 100644
--- a/tests/compiler/__snapshots__/misc.test.ts.snap
+++ b/tests/compiler/__snapshots__/misc.test.ts.snap
@@ -34,7 +34,7 @@ exports[`misc complex template 1`] = `
     for (let i1 = 0; i1 < l_block4; i1++) {
       ctx[\`slot\`] = v_block4[i1];
       let key1 = ctx['slot'].id;
-      c_block4[i1] = withKey(component(\`SlotButton\`, {class: ctx['slot_container'],slot: ctx['slot']}, key + \`__1__\${key1}\`, node, ctx), key1);
+      c_block4[i1] = withKey(component(\`SlotButton\`, {class: ctx['slot_container'],slot: ctx['slot']}, key+\`__1__\${key1}\`,null, node, ctx), key1);
     }
     ctx = ctx.__proto__;
     b4 = list(c_block4);
@@ -316,8 +316,8 @@ exports[`misc other complex template 1`] = `
     if (!ctx['project']) {
       b24 = block24();
     } else {
-      let b26 = component(\`BundlesList\`, {bundles: ctx['bundles'].sticky,category_custom_views: ctx['category_custom_views'],search: ctx['search']}, key + \`__2\`, node, ctx);
-      let b27 = component(\`BundlesList\`, {bundles: ctx['bundles'].dev,search: ctx['search']}, key + \`__3\`, node, ctx);
+      let b26 = component(\`BundlesList\`, {bundles: ctx['bundles'].sticky,category_custom_views: ctx['category_custom_views'],search: ctx['search']}, key+\`__2\`,null, node, ctx);
+      let b27 = component(\`BundlesList\`, {bundles: ctx['bundles'].dev,search: ctx['search']}, key+\`__3\`,null, node, ctx);
       b25 = block25([], [b26, b27]);
     }
     return block1([attr1, txt1, hdlr2, hdlr3, attr8, hdlr4, hdlr5, ref1, hdlr6, ref2], [b2, b4, b14, b17, b22, b23, b24, b25]);
diff --git a/tests/components/__snapshots__/basics.test.ts.snap b/tests/components/__snapshots__/basics.test.ts.snap
index 694811c8..6485abab 100644
--- a/tests/components/__snapshots__/basics.test.ts.snap
+++ b/tests/components/__snapshots__/basics.test.ts.snap
@@ -23,7 +23,7 @@ exports[`basics a class component inside a class component, no external dom 1`]
   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\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -49,7 +49,7 @@ exports[`basics a component inside a component 1`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -92,7 +92,7 @@ exports[`basics can handle empty props 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {val: undefined}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {val: undefined}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -210,7 +210,7 @@ exports[`basics child can be updated 1`] = `
   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 component(\`Child\`, {value: ctx['state'].counter}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -246,7 +246,7 @@ exports[`basics class parent, class child component with props 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {value: 42}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {value: 42}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -312,7 +312,7 @@ exports[`basics higher order components parent and child 1`] = `
   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);
+    return component(\`Child\`, {child: ctx['state'].child}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -325,9 +325,9 @@ exports[`basics higher order components parent and child 2`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     if (ctx['props'].child==='a') {
-      b2 = component(\`ChildA\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`ChildA\`, {}, key+\`__1\`,null, node, ctx);
     } else {
-      b3 = component(\`ChildB\`, {}, key + \`__2\`, node, ctx);
+      b3 = component(\`ChildB\`, {}, key+\`__2\`,null, node, ctx);
     }
     return multi([b2, b3]);
   }
@@ -375,8 +375,8 @@ exports[`basics list of two sub components inside other nodes 1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`blip\`] = v_block2[i1];
       let key1 = ctx['blip'].id;
-      let b4 = component(\`SubWidget\`, {}, key + \`__1__\${key1}\`, node, ctx);
-      let b5 = component(\`SubWidget\`, {}, key + \`__2__\${key1}\`, node, ctx);
+      let b4 = component(\`SubWidget\`, {}, key+\`__1__\${key1}\`,null, node, ctx);
+      let b5 = component(\`SubWidget\`, {}, key+\`__2__\${key1}\`,null, node, ctx);
       c_block2[i1] = withKey(block3([], [b4, b5]), key1);
     }
     let b2 = list(c_block2);
@@ -404,7 +404,7 @@ exports[`basics parent, child and grandchild 1`] = `
   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\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -415,7 +415,7 @@ exports[`basics parent, child and grandchild 2`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
+    return component(\`GrandChild\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -454,9 +454,9 @@ exports[`basics reconciliation alg is not confused in some specific situation 1`
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     const tKey_1 = 4;
-    let b3 = toggler(tKey_1, component(\`Child\`, {}, tKey_1 + key + \`__2\`, node, ctx));
+    let b3 = toggler(tKey_1, component(\`Child\`, {}, key+\`__2\`,tKey_1, node, ctx));
     return block1([], [b2, b3]);
   }
 }"
@@ -481,7 +481,7 @@ exports[`basics rerendering a widget with a sub widget 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Counter\`, {}, key + \`__1\`, node, ctx);
+    return component(\`Counter\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -511,9 +511,9 @@ exports[`basics same t-keys in two different places 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = 1;
-    let b2 = toggler(tKey_1, component(\`Child\`, {blip: '1'}, tKey_1 + key + \`__1\`, node, ctx));
+    let b2 = toggler(tKey_1, component(\`Child\`, {blip: '1'}, key+\`__1\`,tKey_1, node, ctx));
     const tKey_2 = 1;
-    let b3 = toggler(tKey_2, component(\`Child\`, {blip: '2'}, tKey_2 + key + \`__2\`, node, ctx));
+    let b3 = toggler(tKey_2, component(\`Child\`, {blip: '2'}, key+\`__2\`,tKey_2, node, ctx));
     return block1([], [b2, b3]);
   }
 }"
@@ -591,7 +591,7 @@ exports[`basics sub components between t-ifs 1`] = `
     } else {
       b3 = block3();
     }
-    b4 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    b4 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     if (ctx['state'].flag) {
       b5 = block5();
     }
@@ -626,7 +626,7 @@ exports[`basics t-elif works with t-component 1`] = `
     if (ctx['state'].flag) {
       b2 = block2();
     } else if (!ctx['state'].flag) {
-      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b3 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     return block1([], [b2, b3]);
   }
@@ -659,7 +659,7 @@ exports[`basics t-else with empty string works with t-component 1`] = `
     if (ctx['state'].flag) {
       b2 = block2();
     } else {
-      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b3 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     return block1([], [b2, b3]);
   }
@@ -692,7 +692,7 @@ exports[`basics t-else works with t-component 1`] = `
     if (ctx['state'].flag) {
       b2 = block2();
     } else {
-      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b3 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     return block1([], [b2, b3]);
   }
@@ -722,7 +722,7 @@ exports[`basics t-if works with t-component 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     return block1([], [b2]);
   }
@@ -753,9 +753,9 @@ exports[`basics t-key on a component with t-if, and a sibling component 1`] = `
     let b2,b3;
     if (false) {
       const tKey_1 = 'str';
-      b2 = toggler(tKey_1, component(\`Child\`, {}, tKey_1 + key + \`__1\`, node, ctx));
+      b2 = toggler(tKey_1, component(\`Child\`, {}, key+\`__1\`,tKey_1, node, ctx));
     }
-    b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    b3 = component(\`Child\`, {}, key+\`__2\`,null, node, ctx);
     return block1([], [b2, b3]);
   }
 }"
@@ -784,7 +784,7 @@ exports[`basics text after a conditional component 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     let txt1 = ctx['state'].text;
     return block1([txt1], [b2]);
@@ -811,7 +811,7 @@ exports[`basics three level of components with collapsing root nodes 1`] = `
   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\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -822,7 +822,7 @@ exports[`basics three level of components with collapsing root nodes 2`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
+    return component(\`GrandChild\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -846,8 +846,8 @@ exports[`basics two child components 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    let b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    let b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
+    let b3 = component(\`Child\`, {}, key+\`__2\`,null, node, ctx);
     return multi([b2, b3]);
   }
 }"
@@ -875,7 +875,7 @@ exports[`basics update props of component without concrete own node 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['childProps'].key;
-    let b2 = toggler(tKey_1, component(\`Child\`, ctx['childProps'], tKey_1 + key + \`__1\`, node, ctx));
+    let b2 = toggler(tKey_1, component(\`Child\`, ctx['childProps'], key+\`__1\`,tKey_1, node, ctx));
     return block1([], [b2]);
   }
 }"
@@ -888,7 +888,7 @@ exports[`basics update props of component without concrete own node 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['props'].subKey;
-    return toggler(tKey_1, component(\`Custom\`, {key: ctx['props'].key,subKey: ctx['props'].subKey}, tKey_1 + key + \`__1\`, node, ctx));
+    return toggler(tKey_1, component(\`Custom\`, {key: ctx['props'].key,subKey: ctx['props'].subKey}, key+\`__1\`,tKey_1, node, ctx));
   }
 }"
 `;
@@ -933,7 +933,7 @@ 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);
+    return component(\`Child\`, {flag: ctx['state'].flag}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -974,7 +974,7 @@ exports[`basics widget after a t-foreach 1`] = `
     }
     ctx = ctx.__proto__;
     let b2 = list(c_block2);
-    let b4 = component(\`SomeComponent\`, {}, key + \`__1\`, node, ctx);
+    let b4 = component(\`SomeComponent\`, {}, key+\`__1\`,null, node, ctx);
     return block1([], [b2, b4]);
   }
 }"
@@ -1001,7 +1001,7 @@ exports[`basics zero or one child components 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     return multi([b2]);
   }
@@ -1081,7 +1081,7 @@ exports[`support svg components add proper namespace to svg 1`] = `
   let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`GComp\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`GComp\`, {}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
diff --git a/tests/components/__snapshots__/concurrency.test.ts.snap b/tests/components/__snapshots__/concurrency.test.ts.snap
index a0c98bda..811662ab 100644
--- a/tests/components/__snapshots__/concurrency.test.ts.snap
+++ b/tests/components/__snapshots__/concurrency.test.ts.snap
@@ -20,7 +20,7 @@ exports[`calling render in destroy 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
-    return toggler(tKey_1, component(\`B\`, {fromA: ctx['state']}, tKey_1 + key + \`__1\`, node, ctx));
+    return toggler(tKey_1, component(\`B\`, {fromA: ctx['state']}, key+\`__1\`,tKey_1, node, ctx));
   }
 }"
 `;
@@ -31,7 +31,7 @@ exports[`calling render in destroy 2`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`C\`, {fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
+    return component(\`C\`, {fromA: ctx['props'].fromA}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -74,7 +74,7 @@ exports[`changing state before first render does not trigger a render (with pare
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = component(\`TestW\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`TestW\`, {}, key+\`__1\`,null, node, ctx);
     }
     return block1([], [b2]);
   }
@@ -117,7 +117,7 @@ exports[`concurrent renderings scenario 1 1`] = `
   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);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -131,7 +131,7 @@ exports[`concurrent renderings scenario 1 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA,fromB: ctx['state'].fromB}, key + \`__1\`, node, ctx);
+    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA,fromB: ctx['state'].fromB}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -161,7 +161,7 @@ exports[`concurrent renderings scenario 2 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].fromA;
-    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key+\`__1\`,null, node, ctx);
     return block1([txt1], [b2]);
   }
 }"
@@ -175,7 +175,7 @@ exports[`concurrent renderings scenario 2 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA,fromB: ctx['state'].fromB}, key + \`__1\`, node, ctx);
+    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA,fromB: ctx['state'].fromB}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -204,7 +204,7 @@ exports[`concurrent renderings scenario 2bis 1`] = `
   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);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -218,7 +218,7 @@ exports[`concurrent renderings scenario 2bis 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA,fromB: ctx['state'].fromB}, key + \`__1\`, node, ctx);
+    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA,fromB: ctx['state'].fromB}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -247,7 +247,7 @@ exports[`concurrent renderings scenario 3 1`] = `
   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);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -261,7 +261,7 @@ exports[`concurrent renderings scenario 3 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
+    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -275,7 +275,7 @@ exports[`concurrent renderings scenario 3 3`] = `
   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);
+    let b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA,fromC: ctx['state'].fromC}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -304,7 +304,7 @@ exports[`concurrent renderings scenario 4 1`] = `
   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);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -318,7 +318,7 @@ exports[`concurrent renderings scenario 4 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
+    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -332,7 +332,7 @@ exports[`concurrent renderings scenario 4 3`] = `
   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);
+    let b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA,fromC: ctx['state'].fromC}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -361,7 +361,7 @@ exports[`concurrent renderings scenario 5 1`] = `
   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);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -389,7 +389,7 @@ exports[`concurrent renderings scenario 6 1`] = `
   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);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -417,7 +417,7 @@ exports[`concurrent renderings scenario 7 1`] = `
   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);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -446,7 +446,7 @@ exports[`concurrent renderings scenario 8 1`] = `
   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);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -476,8 +476,8 @@ exports[`concurrent renderings scenario 9 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].fromA;
-    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
-    let b3 = component(\`ComponentC\`, {fromA: ctx['state'].fromA}, key + \`__2\`, node, ctx);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key+\`__1\`,null, node, ctx);
+    let b3 = component(\`ComponentC\`, {fromA: ctx['state'].fromA}, key+\`__2\`,null, node, ctx);
     return block1([txt1], [b2, b3]);
   }
 }"
@@ -505,7 +505,7 @@ exports[`concurrent renderings scenario 9 3`] = `
   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(\`ComponentD\`, {fromA: ctx['props'].fromA,fromC: ctx['state'].fromC}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -534,7 +534,7 @@ exports[`concurrent renderings scenario 10 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentB\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+    let b2 = component(\`ComponentB\`, {value: ctx['state'].value}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -550,7 +550,7 @@ exports[`concurrent renderings scenario 10 2`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
-      b2 = component(\`ComponentC\`, {value: ctx['props'].value}, key + \`__1\`, node, ctx);
+      b2 = component(\`ComponentC\`, {value: ctx['props'].value}, key+\`__1\`,null, node, ctx);
     }
     return block1([], [b2]);
   }
@@ -579,7 +579,7 @@ exports[`concurrent renderings scenario 11 1`] = `
   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);
+    let b2 = component(\`Child\`, {val: ctx['state'].valA}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -608,7 +608,7 @@ exports[`concurrent renderings scenario 12 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {val: ctx['val']}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {val: ctx['val']}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -637,9 +637,9 @@ exports[`concurrent renderings scenario 13 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
-    b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     if (ctx['state'].bool) {
-      b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+      b3 = component(\`Child\`, {}, key+\`__2\`,null, node, ctx);
     }
     return block1([], [b2, b3]);
   }
@@ -668,7 +668,7 @@ exports[`concurrent renderings scenario 14 1`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`B\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    let b2 = component(\`B\`, {fromA: ctx['state'].fromA}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -682,7 +682,7 @@ exports[`concurrent renderings scenario 14 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`C\`, {fromB: ctx['state'].fromB,fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
+    let b2 = component(\`C\`, {fromB: ctx['state'].fromB,fromA: ctx['props'].fromA}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -712,7 +712,7 @@ exports[`concurrent renderings scenario 15 1`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`B\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    let b2 = component(\`B\`, {fromA: ctx['state'].fromA}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -726,7 +726,7 @@ exports[`concurrent renderings scenario 15 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`C\`, {fromB: ctx['state'].fromB,fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
+    let b2 = component(\`C\`, {fromB: ctx['state'].fromB,fromA: ctx['props'].fromA}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -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 component(\`B\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    return component(\`B\`, {fromA: ctx['state'].fromA}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -765,7 +765,7 @@ 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);
+    return component(\`C\`, {fromB: ctx['state'].fromB,fromA: ctx['props'].fromA}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -784,7 +784,7 @@ exports[`concurrent renderings scenario 16 3`] = `
     b6 = text(ctx['state'].fromC);
     b7 = text(\`: \`);
     if (ctx['state'].fromC===13) {
-      b8 = component(\`D\`, {}, key + \`__1\`, node, ctx);
+      b8 = component(\`D\`, {}, key+\`__1\`,null, node, ctx);
     }
     return multi([b2, b3, b4, b5, b6, b7, b8]);
   }
@@ -810,10 +810,10 @@ exports[`creating two async components, scenario 1 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     if (ctx['state'].flagA) {
-      b2 = component(\`ChildA\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`ChildA\`, {}, key+\`__1\`,null, node, ctx);
     }
     if (ctx['state'].flagB) {
-      b3 = component(\`ChildB\`, {}, key + \`__2\`, node, ctx);
+      b3 = component(\`ChildB\`, {}, key+\`__2\`,null, node, ctx);
     }
     return multi([b2, b3]);
   }
@@ -856,9 +856,9 @@ exports[`creating two async components, scenario 2 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
-    b2 = component(\`ChildA\`, {val: ctx['state'].valA}, key + \`__1\`, node, ctx);
+    b2 = component(\`ChildA\`, {val: ctx['state'].valA}, key+\`__1\`,null, node, ctx);
     if (ctx['state'].flagB) {
-      b3 = component(\`ChildB\`, {val: ctx['state'].valB}, key + \`__2\`, node, ctx);
+      b3 = component(\`ChildB\`, {val: ctx['state'].valB}, key+\`__2\`,null, node, ctx);
     }
     return block1([], [b2, b3]);
   }
@@ -902,9 +902,9 @@ exports[`creating two async components, scenario 3 (patching in the same frame)
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
-    b2 = component(\`ChildA\`, {val: ctx['state'].valA}, key + \`__1\`, node, ctx);
+    b2 = component(\`ChildA\`, {val: ctx['state'].valA}, key+\`__1\`,null, node, ctx);
     if (ctx['state'].flagB) {
-      b3 = component(\`ChildB\`, {val: ctx['state'].valB}, key + \`__2\`, node, ctx);
+      b3 = component(\`ChildB\`, {val: ctx['state'].valB}, key+\`__2\`,null, node, ctx);
     }
     return block1([], [b2, b3]);
   }
@@ -945,7 +945,7 @@ exports[`delay willUpdateProps 1`] = `
   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);
+    return component(\`Child\`, {value: ctx['state'].value}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -970,7 +970,7 @@ exports[`delay willUpdateProps with rendering grandchild 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Parent\`, {state: ctx['state']}, key + \`__1\`, node, ctx);
+    return component(\`Parent\`, {state: ctx['state']}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -981,8 +981,8 @@ exports[`delay willUpdateProps with rendering grandchild 2`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`DelayedChild\`, {value: ctx['props'].state.value}, key + \`__1\`, node, ctx);
-    let b3 = component(\`ReactiveChild\`, {}, key + \`__2\`, node, ctx);
+    let b2 = component(\`DelayedChild\`, {value: ctx['props'].state.value}, key+\`__1\`,null, node, ctx);
+    let b3 = component(\`ReactiveChild\`, {}, key+\`__2\`,null, node, ctx);
     return multi([b2, b3]);
   }
 }"
@@ -1025,7 +1025,7 @@ exports[`destroying/recreating a subwidget with different props (if start is not
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].val>1) {
-      b2 = component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {val: ctx['state'].val}, key+\`__1\`,null, node, ctx);
     }
     return block1([], [b2]);
   }
@@ -1052,7 +1052,7 @@ exports[`parent and child rendered at exact same time 1`] = `
   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);
+    return component(\`Child\`, {value: ctx['state'].value}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -1078,7 +1078,7 @@ exports[`properly behave when destroyed/unmounted while rendering  1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {val: ctx['state'].val}, key+\`__1\`,null, node, ctx);
     }
     return block1([], [b2]);
   }
@@ -1093,7 +1093,7 @@ exports[`properly behave when destroyed/unmounted while rendering  2`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`SubChild\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubChild\`, {}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1123,7 +1123,7 @@ exports[`rendering component again in next microtick 1`] = `
     let b2;
     let hdlr1 = [ctx['onClick'], ctx];
     if (ctx['env'].config.flag) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     return block1([hdlr1], [b2]);
   }
@@ -1143,6 +1143,33 @@ exports[`rendering component again in next microtick 2`] = `
 }"
 `;
 
+exports[`t-key on dynamic async component (toggler is never patched) 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['key'];
+    let Comp1 = ctx['myComp'];
+    return toggler(tKey_1, toggler(Comp1, component(Comp1, {key: ctx['key']}, key+\`__1\`,tKey_1, node, ctx)));
+  }
+}"
+`;
+
+exports[`t-key on dynamic async component (toggler is never patched) 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 txt1 = ctx['props'].key;
+    return block1([txt1]);
+  }
+}"
+`;
+
 exports[`two renderings initiated between willPatch and patched 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -1154,7 +1181,7 @@ exports[`two renderings initiated between willPatch and patched 1`] = `
     let b2;
     if (ctx['state'].flag) {
       const tKey_1 = 'panel_'+ctx['state'].panel;
-      b2 = toggler(tKey_1, component(\`Panel\`, {val: ctx['state'].panel}, tKey_1 + key + \`__1\`, node, ctx));
+      b2 = toggler(tKey_1, component(\`Panel\`, {val: ctx['state'].panel}, key+\`__1\`,tKey_1, node, ctx));
     }
     return block1([], [b2]);
   }
@@ -1182,7 +1209,7 @@ exports[`two sequential renderings before an animation frame 1`] = `
   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);
+    return component(\`Child\`, {value: ctx['state'].value}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -1206,7 +1233,7 @@ exports[`update a sub-component twice in the same frame 1`] = `
   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);
+    let b2 = component(\`ChildA\`, {val: ctx['state'].valA}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1234,7 +1261,7 @@ exports[`update a sub-component twice in the same frame, 2 1`] = `
   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);
+    let b2 = component(\`ChildA\`, {val: ctx['state'].valA}, key+\`__1\`,null, 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 7af49872..5ea28165 100644
--- a/tests/components/__snapshots__/error_handling.test.ts.snap
+++ b/tests/components/__snapshots__/error_handling.test.ts.snap
@@ -6,7 +6,7 @@ exports[`basics display a nice error if it cannot find component 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`SomeMispelledComponent\`, {}, key + \`__1\`, node, ctx);
+    return component(\`SomeMispelledComponent\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -19,7 +19,7 @@ exports[`basics no component catching error lead to full app destruction 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ErrorComponent\`, {flag: ctx['state'].flag}, key + \`__1\`, node, ctx);
+    let b2 = component(\`ErrorComponent\`, {flag: ctx['state'].flag}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -51,7 +51,7 @@ exports[`basics simple catchError 1`] = `
     if (ctx['error']) {
       b2 = text(\`Error\`);
     } else {
-      b3 = component(\`Boom\`, {}, key + \`__1\`, node, ctx);
+      b3 = component(\`Boom\`, {}, key+\`__1\`,null, node, ctx);
     }
     return block1([], [b2, b3]);
   }
@@ -80,11 +80,11 @@ exports[`can catch errors can catch an error in a component render function 1`]
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`ErrorComponent\`, {flag: ctx['state'].flag}, key + \`__1\`, node, ctx);
+    return component(\`ErrorComponent\`, {flag: ctx['state'].flag}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -132,11 +132,11 @@ exports[`can catch errors can catch an error in the constructor call of a compon
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`ErrorComponent\`, {}, key + \`__1\`, node, ctx);
+    return component(\`ErrorComponent\`, {}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -170,13 +170,13 @@ exports[`can catch errors can catch an error in the constructor call of a compon
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    let b3 = component(\`ClassicCompoent\`, {}, key + \`__1\`, node, ctx);
-    let b4 = component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
+    let b3 = component(\`ClassicCompoent\`, {}, key+\`__1\`,null, node, ctx);
+    let b4 = component(\`ErrorComponent\`, {}, key+\`__2\`,null, node, ctx);
     return multi([b3, b4]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b5 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
+    let b5 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__3\`,null, node, ctx);
     return block1([], [b5]);
   }
 }"
@@ -249,11 +249,11 @@ exports[`can catch errors can catch an error in the initial call of a component
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`ErrorComponent\`, {}, key + \`__1\`, node, ctx);
+    return component(\`ErrorComponent\`, {}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -301,13 +301,13 @@ exports[`can catch errors can catch an error in the initial call of a component
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`ErrorComponent\`, {}, key + \`__1\`, node, ctx);
+    return component(\`ErrorComponent\`, {}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
     let b3;
     if (ctx['state'].flag) {
-      b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+      b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     }
     return block1([], [b3]);
   }
@@ -354,7 +354,7 @@ 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;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`B\`, {}, key + \`__1\`, node, ctx);
+    return component(\`B\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -367,7 +367,7 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`C\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`C\`, {}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -385,7 +385,7 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
     if (ctx['state'].error) {
       b2 = text(\`Error handled\`);
     } else {
-      b3 = component(\`Boom\`, {}, key + \`__1\`, node, ctx);
+      b3 = component(\`Boom\`, {}, key+\`__1\`,null, node, ctx);
     }
     return block1([], [b2, b3]);
   }
@@ -417,7 +417,7 @@ exports[`can catch errors can catch an error in the mounted call (in root compon
     if (ctx['state'].error) {
       b2 = text(\`Error handled\`);
     } else {
-      b3 = component(\`ErrorComponent\`, {}, key + \`__1\`, node, ctx);
+      b3 = component(\`ErrorComponent\`, {}, key+\`__1\`,null, node, ctx);
     }
     return block1([], [b2, b3]);
   }
@@ -445,11 +445,11 @@ exports[`can catch errors can catch an error in the mounted call 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`ErrorComponent\`, {}, key + \`__1\`, node, ctx);
+    return component(\`ErrorComponent\`, {}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -496,12 +496,12 @@ exports[`can catch errors can catch an error in the willPatch call 1`] = `
   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 + \`__1\`, node, ctx);
+    return component(\`ErrorComponent\`, {message: ctx['state'].message}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].message;
-    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     return block1([txt1], [b3]);
   }
 }"
@@ -549,11 +549,11 @@ exports[`can catch errors can catch an error in the willStart call 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`ErrorComponent\`, {}, key + \`__1\`, node, ctx);
+    return component(\`ErrorComponent\`, {}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -600,13 +600,13 @@ exports[`can catch errors can catch an error origination from a child's willStar
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    let b3 = component(\`ClassicCompoent\`, {}, key + \`__1\`, node, ctx);
-    let b4 = component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
+    let b3 = component(\`ClassicCompoent\`, {}, key+\`__1\`,null, node, ctx);
+    let b4 = component(\`ErrorComponent\`, {}, key+\`__2\`,null, node, ctx);
     return multi([b3, b4]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b5 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
+    let b5 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__3\`,null, node, ctx);
     return block1([], [b5]);
   }
 }"
@@ -670,7 +670,7 @@ exports[`can catch errors catchError in catchError 1`] = `
     if (ctx['error']) {
       b2 = text(\`Error\`);
     } else {
-      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b3 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     return block1([], [b2, b3]);
   }
@@ -685,7 +685,7 @@ exports[`can catch errors catchError in catchError 2`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Boom\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Boom\`, {}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -713,7 +713,7 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
   
   function slot1(ctx, node, key = \\"\\") {
     let Comp1 = ctx['cp'].Comp;
-    return toggler(Comp1, component(Comp1, {}, key + \`__1\`, node, ctx));
+    return toggler(Comp1, component(Comp1, {}, key+\`__1\`,null, node, ctx));
   }
   
   return function template(ctx, node, key = \\"\\") {
@@ -724,7 +724,7 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
       let key1 = ctx['cp'].id;
       const v1 = ctx['cp'];
       const ctx1 = capture(ctx);
-      c_block1[i1] = withKey(component(\`ErrorHandler\`, {onError: ()=>this.cleanUp(v1.id),slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__2__\${key1}\`, node, ctx), key1);
+      c_block1[i1] = withKey(component(\`ErrorHandler\`, {onError: ()=>this.cleanUp(v1.id),slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__2__\${key1}\`,null, node, ctx), key1);
     }
     return list(c_block1);
   }
@@ -749,7 +749,7 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`ErrorComponent\`, {}, key + \`__1\`, node, ctx);
+    return component(\`ErrorComponent\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -788,12 +788,12 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
+    return component(\`ErrorComponent\`, {}, key+\`__2\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`OK\`, {}, key + \`__1\`, node, ctx);
-    let b4 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
+    let b2 = component(\`OK\`, {}, key+\`__1\`,null, node, ctx);
+    let b4 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__3\`,null, node, ctx);
     return block1([], [b2, b4]);
   }
 }"
@@ -849,7 +849,7 @@ exports[`can catch errors onError in class inheritance is called if rethrown 1`]
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Concrete\`, {}, key + \`__1\`, node, ctx);
+    return component(\`Concrete\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -879,7 +879,7 @@ exports[`can catch errors onError in class inheritance is not called if no rethr
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Concrete\`, {}, key + \`__1\`, node, ctx);
+    return component(\`Concrete\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -911,7 +911,7 @@ exports[`errors and promises a rendering error in a sub component will reject th
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -953,7 +953,7 @@ exports[`errors and promises a rendering error will reject the render promise (w
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     let txt1 = ctx['x'].y;
     return block1([txt1], [b2]);
   }
diff --git a/tests/components/__snapshots__/event_handling.test.ts.snap b/tests/components/__snapshots__/event_handling.test.ts.snap
index 5c71d1cd..55cb43bd 100644
--- a/tests/components/__snapshots__/event_handling.test.ts.snap
+++ b/tests/components/__snapshots__/event_handling.test.ts.snap
@@ -9,7 +9,7 @@ exports[`event handling handler receive the event as argument 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['inc'], ctx];
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     let txt1 = ctx['state'].value;
     return block1([hdlr1, txt1], [b2]);
   }
diff --git a/tests/components/__snapshots__/higher_order_component.test.ts.snap b/tests/components/__snapshots__/higher_order_component.test.ts.snap
index 0d4b5afe..d19934f5 100644
--- a/tests/components/__snapshots__/higher_order_component.test.ts.snap
+++ b/tests/components/__snapshots__/higher_order_component.test.ts.snap
@@ -6,7 +6,7 @@ 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);
+    return component(\`Child\`, {p: 1}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -33,10 +33,10 @@ exports[`basics can select a sub widget  1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     if (ctx['env'].options.flag) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     if (!ctx['env'].options.flag) {
-      b3 = component(\`OtherChild\`, {}, key + \`__2\`, node, ctx);
+      b3 = component(\`OtherChild\`, {}, key+\`__2\`,null, node, ctx);
     }
     return multi([b2, b3]);
   }
@@ -77,10 +77,10 @@ exports[`basics can select a sub widget, part 2 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     if (!ctx['state'].flag) {
-      b3 = component(\`OtherChild\`, {}, key + \`__2\`, node, ctx);
+      b3 = component(\`OtherChild\`, {}, key+\`__2\`,null, node, ctx);
     }
     return multi([b2, b3]);
   }
@@ -119,7 +119,7 @@ exports[`basics sub widget is interactive 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);
+    return component(\`Child\`, {p: 1}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -147,7 +147,7 @@ exports[`basics top level sub widget with a parent 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentB\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`ComponentB\`, {}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -159,7 +159,7 @@ exports[`basics top level sub widget with a parent 2`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`ComponentC\`, {}, key + \`__1\`, node, ctx);
+    return component(\`ComponentC\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
diff --git a/tests/components/__snapshots__/hooks.test.ts.snap b/tests/components/__snapshots__/hooks.test.ts.snap
index 7554cd6c..753d64a3 100644
--- a/tests/components/__snapshots__/hooks.test.ts.snap
+++ b/tests/components/__snapshots__/hooks.test.ts.snap
@@ -43,7 +43,7 @@ exports[`hooks can use onWillStart, onWillUpdateProps 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`MyComponent\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+    return component(\`MyComponent\`, {value: ctx['state'].value}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -110,7 +110,7 @@ exports[`hooks parent and child env 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let b2 = text(ctx['env'].val);
-    let b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     return multi([b2, b3]);
   }
 }"
@@ -164,7 +164,7 @@ exports[`hooks use sub env supports arbitrary descriptor 1`] = `
   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\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -251,7 +251,7 @@ exports[`hooks useExternalListener 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = component(\`MyComponent\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`MyComponent\`, {}, key+\`__1\`,null, node, ctx);
     }
     return multi([b2]);
   }
diff --git a/tests/components/__snapshots__/lifecycle.test.ts.snap b/tests/components/__snapshots__/lifecycle.test.ts.snap
index a3b81860..d081dd79 100644
--- a/tests/components/__snapshots__/lifecycle.test.ts.snap
+++ b/tests/components/__snapshots__/lifecycle.test.ts.snap
@@ -21,8 +21,8 @@ exports[`lifecycle hooks component semantics 1`] = `
   let block1 = createBlock(\`<div>A<block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`B\`, {}, key + \`__1\`, node, ctx);
-    let b3 = component(\`C\`, {}, key + \`__2\`, node, ctx);
+    let b2 = component(\`B\`, {}, key+\`__1\`,null, node, ctx);
+    let b3 = component(\`C\`, {}, key+\`__2\`,null, node, ctx);
     return block1([], [b2, b3]);
   }
 }"
@@ -50,11 +50,11 @@ exports[`lifecycle hooks component semantics 3`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3,b4;
-    b2 = component(\`D\`, {}, key + \`__1\`, node, ctx);
+    b2 = component(\`D\`, {}, key+\`__1\`,null, node, ctx);
     if (ctx['state'].flag) {
-      b3 = component(\`E\`, {}, key + \`__2\`, node, ctx);
+      b3 = component(\`E\`, {}, key+\`__2\`,null, node, ctx);
     } else {
-      b4 = component(\`F\`, {}, key + \`__3\`, node, ctx);
+      b4 = component(\`F\`, {}, key+\`__3\`,null, node, ctx);
     }
     return block1([], [b2, b3, b4]);
   }
@@ -110,7 +110,7 @@ exports[`lifecycle hooks components are unmounted and destroyed if no longer in
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      let b3 = component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
+      let b3 = component(\`Child\`, {n: ctx['state'].n}, key+\`__1\`,null, node, ctx);
       b2 = block2([], [b3]);
     }
     return multi([b2]);
@@ -140,7 +140,7 @@ exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].ok) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     return multi([b2]);
   }
@@ -168,7 +168,7 @@ exports[`lifecycle hooks hooks are called in proper order in widget creation/des
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -195,7 +195,7 @@ exports[`lifecycle hooks lifecycle semantics 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {a: ctx['state'].a}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {a: ctx['state'].a}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -222,7 +222,7 @@ exports[`lifecycle hooks lifecycle semantics, part 2 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     return multi([b2]);
   }
@@ -235,7 +235,7 @@ exports[`lifecycle hooks lifecycle semantics, part 2 2`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
+    return component(\`GrandChild\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -261,7 +261,7 @@ exports[`lifecycle hooks lifecycle semantics, part 3 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     return multi([b2]);
   }
@@ -276,7 +276,7 @@ exports[`lifecycle hooks lifecycle semantics, part 4 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     return multi([b2]);
   }
@@ -289,7 +289,7 @@ exports[`lifecycle hooks lifecycle semantics, part 4 2`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
+    return component(\`GrandChild\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -315,7 +315,7 @@ exports[`lifecycle hooks lifecycle semantics, part 5 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     return multi([b2]);
   }
@@ -341,7 +341,7 @@ exports[`lifecycle hooks lifecycle semantics, part 6 1`] = `
   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);
+    return component(\`Child\`, {value: ctx['state'].value}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -380,7 +380,7 @@ exports[`lifecycle hooks mounted hook is called on every mount, not just the fir
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     return multi([b2]);
   }
@@ -408,7 +408,7 @@ exports[`lifecycle hooks mounted hook is called on subcomponents, in proper orde
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -437,7 +437,7 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     return block1([], [b2]);
   }
@@ -452,7 +452,7 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ChildChild\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`ChildChild\`, {}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -477,7 +477,7 @@ 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);
+    return component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -505,7 +505,7 @@ exports[`lifecycle hooks patched hook is called after updateProps 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {a: ctx['state'].a}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {a: ctx['state'].a}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -588,7 +588,7 @@ exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly calle
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     return multi([b2]);
   }
@@ -616,7 +616,7 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {n: ctx['state'].n}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -630,7 +630,7 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ChildChild\`, {n: ctx['props'].n}, key + \`__1\`, node, ctx);
+    let b2 = component(\`ChildChild\`, {n: ctx['props'].n}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -656,7 +656,7 @@ exports[`lifecycle hooks willStart hook is called on sub component 1`] = `
   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\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -711,7 +711,7 @@ exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     if (ctx['state'].ok) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     } else {
       b3 = block3();
     }
@@ -739,7 +739,7 @@ exports[`lifecycle hooks willUpdateProps hook is called 1`] = `
   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);
+    return component(\`Child\`, {n: ctx['state'].n}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
diff --git a/tests/components/__snapshots__/props.test.ts.snap b/tests/components/__snapshots__/props.test.ts.snap
index 57fe3991..9fdd3b7d 100644
--- a/tests/components/__snapshots__/props.test.ts.snap
+++ b/tests/components/__snapshots__/props.test.ts.snap
@@ -8,7 +8,7 @@ exports[`basics accept ES6-like syntax for props (with getters) 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {greetings: ctx['greetings']}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {greetings: ctx['greetings']}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -42,7 +42,7 @@ exports[`basics arrow functions as prop correctly capture their scope 1`] = `
       let key1 = ctx['item'].val;
       const v1 = ctx['onClick'];
       const v2 = ctx['item'];
-      c_block1[i1] = withKey(component(\`Child\`, {onClick: ev=>v1(v2.val,ev)}, key + \`__1__\${key1}\`, node, ctx), key1);
+      c_block1[i1] = withKey(component(\`Child\`, {onClick: ev=>v1(v2.val,ev)}, key+\`__1__\${key1}\`,null, node, ctx), key1);
     }
     return list(c_block1);
   }
@@ -71,7 +71,7 @@ exports[`basics explicit object prop 1`] = `
   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);
+    let b2 = component(\`Child\`, {value: ctx['state'].val}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -97,7 +97,7 @@ exports[`basics prop names can contain - 1`] = `
   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);
+    return component(\`Child\`, {'prop-name': 7}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -122,7 +122,7 @@ exports[`basics support prop names that aren't valid bare object property names
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {'some-dashed-prop': 5,'a.b': 'keyword prop'}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {'some-dashed-prop': 5,'a.b': 'keyword prop'}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -158,7 +158,7 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     ctx[\`abc\`] = new LazyValue(value1, ctx, node);
-    let b3 = component(\`Child\`, {val: ctx['abc']}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Child\`, {val: ctx['abc']}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -192,7 +192,7 @@ exports[`basics t-set with a body expression can be used as textual prop 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"abc\\", \`42\`);
-    let b2 = component(\`Child\`, {val: ctx['abc']}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {val: ctx['abc']}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -224,7 +224,7 @@ exports[`basics t-set works  1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"val\\", 42);
-    let b2 = component(\`Child\`, {val: ctx['val']}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {val: ctx['val']}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -250,7 +250,7 @@ exports[`basics template string in prop 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {propName: \`1\${ctx['someVal']}3\`}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {propName: \`1\${ctx['someVal']}3\`}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -273,7 +273,7 @@ exports[`bound functions is referentially equal after update 1`] = `
   let { bind } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {val: ctx['state'].val,fn: bind(ctx, ctx['someFunction'])}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {val: ctx['state'].val,fn: bind(ctx, ctx['someFunction'])}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -296,7 +296,7 @@ exports[`can bind function prop with bind suffix 1`] = `
   let { bind } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {doSomething: bind(ctx, ctx['doSomething'])}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {doSomething: bind(ctx, ctx['doSomething'])}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
diff --git a/tests/components/__snapshots__/props_validation.test.ts.snap b/tests/components/__snapshots__/props_validation.test.ts.snap
index 60548b0b..221d09e5 100644
--- a/tests/components/__snapshots__/props_validation.test.ts.snap
+++ b/tests/components/__snapshots__/props_validation.test.ts.snap
@@ -10,7 +10,7 @@ exports[`default props can set default required boolean values 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -46,7 +46,7 @@ exports[`default props can set default values 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -76,7 +76,7 @@ exports[`default props default values are also set whenever component is updated
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['state'].p}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -104,7 +104,7 @@ exports[`props validation can specify that additional props are allowed (array)
   return function template(ctx, node, key = \\"\\") {
     const props1 = {message: 'm',otherProp: 'o'}
     helpers.validateProps(\`Child\`, props1, ctx)
-    return component(\`Child\`, props1, key + \`__1\`, node, ctx);
+    return component(\`Child\`, props1, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -130,7 +130,7 @@ exports[`props validation can specify that additional props are allowed (object)
   return function template(ctx, node, key = \\"\\") {
     const props1 = {message: 'm',otherProp: 'o'}
     helpers.validateProps(\`Child\`, props1, ctx)
-    return component(\`Child\`, props1, key + \`__1\`, node, ctx);
+    return component(\`Child\`, props1, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -158,7 +158,7 @@ exports[`props validation can validate a prop with multiple types 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -187,7 +187,7 @@ exports[`props validation can validate a prop with multiple types 3`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -216,7 +216,7 @@ exports[`props validation can validate a prop with multiple types 5`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -232,7 +232,7 @@ exports[`props validation can validate an array with given primitive type 1`] =
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -261,7 +261,7 @@ exports[`props validation can validate an array with given primitive type 3`] =
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -290,7 +290,7 @@ exports[`props validation can validate an array with given primitive type 5`] =
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -306,7 +306,7 @@ exports[`props validation can validate an array with given primitive type 6`] =
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -322,7 +322,7 @@ exports[`props validation can validate an array with multiple sub element types
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -351,7 +351,7 @@ exports[`props validation can validate an array with multiple sub element types
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -380,7 +380,7 @@ exports[`props validation can validate an array with multiple sub element types
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -409,7 +409,7 @@ exports[`props validation can validate an array with multiple sub element types
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -425,7 +425,7 @@ exports[`props validation can validate an object with simple shape 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -454,7 +454,7 @@ exports[`props validation can validate an object with simple shape 3`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -470,7 +470,7 @@ exports[`props validation can validate an object with simple shape 4`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -486,7 +486,7 @@ exports[`props validation can validate an object with simple shape 5`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -502,7 +502,7 @@ exports[`props validation can validate an optional props 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -531,7 +531,7 @@ exports[`props validation can validate an optional props 3`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -560,7 +560,7 @@ exports[`props validation can validate an optional props 5`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -576,7 +576,7 @@ exports[`props validation can validate recursively complicated prop def 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -605,7 +605,7 @@ exports[`props validation can validate recursively complicated prop def 3`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -634,7 +634,7 @@ exports[`props validation can validate recursively complicated prop def 5`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -650,7 +650,7 @@ exports[`props validation default values are applied before validating props at
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['state'].p}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -680,7 +680,7 @@ exports[`props validation missing required boolean prop causes an error 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -696,7 +696,7 @@ exports[`props validation mix of optional and mandatory 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {}
     helpers.validateProps(\`Child\`, props1, ctx)
-    let b2 = component(\`Child\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -712,7 +712,7 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
   return function template(ctx, node, key = \\"\\") {
     const props1 = {message: 1}
     helpers.validateProps(\`Child\`, props1, ctx)
-    let b2 = component(\`Child\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -742,7 +742,7 @@ exports[`props validation props are validated whenever component is updated 1`]
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['state'].p}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -772,7 +772,7 @@ exports[`props validation props: list of strings 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -788,7 +788,7 @@ exports[`props validation validate simple types 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -804,7 +804,7 @@ exports[`props validation validate simple types 2`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -833,7 +833,7 @@ exports[`props validation validate simple types 4`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -849,7 +849,7 @@ exports[`props validation validate simple types 5`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -865,7 +865,7 @@ exports[`props validation validate simple types 6`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -894,7 +894,7 @@ exports[`props validation validate simple types 8`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -910,7 +910,7 @@ exports[`props validation validate simple types 9`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -926,7 +926,7 @@ exports[`props validation validate simple types 10`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -955,7 +955,7 @@ exports[`props validation validate simple types 12`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -971,7 +971,7 @@ exports[`props validation validate simple types 13`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -987,7 +987,7 @@ exports[`props validation validate simple types 14`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1016,7 +1016,7 @@ exports[`props validation validate simple types 16`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1032,7 +1032,7 @@ exports[`props validation validate simple types 17`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1048,7 +1048,7 @@ exports[`props validation validate simple types 18`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1077,7 +1077,7 @@ exports[`props validation validate simple types 20`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1093,7 +1093,7 @@ exports[`props validation validate simple types 21`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1109,7 +1109,7 @@ exports[`props validation validate simple types 22`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1138,7 +1138,7 @@ exports[`props validation validate simple types 24`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1154,7 +1154,7 @@ exports[`props validation validate simple types, alternate form 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1170,7 +1170,7 @@ exports[`props validation validate simple types, alternate form 2`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1199,7 +1199,7 @@ exports[`props validation validate simple types, alternate form 4`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1215,7 +1215,7 @@ exports[`props validation validate simple types, alternate form 5`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1231,7 +1231,7 @@ exports[`props validation validate simple types, alternate form 6`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1260,7 +1260,7 @@ exports[`props validation validate simple types, alternate form 8`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1276,7 +1276,7 @@ exports[`props validation validate simple types, alternate form 9`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1292,7 +1292,7 @@ exports[`props validation validate simple types, alternate form 10`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1321,7 +1321,7 @@ exports[`props validation validate simple types, alternate form 12`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1337,7 +1337,7 @@ exports[`props validation validate simple types, alternate form 13`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1353,7 +1353,7 @@ exports[`props validation validate simple types, alternate form 14`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1382,7 +1382,7 @@ exports[`props validation validate simple types, alternate form 16`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1398,7 +1398,7 @@ exports[`props validation validate simple types, alternate form 17`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1414,7 +1414,7 @@ exports[`props validation validate simple types, alternate form 18`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1443,7 +1443,7 @@ exports[`props validation validate simple types, alternate form 20`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1459,7 +1459,7 @@ exports[`props validation validate simple types, alternate form 21`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1475,7 +1475,7 @@ exports[`props validation validate simple types, alternate form 22`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1504,7 +1504,7 @@ exports[`props validation validate simple types, alternate form 24`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1520,7 +1520,7 @@ exports[`props validation validation is only done in dev mode 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {}
     helpers.validateProps(\`SubComp\`, props1, ctx)
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1534,7 +1534,7 @@ exports[`props validation validation is only done in dev mode 2`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`SubComp\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`SubComp\`, {}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
diff --git a/tests/components/__snapshots__/reactivity.test.ts.snap b/tests/components/__snapshots__/reactivity.test.ts.snap
index 9da16602..cdc39d32 100644
--- a/tests/components/__snapshots__/reactivity.test.ts.snap
+++ b/tests/components/__snapshots__/reactivity.test.ts.snap
@@ -52,7 +52,7 @@ exports[`reactivity in lifecycle state changes in willUnmount do not trigger rer
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {val: ctx['state'].val}, key+\`__1\`,null, node, ctx);
     }
     return block1([], [b2]);
   }
diff --git a/tests/components/__snapshots__/refs.test.ts.snap b/tests/components/__snapshots__/refs.test.ts.snap
index 09ae5139..938b0752 100644
--- a/tests/components/__snapshots__/refs.test.ts.snap
+++ b/tests/components/__snapshots__/refs.test.ts.snap
@@ -57,7 +57,7 @@ exports[`refs refs are properly bound in slots 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].val;
     const ctx1 = capture(ctx);
-    let b3 = component(\`Dialog\`, {slots: {'footer': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'footer': {__render: slot1, __ctx: ctx1}}}, key+\`__1\`,null, node, ctx);
     return block1([txt1], [b3]);
   }
 }"
diff --git a/tests/components/__snapshots__/slots.test.ts.snap b/tests/components/__snapshots__/slots.test.ts.snap
index e4f114e9..6da7f0d1 100644
--- a/tests/components/__snapshots__/slots.test.ts.snap
+++ b/tests/components/__snapshots__/slots.test.ts.snap
@@ -8,7 +8,7 @@ exports[`slots can define a default content 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Dialog\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Dialog\`, {}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -53,7 +53,7 @@ exports[`slots can define and call slots 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    let b4 = component(\`Dialog\`, {slots: {'header': {__render: slot1, __ctx: ctx1}, 'footer': {__render: slot2, __ctx: ctx1}}}, key + \`__1\`, node, ctx);
+    let b4 = component(\`Dialog\`, {slots: {'header': {__render: slot1, __ctx: ctx1}, 'footer': {__render: slot2, __ctx: ctx1}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b4]);
   }
 }"
@@ -95,7 +95,7 @@ exports[`slots can define and call slots with params 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    let b4 = component(\`Dialog\`, {slots: {'header': {__render: slot1, __ctx: ctx1, param: ctx['var']}, 'footer': {__render: slot2, __ctx: ctx1, param: '5'}}}, key + \`__1\`, node, ctx);
+    let b4 = component(\`Dialog\`, {slots: {'header': {__render: slot1, __ctx: ctx1, param: ctx['var']}, 'footer': {__render: slot2, __ctx: ctx1, param: '5'}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b4]);
   }
 }"
@@ -130,12 +130,12 @@ exports[`slots can render node with t-ref and Component in same slot 1`] = `
     const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`div\`] = el;
     let b2 = block2([ref1]);
-    let b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     return multi([b2, b3]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
   }
 }"
 `;
@@ -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 component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -182,7 +182,7 @@ exports[`slots can use component in default-content of t-slot 2`] = `
   let { callSlot } = helpers;
   
   function defaultContent1(ctx, node, key = \\"\\") {
-    return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
+    return component(\`GrandChild\`, {}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
@@ -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 component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -253,7 +253,7 @@ exports[`slots content is the default slot (variation) 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    return component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -283,7 +283,7 @@ exports[`slots content is the default slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -318,7 +318,7 @@ exports[`slots default content is not rendered if named slot is provided 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    let b3 = component(\`Dialog\`, {slots: {'header': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'header': {__render: slot1, __ctx: ctx1}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -355,7 +355,7 @@ exports[`slots default content is not rendered if slot is provided 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -394,7 +394,7 @@ exports[`slots default slot next to named slot, with default content 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    let b3 = component(\`Dialog\`, {slots: {'footer': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'footer': {__render: slot1, __ctx: ctx1}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -434,7 +434,7 @@ exports[`slots default slot work with text nodes (variation) 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    return component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -463,7 +463,7 @@ exports[`slots default slot work with text nodes 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -507,7 +507,7 @@ exports[`slots dynamic t-slot call 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    let b6 = component(\`Toggler\`, {slots: {'slot1': {__render: slot1, __ctx: ctx1}, 'slot2': {__render: slot2, __ctx: ctx1}}}, key + \`__1\`, node, ctx);
+    let b6 = component(\`Toggler\`, {slots: {'slot1': {__render: slot1, __ctx: ctx1}, 'slot2': {__render: slot2, __ctx: ctx1}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b6]);
   }
 }"
@@ -553,7 +553,7 @@ exports[`slots dynamic t-slot call with default 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    let b6 = component(\`Toggler\`, {slots: {'slot1': {__render: slot1, __ctx: ctx1}, 'slot2': {__render: slot2, __ctx: ctx1}}}, key + \`__1\`, node, ctx);
+    let b6 = component(\`Toggler\`, {slots: {'slot1': {__render: slot1, __ctx: ctx1}, 'slot2': {__render: slot2, __ctx: ctx1}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b6]);
   }
 }"
@@ -589,7 +589,7 @@ exports[`slots fun: two calls to the same slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -616,7 +616,7 @@ exports[`slots missing slots are ignored 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Dialog\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Dialog\`, {}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -654,7 +654,7 @@ exports[`slots multiple roots are allowed in a default slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b5 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    let b5 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b5]);
   }
 }"
@@ -693,7 +693,7 @@ exports[`slots multiple roots are allowed in a named slot 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    let b5 = component(\`Dialog\`, {slots: {'content': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, node, ctx);
+    let b5 = component(\`Dialog\`, {slots: {'content': {__render: slot1, __ctx: ctx1}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b5]);
   }
 }"
@@ -721,16 +721,16 @@ exports[`slots multiple slots containing components 1`] = `
   let { capture } = helpers;
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`C\`, {val: 1}, key + \`__1\`, node, ctx);
+    return component(\`C\`, {val: 1}, key+\`__1\`,null, node, ctx);
   }
   
   function slot2(ctx, node, key = \\"\\") {
-    return component(\`C\`, {val: 2}, key + \`__2\`, node, ctx);
+    return component(\`C\`, {val: 2}, key+\`__2\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return component(\`B\`, {slots: {'s1': {__render: slot1, __ctx: ctx1}, 's2': {__render: slot2, __ctx: ctx1}}}, key + \`__3\`, node, ctx);
+    return component(\`B\`, {slots: {'s1': {__render: slot1, __ctx: ctx1}, 's2': {__render: slot2, __ctx: ctx1}}}, key+\`__3\`,null, node, ctx);
   }
 }"
 `;
@@ -782,7 +782,7 @@ exports[`slots named slot inside slot 1`] = `
   
   function slot2(ctx, node, key = \\"\\") {
     const ctx2 = capture(ctx);
-    return component(\`Child\`, {slots: {'brol': {__render: slot3, __ctx: ctx2}}}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {slots: {'brol': {__render: slot3, __ctx: ctx2}}}, key+\`__1\`,null, node, ctx);
   }
   
   function slot3(ctx, node, key = \\"\\") {
@@ -792,7 +792,7 @@ exports[`slots named slot inside slot 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    let b5 = component(\`Child\`, {slots: {'brol': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}}}, key + \`__2\`, node, ctx);
+    let b5 = component(\`Child\`, {slots: {'brol': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b5]);
   }
 }"
@@ -831,7 +831,7 @@ exports[`slots named slot inside slot, part 3 1`] = `
   
   function slot2(ctx, node, key = \\"\\") {
     const ctx2 = capture(ctx);
-    return component(\`Child\`, {slots: {'brol': {__render: slot3, __ctx: ctx2}}}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {slots: {'brol': {__render: slot3, __ctx: ctx2}}}, key+\`__1\`,null, node, ctx);
   }
   
   function slot3(ctx, node, key = \\"\\") {
@@ -841,7 +841,7 @@ exports[`slots named slot inside slot, part 3 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    let b5 = component(\`Child\`, {slots: {'brol': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}}}, key + \`__2\`, node, ctx);
+    let b5 = component(\`Child\`, {slots: {'brol': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b5]);
   }
 }"
@@ -871,7 +871,7 @@ exports[`slots named slots can define a default content 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Dialog\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Dialog\`, {}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -913,7 +913,7 @@ exports[`slots named slots inside slot, again 1`] = `
   
   function slot2(ctx, node, key = \\"\\") {
     const ctx2 = capture(ctx);
-    return component(\`Child\`, {slots: {'brol2': {__render: slot3, __ctx: ctx2}}}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {slots: {'brol2': {__render: slot3, __ctx: ctx2}}}, key+\`__1\`,null, node, ctx);
   }
   
   function slot3(ctx, node, key = \\"\\") {
@@ -923,7 +923,7 @@ exports[`slots named slots inside slot, again 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    let b5 = component(\`Child\`, {slots: {'brol1': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}}}, key + \`__2\`, node, ctx);
+    let b5 = component(\`Child\`, {slots: {'brol1': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b5]);
   }
 }"
@@ -962,15 +962,15 @@ exports[`slots nested slots in same template 1`] = `
   let block1 = createBlock(\`<span id=\\"parent\\"><block-child-0/></span>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`Child2\`, {slots: {'default': {__render: slot2, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    return component(\`Child2\`, {slots: {'default': {__render: slot2, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
   }
   
   function slot2(ctx, node, key = \\"\\") {
-    return component(\`Child3\`, {}, key + \`__1\`, node, ctx);
+    return component(\`Child3\`, {}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b4 = component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
+    let b4 = component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__3\`,null, node, ctx);
     return block1([], [b4]);
   }
 }"
@@ -1025,11 +1025,11 @@ exports[`slots nested slots: evaluation context and parented relationship 1`] =
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`Slot\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
+    return component(\`Slot\`, {val: ctx['state'].val}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
   }
 }"
 `;
@@ -1045,7 +1045,7 @@ exports[`slots nested slots: evaluation context and parented relationship 2`] =
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`GrandChild\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    return component(\`GrandChild\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -1085,7 +1085,7 @@ exports[`slots no named slot content => just no children 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Dialog\`, {}, key + \`__1\`, node, ctx);
+    return component(\`Dialog\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -1115,7 +1115,7 @@ exports[`slots simple default slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -1153,7 +1153,7 @@ exports[`slots simple default slot with params 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1, __scope: \\"slotScope\\"}}}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1, __scope: \\"slotScope\\"}}}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -1189,7 +1189,7 @@ exports[`slots simple default slot with params 3`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -1219,7 +1219,7 @@ exports[`slots simple default slot, variation 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -1251,7 +1251,7 @@ exports[`slots slot and (inline) t-call 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__2\`, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -1300,7 +1300,7 @@ exports[`slots slot and t-call 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__2\`, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -1346,7 +1346,7 @@ exports[`slots slot and t-esc 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -1375,13 +1375,13 @@ exports[`slots slot are properly rendered if inner props are changed 1`] = `
   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 + \`__1\`, node, ctx);
+    return component(\`SomeComponent\`, {val: ctx['state'].val}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['inc'], ctx];
     let txt1 = ctx['state'].val;
-    let b3 = component(\`GenericComponent\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    let b3 = component(\`GenericComponent\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     return block1([hdlr1, txt1], [b3]);
   }
 }"
@@ -1434,7 +1434,7 @@ exports[`slots slot content is bound to caller (variation) 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -1467,7 +1467,7 @@ exports[`slots slot content is bound to caller 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -1495,11 +1495,11 @@ exports[`slots slot preserves properly parented relationship 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
+    return component(\`GrandChild\`, {}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    let b3 = component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -1543,7 +1543,7 @@ exports[`slots slot preserves properly parented relationship, even through t-cal
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    let b3 = component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__2\`, node, ctx);
+    let b3 = component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -1555,7 +1555,7 @@ exports[`slots slot preserves properly parented relationship, even through t-cal
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
+    return component(\`GrandChild\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -1593,7 +1593,7 @@ exports[`slots slots and wrapper components 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Link\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    return component(\`Link\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -1619,7 +1619,7 @@ exports[`slots slots are properly bound to correct component 1`] = `
   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\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -1664,7 +1664,7 @@ exports[`slots slots are rendered with proper context 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].val;
     const ctx1 = capture(ctx);
-    let b3 = component(\`Dialog\`, {slots: {'footer': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'footer': {__render: slot1, __ctx: ctx1}}}, key+\`__1\`,null, node, ctx);
     return block1([txt1], [b3]);
   }
 }"
@@ -1707,7 +1707,7 @@ exports[`slots slots are rendered with proper context, part 2 1`] = `
       ctx[\`user\`] = v_block2[i1];
       let key1 = ctx['user'].id;
       const ctx1 = capture(ctx);
-      let b7 = component(\`Link\`, {to: '/user/'+ctx['user'].id,slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx);
+      let b7 = component(\`Link\`, {to: '/user/'+ctx['user'].id,slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__1__\${key1}\`,null, node, ctx);
       c_block2[i1] = withKey(block3([], [b7]), key1);
     }
     let b2 = list(c_block2);
@@ -1755,7 +1755,7 @@ exports[`slots slots are rendered with proper context, part 3 1`] = `
       let key1 = ctx['user'].id;
       setContextValue(ctx, \\"userdescr\\", 'User '+ctx['user'].name);
       const ctx1 = capture(ctx);
-      let b5 = component(\`Link\`, {to: '/user/'+ctx['user'].id,slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx);
+      let b5 = component(\`Link\`, {to: '/user/'+ctx['user'].id,slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__1__\${key1}\`,null, node, ctx);
       c_block2[i1] = withKey(block3([], [b5]), key1);
     }
     let b2 = list(c_block2);
@@ -1797,7 +1797,7 @@ exports[`slots slots are rendered with proper context, part 4 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"userdescr\\", 'User '+ctx['state'].user.name);
     const ctx1 = capture(ctx);
-    let b3 = component(\`Link\`, {to: '/user/'+ctx['state'].user.id,slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Link\`, {to: '/user/'+ctx['state'].user.id,slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -1838,7 +1838,7 @@ exports[`slots slots in slots, with vars 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"test\\", ctx['state'].name);
     const ctx1 = capture(ctx);
-    let b3 = component(\`A\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, node, ctx);
+    let b3 = component(\`A\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -1857,7 +1857,7 @@ exports[`slots slots in slots, with vars 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`B\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    let b3 = component(\`B\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -1898,7 +1898,7 @@ exports[`slots slots in t-foreach and re-rendering 1`] = `
       ctx[\`n_index\`] = i1;
       let key1 = ctx['n_index'];
       const ctx1 = capture(ctx);
-      c_block2[i1] = withKey(component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx), key1);
+      c_block2[i1] = withKey(component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__1__\${key1}\`,null, node, ctx), key1);
     }
     let b2 = list(c_block2);
     return block1([], [b2]);
@@ -1952,7 +1952,7 @@ exports[`slots slots in t-foreach in t-foreach 1`] = `
         ctx[\`node2\`] = v_block6[i2];
         let key2 = ctx['node2'].key;
         const ctx1 = capture(ctx);
-        c_block6[i2] = withKey(component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}__\${key2}\`, node, ctx), key2);
+        c_block6[i2] = withKey(component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__1__\${key1}__\${key2}\`,null, node, ctx), key2);
       }
       ctx = ctx.__proto__;
       let b6 = list(c_block6);
@@ -2003,7 +2003,7 @@ exports[`slots slots in t-foreach with t-set and re-rendering 1`] = `
       let key1 = ctx['n_index'];
       setContextValue(ctx, \\"dummy\\", ctx['n_index']);
       const ctx1 = capture(ctx);
-      c_block2[i1] = withKey(component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx), key1);
+      c_block2[i1] = withKey(component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__1__\${key1}\`,null, node, ctx), key1);
     }
     let b2 = list(c_block2);
     return block1([], [b2]);
@@ -2042,7 +2042,7 @@ exports[`slots t-debug on a t-set-slot (defining a slot) 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    let b3 = component(\`Dialog\`, {slots: {'content': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'content': {__render: slot1, __ctx: ctx1}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -2080,7 +2080,7 @@ exports[`slots t-set t-value in a slot 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -2141,7 +2141,7 @@ exports[`slots t-slot in recursive templates 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return component(\`Wrapper\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__2\`, node, ctx);
+    return component(\`Wrapper\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__2\`,null, node, ctx);
   }
 }"
 `;
@@ -2169,11 +2169,11 @@ exports[`slots t-slot nested within another slot 1`] = `
   let block1 = createBlock(\`<span id=\\"c1\\"><block-child-0/></span>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`Child3\`, {}, key + \`__1\`, node, ctx);
+    return component(\`Child3\`, {}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -2188,7 +2188,7 @@ exports[`slots t-slot nested within another slot 2`] = `
   let block1 = createBlock(\`<span id=\\"c2\\"><block-child-0/></span>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`Portal\`, {slots: {'default': {__render: slot2, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    return component(\`Portal\`, {slots: {'default': {__render: slot2, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
   }
   
   function slot2(ctx, node, key = \\"\\") {
@@ -2196,7 +2196,7 @@ exports[`slots t-slot nested within another slot 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b4 = component(\`Modal\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    let b4 = component(\`Modal\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b4]);
   }
 }"
@@ -2257,7 +2257,7 @@ exports[`slots t-slot scope context 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    return component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -2277,7 +2277,7 @@ exports[`slots t-slot scope context 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Wrapper\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    return component(\`Wrapper\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -2309,7 +2309,7 @@ exports[`slots t-slot within dynamic t-call 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    let b3 = component(\`Slotted\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__2\`, node, ctx);
+    let b3 = component(\`Slotted\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -2338,7 +2338,7 @@ exports[`slots t-slot within dynamic t-call 3`] = `
   let block1 = createBlock(\`<div class=\\"slot\\"><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -2365,11 +2365,11 @@ exports[`slots template can just return a slot 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {value: ctx['state'].value}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`SlotComponent\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    let b3 = component(\`SlotComponent\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
diff --git a/tests/components/__snapshots__/style_class.test.ts.snap b/tests/components/__snapshots__/style_class.test.ts.snap
index 38743fe1..71b018d2 100644
--- a/tests/components/__snapshots__/style_class.test.ts.snap
+++ b/tests/components/__snapshots__/style_class.test.ts.snap
@@ -6,7 +6,7 @@ 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);
+    return component(\`Child\`, {class: 'fromparent'}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -34,7 +34,7 @@ exports[`style and class handling can set class on sub component, as prop 1`] =
   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);
+    return component(\`Child\`, {class: 'some-class'}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -59,7 +59,7 @@ exports[`style and class handling can set class on sub sub 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);
+    return component(\`Child\`, {class: 'fromparent'}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -70,7 +70,7 @@ exports[`style and class handling can set class on sub sub component 2`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`ChildChild\`, {class: (ctx['props'].class||'')+' fromchild'}, key + \`__1\`, node, ctx);
+    return component(\`ChildChild\`, {class: (ctx['props'].class||'')+' fromchild'}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -95,7 +95,7 @@ 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;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'a  b'}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {class: 'a  b'}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -147,7 +147,7 @@ exports[`style and class handling class on sub component, which is switched to a
   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);
+    return component(\`Child\`, {class: 'someclass',child: ctx['state'].child}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -160,9 +160,9 @@ exports[`style and class handling class on sub component, which is switched to a
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     if (ctx['props'].child==='a') {
-      b2 = component(\`ChildA\`, {class: ctx['props'].class}, key + \`__1\`, node, ctx);
+      b2 = component(\`ChildA\`, {class: ctx['props'].class}, key+\`__1\`,null, node, ctx);
     } else {
-      b3 = component(\`ChildB\`, {class: ctx['props'].class}, key + \`__2\`, node, ctx);
+      b3 = component(\`ChildB\`, {class: ctx['props'].class}, key+\`__2\`,null, node, ctx);
     }
     return multi([b2, b3]);
   }
@@ -205,7 +205,7 @@ exports[`style and class handling class with extra whitespaces (variation) 1`] =
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {class: 'a  b c   d'}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {class: 'a  b c   d'}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -231,7 +231,7 @@ exports[`style and class handling class with extra whitespaces 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'a  b c   d'}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {class: 'a  b c   d'}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -256,7 +256,7 @@ exports[`style and class handling component class and parent class combine toget
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: 'from parent'}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {class: 'from parent'}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -310,7 +310,7 @@ exports[`style and class handling empty class attribute is not added on widget r
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {class: undefined}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {class: undefined}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -336,7 +336,7 @@ exports[`style and class handling error in subcomponent with class 1`] = `
   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: 'a'}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -362,7 +362,7 @@ exports[`style and class handling no class is set is child ignores it 1`] = `
   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\`, {class: 'hey'}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -386,7 +386,7 @@ exports[`style and class handling no class is set is parent does not give it as
   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\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -411,7 +411,7 @@ exports[`style and class handling style is properly added on widget root el 1`]
   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);
+    return component(\`Child\`, {style: 'font-weight: bold;'}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -438,7 +438,7 @@ exports[`style and class handling t-att-class is properly added/removed on widge
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {class: {b:ctx['state'].b}}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {class: {b:ctx['state'].b}}, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -464,7 +464,7 @@ exports[`style and class handling t-att-class is properly added/removed on widge
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {class: {a:true,b:ctx['state'].b}}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {class: {a:true,b:ctx['state'].b}}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
diff --git a/tests/components/__snapshots__/t_call.test.ts.snap b/tests/components/__snapshots__/t_call.test.ts.snap
index 5089c96b..112ddc11 100644
--- a/tests/components/__snapshots__/t_call.test.ts.snap
+++ b/tests/components/__snapshots__/t_call.test.ts.snap
@@ -48,7 +48,7 @@ exports[`t-call dynamic t-call: key is propagated 1`] = `
   let { call } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     const template1 = (ctx['sub']);
     let b3 = call(this, template1, ctx, node, key + \`__2\`);
     return multi([b2, b3]);
@@ -76,7 +76,7 @@ exports[`t-call dynamic t-call: key is propagated 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 component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -196,7 +196,7 @@ exports[`t-call parent is set within t-call 2`] = `
   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\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -233,7 +233,7 @@ exports[`t-call parent is set within t-call with no parentNode 2`] = `
   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\`, {}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -280,7 +280,7 @@ exports[`t-call sub components in two t-calls 2`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {val: ctx['state'].val}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -332,7 +332,7 @@ exports[`t-call t-call in t-foreach and children component 2`] = `
   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);
+    return component(\`Child\`, {val: ctx['val']}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
diff --git a/tests/components/__snapshots__/t_component.test.ts.snap b/tests/components/__snapshots__/t_component.test.ts.snap
index a1cc1155..4e49b63d 100644
--- a/tests/components/__snapshots__/t_component.test.ts.snap
+++ b/tests/components/__snapshots__/t_component.test.ts.snap
@@ -9,7 +9,7 @@ exports[`t-component can switch between dynamic components without the need for
   
   return function template(ctx, node, key = \\"\\") {
     let Comp1 = ctx['constructor'].components[ctx['state'].child];
-    let b2 = toggler(Comp1, component(Comp1, {}, key + \`__1\`, node, ctx));
+    let b2 = toggler(Comp1, component(Comp1, {}, key+\`__1\`,null, node, ctx));
     return block1([], [b2]);
   }
 }"
@@ -49,7 +49,7 @@ exports[`t-component can use dynamic components (the class) if given (with diffe
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['state'].child;
     let Comp1 = ctx['myComponent'];
-    return toggler(tKey_1, toggler(Comp1, component(Comp1, {}, tKey_1 + key + \`__1\`, node, ctx)));
+    return toggler(tKey_1, toggler(Comp1, component(Comp1, {}, key+\`__1\`,tKey_1, node, ctx)));
   }
 }"
 `;
@@ -88,7 +88,7 @@ exports[`t-component can use dynamic components (the class) if given 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['state'].child;
     let Comp1 = ctx['myComponent'];
-    return toggler(tKey_1, toggler(Comp1, component(Comp1, {}, tKey_1 + key + \`__1\`, node, ctx)));
+    return toggler(tKey_1, toggler(Comp1, component(Comp1, {}, key+\`__1\`,tKey_1, node, ctx)));
   }
 }"
 `;
@@ -128,7 +128,7 @@ exports[`t-component modifying a sub widget 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let Comp1 = ctx['Counter'];
-    let b2 = toggler(Comp1, component(Comp1, {}, key + \`__1\`, node, ctx));
+    let b2 = toggler(Comp1, component(Comp1, {}, key+\`__1\`,null, node, ctx));
     return block1([], [b2]);
   }
 }"
@@ -157,7 +157,7 @@ exports[`t-component switching dynamic component 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let Comp1 = ctx['Child'];
-    return toggler(Comp1, component(Comp1, {}, key + \`__1\`, node, ctx));
+    return toggler(Comp1, component(Comp1, {}, key+\`__1\`,null, node, ctx));
   }
 }"
 `;
@@ -193,7 +193,7 @@ exports[`t-component t-component works in simple case 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let Comp1 = ctx['Child'];
-    return toggler(Comp1, component(Comp1, {}, key + \`__1\`, node, ctx));
+    return toggler(Comp1, component(Comp1, {}, key+\`__1\`,null, node, ctx));
   }
 }"
 `;
diff --git a/tests/components/__snapshots__/t_foreach.test.ts.snap b/tests/components/__snapshots__/t_foreach.test.ts.snap
index b97a1d5d..1f9626ad 100644
--- a/tests/components/__snapshots__/t_foreach.test.ts.snap
+++ b/tests/components/__snapshots__/t_foreach.test.ts.snap
@@ -15,7 +15,7 @@ exports[`list of components components in a node in a t-foreach  1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`item\`] = v_block2[i1];
       let key1 = 'li_'+ctx['item'];
-      let b4 = component(\`Child\`, {item: ctx['item']}, key + \`__1__\${key1}\`, node, ctx);
+      let b4 = component(\`Child\`, {item: ctx['item']}, key+\`__1__\${key1}\`,null, node, ctx);
       c_block2[i1] = withKey(block3([], [b4]), key1);
     }
     let b2 = list(c_block2);
@@ -55,7 +55,7 @@ exports[`list of components crash on duplicate key in dev mode 1`] = `
       keys1.add(key1);
       const props1 = {}
       helpers.validateProps(\`Child\`, props1, ctx)
-      c_block1[i1] = withKey(component(\`Child\`, props1, key + \`__1__\${key1}\`, node, ctx), key1);
+      c_block1[i1] = withKey(component(\`Child\`, props1, key+\`__1__\${key1}\`,null, node, ctx), key1);
     }
     return list(c_block1);
   }
@@ -88,7 +88,7 @@ exports[`list of components list of sub components inside other nodes 1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`blip\`] = v_block2[i1];
       let key1 = ctx['blip'].id;
-      let b4 = component(\`SubComponent\`, {}, key + \`__1__\${key1}\`, node, ctx);
+      let b4 = component(\`SubComponent\`, {}, key+\`__1__\${key1}\`,null, node, ctx);
       c_block2[i1] = withKey(block3([], [b4]), key1);
     }
     let b2 = list(c_block2);
@@ -131,7 +131,7 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach
         ctx[\`blip\`] = v_block3[i2];
         ctx[\`blip_index\`] = i2;
         let key2 = ctx['blip_index'];
-        c_block3[i2] = withKey(component(\`Child\`, {blip: ctx['blip']}, key + \`__1__\${key1}__\${key2}\`, node, ctx), key2);
+        c_block3[i2] = withKey(component(\`Child\`, {blip: ctx['blip']}, key+\`__1__\${key1}__\${key2}\`,null, node, ctx), key2);
       }
       ctx = ctx.__proto__;
       c_block2[i1] = withKey(list(c_block3), key1);
@@ -177,7 +177,7 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach,
       for (let i2 = 0; i2 < l_block4; i2++) {
         ctx[\`col\`] = v_block4[i2];
         let key2 = ctx['col'];
-        let b6 = component(\`Child\`, {row: ctx['row'],col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, ctx);
+        let b6 = component(\`Child\`, {row: ctx['row'],col: ctx['col']}, key+\`__1__\${key1}__\${key2}\`,null, node, ctx);
         c_block4[i2] = withKey(block5([], [b6]), key2);
       }
       ctx = ctx.__proto__;
@@ -216,7 +216,7 @@ exports[`list of components simple list 1`] = `
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`elem\`] = v_block1[i1];
       let key1 = ctx['elem'].id;
-      c_block1[i1] = withKey(component(\`Child\`, {value: ctx['elem'].value}, key + \`__1__\${key1}\`, node, ctx), key1);
+      c_block1[i1] = withKey(component(\`Child\`, {value: ctx['elem'].value}, key+\`__1__\${key1}\`,null, node, ctx), key1);
     }
     return list(c_block1);
   }
@@ -251,7 +251,7 @@ exports[`list of components sub components rendered in a loop 1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`number\`] = v_block2[i1];
       let key1 = ctx['number'];
-      c_block2[i1] = withKey(component(\`Child\`, {n: ctx['number']}, key + \`__1__\${key1}\`, node, ctx), key1);
+      c_block2[i1] = withKey(component(\`Child\`, {n: ctx['number']}, key+\`__1__\${key1}\`,null, node, ctx), key1);
     }
     let b2 = list(c_block2);
     return block1([], [b2]);
@@ -287,7 +287,7 @@ exports[`list of components sub components with some state rendered in a loop 1`
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`number\`] = v_block2[i1];
       let key1 = ctx['number'];
-      c_block2[i1] = withKey(component(\`Child\`, {}, key + \`__1__\${key1}\`, node, ctx), key1);
+      c_block2[i1] = withKey(component(\`Child\`, {}, key+\`__1__\${key1}\`,null, node, ctx), key1);
     }
     let b2 = list(c_block2);
     return block1([], [b2]);
@@ -323,7 +323,7 @@ exports[`list of components switch component position 1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`c\`] = v_block2[i1];
       let key1 = ctx['c'];
-      c_block2[i1] = withKey(component(\`Child\`, {key: ctx['c']}, key + \`__1__\${key1}\`, node, ctx), key1);
+      c_block2[i1] = withKey(component(\`Child\`, {key: ctx['c']}, key+\`__1__\${key1}\`,null, node, ctx), key1);
     }
     let b2 = list(c_block2);
     return block1([], [b2]);
@@ -360,7 +360,7 @@ exports[`list of components t-foreach with t-component, and update 1`] = `
       ctx[\`n\`] = v_block2[i1];
       ctx[\`n_index\`] = i1;
       let key1 = ctx['n_index'];
-      c_block2[i1] = withKey(component(\`Child\`, {val: ctx['n_index']}, key + \`__1__\${key1}\`, node, ctx), key1);
+      c_block2[i1] = withKey(component(\`Child\`, {val: ctx['n_index']}, key+\`__1__\${key1}\`,null, node, ctx), key1);
     }
     let b2 = list(c_block2);
     return block1([], [b2]);
diff --git a/tests/components/__snapshots__/t_key.test.ts.snap b/tests/components/__snapshots__/t_key.test.ts.snap
index 990a85cf..dc2e57f3 100644
--- a/tests/components/__snapshots__/t_key.test.ts.snap
+++ b/tests/components/__snapshots__/t_key.test.ts.snap
@@ -15,7 +15,7 @@ exports[`t-key t-foreach with t-key switch component position 1`] = `
       ctx[\`c\`] = v_block2[i1];
       let key1 = ctx['c'];
       const tKey_1 = ctx['key1'];
-      c_block2[i1] = withKey(component(\`Child\`, {key: ctx['c']+ctx['key1']}, tKey_1 + key + \`__1__\${key1}\`, node, ctx), tKey_1 + key1);
+      c_block2[i1] = withKey(component(\`Child\`, {key: ctx['c']+ctx['key1']}, key+\`__1__\${key1}\`,tKey_1, node, ctx), tKey_1 + key1);
     }
     let b2 = list(c_block2);
     return block1([], [b2]);
@@ -44,7 +44,7 @@ exports[`t-key t-key on Component 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
-    return toggler(tKey_1, component(\`Child\`, {key: ctx['key']}, tKey_1 + key + \`__1\`, node, ctx));
+    return toggler(tKey_1, component(\`Child\`, {key: ctx['key']}, key+\`__1\`,tKey_1, node, ctx));
   }
 }"
 `;
@@ -72,7 +72,7 @@ exports[`t-key t-key on Component as a function 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
-    let b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key']}, tKey_1 + key + \`__1\`, node, ctx));
+    let b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key']}, key+\`__1\`,tKey_1, node, ctx));
     return block1([], [b2]);
   }
 }"
@@ -101,9 +101,9 @@ exports[`t-key t-key on multiple Components 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key1'];
-    let b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key1']}, tKey_1 + key + \`__1\`, node, ctx));
+    let b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key1']}, key+\`__1\`,tKey_1, node, ctx));
     const tKey_2 = ctx['key2'];
-    let b3 = toggler(tKey_2, component(\`Child\`, {key: ctx['key2']}, tKey_2 + key + \`__2\`, node, ctx));
+    let b3 = toggler(tKey_2, component(\`Child\`, {key: ctx['key2']}, key+\`__2\`,tKey_2, node, ctx));
     return block1([], [b2, b3]);
   }
 }"
@@ -157,7 +157,7 @@ exports[`t-key t-key on multiple Components with t-call 1 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
-    return toggler(tKey_1, component(\`Child\`, {key: ctx['key']}, tKey_1 + key + \`__1\`, node, ctx));
+    return toggler(tKey_1, component(\`Child\`, {key: ctx['key']}, key+\`__1\`,tKey_1, node, ctx));
   }
 }"
 `;
@@ -199,9 +199,9 @@ exports[`t-key t-key on multiple Components with t-call 2 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key1'];
-    let b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key1']}, tKey_1 + key + \`__1\`, node, ctx));
+    let b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key1']}, key+\`__1\`,tKey_1, node, ctx));
     const tKey_2 = ctx['key2'];
-    let b3 = toggler(tKey_2, component(\`Child\`, {key: ctx['key2']}, tKey_2 + key + \`__2\`, node, ctx));
+    let b3 = toggler(tKey_2, component(\`Child\`, {key: ctx['key2']}, key+\`__2\`,tKey_2, node, ctx));
     return multi([b2, b3]);
   }
 }"
diff --git a/tests/components/__snapshots__/t_on.test.ts.snap b/tests/components/__snapshots__/t_on.test.ts.snap
index e3a33a24..751cefcb 100644
--- a/tests/components/__snapshots__/t_on.test.ts.snap
+++ b/tests/components/__snapshots__/t_on.test.ts.snap
@@ -131,7 +131,7 @@ exports[`t-on t-on on destroyed components 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      b2 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     }
     return block1([], [b2]);
   }
diff --git a/tests/components/__snapshots__/t_props.test.ts.snap b/tests/components/__snapshots__/t_props.test.ts.snap
index 2d8397fa..066b1901 100644
--- a/tests/components/__snapshots__/t_props.test.ts.snap
+++ b/tests/components/__snapshots__/t_props.test.ts.snap
@@ -8,7 +8,7 @@ exports[`t-props basic use 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, ctx['some'].obj, key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, ctx['some'].obj, key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -36,7 +36,7 @@ exports[`t-props t-props and other props 1`] = `
   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);
+    let b2 = component(\`Comp\`, Object.assign({}, ctx['state1'], {a: ctx['a']}), key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -65,7 +65,7 @@ exports[`t-props t-props only 1`] = `
   let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Comp\`, ctx['state'], key + \`__1\`, node, ctx);
+    let b2 = component(\`Comp\`, ctx['state'], key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -93,7 +93,7 @@ exports[`t-props t-props with props 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, Object.assign({}, ctx['props'], {a: 1,b: 2}), key + \`__1\`, node, ctx);
+    let b2 = component(\`Child\`, Object.assign({}, ctx['props'], {a: 1,b: 2}), key+\`__1\`,null, node, ctx);
     return block1([], [b2]);
   }
 }"
diff --git a/tests/components/__snapshots__/t_set.test.ts.snap b/tests/components/__snapshots__/t_set.test.ts.snap
index 7e9c7128..0a63c59e 100644
--- a/tests/components/__snapshots__/t_set.test.ts.snap
+++ b/tests/components/__snapshots__/t_set.test.ts.snap
@@ -21,7 +21,7 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 1`] = `
     setContextValue(ctx, \\"iter\\", 'source');
     let txt1 = ctx['iter'];
     const ctx1 = capture(ctx);
-    let b2 = component(\`Childcomp\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Childcomp\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__1\`,null, node, ctx);
     let txt2 = ctx['iter'];
     return block1([txt1, txt2], [b2]);
   }
@@ -63,12 +63,12 @@ exports[`t-set slots with a t-set with a component in body 1`] = `
   }
   
   function value1(ctx, node, key = \\"\\") {
-    return component(\`C\`, {}, key + \`__1\`, node, ctx);
+    return component(\`C\`, {}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__2\`, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__2\`,null, node, ctx);
   }
 }"
 `;
@@ -116,14 +116,14 @@ exports[`t-set slots with an t-set with a component in body 1`] = `
   }
   
   function value1(ctx, node, key = \\"\\") {
-    let b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
     let b4 = block4();
     return multi([b3, b4]);
   }
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return component(\`Blorg\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__2\`, node, ctx);
+    return component(\`Blorg\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__2\`,null, node, ctx);
   }
 }"
 `;
@@ -167,12 +167,12 @@ exports[`t-set slots with an unused t-set with a component in body 1`] = `
   }
   
   function value1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__2\`, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__2\`,null, node, ctx);
   }
 }"
 `;
@@ -267,7 +267,7 @@ exports[`t-set t-set not altered by child comp 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"iter\\", 'source');
     let txt1 = ctx['iter'];
-    let b2 = component(\`Childcomp\`, {}, key + \`__1\`, node, ctx);
+    let b2 = component(\`Childcomp\`, {}, key+\`__1\`,null, node, ctx);
     let txt2 = ctx['iter'];
     return block1([txt1, txt2], [b2]);
   }
@@ -328,7 +328,7 @@ exports[`t-set t-set with a component in body 1`] = `
   let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
   
   function value1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
diff --git a/tests/components/concurrency.test.ts b/tests/components/concurrency.test.ts
index bdb78b0d..fe2d1527 100644
--- a/tests/components/concurrency.test.ts
+++ b/tests/components/concurrency.test.ts
@@ -2907,6 +2907,64 @@ test("two sequential renderings before an animation frame", async () => {
   // we check here that the willPatch and patched hooks are called only once
   expect(["Parent:willPatch", "Child:willPatch", "Child:patched", "Parent:patched"]).toBeLogged();
 });
+
+test("t-key on dynamic async component (toggler is never patched)", async () => {
+  let def: any;
+  class Child extends Component {
+    static template = xml`<div t-esc="props.key" />`;
+    setup() {
+      onWillStart(() => def);
+      useLogLifecycle(this.props.key);
+    }
+  }
+
+  class Parent extends Component {
+    key = 1;
+    myComp = Child;
+    static template = xml`<t t-component="myComp" t-key="key" key="key" />`;
+  }
+
+  const parent = await mount(Parent, fixture);
+  expect(fixture.innerHTML).toBe("<div>1</div>");
+
+  def = makeDeferred();
+  parent.key = 2;
+  parent.render();
+
+  await nextTick();
+  expect([
+    "Child (1):setup",
+    "Child (1):willStart",
+    "Child (1):willRender",
+    "Child (1):rendered",
+    "Child (1):mounted",
+    "Child (2):setup",
+    "Child (2):willStart",
+  ]).toBeLogged();
+  expect(fixture.innerHTML).toBe("<div>1</div>");
+  parent.key = 3;
+  parent.render();
+
+  const prevDef = def;
+  def = undefined;
+
+  parent.key = 3;
+  parent.render();
+  prevDef.resolve();
+  await nextTick();
+
+  expect(fixture.innerHTML).toBe("<div>3</div>");
+  expect([
+    "Child (2):willDestroy",
+    "Child (3):setup",
+    "Child (3):willStart",
+    "Child (3):willRender",
+    "Child (3):rendered",
+    "Child (1):willUnmount",
+    "Child (1):willDestroy",
+    "Child (3):mounted",
+  ]).toBeLogged();
+});
 //   test.skip("components with shouldUpdate=false", async () => {
 //     const state = { p: 1, cc: 10 };
 
diff --git a/tests/misc/__snapshots__/memo.test.ts.snap b/tests/misc/__snapshots__/memo.test.ts.snap
index a2c74175..5ceaf5bf 100644
--- a/tests/misc/__snapshots__/memo.test.ts.snap
+++ b/tests/misc/__snapshots__/memo.test.ts.snap
@@ -16,7 +16,7 @@ exports[`Memo if no prop change, prevent renderings from above  1`] = `
     let b2 = text(ctx['state'].a);
     let b3 = text(ctx['state'].b);
     let b4 = text(ctx['state'].c);
-    let b9 = component(\`Memo\`, {a: ctx['state'].a,b: ctx['state'].b,slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    let b9 = component(\`Memo\`, {a: ctx['state'].a,b: ctx['state'].b,slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return multi([b2, b3, b4, b9]);
   }
 }"
@@ -28,12 +28,12 @@ exports[`Memo if no props, prevent renderings from above  1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {value: ctx['state'].value}, key + \`__2\`, node, ctx);
+    return component(\`Child\`, {value: ctx['state'].value}, key+\`__2\`,null, 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: slot1, __ctx: ctx}}}, key + \`__3\`, node, ctx);
+    let b2 = component(\`Child\`, {value: ctx['state'].value}, key+\`__1\`,null, node, ctx);
+    let b4 = component(\`Memo\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__3\`,null, node, ctx);
     return multi([b2, b4]);
   }
 }"
@@ -61,7 +61,7 @@ exports[`Memo if no props, prevent renderings from above (work with simple html)
   
   return function template(ctx, node, key = \\"\\") {
     let b2 = text(ctx['state'].value);
-    let b4 = component(\`Memo\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    let b4 = component(\`Memo\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return multi([b2, b4]);
   }
 }"
diff --git a/tests/misc/__snapshots__/portal.test.ts.snap b/tests/misc/__snapshots__/portal.test.ts.snap
index c5b09eee..5ee24af6 100644
--- a/tests/misc/__snapshots__/portal.test.ts.snap
+++ b/tests/misc/__snapshots__/portal.test.ts.snap
@@ -8,11 +8,11 @@ exports[`Portal Portal composed with t-slot 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`Child2\`, {customHandler: ctx['_handled']}, key + \`__1\`, node, ctx);
+    return component(\`Child2\`, {customHandler: ctx['_handled']}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    let b3 = component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -29,7 +29,7 @@ exports[`Portal Portal composed with t-slot 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    return component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -61,7 +61,7 @@ exports[`Portal basic use of portal 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -82,7 +82,7 @@ exports[`Portal basic use of portal in dev mode 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}
     helpers.validateProps(\`Portal\`, props1, ctx)
-    let b3 = component(\`Portal\`, props1, key + \`__1\`, node, ctx);
+    let b3 = component(\`Portal\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -96,14 +96,14 @@ exports[`Portal conditional use of Portal (with sub Component) 1`] = `
   let block2 = createBlock(\`<span>1</span>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {val: ctx['state'].val}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b4;
     b2 = block2();
     if (ctx['state'].hasPortal) {
-      b4 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+      b4 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     }
     return multi([b2, b4]);
   }
@@ -140,7 +140,7 @@ exports[`Portal conditional use of Portal 1`] = `
     let b2,b4;
     b2 = block2();
     if (ctx['state'].hasPortal) {
-      b4 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+      b4 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     }
     return multi([b2, b4]);
   }
@@ -155,13 +155,13 @@ exports[`Portal lifecycle hooks of portal sub component are properly called 1`]
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {val: ctx['state'].val}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
     let b3;
     if (ctx['state'].hasChild) {
-      b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+      b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     }
     return block1([], [b3]);
   }
@@ -200,7 +200,7 @@ exports[`Portal portal could have dynamically no content 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b4 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    let b4 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b4]);
   }
 }"
@@ -214,11 +214,11 @@ exports[`Portal portal destroys on crash 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {error: ctx['state'].error}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {error: ctx['state'].error}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -246,11 +246,11 @@ exports[`Portal portal with child and props 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {val: ctx['state'].val}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -291,7 +291,7 @@ exports[`Portal portal with dynamic body 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b5 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    let b5 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b5]);
   }
 }"
@@ -313,7 +313,7 @@ exports[`Portal portal with many children 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b5 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    let b5 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b5]);
   }
 }"
@@ -335,7 +335,7 @@ exports[`Portal portal with no content 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b4 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    let b4 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b4]);
   }
 }"
@@ -353,7 +353,7 @@ exports[`Portal portal with only text as content 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -372,7 +372,7 @@ exports[`Portal portal with target not in dom 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Portal\`, {target: '#does-not-exist',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Portal\`, {target: '#does-not-exist',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -386,11 +386,11 @@ exports[`Portal portal's parent's env is not polluted 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -422,7 +422,7 @@ exports[`Portal with target in template (after portal) 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Portal\`, {target: '#local-target',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Portal\`, {target: '#local-target',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -441,7 +441,7 @@ exports[`Portal with target in template (before portal) 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Portal\`, {target: '#local-target',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Portal\`, {target: '#local-target',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -462,7 +462,7 @@ exports[`Portal: Props validation target is mandatory 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {slots: {'default': {__render: slot1, __ctx: ctx}}}
     helpers.validateProps(\`Portal\`, props1, ctx)
-    let b3 = component(\`Portal\`, props1, key + \`__1\`, node, ctx);
+    let b3 = component(\`Portal\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -483,7 +483,7 @@ exports[`Portal: Props validation target is not list 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {target: ['body'],slots: {'default': {__render: slot1, __ctx: ctx}}}
     helpers.validateProps(\`Portal\`, props1, ctx)
-    let b3 = component(\`Portal\`, props1, key + \`__1\`, node, ctx);
+    let b3 = component(\`Portal\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -497,11 +497,11 @@ exports[`Portal: UI/UX focus is kept across re-renders 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
+    return component(\`Child\`, {val: ctx['state'].val}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"