wip

Before this commit, portal was a Component, now is a directive.
This commit also clean some unused code, and fix an issue on the clean
optimization when a portal is found in a condition or a loop.

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",
+    "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --watch --testTimeout=5000000",
     "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,6 +2,7 @@ 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,
@@ -12,6 +13,17 @@ 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,
@@ -186,6 +198,7 @@ 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): BlockType {
+export function createBlock(str: string, deepRemove: boolean = false): BlockType {
   if (str in cache) {
     return cache[str];
   }
@@ -67,7 +67,7 @@ export function createBlock(str: string): BlockType {
 
   // step 3: build the final block class
   const template = tree.el as HTMLElement;
-  const Block = buildBlock(template, context);
+  const Block = buildBlock(template, context, deepRemove);
   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): BlockType {
+function buildBlock(template: HTMLElement, ctx: BlockCtx, deepRemove: boolean): BlockType {
   let B = createBlockClass(template, ctx);
 
   if (ctx.cbRefs.length) {
@@ -447,6 +447,14 @@ function buildBlock(template: HTMLElement, ctx: BlockCtx): BlockType {
       }
     };
     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);
   }
 
@@ -490,6 +498,7 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
     beforeRemove() {}
 
     remove() {
+      console.log('ddd')
       elementRemove.call(this.el);
     }
 

src/blockdom/list.ts

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

src/blockdom/multi.ts

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

src/compiler/code_generator.ts

@@ -19,6 +19,7 @@ import {
   ASTTSet,
   ASTTranslation,
   ASTType,
+  ASTTPortal,
 } from "./parser";
 
 type BlockType = "block" | "text" | "multi" | "list" | "html" | "comment";
@@ -64,13 +65,15 @@ class BlockDescription {
   type: BlockType;
   parentVar: string = "";
   id: number;
+  deepRemove: boolean;
 
-  constructor(target: CodeTarget, type: BlockType) {
+  constructor(target: CodeTarget, type: BlockType, deepRemove: boolean = false) {
     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 {
@@ -99,7 +102,7 @@ class BlockDescription {
       }
       return `${this.blockName}(${params})`;
     } else if (this.type === "list") {
-      return `list(c_block${this.id})`;
+      return `list(c_block${this.id}${this.deepRemove ? ", true" : ""})`;
     }
     return expr;
   }
@@ -250,6 +253,8 @@ 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(``);
@@ -259,9 +264,15 @@ 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}\`);`);
+            mainCode.push(
+              `let ${block.blockName} = tag => createBlock(\`${xmlString}\`${
+                deepRemove ? ", true" : ""
+              });`
+            );
           } else {
-            mainCode.push(`let ${block.blockName} = createBlock(\`${xmlString}\`);`);
+            mainCode.push(
+              `let ${block.blockName} = createBlock(\`${xmlString}\`${deepRemove ? ", true" : ""});`
+            );
           }
         }
       }
@@ -317,10 +328,11 @@ export class CodeGenerator {
   createBlock(
     parentBlock: BlockDescription | null,
     type: BlockType,
-    ctx: Context
+    ctx: Context,
+    deepRemove: boolean = false
   ): BlockDescription {
     const hasRoot = this.target.hasRoot;
-    const block = new BlockDescription(this.target, type);
+    const block = new BlockDescription(this.target, type, deepRemove);
     if (!hasRoot && !ctx.preventRoot) {
       this.target.hasRoot = true;
       block.isRoot = true;
@@ -445,6 +457,8 @@ export class CodeGenerator {
       case ASTType.TTranslation:
         this.compileTTranslation(ast, ctx);
         break;
+      case ASTType.TPortal:
+        this.compileTPortal(ast, ctx);
     }
   }
 
@@ -644,6 +658,7 @@ export class CodeGenerator {
           index: block!.childNumber,
           forceNewBlock: false,
           isLast: ctx.isLast && i === children.length - 1,
+          tKeyExpr: ctx.tKeyExpr,
         });
         this.compileAST(child, subCtx);
       }
