[FIX] compiler, component: handle change of t-key before patch

Have a dynamic children with a t-key. This child has a delayed willStart.
Change the key during a rendering.

Before this commit there was a leak: a component corresponding to an old key had been created, xwithout being destroyed.

After this commit, the outdated component is destroyed.

package.json

@@ -16,7 +16,7 @@
     "build:bundle": "rollup -c",
     "build": "npm run build:bundle",
     "test": "jest",
-    "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --watch --testTimeout=5000000",
+    "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --watch",
     "test:watch": "jest --watch",
     "playground:serve": "python3 tools/server.py || python tools/server.py",
     "playground": "npm run build && npm run playground:serve",

src/app/template_helpers.ts

@@ -2,7 +2,6 @@ import { BDom, multi, text, toggler } from "../blockdom";
 import { validateProps } from "../component/props_validation";
 import { Markup } from "../utils";
 import { html } from "../blockdom/index";
-import { VPortal } from "../portal";
 
 /**
  * This file contains utility functions that will be injected in each template,
@@ -13,17 +12,6 @@ function withDefault(value: any, defaultValue: any): any {
   return value === undefined || value === null || value === false ? defaultValue : value;
 }
 
-function callPortal(
-  ctx: any,
-  parent: any,
-  key: string,
-  target: string,
-  content: (ctx: any, node: any, key: string) => BDom
-): BDom {
-  const portal = new VPortal(target, content(ctx, parent, key), ctx.__owl__) as any;
-  return portal;
-}
-
 function callSlot(
   ctx: any,
   parent: any,
@@ -198,7 +186,6 @@ export const UTILS = {
   zero: Symbol("zero"),
   isBoundary,
   callSlot,
-  callPortal,
   capture,
   withKey,
   prepareList,

src/blockdom/block_compiler.ts

@@ -47,7 +47,7 @@ const cache: { [key: string]: BlockType } = {};
  * @param str
  * @returns a new block type, that can build concrete blocks
  */
