[FIX] portal: correctly mount portal content in target created by mount

Previously, blah blah blah

README.md

@@ -124,5 +124,5 @@ npm install @odoo/owl
 
 If you want to use a simple `<script>` tag, the last release can be downloaded here:
 
-- [owl-1.4.10](https://github.com/odoo/owl/releases/tag/v1.4.10)
+- [owl](https://github.com/odoo/owl/releases/latest)
 

doc/reference/hooks.md

@@ -234,7 +234,8 @@ are defined by a function instead of just the dependencies.
 
 The `useEffect` hook takes two function: the effect function and the dependency
 function. The effect function perform some task and return (optionally) a cleanup
-function. The dependency function returns a list of dependencies. If any of these
+function. The dependency function returns a list of dependencies, these dependencies
+are passed as parameters in the effect function . If any of these
 dependencies changes, then the current effect will be cleaned up and reexecuted.
 
 Here is an example without any dependencies:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.0.0-beta-20",
+  "version": "2.0.0",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "module": "dist/owl.es.js",

roadmap.md

@@ -1,28 +1,9 @@
 # 🦉 OWL Roadmap 🦉
 
-- Current version: 1.4.10
+- Current version: 2.X
 - Status: stable
 
-This roadmap is only an attempt at predicting Owl's future.  Everything may
-change!
-
-
-### 1.x
-
-- add chrome and firefox devtools,
-- fix every bugs,
-- improve documentation,
-- small backward compatible improvements.
-
-### 2.x (2020? 2021? 2022?)
-
-- stop support for `t-set` directive to define the content of a slot
-
-Maybe:
-
-- reimplement vdom to use *block* system, like Vue 3, which should make Owl
-  much faster
-- refactor `QWeb` to use an intermediate representation (some kind of AST) to
-  allow additional optimisations.
-
+Owl is currently stable. No (large) improvements is expected in the near future.
 
+Note that we intend to keep maintaining owl, and as such, improvements and/or
+breaking changes may require a version bump in the future.

src/compiler/code_generator.ts

@@ -214,6 +214,14 @@ class CodeTarget {
     result.push(`}`);
     return result.join("\n  ");
   }
+
+  currentKey(ctx: Context) {
+    let key = this.loopLevel ? `key${this.loopLevel}` : "key";
+    if (ctx.tKeyExpr) {
+      key = `${ctx.tKeyExpr} + ${key}`;
+    }
+    return key;
+  }
 }
 
 const TRANSLATABLE_ATTRS = ["label", "title", "placeholder", "alt"];
@@ -365,19 +373,15 @@ export class CodeGenerator {
 
   insertBlock(expression: string, block: BlockDescription, ctx: Context): void {
     let blockExpr = block.generateExpr(expression);
-    const tKeyExpr = ctx.tKeyExpr;
     if (block.parentVar) {
-      let keyArg = `key${this.target.loopLevel}`;
-      if (tKeyExpr) {
-        keyArg = `${tKeyExpr} + ${keyArg}`;
-      }
+      let key = this.target.currentKey(ctx);
       this.helpers.add("withKey");
-      this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${keyArg});`);
+      this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${key});`);
       return;
     }
 
-    if (tKeyExpr) {
-      blockExpr = `toggler(${tKeyExpr}, ${blockExpr})`;
+    if (ctx.tKeyExpr) {
+      blockExpr = `toggler(${ctx.tKeyExpr}, ${blockExpr})`;
     }
 
     if (block.isRoot && !ctx.preventRoot) {
@@ -424,78 +428,66 @@ export class CodeGenerator {
       .join("");
   }
 
-  compileAST(ast: AST, ctx: Context) {
+  /**
+   * @returns the newly created block name, if any
+   */
+  compileAST(ast: AST, ctx: Context): string | null {
     switch (ast.type) {
       case ASTType.Comment:
-        this.compileComment(ast, ctx);
-        break;
+        return this.compileComment(ast, ctx);
       case ASTType.Text:
-        this.compileText(ast, ctx);
-        break;
+        return this.compileText(ast, ctx);
       case ASTType.DomNode:
-        this.compileTDomNode(ast, ctx);
-        break;
+        return this.compileTDomNode(ast, ctx);
       case ASTType.TEsc:
-        this.compileTEsc(ast, ctx);
-        break;
+        return this.compileTEsc(ast, ctx);
       case ASTType.TOut:
-        this.compileTOut(ast, ctx);
-        break;
+        return this.compileTOut(ast, ctx);
       case ASTType.TIf:
-        this.compileTIf(ast, ctx);
-        break;
+        return this.compileTIf(ast, ctx);
       case ASTType.TForEach:
-        this.compileTForeach(ast, ctx);
-        break;
+        return this.compileTForeach(ast, ctx);
       case ASTType.TKey:
-        this.compileTKey(ast, ctx);
-        break;
+        return this.compileTKey(ast, ctx);
       case ASTType.Multi:
-        this.compileMulti(ast, ctx);
-        break;
+        return this.compileMulti(ast, ctx);
       case ASTType.TCall:
-        this.compileTCall(ast, ctx);
-        break;
+        return this.compileTCall(ast, ctx);
       case ASTType.TCallBlock:
-        this.compileTCallBlock(ast, ctx);
-        break;
+        return this.compileTCallBlock(ast, ctx);
       case ASTType.TSet:
-        this.compileTSet(ast, ctx);
-        break;
+        return this.compileTSet(ast, ctx);
       case ASTType.TComponent:
-        this.compileComponent(ast, ctx);
-        break;
+        return this.compileComponent(ast, ctx);
       case ASTType.TDebug:
-        this.compileDebug(ast, ctx);
-        break;
+        return this.compileDebug(ast, ctx);
       case ASTType.TLog:
-        this.compileLog(ast, ctx);
-        break;
+        return this.compileLog(ast, ctx);
       case ASTType.TSlot:
-        this.compileTSlot(ast, ctx);
-        break;
+        return this.compileTSlot(ast, ctx);
       case ASTType.TTranslation:
-        this.compileTTranslation(ast, ctx);
-        break;
+        return this.compileTTranslation(ast, ctx);
       case ASTType.TPortal:
-        this.compileTPortal(ast, ctx);
+        return this.compileTPortal(ast, ctx);
     }
   }
 
-  compileDebug(ast: ASTDebug, ctx: Context) {
+  compileDebug(ast: ASTDebug, ctx: Context): string | null {
     this.addLine(`debugger;`);
     if (ast.content) {
-      this.compileAST(ast.content, ctx);
+      return this.compileAST(ast.content, ctx);
     }
+    return null;
   }
 
-  compileLog(ast: ASTLog, ctx: Context) {
+  compileLog(ast: ASTLog, ctx: Context): string | null {
     this.addLine(`console.log(${compileExpr(ast.expr)});`);
     if (ast.content) {
-      this.compileAST(ast.content, ctx);
+      return this.compileAST(ast.content, ctx);
     }
+    return null;
   }
-  compileComment(ast: ASTComment, ctx: Context) {
+  compileComment(ast: ASTComment, ctx: Context): string {
     let { block, forceNewBlock } = ctx;
     const isNewBlock = !block || forceNewBlock;
     if (isNewBlock) {
@@ -508,9 +500,10 @@ export class CodeGenerator {
       const text = xmlDoc.createComment(ast.value);
       block!.insert(text);
     }
+    return block!.varName;
   }
 
-  compileText(ast: ASTText, ctx: Context) {
+  compileText(ast: ASTText, ctx: Context): string {
     let { block, forceNewBlock } = ctx;
 
     let value = ast.value;
@@ -529,6 +522,7 @@ export class CodeGenerator {
       const createFn = ast.type === ASTType.Text ? xmlDoc.createTextNode : xmlDoc.createComment;
       block.insert(createFn.call(xmlDoc, value));
     }
+    return block.varName;
   }
 
   generateHandlerCode(rawEvent: string, handler: string): string {
@@ -548,7 +542,7 @@ export class CodeGenerator {
     return `[${modifiersCode}${this.captureExpression(handler)}, ctx]`;
   }
 
-  compileTDomNode(ast: ASTDomNode, ctx: Context) {
+  compileTDomNode(ast: ASTDomNode, ctx: Context): string {
     let { block, forceNewBlock } = ctx;
     const isNewBlock = !block || forceNewBlock || ast.dynamicTag !== null || ast.ns;
     let codeIdx = this.target.code.length;
@@ -735,9 +729,10 @@ export class CodeGenerator {
         this.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
       }
     }
+    return block!.varName;
   }
 
-  compileTEsc(ast: ASTTEsc, ctx: Context) {
+  compileTEsc(ast: ASTTEsc, ctx: Context): string {
     let { block, forceNewBlock } = ctx;
     let expr: string;
     if (ast.expr === "0") {
@@ -758,9 +753,10 @@ export class CodeGenerator {
       const text = xmlDoc.createElement(`block-text-${idx}`);
       block.insert(text);
     }
+    return block.varName;
   }
 
-  compileTOut(ast: ASTTOut, ctx: Context) {
+  compileTOut(ast: ASTTOut, ctx: Context): string {
     let { block } = ctx;
     if (block) {
       this.insertAnchor(block);
@@ -782,6 +778,7 @@ export class CodeGenerator {
       blockStr = `safeOutput(${compileExpr(ast.expr)})`;
     }
     this.insertBlock(blockStr, block, ctx);
+    return block.varName;
   }
 
   compileTIfBranch(content: AST, block: BlockDescription, ctx: Context) {
@@ -795,7 +792,7 @@ export class CodeGenerator {
     this.target.indentLevel--;
   }
 
-  compileTIf(ast: ASTTif, ctx: Context, nextNode?: ASTDomNode) {
+  compileTIf(ast: ASTTif, ctx: Context, nextNode?: ASTDomNode): string {
     let { block, forceNewBlock } = ctx;
     const codeIdx = this.target.code.length;
     const isNewBlock = !block || (block.type !== "multi" && forceNewBlock);
@@ -838,9 +835,10 @@ export class CodeGenerator {
       const args = block!.children.map((c) => c.varName).join(", ");
       this.insertBlock(`multi([${args}])`, block!, ctx)!;
     }
+    return block.varName;
   }
 
-  compileTForeach(ast: ASTTForEach, ctx: Context) {
+  compileTForeach(ast: ASTTForEach, ctx: Context): string {
     let { block } = ctx;
     if (block) {
       this.insertAnchor(block);
@@ -879,9 +877,9 @@ export class CodeGenerator {
       // Throw error on duplicate keys in dev mode
       this.helpers.add("OwlError");
       this.addLine(
-        `if (keys${block.id}.has(key${this.target.loopLevel})) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`
+        `if (keys${block.id}.has(String(key${this.target.loopLevel}))) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`
       );
-      this.addLine(`keys${block.id}.add(key${this.target.loopLevel});`);
+      this.addLine(`keys${block.id}.add(String(key${this.target.loopLevel}));`);
     }
     let id: string;
     if (ast.memo) {
@@ -918,9 +916,10 @@ export class CodeGenerator {
       this.addLine(`ctx = ctx.__proto__;`);
     }
     this.insertBlock("l", block, ctx);
+    return block.varName;
   }
 
-  compileTKey(ast: ASTTKey, ctx: Context) {
+  compileTKey(ast: ASTTKey, ctx: Context): string | null {
     const tKeyExpr = generateId("tKey_");
     this.define(tKeyExpr, compileExpr(ast.expr));
     ctx = createContext(ctx, {
@@ -928,20 +927,22 @@ export class CodeGenerator {
       block: ctx.block,
       index: ctx.index,
     });
-    this.compileAST(ast.content, ctx);
+    return this.compileAST(ast.content, ctx);
   }
 
-  compileMulti(ast: ASTMulti, ctx: Context) {
+  compileMulti(ast: ASTMulti, ctx: Context): string | null {
     let { block, forceNewBlock } = ctx;
     const isNewBlock = !block || forceNewBlock;
     let codeIdx = this.target.code.length;
     if (isNewBlock) {
       const n = ast.content.filter((c) => c.type !== ASTType.TSet).length;
+      let result: string | null = null;
       if (n <= 1) {
         for (let child of ast.content) {
-          this.compileAST(child, ctx);
+          const blockName = this.compileAST(child, ctx);
+          result = result || blockName;
         }
-        return;
+        return result;
       }
       block = this.createBlock(block, "multi", ctx);
     }
@@ -981,9 +982,10 @@ export class CodeGenerator {
       const args = block!.children.map((c) => c.varName).join(", ");
       this.insertBlock(`multi([${args}])`, block!, ctx)!;
     }
+    return block!.varName;
   }
 
-  compileTCall(ast: ASTTCall, ctx: Context) {
+  compileTCall(ast: ASTTCall, ctx: Context): string {
     let { block, forceNewBlock } = ctx;
     let ctxVar = ctx.ctxVar || "ctx";
     if (ast.context) {
@@ -994,12 +996,11 @@ export class CodeGenerator {
       this.addLine(`${ctxVar} = Object.create(${ctxVar});`);
       this.addLine(`${ctxVar}[isBoundary] = 1;`);
       this.helpers.add("isBoundary");
-      const nextId = BlockDescription.nextBlockId;
       const subCtx = createContext(ctx, { preventRoot: true, ctxVar });
-      this.compileAST({ type: ASTType.Multi, content: ast.body }, subCtx);
-      if (nextId !== BlockDescription.nextBlockId) {
+      const bl = this.compileMulti({ type: ASTType.Multi, content: ast.body }, subCtx);
+      if (bl) {
         this.helpers.add("zero");
-        this.addLine(`${ctxVar}[zero] = b${nextId};`);
+        this.addLine(`${ctxVar}[zero] = ${bl};`);
       }
     }
     const isDynamic = INTERP_REGEXP.test(ast.name);
@@ -1033,9 +1034,10 @@ export class CodeGenerator {
     if (ast.body && !ctx.isLast) {
       this.addLine(`${ctxVar} = ${ctxVar}.__proto__;`);
     }
+    return block.varName;
   }
 
-  compileTCallBlock(ast: ASTTCallBlock, ctx: Context) {
+  compileTCallBlock(ast: ASTTCallBlock, ctx: Context): string {
     let { block, forceNewBlock } = ctx;
     if (block) {
       if (!forceNewBlock) {
@@ -1044,9 +1046,10 @@ export class CodeGenerator {
     }
     block = this.createBlock(block, "multi", ctx);
     this.insertBlock(compileExpr(ast.name), block, { ...ctx, forceNewBlock: !block });
+    return block.varName;
   }
 
-  compileTSet(ast: ASTTSet, ctx: Context) {
+  compileTSet(ast: ASTTSet, ctx: Context): null {
     this.target.shouldProtectScope = true;
     this.helpers.add("isBoundary").add("withDefault");
     const expr = ast.value ? compileExpr(ast.value || "") : "null";
@@ -1054,7 +1057,8 @@ export class CodeGenerator {
       this.helpers.add("LazyValue");
       const bodyAst: AST = { type: ASTType.Multi, content: ast.body };
       const name = this.compileInNewTarget("value", bodyAst, ctx);
-      let value = `new LazyValue(${name}, ctx, this, node)`;
+      let key = this.target.currentKey(ctx);
+      let value = `new LazyValue(${name}, ctx, this, node, ${key})`;
       value = ast.value ? (value ? `withDefault(${expr}, ${value})` : expr) : value;
       this.addLine(`ctx[\`${ast.name}\`] = ${value};`);
     } else {
@@ -1071,6 +1075,7 @@ export class CodeGenerator {
       this.helpers.add("setContextValue");
       this.addLine(`setContextValue(${ctx.ctxVar || "ctx"}, "${ast.name}", ${value});`);
     }
+    return null;
   }
 
   generateComponentKey() {
@@ -1122,7 +1127,7 @@ export class CodeGenerator {
     return propString;
   }
 
-  compileComponent(ast: ASTComponent, ctx: Context) {
+  compileComponent(ast: ASTComponent, ctx: Context): string {
     let { block } = ctx;
     // props
     const hasSlotsProp = "slots" in (ast.props || {});
@@ -1188,7 +1193,7 @@ export class CodeGenerator {
     }
 
     if (this.dev) {
-      this.addLine(`helpers.validateProps(${expr}, ${propVar!}, ctx);`);
+      this.addLine(`helpers.validateProps(${expr}, ${propVar!}, this);`);
     }
 
     if (block && (ctx.forceNewBlock === false || ctx.tKeyExpr)) {
@@ -1222,6 +1227,7 @@ export class CodeGenerator {
 
     block = this.createBlock(block, "multi", ctx);
     this.insertBlock(blockExpr, block, ctx);
+    return block.varName;
   }
 
   wrapWithEventCatcher(expr: string, on: EventHandlers): string {
@@ -1240,7 +1246,7 @@ export class CodeGenerator {
     return `${name}(${expr}, [${handlers.join(",")}])`;
   }
 
-  compileTSlot(ast: ASTSlot, ctx: Context) {
+  compileTSlot(ast: ASTSlot, ctx: Context): string {
     this.helpers.add("callSlot");
     let { block } = ctx;
     let blockString: string;
@@ -1289,14 +1295,16 @@ export class CodeGenerator {
     }
     block = this.createBlock(block, "multi", ctx);
     this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
+    return block.varName;
   }
 
-  compileTTranslation(ast: ASTTranslation, ctx: Context) {
+  compileTTranslation(ast: ASTTranslation, ctx: Context): string | null {
     if (ast.content) {
-      this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
+      return this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
     }
+    return null;
   }
-  compileTPortal(ast: ASTTPortal, ctx: Context) {
+  compileTPortal(ast: ASTTPortal, ctx: Context): string {
     if (!this.staticDefs.find((d) => d.id === "Portal")) {
       this.staticDefs.push({ id: "Portal", expr: `app.Portal` });
     }
@@ -1323,5 +1331,6 @@ export class CodeGenerator {
     }
     block = this.createBlock(block, "multi", ctx);
     this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
+    return block.varName;
   }
 }

src/compiler/parser.ts

@@ -781,8 +781,9 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
 
     // default slot
     const defaultContent = parseChildNodes(clone, ctx);
-    if (defaultContent) {
-      slots = slots || {};
+    slots = slots || {};
+    // t-set-slot="default" has priority over content
+    if (defaultContent && !slots.default) {
       slots.default = { content: defaultContent, on, attrs: null, scope: defaultSlotScope };
     }
   }

src/runtime/blockdom/block_compiler.ts

@@ -157,6 +157,15 @@ function buildTree(
           : document.createElement(tagName);
       }
       if (el instanceof Element) {
+        if (!domParentTree) {
+          // some html elements may have side effects when setting their attributes.
+          // For example, setting the src attribute of an <img/> will trigger a
+          // request to get the corresponding image. This is something that we
+          // don't want at compile time. We avoid that by putting the content of
+          // the block in a <template/> element
+          const fragment = document.createElement("template").content;
+          fragment.appendChild(el);
+        }
         for (let i = 0; i < attrs.length; i++) {
           const attrName = attrs[i].name;
           const attrValue = attrs[i].value;
@@ -508,9 +517,12 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
       return this.el!;
     }
 
-    moveBefore(other: Block | null, afterNode: Node | null) {
-      const target = other ? other.el! : afterNode;
-      nodeInsertBefore.call(this.parentEl, this.el!, target);
+    moveBeforeDOMNode(node: Node | null) {
+      nodeInsertBefore.call(this.parentEl, this.el!, node);
+    }
+
+    moveBeforeVNode(other: Block | null, afterNode: Node | null) {
+      nodeInsertBefore.call(this.parentEl, this.el!, other ? other.el! : afterNode);
     }
 
     toString() {

src/runtime/blockdom/event_catcher.ts

@@ -56,8 +56,17 @@ export function createCatcher(eventsSpec: EventsSpec): Catcher {
       }
     }
 
-    moveBefore(other: VCatcher | null, afterNode: Node | null) {
-      this.child.moveBefore(other ? other.child : null, afterNode);
+    moveBeforeDOMNode(node: Node | null) {
+      this.child.moveBeforeDOMNode(node);
+      this.parentEl!.insertBefore(this.afterNode!, node);
+    }
+
+    moveBeforeVNode(other: VCatcher | null, afterNode: Node | null) {
+      if (other) {
+        // check this with @ged-odoo for use in foreach
+        afterNode = other.firstNode() || afterNode;
+      }
+      this.child.moveBeforeVNode(other ? other.child : null, afterNode);
       this.parentEl!.insertBefore(this.afterNode!, afterNode);
     }
 

src/runtime/blockdom/html.ts

@@ -29,14 +29,18 @@ class VHtml {
     }
   }
 
-  moveBefore(other: VHtml | null, afterNode: Node | null) {
-    const target = other ? other.content[0] : afterNode;
+  moveBeforeDOMNode(node: Node | null) {
     const parent = this.parentEl;
     for (let elem of this.content) {
-      nodeInsertBefore.call(parent, elem, target);
+      nodeInsertBefore.call(parent, elem, node);
     }
   }
 
+  moveBeforeVNode(other: VHtml | null, afterNode: Node | null) {
+    const target = other ? other.content[0] : afterNode;
+    this.moveBeforeDOMNode(target);
+  }
+
   patch(other: VHtml) {
     if (this === other) {
       return;

src/runtime/blockdom/index.ts

@@ -10,7 +10,8 @@ export { createCatcher } from "./event_catcher";
 
 export interface VNode<T = any> {
   mount(parent: HTMLElement, afterNode: Node | null): void;
-  moveBefore(other: T | null, afterNode: Node | null): void;
+  moveBeforeDOMNode(node: Node | null): void;
+  moveBeforeVNode(other: T | null, afterNode: Node | null): void;
   patch(other: T, withBeforeRemove: boolean): void;
   beforeRemove(): void;
   remove(): void;

src/runtime/blockdom/list.ts

@@ -38,14 +38,22 @@ class VList {
     this.parentEl = parent;
   }
 
-  moveBefore(other: VList | null, afterNode: Node | null) {
+  moveBeforeDOMNode(node: Node | null) {
+    const children = this.children;
+    for (let i = 0, l = children.length; i < l; i++) {
+      children[i].moveBeforeDOMNode(node);
+    }
+    this.parentEl!.insertBefore(this.anchor!, node);
+  }
+
+  moveBeforeVNode(other: VList | null, afterNode: Node | null) {
     if (other) {
       const next = other!.children[0];
       afterNode = (next ? next.firstNode() : other!.anchor) || null;
     }
     const children = this.children;
     for (let i = 0, l = children.length; i < l; i++) {
-      children[i].moveBefore(null, afterNode);
+      children[i].moveBeforeVNode(null, afterNode);
     }
     this.parentEl!.insertBefore(this.anchor!, afterNode);
   }
@@ -66,7 +74,7 @@ class VList {
       patch: cPatch,
       remove: cRemove,
       beforeRemove,
-      moveBefore: cMoveBefore,
+      moveBeforeVNode: cMoveBefore,
       firstNode: cFirstNode,
     } = proto;
 

src/runtime/blockdom/multi.ts

@@ -38,7 +38,22 @@ export class VMulti {
     this.parentEl = parent;
   }
 
-  moveBefore(other: VMulti | null, afterNode: Node | null) {
+  moveBeforeDOMNode(node: Node | null) {
+    const children = this.children;
+    const parent = this.parentEl;
+    const anchors = this.anchors;
+    for (let i = 0, l = children.length; i < l; i++) {
+      let child = children[i];
+      if (child) {
+        child.moveBeforeDOMNode(node);
+      } else {
+        const anchor = anchors![i];
+        nodeInsertBefore.call(parent, anchor, node);
+      }
+    }
+  }
+
+  moveBeforeVNode(other: VMulti | null, afterNode: Node | null) {
     if (other) {
       const next = other!.children[0];
       afterNode = (next ? next.firstNode() : other!.anchors![0]) || null;
@@ -49,7 +64,7 @@ export class VMulti {
     for (let i = 0, l = children.length; i < l; i++) {
       let child = children[i];
       if (child) {
-        child.moveBefore(null, afterNode);
+        child.moveBeforeVNode(null, afterNode);
       } else {
         const anchor = anchors![i];
         nodeInsertBefore.call(parent, anchor, afterNode);

src/runtime/blockdom/text.ts

@@ -23,9 +23,12 @@ abstract class VSimpleNode {
     this.el = node;
   }
 
-  moveBefore(other: VText | null, afterNode: Node | null) {
-    const target = other ? other.el! : afterNode;
-    nodeInsertBefore.call(this.parentEl, this.el!, target);
+  moveBeforeDOMNode(node: Node | null) {
+    nodeInsertBefore.call(this.parentEl, this.el!, node);
+  }
+
+  moveBeforeVNode(other: VText | null, afterNode: Node | null) {
+    nodeInsertBefore.call(this.parentEl, this.el!, other ? other.el! : afterNode);
   }
 
   beforeRemove() {}

src/runtime/blockdom/toggler.ts

@@ -20,8 +20,12 @@ class VToggler {
     this.child.mount(parent, afterNode);
   }
 
-  moveBefore(other: VToggler | null, afterNode: Node | null) {
-    this.child.moveBefore(other ? other.child : null, afterNode);
+  moveBeforeDOMNode(node: Node | null) {
+    this.child.moveBeforeDOMNode(node);
+  }
+
+  moveBeforeVNode(other: VToggler | null, afterNode: Node | null) {
+    this.moveBeforeDOMNode((other && other.firstNode()) || afterNode);
   }
 
   patch(other: VToggler, withBeforeRemove: boolean) {

src/runtime/component_node.ts

@@ -306,8 +306,12 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     this.fiber = null;
   }
 
-  moveBefore(other: ComponentNode | null, afterNode: Node | null) {
-    this.bdom!.moveBefore(other ? other.bdom : null, afterNode);
+  moveBeforeDOMNode(node: Node | null): void {
+    this.bdom!.moveBeforeDOMNode(node);
+  }
+
+  moveBeforeVNode(other: ComponentNode<P, E> | null, afterNode: Node | null) {
+    this.bdom!.moveBeforeVNode(other ? other.bdom : null, afterNode);
   }
 
   patch() {

src/runtime/portal.ts

@@ -1,4 +1,4 @@
-import { onWillUnmount } from "./lifecycle_hooks";
+import { onMounted, onWillUnmount } from "./lifecycle_hooks";
 import { BDom, text, VNode } from "./blockdom";
 import { Component } from "./component";
 import { OwlError } from "./error_handling";
@@ -6,60 +6,51 @@ import { OwlError } from "./error_handling";
 const VText: any = text("").constructor;
 
 class VPortal extends VText implements Partial<VNode<VPortal>> {
-  //   selector: string;
-  realBDom: BDom | null;
+  content: BDom | null;
+  selector: string;
   target: HTMLElement | null = null;
 
-  constructor(selector: string, realBDom: BDom) {
+  constructor(selector: string, content: BDom) {
     super("");
     this.selector = selector;
-    this.realBDom = realBDom;
+    this.content = content;
   }
+
   mount(parent: HTMLElement, anchor: ChildNode) {
     super.mount(parent, anchor);
     this.target = document.querySelector(this.selector) as any;
-    if (!this.target) {
-      let el: any = this.el;
-      while (el && el.parentElement instanceof HTMLElement) {
-        el = el.parentElement;
-      }
-      this.target = el && el.querySelector(this.selector);
-      if (!this.target) {
-        throw new OwlError("invalid portal target");
-      }
+    if (this.target) {
+      this.content!.mount(this.target!, null);
     }
-    this.realBDom!.mount(this.target!, null);
   }
 
   beforeRemove() {
-    this.realBDom!.beforeRemove();
-  }
-  remove() {
-    if (this.realBDom) {
-      super.remove();
-      this.realBDom!.remove();
-      this.realBDom = null;
+    // this.target not being null means content is mounted
+    if (this.target) {
+      this.content!.beforeRemove();
+      this.content!.remove();
     }
+    this.content = null;
   }
 
   patch(other: VPortal) {
     super.patch(other);
-    if (this.realBDom) {
-      this.realBDom.patch(other.realBDom!, true);
+    if (this.content) {
+      this.content.patch(other.content!, true);
     } else {
-      this.realBDom = other.realBDom;
-      this.realBDom!.mount(this.target!, null);
+      this.content = other.content;
+      this.content!.mount(this.target!, null);
     }
   }
 }
 
 /**
- * <t t-slot="default"/>
+ * kind of similar to <t t-slot="default"/>, but it wraps it around a VPortal
  */
 export function portalTemplate(app: any, bdom: any, helpers: any) {
   let { callSlot } = helpers;
-  return function template(ctx: any, node: any, key = "") {
-    return callSlot(ctx, node, key, "default", false, null);
+  return function template(ctx: any, node: any, key = ""): any {
+    return new VPortal(ctx.props.target, callSlot(ctx, node, key, "default", false, null));
   };
 }
 
@@ -73,13 +64,23 @@ export class Portal extends Component {
   };
 
   setup() {
-    const node = this.__owl__;
-    const renderFn = node.renderFn;
-    node.renderFn = () => new VPortal(this.props.target, renderFn());
-    onWillUnmount(() => {
-      if (node.bdom) {
-        node.bdom.remove();
+    const node: any = this.__owl__;
+
+    onMounted(() => {
+      const portal: VPortal = node.bdom;
+      if (!portal.target) {
+        portal.target = document.querySelector(this.props.target);
+        if (portal.target) {
+          portal.content!.mount(portal.target, null);
+        } else {
+          throw new OwlError("invalid portal target");
+        }
       }
     });
+
+    onWillUnmount(() => {
+      const portal: VPortal = node.bdom;
+      portal.beforeRemove();
+    });
   }
 }

src/runtime/template_helpers.ts

@@ -111,15 +111,18 @@ class LazyValue {
   ctx: any;
   component: any;
   node: any;
-  constructor(fn: any, ctx: any, component: any, node: any) {
+  key: any;
+
+  constructor(fn: any, ctx: any, component: any, node: any, key: any) {
     this.fn = fn;
     this.ctx = capture(ctx);
     this.component = component;
     this.node = node;
+    this.key = key;
   }
 
   evaluate(): any {
-    return this.fn.call(this.component, this.ctx, this.node);
+    return this.fn.call(this.component, this.ctx, this.node, this.key);
   }
 
   toString() {
@@ -207,11 +210,11 @@ function multiRefSetter(refs: RefMap, name: string): RefSetter {
  * visit recursively the props and all the children to check if they are valid.
  * This is why it is only done in 'dev' mode.
  */
-export function validateProps<P>(name: string | ComponentConstructor<P>, props: P, parent?: any) {
+export function validateProps<P>(name: string | ComponentConstructor<P>, props: P, comp?: any) {
   const ComponentClass =
     typeof name !== "string"
       ? name
-      : (parent.constructor.components[name] as ComponentConstructor<P> | undefined);
+      : (comp.constructor.components[name] as ComponentConstructor<P> | undefined);
 
   if (!ComponentClass) {
     // this is an error, wrong component. We silently return here instead so the
@@ -221,7 +224,7 @@ export function validateProps<P>(name: string | ComponentConstructor<P>, props:
 
   const schema = ComponentClass.props;
   if (!schema) {
-    if (parent.__owl__.app.warnIfNoStaticProps) {
+    if (comp.__owl__.app.warnIfNoStaticProps) {
       console.warn(`Component '${ComponentClass.name}' does not have a static props description`);
     }
     return;

tests/compiler/__snapshots__/t_call.test.ts.snap

@@ -334,6 +334,57 @@ exports[`t-call (template calling) inherit context 2`] = `
 }"
 `;
 
+exports[`t-call (template calling) nested t-calls with magic variable 0 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, zero } = helpers;
+  const callTemplate_1 = app.getTemplate(\`grandchild\`);
+  const callTemplate_2 = app.getTemplate(\`child\`);
+  
+  let block1 = createBlock(\`<p>Some content...</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1;
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1;
+    const b1 = block1();
+    ctx[zero] = b1;
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    ctx = ctx.__proto__;
+    ctx[zero] = b2;
+    return callTemplate_2.call(this, ctx, node, key + \`__2\`);
+  }
+}"
+`;
+
+exports[`t-call (template calling) nested t-calls with magic variable 0 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { zero } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`grandchild\`);
+    const b3 = ctx[zero];
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`t-call (template calling) nested t-calls with magic variable 0 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { zero } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return ctx[zero];
+  }
+}"
+`;
+
 exports[`t-call (template calling) recursive template, part 1 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/compiler/__snapshots__/t_esc.test.ts.snap

@@ -126,7 +126,7 @@ exports[`t-esc t-esc is escaped 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`var\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node, key);
     let txt1 = ctx['var'];
     return block1([txt1]);
   }

tests/compiler/__snapshots__/t_out.test.ts.snap

@@ -161,7 +161,7 @@ exports[`t-out t-out bdom 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`var\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node, key);
     const b3 = safeOutput(ctx['var']);
     return block1([], [b3]);
   }
@@ -310,7 +310,7 @@ exports[`t-out t-out switch markup on bdom 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     let b3,b5;
-    ctx[\`bdom\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`bdom\`] = new LazyValue(value1, ctx, this, node, key);
     if (ctx['hasBdom']) {
       const b4 = safeOutput(ctx['bdom']);
       b3 = block3([], [b4]);

tests/compiler/__snapshots__/t_set.test.ts.snap

@@ -106,7 +106,7 @@ exports[`t-set set from body literal (with t-if/t-else 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`value\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`value\`] = new LazyValue(value1, ctx, this, node, key);
     return text(ctx['value']);
   }
 }"
@@ -142,7 +142,7 @@ exports[`t-set set from body lookup 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`stuff\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`stuff\`] = new LazyValue(value1, ctx, this, node, key);
     let txt1 = ctx['stuff'];
     return block1([txt1]);
   }
@@ -206,7 +206,7 @@ exports[`t-set t-set body is evaluated immediately 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"v1\\", 'before');
-    ctx[\`v2\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`v2\`] = new LazyValue(value1, ctx, this, node, key);
     setContextValue(ctx, \\"v1\\", 'after');
     const b3 = safeOutput(ctx['v2']);
     return block1([], [b3]);
@@ -471,7 +471,7 @@ exports[`t-set t-set with content and sub t-esc 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`setvar\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`setvar\`] = new LazyValue(value1, ctx, this, node, key);
     let txt1 = ctx['setvar'];
     return block1([txt1]);
   }
@@ -497,7 +497,7 @@ exports[`t-set t-set with t-value (falsy) and body 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"v3\\", false);
     setContextValue(ctx, \\"v1\\", 'before');
-    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node));
+    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node, key));
     setContextValue(ctx, \\"v1\\", 'after');
     setContextValue(ctx, \\"v3\\", true);
     const b3 = safeOutput(ctx['v2']);
@@ -525,7 +525,7 @@ exports[`t-set t-set with t-value (truthy) and body 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"v3\\", 'Truthy');
     setContextValue(ctx, \\"v1\\", 'before');
-    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node));
+    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node, key));
     setContextValue(ctx, \\"v1\\", 'after');
     setContextValue(ctx, \\"v3\\", false);
     const b3 = safeOutput(ctx['v2']);
@@ -638,7 +638,7 @@ exports[`t-set value priority (with non text body 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`value\`] = withDefault(1, new LazyValue(value1, ctx, this, node));
+    ctx[\`value\`] = withDefault(1, new LazyValue(value1, ctx, this, node, key));
     let txt1 = ctx['value'];
     return block1([txt1]);
   }

tests/compiler/t_call.test.ts

@@ -479,4 +479,21 @@ describe("t-call (template calling)", () => {
       "<span>123lucas</span>"
     );
   });
+
+  test("nested t-calls with magic variable 0", () => {
+    const context = new TestContext();
+    context.addTemplate("grandchild", `grandchild<t t-out="0"/>`);
+    context.addTemplate("child", `<t t-out="0"/>`);
+    context.addTemplate(
+      "main",
+      `
+        <t t-call="child">
+            <t t-call="grandchild">
+                <p>Some content...</p>
+            </t>
+        </t>`
+    );
+
+    expect(context.renderToString("main")).toBe("grandchild<p>Some content...</p>");
+  });
 });

tests/components/__snapshots__/error_handling.test.ts.snap

@@ -20,7 +20,7 @@ exports[`basics display a nice error if it cannot find component (in dev mode) 1
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`SomeMispelledComponent\`, props1, ctx);
+    helpers.validateProps(\`SomeMispelledComponent\`, props1, this);
     return comp1(props1, key + \`__1\`, node, this, null);
   }
 }"

tests/components/__snapshots__/lifecycle.test.ts.snap

@@ -704,7 +704,7 @@ exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {prop: ctx['state'].prop};
-    helpers.validateProps(\`Child\`, props1, ctx);
+    helpers.validateProps(\`Child\`, props1, this);
     return comp1(props1, key + \`__1\`, node, this, null);
   }
 }"

tests/components/__snapshots__/props.test.ts.snap

@@ -163,7 +163,7 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`abc\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`abc\`] = new LazyValue(value1, ctx, this, node, key);
     const b3 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }

tests/components/__snapshots__/props_validation.test.ts.snap

@@ -8,7 +8,7 @@ exports[`default props a default prop cannot be defined on a mandatory prop 1`]
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`Child\`, props1, ctx);
+    helpers.validateProps(\`Child\`, props1, this);
     return comp1(props1, key + \`__1\`, node, this, null);
   }
 }"
@@ -24,7 +24,7 @@ exports[`default props can set default boolean values 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -61,7 +61,7 @@ exports[`default props can set default values 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -92,7 +92,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -121,7 +121,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);
+    helpers.validateProps(\`Child\`, props1, this);
     return comp1(props1, key + \`__1\`, node, this, null);
   }
 }"
@@ -148,7 +148,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);
+    helpers.validateProps(\`Child\`, props1, this);
     return comp1(props1, key + \`__1\`, node, this, null);
   }
 }"
@@ -177,7 +177,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -207,7 +207,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -237,7 +237,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -254,7 +254,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -284,7 +284,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -314,7 +314,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -331,7 +331,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -348,7 +348,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -378,7 +378,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -408,7 +408,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -438,7 +438,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -455,7 +455,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -485,7 +485,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -502,7 +502,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -519,7 +519,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -536,7 +536,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -566,7 +566,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -596,7 +596,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -613,7 +613,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -643,7 +643,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -673,13 +673,47 @@ 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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
 `;
 
+exports[`props validation can validate through slots 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { markRaw } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  const comp2 = app.createComponent(\`Wrapper\`, true, true, false, true);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    const props1 = {};
+    helpers.validateProps(\`Child\`, props1, this);
+    return comp1(props1, key + \`__1\`, node, this, null);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props2 = {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})};
+    helpers.validateProps(\`Wrapper\`, props2, this);
+    return comp2(props2, key + \`__2\`, node, this, null);
+  }
+}"
+`;
+
+exports[`props validation can validate through slots 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return callSlot(ctx, node, key, 'default', false, {});
+  }
+}"
+`;
+
 exports[`props validation default values are applied before validating props at update 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -690,7 +724,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -721,7 +755,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -738,7 +772,7 @@ exports[`props validation mix of optional and mandatory 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`Child\`, props1, ctx);
+    helpers.validateProps(\`Child\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -755,7 +789,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);
+    helpers.validateProps(\`Child\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -786,7 +820,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -817,7 +851,7 @@ exports[`props validation props: list of strings 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -834,7 +868,7 @@ exports[`props validation validate simple types 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -851,7 +885,7 @@ exports[`props validation validate simple types 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -881,7 +915,7 @@ exports[`props validation validate simple types 4`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -898,7 +932,7 @@ exports[`props validation validate simple types 5`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -915,7 +949,7 @@ exports[`props validation validate simple types 6`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -945,7 +979,7 @@ exports[`props validation validate simple types 8`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -962,7 +996,7 @@ exports[`props validation validate simple types 9`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -979,7 +1013,7 @@ exports[`props validation validate simple types 10`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1009,7 +1043,7 @@ exports[`props validation validate simple types 12`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1026,7 +1060,7 @@ exports[`props validation validate simple types 13`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1043,7 +1077,7 @@ exports[`props validation validate simple types 14`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1073,7 +1107,7 @@ exports[`props validation validate simple types 16`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1090,7 +1124,7 @@ exports[`props validation validate simple types 17`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1107,7 +1141,7 @@ exports[`props validation validate simple types 18`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1137,7 +1171,7 @@ exports[`props validation validate simple types 20`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1154,7 +1188,7 @@ exports[`props validation validate simple types 21`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1171,7 +1205,7 @@ exports[`props validation validate simple types 22`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1201,7 +1235,7 @@ exports[`props validation validate simple types 24`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1218,7 +1252,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1235,7 +1269,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1265,7 +1299,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1282,7 +1316,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1299,7 +1333,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1329,7 +1363,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1346,7 +1380,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1363,7 +1397,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1393,7 +1427,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1410,7 +1444,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1427,7 +1461,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1457,7 +1491,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1474,7 +1508,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1491,7 +1525,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1521,7 +1555,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1538,7 +1572,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1555,7 +1589,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1585,7 +1619,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1602,7 +1636,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);
+    helpers.validateProps(\`SubComp\`, props1, this);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }

tests/components/__snapshots__/slots.test.ts.snap

@@ -2835,6 +2835,36 @@ exports[`slots t-set t-value in a slot 2`] = `
 }"
 `;
 
+exports[`slots t-set-slot=default has priority over rest of the content 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { capture, markRaw } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return text(\`some other text\`);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    const ctx1 = capture(ctx);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+  }
+}"
+`;
+
+exports[`slots t-set-slot=default has priority over rest of the content 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return callSlot(ctx, node, key, 'default', false, {});
+  }
+}"
+`;
+
 exports[`slots t-slot in recursive templates 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/components/__snapshots__/t_call.test.ts.snap

@@ -444,6 +444,51 @@ exports[`t-call t-call with t-call-context and subcomponent 3`] = `
 }"
 `;
 
+exports[`t-call t-call with t-call-context and subcomponent, in dev mode 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`someTemplate\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let ctx1 = ctx['subctx'];
+    return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call t-call with t-call-context and subcomponent, in dev mode 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const comp2 = app.createComponent(\`Child\`, true, false, false, false);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {name: ctx['aab']};
+    helpers.validateProps(\`Child\`, props1, this);
+    const b2 = comp1(props1, key + \`__1\`, node, this, null);
+    const props2 = {name: ctx['lpe']};
+    helpers.validateProps(\`Child\`, props2, this);
+    const b3 = comp2(props2, key + \`__2\`, node, this, null);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`t-call t-call with t-call-context and subcomponent, in dev mode 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`child\`);
+    const b3 = text(ctx['props'].name);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
 exports[`t-call t-call with t-call-context, simple use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/components/__snapshots__/t_foreach.test.ts.snap

@@ -53,10 +53,10 @@ exports[`list of components crash on duplicate key in dev mode 1`] = `
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`item\`] = v_block1[i1];
       const key1 = 'child';
-      if (keys1.has(key1)) { throw new OwlError(\`Got duplicate key in t-foreach: \${key1}\`)}
-      keys1.add(key1);
+      if (keys1.has(String(key1))) { throw new OwlError(\`Got duplicate key in t-foreach: \${key1}\`)}
+      keys1.add(String(key1));
       const props1 = {};
-      helpers.validateProps(\`Child\`, props1, ctx);
+      helpers.validateProps(\`Child\`, props1, this);
       c_block1[i1] = withKey(comp1(props1, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     return list(c_block1);
@@ -75,6 +75,42 @@ exports[`list of components crash on duplicate key in dev mode 2`] = `
 }"
 `;
 
+exports[`list of components crash when using object as keys that serialize to the same string 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, OwlError, withKey } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList([{},{}]);;
+    const keys1 = new Set();
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`item\`] = v_block1[i1];
+      const key1 = ctx['item'];
+      if (keys1.has(String(key1))) { throw new OwlError(\`Got duplicate key in t-foreach: \${key1}\`)}
+      keys1.add(String(key1));
+      const props1 = {};
+      helpers.validateProps(\`Child\`, props1, this);
+      c_block1[i1] = withKey(comp1(props1, key + \`__1__\${key1}\`, node, this, null), key1);
+    }
+    return list(c_block1);
+  }
+}"
+`;
+
+exports[`list of components crash when using object as keys that serialize to the same string 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`\`);
+  }
+}"
+`;
+
 exports[`list of components list of sub components inside other nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -113,6 +149,58 @@ exports[`list of components list of sub components inside other nodes 2`] = `
 }"
 `;
 
+exports[`list of components order is correct when slots are not of same type 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { capture, markRaw } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  
+  let block2 = createBlock(\`<div>A</div>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    let b2;
+    if (!ctx['state'].active) {
+      b2 = block2();
+    }
+    return multi([b2]);
+  }
+  
+  function slot2(ctx, node, key = \\"\\") {
+    return text(\`B\`);
+  }
+  
+  function slot3(ctx, node, key = \\"\\") {
+    return text(\`C\`);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    const ctx1 = capture(ctx);
+    return comp1({slots: markRaw({'a': {__render: slot1, __ctx: ctx1, active: !ctx['state'].active}, 'b': {__render: slot2, __ctx: ctx1, active: true}, 'c': {__render: slot3, __ctx: ctx1, active: ctx['state'].active}})}, key + \`__1\`, node, this, null);
+  }
+}"
+`;
+
+exports[`list of components order is correct when slots are not of same type 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, callSlot, withKey } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['slotNames']);;
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`slotName\`] = v_block1[i1];
+      const key1 = ctx['slotName'];
+      const slot1 = (ctx['slotName']);
+      c_block1[i1] = withKey(toggler(slot1, callSlot(ctx, node, key1 + \`__1__\${key1}\`, slot1, true, {})), key1);
+    }
+    return list(c_block1);
+  }
+}"
+`;
+
 exports[`list of components reconciliation alg works for t-foreach in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/components/__snapshots__/t_out.test.ts.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components in t-out simple list 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, isBoundary, withDefault, LazyValue, safeOutput, withKey } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  
+  function value1(ctx, node, key = \\"\\") {
+    return comp1({}, key + \`__1\`, node, this, null);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    ctx = Object.create(ctx);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1,2]);;
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`n\`] = v_block1[i1];
+      const key1 = ctx['n'];
+      ctx[\`blabla\`] = new LazyValue(value1, ctx, this, node, key1);
+      c_block1[i1] = withKey(safeOutput(ctx['blabla']), key1);
+    }
+    return list(c_block1);
+  }
+}"
+`;
+
+exports[`components in t-out simple list 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`child\`);
+  }
+}"
+`;

tests/components/__snapshots__/t_set.test.ts.snap

@@ -59,7 +59,7 @@ exports[`t-set slots with a t-set with a component in body 1`] = `
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
     const b3 = text(\` in slot \`);
     const b4 = safeOutput(ctx['v']);
     return multi([b3, b4]);
@@ -114,7 +114,7 @@ exports[`t-set slots with an t-set with a component in body 1`] = `
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
     const b5 = text(\` tea \`);
     const b6 = safeOutput(ctx['v']);
     return multi([b5, b6]);
@@ -169,7 +169,7 @@ exports[`t-set slots with an unused t-set with a component in body 1`] = `
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
     return text(\` in slot \`);
   }
   
@@ -343,7 +343,7 @@ exports[`t-set t-set with a component in body 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
     const b3 = safeOutput(ctx['v']);
     return block1([], [b3]);
   }
@@ -377,7 +377,7 @@ exports[`t-set t-set with something in body 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
     const b3 = safeOutput(ctx['v']);
     return block1([], [b3]);
   }

tests/components/props_validation.test.ts

@@ -780,6 +780,32 @@ describe("props validation", () => {
     // we just check that it doesn't throw
     await expect(mount(Parent, fixture, { dev: true })).resolves.toEqual(expect.anything());
   });
+
+  test("can validate through slots", async () => {
+    class Child extends Component {
+      static props = ["message"];
+      static template = xml`<div>hey</div>`;
+    }
+
+    class Wrapper extends Component {
+      static template = xml`<t t-slot="default"/>`;
+    }
+
+    class Parent extends Component {
+      static components = { Child, Wrapper };
+      static template = xml`<Wrapper><Child /></Wrapper>`;
+    }
+
+    const app = new App(Parent, { test: true });
+    let error: OwlError | undefined;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(
+      "Invalid props for component 'Child': 'message' is missing"
+    );
+    await mountProm;
+    expect(error!).toBeDefined();
+    expect(error!.message).toBe("Invalid props for component 'Child': 'message' is missing");
+  });
 });
 
 //------------------------------------------------------------------------------

tests/components/slots.test.ts

@@ -45,6 +45,23 @@ describe("slots", () => {
     expect(fixture.innerHTML).toBe("some text");
   });
 
+  test("t-set-slot=default has priority over rest of the content", async () => {
+    class Child extends Component {
+      static template = xml`<t t-slot="default"/>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child>
+        some text
+        <t t-set-slot="default">some other text</t>
+      </Child>`;
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("some other text");
+  });
+
   test("simple slot with slot scope", async () => {
     let child: any;
     class Child extends Component {

tests/components/t_call.test.ts

@@ -287,4 +287,32 @@ describe("t-call", () => {
     });
     expect(fixture.innerHTML).toBe("childaaronchildlucas");
   });
+
+  test("t-call with t-call-context and subcomponent, in dev mode", async () => {
+    class Child extends Component {
+      static template = xml`child<t t-esc="props.name"/>`;
+      static props = ["name"];
+    }
+
+    class Root extends Component {
+      static template = xml`
+          <t t-call="someTemplate" t-call-context="subctx"/>`;
+
+      static components = { Child };
+
+      subctx = { aab: "aaron", lpe: "lucas" };
+    }
+
+    await mount(Root, fixture, {
+      dev: true,
+      templates: `
+        <templates>
+          <t t-name="someTemplate">
+            <Child name="aab"/>
+            <Child name="lpe"/>
+          </t>
+        </templates>`,
+    });
+    expect(fixture.innerHTML).toBe("childaaronchildlucas");
+  });
 });

tests/components/t_foreach.test.ts

@@ -331,4 +331,63 @@ describe("list of components", () => {
     console.info = consoleInfo;
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
+
+  test("crash when using object as keys that serialize to the same string", async () => {
+    const consoleInfo = console.info;
+    console.info = jest.fn();
+    class Child extends Component {
+      static template = xml``;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <t t-foreach="[{}, {}]" t-as="item" t-key="item">
+          <Child/>
+        </t>
+      `;
+      static components = { Child };
+    }
+
+    const app = new App(Parent, { test: true });
+    const mountProm = expect(app.mount(fixture)).rejects.toThrow(
+      "Got duplicate key in t-foreach: [object Object]"
+    );
+    await expect(nextAppError(app)).resolves.toThrow(
+      "Got duplicate key in t-foreach: [object Object]"
+    );
+    await mountProm;
+    console.info = consoleInfo;
+    expect(mockConsoleWarn).toBeCalledTimes(1);
+  });
+
+  test("order is correct when slots are not of same type", async () => {
+    class Child extends Component {
+      static template = xml`
+          <t t-slot="{{ slotName }}" t-foreach="slotNames" t-as="slotName" t-key="slotName"/>
+      `;
+      get slotNames() {
+        return Object.entries(this.props.slots)
+          .filter((entry: any) => entry[1].active)
+          .map((entry) => entry[0]);
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <Child>
+          <t t-set-slot="a" active="!state.active"><div t-if="!state.active">A</div></t>
+          <t t-set-slot="b" active="true">B</t>
+          <t t-set-slot="c" active="state.active">C</t>
+        </Child>
+      `;
+      static components = { Child };
+      state = useState({ active: false });
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(fixture.textContent).toBe("AB");
+    parent.state.active = true;
+    await nextTick();
+    expect(fixture.textContent).toBe("BC");
+  });
 });

tests/components/t_out.test.ts

@@ -0,0 +1,36 @@
+import { Component, mount, xml } from "../../src/index";
+import { makeTestFixture, snapshotEverything } from "../helpers";
+
+snapshotEverything();
+
+// -----------------------------------------------------------------------------
+// t-out
+// -----------------------------------------------------------------------------
+
+describe("components in t-out", () => {
+  let fixture: HTMLElement;
+
+  beforeEach(() => {
+    fixture = makeTestFixture();
+  });
+
+  test("simple list", async () => {
+    class Child extends Component {
+      static template = xml`child`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+                <t t-foreach="[1,2]" t-as="n" t-key="n">
+                  <t t-set="blabla">
+                    <Child />
+                  </t>
+                  <t t-out="blabla"/>
+                </t>`;
+      static components = { Child };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("childchild");
+  });
+});

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

@@ -155,6 +155,44 @@ exports[`Portal Add and remove portals with t-foreach inside div 1`] = `
 }"
 `;
 
+exports[`Portal Child and Portal 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  
+  let block3 = createBlock(\`<div class=\\"portal\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    const b3 = block3();
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`Portal Child and Portal 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const Portal = app.Portal;
+  const comp1 = app.createComponent(null, false, true, false, false);
+  
+  let block2 = createBlock(\`<span>child</span>\`);
+  let block3 = createBlock(\`<span>portal</span>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return block3();
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = block2();
+    const b4 = comp1({target: '.portal',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    return multi([b2, b4]);
+  }
+}"
+`;
+
 exports[`Portal Portal composed with t-slot 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -515,6 +553,44 @@ exports[`Portal lifecycle hooks of portal sub component are properly called 2`]
 }"
 `;
 
+exports[`Portal portal and Child 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  
+  let block2 = createBlock(\`<div class=\\"portal\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = block2();
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`Portal portal and Child 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const Portal = app.Portal;
+  const comp1 = app.createComponent(null, false, true, false, false);
+  
+  let block2 = createBlock(\`<span>child</span>\`);
+  let block3 = createBlock(\`<span>portal</span>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return block3();
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = block2();
+    const b4 = comp1({target: '.portal',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    return multi([b2, b4]);
+  }
+}"
+`;
+
 exports[`Portal portal could have dynamically no content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/misc/portal.test.ts

@@ -276,7 +276,7 @@ describe("Portal", () => {
 
     expect(error!).toBeDefined();
     expect(error!.message).toBe("invalid portal target");
-    expect(fixture.innerHTML).toBe(`<div></div>`);
+    expect(fixture.innerHTML).toBe(``);
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 
@@ -874,6 +874,48 @@ describe("Portal", () => {
     await nextTick();
     expect(fixture.innerHTML).toBe('<div id="outside"></div><div></div>');
   });
+
+  test("Child and Portal", async () => {
+    class Child extends Component {
+      static template = xml`
+        <span>child</span>
+        <t t-portal="'.portal'"><span>portal</span></t>`;
+    }
+    class Parent extends Component {
+      static template = xml`
+        <t>
+          <Child/>
+          <div class="portal"></div>
+        </t>`;
+
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(
+      '<span>child</span><div class="portal"><span>portal</span></div>'
+    );
+  });
+
+  test("portal and Child", async () => {
+    class Child extends Component {
+      static template = xml`
+        <span>child</span>
+        <t t-portal="'.portal'"><span>portal</span></t>`;
+    }
+    class Parent extends Component {
+      static template = xml`
+        <t>
+          <div class="portal"></div>
+          <Child/>
+        </t>`;
+
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(
+      '<div class="portal"><span>portal</span></div><span>child</span>'
+    );
+  });
 });
 
 describe("Portal: UI/UX", () => {

tools/release.js

@@ -72,10 +72,8 @@ async function startRelease() {
   }
 
   // ---------------------------------------------------------------------------
-  log(`Step 3/${STEPS}: updating package.json, readme.md and roadmap.md...`);
+  log(`Step 3/${STEPS}: updating package.json...`);
   await replaceInFile("./package.json", current, next);
-  await replaceInFile("./README.md", current, next);
-  await replaceInFile("./roadmap.md", current, next);
 
   // ---------------------------------------------------------------------------
   log(`Step 4/${STEPS}: creating git commit...`);