@@ -703,7 +718,7 @@ export class CodeGenerator {
     if (ast.body) {
       const nextId = BlockDescription.nextBlockId;
       const subCtx: Context = createContext(ctx);
-      this.compileAST({ type: ASTType.Multi, content: ast.body }, subCtx);
+      this.compileAST({ type: ASTType.Multi, content: ast.body, deepRemove: false }, subCtx);
       this.helpers.add("withDefault");
       expr = `withDefault(${expr}, b${nextId})`;
     }
@@ -764,7 +779,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}])`, block!, ctx)!;
+      this.insertBlock(`multi([${args}]${ast.deepRemove ? ", true" : ""})`, block!, ctx)!;
     }
   }
 
@@ -773,7 +788,7 @@ export class CodeGenerator {
     if (block) {
       this.insertAnchor(block);
     }
-    block = this.createBlock(block, "list", ctx);
+    block = this.createBlock(block, "list", ctx, ast.deepRemove);
     this.target.loopLevel++;
     const loopVar = `i${this.target.loopLevel}`;
     this.addLine(`ctx = Object.create(ctx);`);
@@ -908,7 +923,7 @@ export class CodeGenerator {
       }
 
       const args = block!.children.map((c) => c.varName).join(", ");
-      this.insertBlock(`multi([${args}])`, block!, ctx)!;
+      this.insertBlock(`multi([${args}]${ast.deepRemove ? ", true" : ""})`, block!, ctx)!;
     }
   }
 
@@ -920,7 +935,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 }, subCtx);
+      this.compileAST({ type: ASTType.Multi, content: ast.body, deepRemove: false }, subCtx);
       if (nextId !== BlockDescription.nextBlockId) {
         this.helpers.add("zero");
         this.addLine(`ctx[zero] = b${nextId};`);
@@ -975,7 +990,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 };
+      const bodyAst: AST = { type: ASTType.Multi, content: ast.body, deepRemove: false };
       const name = this.compileInNewTarget("value", bodyAst, ctx);
       let value = `new LazyValue(${name}, ctx, node)`;
       value = ast.value ? (value ? `withDefault(${expr}, ${value})` : expr) : value;
@@ -1102,7 +1117,10 @@ export class CodeGenerator {
       this.insertAnchor(block);
     }
 
-    const keyArg = `key+\`${key}\`,${ctx.tKeyExpr}`;
+    let keyArg = `key + \`${key}\``;
+    if (ctx.tKeyExpr) {
+      keyArg = `${ctx.tKeyExpr} + ${keyArg}`;
+    }
     const blockArgs = `${expr}, ${propString}, ${keyArg}, node, ctx`;
     let blockExpr = `component(${blockArgs})`;
     if (ast.isDynamic) {
@@ -1158,4 +1176,15 @@ 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,6 +20,7 @@ export const enum ASTType {
   TSlot,
   TCallBlock,
   TTranslation,
+  TPortal,
 }
 
 export interface ASTText {
@@ -55,6 +56,7 @@ export interface ASTDomNode {
 export interface ASTMulti {
   type: ASTType.Multi;
   content: AST[];
+  deepRemove: boolean;
 }
 
 export interface ASTTEsc {
@@ -75,6 +77,7 @@ export interface ASTTif {
   content: AST;
   tElif: { condition: string; content: AST }[] | null;
   tElse: AST | null;
+  deepRemove: boolean;
 }
 
 export interface ASTTSet {
@@ -92,8 +95,7 @@ export interface ASTTForEach {
   key: string | null;
   body: AST;
   memo: string;
-  isOnlyChild: boolean;
-  hasNoComponent: boolean;
+  deepRemove: boolean;
   hasNoFirst: boolean;
   hasNoLast: boolean;
   hasNoIndex: boolean;
@@ -149,6 +151,12 @@ export interface ASTTranslation {
   content: AST | null;
 }
 
+export interface ASTTPortal {
+  type: ASTType.TPortal;
+  target: string;
+  content: AST;
+}
+
 export type AST =
   | ASTText
   | ASTComment
@@ -166,7 +174,8 @@ export type AST =
   | ASTTCallBlock
   | ASTLog
   | ASTDebug
-  | ASTTranslation;
+  | ASTTranslation
+  | ASTTPortal;
 
 // -----------------------------------------------------------------------------
 // Parser
@@ -195,6 +204,7 @@ 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) ||
@@ -351,9 +361,6 @@ 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,
@@ -477,9 +484,8 @@ function parseTForEach(node: Element, ctx: ParsingContext): AST | null {
     elem,
     body,
     memo,
+    deepRemove: needDeepRemove(body),
     key,
-    isOnlyChild: false,
-    hasNoComponent: hasNoComponent(body),
     hasNoFirst,
     hasNoLast,
     hasNoIndex,
@@ -488,54 +494,40 @@ function parseTForEach(node: Element, ctx: ParsingContext): AST | null {
 }
 
 /**
- * @returns true if we are sure the ast does not contain any component
+ * @returns true if we are sure that a deep remove (without optimisation) is needed, for exemple
+ * if there is a portal.
  */
-function hasNoComponent(ast: AST): boolean {
+function needDeepRemove(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 true;
+      return false;
+
     case ASTType.TKey:
-      return hasNoComponent(ast.content);
+      return needDeepRemove(ast.content);
     case ASTType.TDebug:
     case ASTType.TLog:
     case ASTType.TTranslation:
-      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;
-    }
+      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));
   }
 }
 
@@ -636,12 +628,21 @@ 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,
   };
 }
 
@@ -805,6 +806,35 @@ 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
 // -----------------------------------------------------------------------------
@@ -839,7 +869,11 @@ function parseChildNodes(node: Node, ctx: ParsingContext): AST | null {
     case 1:
       return children[0];
     default:
-      return { type: ASTType.Multi, content: children };
+      return {
+        type: ASTType.Multi,
+        content: children,
+        deepRemove: children.some((ast) => needDeepRemove(ast)),
+      };
   }
 }
 

src/component/component_node.ts