-export function createBlock(str: string, deepRemove: boolean = false): BlockType {
+export function createBlock(str: string): BlockType {
   if (str in cache) {
     return cache[str];
   }
@@ -67,7 +67,7 @@ export function createBlock(str: string, deepRemove: boolean = false): BlockType
 
   // step 3: build the final block class
   const template = tree.el as HTMLElement;
-  const Block = buildBlock(template, context, deepRemove);
+  const Block = buildBlock(template, context);
   cache[str] = Block;
   return Block;
 }
@@ -422,7 +422,7 @@ function updateCtx(ctx: BlockCtx, tree: IntermediateTree) {
 // building the concrete block class
 // -----------------------------------------------------------------------------
 
-function buildBlock(template: HTMLElement, ctx: BlockCtx, deepRemove: boolean): BlockType {
+function buildBlock(template: HTMLElement, ctx: BlockCtx): BlockType {
   let B = createBlockClass(template, ctx);
 
   if (ctx.cbRefs.length) {
@@ -447,14 +447,6 @@ function buildBlock(template: HTMLElement, ctx: BlockCtx, deepRemove: boolean):
       }
     };
     B.prototype.beforeRemove = VMulti.prototype.beforeRemove;
-    if (deepRemove) {
-      const blockRemove = B.prototype.remove;
-      const vMultiRemove = VMulti.prototype.remove;
-      B.prototype.remove = function () {
-        blockRemove.call(this);
-        vMultiRemove.call(this);
-      };
-    }
     return (data?: any[], children: (VNode | undefined)[] = []) => new B(data, children);
   }
 
@@ -498,7 +490,6 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
     beforeRemove() {}
 
     remove() {
-      console.log('ddd')
       elementRemove.call(this.el);
     }
 

src/blockdom/list.ts

@@ -17,11 +17,9 @@ class VList {
   anchor: Node | undefined;
   parentEl?: HTMLElement | undefined;
   isOnlyChild?: boolean | undefined;
-  deepRemove: boolean;
 
-  constructor(children: VNode[], deepRemove: boolean) {
+  constructor(children: VNode[]) {
     this.children = children;
-    this.deepRemove = deepRemove;
   }
 
   mount(parent: HTMLElement, afterNode: Node | null) {
@@ -77,7 +75,7 @@ class VList {
     const parent = this.parentEl!;
 
     // fast path: no new child => only remove
-    if (ch2.length === 0 && isOnlyChild && !this.deepRemove) {
+    if (ch2.length === 0 && isOnlyChild) {
       if (withBeforeRemove) {
         for (let i = 0, l = ch1.length; i < l; i++) {
           beforeRemove.call(ch1[i]);
@@ -100,6 +98,7 @@ class VList {
     let endVn2 = ch2[endIdx2];
 
     let mapping: any = undefined;
+    // let noFullRemove = this.hasNoComponent;
 
     while (startIdx1 <= endIdx1 && startIdx2 <= endIdx2) {
       // -------------------------------------------------------------------
@@ -203,7 +202,7 @@ class VList {
 
   remove() {
     const { parentEl, anchor } = this;
-    if (this.isOnlyChild && !this.deepRemove) {
+    if (this.isOnlyChild) {
       nodeSetTextContent.call(parentEl, "");
     } else {
       const children = this.children;
@@ -228,8 +227,8 @@ class VList {
   }
 }
 
-export function list(children: VNode[], deepRemove = false): VNode<VList> {
-  return new VList(children, deepRemove);
+export function list(children: VNode[]): VNode<VList> {
+  return new VList(children);
 }
 
 function createMapping(ch1: any[], startIdx1: number, endIdx2: number): { [key: string]: any } {

src/blockdom/multi.ts

@@ -15,11 +15,9 @@ export class VMulti {
   anchors?: Node[] | undefined;
   parentEl?: HTMLElement | undefined;
   isOnlyChild?: boolean | undefined;
-  deepRemove: boolean;
 
-  constructor(children: (VNode | undefined)[], deepRemove: boolean) {
+  constructor(children: (VNode | undefined)[]) {
     this.children = children;
-    this.deepRemove = deepRemove;
   }
 
   mount(parent: HTMLElement, afterNode: Node | null) {
@@ -105,7 +103,7 @@ export class VMulti {
 
   remove() {
     const parentEl = this.parentEl;
-    if (this.isOnlyChild && !this.deepRemove) {
+    if (this.isOnlyChild) {
       nodeSetTextContent.call(parentEl, "");
     } else {
       const children = this.children;
@@ -131,6 +129,6 @@ export class VMulti {
   }
 }
 
-export function multi(children: (VNode | undefined)[], deepRemove = false): VNode<VMulti> {
-  return new VMulti(children, deepRemove);
+export function multi(children: (VNode | undefined)[]): VNode<VMulti> {
+  return new VMulti(children);
 }

src/compiler/code_generator.ts

@@ -19,7 +19,6 @@ import {
   ASTTSet,
   ASTTranslation,
   ASTType,
-  ASTTPortal,
 } from "./parser";
 
 type BlockType = "block" | "text" | "multi" | "list" | "html" | "comment";
@@ -65,15 +64,13 @@ class BlockDescription {
   type: BlockType;
   parentVar: string = "";
   id: number;
-  deepRemove: boolean;
 
-  constructor(target: CodeTarget, type: BlockType, deepRemove: boolean = false) {
+  constructor(target: CodeTarget, type: BlockType) {
     this.id = BlockDescription.nextBlockId++;
     this.varName = "b" + this.id;
     this.blockName = "block" + this.id;
     this.target = target;
     this.type = type;
-    this.deepRemove = deepRemove;
   }
 
   insertData(str: string, prefix: string = "d"): number {
@@ -102,7 +99,7 @@ class BlockDescription {
       }
       return `${this.blockName}(${params})`;
     } else if (this.type === "list") {
-      return `list(c_block${this.id}${this.deepRemove ? ", true" : ""})`;
+      return `list(c_block${this.id})`;
     }
     return expr;
   }
@@ -253,8 +250,6 @@ export class CodeGenerator {
       mainCode.push(`const ${id} = getTemplate(${template});`);
     }
 
-    const deepRemove = "deepRemove" in this.ast ? this.ast.deepRemove : false;
-
     // define all blocks
     if (this.blocks.length) {
       mainCode.push(``);
@@ -264,15 +259,9 @@ export class CodeGenerator {
           if (block.dynamicTagName) {
             xmlString = xmlString.replace(/^<\w+/, `<\${tag || '${block.dom.nodeName}'}`);
             xmlString = xmlString.replace(/\w+>$/, `\${tag || '${block.dom.nodeName}'}>`);
-            mainCode.push(
-              `let ${block.blockName} = tag => createBlock(\`${xmlString}\`${
-                deepRemove ? ", true" : ""
-              });`
-            );
+            mainCode.push(`let ${block.blockName} = tag => createBlock(\`${xmlString}\`);`);
           } else {
-            mainCode.push(
-              `let ${block.blockName} = createBlock(\`${xmlString}\`${deepRemove ? ", true" : ""});`
-            );
+            mainCode.push(`let ${block.blockName} = createBlock(\`${xmlString}\`);`);
           }
         }
       }
@@ -328,11 +317,10 @@ export class CodeGenerator {
   createBlock(
     parentBlock: BlockDescription | null,
     type: BlockType,
-    ctx: Context,
-    deepRemove: boolean = false
+    ctx: Context
   ): BlockDescription {
     const hasRoot = this.target.hasRoot;
-    const block = new BlockDescription(this.target, type, deepRemove);
+    const block = new BlockDescription(this.target, type);
     if (!hasRoot && !ctx.preventRoot) {
       this.target.hasRoot = true;
       block.isRoot = true;
@@ -457,8 +445,6 @@ export class CodeGenerator {
       case ASTType.TTranslation:
         this.compileTTranslation(ast, ctx);
         break;
-      case ASTType.TPortal:
-        this.compileTPortal(ast, ctx);
     }
   }
 
@@ -658,7 +644,6 @@ export class CodeGenerator {
           index: block!.childNumber,
           forceNewBlock: false,
           isLast: ctx.isLast && i === children.length - 1,
-          tKeyExpr: ctx.tKeyExpr,
         });
         this.compileAST(child, subCtx);
       }
@@ -718,7 +703,7 @@ export class CodeGenerator {
     if (ast.body) {
       const nextId = BlockDescription.nextBlockId;
       const subCtx: Context = createContext(ctx);
-      this.compileAST({ type: ASTType.Multi, content: ast.body, deepRemove: false }, subCtx);
+      this.compileAST({ type: ASTType.Multi, content: ast.body }, subCtx);
       this.helpers.add("withDefault");
       expr = `withDefault(${expr}, b${nextId})`;
     }
@@ -779,7 +764,7 @@ export class CodeGenerator {
 
       // note: this part is duplicated from end of compilemulti:
       const args = block!.children.map((c) => c.varName).join(", ");
-      this.insertBlock(`multi([${args}]${ast.deepRemove ? ", true" : ""})`, block!, ctx)!;
+      this.insertBlock(`multi([${args}])`, block!, ctx)!;
     }
   }
 
@@ -788,7 +773,7 @@ export class CodeGenerator {
     if (block) {
       this.insertAnchor(block);
     }
-    block = this.createBlock(block, "list", ctx, ast.deepRemove);
+    block = this.createBlock(block, "list", ctx);
     this.target.loopLevel++;
     const loopVar = `i${this.target.loopLevel}`;
     this.addLine(`ctx = Object.create(ctx);`);
@@ -923,7 +908,7 @@ export class CodeGenerator {
       }
 
       const args = block!.children.map((c) => c.varName).join(", ");
-      this.insertBlock(`multi([${args}]${ast.deepRemove ? ", true" : ""})`, block!, ctx)!;
+      this.insertBlock(`multi([${args}])`, block!, ctx)!;
     }
   }
 
@@ -935,7 +920,7 @@ export class CodeGenerator {
       this.helpers.add("isBoundary");
       const nextId = BlockDescription.nextBlockId;
       const subCtx: Context = createContext(ctx, { preventRoot: true });
-      this.compileAST({ type: ASTType.Multi, content: ast.body, deepRemove: false }, subCtx);
+      this.compileAST({ type: ASTType.Multi, content: ast.body }, subCtx);
       if (nextId !== BlockDescription.nextBlockId) {
         this.helpers.add("zero");
         this.addLine(`ctx[zero] = b${nextId};`);
@@ -990,7 +975,7 @@ export class CodeGenerator {
     const expr = ast.value ? compileExpr(ast.value || "") : "null";
     if (ast.body) {
       this.helpers.add("LazyValue");
-      const bodyAst: AST = { type: ASTType.Multi, content: ast.body, deepRemove: false };
+      const bodyAst: AST = { type: ASTType.Multi, content: ast.body };
       const name = this.compileInNewTarget("value", bodyAst, ctx);
       let value = `new LazyValue(${name}, ctx, node)`;
       value = ast.value ? (value ? `withDefault(${expr}, ${value})` : expr) : value;
@@ -1117,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) {
@@ -1176,15 +1158,4 @@ export class CodeGenerator {
       this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
     }
   }
-  compileTPortal(ast: ASTTPortal, ctx: Context) {
-    this.helpers.add("callPortal");
-    let { block } = ctx;
-    const name = this.compileInNewTarget("portalContent", ast.content, ctx);
-    const blockString = `callPortal(ctx, node, key, ${ast.target}, ${name})`;
-    if (block) {
-      this.insertAnchor(block);
-    }
-    block = this.createBlock(block, "multi", ctx);
-    this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
-  }
 }

src/compiler/parser.ts

@@ -20,7 +20,6 @@ export const enum ASTType {
   TSlot,
   TCallBlock,
   TTranslation,
-  TPortal,
 }
 
 export interface ASTText {
@@ -56,7 +55,6 @@ export interface ASTDomNode {
 export interface ASTMulti {
   type: ASTType.Multi;
   content: AST[];
-  deepRemove: boolean;
 }
 
 export interface ASTTEsc {
@@ -77,7 +75,6 @@ export interface ASTTif {
   content: AST;
   tElif: { condition: string; content: AST }[] | null;
   tElse: AST | null;
-  deepRemove: boolean;
 }
 
 export interface ASTTSet {
@@ -95,7 +92,8 @@ export interface ASTTForEach {
   key: string | null;
   body: AST;
   memo: string;
-  deepRemove: boolean;
+  isOnlyChild: boolean;
+  hasNoComponent: boolean;
   hasNoFirst: boolean;
   hasNoLast: boolean;
   hasNoIndex: boolean;
@@ -151,12 +149,6 @@ export interface ASTTranslation {
   content: AST | null;
 }
 
-export interface ASTTPortal {
-  type: ASTType.TPortal;
-  target: string;
-  content: AST;
-}
-
 export type AST =
   | ASTText
   | ASTComment
@@ -174,8 +166,7 @@ export type AST =
   | ASTTCallBlock
   | ASTLog
   | ASTDebug
-  | ASTTranslation
-  | ASTTPortal;
+  | ASTTranslation;
 
 // -----------------------------------------------------------------------------
 // Parser
@@ -204,7 +195,6 @@ function parseNode(node: ChildNode, ctx: ParsingContext): AST | null {
     parseTDebugLog(node, ctx) ||
     parseTForEach(node, ctx) ||
     parseTIf(node, ctx) ||
-    parseTPortal(node, ctx) ||
     parseTCall(node, ctx) ||
     parseTCallBlock(node, ctx) ||
     parseTEscNode(node, ctx) ||
@@ -361,6 +351,9 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
       attrs[attr] = value;
     }
   }
+  if (children.length === 1 && children[0].type === ASTType.TForEach) {
+    children[0].isOnlyChild = true;
+  }
   return {
     type: ASTType.DomNode,
     tag: tagName,
@@ -484,8 +477,9 @@ function parseTForEach(node: Element, ctx: ParsingContext): AST | null {
     elem,
     body,
     memo,
-    deepRemove: needDeepRemove(body),
     key,
+    isOnlyChild: false,
+    hasNoComponent: hasNoComponent(body),
     hasNoFirst,
     hasNoLast,
     hasNoIndex,
@@ -494,40 +488,54 @@ function parseTForEach(node: Element, ctx: ParsingContext): AST | null {
 }
 
 /**
- * @returns true if we are sure that a deep remove (without optimisation) is needed, for exemple
- * if there is a portal.
+ * @returns true if we are sure the ast does not contain any component
  */
-function needDeepRemove(ast: AST): boolean {
+function hasNoComponent(ast: AST): boolean {
   switch (ast.type) {
-    case ASTType.Multi:
-    case ASTType.TForEach:
-    case ASTType.TIf:
-      return ast.deepRemove;
-
-    case ASTType.TPortal:
-      return true;
-
     case ASTType.TComponent:
     case ASTType.TOut:
     case ASTType.TCall:
     case ASTType.TCallBlock:
     case ASTType.TSlot:
+      return false;
+    case ASTType.TSet:
     case ASTType.Text:
     case ASTType.Comment:
     case ASTType.TEsc:
-      return false;
-
+      return true;
     case ASTType.TKey:
-      return needDeepRemove(ast.content);
+      return hasNoComponent(ast.content);
     case ASTType.TDebug:
     case ASTType.TLog:
     case ASTType.TTranslation:
-      return ast.content ? needDeepRemove(ast.content) : false;
-    case ASTType.TSet:
-      return ast.body ? ast.body.some((ast) => needDeepRemove(ast)) : false;
-
-    case ASTType.DomNode:
-      return ast.content.some((ast) => needDeepRemove(ast));
+      return ast.content ? hasNoComponent(ast.content) : true;
+    case ASTType.TForEach:
+      return ast.hasNoComponent;
+    case ASTType.Multi:
+    case ASTType.DomNode: {
+      for (let elem of ast.content) {
+        if (!hasNoComponent(elem)) {
+          return false;
+        }
+      }
+      return true;
+    }
+    case ASTType.TIf: {
+      if (!hasNoComponent(ast.content)) {
+        return false;
+      }
+      if (ast.tElif) {
+        for (let elem of ast.tElif) {
+          if (!hasNoComponent(elem.content)) {
+            return false;
+          }
+        }
+      }
+      if (ast.tElse && !hasNoComponent(ast.tElse)) {
+        return false;
+      }
+      return true;
+    }
   }
 }
 
@@ -628,21 +636,12 @@ function parseTIf(node: Element, ctx: ParsingContext): AST | null {
     nextElement.remove();
   }
 
-  let deepRemove = needDeepRemove(content);
-  if (tElifs) {
-    deepRemove = deepRemove || tElifs.some((ast) => needDeepRemove(ast));
-  }
-  if (tElse) {
-    deepRemove = deepRemove || needDeepRemove(tElse);
-  }
-
   return {
     type: ASTType.TIf,
     condition,
     content,
     tElif: tElifs.length ? tElifs : null,
     tElse,
-    deepRemove,
   };
 }
 
@@ -806,35 +805,6 @@ function parseTTranslation(node: Element, ctx: ParsingContext): AST | null {
   };
 }
 
-// -----------------------------------------------------------------------------
-// Portal
-// -----------------------------------------------------------------------------
-
-function parseTPortal(node: Element, ctx: ParsingContext): AST | null {
-  if (!node.hasAttribute("t-portal")) {
-    return null;
-  }
-  if (node.tagName !== "t") {
-    throw new Error(
-      `Directive 't-portal' can only be used on <t> nodes (used on a <${node.tagName}>)`
-    );
-  }
-  const target = node.getAttribute("t-portal")!;
-  node.removeAttribute("t-portal");
-  const content = parseNode(node, ctx);
-  if (!content) {
-    return {
-      type: ASTType.Text,
-      value: "",
-    };
-  }
-  return {
-    type: ASTType.TPortal,
-    target,
-    content,
-  };
-}
-
 // -----------------------------------------------------------------------------
 // helpers
 // -----------------------------------------------------------------------------
@@ -869,11 +839,7 @@ function parseChildNodes(node: Node, ctx: ParsingContext): AST | null {
     case 1:
       return children[0];
     default:
-      return {
-        type: ASTType.Multi,
-        content: children,
-        deepRemove: children.some((ast) => needDeepRemove(ast)),
-      };
+      return { type: ASTType.Multi, content: children };
   }
 }
 

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[] = [];
@@ -276,35 +296,15 @@ export class ComponentNode<T extends typeof Component = typeof Component>
 
   patch() {
     this.bdom!.patch(this!.fiber!.bdom!, false);
-    this.cleanOutdatedChildren();
     this.fiber!.appliedToDom = true;
     this.fiber = null;
   }
 
   beforeRemove() {
-    console.log('ddddddd')
     this._destroy();
   }
 
   remove() {
-    console.log('coucou')
     this.bdom!.remove();
   }
-
-  cleanOutdatedChildren() {
-    const childrenEntries = Object.entries(this.children);
-    if (!childrenEntries.length) {
-      return;
-    }
-    const children = this.children;
-    for (const [key, node] of childrenEntries) {
-      const status = node.status;
-      if (status !== STATUS.MOUNTED) {
-        delete children[key];
-        if (status !== STATUS.DESTROYED) {
-          node.destroy();
-        }
-      }
-    }
-  }
 }

src/component/fibers.ts

@@ -144,7 +144,6 @@ export class RootFiber extends Fiber {
 
       // Step 2: patching the dom
       node.bdom!.patch(this.bdom!, Object.keys(node.children).length > 0);
-      node.cleanOutdatedChildren();
       this.appliedToDom = true;
 
       this.locked = false;

src/index.ts

@@ -36,6 +36,7 @@ export { App, mount } from "./app/app";
 export { Component } from "./component/component";
 export { useComponent } from "./component/component_node";
 export { status } from "./component/status";
+export { Portal } from "./portal";
 export { Memo } from "./memo";
 export { xml } from "./app/template_set";
 export { useState, reactive } from "./reactivity";

src/portal.ts

@@ -1,21 +1,22 @@
+import type { ComponentNode } from "./component/component_node";
+import { Component } from "./component/component";
+import { xml } from "./app/template_set";
 import { BDom, text, VNode } from "./blockdom";
 
 const VText: any = text("").constructor;
 
-export class VPortal extends VText implements Partial<VNode<VPortal>> {
+class VPortal extends VText implements Partial<VNode<VPortal>> {
   //   selector: string;
   realBDom: BDom | null;
   target: HTMLElement | null = null;
 
-  constructor(selector: string, realBDom: BDom, ownerComponent: ComponentNode) {
+  constructor(selector: string, realBDom: BDom) {
     super("");
-    this.ownerComponent = ownerComponent;
     this.selector = selector;
     this.realBDom = realBDom;
   }
   mount(parent: HTMLElement, anchor: ChildNode) {
     super.mount(parent, anchor);
-    this.ownerComponent.willDestroy.push(() => this.cleanup());
     this.target = document.querySelector(this.selector) as any;
     if (!this.target) {
       let el: any = this.el;
@@ -49,3 +50,22 @@ export class VPortal extends VText implements Partial<VNode<VPortal>> {
     }
   }
 }
+
+export class Portal extends Component {
+  static template = xml`<t t-slot="default"/>`;
+  static props = {
+    target: {
+      type: String,
+    },
+    slots: true,
+  };
+
+  constructor(props: any, env: any, node: ComponentNode) {
+    super(props, env, node);
+    node._render = function (fiber: any) {
+      const bdom = new VPortal(props.target, this.renderFn());
+      fiber.bdom = bdom;
+      fiber.root.counter--;
+    };
+  }
+}

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);

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]);

tests/compiler/parser.test.ts

@@ -146,7 +146,6 @@ describe("qweb parser", () => {
           content: [],
         },
       ],
-      deepRemove: false,
     });
   });
 
@@ -254,7 +253,6 @@ describe("qweb parser", () => {
           content: [],
         },
       ],
-      deepRemove: false,
     });
   });
 
@@ -505,7 +503,6 @@ describe("qweb parser", () => {
           },
           tElif: null,
           tElse: null,
-          deepRemove: false,
         },
       ],
     });
@@ -521,7 +518,6 @@ describe("qweb parser", () => {
       },
       tElif: null,
       tElse: null,
-      deepRemove: false,
     });
   });
 
@@ -542,7 +538,6 @@ describe("qweb parser", () => {
       },
       tElif: null,
       tElse: null,
-      deepRemove: false,
     });
   });
 
@@ -559,7 +554,6 @@ describe("qweb parser", () => {
         type: ASTType.Text,
         value: "else",
       },
-      deepRemove: false,
     });
   });
 
@@ -578,7 +572,6 @@ describe("qweb parser", () => {
         },
       ],
       tElse: null,
-      deepRemove: false,
     });
   });
 
@@ -600,7 +593,6 @@ describe("qweb parser", () => {
         type: ASTType.Text,
         value: "else",
       },
-      deepRemove: false,
     });
   });
 
@@ -658,7 +650,6 @@ describe("qweb parser", () => {
           },
         ],
       },
-      deepRemove: false,
     });
   });
 
@@ -740,7 +731,6 @@ describe("qweb parser", () => {
       },
       tElif: null,
       tElse: null,
-      deepRemove: false,
     });
   });
 
@@ -763,7 +753,6 @@ describe("qweb parser", () => {
           content: { type: ASTType.Text, value: "1" },
           tElif: null,
           tElse: { type: ASTType.TSet, name: "ourvar", value: "0", defaultValue: null, body: null },
-          deepRemove: false,
         },
       ],
     });
@@ -787,13 +776,14 @@ describe("qweb parser", () => {
       collection: "list",
       elem: "item",
       key: "item_index",
+      hasNoComponent: true,
+      isOnlyChild: false,
       body: { type: ASTType.TEsc, expr: "item", defaultValue: "" },
       memo: "",
       hasNoFirst: true,
       hasNoIndex: false,
       hasNoLast: true,
       hasNoValue: true,
-      deepRemove: false,
     });
   });
 
@@ -803,13 +793,14 @@ describe("qweb parser", () => {
       collection: "list",
       elem: "item",
       key: "item_index",
+      hasNoComponent: true,
+      isOnlyChild: false,
       body: { type: ASTType.TEsc, expr: "item", defaultValue: "" },
       memo: "",
       hasNoFirst: true,
       hasNoIndex: false,
       hasNoLast: true,
       hasNoValue: true,
-      deepRemove: false,
     });
   });
 