@@ -27,34 +27,15 @@ export function component(
   name: string | typeof Component,
   props: any,
   key: string,
-  tKey: null | string,
   ctx: ComponentNode,
   parent: any
 ): ComponentNode {
-  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 node: any = ctx.children[key];
   let isDynamic = typeof name !== "string";
 
   if (node) {
     if (node.status < STATUS.MOUNTED) {
-      destroy.call(node);
+      node.destroy();
       node = undefined;
     } else if (node.status === STATUS.DESTROYED) {
       node = undefined;
@@ -79,7 +60,7 @@ export function component(
       }
     }
     node = new ComponentNode(C, props, ctx.app, ctx);
-    parentChildren[key] = node;
+    ctx.children[key] = node;
 
     const fiber = makeChildFiber(node, parentFiber);
     node.initiateRender(fiber);
@@ -109,7 +90,6 @@ 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[] = [];
@@ -296,15 +276,35 @@ 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,6 +144,7 @@ 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,7 +36,6 @@ 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,22 +1,21 @@
-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;
 
-class VPortal extends VText implements Partial<VNode<VPortal>> {
+export class VPortal extends VText implements Partial<VNode<VPortal>> {
   //   selector: string;
   realBDom: BDom | null;
   target: HTMLElement | null = null;
 
-  constructor(selector: string, realBDom: BDom) {
+  constructor(selector: string, realBDom: BDom, ownerComponent: ComponentNode) {
     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;
@@ -50,22 +49,3 @@ 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\`,null, node, ctx);
+      b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
-    let b3 = component(\`Child\`, {}, key+\`__2\`,null, node, ctx);
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Child\`, {}, key + \`__2\`, 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\`,null, node, ctx);
-    let b3 = component(\`Child\`, {}, key+\`__2\`,null, node, ctx);
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Child\`, {}, key + \`__2\`, 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\`,null, node, ctx);
-    let b3 = component(\`Parent\`, {}, key+\`__2\`,null, node, ctx);
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Parent\`, {}, key + \`__2\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {}, key + \`__1\`, 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}\`,null, node, ctx), key1);
+      c_block2[i1] = withKey(component(\`Quantity\`, {id: ctx['id']}, key + \`__1__\${key1}\`, 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}\`,null, node, ctx), key1);
+      c_block4[i1] = withKey(component(\`SlotButton\`, {class: ctx['slot_container'],slot: ctx['slot']}, key + \`__1__\${key1}\`, 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\`,null, node, ctx);
-      let b27 = component(\`BundlesList\`, {bundles: ctx['bundles'].dev,search: ctx['search']}, key+\`__3\`,null, node, ctx);
+      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);
       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,6 +146,7 @@ describe("qweb parser", () => {
           content: [],
         },
       ],
+      deepRemove: false,
     });
   });
 
@@ -253,6 +254,7 @@ describe("qweb parser", () => {
           content: [],
         },
       ],
+      deepRemove: false,
     });
   });
 
@@ -503,6 +505,7 @@ describe("qweb parser", () => {
           },
           tElif: null,
           tElse: null,
+          deepRemove: false,
         },
       ],
     });
@@ -518,6 +521,7 @@ describe("qweb parser", () => {
       },
       tElif: null,
       tElse: null,
+      deepRemove: false,
     });
   });
 
@@ -538,6 +542,7 @@ describe("qweb parser", () => {
       },
       tElif: null,
       tElse: null,
+      deepRemove: false,
     });
   });
 
@@ -554,6 +559,7 @@ describe("qweb parser", () => {
         type: ASTType.Text,
         value: "else",
       },
+      deepRemove: false,
     });
   });
 
@@ -572,6 +578,7 @@ describe("qweb parser", () => {
         },
       ],
       tElse: null,
+      deepRemove: false,
     });
   });
 
@@ -593,6 +600,7 @@ describe("qweb parser", () => {
         type: ASTType.Text,
         value: "else",
       },
+      deepRemove: false,
     });
   });
 
@@ -650,6 +658,7 @@ describe("qweb parser", () => {
           },
         ],
       },
+      deepRemove: false,
     });
   });
 
@@ -731,6 +740,7 @@ describe("qweb parser", () => {
       },
       tElif: null,
       tElse: null,
+      deepRemove: false,
     });
   });
 
@@ -753,6 +763,7 @@ 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,
         },
       ],
     });
@@ -776,14 +787,13 @@ 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,
     });
   });
 
@@ -793,14 +803,13 @@ 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,
     });
   });
 
@@ -809,8 +818,6 @@ describe("qweb parser", () => {
       type: ASTType.TForEach,
       collection: "list",
       elem: "item",
-      hasNoComponent: true,
-      isOnlyChild: false,
       key: "item_index",
       body: {
         type: ASTType.DomNode,
@@ -828,6 +835,7 @@ describe("qweb parser", () => {
       hasNoIndex: false,
       hasNoLast: true,
       hasNoValue: true,
+      deepRemove: false,
     });
   });
 
@@ -836,8 +844,6 @@ 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: "",
@@ -845,6 +851,7 @@ describe("qweb parser", () => {
       hasNoIndex: true,
       hasNoLast: true,
       hasNoValue: true,
+      deepRemove: false,
     });
   });
 
@@ -856,8 +863,6 @@ describe("qweb parser", () => {
       collection: "list",
       elem: "item",
       key: "item_index",
-      hasNoComponent: true,
-      isOnlyChild: false,
       body: {
         type: ASTType.DomNode,
         tag: "span",
@@ -874,6 +879,7 @@ describe("qweb parser", () => {
       hasNoIndex: false,
       hasNoLast: true,
       hasNoValue: true,
+      deepRemove: false,
     });
   });
 
@@ -887,13 +893,12 @@ 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",
@@ -911,6 +916,7 @@ describe("qweb parser", () => {
       hasNoIndex: false,
       hasNoLast: true,
       hasNoValue: true,
+      deepRemove: false,
     });
   });
 
@@ -924,8 +930,6 @@ describe("qweb parser", () => {
       collection: "categories",
       elem: "category",
       key: "category_index",
-      hasNoComponent: true,
-      isOnlyChild: false,
       body: {
         type: ASTType.DomNode,
         tag: "option",
@@ -945,6 +949,7 @@ describe("qweb parser", () => {
       hasNoIndex: false,
       hasNoLast: true,
       hasNoValue: true,
+      deepRemove: false,
     });
   });
 
@@ -966,14 +971,13 @@ 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,
         },
       ],
     });
@@ -995,8 +999,6 @@ describe("qweb parser", () => {
       collection: "list",
       elem: "item",
       key: "item_index",
-      hasNoComponent: true,
-      isOnlyChild: false,
       body: {
         type: ASTType.DomNode,
         tag: "span",
@@ -1013,6 +1015,7 @@ describe("qweb parser", () => {
       hasNoIndex: false,
       hasNoLast: true,
       hasNoValue: true,
+      deepRemove: false,
     });
   });
 
@@ -1022,8 +1025,6 @@ describe("qweb parser", () => {
       collection: "list",
       elem: "item",
       key: "item_index",
-      hasNoComponent: false,
-      isOnlyChild: false,
       body: {
         type: ASTType.TComponent,
         isDynamic: false,
@@ -1037,6 +1038,7 @@ describe("qweb parser", () => {
       hasNoIndex: false,
       hasNoLast: true,
       hasNoValue: true,
+      deepRemove: false,
     });
   });
 
@@ -1048,8 +1050,6 @@ describe("qweb parser", () => {
       collection: "list",
       elem: "item",
       key: "item_index",
-      hasNoComponent: false,
-      isOnlyChild: false,
       body: {
         type: ASTType.TCall,
         name: "blap",
@@ -1060,6 +1060,7 @@ describe("qweb parser", () => {
       hasNoIndex: false,
       hasNoLast: false,
       hasNoValue: false,
+      deepRemove: false,
     });
   });
 
@@ -1073,14 +1074,13 @@ 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,6 +1130,7 @@ describe("qweb parser", () => {
       condition: "condition",
       tElif: null,
       tElse: null,
+      deepRemove: false,
       content: {
         type: ASTType.TCall,
         name: "blabla",
@@ -1284,6 +1285,7 @@ describe("qweb parser", () => {
                 ns: null,
               },
             ],
+            deepRemove: false,
           },
         },
       },
@@ -1604,7 +1606,7 @@ describe("qweb parser", () => {
           attrs: {},
           content: [
             {
-              type: 0,
+              type: ASTType.Text,
               value: "word",
             },
           ],
@@ -1616,19 +1618,18 @@ describe("qweb parser", () => {
           type: ASTType.DomNode,
           ns: null,
         },
-        type: 16,
+        type: ASTType.TTranslation,
       },
       collection: "list",
       elem: "item",
-      hasNoComponent: true,
       hasNoFirst: true,
       hasNoIndex: false,
       hasNoLast: true,
       hasNoValue: true,
-      isOnlyChild: false,
       key: "item_index",
       memo: "",
-      type: 9,
+      deepRemove: false,
+      type: ASTType.TForEach,
     });
   });
 
@@ -1787,4 +1788,34 @@ 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\`,null, node, ctx);
+    return component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {val: undefined}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {value: ctx['state'].counter}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {value: 42}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {child: ctx['state'].child}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`ChildA\`, {}, key + \`__1\`, node, ctx);
     } else {
-      b3 = component(\`ChildB\`, {}, key+\`__2\`,null, node, ctx);
+      b3 = component(\`ChildB\`, {}, key + \`__2\`, 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}\`,null, node, ctx);
-      let b5 = component(\`SubWidget\`, {}, key+\`__2__\${key1}\`,null, node, ctx);
+      let b4 = component(\`SubWidget\`, {}, key + \`__1__\${key1}\`, node, ctx);
+      let b5 = component(\`SubWidget\`, {}, key + \`__2__\${key1}\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`GrandChild\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     const tKey_1 = 4;
-    let b3 = toggler(tKey_1, component(\`Child\`, {}, key+\`__2\`,tKey_1, node, ctx));
+    let b3 = toggler(tKey_1, component(\`Child\`, {}, tKey_1 + key + \`__2\`, 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\`,null, node, ctx);
+    return component(\`Counter\`, {}, key + \`__1\`, 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'}, key+\`__1\`,tKey_1, node, ctx));
+    let b2 = toggler(tKey_1, component(\`Child\`, {blip: '1'}, tKey_1 + key + \`__1\`, node, ctx));
     const tKey_2 = 1;
-    let b3 = toggler(tKey_2, component(\`Child\`, {blip: '2'}, key+\`__2\`,tKey_2, node, ctx));
+    let b3 = toggler(tKey_2, component(\`Child\`, {blip: '2'}, tKey_2 + key + \`__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\`,null, node, ctx);
+    b4 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+      b3 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+      b3 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+      b3 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`Child\`, {}, key + \`__1\`, 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\`, {}, key+\`__1\`,tKey_1, node, ctx));
+      b2 = toggler(tKey_1, component(\`Child\`, {}, tKey_1 + key + \`__1\`, node, ctx));
     }
-    b3 = component(\`Child\`, {}, key+\`__2\`,null, node, ctx);
+    b3 = component(\`Child\`, {}, key + \`__2\`, 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\`,null, node, ctx);
+      b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`GrandChild\`, {}, key + \`__1\`, 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\`,null, node, ctx);
-    let b3 = component(\`Child\`, {}, key+\`__2\`,null, node, ctx);
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Child\`, {}, key + \`__2\`, 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'], key+\`__1\`,tKey_1, node, ctx));
+    let b2 = toggler(tKey_1, component(\`Child\`, ctx['childProps'], tKey_1 + key + \`__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}, key+\`__1\`,tKey_1, node, ctx));
+    return toggler(tKey_1, component(\`Custom\`, {key: ctx['props'].key,subKey: ctx['props'].subKey}, tKey_1 + key + \`__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\`,null, node, ctx);
+    return component(\`Child\`, {flag: ctx['state'].flag}, key + \`__1\`, 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\`,null, node, ctx);
+    let b4 = component(\`SomeComponent\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`GComp\`, {}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1124,6 +1124,59 @@ 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']}, key+\`__1\`,tKey_1, node, ctx));
+    return toggler(tKey_1, component(\`B\`, {fromA: ctx['state']}, tKey_1 + key + \`__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\`,null, node, ctx);
+    return component(\`C\`, {fromA: ctx['props'].fromA}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`TestW\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA,fromB: ctx['state'].fromB}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA,fromB: ctx['state'].fromB}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA,fromB: ctx['state'].fromB}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA,fromC: ctx['state'].fromC}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA,fromC: ctx['state'].fromC}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, 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\`,null, node, ctx);
-    let b3 = component(\`ComponentC\`, {fromA: ctx['state'].fromA}, key+\`__2\`,null, node, ctx);
+    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    let b3 = component(\`ComponentC\`, {fromA: ctx['state'].fromA}, key + \`__2\`, 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\`,null, node, ctx);
+    let b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA,fromC: ctx['state'].fromC}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ComponentB\`, {value: ctx['state'].value}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`ComponentC\`, {value: ctx['props'].value}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {val: ctx['state'].valA}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {val: ctx['val']}, key + \`__1\`, 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\`,null, node, ctx);
+    b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     if (ctx['state'].bool) {
-      b3 = component(\`Child\`, {}, key+\`__2\`,null, node, ctx);
+      b3 = component(\`Child\`, {}, key + \`__2\`, 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\`,null, node, ctx);
+    let b2 = component(\`B\`, {fromA: ctx['state'].fromA}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`C\`, {fromB: ctx['state'].fromB,fromA: ctx['props'].fromA}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`B\`, {fromA: ctx['state'].fromA}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`C\`, {fromB: ctx['state'].fromB,fromA: ctx['props'].fromA}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`B\`, {fromA: ctx['state'].fromA}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`C\`, {fromB: ctx['state'].fromB,fromA: ctx['props'].fromA}, key + \`__1\`, 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\`,null, node, ctx);
+      b8 = component(\`D\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`ChildA\`, {}, key + \`__1\`, node, ctx);
     }
     if (ctx['state'].flagB) {
-      b3 = component(\`ChildB\`, {}, key+\`__2\`,null, node, ctx);
+      b3 = component(\`ChildB\`, {}, key + \`__2\`, 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\`,null, node, ctx);
+    b2 = component(\`ChildA\`, {val: ctx['state'].valA}, key + \`__1\`, node, ctx);
     if (ctx['state'].flagB) {
-      b3 = component(\`ChildB\`, {val: ctx['state'].valB}, key+\`__2\`,null, node, ctx);
+      b3 = component(\`ChildB\`, {val: ctx['state'].valB}, key + \`__2\`, 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\`,null, node, ctx);
+    b2 = component(\`ChildA\`, {val: ctx['state'].valA}, key + \`__1\`, node, ctx);
     if (ctx['state'].flagB) {
-      b3 = component(\`ChildB\`, {val: ctx['state'].valB}, key+\`__2\`,null, node, ctx);
+      b3 = component(\`ChildB\`, {val: ctx['state'].valB}, key + \`__2\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Parent\`, {state: ctx['state']}, key + \`__1\`, 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\`,null, node, ctx);
-    let b3 = component(\`ReactiveChild\`, {}, key+\`__2\`,null, node, ctx);
+    let b2 = component(\`DelayedChild\`, {value: ctx['props'].state.value}, key + \`__1\`, node, ctx);
+    let b3 = component(\`ReactiveChild\`, {}, key + \`__2\`, 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\`,null, node, ctx);
+      b2 = component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubChild\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     }
     return block1([hdlr1], [b2]);
   }
@@ -1143,6 +1143,72 @@ 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
 ) {
@@ -1151,7 +1217,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']}, key+\`__1\`,tKey_1, node, ctx)));
+    return toggler(tKey_1, toggler(Comp1, component(Comp1, {key: ctx['key']}, tKey_1 + key + \`__1\`, node, ctx)));
   }
 }"
 `;
@@ -1181,7 +1247,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}, key+\`__1\`,tKey_1, node, ctx));
+      b2 = toggler(tKey_1, component(\`Panel\`, {val: ctx['state'].panel}, tKey_1 + key + \`__1\`, node, ctx));
     }
     return block1([], [b2]);
   }
@@ -1209,7 +1275,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\`,null, node, ctx);
+    return component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
   }
 }"
 `;
@@ -1233,7 +1299,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\`,null, node, ctx);
+    let b2 = component(\`ChildA\`, {val: ctx['state'].valA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1261,7 +1327,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\`,null, node, ctx);
+    let b2 = component(\`ChildA\`, {val: ctx['state'].valA}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`SomeMispelledComponent\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ErrorComponent\`, {flag: ctx['state'].flag}, key + \`__1\`, 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\`,null, node, ctx);
+      b3 = component(\`Boom\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`ErrorComponent\`, {flag: ctx['state'].flag}, key + \`__1\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
+    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, 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\`,null, node, ctx);
+    return component(\`ErrorComponent\`, {}, key + \`__1\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
+    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, 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\`,null, node, ctx);
-    let b4 = component(\`ErrorComponent\`, {}, key+\`__2\`,null, node, ctx);
+    let b3 = component(\`ClassicCompoent\`, {}, key + \`__1\`, node, ctx);
+    let b4 = component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
     return multi([b3, b4]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b5 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__3\`,null, node, ctx);
+    let b5 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, 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\`,null, node, ctx);
+    return component(\`ErrorComponent\`, {}, key + \`__1\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
+    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, 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\`,null, node, ctx);
+    return component(\`ErrorComponent\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+      b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, 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\`,null, node, ctx);
+    return component(\`B\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`C\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+      b3 = component(\`Boom\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+      b3 = component(\`ErrorComponent\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`ErrorComponent\`, {}, key + \`__1\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
+    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, 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\`,null, node, ctx);
+    return component(\`ErrorComponent\`, {message: ctx['state'].message}, key + \`__1\`, 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\`,null, node, ctx);
+    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, 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\`,null, node, ctx);
+    return component(\`ErrorComponent\`, {}, key + \`__1\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
+    let b3 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, 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\`,null, node, ctx);
-    let b4 = component(\`ErrorComponent\`, {}, key+\`__2\`,null, node, ctx);
+    let b3 = component(\`ClassicCompoent\`, {}, key + \`__1\`, node, ctx);
+    let b4 = component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
     return multi([b3, b4]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b5 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__3\`,null, node, ctx);
+    let b5 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, 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\`,null, node, ctx);
+      b3 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Boom\`, {}, key + \`__1\`, 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\`,null, node, ctx));
+    return toggler(Comp1, component(Comp1, {}, key + \`__1\`, 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}\`,null, node, ctx), key1);
+      c_block1[i1] = withKey(component(\`ErrorHandler\`, {onError: ()=>this.cleanUp(v1.id),slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__2__\${key1}\`, 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\`,null, node, ctx);
+    return component(\`ErrorComponent\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`OK\`, {}, key+\`__1\`,null, node, ctx);
-    let b4 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__3\`,null, node, ctx);
+    let b2 = component(\`OK\`, {}, key + \`__1\`, node, ctx);
+    let b4 = component(\`ErrorBoundary\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, 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\`,null, node, ctx);
+    return component(\`Concrete\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Concrete\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {p: 1}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     }
     if (!ctx['env'].options.flag) {
-      b3 = component(\`OtherChild\`, {}, key+\`__2\`,null, node, ctx);
+      b3 = component(\`OtherChild\`, {}, key + \`__2\`, 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\`,null, node, ctx);
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     }
     if (!ctx['state'].flag) {
-      b3 = component(\`OtherChild\`, {}, key+\`__2\`,null, node, ctx);
+      b3 = component(\`OtherChild\`, {}, key + \`__2\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {p: 1}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ComponentB\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`ComponentC\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`MyComponent\`, {value: ctx['state'].value}, key + \`__1\`, 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\`,null, node, ctx);
+    let b3 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`MyComponent\`, {}, key + \`__1\`, 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\`,null, node, ctx);
-    let b3 = component(\`C\`, {}, key+\`__2\`,null, node, ctx);
+    let b2 = component(\`B\`, {}, key + \`__1\`, node, ctx);
+    let b3 = component(\`C\`, {}, key + \`__2\`, 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\`,null, node, ctx);
+    b2 = component(\`D\`, {}, key + \`__1\`, node, ctx);
     if (ctx['state'].flag) {
-      b3 = component(\`E\`, {}, key+\`__2\`,null, node, ctx);
+      b3 = component(\`E\`, {}, key + \`__2\`, node, ctx);
     } else {
-      b4 = component(\`F\`, {}, key+\`__3\`,null, node, ctx);
+      b4 = component(\`F\`, {}, key + \`__3\`, 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\`,null, node, ctx);
+      let b3 = component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {a: ctx['state'].a}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`GrandChild\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`GrandChild\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ChildChild\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {a: ctx['state'].a}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`ChildChild\`, {n: ctx['props'].n}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {greetings: ctx['greetings']}, key + \`__1\`, 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}\`,null, node, ctx), key1);
+      c_block1[i1] = withKey(component(\`Child\`, {onClick: ev=>v1(v2.val,ev)}, key + \`__1__\${key1}\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {value: ctx['state'].val}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {'prop-name': 7}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {'some-dashed-prop': 5,'a.b': 'keyword prop'}, key + \`__1\`, 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\`,null, node, ctx);
+    let b3 = component(\`Child\`, {val: ctx['abc']}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {val: ctx['abc']}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {val: ctx['val']}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {propName: \`1\${ctx['someVal']}3\`}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {val: ctx['state'].val,fn: bind(ctx, ctx['someFunction'])}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {doSomething: bind(ctx, ctx['doSomething'])}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, props1, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`SubComp\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, 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\`,null, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'footer': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Dialog\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b4 = component(\`Dialog\`, {slots: {'header': {__render: slot1, __ctx: ctx1}, 'footer': {__render: slot2, __ctx: ctx1}}}, key + \`__1\`, 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\`,null, node, 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);
     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\`,null, node, ctx);
+    let b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     return multi([b2, b3]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`GrandChild\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, 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\`,null, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, 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\`,null, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'header': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, 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\`,null, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, 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\`,null, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'footer': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, 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\`,null, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, 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\`,null, node, ctx);
+    let b6 = component(\`Toggler\`, {slots: {'slot1': {__render: slot1, __ctx: ctx1}, 'slot2': {__render: slot2, __ctx: ctx1}}}, key + \`__1\`, 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\`,null, node, ctx);
+    let b6 = component(\`Toggler\`, {slots: {'slot1': {__render: slot1, __ctx: ctx1}, 'slot2': {__render: slot2, __ctx: ctx1}}}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Dialog\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b5 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, 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\`,null, node, ctx);
+    let b5 = component(\`Dialog\`, {slots: {'content': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`C\`, {val: 1}, key + \`__1\`, node, ctx);
   }
   
   function slot2(ctx, node, key = \\"\\") {
-    return component(\`C\`, {val: 2}, key+\`__2\`,null, node, ctx);
+    return component(\`C\`, {val: 2}, key + \`__2\`, 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\`,null, node, ctx);
+    return component(\`B\`, {slots: {'s1': {__render: slot1, __ctx: ctx1}, 's2': {__render: slot2, __ctx: ctx1}}}, key + \`__3\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {slots: {'brol': {__render: slot3, __ctx: ctx2}}}, key + \`__1\`, 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\`,null, node, ctx);
+    let b5 = component(\`Child\`, {slots: {'brol': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}}}, key + \`__2\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {slots: {'brol': {__render: slot3, __ctx: ctx2}}}, key + \`__1\`, 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\`,null, node, ctx);
+    let b5 = component(\`Child\`, {slots: {'brol': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}}}, key + \`__2\`, 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\`,null, node, ctx);
+    let b2 = component(\`Dialog\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {slots: {'brol2': {__render: slot3, __ctx: ctx2}}}, key + \`__1\`, 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\`,null, node, ctx);
+    let b5 = component(\`Child\`, {slots: {'brol1': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}}}, key + \`__2\`, 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\`,null, node, ctx);
+    return component(\`Child2\`, {slots: {'default': {__render: slot2, __ctx: ctx}}}, key + \`__2\`, node, ctx);
   }
   
   function slot2(ctx, node, key = \\"\\") {
-    return component(\`Child3\`, {}, key+\`__1\`,null, node, ctx);
+    return component(\`Child3\`, {}, key + \`__1\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b4 = component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__3\`,null, node, ctx);
+    let b4 = component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__3\`, 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\`,null, node, ctx);
+    return component(\`Slot\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, 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\`,null, node, ctx);
+    return component(\`GrandChild\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Dialog\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1, __scope: \\"slotScope\\"}}}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, 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\`,null, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__2\`, 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\`,null, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__2\`, 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\`,null, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`SomeComponent\`, {val: ctx['state'].val}, key + \`__1\`, 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\`,null, node, ctx);
+    let b3 = component(\`GenericComponent\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
+    let b3 = component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, 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\`,null, node, ctx);
+    let b3 = component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__2\`, 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\`,null, node, ctx);
+    return component(\`GrandChild\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Link\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'footer': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, 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}\`,null, node, ctx);
+      let b7 = component(\`Link\`, {to: '/user/'+ctx['user'].id,slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, 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}\`,null, node, ctx);
+      let b5 = component(\`Link\`, {to: '/user/'+ctx['user'].id,slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, 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\`,null, node, ctx);
+    let b3 = component(\`Link\`, {to: '/user/'+ctx['state'].user.id,slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, 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\`,null, node, ctx);
+    let b3 = component(\`A\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, 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\`,null, node, ctx);
+    let b3 = component(\`B\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, 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}\`,null, node, ctx), key1);
+      c_block2[i1] = withKey(component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, 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}\`,null, node, ctx), key2);
+        c_block6[i2] = withKey(component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}__\${key2}\`, 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}\`,null, node, ctx), key1);
+      c_block2[i1] = withKey(component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, 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\`,null, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'content': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, 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\`,null, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Wrapper\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__2\`, 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\`,null, node, ctx);
+    return component(\`Child3\`, {}, key + \`__1\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
+    let b3 = component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, 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\`,null, node, ctx);
+    return component(\`Portal\`, {slots: {'default': {__render: slot2, __ctx: ctx}}}, key + \`__1\`, 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\`,null, node, ctx);
+    let b4 = component(\`Modal\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, 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\`,null, node, ctx);
+    return component(\`Dialog\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Wrapper\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, 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\`,null, node, ctx);
+    let b3 = component(\`Slotted\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__2\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`SlotComponent\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
+    let b3 = component(\`SlotComponent\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {class: 'fromparent'}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {class: 'some-class'}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {class: 'fromparent'}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`ChildChild\`, {class: (ctx['props'].class||'')+' fromchild'}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {class: 'a  b'}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {class: 'someclass',child: ctx['state'].child}, key + \`__1\`, 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\`,null, node, ctx);
+      b2 = component(\`ChildA\`, {class: ctx['props'].class}, key + \`__1\`, node, ctx);
     } else {
-      b3 = component(\`ChildB\`, {class: ctx['props'].class}, key+\`__2\`,null, node, ctx);
+      b3 = component(\`ChildB\`, {class: ctx['props'].class}, key + \`__2\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {class: 'a  b c   d'}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {class: 'a  b c   d'}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {class: 'from parent'}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {class: undefined}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {class: 'a'}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {class: 'hey'}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {style: 'font-weight: bold;'}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {class: {b:ctx['state'].b}}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {class: {a:true,b:ctx['state'].b}}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {val: ctx['val']}, key + \`__1\`, 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\`,null, node, ctx));
+    let b2 = toggler(Comp1, component(Comp1, {}, key + \`__1\`, 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, {}, key+\`__1\`,tKey_1, node, ctx)));
+    return toggler(tKey_1, toggler(Comp1, component(Comp1, {}, tKey_1 + key + \`__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, {}, key+\`__1\`,tKey_1, node, ctx)));
+    return toggler(tKey_1, toggler(Comp1, component(Comp1, {}, tKey_1 + key + \`__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\`,null, node, ctx));
+    let b2 = toggler(Comp1, component(Comp1, {}, key + \`__1\`, 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\`,null, node, ctx));
+    return toggler(Comp1, component(Comp1, {}, key + \`__1\`, 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\`,null, node, ctx));
+    return toggler(Comp1, component(Comp1, {}, key + \`__1\`, 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}\`,null, node, ctx);
+      let b4 = component(\`Child\`, {item: ctx['item']}, key + \`__1__\${key1}\`, 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}\`,null, node, ctx), key1);
+      c_block1[i1] = withKey(component(\`Child\`, props1, key + \`__1__\${key1}\`, 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}\`,null, node, ctx);
+      let b4 = component(\`SubComponent\`, {}, key + \`__1__\${key1}\`, 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}\`,null, node, ctx), key2);
+        c_block3[i2] = withKey(component(\`Child\`, {blip: ctx['blip']}, key + \`__1__\${key1}__\${key2}\`, 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}\`,null, node, ctx);
+        let b6 = component(\`Child\`, {row: ctx['row'],col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, 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}\`,null, node, ctx), key1);
+      c_block1[i1] = withKey(component(\`Child\`, {value: ctx['elem'].value}, key + \`__1__\${key1}\`, 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}\`,null, node, ctx), key1);
+      c_block2[i1] = withKey(component(\`Child\`, {n: ctx['number']}, key + \`__1__\${key1}\`, 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}\`,null, node, ctx), key1);
+      c_block2[i1] = withKey(component(\`Child\`, {}, key + \`__1__\${key1}\`, 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}\`,null, node, ctx), key1);
+      c_block2[i1] = withKey(component(\`Child\`, {key: ctx['c']}, key + \`__1__\${key1}\`, 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}\`,null, node, ctx), key1);
+      c_block2[i1] = withKey(component(\`Child\`, {val: ctx['n_index']}, key + \`__1__\${key1}\`, 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']}, key+\`__1__\${key1}\`,tKey_1, node, ctx), tKey_1 + key1);
+      c_block2[i1] = withKey(component(\`Child\`, {key: ctx['c']+ctx['key1']}, tKey_1 + key + \`__1__\${key1}\`, 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']}, key+\`__1\`,tKey_1, node, ctx));
+    return toggler(tKey_1, component(\`Child\`, {key: ctx['key']}, tKey_1 + key + \`__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']}, key+\`__1\`,tKey_1, node, ctx));
+    let b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key']}, tKey_1 + key + \`__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']}, key+\`__1\`,tKey_1, node, ctx));
+    let b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key1']}, tKey_1 + key + \`__1\`, node, ctx));
     const tKey_2 = ctx['key2'];
-    let b3 = toggler(tKey_2, component(\`Child\`, {key: ctx['key2']}, key+\`__2\`,tKey_2, node, ctx));
+    let b3 = toggler(tKey_2, component(\`Child\`, {key: ctx['key2']}, tKey_2 + key + \`__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']}, key+\`__1\`,tKey_1, node, ctx));
+    return toggler(tKey_1, component(\`Child\`, {key: ctx['key']}, tKey_1 + key + \`__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']}, key+\`__1\`,tKey_1, node, ctx));
+    let b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key1']}, tKey_1 + key + \`__1\`, node, ctx));
     const tKey_2 = ctx['key2'];
-    let b3 = toggler(tKey_2, component(\`Child\`, {key: ctx['key2']}, key+\`__2\`,tKey_2, node, ctx));
+    let b3 = toggler(tKey_2, component(\`Child\`, {key: ctx['key2']}, tKey_2 + key + \`__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\`,null, node, ctx);
+      b2 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, ctx['some'].obj, key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Comp\`, Object.assign({}, ctx['state1'], {a: ctx['a']}), key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Comp\`, ctx['state'], key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Child\`, Object.assign({}, ctx['props'], {a: 1,b: 2}), key + \`__1\`, 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\`,null, node, ctx);
+    let b2 = component(\`Childcomp\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`C\`, {}, key + \`__1\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__2\`,null, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__2\`, 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\`,null, node, ctx);
+    let b3 = component(\`Child\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Blorg\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__2\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key+\`__2\`,null, node, ctx);
+    return component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__2\`, 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\`,null, node, ctx);
+    let b2 = component(\`Childcomp\`, {}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {}, key + \`__1\`, 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 } from "../helpers";
+import { elem, makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
 import { markup } from "../../src/utils";
 
 let fixture: HTMLElement;
@@ -900,4 +900,73 @@ 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,6 +2908,64 @@ 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 {
@@ -2955,13 +3013,72 @@ 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\`,null, node, ctx);
+    let b9 = component(\`Memo\`, {a: ctx['state'].a,b: ctx['state'].b,slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, 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\`,null, node, ctx);
+    return component(\`Child\`, {value: ctx['state'].value}, key + \`__2\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    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);
+    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);
     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\`,null, node, ctx);
+    let b4 = component(\`Memo\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
     return multi([b2, b4]);
   }
 }"

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

@@ -1,5 +1,59 @@
 // 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
 ) {
@@ -8,11 +62,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\`,null, node, ctx);
+    return component(\`Child2\`, {customHandler: ctx['_handled']}, key + \`__1\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
+    let b3 = component(\`Child\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -22,14 +76,14 @@ exports[`Portal Portal composed with t-slot 2`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-  let { callSlot } = helpers;
+  let { callPortal, callSlot } = helpers;
   
-  function slot1(ctx, node, key = \\"\\") {
+  function portalContent1(ctx, node, key = \\"\\") {
     return callSlot(ctx, node, key, 'default', false, {});
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
+    return callPortal(ctx, node, key, '#outside', portalContent1);
   }
 }"
 `;
@@ -52,16 +106,17 @@ 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 slot1(ctx, node, key = \\"\\") {
+  function portalContent1(ctx, node, key = \\"\\") {
     return block2();
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
+    let b3 = callPortal(ctx, node, key, '#outside', portalContent1);
     return block1([], [b3]);
   }
 }"
@@ -71,18 +126,17 @@ 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 slot1(ctx, node, key = \\"\\") {
+  function portalContent1(ctx, node, key = \\"\\") {
     return block2();
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const props1 = {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}
-    helpers.validateProps(\`Portal\`, props1, ctx)
-    let b3 = component(\`Portal\`, props1, key+\`__1\`,null, node, ctx);
+    let b3 = callPortal(ctx, node, key, '#outside', portalContent1);
     return block1([], [b3]);
   }
 }"
@@ -92,20 +146,21 @@ 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>\`);
+  let block2 = createBlock(\`<span>1</span>\`, true);
   
-  function slot1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {val: ctx['state'].val}, key+\`__1\`,null, node, ctx);
+  function portalContent1(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b4;
     b2 = block2();
     if (ctx['state'].hasPortal) {
-      b4 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
+      b4 = callPortal(ctx, node, key, '#outside', portalContent1);
     }
-    return multi([b2, b4]);
+    return multi([b2, b4], true);
   }
 }"
 `;
@@ -128,11 +183,12 @@ 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>\`);
-  let block3 = createBlock(\`<p>2</p>\`);
+  let block2 = createBlock(\`<span>1</span>\`, true);
+  let block3 = createBlock(\`<p>2</p>\`, true);
   
-  function slot1(ctx, node, key = \\"\\") {
+  function portalContent1(ctx, node, key = \\"\\") {
     return block3();
   }
   
@@ -140,9 +196,121 @@ exports[`Portal conditional use of Portal 1`] = `
     let b2,b4;
     b2 = block2();
     if (ctx['state'].hasPortal) {
-      b4 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
+      b4 = callPortal(ctx, node, key, '#outside', portalContent1);
     }
-    return multi([b2, b4]);
+    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);
   }
 }"
 `;
@@ -151,17 +319,18 @@ 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/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-0/></div>\`);
   
-  function slot1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {val: ctx['state'].val}, key+\`__1\`,null, node, ctx);
+  function portalContent1(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
     let b3;
     if (ctx['state'].hasChild) {
-      b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
+      b3 = callPortal(ctx, node, key, '#outside', portalContent1);
     }
     return block1([], [b3]);
   }
@@ -186,11 +355,12 @@ 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 slot1(ctx, node, key = \\"\\") {
+  function portalContent1(ctx, node, key = \\"\\") {
     let b3;
     if (ctx['state'].val) {
       let txt1 = ctx['state'].val;
@@ -200,7 +370,7 @@ exports[`Portal portal could have dynamically no content 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b4 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
+    let b4 = callPortal(ctx, node, key, '#outside', portalContent1);
     return block1([], [b4]);
   }
 }"
@@ -210,15 +380,16 @@ 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 slot1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {error: ctx['state'].error}, key+\`__1\`,null, node, ctx);
+  function portalContent1(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {error: ctx['state'].error}, key + \`__1\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
+    let b3 = callPortal(ctx, node, key, '#outside', portalContent1);
     return block1([], [b3]);
   }
 }"
@@ -242,15 +413,16 @@ 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 slot1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {val: ctx['state'].val}, key+\`__1\`,null, node, ctx);
+  function portalContent1(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
+    let b3 = callPortal(ctx, node, key, '#outside', portalContent1);
     return block1([], [b3]);
   }
 }"
@@ -274,12 +446,13 @@ 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 slot1(ctx, node, key = \\"\\") {
+  function portalContent1(ctx, node, key = \\"\\") {
     let b3,b4;
     if (ctx['state'].val) {
       let txt1 = ctx['state'].val;
@@ -291,7 +464,7 @@ exports[`Portal portal with dynamic body 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b5 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
+    let b5 = callPortal(ctx, node, key, '#outside', portalContent1);
     return block1([], [b5]);
   }
 }"