@@ -818,6 +809,8 @@ describe("qweb parser", () => {
       type: ASTType.TForEach,
       collection: "list",
       elem: "item",
+      hasNoComponent: true,
+      isOnlyChild: false,
       key: "item_index",
       body: {
         type: ASTType.DomNode,
@@ -835,7 +828,6 @@ describe("qweb parser", () => {
       hasNoIndex: false,
       hasNoLast: true,
       hasNoValue: true,
-      deepRemove: false,
     });
   });
 
@@ -844,6 +836,8 @@ describe("qweb parser", () => {
       type: ASTType.TForEach,
       collection: "list",
       elem: "item",
+      hasNoComponent: true,
+      isOnlyChild: false,
       key: "item.id",
       body: { type: ASTType.TEsc, expr: "item", defaultValue: "" },
       memo: "",
@@ -851,7 +845,6 @@ describe("qweb parser", () => {
       hasNoIndex: true,
       hasNoLast: true,
       hasNoValue: true,
-      deepRemove: false,
     });
   });
 
@@ -863,6 +856,8 @@ describe("qweb parser", () => {
       collection: "list",
       elem: "item",
       key: "item_index",
+      hasNoComponent: true,
+      isOnlyChild: false,
       body: {
         type: ASTType.DomNode,
         tag: "span",
@@ -879,7 +874,6 @@ describe("qweb parser", () => {
       hasNoIndex: false,
       hasNoLast: true,
       hasNoValue: true,
-      deepRemove: false,
     });
   });
 
@@ -893,12 +887,13 @@ describe("qweb parser", () => {
       collection: "list",
       elem: "item",
       key: "item_index",
+      hasNoComponent: true,
+      isOnlyChild: false,
       body: {
         type: ASTType.TIf,
         condition: "condition",
         tElif: null,
         tElse: null,
-        deepRemove: false,
         content: {
           type: ASTType.DomNode,
           tag: "span",
@@ -916,7 +911,6 @@ describe("qweb parser", () => {
       hasNoIndex: false,
       hasNoLast: true,
       hasNoValue: true,
-      deepRemove: false,
     });
   });
 
@@ -930,6 +924,8 @@ describe("qweb parser", () => {
       collection: "categories",
       elem: "category",
       key: "category_index",
+      hasNoComponent: true,
+      isOnlyChild: false,
       body: {
         type: ASTType.DomNode,
         tag: "option",
@@ -949,7 +945,6 @@ describe("qweb parser", () => {
       hasNoIndex: false,
       hasNoLast: true,
       hasNoValue: true,
-      deepRemove: false,
     });
   });
 
@@ -971,13 +966,14 @@ describe("qweb parser", () => {
           collection: "list",
           elem: "item",
           key: "item_index",
+          hasNoComponent: true,
+          isOnlyChild: true,
           body: { type: ASTType.TEsc, expr: "item", defaultValue: "" },
           memo: "",
           hasNoFirst: true,
           hasNoIndex: false,
           hasNoLast: true,
           hasNoValue: true,
-          deepRemove: false,
         },
       ],
     });
@@ -999,6 +995,8 @@ describe("qweb parser", () => {
       collection: "list",
       elem: "item",
       key: "item_index",
+      hasNoComponent: true,
+      isOnlyChild: false,
       body: {
         type: ASTType.DomNode,
         tag: "span",
@@ -1015,7 +1013,6 @@ describe("qweb parser", () => {
       hasNoIndex: false,
       hasNoLast: true,
       hasNoValue: true,
-      deepRemove: false,
     });
   });
 
@@ -1025,6 +1022,8 @@ describe("qweb parser", () => {
       collection: "list",
       elem: "item",
       key: "item_index",
+      hasNoComponent: false,
+      isOnlyChild: false,
       body: {
         type: ASTType.TComponent,
         isDynamic: false,
@@ -1038,7 +1037,6 @@ describe("qweb parser", () => {
       hasNoIndex: false,
       hasNoLast: true,
       hasNoValue: true,
-      deepRemove: false,
     });
   });
 
@@ -1050,6 +1048,8 @@ describe("qweb parser", () => {
       collection: "list",
       elem: "item",
       key: "item_index",
+      hasNoComponent: false,
+      isOnlyChild: false,
       body: {
         type: ASTType.TCall,
         name: "blap",
@@ -1060,7 +1060,6 @@ describe("qweb parser", () => {
       hasNoIndex: false,
       hasNoLast: false,
       hasNoValue: false,
-      deepRemove: false,
     });
   });
 
@@ -1074,13 +1073,14 @@ describe("qweb parser", () => {
       collection: "list",
       elem: "item",
       key: "item_index",
+      hasNoComponent: true,
+      isOnlyChild: false,
       body: { type: ASTType.TEsc, expr: "item", defaultValue: "" },
       memo: "[row.x]",
       hasNoFirst: true,
       hasNoIndex: false,
       hasNoLast: true,
       hasNoValue: true,
-      deepRemove: false,
     });
   });
 
@@ -1130,7 +1130,6 @@ describe("qweb parser", () => {
       condition: "condition",
       tElif: null,
       tElse: null,
-      deepRemove: false,
       content: {
         type: ASTType.TCall,
         name: "blabla",
@@ -1285,7 +1284,6 @@ describe("qweb parser", () => {
                 ns: null,
               },
             ],
-            deepRemove: false,
           },
         },
       },
@@ -1606,7 +1604,7 @@ describe("qweb parser", () => {
           attrs: {},
           content: [
             {
-              type: ASTType.Text,
+              type: 0,
               value: "word",
             },
           ],
@@ -1618,18 +1616,19 @@ describe("qweb parser", () => {
           type: ASTType.DomNode,
           ns: null,
         },
-        type: ASTType.TTranslation,
+        type: 16,
       },
       collection: "list",
       elem: "item",
+      hasNoComponent: true,
       hasNoFirst: true,
       hasNoIndex: false,
       hasNoLast: true,
       hasNoValue: true,
+      isOnlyChild: false,
       key: "item_index",
       memo: "",
-      deepRemove: false,
-      type: ASTType.TForEach,
+      type: 9,
     });
   });
 
@@ -1788,34 +1787,4 @@ describe("qweb parser", () => {
       ns: null,
     });
   });
-
-  // ---------------------------------------------------------------------------
-  // t-portal
-  // ---------------------------------------------------------------------------
-  test("t-portal", async () => {
-    expect(parse(`<t t-portal="target">Content</t>`)).toEqual({
-      type: ASTType.TPortal,
-      target: "target",
-      content: { type: ASTType.Text, value: "Content" },
-    });
-  });
-
-  test("t-portal must be in a <t> node", async () => {
-    expect(() => parse(`<div t-portal="target">Content</div>`)).toThrowError();
-  });
-
-  test("t-portal with t-if", async () => {
-    expect(parse(`<t t-portal="target" t-if="condition">Content</t>`)).toEqual({
-      condition: "condition",
-      content: {
-        content: { type: ASTType.Text, value: "Content" },
-        target: "target",
-        type: ASTType.TPortal,
-      },
-      tElif: null,
-      tElse: null,
-      type: ASTType.TIf,
-      deepRemove: true,
-    });
-  });
 });

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]);
   }
 }"
@@ -1124,59 +1124,6 @@ exports[`t-out in components can render list of t-out  1`] = `
 }"
 `;
 
-exports[`t-out in components component children doesn't leak (if case) 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2;
-    if (ctx['ifVar']) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    }
-    return multi([b2]);
-  }
-}"
-`;
-
-exports[`t-out in components component children doesn't leak (if case) 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`t-out in components component children doesn't leak (t-key case) 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['keyVar'];
-    return toggler(tKey_1, component(\`Child\`, {}, tKey_1 + key + \`__1\`, node, ctx));
-  }
-}"
-`;
-
-exports[`t-out in components component children doesn't leak (t-key case) 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
 exports[`t-out in components update properly on state changes 1`] = `
 "function anonymous(bdom, helpers
 ) {

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,72 +1143,6 @@ exports[`rendering component again in next microtick 2`] = `
 }"
 `;
 
-exports[`t-foreach with dynamic async component 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { prepareList, withKey } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['list']);
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`arr\`] = v_block1[i1];
-      ctx[\`arr_index\`] = i1;
-      let key1 = ctx['arr_index'];
-      let b3;
-      if (ctx['arr']) {
-        let Comp1 = ctx['myComp'];
-        b3 = toggler(Comp1, component(Comp1, {key: ctx['arr'][0]}, key + \`__1__\${key1}\`, node, ctx));
-      }
-      c_block1[i1] = withKey(multi([b3]), key1);
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`t-foreach with dynamic async component 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[`t-key on dom node having a component 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const tKey_1 = ctx['key'];
-    let Comp1 = ctx['myComp'];
-    let b2 = toggler(tKey_1, toggler(Comp1, component(Comp1, {key: ctx['key']}, tKey_1 + key + \`__1\`, node, ctx)));
-    return toggler(tKey_1, block1([], [b2]));
-  }
-}"
-`;
-
-exports[`t-key on dom node having a component 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['props'].key);
-  }
-}"
-`;
-
 exports[`t-key on dynamic async component (toggler is never patched) 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -1217,7 +1151,7 @@ exports[`t-key on dynamic async component (toggler is never patched) 1`] = `
   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']}, tKey_1 + key + \`__1\`, node, ctx)));
+    return toggler(tKey_1, toggler(Comp1, component(Comp1, {key: ctx['key']}, key+\`__1\`,tKey_1, node, ctx)));
   }
 }"
 `;
@@ -1247,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]);
   }
@@ -1275,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);
   }
 }"
 `;
@@ -1299,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]);
   }
 }"
@@ -1327,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]);
   }
 }"

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]);
   }

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]);
   }

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);
   }
 }"
 `;

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]);
   }

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);
   }
 }"
 `;

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);
   }
 }"
 `;

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]);
   }
 }"

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]);
   }

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]);
   }
 }"

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]);
   }
 }"

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);
   }
 }"
 `;

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);
   }
 }"
 `;

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));
   }
 }"
 `;

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]);

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]);
   }
 }"

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]);
   }

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]);
   }
 }"

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 = \\"\\") {

tests/components/basics.test.ts

@@ -1,5 +1,5 @@
 import { App, Component, mount, status, useState, xml } from "../../src";
-import { elem, makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
+import { elem, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 import { markup } from "../../src/utils";
 
 let fixture: HTMLElement;
@@ -900,73 +900,4 @@ describe("t-out in components", () => {
       "<div>&lt;b&gt;one&lt;/b&gt;<b>one</b>&lt;b&gt;two&lt;/b&gt;<b>two</b>&lt;b&gt;tree&lt;/b&gt;<b>tree</b></div>"
     );
   });
-
-  test("component children doesn't leak (if case)", async () => {
-    class Child extends Component {
-      static template = xml`<div />`;
-      setup() {
-        useLogLifecycle();
-      }
-    }
-    class Parent extends Component {
-      static components = { Child };
-      static template = xml`<Child t-if="ifVar" />`;
-      ifVar = true;
-    }
-
-    const parent = await mount(Parent, fixture);
-    expect(Object.keys(parent.__owl__.children).length).toStrictEqual(1);
-    expect([
-      "Child:setup",
-      "Child:willStart",
-      "Child:willRender",
-      "Child:rendered",
-      "Child:mounted",
-    ]).toBeLogged();
-
-    parent.ifVar = false;
-    parent.render();
-    await nextTick();
-    expect(Object.keys(parent.__owl__.children).length).toStrictEqual(0);
-    expect(["Child:willUnmount", "Child:willDestroy"]).toBeLogged();
-  });
-
-  test("component children doesn't leak (t-key case)", async () => {
-    // This test should encompass the t-foreach and t-call cases too (because they also use a flavor of some key)
-    class Child extends Component {
-      static template = xml`<div />`;
-      setup() {
-        useLogLifecycle();
-      }
-    }
-    class Parent extends Component {
-      static components = { Child };
-      static template = xml`<Child t-key="keyVar" />`;
-      keyVar = 1;
-    }
-
-    const parent = await mount(Parent, fixture);
-    expect(Object.keys(parent.__owl__.children).length).toStrictEqual(1);
-    expect([
-      "Child:setup",
-      "Child:willStart",
-      "Child:willRender",
-      "Child:rendered",
-      "Child:mounted",
-    ]).toBeLogged();
-
-    parent.keyVar = 2;
-    parent.render();
-    await nextTick();
-    expect(Object.keys(parent.__owl__.children).length).toStrictEqual(1);
-    expect([
-      "Child:setup",
-      "Child:willStart",
-      "Child:willRender",
-      "Child:rendered",
-      "Child:willUnmount",
-      "Child:willDestroy",
-      "Child:mounted",
-    ]).toBeLogged();
-  });
 });

tests/components/concurrency.test.ts

@@ -2908,64 +2908,6 @@ test("two sequential renderings before an animation frame", async () => {
   expect(["Parent:willPatch", "Child:willPatch", "Child:patched", "Parent:patched"]).toBeLogged();
 });
 
-test("t-key on dom node having a component", async () => {
-  let def: any;
-  class Child extends Component {
-    static template = xml`<t t-esc="props.key" />`;
-    setup() {
-      onWillStart(() => def);
-      useLogLifecycle(this.props.key);
-    }
-  }
-
-  class Parent extends Component {
-    key = 1;
-    myComp = Child;
-    static template = xml`<div t-key="key"><t t-component="myComp" key="key" /></div>`;
-  }
-
-  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 (3):setup",
-    "Child (3):willStart",
-    "Child (3):willRender",
-    "Child (3):rendered",
-    "Child (1):willUnmount",
-    "Child (1):willDestroy",
-    "Child (2):willDestroy",
-    "Child (3):mounted",
-  ]).toBeLogged();
-});
-
 test("t-key on dynamic async component (toggler is never patched)", async () => {
   let def: any;
   class Child extends Component {
@@ -3013,72 +2955,13 @@ test("t-key on dynamic async component (toggler is never patched)", async () =>
 
   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 (2):willDestroy",
-    "Child (3):mounted",
-  ]).toBeLogged();
-});
-
-test("t-foreach with dynamic async component", 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 {
-    list: any = [[1]];
-    myComp = Child;
-    static template = xml`<t t-foreach="list" t-as="arr" t-key="arr_index">
-        <t t-if="arr" t-component="myComp" key="arr[0]" />
-      </t>`;
-  }
-
-  const parent = await mount(Parent, fixture);
-  expect(fixture.innerHTML).toBe("<div>1</div>");
-
-  def = makeDeferred();
-  parent.list = [, [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.list = [, , [3]];
-  parent.render();
-
-  const prevDef = def;
-  def = undefined;
-
-  parent.render();
-  prevDef.resolve();
-  await nextTick();
-
-  expect(fixture.innerHTML).toBe("<div>3</div>");
-  expect([
-    "Child (3):setup",
-    "Child (3):willStart",
-    "Child (3):willRender",
-    "Child (3):rendered",
-    "Child (1):willUnmount",
-    "Child (1):willDestroy",
-    "Child (2):willDestroy",
     "Child (3):mounted",
   ]).toBeLogged();
 });

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]);
   }
 }"

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

@@ -1,59 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Portal Add and remove portals 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { prepareList, callPortal, withKey } = helpers;
-  
-  function portalContent1(ctx, node, key = \\"\\") {
-    let b3 = text(\` Portal\`);
-    let b4 = text(ctx['portalId']);
-    return multi([b3, b4]);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['portalIds']);
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`portalId\`] = v_block1[i1];
-      let key1 = ctx['portalId'];
-      c_block1[i1] = withKey(callPortal(ctx, node, key, '#outside', portalContent1), key1);
-    }
-    return list(c_block1, true);
-  }
-}"
-`;
-
-exports[`Portal Add and remove portals with t-foreach 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { prepareList, callPortal, withKey } = helpers;
-  
-  let block2 = createBlock(\`<div><block-text-0/><block-child-0/></div>\`, true);
-  
-  function portalContent1(ctx, node, key = \\"\\") {
-    let b4 = text(\` Portal\`);
-    let b5 = text(ctx['portalId']);
-    return multi([b4, b5]);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['portalIds']);
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`portalId\`] = v_block1[i1];
-      let key1 = ctx['portalId'];
-      let txt1 = ctx['portalId'];
-      let b6 = callPortal(ctx, node, key, '#outside', portalContent1);
-      c_block1[i1] = withKey(block2([txt1], [b6]), key1);
-    }
-    return list(c_block1, true);
-  }
-}"
-`;
-
 exports[`Portal Portal composed with t-slot 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -62,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]);
   }
 }"
@@ -76,14 +22,14 @@ exports[`Portal Portal composed with t-slot 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal, callSlot } = helpers;
+  let { callSlot } = helpers;
   
-  function portalContent1(ctx, node, key = \\"\\") {
+  function slot1(ctx, node, key = \\"\\") {
     return callSlot(ctx, node, key, 'default', false, {});
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return callPortal(ctx, node, key, '#outside', portalContent1);
+    return component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
   }
 }"
 `;
@@ -106,17 +52,16 @@ exports[`Portal basic use of portal 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
   
   let block1 = createBlock(\`<div><span>1</span><block-child-0/></div>\`);
   let block2 = createBlock(\`<p>2</p>\`);
   
-  function portalContent1(ctx, node, key = \\"\\") {
+  function slot1(ctx, node, key = \\"\\") {
     return block2();
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = callPortal(ctx, node, key, '#outside', portalContent1);
+    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -126,17 +71,18 @@ exports[`Portal basic use of portal in dev mode 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
   
   let block1 = createBlock(\`<div><span>1</span><block-child-0/></div>\`);
   let block2 = createBlock(\`<p>2</p>\`);
   
-  function portalContent1(ctx, node, key = \\"\\") {
+  function slot1(ctx, node, key = \\"\\") {
     return block2();
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = callPortal(ctx, node, key, '#outside', portalContent1);
+    const props1 = {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}
+    helpers.validateProps(\`Portal\`, props1, ctx)
+    let b3 = component(\`Portal\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -146,21 +92,20 @@ exports[`Portal conditional use of Portal (with sub Component) 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
   
-  let block2 = createBlock(\`<span>1</span>\`, true);
+  let block2 = createBlock(\`<span>1</span>\`);
   
-  function portalContent1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
+  function slot1(ctx, node, key = \\"\\") {
+    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 = callPortal(ctx, node, key, '#outside', portalContent1);
+      b4 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     }
-    return multi([b2, b4], true);
+    return multi([b2, b4]);
   }
 }"
 `;
@@ -183,12 +128,11 @@ exports[`Portal conditional use of Portal 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
   
-  let block2 = createBlock(\`<span>1</span>\`, true);
-  let block3 = createBlock(\`<p>2</p>\`, true);
+  let block2 = createBlock(\`<span>1</span>\`);
+  let block3 = createBlock(\`<p>2</p>\`);
   
-  function portalContent1(ctx, node, key = \\"\\") {
+  function slot1(ctx, node, key = \\"\\") {
     return block3();
   }
   
@@ -196,121 +140,9 @@ exports[`Portal conditional use of Portal 1`] = `
     let b2,b4;
     b2 = block2();
     if (ctx['state'].hasPortal) {
-      b4 = callPortal(ctx, node, key, '#outside', portalContent1);
+      b4 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     }
-    return multi([b2, b4], true);
-  }
-}"
-`;
-
-exports[`Portal conditional use of Portal with child and div 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2;
-    if (ctx['state'].hasPortal) {
-      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    }
-    return multi([b2]);
-  }
-}"
-`;
-
-exports[`Portal conditional use of Portal with child and div 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { prepareList, callPortal, withKey } = helpers;
-  
-  let block1 = createBlock(\`<div><span>hasPortal</span><block-child-0/></div>\`);
-  let block3 = createBlock(\`<p>thePortal</p>\`);
-  
-  function portalContent1(ctx, node, key = \\"\\") {
-    return block3();
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1]);
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`elem\`] = v_block2[i1];
-      let key1 = ctx['elem'];
-      c_block2[i1] = withKey(callPortal(ctx, node, key, '#outside', portalContent1), key1);
-    }
-    let b2 = list(c_block2, true);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`Portal conditional use of Portal with child and div, variation 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block2 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2;
-    if (ctx['state'].hasPortal) {
-      let b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-      b2 = block2([], [b3]);
-    }
-    return multi([b2]);
-  }
-}"
-`;
-
-exports[`Portal conditional use of Portal with child and div, variation 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { prepareList, callPortal, withKey } = helpers;
-  
-  let block2 = createBlock(\`<span>hasPortal</span>\`, true);
-  let block4 = createBlock(\`<p>thePortal</p>\`, true);
-  
-  function portalContent1(ctx, node, key = \\"\\") {
-    return block4();
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = block2();
-    ctx = Object.create(ctx);
-    const [k_block3, v_block3, l_block3, c_block3] = prepareList([1]);
-    for (let i1 = 0; i1 < l_block3; i1++) {
-      ctx[\`elem\`] = v_block3[i1];
-      let key1 = ctx['elem'];
-      c_block3[i1] = withKey(callPortal(ctx, node, key, '#outside', portalContent1), key1);
-    }
-    let b3 = list(c_block3, true);
-    return multi([b2, b3], true);
-  }
-}"
-`;
-
-exports[`Portal conditional use of Portal with div 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
-  
-  let block2 = createBlock(\`<div><span>hasPortal</span><block-child-0/></div>\`, true);
-  let block3 = createBlock(\`<p>thePortal</p>\`, true);
-  
-  function portalContent1(ctx, node, key = \\"\\") {
-    return block3();
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2;
-    if (ctx['state'].hasPortal) {
-      let b4 = callPortal(ctx, node, key, '#outside', portalContent1);
-      b2 = block2([], [b4]);
-    }
-    return multi([b2], true);
+    return multi([b2, b4]);
   }
 }"
 `;
@@ -319,18 +151,17 @@ exports[`Portal lifecycle hooks of portal sub component are properly called 1`]
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-0/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  function portalContent1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
+  function slot1(ctx, node, key = \\"\\") {
+    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 = callPortal(ctx, node, key, '#outside', portalContent1);
+      b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     }
     return block1([], [b3]);
   }
@@ -355,12 +186,11 @@ exports[`Portal portal could have dynamically no content 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<span><block-text-0/></span>\`);
   
-  function portalContent1(ctx, node, key = \\"\\") {
+  function slot1(ctx, node, key = \\"\\") {
     let b3;
     if (ctx['state'].val) {
       let txt1 = ctx['state'].val;
@@ -370,7 +200,7 @@ exports[`Portal portal could have dynamically no content 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b4 = callPortal(ctx, node, key, '#outside', portalContent1);
+    let b4 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b4]);
   }
 }"