@@ -301,19 +474,20 @@ 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 slot1(ctx, node, key = \\"\\") {
+  function portalContent1(ctx, node, key = \\"\\") {
     let b3 = block3();
     let b4 = block4();
     return multi([b3, b4]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b5 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
+    let b5 = callPortal(ctx, node, key, '#outside', portalContent1);
     return block1([], [b5]);
   }
 }"
@@ -323,10 +497,11 @@ 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 slot1(ctx, node, key = \\"\\") {
+  function portalContent1(ctx, node, key = \\"\\") {
     let b3;
     if (false) {
       b3 = text('ABC');
@@ -335,7 +510,7 @@ exports[`Portal portal with no content 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b4 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
+    let b4 = callPortal(ctx, node, key, '#outside', portalContent1);
     return block1([], [b4]);
   }
 }"
@@ -345,15 +520,16 @@ 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 slot1(ctx, node, key = \\"\\") {
+  function portalContent1(ctx, node, key = \\"\\") {
     return text('only text');
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
+    let b3 = callPortal(ctx, node, key, '#outside', portalContent1);
     return block1([], [b3]);
   }
 }"
@@ -363,16 +539,17 @@ 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 slot1(ctx, node, key = \\"\\") {
+  function portalContent1(ctx, node, key = \\"\\") {
     return block2();
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Portal\`, {target: '#does-not-exist',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
+    let b3 = callPortal(ctx, node, key, '#does-not-exist', portalContent1);
     return block1([], [b3]);
   }
 }"
@@ -382,15 +559,16 @@ 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 slot1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {}, key+\`__1\`,null, node, ctx);
+  function portalContent1(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
+    let b3 = callPortal(ctx, node, key, '#outside', portalContent1);
     return block1([], [b3]);
   }
 }"
@@ -409,20 +587,61 @@ exports[`Portal portal's parent's env is not polluted 2`] = `
 }"
 `;
 
-exports[`Portal with target in template (after portal) 1`] = `
+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 slot1(ctx, node, key = \\"\\") {
+  function portalContent1(ctx, node, key = \\"\\") {
     return block2();
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Portal\`, {target: '#local-target',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
+    let b3 = callPortal(ctx, node, key, '#local-target', portalContent1);
     return block1([], [b3]);
   }
 }"
@@ -432,58 +651,57 @@ 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 slot1(ctx, node, key = \\"\\") {
+  function portalContent1(ctx, node, key = \\"\\") {
     return block2();
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Portal\`, {target: '#local-target',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__1\`,null, node, ctx);
+    let b3 = callPortal(ctx, node, key, '#local-target', portalContent1);
     return block1([], [b3]);
   }
 }"
 `;
 
-exports[`Portal: Props validation target is mandatory 1`] = `
+exports[`Portal: Props validation target must be a valid selector 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 slot1(ctx, node, key = \\"\\") {
+  function portalContent1(ctx, node, key = \\"\\") {
     return block2();
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const props1 = {slots: {'default': {__render: slot1, __ctx: ctx}}}
-    helpers.validateProps(\`Portal\`, props1, ctx)
-    let b3 = component(\`Portal\`, props1, key+\`__1\`,null, node, ctx);
+    let b3 = callPortal(ctx, node, key, ' ', portalContent1);
     return block1([], [b3]);
   }
 }"
 `;
 
-exports[`Portal: Props validation target is not list 1`] = `
+exports[`Portal: Props validation target must be a valid selector 2 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 slot1(ctx, node, key = \\"\\") {
+  function portalContent1(ctx, node, key = \\"\\") {
     return block2();
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const props1 = {target: ['body'],slots: {'default': {__render: slot1, __ctx: ctx}}}
-    helpers.validateProps(\`Portal\`, props1, ctx)
-    let b3 = component(\`Portal\`, props1, key+\`__1\`,null, node, ctx);
+    let b3 = callPortal(ctx, node, key, 'aa', portalContent1);
     return block1([], [b3]);
   }
 }"
@@ -493,15 +711,16 @@ 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 slot1(ctx, node, key = \\"\\") {
-    return component(\`Child\`, {val: ctx['state'].val}, key+\`__1\`,null, node, ctx);
+  function portalContent1(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Portal\`, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key+\`__2\`,null, node, ctx);
+    let b3 = callPortal(ctx, node, key, '#outside', portalContent1);
     return block1([], [b3]);
   }
 }"

tests/misc/portal.test.ts

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