@@ -380,16 +210,15 @@ exports[`Portal portal destroys on crash 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  function portalContent1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {error: ctx['state'].error}, key + \`__1\`, node, ctx);
+  function slot1(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {error: ctx['state'].error}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = callPortal(ctx, node, key, '#outside', portalContent1);
+    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -413,16 +242,15 @@ exports[`Portal portal with child and props 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  function portalContent1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
+  function slot1(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {val: ctx['state'].val}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = callPortal(ctx, node, key, '#outside', portalContent1);
+    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -446,13 +274,12 @@ exports[`Portal portal with dynamic body 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<span><block-text-0/></span>\`);
   let block4 = createBlock(\`<div/>\`);
   
-  function portalContent1(ctx, node, key = \\"\\") {
+  function slot1(ctx, node, key = \\"\\") {
     let b3,b4;
     if (ctx['state'].val) {
       let txt1 = ctx['state'].val;
@@ -464,7 +291,7 @@ exports[`Portal portal with dynamic body 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b5 = callPortal(ctx, node, key, '#outside', portalContent1);
+    let b5 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b5]);
   }
 }"
@@ -474,20 +301,19 @@ exports[`Portal portal with many children 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<div>1</div>\`);
   let block4 = createBlock(\`<p>2</p>\`);
   
-  function portalContent1(ctx, node, key = \\"\\") {
+  function slot1(ctx, node, key = \\"\\") {
     let b3 = block3();
     let b4 = block4();
     return multi([b3, b4]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b5 = callPortal(ctx, node, key, '#outside', portalContent1);
+    let b5 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b5]);
   }
 }"
@@ -497,11 +323,10 @@ exports[`Portal portal with no content 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  function portalContent1(ctx, node, key = \\"\\") {
+  function slot1(ctx, node, key = \\"\\") {
     let b3;
     if (false) {
       b3 = text('ABC');
@@ -510,7 +335,7 @@ exports[`Portal portal with no content 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b4 = callPortal(ctx, node, key, '#outside', portalContent1);
+    let b4 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b4]);
   }
 }"
@@ -520,16 +345,15 @@ exports[`Portal portal with only text as content 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  function portalContent1(ctx, node, key = \\"\\") {
+  function slot1(ctx, node, key = \\"\\") {
     return text('only text');
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = callPortal(ctx, node, key, '#outside', portalContent1);
+    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -539,17 +363,16 @@ exports[`Portal portal with target not in dom 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<div>2</div>\`);
   
-  function portalContent1(ctx, node, key = \\"\\") {
+  function slot1(ctx, node, key = \\"\\") {
     return block2();
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = callPortal(ctx, node, key, '#does-not-exist', portalContent1);
+    let b3 = component(\`Portal\`, {target: '#does-not-exist',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -559,16 +382,15 @@ exports[`Portal portal's parent's env is not polluted 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  function portalContent1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+  function slot1(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = callPortal(ctx, node, key, '#outside', portalContent1);
+    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -587,61 +409,20 @@ exports[`Portal portal's parent's env is not polluted 2`] = `
 }"
 `;
 
-exports[`Portal simple catchError with portal 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2,b3;
-    if (ctx['error']) {
-      b2 = text(\`Error\`);
-    } else {
-      b3 = component(\`Boom\`, {}, key + \`__1\`, node, ctx);
-    }
-    return block1([], [b2, b3]);
-  }
-}"
-`;
-
-exports[`Portal simple catchError with portal 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
-  
-  let block1 = createBlock(\`<div><span>1</span><block-child-0/></div>\`);
-  let block2 = createBlock(\`<p><block-text-0/></p>\`);
-  
-  function portalContent1(ctx, node, key = \\"\\") {
-    let txt1 = ctx['a'].b.c;
-    return block2([txt1]);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b3 = callPortal(ctx, node, key, '#outside', portalContent1);
-    return block1([], [b3]);
-  }
-}"
-`;
-
 exports[`Portal with target in template (after portal) 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
   
   let block1 = createBlock(\`<div><span>1</span><block-child-0/><div id=\\"local-target\\"/></div>\`);
   let block2 = createBlock(\`<p>2</p>\`);
   
-  function portalContent1(ctx, node, key = \\"\\") {
+  function slot1(ctx, node, key = \\"\\") {
     return block2();
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = callPortal(ctx, node, key, '#local-target', portalContent1);
+    let b3 = component(\`Portal\`, {target: '#local-target',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -651,57 +432,58 @@ exports[`Portal with target in template (before portal) 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
   
   let block1 = createBlock(\`<div><div id=\\"local-target\\"/><span>1</span><block-child-0/></div>\`);
   let block2 = createBlock(\`<p>2</p>\`);
   
-  function portalContent1(ctx, node, key = \\"\\") {
+  function slot1(ctx, node, key = \\"\\") {
     return block2();
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = callPortal(ctx, node, key, '#local-target', portalContent1);
+    let b3 = component(\`Portal\`, {target: '#local-target',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
 `;
 
-exports[`Portal: Props validation target must be a valid selector 1`] = `
+exports[`Portal: Props validation target is mandatory 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<div>2</div>\`);
   
-  function portalContent1(ctx, node, key = \\"\\") {
+  function slot1(ctx, node, key = \\"\\") {
     return block2();
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = callPortal(ctx, node, key, ' ', portalContent1);
+    const props1 = {slots: {'default': {__render: slot1, __ctx: ctx}}}
+    helpers.validateProps(\`Portal\`, props1, ctx)
+    let b3 = component(\`Portal\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
 `;
 
-exports[`Portal: Props validation target must be a valid selector 2 1`] = `
+exports[`Portal: Props validation target is not list 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<div>2</div>\`);
   
-  function portalContent1(ctx, node, key = \\"\\") {
+  function slot1(ctx, node, key = \\"\\") {
     return block2();
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = callPortal(ctx, node, key, 'aa', portalContent1);
+    const props1 = {target: ['body'],slots: {'default': {__render: slot1, __ctx: ctx}}}
+    helpers.validateProps(\`Portal\`, props1, ctx)
+    let b3 = component(\`Portal\`, props1, key+\`__1\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -711,16 +493,15 @@ exports[`Portal: UI/UX focus is kept across re-renders 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callPortal } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
-  function portalContent1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
+  function slot1(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {val: ctx['state'].val}, key+\`__1\`,null, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = callPortal(ctx, node, key, '#outside', portalContent1);
+    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
     return block1([], [b3]);
   }
 }"

tests/misc/portal.test.ts

@@ -8,9 +8,9 @@ import {
   onWillUnmount,
   useState,
 } from "../../src";
-import { xml } from "../../src/";
-import { DEV_MSG } from "../../src/app/app";
+import { Portal, xml } from "../../src/";
 import { elem, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { DEV_MSG } from "../../src/app/app";
 
 let fixture: HTMLElement;
 let originalconsoleWarn = console.warn;
@@ -52,12 +52,13 @@ afterEach(() => {
 describe("Portal", () => {
   test("basic use of portal", async () => {
     class Parent extends Component {
+      static components = { Portal };
       static template = xml`
           <div>
             <span>1</span>
-            <t t-portal="'#outside'">
+            <Portal target="'#outside'">
               <p>2</p>
-            </t>
+            </Portal>
           </div>`;
     }
 
@@ -67,50 +68,15 @@ describe("Portal", () => {
     expect(fixture.innerHTML).toBe('<div id="outside"><p>2</p></div><div><span>1</span></div>');
   });
 
-  test("simple catchError with portal", async () => {
-    class Boom extends Component {
-      static template = xml`
-          <div>
-            <span>1</span>
-            <t t-portal="'#outside'">
-              <p><t t-esc="a.b.c"/></p>
-            </t>
-          </div>`;
-    }
-
-    class Parent extends Component {
-      static template = xml`
-        <div>
-          <t t-if="error">Error</t>
-          <t t-else="">
-            <Boom />
-          </t>
-        </div>`;
-      static components = { Boom };
-
-      error: any = false;
-
-      setup() {
-        onError((err) => {
-          this.error = err;
-          this.render();
-        });
-      }
-    }
-    addOutsideDiv(fixture);
-
-    await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe('<div id="outside"></div><div>Error</div>');
-  });
-
   test("basic use of portal in dev mode", async () => {
     class Parent extends Component {
+      static components = { Portal };
       static template = xml`
           <div>
             <span>1</span>
-            <t t-portal="'#outside'">
+            <Portal target="'#outside'">
               <p>2</p>
-            </t>
+            </Portal>
           </div>`;
     }
 
@@ -122,11 +88,12 @@ describe("Portal", () => {
 
   test("conditional use of Portal", async () => {
     class Parent extends Component {
+      static components = { Portal };
       static template = xml`
             <span>1</span>
-            <t t-portal="'#outside'" t-if="state.hasPortal">
+            <Portal target="'#outside'" t-if="state.hasPortal">
               <p>2</p>
-            </t>`;
+            </Portal>`;
 
       state = useState({ hasPortal: false });
     }
@@ -153,12 +120,12 @@ describe("Portal", () => {
       static template = xml`<p><t t-esc="props.val"/></p>`;
     }
     class Parent extends Component {
-      static components = { Child };
+      static components = { Portal, Child };
       static template = xml`
               <span>1</span>
-              <t t-portal="'#outside'" t-if="state.hasPortal">
+              <Portal t-if="state.hasPortal" target="'#outside'">
                 <Child val="state.val"/>
-              </t>`;
+              </Portal>`;
       state = useState({ hasPortal: false, val: 1 });
     }
 
@@ -186,13 +153,14 @@ describe("Portal", () => {
 
   test("with target in template (before portal)", async () => {
     class Parent extends Component {
+      static components = { Portal };
       static template = xml`
             <div>
               <div id="local-target"></div>
               <span>1</span>
-              <t t-portal="'#local-target'">
+              <Portal target="'#local-target'">
                 <p>2</p>
-              </t>
+              </Portal>
             </div>`;
     }
 
@@ -204,12 +172,13 @@ describe("Portal", () => {
 
   test("with target in template (after portal)", async () => {
     class Parent extends Component {
+      static components = { Portal };
       static template = xml`
             <div>
               <span>1</span>
-              <t t-portal="'#local-target'">
+              <Portal target="'#local-target'">
                 <p>2</p>
-              </t>
+              </Portal>
               <div id="local-target"></div>
             </div>`;
     }
@@ -222,11 +191,12 @@ describe("Portal", () => {
 
   test("portal with target not in dom", async () => {
     class Parent extends Component {
+      static components = { Portal };
       static template = xml`
             <div>
-              <t t-portal="'#does-not-exist'">
+              <Portal target="'#does-not-exist'">
                 <div>2</div>
-              </t>
+              </Portal>
             </div>`;
     }
 
@@ -262,12 +232,12 @@ describe("Portal", () => {
       }
     }
     class Parent extends Component {
-      static components = { Child };
+      static components = { Portal, Child };
       static template = xml`
             <div>
-              <t t-portal="'#outside'">
+              <Portal target="'#outside'">
                 <Child val="state.val"/>
-              </t>
+              </Portal>
             </div>`;
       state = useState({ val: 1 });
     }
@@ -285,11 +255,12 @@ describe("Portal", () => {
 
   test("portal with only text as content", async () => {
     class Parent extends Component {
+      static components = { Portal };
       static template = xml`
             <div>
-              <t t-portal="'#outside'">
+              <Portal target="'#outside'">
                 <t t-esc="'only text'"/>
-              </t>
+              </Portal>
             </div>`;
     }
 
@@ -300,11 +271,12 @@ describe("Portal", () => {
 
   test("portal with no content", async () => {
     class Parent extends Component {
+      static components = { Portal };
       static template = xml`
             <div>
-              <t t-portal="'#outside'">
+              <Portal target="'#outside'">
                 <t t-if="false" t-esc="'ABC'"/>
-              </t>
+              </Portal>
             </div>`;
     }
 
@@ -315,12 +287,13 @@ describe("Portal", () => {
 
   test("portal with many children", async () => {
     class Parent extends Component {
+      static components = { Portal };
       static template = xml`
             <div>
-              <t t-portal="'#outside'">
+              <Portal target="'#outside'">
                 <div>1</div>
                 <p>2</p>
-              </t>
+              </Portal>
             </div>`;
     }
     addOutsideDiv(fixture);
@@ -330,12 +303,13 @@ describe("Portal", () => {
 
   test("portal with dynamic body", async () => {
     class Parent extends Component {
+      static components = { Portal };
       static template = xml`
             <div>
-              <t t-portal="'#outside'">
+              <Portal target="'#outside'">
                 <span t-if="state.val" t-esc="state.val"/>
                 <div t-else=""/>
-              </t>
+              </Portal>
             </div>`;
       state = useState({ val: "ab" });
     }
@@ -352,11 +326,12 @@ describe("Portal", () => {
 
   test("portal could have dynamically no content", async () => {
     class Parent extends Component {
+      static components = { Portal };
       static template = xml`
             <div>
-              <t t-portal="'#outside'">
+              <Portal target="'#outside'">
                 <span t-if="state.val" t-esc="state.val"/>
-              </t>
+              </Portal>
             </div>`;
       state = useState({ val: "ab" });
     }
@@ -384,12 +359,12 @@ describe("Portal", () => {
     }
 
     class Parent extends Component {
-      static components = { Child };
+      static components = { Portal, Child };
       static template = xml`
             <div>
-              <t t-portal="'#outside'" t-if="state.hasChild">
+              <Portal t-if="state.hasChild" target="'#outside'">
                 <Child val="state.val"/>
-              </t>
+              </Portal>
             </div>`;
       state = useState({ hasChild: false, val: 1 });
       setup() {
@@ -449,12 +424,12 @@ describe("Portal", () => {
       state = {};
     }
     class Parent extends Component {
-      static components = { Child };
+      static components = { Portal, Child };
       static template = xml`
         <div>
-          <t t-portal="'#outside'" >
+          <Portal target="'#outside'" >
             <Child error="state.error"/>
-          </t>
+          </Portal>
         </div>`;
       state = { error: false };
       setup() {
@@ -480,12 +455,12 @@ describe("Portal", () => {
             <button>child</button>`;
     }
     class Parent extends Component {
-      static components = { Child };
+      static components = { Portal, Child };
       static template = xml`
             <div>
-              <t t-portal="'#outside'">
+              <Portal target="'#outside'">
                 <Child />
-              </t>
+              </Portal>
             </div>`;
     }
     const env = {};
@@ -507,11 +482,11 @@ describe("Portal", () => {
       }
     }
     class Child extends Component {
-      static components = { Child2 };
+      static components = { Portal, Child2 };
       static template = xml`
-            <t t-portal="'#outside'">
+            <Portal target="'#outside'">
               <t t-slot="default"/>
-            </t>`;
+            </Portal>`;
     }
     class Parent extends Component {
       static components = { Child, Child2 };
@@ -533,202 +508,6 @@ describe("Portal", () => {
     elem(childInst!).dispatchEvent(new CustomEvent("custom"));
     expect(steps).toEqual(["custom"]);
   });
-
-  test("Add and remove portals", async () => {
-    class Parent extends Component {
-      static template = xml`
-          <t t-portal="'#outside'" t-foreach="portalIds" t-as="portalId" t-key="portalId">
-            Portal<t t-esc="portalId"/>
-          </t>`;
-      portalIds = useState([] as any);
-    }
-
-    addOutsideDiv(fixture);
-    const parent = await mount(Parent, fixture);
-
-    expect(fixture.innerHTML).toBe('<div id="outside"></div>');
-
-    parent.portalIds.push(1);
-    await nextTick();
-    expect(fixture.innerHTML).toBe('<div id="outside"> Portal1</div>');
-
-    parent.portalIds.push(2);
-    await nextTick();
-    expect(fixture.innerHTML).toBe('<div id="outside"> Portal1 Portal2</div>');
-
-    parent.portalIds.pop();
-    await nextTick();
-    expect(fixture.innerHTML).toBe('<div id="outside"> Portal1</div>');
-
-    parent.portalIds.pop();
-    await nextTick();
-    expect(fixture.innerHTML).toBe('<div id="outside"></div>');
-  });
-
-  test("Add and remove portals with t-foreach", async () => {
-    class Parent extends Component {
-      static template = xml`
-          <t t-foreach="portalIds" t-as="portalId" t-key="portalId">
-            <div>
-              <t t-esc="portalId"/>
-              <t t-portal="'#outside'">
-                Portal<t t-esc="portalId"/>
-              </t>
-            </div>
-          </t>`;
-      portalIds = useState([] as any);
-    }
-
-    addOutsideDiv(fixture);
-    const parent = await mount(Parent, fixture);
-
-    expect(fixture.innerHTML).toBe('<div id="outside"></div>');
-
-    parent.portalIds.push(1);
-    await nextTick();
-    expect(fixture.innerHTML).toBe('<div id="outside"> Portal1</div><div>1</div>');
-
-    parent.portalIds.push(2);
-    await nextTick();
-    expect(fixture.innerHTML).toBe(
-      '<div id="outside"> Portal1 Portal2</div><div>1</div><div>2</div>'
-    );
-
-    parent.portalIds.pop();
-    await nextTick();
-    expect(fixture.innerHTML).toBe('<div id="outside"> Portal1</div><div>1</div>');
-
-    parent.portalIds.pop();
-    await nextTick();
-    expect(fixture.innerHTML).toBe('<div id="outside"></div>');
-  });
-
-  test("conditional use of Portal with div", async () => {
-    class Parent extends Component {
-      static template = xml`
-              <t t-if="state.hasPortal">
-                <div>
-                  <span>hasPortal</span>
-                  <t t-portal="'#outside'">
-                    <p>thePortal</p>
-                  </t>
-                </div>
-              </t>`;
-
-      state = useState({ hasPortal: false });
-    }
-
-    addOutsideDiv(fixture);
-    const parent = await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe('<div id="outside"></div>');
-
-    parent.state.hasPortal = true;
-    await nextTick();
-    expect(fixture.innerHTML).toBe(
-      '<div id="outside"><p>thePortal</p></div><div><span>hasPortal</span></div>'
-    );
-
-    parent.state.hasPortal = false;
-    await nextTick();
-    expect(fixture.innerHTML).toBe('<div id="outside"></div>');
-
-    parent.state.hasPortal = true;
-    await nextTick();
-    expect(fixture.innerHTML).toBe(
-      '<div id="outside"><p>thePortal</p></div><div><span>hasPortal</span></div>'
-    );
-  });
-
-  test("conditional use of Portal with child and div", async () => {
-    class Child extends Component {
-      static template = xml`
-        <div>
-          <span>hasPortal</span>
-          <t t-foreach="[1]" t-as="elem" t-key="elem">
-            <t t-portal="'#outside'">
-              <p>thePortal</p>
-            </t>
-          </t>
-        </div>`;
-      
-    }
-    class Parent extends Component {
-      static template = xml`
-        <t t-if="state.hasPortal">
-          <Child />
-        </t>`;
-
-      static components = { Child };
-
-      state = useState({ hasPortal: false });
-    }
-
-    addOutsideDiv(fixture);
-    const parent = await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe('<div id="outside"></div>');
-
-    parent.state.hasPortal = true;
-    await nextTick();
-    expect(fixture.innerHTML).toBe(
-      '<div id="outside"><p>thePortal</p></div><div><span>hasPortal</span></div>'
-    );
-
-    parent.state.hasPortal = false;
-    await nextTick();
-    expect(fixture.innerHTML).toBe('<div id="outside"></div>');
-
-    parent.state.hasPortal = true;
-    await nextTick();
-    expect(fixture.innerHTML).toBe(
-      '<div id="outside"><p>thePortal</p></div><div><span>hasPortal</span></div>'
-    );
-  });
-
-  test.only("conditional use of Portal with child and div, variation", async () => {
-    class Child extends Component {
-      static template = xml`
-          <span>hasPortal</span>
-          <t t-foreach="[1]" t-as="elem" t-key="elem">
-            <t t-portal="'#outside'">
-              <p>thePortal</p>
-            </t>
-          </t>`;
-      
-    }
-    class Parent extends Component {
-      static template = xml`
-        <t t-if="state.hasPortal">
-          <div>
-            <Child />
-          </div>
-        </t>`;
-
-      static components = { Child };
-
-      state = useState({ hasPortal: false });
-    }
-
-    addOutsideDiv(fixture);
-    const parent = await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe('<div id="outside"></div>');
-
-    parent.state.hasPortal = true;
-    await nextTick();
-    expect(fixture.innerHTML).toBe(
-      '<div id="outside"><p>thePortal</p></div><div><span>hasPortal</span></div>'
-    );
-
-    parent.state.hasPortal = false;
-    await nextTick();
-    expect(fixture.innerHTML).toBe('<div id="outside"></div>');
-
-    parent.state.hasPortal = true;
-    await nextTick();
-    expect(fixture.innerHTML).toBe(
-      '<div id="outside"><p>thePortal</p></div><div><span>hasPortal</span></div>'
-    );
-  });
-
 });
 
 describe("Portal: UI/UX", () => {
@@ -738,12 +517,12 @@ describe("Portal: UI/UX", () => {
             <input id="target-me" t-att-placeholder="props.val"/>`;
     }
     class Parent extends Component {
-      static components = { Child };
+      static components = { Portal, Child };
       static template = xml`
             <div>
-              <t t-portal="'#outside'">
+              <Portal target="'#outside'">
                 <Child val="state.val"/>
-              </t>
+              </Portal>
             </div>`;
       state = useState({ val: "ab" });
     }
@@ -766,13 +545,17 @@ describe("Portal: UI/UX", () => {
 });
 
 describe("Portal: Props validation", () => {
-  test("target is mandatory 1", async () => {
+  test("target is mandatory", async () => {
+    const consoleInfo = console.info;
+    console.info = jest.fn();
+
     class Parent extends Component {
+      static components = { Portal };
       static template = xml`
         <div>
-          <t t-portal>
+          <Portal>
             <div>2</div>
-          </t>
+          </Portal>
         </div>`;
     }
     let error: Error;
@@ -782,16 +565,21 @@ describe("Portal: Props validation", () => {
       error = e as Error;
     }
     expect(error!).toBeDefined();
-    expect(error!.message).toContain(`attribute without value.`);
+    expect(error!.message).toBe(`Missing props 'target' (component 'Portal')`);
+    console.info = consoleInfo;
+    expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 
-  test("target is mandatory 2", async () => {
+  test("target is not list", async () => {
+    const consoleInfo = console.info;
+    console.info = jest.fn();
     class Parent extends Component {
+      static components = { Portal };
       static template = xml`
         <div>
-          <t t-portal="">
+          <Portal target="['body']">
             <div>2</div>
-          </t>
+          </Portal>
         </div>`;
     }
     let error: Error;
@@ -801,44 +589,8 @@ describe("Portal: Props validation", () => {
       error = e as Error;
     }
     expect(error!).toBeDefined();
-    expect(error!.message).toBe(`Unexpected token ','`);
-  });
-
-  test("target must be a valid selector", async () => {
-    class Parent extends Component {
-      static template = xml`
-        <div>
-          <t t-portal="' '">
-            <div>2</div>
-          </t>
-        </div>`;
-    }
-    let error: Error;
-    try {
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
-    expect(error!).toBeDefined();
-    expect(error!.message).toBe(`' ' is not a valid selector`);
-  });
-
-  test("target must be a valid selector 2", async () => {
-    class Parent extends Component {
-      static template = xml`
-        <div>
-          <t t-portal="'aa'">
-            <div>2</div>
-          </t>
-        </div>`;
-    }
-    let error: Error;
-    try {
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
-    expect(error!).toBeDefined();
-    expect(error!.message).toBe(`invalid portal target`);
+    expect(error!.message).toBe(`Invalid Prop 'target' in component 'Portal'`);
+    console.info = consoleInfo;
+    expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 });