wip

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](https://github.com/odoo/owl/releases/latest)
+- [owl-1.4.10](https://github.com/odoo/owl/releases/tag/v1.4.10)
 

doc/learning/tutorial_todoapp.md

@@ -770,11 +770,10 @@ For reference, here is the final code:
     <meta charset="UTF-8" />
     <title>OWL Todo App</title>
     <link rel="stylesheet" href="app.css" />
-  </head>
-  <body>
     <script src="owl.js"></script>
     <script src="app.js"></script>
-  </body>
+  </head>
+  <body></body>
 </html>
 ```
 

doc/reference/hooks.md

@@ -234,8 +234,7 @@ 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, these dependencies
+function. The dependency function returns a list of dependencies. If any of these
-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,8 +1,9 @@
 {
   "name": "@odoo/owl",
-  "version": "2.0.0",
+  "version": "2.0.0-beta-10",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
+  "browser": "dist/owl.iife.js",
   "module": "dist/owl.es.js",
   "types": "dist/types/owl.d.ts",
   "files": [

roadmap.md

@@ -1,9 +1,28 @@
 # 🦉 OWL Roadmap 🦉
 
-- Current version: 2.X
+- Current version: 1.4.10
 - Status: stable
 
-Owl is currently stable. No (large) improvements is expected in the near future.
+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.
+
 
-Note that we intend to keep maintaining owl, and as such, improvements and/or
-breaking changes may require a version bump in the future.

rollup.config.js

@@ -6,14 +6,6 @@ import dts from "rollup-plugin-dts";
 
 let input, output;
 
-const IIFE_FILENAME = "dist/owl.iife.js";
-const CJS_FILENAME = "dist/owl.cjs.js";
-const ES_FILENAME = "dist/owl.es.js";
-
-if (pkg.module !== ES_FILENAME || pkg.main !== CJS_FILENAME) {
-  throw new Error("package.json has been modified. Build script should be updated accordingly");
-}  
-
 const outro = `
 __info__.version = '${pkg.version}';
 __info__.date = '${new Date().toISOString()}';
@@ -31,19 +23,19 @@ switch (process.argv[4]) {
   case "runtime":
     input = "src/runtime/index.ts";
     output = [
-      getConfigForFormat('esm', addSuffix(ES_FILENAME,  'runtime'), outro),
+      getConfigForFormat('esm', addSuffix(pkg.module,  'runtime'), outro),
-      getConfigForFormat('cjs', addSuffix(CJS_FILENAME,  'runtime'), outro),
+      getConfigForFormat('cjs', addSuffix(pkg.main,  'runtime'), outro),
-      getConfigForFormat('iife', addSuffix(IIFE_FILENAME,  'runtime'), outro),
+      getConfigForFormat('iife', addSuffix(pkg.browser,  'runtime'), outro),
-      getConfigForFormat('iife', addSuffix(IIFE_FILENAME,  'runtime'), outro, true),
+      getConfigForFormat('iife', addSuffix(pkg.browser,  'runtime'), outro, true),
     ]
     break;
   default:
     input = "src/index.ts",
     output = [
-      getConfigForFormat('esm', ES_FILENAME, outro),
+      getConfigForFormat('esm', pkg.module, outro),
-      getConfigForFormat('cjs', CJS_FILENAME, outro),
+      getConfigForFormat('cjs', pkg.main, outro),
-      getConfigForFormat('iife', IIFE_FILENAME, outro),
+      getConfigForFormat('iife', pkg.browser, outro),
-      getConfigForFormat('iife', IIFE_FILENAME, outro, true),
+      getConfigForFormat('iife', pkg.browser, outro, true),
     ]
   }
 

src/compiler/code_generator.ts

@@ -1,4 +1,3 @@
-import { isProp } from "../runtime/blockdom/attributes";
 import {
   compileExpr,
   compileExprToArray,
@@ -23,14 +22,13 @@ import {
   ASTTif,
   ASTTKey,
   ASTTOut,
-  ASTTPortal,
-  ASTTranslation,
   ASTTSet,
+  ASTTranslation,
   ASTType,
-  Attrs,
+  ASTTPortal,
   EventHandlers,
+  Attrs,
 } from "./parser";
-import { OwlError } from "../runtime/error_handling";
 
 type BlockType = "block" | "text" | "multi" | "list" | "html" | "comment";
 
@@ -145,7 +143,7 @@ interface Context {
   ctxVar?: string;
 }
 
-function createContext(parentCtx: Context, params?: Partial<Context>): Context {
+function createContext(parentCtx: Context, params?: Partial<Context>) {
   return Object.assign(
     {
       block: null,
@@ -214,14 +212,6 @@ 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"];
@@ -240,7 +230,6 @@ export class CodeGenerator {
   translatableAttributes: string[] = TRANSLATABLE_ATTRS;
   ast: AST;
   staticDefs: { id: string; expr: string }[] = [];
-  slotNames: Set<String> = new Set();
   helpers: Set<string> = new Set();
 
   constructor(ast: AST, options: CodeGenOptions) {
@@ -345,8 +334,8 @@ export class CodeGenerator {
     this.addLine(`const ${varName} = ${expr};`);
   }
 
-  insertAnchor(block: BlockDescription, index: number = block.children.length) {
+  insertAnchor(block: BlockDescription) {
-    const tag = `block-child-${index}`;
+    const tag = `block-child-${block.children.length}`;
     const anchor = xmlDoc.createElement(tag);
     block.insert(anchor);
   }
@@ -373,15 +362,19 @@ export class CodeGenerator {
 
   insertBlock(expression: string, block: BlockDescription, ctx: Context): void {
     let blockExpr = block.generateExpr(expression);
+    const tKeyExpr = ctx.tKeyExpr;
     if (block.parentVar) {
-      let key = this.target.currentKey(ctx);
+      let keyArg = `key${this.target.loopLevel}`;
+      if (tKeyExpr) {
+        keyArg = `${tKeyExpr} + ${keyArg}`;
+      }
       this.helpers.add("withKey");
-      this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${key});`);
+      this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${keyArg});`);
       return;
     }
 
-    if (ctx.tKeyExpr) {
+    if (tKeyExpr) {
-      blockExpr = `toggler(${ctx.tKeyExpr}, ${blockExpr})`;
+      blockExpr = `toggler(${tKeyExpr}, ${blockExpr})`;
     }
 
     if (block.isRoot && !ctx.preventRoot) {
@@ -428,66 +421,78 @@ 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:
-        return this.compileComment(ast, ctx);
+        this.compileComment(ast, ctx);
+        break;
       case ASTType.Text:
-        return this.compileText(ast, ctx);
+        this.compileText(ast, ctx);
+        break;
       case ASTType.DomNode:
-        return this.compileTDomNode(ast, ctx);
+        this.compileTDomNode(ast, ctx);
+        break;
       case ASTType.TEsc:
-        return this.compileTEsc(ast, ctx);
+        this.compileTEsc(ast, ctx);
+        break;
       case ASTType.TOut:
-        return this.compileTOut(ast, ctx);
+        this.compileTOut(ast, ctx);
+        break;
       case ASTType.TIf:
-        return this.compileTIf(ast, ctx);
+        this.compileTIf(ast, ctx);
+        break;
       case ASTType.TForEach:
-        return this.compileTForeach(ast, ctx);
+        this.compileTForeach(ast, ctx);
+        break;
       case ASTType.TKey:
-        return this.compileTKey(ast, ctx);
+        this.compileTKey(ast, ctx);
+        break;
       case ASTType.Multi:
-        return this.compileMulti(ast, ctx);
+        this.compileMulti(ast, ctx);
+        break;
       case ASTType.TCall:
-        return this.compileTCall(ast, ctx);
+        this.compileTCall(ast, ctx);
+        break;
       case ASTType.TCallBlock:
-        return this.compileTCallBlock(ast, ctx);
+        this.compileTCallBlock(ast, ctx);
+        break;
       case ASTType.TSet:
-        return this.compileTSet(ast, ctx);
+        this.compileTSet(ast, ctx);
+        break;
       case ASTType.TComponent:
-        return this.compileComponent(ast, ctx);
+        this.compileComponent(ast, ctx);
+        break;
       case ASTType.TDebug:
-        return this.compileDebug(ast, ctx);
+        this.compileDebug(ast, ctx);
+        break;
       case ASTType.TLog:
-        return this.compileLog(ast, ctx);
+        this.compileLog(ast, ctx);
+        break;
       case ASTType.TSlot:
-        return this.compileTSlot(ast, ctx);
+        this.compileTSlot(ast, ctx);
+        break;
       case ASTType.TTranslation:
-        return this.compileTTranslation(ast, ctx);
+        this.compileTTranslation(ast, ctx);
+        break;
       case ASTType.TPortal:
-        return this.compileTPortal(ast, ctx);
+        this.compileTPortal(ast, ctx);
     }
   }
 
-  compileDebug(ast: ASTDebug, ctx: Context): string | null {
+  compileDebug(ast: ASTDebug, ctx: Context) {
     this.addLine(`debugger;`);
     if (ast.content) {
-      return this.compileAST(ast.content, ctx);
+      this.compileAST(ast.content, ctx);
     }
-    return null;
   }
 
-  compileLog(ast: ASTLog, ctx: Context): string | null {
+  compileLog(ast: ASTLog, ctx: Context) {
     this.addLine(`console.log(${compileExpr(ast.expr)});`);
     if (ast.content) {
-      return this.compileAST(ast.content, ctx);
+      this.compileAST(ast.content, ctx);
     }
-    return null;
   }
-  compileComment(ast: ASTComment, ctx: Context): string {
+  compileComment(ast: ASTComment, ctx: Context) {
     let { block, forceNewBlock } = ctx;
     const isNewBlock = !block || forceNewBlock;
     if (isNewBlock) {
@@ -500,10 +505,9 @@ export class CodeGenerator {
       const text = xmlDoc.createComment(ast.value);
       block!.insert(text);
     }
-    return block!.varName;
   }
 
-  compileText(ast: ASTText, ctx: Context): string {
+  compileText(ast: ASTText, ctx: Context) {
     let { block, forceNewBlock } = ctx;
 
     let value = ast.value;
@@ -522,7 +526,6 @@ 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 {
@@ -531,7 +534,7 @@ export class CodeGenerator {
       .slice(1)
       .map((m) => {
         if (!MODS.has(m)) {
-          throw new OwlError(`Unknown event modifier: '${m}'`);
+          throw new Error(`Unknown event modifier: '${m}'`);
         }
         return `"${m}"`;
       });
@@ -542,7 +545,7 @@ export class CodeGenerator {
     return `[${modifiersCode}${this.captureExpression(handler)}, ctx]`;
   }
 
-  compileTDomNode(ast: ASTDomNode, ctx: Context): string {
+  compileTDomNode(ast: ASTDomNode, ctx: Context) {
     let { block, forceNewBlock } = ctx;
     const isNewBlock = !block || forceNewBlock || ast.dynamicTag !== null || ast.ns;
     let codeIdx = this.target.code.length;
@@ -575,22 +578,13 @@ export class CodeGenerator {
         attrName = key.slice(7);
         attrs["block-attribute-" + idx] = attrName;
       } else if (key.startsWith("t-att")) {
-        attrName = key === "t-att" ? null : key.slice(6);
         expr = compileExpr(ast.attrs[key]);
-        if (attrName && isProp(ast.tag, attrName)) {
-          // we force a new string or new boolean to bypass the equality check in blockdom when patching same value
-          if (attrName === "value") {
-            // When the expression is falsy, fall back to an empty string
-            expr = `new String((${expr}) || "")`;
-          } else {
-            expr = `new Boolean(${expr})`;
-          }
-        }
         const idx = block!.insertData(expr, "attr");
         if (key === "t-att") {
           attrs[`block-attributes`] = String(idx);
         } else {
-          attrs[`block-attribute-${idx}`] = attrName!;
+          attrName = key.slice(6);
+          attrs[`block-attribute-${idx}`] = attrName;
         }
       } else if (this.translatableAttributes.includes(key)) {
         attrs[key] = this.translateFn(ast.attrs[key]);
@@ -698,7 +692,7 @@ export class CodeGenerator {
       const children = ast.content;
       for (let i = 0; i < children.length; i++) {
         const child = ast.content[i];
-        const subCtx = createContext(ctx, {
+        const subCtx: Context = createContext(ctx, {
           block,
           index: block!.childNumber,
           forceNewBlock: false,
@@ -729,10 +723,9 @@ export class CodeGenerator {
         this.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
       }
     }
-    return block!.varName;
   }
 
-  compileTEsc(ast: ASTTEsc, ctx: Context): string {
+  compileTEsc(ast: ASTTEsc, ctx: Context) {
     let { block, forceNewBlock } = ctx;
     let expr: string;
     if (ast.expr === "0") {
@@ -753,47 +746,29 @@ export class CodeGenerator {
       const text = xmlDoc.createElement(`block-text-${idx}`);
       block.insert(text);
     }
-    return block.varName;
   }
 
-  compileTOut(ast: ASTTOut, ctx: Context): string {
+  compileTOut(ast: ASTTOut, ctx: Context) {
     let { block } = ctx;
     if (block) {
       this.insertAnchor(block);
     }
     block = this.createBlock(block, "html", ctx);
-    let blockStr;
+    this.helpers.add(ast.expr === "0" ? "zero" : "safeOutput");
-    if (ast.expr === "0") {
+    let expr = ast.expr === "0" ? "ctx[zero]" : `safeOutput(${compileExpr(ast.expr)})`;
-      this.helpers.add("zero");
+    if (ast.body) {
-      blockStr = `ctx[zero]`;
+      const nextId = BlockDescription.nextBlockId;
-    } else if (ast.body) {
+      const subCtx: Context = createContext(ctx);
-      let bodyValue = null;
-      bodyValue = BlockDescription.nextBlockId;
-      const subCtx = createContext(ctx);
       this.compileAST({ type: ASTType.Multi, content: ast.body }, subCtx);
-      this.helpers.add("safeOutput");
+      this.helpers.add("withDefault");
-      blockStr = `safeOutput(${compileExpr(ast.expr)}, b${bodyValue})`;
+      expr = `withDefault(${expr}, b${nextId})`;
-    } else {
-      this.helpers.add("safeOutput");
-      blockStr = `safeOutput(${compileExpr(ast.expr)})`;
     }
-    this.insertBlock(blockStr, block, ctx);
+    this.insertBlock(`${expr}`, block, ctx);
-    return block.varName;
   }
 
-  compileTIfBranch(content: AST, block: BlockDescription, ctx: Context) {
+  compileTIf(ast: ASTTif, ctx: Context, nextNode?: ASTDomNode) {
-    this.target.indentLevel++;
+    let { block, forceNewBlock, index } = ctx;
-    let childN = block.children.length;
+    let currentIndex = index;
-    this.compileAST(content, createContext(ctx, { block, index: ctx.index }));
-    if (block.children.length > childN) {
-      // we have some content => need to insert an anchor at correct index
-      this.insertAnchor(block!, childN);
-    }
-    this.target.indentLevel--;
-  }
-
-  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);
     if (block) {
@@ -803,16 +778,28 @@ export class CodeGenerator {
       block = this.createBlock(block, "multi", ctx);
     }
     this.addLine(`if (${compileExpr(ast.condition)}) {`);
-    this.compileTIfBranch(ast.content, block, ctx);
+    this.target.indentLevel++;
+    this.insertAnchor(block!);
+    const subCtx: Context = createContext(ctx, { block, index: currentIndex });
+    this.compileAST(ast.content, subCtx);
+    this.target.indentLevel--;
     if (ast.tElif) {
       for (let clause of ast.tElif) {
         this.addLine(`} else if (${compileExpr(clause.condition)}) {`);
-        this.compileTIfBranch(clause.content, block, ctx);
+        this.target.indentLevel++;
+        this.insertAnchor(block);
+        const subCtx: Context = createContext(ctx, { block, index: currentIndex });
+        this.compileAST(clause.content, subCtx);
+        this.target.indentLevel--;
       }
     }
     if (ast.tElse) {
       this.addLine(`} else {`);
-      this.compileTIfBranch(ast.tElse, block, ctx);
+      this.target.indentLevel++;
+      this.insertAnchor(block);
+      const subCtx: Context = createContext(ctx, { block, index: currentIndex });
+      this.compileAST(ast.tElse, subCtx);
+      this.target.indentLevel--;
     }
     this.addLine("}");
     if (isNewBlock) {
@@ -835,10 +822,9 @@ 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): string {
+  compileTForeach(ast: ASTTForEach, ctx: Context) {
     let { block } = ctx;
     if (block) {
       this.insertAnchor(block);
@@ -875,11 +861,10 @@ export class CodeGenerator {
     this.define(`key${this.target.loopLevel}`, ast.key ? compileExpr(ast.key) : loopVar);
     if (this.dev) {
       // Throw error on duplicate keys in dev mode
-      this.helpers.add("OwlError");
       this.addLine(
-        `if (keys${block.id}.has(String(key${this.target.loopLevel}))) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`
+        `if (keys${block.id}.has(key${this.target.loopLevel})) { throw new Error(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`
       );
-      this.addLine(`keys${block.id}.add(String(key${this.target.loopLevel}));`);
+      this.addLine(`keys${block.id}.add(key${this.target.loopLevel});`);
     }
     let id: string;
     if (ast.memo) {
@@ -900,7 +885,7 @@ export class CodeGenerator {
       this.addLine("}");
     }
 
-    const subCtx = createContext(ctx, { block, index: loopVar });
+    const subCtx: Context = createContext(ctx, { block, index: loopVar });
     this.compileAST(ast.body, subCtx);
     if (ast.memo) {
       this.addLine(
@@ -916,10 +901,9 @@ export class CodeGenerator {
       this.addLine(`ctx = ctx.__proto__;`);
     }
     this.insertBlock("l", block, ctx);
-    return block.varName;
   }
 
-  compileTKey(ast: ASTTKey, ctx: Context): string | null {
+  compileTKey(ast: ASTTKey, ctx: Context) {
     const tKeyExpr = generateId("tKey_");
     this.define(tKeyExpr, compileExpr(ast.expr));
     ctx = createContext(ctx, {
@@ -927,22 +911,20 @@ export class CodeGenerator {
       block: ctx.block,
       index: ctx.index,
     });
-    return this.compileAST(ast.content, ctx);
+    this.compileAST(ast.content, ctx);
   }
 
-  compileMulti(ast: ASTMulti, ctx: Context): string | null {
+  compileMulti(ast: ASTMulti, ctx: Context) {
     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) {
-          const blockName = this.compileAST(child, ctx);
+          this.compileAST(child, ctx);
-          result = result || blockName;
         }
-        return result;
+        return;
       }
       block = this.createBlock(block, "multi", ctx);
     }
@@ -950,7 +932,7 @@ export class CodeGenerator {
     for (let i = 0, l = ast.content.length; i < l; i++) {
       const child = ast.content[i];
       const isTSet = child.type === ASTType.TSet;
-      const subCtx = createContext(ctx, {
+      const subCtx: Context = createContext(ctx, {
         block,
         index,
         forceNewBlock: !isTSet,
@@ -982,10 +964,9 @@ 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): string {
+  compileTCall(ast: ASTTCall, ctx: Context) {
     let { block, forceNewBlock } = ctx;
     let ctxVar = ctx.ctxVar || "ctx";
     if (ast.context) {
@@ -996,11 +977,12 @@ export class CodeGenerator {
       this.addLine(`${ctxVar} = Object.create(${ctxVar});`);
       this.addLine(`${ctxVar}[isBoundary] = 1;`);
       this.helpers.add("isBoundary");
-      const subCtx = createContext(ctx, { preventRoot: true, ctxVar });
+      const nextId = BlockDescription.nextBlockId;
-      const bl = this.compileMulti({ type: ASTType.Multi, content: ast.body }, subCtx);
+      const subCtx: Context = createContext(ctx, { preventRoot: true, ctxVar });
-      if (bl) {
+      this.compileAST({ type: ASTType.Multi, content: ast.body }, subCtx);
+      if (nextId !== BlockDescription.nextBlockId) {
         this.helpers.add("zero");
-        this.addLine(`${ctxVar}[zero] = ${bl};`);
+        this.addLine(`${ctxVar}[zero] = b${nextId};`);
       }
     }
     const isDynamic = INTERP_REGEXP.test(ast.name);
@@ -1034,10 +1016,9 @@ export class CodeGenerator {
     if (ast.body && !ctx.isLast) {
       this.addLine(`${ctxVar} = ${ctxVar}.__proto__;`);
     }
-    return block.varName;
   }
 
-  compileTCallBlock(ast: ASTTCallBlock, ctx: Context): string {
+  compileTCallBlock(ast: ASTTCallBlock, ctx: Context) {
     let { block, forceNewBlock } = ctx;
     if (block) {
       if (!forceNewBlock) {
@@ -1046,10 +1027,9 @@ 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): null {
+  compileTSet(ast: ASTTSet, ctx: Context) {
     this.target.shouldProtectScope = true;
     this.helpers.add("isBoundary").add("withDefault");
     const expr = ast.value ? compileExpr(ast.value || "") : "null";
@@ -1057,8 +1037,7 @@ export class CodeGenerator {
       this.helpers.add("LazyValue");
       const bodyAst: AST = { type: ASTType.Multi, content: ast.body };
       const name = this.compileInNewTarget("value", bodyAst, ctx);
-      let key = this.target.currentKey(ctx);
+      let value = `new LazyValue(${name}, ctx, this, node)`;
-      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 {
@@ -1075,7 +1054,6 @@ export class CodeGenerator {
       this.helpers.add("setContextValue");
       this.addLine(`setContextValue(${ctx.ctxVar || "ctx"}, "${ast.name}", ${value});`);
     }
-    return null;
   }
 
   generateComponentKey() {
@@ -1106,7 +1084,7 @@ export class CodeGenerator {
         name = _name;
         value = `bind(ctx, ${value || undefined})`;
       } else {
-        throw new OwlError("Invalid prop suffix");
+        throw new Error("Invalid prop suffix");
       }
     }
     name = /^[a-z_]+$/i.test(name) ? name : `'${name}'`;
@@ -1127,7 +1105,7 @@ export class CodeGenerator {
     return propString;
   }
 
-  compileComponent(ast: ASTComponent, ctx: Context): string {
+  compileComponent(ast: ASTComponent, ctx: Context) {
     let { block } = ctx;
     // props
     const hasSlotsProp = "slots" in (ast.props || {});
@@ -1193,7 +1171,7 @@ export class CodeGenerator {
     }
 
     if (this.dev) {
-      this.addLine(`helpers.validateProps(${expr}, ${propVar!}, this);`);
+      this.addLine(`helpers.validateProps(${expr}, ${propVar!}, ctx);`);
     }
 
     if (block && (ctx.forceNewBlock === false || ctx.tKeyExpr)) {
@@ -1227,7 +1205,6 @@ export class CodeGenerator {
 
     block = this.createBlock(block, "multi", ctx);
     this.insertBlock(blockExpr, block, ctx);
-    return block.varName;
   }
 
   wrapWithEventCatcher(expr: string, on: EventHandlers): string {
@@ -1246,43 +1223,34 @@ export class CodeGenerator {
     return `${name}(${expr}, [${handlers.join(",")}])`;
   }
 
-  compileTSlot(ast: ASTSlot, ctx: Context): string {
+  compileTSlot(ast: ASTSlot, ctx: Context) {
     this.helpers.add("callSlot");
     let { block } = ctx;
     let blockString: string;
     let slotName;
     let dynamic = false;
-    let isMultiple = false;
     if (ast.name.match(INTERP_REGEXP)) {
       dynamic = true;
-      isMultiple = true;
       slotName = interpolate(ast.name);
     } else {
       slotName = "'" + ast.name + "'";
-      isMultiple = isMultiple || this.slotNames.has(ast.name);
-      this.slotNames.add(ast.name);
     }
     const dynProps = ast.attrs ? ast.attrs["t-props"] : null;
     if (ast.attrs) {
       delete ast.attrs["t-props"];
     }
-    let key = this.target.loopLevel ? `key${this.target.loopLevel}` : "key";
-    if (isMultiple) {
-      key = `${key} + \`${this.generateComponentKey()}\``;
-    }
-
     const props = ast.attrs ? this.formatPropObject(ast.attrs) : [];
     const scope = this.getPropString(props, dynProps);
     if (ast.defaultContent) {
       const name = this.compileInNewTarget("defaultContent", ast.defaultContent, ctx);
-      blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope}, ${name})`;
+      blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope}, ${name})`;
     } else {
       if (dynamic) {
         let name = generateId("slot");
         this.define(name, slotName);
-        blockString = `toggler(${name}, callSlot(ctx, node, ${key}, ${name}, ${dynamic}, ${scope}))`;
+        blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}, ${dynamic}, ${scope}))`;
       } else {
-        blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope})`;
+        blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope})`;
       }
     }
     // event handling
@@ -1295,16 +1263,14 @@ export class CodeGenerator {
     }
     block = this.createBlock(block, "multi", ctx);
     this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
-    return block.varName;
   }
 
-  compileTTranslation(ast: ASTTranslation, ctx: Context): string | null {
+  compileTTranslation(ast: ASTTranslation, ctx: Context) {
     if (ast.content) {
-      return this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
+      this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
     }
-    return null;
   }
-  compileTPortal(ast: ASTTPortal, ctx: Context): string {
+  compileTPortal(ast: ASTTPortal, ctx: Context) {
     if (!this.staticDefs.find((d) => d.id === "Portal")) {
       this.staticDefs.push({ id: "Portal", expr: `app.Portal` });
     }
@@ -1331,6 +1297,5 @@ export class CodeGenerator {
     }
     block = this.createBlock(block, "multi", ctx);
     this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
-    return block.varName;
   }
 }

src/compiler/inline_expressions.ts

@@ -1,5 +1,3 @@
-import { OwlError } from "../runtime/error_handling";
-
 /**
  * Owl QWeb Expression Parser
  *
@@ -108,14 +106,14 @@ let tokenizeString: Tokenizer = function (expr) {
       i++;
       cur = expr[i];
       if (!cur) {
-        throw new OwlError("Invalid expression");
+        throw new Error("Invalid expression");
       }
       s += cur;
     }
     i++;
   }
   if (expr[i] !== start) {
-    throw new OwlError("Invalid expression");
+    throw new Error("Invalid expression");
   }
   s += start;
   if (start === "`") {
@@ -225,7 +223,7 @@ export function tokenize(expr: string): Token[] {
     error = e; // Silence all errors and throw a generic error below
   }
   if (current.length || error) {
-    throw new OwlError(`Tokenizer error: could not tokenize \`${expr}\``);
+    throw new Error(`Tokenizer error: could not tokenize \`${expr}\``);
   }
   return result;
 }

src/compiler/parser.ts

@@ -1,5 +1,3 @@
-import { OwlError } from "../runtime/error_handling";
-
 // -----------------------------------------------------------------------------
 // AST Type definition
 // -----------------------------------------------------------------------------
@@ -321,7 +319,7 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
     return null;
   }
   if (tagName.startsWith("block-")) {
-    throw new OwlError(`Invalid tag name: '${tagName}'`);
+    throw new Error(`Invalid tag name: '${tagName}'`);
   }
   ctx = Object.assign({}, ctx);
   if (tagName === "pre") {
@@ -342,15 +340,13 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
     const value = node.getAttribute(attr)!;
     if (attr.startsWith("t-on")) {
       if (attr === "t-on") {
-        throw new OwlError("Missing event name with t-on directive");
+        throw new Error("Missing event name with t-on directive");
       }
       on = on || {};
       on[attr.slice(5)] = value;
     } else if (attr.startsWith("t-model")) {
       if (!["input", "select", "textarea"].includes(tagName)) {
-        throw new OwlError(
+        throw new Error("The t-model directive only works with <input>, <textarea> and <select>");
-          "The t-model directive only works with <input>, <textarea> and <select>"
-        );
       }
 
       let baseExpr, expr;
@@ -363,7 +359,7 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
         baseExpr = value.slice(0, index);
         expr = value.slice(index + 1, -1);
       } else {
-        throw new OwlError(`Invalid t-model expression: "${value}" (it should be assignable)`);
+        throw new Error(`Invalid t-model expression: "${value}" (it should be assignable)`);
       }
 
       const typeAttr = node.getAttribute("type");
@@ -394,10 +390,10 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
         ctx.tModelInfo = model;
       }
     } else if (attr.startsWith("block-")) {
-      throw new OwlError(`Invalid attribute: '${attr}'`);
+      throw new Error(`Invalid attribute: '${attr}'`);
     } else if (attr !== "t-name") {
       if (attr.startsWith("t-") && !attr.startsWith("t-att")) {
-        throw new OwlError(`Unknown QWeb directive: '${attr}'`);
+        throw new Error(`Unknown QWeb directive: '${attr}'`);
       }
       const tModel = ctx.tModelInfo;
       if (tModel && ["t-att-value", "t-attf-value"].includes(attr)) {
@@ -451,7 +447,7 @@ function parseTEscNode(node: Element, ctx: ParsingContext): AST | null {
     };
   }
   if (ast.type === ASTType.TComponent) {
-    throw new OwlError("t-esc is not supported on Component nodes");
+    throw new Error("t-esc is not supported on Component nodes");
   }
   return tesc;
 }
@@ -507,7 +503,7 @@ function parseTForEach(node: Element, ctx: ParsingContext): AST | null {
   node.removeAttribute("t-as");
   const key = node.getAttribute("t-key");
   if (!key) {
-    throw new OwlError(
+    throw new Error(
       `"Directive t-foreach should always be used with a t-key!" (expression: t-foreach="${collection}" t-as="${elem}")`
     );
   }
@@ -690,9 +686,7 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
   let isDynamic = node.hasAttribute("t-component");
 
   if (isDynamic && name !== "t") {
-    throw new OwlError(
+    throw new Error(`Directive 't-component' can only be used on <t> nodes (used on a <${name}>)`);
-      `Directive 't-component' can only be used on <t> nodes (used on a <${name}>)`
-    );
   }
 
   if (!(firstLetter === firstLetter.toUpperCase() || isDynamic)) {
@@ -719,7 +713,7 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
         on[name.slice(5)] = value;
       } else {
         const message = directiveErrorMap.get(name.split("-").slice(0, 2).join("-"));
-        throw new OwlError(message || `unsupported directive on Component: ${name}`);
+        throw new Error(message || `unsupported directive on Component: ${name}`);
       }
     } else {
       props = props || {};
@@ -735,7 +729,7 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
     const slotNodes = Array.from(clone.querySelectorAll("[t-set-slot]"));
     for (let slotNode of slotNodes) {
       if (slotNode.tagName !== "t") {
-        throw new OwlError(
+        throw new Error(
           `Directive 't-set-slot' can only be used on <t> nodes (used on a <${slotNode.tagName}>)`
         );
       }
@@ -781,9 +775,8 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
 
     // default slot
     const defaultContent = parseChildNodes(clone, ctx);
-    slots = slots || {};
+    if (defaultContent) {
-    // t-set-slot="default" has priority over content
+      slots = slots || {};
-    if (defaultContent && !slots.default) {
       slots.default = { content: defaultContent, on, attrs: null, scope: defaultSlotScope };
     }
   }
@@ -911,7 +904,7 @@ function normalizeTIf(el: Element) {
     let nattr = (name: string) => +!!node.getAttribute(name);
     if (prevElem && (pattr("t-if") || pattr("t-elif"))) {
       if (pattr("t-foreach")) {
-        throw new OwlError(
+        throw new Error(
           "t-if cannot stay at the same level as t-foreach when using t-elif or t-else"
         );
       }
@@ -920,19 +913,19 @@ function normalizeTIf(el: Element) {
           return a + b;
         }) > 1
       ) {
-        throw new OwlError("Only one conditional branching directive is allowed per node");
+        throw new Error("Only one conditional branching directive is allowed per node");
       }
       // All text (with only spaces) and comment nodes (nodeType 8) between
       // branch nodes are removed
       let textNode;
       while ((textNode = node.previousSibling) !== prevElem) {
         if (textNode!.nodeValue!.trim().length && textNode!.nodeType !== 8) {
-          throw new OwlError("text is not allowed between branching directives");
+          throw new Error("text is not allowed between branching directives");
         }
         textNode!.remove();
       }
     } else {
-      throw new OwlError(
+      throw new Error(
         "t-elif and t-else directives must be preceded by a t-if or t-elif directive"
       );
     }
@@ -953,7 +946,7 @@ function normalizeTEsc(el: Element) {
   );
   for (const el of elements) {
     if (el.childNodes.length) {
-      throw new OwlError("Cannot have t-esc on a component that already has content");
+      throw new Error("Cannot have t-esc on a component that already has content");
     }
     const value = el.getAttribute("t-esc");
     el.removeAttribute("t-esc");
@@ -1007,7 +1000,7 @@ function parseXML(xml: string): XMLDocument {
         }
       }
     }
-    throw new OwlError(msg);
+    throw new Error(msg);
   }
 
   return doc;

src/runtime/app.ts

@@ -1,12 +1,11 @@
 import { Component, ComponentConstructor, Props } from "./component";
 import { ComponentNode } from "./component_node";
-import { nodeErrorHandlers, OwlError } from "./error_handling";
+import { nodeErrorHandlers } from "./error_handling";
 import { Fiber, MountOptions } from "./fibers";
 import { Scheduler } from "./scheduler";
 import { validateProps } from "./template_helpers";
 import { TemplateSet, TemplateSetConfig } from "./template_set";
 import { validateTarget } from "./utils";
-import { handleError } from "./error_handling";
 
 // reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f
 
@@ -95,7 +94,9 @@ export class App<
         nodeErrorHandlers.set(node, handlers);
       }
       handlers.unshift((e) => {
-        if (!isResolved) {
+        if (isResolved) {
+          console.error(e);
+        } else {
           reject(e);
         }
         throw e;
@@ -153,9 +154,9 @@ export class App<
         if (isStatic) {
           C = parent.constructor.components[name as any];
           if (!C) {
-            throw new OwlError(`Cannot find the definition of component "${name}"`);
+            throw new Error(`Cannot find the definition of component "${name}"`);
           } else if (!(C.prototype instanceof Component)) {
-            throw new OwlError(
+            throw new Error(
               `"${name}" is not a Component. It must inherit from the Component class`
             );
           }
@@ -168,10 +169,6 @@ export class App<
       return node;
     };
   }
-
-  handleError(...args: Parameters<typeof handleError>) {
-    return handleError(...args);
-  }
 }
 
 export async function mount<

src/runtime/blockdom/attributes.ts

@@ -144,7 +144,7 @@ export function updateClass(this: HTMLElement, val: any, oldVal: any) {
 export function makePropSetter(name: string): Setter<HTMLElement> {
   return function setProp(this: HTMLElement, value: any) {
     // support 0, fallback to empty string for other falsy values
-    (this as any)[name] = value === 0 ? 0 : value ? value.valueOf() : "";
+    (this as any)[name] = value === 0 ? 0 : value || "";
   };
 }
 

src/runtime/blockdom/block_compiler.ts

@@ -1,4 +1,3 @@
-import { OwlError } from "../error_handling";
 import {
   attrsSetter,
   attrsUpdater,
@@ -157,15 +156,6 @@ 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;
@@ -255,7 +245,7 @@ function buildTree(
       };
     }
   }
-  throw new OwlError("boom");
+  throw new Error("boom");
 }
 
 function addRef(tree: IntermediateTree) {
@@ -517,12 +507,9 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
       return this.el!;
     }
 
-    moveBeforeDOMNode(node: Node | null) {
+    moveBefore(other: Block | null, afterNode: Node | null) {
-      nodeInsertBefore.call(this.parentEl, this.el!, node);
+      const target = other ? other.el! : afterNode;
-    }
+      nodeInsertBefore.call(this.parentEl, this.el!, target);
-
-    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,17 +56,8 @@ export function createCatcher(eventsSpec: EventsSpec): Catcher {
       }
     }
 
-    moveBeforeDOMNode(node: Node | null) {
+    moveBefore(other: VCatcher | null, afterNode: Node | null) {
-      this.child.moveBeforeDOMNode(node);
+      this.child.moveBefore(other ? other.child : null, afterNode);
-      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/events.ts

@@ -27,8 +27,8 @@ function createElementHandler(evName: string, capture: boolean = false): EventHa
   }
 
   function listener(ev: Event) {
-    const currentTarget = ev.currentTarget as HTMLElement;
+    const currentTarget = ev.currentTarget;
-    if (!currentTarget || !currentTarget.ownerDocument.contains(currentTarget)) return;
+    if (!currentTarget || !document.contains(currentTarget as HTMLElement)) return;
     const data = (currentTarget as any)[eventKey];
     if (!data) return;
     config.mainEventHandler(data, ev, currentTarget);

src/runtime/blockdom/html.ts

@@ -29,18 +29,14 @@ class VHtml {
     }
   }
 
-  moveBeforeDOMNode(node: Node | null) {
+  moveBefore(other: VHtml | null, afterNode: Node | null) {
+    const target = other ? other.content[0] : afterNode;
     const parent = this.parentEl;
     for (let elem of this.content) {
-      nodeInsertBefore.call(parent, elem, node);
+      nodeInsertBefore.call(parent, elem, target);
     }
   }
 
-  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,8 +10,7 @@ export { createCatcher } from "./event_catcher";
 
 export interface VNode<T = any> {
   mount(parent: HTMLElement, afterNode: Node | null): void;
-  moveBeforeDOMNode(node: Node | null): void;
+  moveBefore(other: T | null, afterNode: 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,22 +38,14 @@ class VList {
     this.parentEl = parent;
   }
 
-  moveBeforeDOMNode(node: Node | null) {
+  moveBefore(other: VList | null, afterNode: 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].moveBeforeVNode(null, afterNode);
+      children[i].moveBefore(null, afterNode);
     }
     this.parentEl!.insertBefore(this.anchor!, afterNode);
   }
@@ -74,7 +66,7 @@ class VList {
       patch: cPatch,
       remove: cRemove,
       beforeRemove,
-      moveBeforeVNode: cMoveBefore,
+      moveBefore: cMoveBefore,
       firstNode: cFirstNode,
     } = proto;
 

src/runtime/blockdom/multi.ts

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

src/runtime/blockdom/text.ts

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

src/runtime/blockdom/toggler.ts

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

src/runtime/component_node.ts

@@ -1,7 +1,7 @@
 import type { App, Env } from "./app";
 import { BDom, VNode } from "./blockdom";
 import { Component, ComponentConstructor, Props } from "./component";
-import { fibersInError, OwlError } from "./error_handling";
+import { fibersInError, handleError } from "./error_handling";
 import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
 import {
   clearReactivesForCallback,
@@ -12,13 +12,13 @@ import {
   TARGET,
 } from "./reactivity";
 import { STATUS } from "./status";
-import { batched, Callback } from "./utils";
+import { Callback } from "./utils";
 
 let currentNode: ComponentNode | null = null;
 
 export function getCurrent(): ComponentNode {
   if (!currentNode) {
-    throw new OwlError("No active component (a hook function should only be called in 'setup')");
+    throw new Error("No active component (a hook function should only be called in 'setup')");
   }
   return currentNode;
 }
@@ -41,7 +41,7 @@ function applyDefaultProps<P extends object>(props: P, defaultProps: Partial<P>)
 // Integration with reactivity system (useState)
 // -----------------------------------------------------------------------------
 
-const batchedRenderFunctions = new WeakMap<ComponentNode, Callback>();
+const renderFunctions = new WeakMap<ComponentNode, Callback>();
 /**
  * Creates a reactive object that will be observed by the current component.
  * Reading data from the returned object (eg during rendering) will cause the
@@ -54,10 +54,10 @@ const batchedRenderFunctions = new WeakMap<ComponentNode, Callback>();
  */
 export function useState<T extends object>(state: T): Reactive<T> | NonReactive<T> {
   const node = getCurrent();
-  let render = batchedRenderFunctions.get(node)!;
+  let render = renderFunctions.get(node)!;
   if (!render) {
-    render = batched(node.render.bind(node, false));
+    render = node.render.bind(node, false);
-    batchedRenderFunctions.set(node, render);
+    renderFunctions.set(node, render);
     // manual implementation of onWillDestroy to break cyclic dependency
     node.willDestroy.push(clearReactivesForCallback.bind(null, render));
   }
@@ -83,6 +83,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
 
   renderFn: Function;
   parent: ComponentNode | null;
+  level: number;
   childEnv: Env;
   children: { [key: string]: ComponentNode } = Object.create(null);
   refs: any = {};
@@ -107,6 +108,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     this.parent = parent;
     this.props = props;
     this.parentKey = parentKey;
+    this.level = parent ? parent.level + 1 : 0;
     const defaultProps = C.defaultProps;
     props = Object.assign({}, props);
     if (defaultProps) {
@@ -138,11 +140,22 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
       fiber.root!.mounted.push(fiber);
     }
     const component = this.component;
-    try {
+    if (this.willStart.length) {
-      await Promise.all(this.willStart.map((f) => f.call(component)));
+      let willStartResults;
-    } catch (e) {
+      try {
-      this.app.handleError({ node: this, error: e });
+        willStartResults = this.willStart.map((f) => f.call(component));
-      return;
+      } catch (e) {
+        handleError({ node: this, error: e });
+        return;
+      }
+      if (willStartResults.some((result) => result instanceof Promise)) {
+        try {
+          await Promise.all(willStartResults);
+        } catch (e) {
+          handleError({ node: this, error: e });
+          return;
+        }
+      }
     }
     if (this.status === STATUS.NEW && this.fiber === fiber) {
       fiber.render();
@@ -151,10 +164,9 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
 
   async render(deep: boolean) {
     let current = this.fiber;
-    if (current && (current.root!.locked || (current as any).bdom === true)) {
+    if (current && (current.root!.locked || current as any).bdom === true) {
-      await Promise.resolve();
+      this.app.scheduler.requestAnimationFrame(() => this.render(deep));
-      // situation may have changed after the microtask tick
+      return;
-      current = this.fiber;
     }
     if (current) {
       if (!current.bdom && !fibersInError.has(current)) {
@@ -173,26 +185,28 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     const fiber = makeRootFiber(this);
     fiber.deep = deep;
     this.fiber = fiber;
+    const scheduler = this.app.scheduler;
 
-    this.app.scheduler.addFiber(fiber);
+    scheduler.requestAnimationFrame(() => {
-    await Promise.resolve();
+      if (this.status === STATUS.DESTROYED) {
-    if (this.status === STATUS.DESTROYED) {
+        return;
-      return;
+      }
-    }
+      // We only want to actually render the component if the following two
-    // We only want to actually render the component if the following two
+      // conditions are true:
-    // conditions are true:
+      // * this.fiber: it could be null, in which case the render has been cancelled
-    // * this.fiber: it could be null, in which case the render has been cancelled
+      // * (current || !fiber.parent): if current is not null, this means that the
-    // * (current || !fiber.parent): if current is not null, this means that the
+      //   render function was called when a render was already occurring. In this
-    //   render function was called when a render was already occurring. In this
+      //   case, the pending rendering was cancelled, and the fiber needs to be
-    //   case, the pending rendering was cancelled, and the fiber needs to be
+      //   rendered to complete the work.  If current is null, we check that the
-    //   rendered to complete the work.  If current is null, we check that the
+      //   fiber has no parent.  If that is the case, the fiber was downgraded from
-    //   fiber has no parent.  If that is the case, the fiber was downgraded from
+      //   a root fiber to a child fiber in the previous microtick, because it was
-    //   a root fiber to a child fiber in the previous microtick, because it was
+      //   embedded in a rendering coming from above, so the fiber will be rendered
-    //   embedded in a rendering coming from above, so the fiber will be rendered
+      //   in the next microtick anyway, so we should not render it again.
-    //   in the next microtick anyway, so we should not render it again.
+      if (this.fiber === fiber && (current || !fiber.parent)) {
-    if (this.fiber === fiber && (current || !fiber.parent)) {
+        fiber.render();
-      fiber.render();
+      }
-    }
+    });
+    scheduler.addFiber(fiber);
   }
 
   destroy() {
@@ -219,7 +233,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
           cb.call(component);
         }
       } catch (e) {
-        this.app.handleError({ error: e, node: this });
+        handleError({ error: e, node: this });
       }
     }
     this.status = STATUS.DESTROYED;
@@ -245,14 +259,17 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
       }
     }
     currentNode = null;
-    const prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
+    if (this.willUpdateProps.length) {
-    await prom;
+      const willUpdatePropsResults = this.willUpdateProps.map((f) => f.call(component, props));
-    if (fiber !== this.fiber) {
+      if (willUpdatePropsResults.some((res) => res instanceof Promise)) {
-      return;
+        await Promise.all(willUpdatePropsResults);
+      }
+      if (fiber !== this.fiber) {
+        return;
+      }
     }
     component.props = props;
     this.props = rawProps;
-    fiber.render();
     const parentRoot = parentFiber.root!;
     if (this.willPatch.length) {
       parentRoot.willPatch.push(fiber);
@@ -260,6 +277,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     if (this.patched.length) {
       parentRoot.patched.push(fiber);
     }
+    fiber.render();
   }
 
   /**
@@ -306,12 +324,8 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     this.fiber = null;
   }
 
-  moveBeforeDOMNode(node: Node | null): void {
+  moveBefore(other: ComponentNode | null, afterNode: Node | null) {
-    this.bdom!.moveBeforeDOMNode(node);
+    this.bdom!.moveBefore(other ? other.bdom : null, afterNode);
-  }
-
-  moveBeforeVNode(other: ComponentNode<P, E> | null, afterNode: Node | null) {
-    this.bdom!.moveBeforeVNode(other ? other.bdom : null, afterNode);
   }
 
   patch() {
@@ -351,7 +365,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
   }
 
   get subscriptions(): ReturnType<typeof getSubscriptions> {
-    const render = batchedRenderFunctions.get(this);
+    const render = renderFunctions.get(this);
     return render ? getSubscriptions(render) : [];
   }
 }

src/runtime/error_handling.ts

@@ -1,11 +1,6 @@
 import type { ComponentNode } from "./component_node";
 import type { Fiber } from "./fibers";
 
-// Custom error class that wraps error that happen in the owl lifecycle
-export class OwlError extends Error {
-  cause?: any;
-}
-
 // Maps fibers to thrown errors
 export const fibersInError: WeakMap<Fiber, any> = new WeakMap();
 export const nodeErrorHandlers: WeakMap<ComponentNode, ((error: any) => void)[]> = new WeakMap();
@@ -42,14 +37,7 @@ function _handleError(node: ComponentNode | null, error: any): boolean {
 
 type ErrorParams = { error: any } & ({ node: ComponentNode } | { fiber: Fiber });
 export function handleError(params: ErrorParams) {
-  let { error } = params;
+  const error = params.error;
-  // Wrap error if it wasn't wrapped by wrapError (ie when not in dev mode)
-  if (!(error instanceof OwlError)) {
-    error = Object.assign(
-      new OwlError(`An error occured in the owl lifecycle (see this Error's "cause" property)`),
-      { cause: error }
-    );
-  }
   const node = "node" in params ? params.node : params.fiber.node;
   const fiber = "fiber" in params ? params.fiber : node.fiber!;
 
@@ -71,6 +59,5 @@ export function handleError(params: ErrorParams) {
     } catch (e) {
       console.error(e);
     }
-    throw error;
   }
 }

src/runtime/event_handling.ts

@@ -1,6 +1,5 @@
 import { filterOutModifiersFromData } from "./blockdom/config";
 import { STATUS } from "./status";
-import { OwlError } from "./error_handling";
 
 export const mainEventHandler = (data: any, ev: Event, currentTarget?: EventTarget | null) => {
   const { data: _data, modifiers } = filterOutModifiersFromData(data);
@@ -34,7 +33,7 @@ export const mainEventHandler = (data: any, ev: Event, currentTarget?: EventTarg
   if (Object.hasOwnProperty.call(data, 0)) {
     const handler = data[0];
     if (typeof handler !== "function") {
-      throw new OwlError(`Invalid handler (expected a function, received: '${handler}')`);
+      throw new Error(`Invalid handler (expected a function, received: '${handler}')`);
     }
     let node = data[1] ? data[1].__owl__ : null;
     if (node ? node.status === STATUS.MOUNTED : true) {

src/runtime/fibers.ts

@@ -1,6 +1,6 @@
 import { BDom, mount } from "./blockdom";
 import type { ComponentNode } from "./component_node";
-import { fibersInError, OwlError } from "./error_handling";
+import { fibersInError, handleError } from "./error_handling";
 import { STATUS } from "./status";
 
 export function makeChildFiber(node: ComponentNode, parent: Fiber): Fiber {
@@ -20,6 +20,7 @@ export function makeRootFiber(node: ComponentNode): Fiber {
     // which means any arbitrary code can be run in onWillDestroy, which may
     // trigger new renderings
     root.locked = true;
+    debugger
     root.setCounter(root.counter + 1 - cancelFibers(current.children));
     root.locked = false;
     current.children = [];
@@ -43,7 +44,7 @@ export function makeRootFiber(node: ComponentNode): Fiber {
 }
 
 function throwOnRender() {
-  throw new OwlError("Attempted to render cancelled fiber");
+  throw new Error("Attempted to render cancelled fiber");
 }
 
 /**
@@ -55,6 +56,7 @@ function cancelFibers(fibers: Fiber[]): number {
     let node = fiber.node;
     fiber.render = throwOnRender;
     if (node.status === STATUS.NEW) {
+      console.log('asdfasdfsdf')
       node.destroy();
       delete node.parent!.children[node.parentKey!];
     }
@@ -130,7 +132,7 @@ export class Fiber {
         (this.bdom as any) = true;
         this.bdom = node.renderFn();
       } catch (e) {
-        node.app.handleError({ node, error: e });
+        handleError({ node, error: e });
       }
       root.setCounter(root.counter - 1);
     }
@@ -151,6 +153,7 @@ export class RootFiber extends Fiber {
   complete() {
     const node = this.node;
     this.locked = true;
+    debugger
     let current: Fiber | undefined = undefined;
     try {
       // Step 1: calling all willPatch lifecycle hooks
@@ -195,7 +198,7 @@ export class RootFiber extends Fiber {
       }
     } catch (e) {
       this.locked = false;
-      node.app.handleError({ fiber: current || this, error: e });
+      handleError({ fiber: current || this, error: e });
     }
   }
 
@@ -259,7 +262,7 @@ export class MountFiber extends RootFiber {
         }
       }
     } catch (e) {
-      this.node.app.handleError({ fiber: current as Fiber, error: e });
+      handleError({ fiber: current as Fiber, error: e });
     }
   }
 }

src/runtime/index.ts

@@ -36,7 +36,6 @@ export const blockDom = {
 export { App, mount } from "./app";
 export { xml } from "./template_set";
 export { Component } from "./component";
-export type { ComponentConstructor } from "./component";
 export { useComponent, useState } from "./component_node";
 export { status } from "./status";
 export { reactive, markRaw, toRaw } from "./reactivity";
@@ -55,6 +54,5 @@ export {
   onError,
 } from "./lifecycle_hooks";
 export { validate } from "./validation";
-export { OwlError } from "./error_handling";
 
 export const __info__ = {};

src/runtime/lifecycle_hooks.ts

@@ -1,30 +1,21 @@
 import { getCurrent } from "./component_node";
-import { nodeErrorHandlers, OwlError } from "./error_handling";
+import { nodeErrorHandlers } from "./error_handling";
 
 const TIMEOUT = Symbol("timeout");
 function wrapError(fn: (...args: any[]) => any, hookName: string) {
-  const error = new OwlError(`The following error occurred in ${hookName}: `) as Error & {
+  const error = new Error(`The following error occurred in ${hookName}: `) as Error & {
     cause: any;
   };
-  const timeoutError = new OwlError(`${hookName}'s promise hasn't resolved after 3 seconds`);
+  const timeoutError = new Error(`${hookName}'s promise hasn't resolved after 3 seconds`);
   const node = getCurrent();
   return (...args: any[]) => {
-    const onError = (cause: any) => {
-      error.cause = cause;
-      if (cause instanceof Error) {
-        error.message += `"${cause.message}"`;
-      } else {
-        error.message = `Something that is not an Error was thrown in ${hookName} (see this Error's "cause" property)`;
-      }
-      throw error;
-    };
     try {
       const result = fn(...args);
       if (result instanceof Promise) {
         if (hookName === "onWillStart" || hookName === "onWillUpdateProps") {
           const fiber = node.fiber;
           Promise.race([
-            result.catch(() => {}),
+            result,
             new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
           ]).then((res) => {
             if (res === TIMEOUT && node.fiber === fiber) {
@@ -32,11 +23,20 @@ function wrapError(fn: (...args: any[]) => any, hookName: string) {
             }
           });
         }
-        return result.catch(onError);
+        return result.catch((cause) => {
+          error.cause = cause;
+          if (cause instanceof Error) {
+            error.message += `"${cause.message}"`;
+          }
+          throw error;
+        });
       }
       return result;
     } catch (cause) {
-      onError(cause);
+      if (cause instanceof Error) {
+        error.message += `"${cause.message}"`;
+      }
+      throw error;
     }
   };
 }

src/runtime/portal.ts

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

src/runtime/reactivity.ts

@@ -1,5 +1,4 @@
 import { Callback } from "./utils";
-import { OwlError } from "./error_handling";
 
 // Allows to get the target of a Reactive (used for making a new Reactive from the underlying object)
 export const TARGET = Symbol("Target");
@@ -198,7 +197,7 @@ export function reactive<T extends Target>(
   callback: Callback = () => {}
 ): Reactive<T> | NonReactive<T> {
   if (!canBeMadeReactive(target)) {
-    throw new OwlError(`Cannot make the given value reactive`);
+    throw new Error(`Cannot make the given value reactive`);
   }
   if (SKIP in target) {
     return target as NonReactive<T>;

src/runtime/scheduler.ts

@@ -11,12 +11,29 @@ export class Scheduler {
   // interactions with other code, such as test frameworks that override them
   static requestAnimationFrame = window.requestAnimationFrame.bind(window);
   tasks: Set<RootFiber> = new Set();
-  requestAnimationFrame: Window["requestAnimationFrame"];
+  _requestAnimationFrame: Window["requestAnimationFrame"];
+  cbs: Function[] = [];
   frame: number = 0;
   delayedRenders: Fiber[] = [];
+  shouldFlush = false;
 
   constructor() {
-    this.requestAnimationFrame = Scheduler.requestAnimationFrame;
+    this._requestAnimationFrame = Scheduler.requestAnimationFrame;
+  }
+
+  requestAnimationFrame(cb: Function) {
+    this.cbs.push(cb);
+    if (this.frame === 0) {
+      this.frame = this._requestAnimationFrame(() => {
+        // note that some callbacks may be added to this.cbs while this look is
+        // running, and they will be executed immediately
+        for (let i = 0; i < this.cbs.length; i++) {
+          this.cbs[i]();
+        }
+        this.cbs = [];
+        this.frame = 0;
+      });
+    }
   }
 
   addFiber(fiber: Fiber) {
@@ -37,18 +54,18 @@ export class Scheduler {
         }
       }
     }
-
+    // if (this.shouldFlush === false) {
-    if (this.frame === 0) {
+    // this.shouldFlush = true;
-      this.frame = this.requestAnimationFrame(() => {
+    this.requestAnimationFrame(() => {
-        this.frame = 0;
+      // this.shouldFlush = false;
-        this.tasks.forEach((fiber) => this.processFiber(fiber));
+      this.tasks.forEach((fiber) => this.processFiber(fiber));
-        for (let task of this.tasks) {
+      for (let task of this.tasks) {
-          if (task.node.status === STATUS.DESTROYED) {
+        if (task.node.status === STATUS.DESTROYED) {
-            this.tasks.delete(task);
+          this.tasks.delete(task);
-          }
         }
-      });
+      }
-    }
+    });
+    // }
   }
 
   processFiber(fiber: RootFiber) {

src/runtime/template_helpers.ts

@@ -4,7 +4,6 @@ import { html } from "./blockdom/index";
 import { isOptional, validateSchema } from "./validation";
 import type { ComponentConstructor } from "./component";
 import { markRaw } from "./reactivity";
-import { OwlError } from "./error_handling";
 
 const ObjectCreate = Object.create;
 /**
@@ -71,7 +70,7 @@ function prepareList(collection: any): [any[], any[], number, any[]] {
     values = Object.keys(collection);
     keys = Object.values(collection);
   } else {
-    throw new OwlError("Invalid loop expression");
+    throw new Error("Invalid loop expression");
   }
   const n = values.length;
   return [keys, values, n, new Array(n)];
@@ -111,18 +110,15 @@ class LazyValue {
   ctx: any;
   component: any;
   node: any;
-  key: any;
+  constructor(fn: any, ctx: any, component: any, node: 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, this.key);
+    return this.fn.call(this.component, this.ctx, this.node);
   }
 
   toString() {
@@ -133,9 +129,9 @@ class LazyValue {
 /*
  * Safely outputs `value` as a block depending on the nature of `value`
  */
-export function safeOutput(value: any, defaultValue?: any): ReturnType<typeof toggler> {
+export function safeOutput(value: any): ReturnType<typeof toggler> {
-  if (value === undefined) {
+  if (!value) {
-    return defaultValue ? toggler("default", defaultValue) : toggler("undefined", text(""));
+    return value;
   }
   let safeKey;
   let block;
@@ -195,7 +191,7 @@ function multiRefSetter(refs: RefMap, name: string): RefSetter {
     if (el) {
       count++;
       if (count > 1) {
-        throw new OwlError("Cannot have 2 elements with same ref name at the same time");
+        throw new Error("Cannot have 2 elements with same ref name at the same time");
       }
     }
     if (count === 0 || el) {
@@ -210,11 +206,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, comp?: any) {
+export function validateProps<P>(name: string | ComponentConstructor<P>, props: P, parent?: any) {
   const ComponentClass =
     typeof name !== "string"
       ? name
-      : (comp.constructor.components[name] as ComponentConstructor<P> | undefined);
+      : (parent.constructor.components[name] as ComponentConstructor<P> | undefined);
 
   if (!ComponentClass) {
     // this is an error, wrong component. We silently return here instead so the
@@ -224,7 +220,7 @@ export function validateProps<P>(name: string | ComponentConstructor<P>, props:
 
   const schema = ComponentClass.props;
   if (!schema) {
-    if (comp.__owl__.app.warnIfNoStaticProps) {
+    if (parent.__owl__.app.warnIfNoStaticProps) {
       console.warn(`Component '${ComponentClass.name}' does not have a static props description`);
     }
     return;
@@ -237,7 +233,7 @@ export function validateProps<P>(name: string | ComponentConstructor<P>, props:
         : name in schema && !("*" in schema) && !isOptional(schema[name]);
     for (let p in defaultProps) {
       if (isMandatory(p)) {
-        throw new OwlError(
+        throw new Error(
           `A default value cannot be defined for a mandatory prop (name: '${p}', component: ${ComponentClass.name})`
         );
       }
@@ -246,9 +242,7 @@ export function validateProps<P>(name: string | ComponentConstructor<P>, props:
 
   const errors = validateSchema(props, schema);
   if (errors.length) {
-    throw new OwlError(
+    throw new Error(`Invalid props for component '${ComponentClass.name}': ` + errors.join(", "));
-      `Invalid props for component '${ComponentClass.name}': ` + errors.join(", ")
-    );
   }
 }
 
@@ -270,5 +264,4 @@ export const helpers = {
   bind,
   createCatcher,
   markRaw,
-  OwlError,
 };

src/runtime/template_set.ts

@@ -3,7 +3,6 @@ import { comment, createBlock, html, list, multi, text, toggler } from "./blockd
 import { getCurrent } from "./component_node";
 import { Portal, portalTemplate } from "./portal";
 import { helpers } from "./template_helpers";
-import { OwlError } from "./error_handling";
 
 const bdom = { text, createBlock, list, multi, html, toggler, comment };
 
@@ -32,7 +31,7 @@ function parseXML(xml: string): Document {
         }
       }
     }
-    throw new OwlError(msg);
+    throw new Error(msg);
   }
   return doc;
 }
@@ -77,7 +76,7 @@ export class TemplateSet {
       if (currentAsString === newAsString) {
         return;
       }
-      throw new OwlError(`Template ${name} already defined with different content`);
+      throw new Error(`Template ${name} already defined with different content`);
     }
     this.rawTemplates[name] = template;
   }
@@ -103,7 +102,7 @@ export class TemplateSet {
           const componentName = getCurrent().component.constructor.name;
           extraInfo = ` (for component "${componentName}")`;
         } catch {}
-        throw new OwlError(`Missing template: "${name}"${extraInfo}`);
+        throw new Error(`Missing template: "${name}"${extraInfo}`);
       }
       const isFn = typeof rawTemplate === "function" && !(rawTemplate instanceof Element);
       const templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate);
@@ -120,7 +119,7 @@ export class TemplateSet {
   }
 
   _compileTemplate(name: string, template: string | Element): ReturnType<typeof compile> {
-    throw new OwlError(`Unable to compile a template. Please use owl full build instead`);
+    throw new Error(`Unable to compile a template. Please use owl full build instead`);
   }
 
   callTemplate(owner: any, subTemplate: string, ctx: any, parent: any, key: any): any {

src/runtime/utils.ts

@@ -1,45 +1,12 @@
-import { OwlError } from "./error_handling";
 export type Callback = () => void;
 
-/**
- * Creates a batched version of a callback so that all calls to it in the same
- * microtick will only call the original callback once.
- *
- * @param callback the callback to batch
- * @returns a batched version of the original callback
- */
-export function batched(callback: Callback): Callback {
-  let called = false;
-  return async () => {
-    // This await blocks all calls to the callback here, then releases them sequentially
-    // in the next microtick. This line decides the granularity of the batch.
-    await Promise.resolve();
-    if (!called) {
-      called = true;
-      // wait for all calls in this microtick to fall through before resetting "called"
-      // so that only the first call to the batched function calls the original callback.
-      // Schedule this before calling the callback so that calls to the batched function
-      // within the callback will proceed only after resetting called to false, and have
-      // a chance to execute the callback again
-      Promise.resolve().then(() => (called = false));
-      callback();
-    }
-  };
-}
-
 export function validateTarget(target: HTMLElement) {
-  // Get the document and HTMLElement corresponding to the target to allow mounting in iframes
+  if (!(target instanceof HTMLElement)) {
-  const document = target && target.ownerDocument;
+    throw new Error("Cannot mount component: the target is not a valid DOM element");
-  if (document) {
+  }
-    const HTMLElement = document.defaultView!.HTMLElement;
+  if (!document.body.contains(target)) {
-    if (target instanceof HTMLElement) {
+    throw new Error("Cannot mount a component on a detached dom node");
-      if (!document.body.contains(target)) {
-        throw new OwlError("Cannot mount a component on a detached dom node");
-      }
-      return;
-    }
   }
-  throw new OwlError("Cannot mount component: the target is not a valid DOM element");
 }
 
 export class EventBus extends EventTarget {
@@ -61,7 +28,7 @@ export function whenReady(fn?: any): Promise<void> {
 export async function loadFile(url: string): Promise<string> {
   const result = await fetch(url);
   if (!result.ok) {
-    throw new OwlError("Error while fetching xml templates");
+    throw new Error("Error while fetching xml templates");
   }
   return await result.text();
 }

src/runtime/validation.ts

@@ -1,5 +1,3 @@
-import { OwlError } from "./error_handling";
-
 type BaseType =
   | typeof String
   | typeof Boolean
@@ -72,7 +70,7 @@ function toSchema(spec: SimplifiedSchema): NormalizedSchema {
 export function validate(obj: { [key: string]: any }, spec: Schema) {
   let errors = validateSchema(obj, spec);
   if (errors.length) {
-    throw new OwlError("Invalid object: " + errors.join(", "));
+    throw new Error("Invalid object: " + errors.join(", "));
   }
 }
 

tests/app/__snapshots__/app.test.ts.snap

@@ -29,19 +29,6 @@ exports[`app can configure an app with props 1`] = `
 }"
 `;
 
-exports[`app can mount app in an iframe 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div class=\\"my-div\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
 exports[`app destroy remove the widget from the DOM 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/app/app.test.ts

@@ -76,22 +76,4 @@ describe("app", () => {
       "Component 'Root' does not have a static props description"
     );
   });
-
-  test("can mount app in an iframe", async () => {
-    class SomeComponent extends Component {
-      static template = xml`<div class="my-div"/>`;
-    }
-
-    const iframe = document.createElement("iframe");
-    fixture.appendChild(iframe);
-    const app = new App(SomeComponent);
-    const iframeDoc = iframe.contentDocument!;
-    const comp = await app.mount(iframeDoc.body);
-    const div = iframeDoc.querySelector(".my-div");
-    expect(div).not.toBe(null);
-    expect(iframeDoc.contains(div)).toBe(true);
-    app.destroy();
-    expect(iframeDoc.contains(div)).toBe(false);
-    expect(status(comp)).toBe("destroyed");
-  });
 });

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

@@ -708,20 +708,6 @@ exports[`attributes updating classes (with obj notation) 1`] = `
 }"
 `;
 
-exports[`attributes updating property with falsy value 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = new String((ctx['v']) || \\"\\");
-    return block1([attr1]);
-  }
-}"
-`;
-
 exports[`attributes various escapes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -759,7 +745,7 @@ exports[`special cases for some specific html attributes/properties input of typ
   let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"indeterminate\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let attr1 = new Boolean(ctx['v']);
+    let attr1 = ctx['v'];
     return block1([attr1]);
   }
 }"
@@ -773,21 +759,7 @@ exports[`special cases for some specific html attributes/properties input type=
   let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let attr1 = new Boolean(ctx['flag']);
+    let attr1 = ctx['flag'];
-    return block1([attr1]);
-  }
-}"
-`;
-
-exports[`special cases for some specific html attributes/properties input with t-att-value (patching with same value 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = new String((ctx['v']) || \\"\\");
     return block1([attr1]);
   }
 }"
@@ -801,21 +773,7 @@ exports[`special cases for some specific html attributes/properties input with t
   let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let attr1 = new String((ctx['v']) || \\"\\");
+    let attr1 = ctx['v'];
-    return block1([attr1]);
-  }
-}"
-`;
-
-exports[`special cases for some specific html attributes/properties input, type checkbox, with t-att-checked (patching with same value 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = new Boolean(ctx['v']);
     return block1([attr1]);
   }
 }"
@@ -829,7 +787,7 @@ exports[`special cases for some specific html attributes/properties select with
   let block1 = createBlock(\`<select block-attribute-0=\\"value\\"><option value=\\"potato\\">Potato</option><option value=\\"tomato\\">Tomato</option><option value=\\"onion\\">Onion</option></select>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let attr1 = new String((ctx['value']) || \\"\\");
+    let attr1 = ctx['value'];
     return block1([attr1]);
   }
 }"
@@ -843,7 +801,7 @@ exports[`special cases for some specific html attributes/properties textarea wit
   let block1 = createBlock(\`<textarea block-attribute-0=\\"value\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let attr1 = new String((ctx['v']) || \\"\\");
+    let attr1 = ctx['v'];
     return block1([attr1]);
   }
 }"

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

@@ -166,13 +166,13 @@ exports[`misc global 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { safeOutput } = helpers;
+  let { safeOutput, withDefault } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const b3 = text(\`toto default\`);
-    const b2 = safeOutput(ctx['toto'], b3);
+    const b2 = withDefault(safeOutput(ctx['toto']), b3);
     return block1([], [b2]);
   }
 }"
@@ -269,7 +269,7 @@ exports[`misc other complex template 1`] = `
         ctx[\`category\`] = v_block15[i1];
         const key1 = ctx['category'].id;
         let attr6 = ctx['category'].id;
-        let attr7 = new Boolean(ctx['category'].id==ctx['options'].active_category_id);
+        let attr7 = ctx['category'].id==ctx['options'].active_category_id;
         let txt5 = ctx['category'].name;
         c_block15[i1] = withKey(block16([attr6, attr7, txt5]), key1);
       }
@@ -277,7 +277,7 @@ exports[`misc other complex template 1`] = `
       const b15 = list(c_block15);
       b14 = block14([], [b15]);
     }
-    let attr8 = new String((ctx['search'].value) || \\"\\");
+    let attr8 = ctx['search'].value;
     let hdlr4 = [ctx['updateFilter'], ctx];
     let hdlr5 = [ctx['updateFilter'], ctx];
     let hdlr6 = [ctx['clearSearch'], ctx];
@@ -291,7 +291,7 @@ exports[`misc other complex template 1`] = `
         if (!ctx['trigger'].manual&&ctx['trigger'].project_id===ctx['project'].id&&ctx['trigger'].category_id===ctx['options'].active_category_id) {
           let attr9 = \`trigger_\${ctx['trigger'].id}\`;
           let attr10 = \`trigger_\${ctx['trigger'].id}\`;
-          let attr11 = new Boolean(ctx['options'].trigger_display[ctx['trigger'].id]);
+          let attr11 = ctx['options'].trigger_display[ctx['trigger'].id];
           let attr12 = ctx['trigger'].id;
           let hdlr7 = [ctx['updateTriggerDisplay'], ctx];
           let attr13 = \`trigger_\${ctx['trigger'].id}\`;

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

@@ -334,57 +334,6 @@ 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,32 +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, key);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node);
-    let txt1 = ctx['var'];
-    return block1([txt1]);
-  }
-}"
-`;
-
-exports[`t-esc t-esc with the 0 number 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['var']);
-  }
-}"
-`;
-
-exports[`t-esc t-esc with the 0 number, in a p 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<p><block-text-0/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['var'];
     return block1([txt1]);
   }
@@ -208,17 +183,6 @@ exports[`t-esc t-esc=0 is escaped 2`] = `
 }"
 `;
 
-exports[`t-esc top level t-esc with undefined 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['var']);
-  }
-}"
-`;
-
 exports[`t-esc variable 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

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, key);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node);
     const b3 = safeOutput(ctx['var']);
     return block1([], [b3]);
   }
@@ -217,13 +217,13 @@ exports[`t-out t-out on a node with a body, as a default 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { safeOutput } = helpers;
+  let { safeOutput, withDefault } = helpers;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const b3 = text(\`nope\`);
-    const b2 = safeOutput(ctx['var'], b3);
+    const b2 = withDefault(safeOutput(ctx['var']), b3);
     return block1([], [b2]);
   }
 }"
@@ -233,14 +233,14 @@ exports[`t-out t-out on a node with a dom node in body, as a default 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { safeOutput } = helpers;
+  let { safeOutput, withDefault } = helpers;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   let block3 = createBlock(\`<div>nope</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const b3 = block3();
-    const b2 = safeOutput(ctx['var'], b3);
+    const b2 = withDefault(safeOutput(ctx['var']), b3);
     return block1([], [b2]);
   }
 }"
@@ -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, key);
+    ctx[\`bdom\`] = new LazyValue(value1, ctx, this, node);
     if (ctx['hasBdom']) {
       const b4 = safeOutput(ctx['bdom']);
       b3 = block3([], [b4]);
@@ -407,45 +407,6 @@ exports[`t-out t-out with just a t-set t-value in body 1`] = `
 }"
 `;
 
-exports[`t-out t-out with the 0 number 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { safeOutput } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return safeOutput(ctx['var']);
-  }
-}"
-`;
-
-exports[`t-out t-out with the 0 number, in a p 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { safeOutput } = helpers;
-  
-  let block1 = createBlock(\`<p><block-child-0/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = safeOutput(ctx['var']);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`t-out top level t-out with undefined 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { safeOutput } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return safeOutput(ctx['var']);
-  }
-}"
-`;
-
 exports[`t-out variable 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

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, key);
+    ctx[\`value\`] = new LazyValue(value1, ctx, this, node);
     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, key);
+    ctx[\`stuff\`] = new LazyValue(value1, ctx, this, node);
     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, key);
+    ctx[\`v2\`] = new LazyValue(value1, ctx, this, node);
     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, key);
+    ctx[\`setvar\`] = new LazyValue(value1, ctx, this, node);
     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, key));
+    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node));
     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, key));
+    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node));
     setContextValue(ctx, \\"v1\\", 'after');
     setContextValue(ctx, \\"v3\\", false);
     const b3 = safeOutput(ctx['v2']);
@@ -534,36 +534,13 @@ exports[`t-set t-set with t-value (truthy) and body 1`] = `
 }"
 `;
 
-exports[`t-set t-set, multiple t-ifs, and a specific configuration 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, withDefault, setContextValue } = helpers;
-  
-  let block1 = createBlock(\`<p><div><span>First div</span></div><div><block-child-0/></div></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1
-    let b2;
-    if (ctx['flag']) {
-      setContextValue(ctx, \\"bouh\\", 2);
-    }
-    if (!ctx['flag']) {
-      b2 = text(\`Second\`);
-    }
-    return block1([], [b2]);
-  }
-}"
-`;
-
 exports[`t-set t-set, t-if, and mix of expression/body lookup, 1 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -585,7 +562,7 @@ exports[`t-set t-set, t-if, and mix of expression/body lookup, 2 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -638,7 +615,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, key));
+    ctx[\`value\`] = withDefault(1, new LazyValue(value1, ctx, this, node));
     let txt1 = ctx['value'];
     return block1([txt1]);
   }

tests/compiler/attributes.test.ts

@@ -329,35 +329,6 @@ describe("attributes", () => {
     expect(fixture.innerHTML).toBe('<div value=""></div>');
   });
 
-  test("updating property with falsy value", async () => {
-    // render input with initial value
-    const template = `<input t-att-value="v"></input>`;
-    const bnode1 = renderToBdom(template, { v: false });
-    const fixture = makeTestFixture();
-    mount(bnode1, fixture);
-
-    const input = fixture.querySelector("input")!;
-    expect(input.value).toBe("");
-
-    patch(bnode1, renderToBdom(template, { v: "owl" }));
-    expect(input.value).toBe("owl");
-
-    patch(bnode1, renderToBdom(template, { v: false }));
-    expect(input.value).toBe("");
-
-    patch(bnode1, renderToBdom(template, { v: "owl" }));
-    expect(input.value).toBe("owl");
-
-    patch(bnode1, renderToBdom(template, { v: undefined }));
-    expect(input.value).toBe("");
-
-    patch(bnode1, renderToBdom(template, { v: "owl" }));
-    expect(input.value).toBe("owl");
-
-    patch(bnode1, renderToBdom(template, { v: null }));
-    expect(input.value).toBe("");
-  });
-
   test("changing a class with t-att-class", () => {
     // render input with initial value
     const template = `<div t-att-class="v"/>`;
@@ -458,42 +429,6 @@ describe("special cases for some specific html attributes/properties", () => {
     expect(input.value).toBe("potato");
   });
 
-  test("input with t-att-value (patching with same value", () => {
-    // render input with initial value
-    const template = `<input t-att-value="v"/>`;
-    const bnode1 = renderToBdom(template, { v: "zucchini" });
-    const fixture = makeTestFixture();
-    mount(bnode1, fixture);
-    const input = fixture.querySelector("input")!;
-    expect(input.value).toBe("zucchini");
-
-    // change value manually in input, to simulate user input
-    input.value = "tomato";
-    expect(input.value).toBe("tomato");
-
-    const bnode2 = renderToBdom(template, { v: "zucchini" });
-    patch(bnode1, bnode2);
-    expect(input.value).toBe("zucchini");
-  });
-
-  test("input, type checkbox, with t-att-checked (patching with same value", () => {
-    // render input with initial value
-    const template = `<input type="checkbox" t-att-checked="v"/>`;
-    const bnode1 = renderToBdom(template, { v: true });
-    const fixture = makeTestFixture();
-    mount(bnode1, fixture);
-    const input = fixture.querySelector("input")!;
-    expect(input.checked).toBe(true);
-
-    // change checked manually in input, to simulate user input
-    input.checked = false;
-    expect(input.checked).toBe(false);
-
-    const bnode2 = renderToBdom(template, { v: true });
-    patch(bnode1, bnode2);
-    expect(input.checked).toBe(true);
-  });
-
   test("input of type checkbox with t-att-indeterminate", () => {
     const template = `<input type="checkbox" t-att-indeterminate="v"/>`;
     const bnode1 = renderToBdom(template, { v: true });

tests/compiler/t_call.test.ts

@@ -479,21 +479,4 @@ 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/compiler/t_esc.test.ts

@@ -67,21 +67,6 @@ describe("t-esc", () => {
     );
   });
 
-  test("t-esc with the 0 number", () => {
-    const template = `<t t-esc="var"/>`;
-    expect(renderToString(template, { var: 0 })).toBe("0");
-  });
-
-  test("t-esc with the 0 number, in a p", () => {
-    const template = `<p><t t-esc="var"/></p>`;
-    expect(renderToString(template, { var: 0 })).toBe("<p>0</p>");
-  });
-
-  test("top level t-esc with undefined", () => {
-    const template = `<t t-esc="var"/>`;
-    expect(renderToString(template, { var: undefined })).toBe("");
-  });
-
   test("falsy values in text nodes", () => {
     const template = `
         <t t-esc="v1"/>:<t t-esc="v2"/>:<t t-esc="v3"/>:<t t-esc="v4"/>:<t t-esc="v5"/>`;

tests/compiler/t_out.test.ts

@@ -47,21 +47,6 @@ describe("t-out", () => {
     expect(renderToString(template, { var: new String("ok") })).toBe("<span>ok</span>");
   });
 
-  test("t-out with the 0 number", () => {
-    const template = `<t t-out="var"/>`;
-    expect(renderToString(template, { var: 0 })).toBe("0");
-  });
-
-  test("t-out with the 0 number, in a p", () => {
-    const template = `<p><t t-out="var"/></p>`;
-    expect(renderToString(template, { var: 0 })).toBe("<p>0</p>");
-  });
-
-  test("top level t-out with undefined", () => {
-    const template = `<t t-out="var"/>`;
-    expect(renderToString(template, { var: undefined })).toBe("");
-  });
-
   test("with an extended String class", () => {
     class LoveString extends String {
       valueOf(): string {

tests/compiler/t_set.test.ts

@@ -33,22 +33,6 @@ describe("t-set", () => {
     expect(renderToString(template, { value: "ok" })).toBe("<div>grimbergen</div>");
   });
 
-  test("t-set, multiple t-ifs, and a specific configuration", () => {
-    const template = `
-      <p>
-        <div>
-          <t t-if="flag" t-set="bouh" t-value="2"/>
-          <span>First div</span>
-        </div>
-        <div>
-          <t t-if="!flag">Second</t>
-        </div>
-      </p>`;
-    expect(renderToString(template)).toBe(
-      "<p><div><span>First div</span></div><div>Second</div></p>"
-    );
-  });
-
   test("set from body literal", () => {
     const template = `<t><t t-set="value">ok</t><t t-esc="value"/></t>`;
     expect(renderToString(template)).toBe("ok");

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

@@ -1308,18 +1308,6 @@ exports[`t-out in components can switch the contents of two t-out repeatedly 1`]
 }"
 `;
 
-exports[`t-out in components t-out and updating falsy values,  1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { safeOutput } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return safeOutput(ctx['state'].a);
-  }
-}"
-`;
-
 exports[`t-out in components update properly on state changes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

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

@@ -1730,10 +1730,10 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 3`] =
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<p block-handler-0=\\"click\\"><block-text-1/></p>\`);
+  let block3 = createBlock(\`<span block-handler-0=\\"click\\"><block-text-1/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`D\`);
+    const b2 = text(\`C\`);
     let hdlr1 = [ctx['increment'], ctx];
     let txt1 = ctx['state'].val;
     const b3 = block3([hdlr1, txt1]);
@@ -1747,10 +1747,10 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 4`] =
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<span block-handler-0=\\"click\\"><block-text-1/></span>\`);
+  let block3 = createBlock(\`<p block-handler-0=\\"click\\"><block-text-1/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`C\`);
+    const b2 = text(\`D\`);
     let hdlr1 = [ctx['increment'], ctx];
     let txt1 = ctx['state'].val;
     const b3 = block3([hdlr1, txt1]);

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, this);
+    helpers.validateProps(\`SomeMispelledComponent\`, props1, ctx);
     return comp1(props1, key + \`__1\`, node, this, null);
   }
 }"
@@ -101,72 +101,6 @@ exports[`basics simple catchError 2`] = `
 }"
 `;
 
-exports[`can catch errors Errors have the right cause 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['state'].value);
-  }
-}"
-`;
-
-exports[`can catch errors Errors in owl lifecycle are wrapped in dev mode: async hook 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['state'].value);
-  }
-}"
-`;
-
-exports[`can catch errors Errors in owl lifecycle are wrapped out of dev mode: async hook 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['state'].value);
-  }
-}"
-`;
-
-exports[`can catch errors Errors in owl lifecycle are wrapped outside dev mode: sync hook 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['state'].value);
-  }
-}"
-`;
-
-exports[`can catch errors Thrown values that are not errors are wrapped in dev mode 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['state'].value);
-  }
-}"
-`;
-
-exports[`can catch errors Thrown values that are not errors are wrapped outside dev mode 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['state'].value);
-  }
-}"
-`;
-
 exports[`can catch errors an error in onWillDestroy 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -197,6 +131,19 @@ exports[`can catch errors an error in onWillDestroy 2`] = `
 }"
 `;
 
+exports[`can catch errors an error in onWillDestroy 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>abc</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`can catch errors an error in onWillDestroy, variation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -1362,16 +1309,3 @@ exports[`errors and promises errors in rerender 1`] = `
   }
 }"
 `;
-
-exports[`errors and promises wrapped errors in async code are correctly caught 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>abc</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;

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

@@ -58,20 +58,6 @@ exports[`event handling handler receive the event as argument 2`] = `
 }"
 `;
 
-exports[`event handling handler works when app is mounted in an iframe 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<span block-handler-0=\\"click\\">click me</span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['inc'], ctx];
-    return block1([hdlr1]);
-  }
-}"
-`;
-
 exports[`event handling input blur event is not called if component is destroyed 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

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, this);
+    helpers.validateProps(\`Child\`, props1, ctx);
     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, key);
+    ctx[\`abc\`] = new LazyValue(value1, ctx, this, node);
     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, this);
+    helpers.validateProps(\`Child\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`Child\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`Child\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -673,47 +673,13 @@ 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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     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
 ) {
@@ -724,7 +690,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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -755,7 +721,7 @@ exports[`props validation missing required boolean prop causes an error 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -772,7 +738,7 @@ exports[`props validation mix of optional and mandatory 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`Child\`, props1, this);
+    helpers.validateProps(\`Child\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -789,7 +755,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, this);
+    helpers.validateProps(\`Child\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -820,7 +786,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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -851,7 +817,7 @@ exports[`props validation props: list of strings 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -868,7 +834,7 @@ exports[`props validation validate simple types 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -885,7 +851,7 @@ exports[`props validation validate simple types 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -915,7 +881,7 @@ exports[`props validation validate simple types 4`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -932,7 +898,7 @@ exports[`props validation validate simple types 5`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -949,7 +915,7 @@ exports[`props validation validate simple types 6`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -979,7 +945,7 @@ exports[`props validation validate simple types 8`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -996,7 +962,7 @@ exports[`props validation validate simple types 9`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1013,7 +979,7 @@ exports[`props validation validate simple types 10`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1043,7 +1009,7 @@ exports[`props validation validate simple types 12`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1060,7 +1026,7 @@ exports[`props validation validate simple types 13`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1077,7 +1043,7 @@ exports[`props validation validate simple types 14`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1107,7 +1073,7 @@ exports[`props validation validate simple types 16`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1124,7 +1090,7 @@ exports[`props validation validate simple types 17`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1141,7 +1107,7 @@ exports[`props validation validate simple types 18`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1171,7 +1137,7 @@ exports[`props validation validate simple types 20`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1188,7 +1154,7 @@ exports[`props validation validate simple types 21`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1205,7 +1171,7 @@ exports[`props validation validate simple types 22`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1235,7 +1201,7 @@ exports[`props validation validate simple types 24`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1252,7 +1218,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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1269,7 +1235,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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1299,7 +1265,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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1316,7 +1282,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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1333,7 +1299,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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1363,7 +1329,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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1380,7 +1346,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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1397,7 +1363,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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1427,7 +1393,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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1444,7 +1410,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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1461,7 +1427,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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1491,7 +1457,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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1508,7 +1474,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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1525,7 +1491,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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1555,7 +1521,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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1572,7 +1538,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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1589,7 +1555,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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1619,7 +1585,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, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1636,7 +1602,7 @@ exports[`props validation validation is only done in dev mode 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }

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

@@ -604,64 +604,6 @@ exports[`slots default slot work with text nodes 2`] = `
 }"
 `;
 
-exports[`slots dynamic slot in multiple locations 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, false, false, true);
-  const comp2 = app.createComponent(\`Slotter\`, true, true, false, false);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    const b2 = text(\`hello \`);
-    const b3 = comp1({}, key + \`__1\`, node, this, null);
-    return multi([b2, b3]);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
-    return comp2({location: ctx['state'].location,slots: markRaw({'coffee': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
-  }
-}"
-`;
-
-exports[`slots dynamic slot in multiple locations 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block2 = createBlock(\`<p><block-child-0/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2,b4;
-    if (ctx['props'].location===1) {
-      const slot1 = ('coffee');
-      const b3 = toggler(slot1, callSlot(ctx, node, key + \`__1\`, slot1, true, {}));
-      b2 = block2([], [b3]);
-    }
-    if (ctx['props'].location===2) {
-      const slot2 = ('coffee');
-      b4 = toggler(slot2, callSlot(ctx, node, key + \`__2\`, slot2, true, {}));
-    }
-    return multi([b2, b4]);
-  }
-}"
-`;
-
-exports[`slots dynamic slot in multiple locations 3`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>child</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
 exports[`slots dynamic t-slot call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -703,7 +645,7 @@ exports[`slots dynamic t-slot call 2`] = `
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['toggle'], ctx];
     const slot1 = (ctx['current'].slot);
-    const b2 = toggler(slot1, callSlot(ctx, node, key + \`__1\`, slot1, true, {}));
+    const b2 = toggler(slot1, callSlot(ctx, node, key, slot1, true, {}));
     return block1([hdlr1], [b2]);
   }
 }"
@@ -753,7 +695,7 @@ exports[`slots dynamic t-slot call with default 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['toggle'], ctx];
-    const b3 = callSlot(ctx, node, key + \`__1\`, (ctx['current'].slot), true, {}, defaultContent1);
+    const b3 = callSlot(ctx, node, key, (ctx['current'].slot), true, {}, defaultContent1);
     return block1([hdlr1], [b3]);
   }
 }"
@@ -784,7 +726,7 @@ exports[`slots fun: two calls to the same slot 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = callSlot(ctx, node, key, 'default', false, {});
-    const b3 = callSlot(ctx, node, key + \`__1\`, 'default', false, {});
+    const b3 = callSlot(ctx, node, key, 'default', false, {});
     return multi([b2, b3]);
   }
 }"
@@ -1585,7 +1527,7 @@ exports[`slots simple dynamic slot with slot scope 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const slot1 = ('slotName');
-    const b2 = toggler(slot1, callSlot(ctx, node, key + \`__1\`, slot1, true, {bool: ctx['state'].bool}));
+    const b2 = toggler(slot1, callSlot(ctx, node, key, slot1, true, {bool: ctx['state'].bool}));
     return block1([], [b2]);
   }
 }"
@@ -1912,7 +1854,7 @@ exports[`slots slot content has different key from other content -- dynamic slot
   return function template(ctx, node, key = \\"\\") {
     const b2 = comp1({parent: 'SlotDisplay'}, key + \`__1\`, node, this, null);
     const slot1 = (ctx['slotName']);
-    const b3 = toggler(slot1, callSlot(ctx, node, key + \`__2\`, slot1, true, {}));
+    const b3 = toggler(slot1, callSlot(ctx, node, key, slot1, true, {}));
     return multi([b2, b3]);
   }
 }"
@@ -2053,118 +1995,6 @@ exports[`slots slot content is bound to caller 2`] = `
 }"
 `;
 
-exports[`slots slot in multiple locations 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(\`Slotter\`, true, true, false, false);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    const b2 = text(\` hello \`);
-    const b3 = comp1({}, key + \`__1\`, node, this, null);
-    return multi([b2, b3]);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    return comp2({location: ctx['state'].location,slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
-  }
-}"
-`;
-
-exports[`slots slot in multiple locations 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block2 = createBlock(\`<p><block-child-0/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2,b4;
-    if (ctx['props'].location===1) {
-      const b3 = callSlot(ctx, node, key, 'default', false, {});
-      b2 = block2([], [b3]);
-    }
-    if (ctx['props'].location===2) {
-      b4 = callSlot(ctx, node, key + \`__1\`, 'default', false, {});
-    }
-    return multi([b2, b4]);
-  }
-}"
-`;
-
-exports[`slots slot in multiple locations 3`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>child</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`slots slot in t-foreach locations 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(\`Slotter\`, true, true, false, false);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    const b2 = text(\` hello \`);
-    const b3 = comp1({}, key + \`__1\`, node, this, null);
-    return multi([b2, b3]);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    return comp2({list: ctx['state'].list,slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
-  }
-}"
-`;
-
-exports[`slots slot in t-foreach locations 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, callSlot, withKey } = helpers;
-  
-  let block2 = createBlock(\`<p><block-text-0/><block-child-0/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['props'].list);;
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`elem\`] = v_block1[i1];
-      ctx[\`elem_index\`] = i1;
-      const key1 = ctx['elem_index'];
-      let txt1 = ctx['elem'];
-      const b3 = callSlot(ctx, node, key1, 'default', false, {});
-      c_block1[i1] = withKey(block2([txt1], [b3]), key1);
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`slots slot in t-foreach locations 3`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>child</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
 exports[`slots slot preserves properly parented relationship 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -2835,36 +2665,6 @@ 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,51 +444,6 @@ 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

@@ -43,7 +43,7 @@ exports[`list of components crash on duplicate key in dev mode 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, OwlError, withKey } = helpers;
+  let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
@@ -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(String(key1))) { throw new OwlError(\`Got duplicate key in t-foreach: \${key1}\`)}
+      if (keys1.has(key1)) { throw new Error(\`Got duplicate key in t-foreach: \${key1}\`)}
-      keys1.add(String(key1));
+      keys1.add(key1);
       const props1 = {};
-      helpers.validateProps(\`Child\`, props1, this);
+      helpers.validateProps(\`Child\`, props1, ctx);
       c_block1[i1] = withKey(comp1(props1, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     return list(c_block1);
@@ -75,42 +75,6 @@ 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
 ) {
@@ -149,58 +113,6 @@ 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

@@ -1,39 +0,0 @@
-// 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, key);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
     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, key);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
     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, key);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
     return text(\` in slot \`);
   }
   
@@ -242,7 +242,7 @@ exports[`t-set t-set in t-if 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><p><block-text-0/></p></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-child-0/><p><block-text-0/></p></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -307,7 +307,7 @@ exports[`t-set t-set outside modified in t-if 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><p><block-text-0/></p></div>\`);
+  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-child-0/><p><block-text-0/></p></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -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, key);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
     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, key);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
     const b3 = safeOutput(ctx['v']);
     return block1([], [b3]);
   }

tests/components/basics.test.ts

@@ -1,12 +1,5 @@
 import { App, Component, mount, status, toRaw, useState, xml } from "../../src";
-import {
+import { elem, makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
-  elem,
-  makeTestFixture,
-  nextAppError,
-  nextTick,
-  snapshotEverything,
-  useLogLifecycle,
-} from "../helpers";
 import { markup } from "../../src/runtime/utils";
 
 let fixture: HTMLElement;
@@ -215,14 +208,14 @@ describe("basics", () => {
       static template = xml`<div/>`;
     }
     let error: Error;
-    const app = new App(Test);
+    const prom = mount(Test, fixture);
-    const prom = app.mount(fixture);
     await Promise.resolve();
     fixture.remove();
-    prom.catch((e: Error) => (error = e));
+    try {
-    await expect(nextAppError(app)).resolves.toThrow(
+      await prom;
-      "Cannot mount a component on a detached dom node"
+    } catch (e) {
-    );
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
     expect(error!.message).toBe("Cannot mount a component on a detached dom node");
     expect(console.warn).toBeCalledTimes(1);
@@ -1091,25 +1084,4 @@ describe("t-out in components", () => {
     await nextTick();
     expect(fixture.innerHTML).toBe("<div>1</div><div>2</div>");
   });
-
-  test("t-out and updating falsy values, ", async () => {
-    class Test extends Component {
-      static template = xml`<t t-out="state.a"/>`;
-      state: any = useState({ a: 0 });
-    }
-
-    const comp = await mount(Test, fixture);
-    expect(fixture.innerHTML).toBe("0");
-    comp.state.a = undefined;
-    await nextTick();
-    expect(fixture.innerHTML).toBe("");
-
-    comp.state.a = "hello";
-    await nextTick();
-    expect(fixture.innerHTML).toBe("hello");
-
-    comp.state.a = false;
-    await nextTick();
-    expect(fixture.innerHTML).toBe("false");
-  });
 });

tests/components/concurrency.test.ts

@@ -103,15 +103,13 @@ test("destroying/recreating a subwidget with different props (if start is not ov
   expect(n).toBe(0);
 
   w.state.val = 2;
-  await nextMicroTick();
+  await nextTick();
-  await nextMicroTick();
   expect(n).toBe(1);
 
   expect(["W:willRender", "Child:setup", "Child:willStart", "W:rendered"]).toBeLogged();
 
   w.state.val = 3;
-  await nextMicroTick();
+  await nextTick();
-  await nextMicroTick();
   expect(n).toBe(2);
 
   expect([
@@ -176,14 +174,16 @@ test("destroying/recreating a subcomponent, other scenario", async () => {
     "Parent:willRender",
     "Child:setup",
     "Child:willStart",
+    "Child:willRender",
+    "Child:rendered",
     "Parent:rendered",
     "Child:willDestroy",
     "Parent:willRender",
     "Child:setup",
     "Child:willStart",
-    "Parent:rendered",
     "Child:willRender",
     "Child:rendered",
+    "Parent:rendered",
     "Parent:willPatch",
     "Child:mounted",
     "Parent:patched",
@@ -319,9 +319,9 @@ test("creating two async components, scenario 2", async () => {
     "Parent:willRender",
     "ChildA:setup",
     "ChildA:willStart",
-    "Parent:rendered",
     "ChildA:willRender",
     "ChildA:rendered",
+    "Parent:rendered",
     "ChildA:mounted",
     "Parent:mounted",
   ]).toBeLogged();
@@ -2235,13 +2235,13 @@ test("concurrent renderings scenario 16", async () => {
     "A:willRender",
     "B:setup",
     "B:willStart",
-    "A:rendered",
     "B:willRender",
     "C:setup",
     "C:willStart",
-    "B:rendered",
     "C:willRender",
     "C:rendered",
+    "B:rendered",
+    "A:rendered",
     "C:mounted",
     "B:mounted",
     "A:mounted",
@@ -2906,9 +2906,9 @@ test("two sequential renderings before an animation frame", async () => {
     "Parent:willRender",
     "Child:setup",
     "Child:willStart",
-    "Parent:rendered",
     "Child:willRender",
     "Child:rendered",
+    "Parent:rendered",
     "Child:mounted",
     "Parent:mounted",
   ]).toBeLogged();
@@ -2920,13 +2920,7 @@ test("two sequential renderings before an animation frame", async () => {
   await nextMicroTick();
   await nextMicroTick();
   expect(fixture.innerHTML).toBe("0");
-  expect([
+  expect([]).toBeLogged();
-    "Parent:willRender",
-    "Child:willUpdateProps",
-    "Parent:rendered",
-    "Child:willRender",
-    "Child:rendered",
-  ]).toBeLogged();
 
   parent.state.value = 2;
   // enough microticks to wait for render + willupdateprops
@@ -2936,17 +2930,21 @@ test("two sequential renderings before an animation frame", async () => {
   await nextMicroTick();
   await nextMicroTick();
   expect(fixture.innerHTML).toBe("0");
-  expect([
+  expect([]).toBeLogged();
-    "Parent:willRender",
-    "Child:willUpdateProps",
-    "Parent:rendered",
-    "Child:willRender",
-    "Child:rendered",
-  ]).toBeLogged();
 
   await nextTick();
   // we check here that the willPatch and patched hooks are called only once
-  expect(["Parent:willPatch", "Child:willPatch", "Child:patched", "Parent:patched"]).toBeLogged();
+  expect([
+    "Parent:willRender",
+    "Child:willUpdateProps",
+    "Child:willRender",
+    "Child:rendered",
+    "Parent:rendered",
+    "Parent:willPatch",
+    "Child:willPatch",
+    "Child:patched",
+    "Parent:patched",
+  ]).toBeLogged();
 });
 
 test("t-key on dom node having a component", async () => {
@@ -3736,15 +3734,15 @@ test("delayed fiber does not get rendered if it was cancelled", async () => {
     "A:setup",
     "A:willRender",
     "B:setup",
-    "A:rendered",
     "B:willRender",
     "C:setup",
-    "B:rendered",
     "C:willRender",
     "D:setup",
-    "C:rendered",
     "D:willRender",
     "D:rendered",
+    "C:rendered",
+    "B:rendered",
+    "A:rendered",
     "D:mounted",
     "C:mounted",
     "B:mounted",
@@ -3753,7 +3751,7 @@ test("delayed fiber does not get rendered if it was cancelled", async () => {
   // Start a render in C
   c!.render(true);
   await nextMicroTick();
-  expect(["C:willRender", "C:rendered"]).toBeLogged();
+  expect(["C:willRender", "D:willRender", "D:rendered", "C:rendered"]).toBeLogged();
   // Start a render in A such that C is already rendered, but D will be delayed
   // (because A is rendering) then cancelled (when the render from A reaches C)
   a.render(true);
@@ -3761,13 +3759,13 @@ test("delayed fiber does not get rendered if it was cancelled", async () => {
   await nextTick();
   expect([
     "A:willRender",
-    "A:rendered",
     "B:willRender",
-    "B:rendered",
     "C:willRender",
-    "C:rendered",
     "D:willRender",
     "D:rendered",
+    "C:rendered",
+    "B:rendered",
+    "A:rendered",
     "A:willPatch",
     "B:willPatch",
     "C:willPatch",
@@ -3779,7 +3777,7 @@ test("delayed fiber does not get rendered if it was cancelled", async () => {
   ]).toBeLogged();
 });
 
-test("destroyed component causes other soon to be destroyed component to rerender, weird stuff happens", async () => {
+test.only("destroyed component causes other soon to be destroyed component to rerender, weird stuff happens", async () => {
   let def = makeDeferred();
   let c: any = null;
 
@@ -3787,6 +3785,9 @@ test("destroyed component causes other soon to be destroyed component to rerende
     static template = xml`<t t-esc="props.value"/>`;
     setup() {
       useLogLifecycle();
+      onWillStart(async () => {
+        await nextMicroTick();
+      });
       onRendered(() => {
         def.resolve();
       });
@@ -3802,6 +3803,9 @@ test("destroyed component causes other soon to be destroyed component to rerende
     setup() {
       c = this;
       useLogLifecycle();
+      onWillStart(async () => {
+        await nextMicroTick();
+      })
     }
   }
 
@@ -3816,6 +3820,9 @@ test("destroyed component causes other soon to be destroyed component to rerende
     state = useState({ flag: false, valueB: 1, valueC: 2 });
     setup() {
       useLogLifecycle();
+      onWillStart(async () => {
+        await nextMicroTick();
+      })
     }
   }
 
@@ -3917,17 +3924,17 @@ test("delayed rendering, destruction, stuff happens", async () => {
     "A:willRender",
     "B:setup",
     "B:willStart",
-    "A:rendered",
     "B:willRender",
     "C:setup",
     "C:willStart",
-    "B:rendered",
     "C:willRender",
     "D:setup",
     "D:willStart",
-    "C:rendered",
     "D:willRender",
     "D:rendered",
+    "C:rendered",
+    "B:rendered",
+    "A:rendered",
     "D:mounted",
     "C:mounted",
     "B:mounted",
@@ -3940,10 +3947,10 @@ test("delayed rendering, destruction, stuff happens", async () => {
   expect([
     "A:willRender",
     "B:willUpdateProps",
-    "A:rendered",
     "B:willRender",
     "C:willUpdateProps",
     "B:rendered",
+    "A:rendered",
   ]).toBeLogged();
 
   // update B => removes child C
@@ -4018,19 +4025,19 @@ test("renderings, destruction, patch, stuff, ... yet another variation", async (
     "A:willRender",
     "B:setup",
     "B:willStart",
-    "D:setup",
-    "D:willStart",
-    "A:rendered",
     "B:willRender",
     "C:setup",
     "C:willStart",
-    "B:rendered",
-    "D:willRender",
-    "D:rendered",
     "C:willRender",
     "C:rendered",
-    "C:mounted",
+    "B:rendered",
+    "D:setup",
+    "D:willStart",
+    "D:willRender",
+    "D:rendered",
+    "A:rendered",
     "D:mounted",
+    "C:mounted",
     "B:mounted",
     "A:mounted",
   ]).toBeLogged();

tests/components/error_handling.test.ts

@@ -1,12 +1,12 @@
-import { App, Component, mount, onWillDestroy } from "../../src";
+import { Component, mount, onWillDestroy } from "../../src";
 import {
   onError,
   onMounted,
   onPatched,
-  onWillPatch,
-  onWillStart,
-  onWillRender,
   onRendered,
+  onWillPatch,
+  onWillRender,
+  onWillStart,
   onWillUnmount,
   useState,
   xml,
@@ -14,13 +14,11 @@ import {
 import {
   logStep,
   makeTestFixture,
-  nextTick,
   nextMicroTick,
+  nextTick,
   snapshotEverything,
   useLogLifecycle,
-  nextAppError,
 } from "../helpers";
-import { OwlError } from "../../src/runtime/error_handling";
 
 let fixture: HTMLElement;
 
@@ -60,10 +58,9 @@ describe("basics", () => {
     parent.state.flag = true;
 
     parent.render();
-    await expect(nextAppError(parent.__owl__.app)).resolves.toThrow(
+    await nextTick();
-      "An error occured in the owl lifecycle"
-    );
     expect(fixture.innerHTML).toBe("");
+    expect(mockConsoleError).toBeCalledTimes(1);
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 
@@ -73,13 +70,12 @@ describe("basics", () => {
       static template = xml`<SomeMispelledComponent />`;
       static components = { SomeComponent };
     }
-    const app = new App(Parent);
     let error: Error;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    try {
-    await expect(nextAppError(app)).resolves.toThrow(
+      await mount(Parent, fixture);
-      'Cannot find the definition of component "SomeMispelledComponent"'
+    } catch (e) {
-    );
+      error = e as Error;
-    await mountProm;
+    }
     expect(error!).toBeDefined();
     expect(error!.message).toBe('Cannot find the definition of component "SomeMispelledComponent"');
     expect(console.error).toBeCalledTimes(0);
@@ -93,13 +89,12 @@ describe("basics", () => {
       static template = xml`<SomeMispelledComponent />`;
       static components = { SomeComponent };
     }
-    const app = new App(Parent, { test: true });
     let error: Error;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    try {
-    await expect(nextAppError(app)).resolves.toThrow(
+      await mount(Parent, fixture, { test: true });
-      'Cannot find the definition of component "SomeMispelledComponent"'
+    } catch (e) {
-    );
+      error = e as Error;
-    await mountProm;
+    }
     expect(error!).toBeDefined();
     expect(error!.message).toBe('Cannot find the definition of component "SomeMispelledComponent"');
     expect(console.error).toBeCalledTimes(0);
@@ -113,13 +108,13 @@ describe("basics", () => {
       static template = xml`<SomeComponent />`;
       static components = { SomeComponent: notAComponentConstructor };
     }
-    const app = new App(Parent as typeof Component);
     let error: Error;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    try {
-    await expect(nextAppError(app)).resolves.toThrow(
+      // @ts-expect-error
-      '"SomeComponent" is not a Component. It must inherit from the Component class'
+      await mount(Parent, fixture);
-    );
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
       '"SomeComponent" is not a Component. It must inherit from the Component class'
@@ -160,26 +155,26 @@ describe("basics", () => {
 describe("errors and promises", () => {
   test("a rendering error will reject the mount promise", async () => {
     // we do not catch error in willPatch anymore
-    class Root extends Component {
+    class App extends Component {
       static template = xml`<div><t t-esc="this.will.crash"/></div>`;
     }
 
-    const app = new App(Root);
+    let error: Error;
-    let error: OwlError;
+    try {
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(App, fixture);
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
-    expect(error!.cause).toBeDefined();
     const regexp =
       /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
-    expect(error!.cause.message).toMatch(regexp);
+    expect(error!.message).toMatch(regexp);
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleError).toBeCalledTimes(0);
   });
 
   test("an error in mounted call will reject the mount promise", async () => {
-    class Root extends Component {
+    class App extends Component {
       static template = xml`<div>abc</div>`;
       setup() {
         onMounted(() => {
@@ -188,21 +183,21 @@ describe("errors and promises", () => {
       }
     }
 
-    const app = new App(Root);
+    let error: Error;
-    let error: OwlError;
+    try {
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(App, fixture);
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
-    expect(error!.cause).toBeDefined();
+    expect(error!.message).toBe("boom");
-    expect(error!.cause.message).toBe("boom");
     expect(fixture.innerHTML).toBe("");
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 
   test("an error in onMounted callback will have the component's setup in its stack trace", async () => {
-    class Root extends Component {
+    class App extends Component {
       static template = xml`<div>abc</div>`;
       setup() {
         onMounted(() => {
@@ -211,13 +206,14 @@ describe("errors and promises", () => {
       }
     }
 
-    const app = new App(Root, { test: true });
+    let error: Error;
-    let error: OwlError;
+    try {
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(App, fixture, { test: true });
-    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
-    expect(error!.stack).toContain("Root.setup");
+    expect(error!.stack).toContain("App.setup");
     expect(error!.stack).toContain("error_handling.test.ts");
     expect(fixture.innerHTML).toBe("");
     expect(mockConsoleError).toBeCalledTimes(0);
@@ -225,7 +221,7 @@ describe("errors and promises", () => {
   });
 
   test("errors in onWillRender/onRender aren't wrapped more than once", async () => {
-    class Root extends Component {
+    class App extends Component {
       static template = xml`<div>abc</div>`;
       setup() {
         onWillRender(() => {
@@ -237,11 +233,12 @@ describe("errors and promises", () => {
       }
     }
 
-    const app = new App(Root, { test: true });
+    let error: Error;
-    let error: OwlError;
+    try {
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(App, fixture, { test: true });
-    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillRender");
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
       `The following error occurred in onWillRender: "boom in onWillRender"`
@@ -267,29 +264,6 @@ describe("errors and promises", () => {
     expect(error!.message).toBe("Tokenizer error: could not tokenize `{ 'invalid: 5 }`");
   });
 
-  test("wrapped errors in async code are correctly caught", async () => {
-    class Root extends Component {
-      static template = xml`<div>abc</div>`;
-      setup() {
-        onWillStart(async () => {
-          await Promise.resolve();
-          throw new Error("boom in onWillStart");
-        });
-      }
-    }
-
-    const app = new App(Root, { test: true });
-    let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
-    await mountProm;
-    expect(error!).toBeDefined();
-    expect(error!.message).toBe(
-      `The following error occurred in onWillStart: "boom in onWillStart"`
-    );
-    await new Promise((r) => setTimeout(r, 0)); // wait for the rejection event to bubble
-  });
-
   test("an error in willPatch call will reject the render promise", async () => {
     class Root extends Component {
       static template = xml`<div><t t-esc="val"/></div>`;
@@ -341,21 +315,21 @@ describe("errors and promises", () => {
     class Child extends Component {
       static template = xml`<div><t t-esc="this.will.crash"/></div>`;
     }
-    class Parent extends Component {
+    class App extends Component {
       static template = xml`<div><Child/></div>`;
       static components = { Child };
     }
 
-    const app = new App(Parent);
+    let error: Error;
-    let error: OwlError;
+    try {
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(App, fixture);
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
-    expect(error!.cause).toBeDefined();
     const regexp =
       /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
-    expect(error!.cause.message).toMatch(regexp);
+    expect(error!.message).toMatch(regexp);
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
@@ -365,7 +339,7 @@ describe("errors and promises", () => {
       static template = xml`<div><t t-if="flag" t-esc="this.will.crash"/></div>`;
       flag = false;
       setup() {
-        onError(({ cause }) => (error = cause));
+        onError((e) => (error = e));
       }
     }
 
@@ -392,16 +366,16 @@ describe("errors and promises", () => {
       static components = { Child };
     }
 
-    const app = new App(Parent);
+    let error: Error;
-    let error: OwlError;
+    try {
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(Parent, fixture);
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
-    expect(error!.cause).toBeDefined();
     const regexp =
       /Cannot read properties of undefined \(reading 'y'\)|Cannot read property 'y' of undefined/g;
-    expect(error!.cause.message).toMatch(regexp);
+    expect(error!.message).toMatch(regexp);
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
@@ -422,12 +396,13 @@ describe("errors and promises", () => {
       }
     }
 
-    const app = new App(Example, { test: true });
+    try {
-    let error: OwlError;
+      await mount(Example, fixture, { test: true });
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    } catch (e) {
-    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
+      expect((e as Error).message).toBe(
-    await mountProm;
+        `The following error occurred in onMounted: "Error in mounted"`
-    expect(error!.message).toBe(`The following error occurred in onMounted: "Error in mounted"`);
+      );
+    }
     // 1 additional error is logged because the destruction of the app causes
     // the onWillUnmount hook to be called and to fail
     expect(mockConsoleError).toBeCalledTimes(1);
@@ -444,10 +419,9 @@ describe("errors and promises", () => {
 
     root.state = "boom";
     root.render();
-    await expect(nextAppError(root.__owl__.app)).resolves.toThrow(
+    await nextTick();
-      "error occured in the owl lifecycle"
-    );
     expect(fixture.innerHTML).toBe("");
+    expect(mockConsoleError).toBeCalledTimes(1);
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 });
@@ -497,150 +471,17 @@ describe("can catch errors", () => {
         });
       }
     }
-    const app = new App(Root, { test: true });
+    let e: Error;
-    let error: OwlError;
+    try {
-    const crashProm = expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
+      await mount(Root, fixture, { test: true });
-    await app.mount(fixture).catch((e: Error) => (error = e));
+    } catch (error) {
-    await crashProm;
+      e = error as Error;
-    expect(error!.message).toBe(
+    }
+    expect(e!.message).toBe(
       `The following error occurred in onWillStart: "No active component (a hook function should only be called in 'setup')"`
     );
   });
 
-  test("Errors have the right cause", async () => {
-    const err = new Error("test error");
-    class Root extends Component {
-      static template = xml`<t t-esc="state.value"/>`;
-      state = useState({ value: 1 });
-
-      setup() {
-        onMounted(() => {
-          throw err;
-        });
-      }
-    }
-    const app = new App(Root, { test: true });
-    let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
-    await mountProm;
-    expect(error!.message).toBe(`The following error occurred in onMounted: "test error"`);
-    expect(error!.cause).toBe(err);
-  });
-
-  test("Errors in owl lifecycle are wrapped in dev mode: async hook", async () => {
-    const err = new Error("test error");
-    class Root extends Component {
-      static template = xml`<t t-esc="state.value"/>`;
-      state = useState({ value: 1 });
-
-      setup() {
-        onWillStart(async () => {
-          await nextMicroTick();
-          throw err;
-        });
-      }
-    }
-    const app = new App(Root, { test: true });
-    let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
-    await mountProm;
-    expect(error!.message).toBe(`The following error occurred in onWillStart: "test error"`);
-    expect(error!.cause).toBe(err);
-  });
-
-  test("Errors in owl lifecycle are wrapped outside dev mode: sync hook", async () => {
-    const err = new Error("test error");
-    class Root extends Component {
-      static template = xml`<t t-esc="state.value"/>`;
-      state = useState({ value: 1 });
-
-      setup() {
-        onMounted(() => {
-          throw err;
-        });
-      }
-    }
-    const app = new App(Root);
-    let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-    await mountProm;
-    expect(error!.message).toBe(
-      `An error occured in the owl lifecycle (see this Error's "cause" property)`
-    );
-    expect(error!.cause).toBe(err);
-  });
-
-  test("Errors in owl lifecycle are wrapped out of dev mode: async hook", async () => {
-    const err = new Error("test error");
-    class Root extends Component {
-      static template = xml`<t t-esc="state.value"/>`;
-      state = useState({ value: 1 });
-
-      setup() {
-        onWillStart(async () => {
-          await nextMicroTick();
-          throw err;
-        });
-      }
-    }
-    const app = new App(Root);
-    let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-    await mountProm;
-    expect(error!.message).toBe(
-      `An error occured in the owl lifecycle (see this Error's "cause" property)`
-    );
-    expect(error!.cause).toBe(err);
-  });
-
-  test("Thrown values that are not errors are wrapped in dev mode", async () => {
-    class Root extends Component {
-      static template = xml`<t t-esc="state.value"/>`;
-      state = useState({ value: 1 });
-
-      setup() {
-        onMounted(() => {
-          throw "This is not an error";
-        });
-      }
-    }
-    const app = new App(Root, { test: true });
-    let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("not an Error was thrown in onMounted");
-    await mountProm;
-    expect(error!.message).toBe(
-      `Something that is not an Error was thrown in onMounted (see this Error's "cause" property)`
-    );
-    expect(error!.cause).toBe("This is not an error");
-  });
-
-  test("Thrown values that are not errors are wrapped outside dev mode", async () => {
-    class Root extends Component {
-      static template = xml`<t t-esc="state.value"/>`;
-      state = useState({ value: 1 });
-
-      setup() {
-        onMounted(() => {
-          throw "This is not an error";
-        });
-      }
-    }
-    const app = new App(Root);
-    let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-    await mountProm;
-    expect(error!.message).toBe(
-      `An error occured in the owl lifecycle (see this Error's "cause" property)`
-    );
-    expect(error!.cause).toBe("This is not an error");
-  });
-
   test("can catch an error in the initial call of a component render function (parent mounted)", async () => {
     class ErrorComponent extends Component {
       static template = xml`<div>hey<t t-esc="state.this.will.crash"/></div>`;
@@ -1339,8 +1180,8 @@ describe("can catch errors", () => {
     class Catch extends Component {
       static template = xml`<t t-slot="default" />`;
       setup() {
-        onError(({ cause }) => {
+        onError((error) => {
-          this.props.onError(cause);
+          this.props.onError(error);
         });
       }
     }
@@ -1410,9 +1251,9 @@ describe("can catch errors", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -1435,7 +1276,7 @@ describe("can catch errors", () => {
     expect(fixture.innerHTML).toBe("2");
   });
 
-  test("an error in onWillDestroy, variation", async () => {
+  test.only("an error in onWillDestroy, variation", async () => {
     class Child extends Component {
       static template = xml`<div>abc</div>`;
       setup() {
@@ -1473,27 +1314,26 @@ describe("can catch errors", () => {
     ]).toBeLogged();
 
     parent.state.hasChild = true;
-    await nextMicroTick();
+    await nextTick();
-    await nextMicroTick();
-    await nextMicroTick();
-    await nextMicroTick();
-    await nextMicroTick();
     expect([
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Child:mounted",
+      "Parent:patched",
     ]).toBeLogged();
     parent.state.hasChild = false;
     await nextTick();
     expect([
-      "Child:willDestroy",
       "Parent:willRender",
       "Parent:rendered",
       "Parent:willPatch",
-      "Parent:patched",
+      "Child:willUnmount",
+      "Child:willDestroy",
     ]).toBeLogged();
     expect(fixture.innerHTML).toBe("2");
   });

tests/components/event_handling.test.ts

@@ -171,22 +171,4 @@ describe("event handling", () => {
     // input is removed when component is destroyed => nothing should happen
     expect([]).toBeLogged();
   });
-
-  test("handler works when app is mounted in an iframe", async () => {
-    let clickCount = 0;
-
-    class Parent extends Component {
-      static template = xml`<span t-on-click="inc">click me</span>`;
-      inc() {
-        clickCount++;
-      }
-    }
-    const iframe = document.createElement("iframe");
-    fixture.appendChild(iframe);
-    const iframeDoc = iframe.contentDocument!;
-    await mount(Parent, iframeDoc.body);
-    expect(clickCount).toBe(0);
-    iframeDoc.querySelector("span")!.click();
-    expect(clickCount).toBe(1);
-  });
 });

tests/components/hooks.test.ts

@@ -17,16 +17,8 @@ import {
   useChildSubEnv,
   useSubEnv,
   xml,
-  OwlError,
 } from "../../src/index";
-import {
+import { elem, logStep, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
-  elem,
-  logStep,
-  makeTestFixture,
-  nextAppError,
-  nextTick,
-  snapshotEverything,
-} from "../helpers";
 
 let fixture: HTMLElement;
 
@@ -658,12 +650,11 @@ describe("hooks", () => {
         }
       }
 
-      let error: OwlError;
+      try {
-      const app = new App(MyComponent);
+        await mount(MyComponent, fixture);
-      const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      } catch (e: any) {
-      await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+        expect(e.message).toBe("Intentional error");
-      await mountProm;
+      }
-      expect(error!.cause.message).toBe("Intentional error");
       // no console.error because the error has been caught in this test
       expect(console.error).toHaveBeenCalledTimes(0);
       console.error = originalconsoleError;

tests/components/lifecycle.test.ts

@@ -461,9 +461,9 @@ describe("lifecycle hooks", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -474,9 +474,9 @@ describe("lifecycle hooks", () => {
     expect([
       "Parent:willRender",
       "Child:willUpdateProps",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Parent:willPatch",
       "Child:willPatch",
       "Child:patched",
@@ -520,9 +520,9 @@ describe("lifecycle hooks", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -638,9 +638,9 @@ describe("lifecycle hooks", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -694,13 +694,13 @@ describe("lifecycle hooks", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "GrandChild:setup",
       "GrandChild:willStart",
-      "Child:rendered",
       "GrandChild:willRender",
       "GrandChild:rendered",
+      "Child:rendered",
+      "Parent:rendered",
       "Parent:willPatch",
       "GrandChild:mounted",
       "Child:mounted",
@@ -803,11 +803,11 @@ describe("lifecycle hooks", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "GrandChild:setup",
       "GrandChild:willStart",
       "Child:rendered",
+      "Parent:rendered",
     ]).toBeLogged();
 
     app.destroy();
@@ -843,9 +843,9 @@ describe("lifecycle hooks", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -886,9 +886,9 @@ describe("lifecycle hooks", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -898,9 +898,9 @@ describe("lifecycle hooks", () => {
     expect([
       "Parent:willRender",
       "Child:willUpdateProps",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Parent:willPatch",
       "Child:willPatch",
       "Child:patched",
@@ -943,9 +943,9 @@ describe("lifecycle hooks", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -1060,21 +1060,21 @@ describe("lifecycle hooks", () => {
       "A:willRender",
       "B:setup",
       "B:willStart",
-      "C:setup",
-      "C:willStart",
-      "A:rendered",
       "B:willRender",
       "B:rendered",
+      "C:setup",
+      "C:willStart",
       "C:willRender",
       "D:setup",
       "D:willStart",
-      "E:setup",
-      "E:willStart",
-      "C:rendered",
       "D:willRender",
       "D:rendered",
+      "E:setup",
+      "E:willStart",
       "E:willRender",
       "E:rendered",
+      "C:rendered",
+      "A:rendered",
       "E:mounted",
       "D:mounted",
       "C:mounted",
@@ -1089,9 +1089,9 @@ describe("lifecycle hooks", () => {
       "C:willRender",
       "F:setup",
       "F:willStart",
-      "C:rendered",
       "F:willRender",
       "F:rendered",
+      "C:rendered",
       "C:willPatch",
       "E:willUnmount",
       "E:willDestroy",
@@ -1124,9 +1124,9 @@ describe("lifecycle hooks", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -1148,9 +1148,9 @@ describe("lifecycle hooks", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Parent:willPatch",
       "Child:mounted",
       "Parent:patched",
@@ -1171,7 +1171,7 @@ describe("lifecycle hooks", () => {
     }
 
     await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe("<span></span>");
+    expect(fixture.innerHTML).toBe("<span>Patched</span>");
     expect([
       "Parent:setup",
       "Parent:willStart",
@@ -1180,11 +1180,13 @@ describe("lifecycle hooks", () => {
       "Parent:mounted",
       "Parent:willRender",
       "Parent:rendered",
+      "Parent:willPatch",
+      "Parent:patched",
     ]).toBeLogged();
 
     await nextTick();
     expect(fixture.innerHTML).toBe("<span>Patched</span>");
-    expect(["Parent:willPatch", "Parent:patched"]).toBeLogged();
+    expect([]).toBeLogged();
   });
 
   test("render in patched", async () => {
@@ -1215,7 +1217,7 @@ describe("lifecycle hooks", () => {
 
     parent.render();
     await nextTick();
-    expect(fixture.innerHTML).toBe("<span></span>");
+    expect(fixture.innerHTML).toBe("<span>Patched</span>");
     expect([
       "Parent:willRender",
       "Parent:rendered",
@@ -1223,11 +1225,13 @@ describe("lifecycle hooks", () => {
       "Parent:patched",
       "Parent:willRender",
       "Parent:rendered",
+      "Parent:willPatch",
+      "Parent:patched",
     ]).toBeLogged();
 
     await nextTick();
     expect(fixture.innerHTML).toBe("<span>Patched</span>");
-    expect(["Parent:willPatch", "Parent:patched"]).toBeLogged();
+    expect([]).toBeLogged();
   });
 
   test("render in willPatch", async () => {
@@ -1265,12 +1269,15 @@ describe("lifecycle hooks", () => {
       "Parent:rendered",
       "Parent:willPatch",
       "Parent:patched",
-      "Parent:willRender",
-      "Parent:rendered",
     ]).toBeLogged();
 
     await nextTick();
-    expect(["Parent:willPatch", "Parent:patched"]).toBeLogged();
+    expect([
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Parent:patched",
+    ]).toBeLogged();
     expect(fixture.innerHTML).toBe("<span>Patched</span>");
   });
 
@@ -1333,6 +1340,9 @@ describe("lifecycle hooks", () => {
       static template = xml`child`;
       setup() {
         useLogLifecycle();
+        onWillStart(async () => {
+          await nextMicroTick();
+        });
       }
     }
 

tests/components/props_validation.test.ts

@@ -1,6 +1,6 @@
-import { makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
+import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
-import { Component, onError, xml, mount, OwlError } from "../../src";
+import { Component, onError, xml, mount } from "../../src";
-import { App, DEV_MSG } from "../../src/runtime/app";
+import { DEV_MSG } from "../../src/runtime/app";
 import { validateProps } from "../../src/runtime/template_helpers";
 import { Schema } from "../../src/runtime/validation";
 
@@ -48,14 +48,13 @@ describe("props validation", () => {
       static components = { SubComp };
       static template = xml`<div><SubComp /></div>`;
     }
+    let error: Error | undefined;
 
-    const app = new App(Parent, { test: true });
+    try {
-    let error: OwlError | undefined;
+      await mount(Parent, fixture, { dev: true });
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    } catch (e) {
-    await expect(nextAppError(app)).resolves.toThrow(
+      error = e as Error;
-      "Invalid props for component 'SubComp': 'message' is missing"
+    }
-    );
-    await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe("Invalid props for component 'SubComp': 'message' is missing");
     error = undefined;
@@ -78,13 +77,12 @@ describe("props validation", () => {
       static template = xml`<div><SubComp /></div>`;
     }
 
-    const app = new App(Parent, { test: true });
+    let error: Error;
-    let error: OwlError | undefined;
+    try {
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(Parent, fixture, { dev: true });
-    await expect(nextAppError(app)).resolves.toThrow(
+    } catch (e) {
-      "Invalid props for component 'SubComp': 'message' is missing"
+      error = e as Error;
-    );
+    }
-    await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe("Invalid props for component 'SubComp': 'message' is missing");
   });
@@ -128,12 +126,14 @@ describe("props validation", () => {
       };
       (Parent as any).components = { SubComp };
 
+      let error: Error | undefined;
       props = {};
-      let app = new App(Parent, { test: true });
+
-      let error: OwlError | undefined;
+      try {
-      let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+        await mount(Parent, fixture, { dev: true });
-      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
+      } catch (e) {
-      await mountProm;
+        error = e as Error;
+      }
       expect(error!).toBeDefined();
       expect(error!.message).toBe(
         `Invalid props for component '_a': 'p' is undefined (should be a ${test.type.name.toLowerCase()})`
@@ -147,10 +147,11 @@ describe("props validation", () => {
       }
       expect(error!).toBeUndefined();
       props = { p: test.ko };
-      app = new App(Parent, { test: true });
+      try {
-      mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+        await mount(Parent, fixture, { dev: true });
-      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
+      } catch (e) {
-      await mountProm;
+        error = e as Error;
+      }
       expect(error!).toBeDefined();
       expect(error!.message).toBe(
         `Invalid props for component '_a': 'p' is not a ${test.type.name.toLowerCase()}`
@@ -180,12 +181,13 @@ describe("props validation", () => {
         static template = xml`<div>hey</div>`;
       };
       (Parent as any).components = { SubComp };
+      let error: Error | undefined;
       props = {};
-      let app = new App(Parent, { test: true });
+      try {
-      let error: OwlError | undefined;
+        await mount(Parent, fixture, { dev: true });
-      let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      } catch (e) {
-      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
+        error = e as Error;
-      await mountProm;
+      }
       expect(error!).toBeDefined();
       expect(error!.message).toBe(
         `Invalid props for component '_a': 'p' is undefined (should be a ${test.type.name.toLowerCase()})`
@@ -199,10 +201,11 @@ describe("props validation", () => {
       }
       expect(error!).toBeUndefined();
       props = { p: test.ko };
-      app = new App(Parent, { test: true });
+      try {
-      mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+        await mount(Parent, fixture, { dev: true });
-      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
+      } catch (e) {
-      await mountProm;
+        error = e as Error;
+      }
       expect(error!).toBeDefined();
       expect(error!.message).toBe(
         `Invalid props for component '_a': 'p' is not a ${test.type.name.toLowerCase()}`
@@ -224,25 +227,26 @@ describe("props validation", () => {
     }
     let error: Error;
     let props: { p?: any };
-    props = { p: "string" };
     try {
+      props = { p: "string" };
       await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
     expect(error!).toBeUndefined();
-    props = { p: true };
     try {
+      props = { p: true };
       await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
     expect(error!).toBeUndefined();
-    props = { p: 1 };
+    try {
-    const app = new App(Parent, { test: true });
+      props = { p: 1 };
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(Parent, fixture, { dev: true });
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
       "Invalid props for component 'SubComp': 'p' is not a string or boolean"
@@ -263,25 +267,26 @@ describe("props validation", () => {
     }
     let error: Error;
     let props: { p?: any };
-    props = { p: "key" };
     try {
+      props = { p: "key" };
       await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
     expect(error!).toBeUndefined();
-    props = {};
     try {
+      props = {};
       await mount(Parent, fixture, { dev: true });
     } catch (e) {
       error = e as Error;
     }
     expect(error!).toBeUndefined();
-    props = { p: 1 };
+    try {
-    const app = new App(Parent, { test: true });
+      props = { p: 1 };
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(Parent, fixture, { dev: true });
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
     expect(error!.message).toBe("Invalid props for component 'SubComp': 'p' is not a string");
   });
@@ -314,18 +319,20 @@ describe("props validation", () => {
       error = e as Error;
     }
     expect(error!).toBeUndefined();
-    props = { p: [1] };
+    try {
-    let app = new App(Parent, { test: true });
+      props = { p: [1] };
-    let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(Parent, fixture, { dev: true });
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
     error = undefined;
-    app = new App(Parent, { test: true });
+    try {
-    mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      props = { p: ["string", 1] };
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+      await mount(Parent, fixture, { dev: true });
-    await mountProm;
+    } catch (e) {
-    expect(error!).toBeDefined();
+      error = e as Error;
+    }
   });
 
   test("can validate an array with multiple sub element types", async () => {
@@ -363,11 +370,12 @@ describe("props validation", () => {
       error = e as Error;
     }
     expect(error!).toBeUndefined();
-    props = { p: [true, 1] };
+    try {
-    const app = new App(Parent, { test: true });
+      props = { p: [true, 1] };
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(Parent, fixture, { dev: true });
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
       "Invalid props for component 'SubComp': 'p[1]' is not a string or boolean"
@@ -397,30 +405,33 @@ describe("props validation", () => {
       error = e as Error;
     }
     expect(error!).toBeUndefined();
-    props = { p: { id: 1, url: "url", extra: true } };
+    try {
-    let app = new App(Parent, { test: true });
+      props = { p: { id: 1, url: "url", extra: true } };
-    let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(Parent, fixture, { dev: true });
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
       "Invalid props for component 'SubComp': 'p' has not the correct shape (unknown key 'extra')"
     );
-    props = { p: { id: "1", url: "url" } };
+    try {
-    app = new App(Parent, { test: true });
+      props = { p: { id: "1", url: "url" } };
-    mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(Parent, fixture, { dev: true });
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
       "Invalid props for component 'SubComp': 'p' has not the correct shape ('id' is not a number)"
     );
     error = undefined;
-    props = { p: { id: 1 } };
+    try {
-    app = new App(Parent, { test: true });
+      props = { p: { id: 1 } };
-    mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(Parent, fixture, { dev: true });
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
       "Invalid props for component 'SubComp': 'p' has not the correct shape ('url' is missing (should be a string))"
@@ -463,11 +474,12 @@ describe("props validation", () => {
       error = e as Error;
     }
     expect(error!).toBeUndefined();
-    props = { p: { id: 1, url: [12, true] } };
+    try {
-    const app = new App(Parent, { test: true });
+      props = { p: { id: 1, url: [12, true] } };
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(Parent, fixture, { dev: true });
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
       "Invalid props for component 'SubComp': 'p' has not the correct shape ('url' is not a boolean or list of numbers)"
@@ -674,10 +686,11 @@ describe("props validation", () => {
       static components = { SubComp };
     }
     let error: Error;
-    const app = new App(Parent, { test: true });
+    try {
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(Parent, fixture, { dev: true });
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
     expect(error!.message).toBe("Invalid props for component 'SubComp': 'p' is missing");
   });
@@ -741,10 +754,11 @@ describe("props validation", () => {
       static template = xml`<div><Child/></div>`;
     }
     let error: Error;
-    const app = new App(Parent, { test: true });
+    try {
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(Parent, fixture, { dev: true });
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'Child'");
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
       "Invalid props for component 'Child': 'mandatory' is missing (should be a number)"
@@ -780,32 +794,6 @@ 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");
-  });
 });
 
 //------------------------------------------------------------------------------
@@ -871,12 +859,11 @@ describe("default props", () => {
       static template = xml`<Child/>`;
     }
     let error: Error;
-    const app = new App(Parent, { test: true });
+    try {
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(Parent, fixture, { dev: true });
-    await expect(nextAppError(app)).resolves.toThrow(
+    } catch (e) {
-      "default value cannot be defined for a mandatory prop"
+      error = e as Error;
-    );
+    }
-    await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
       "A default value cannot be defined for a mandatory prop (name: 'mandatory', component: Child)"

tests/components/reactivity.test.ts

@@ -152,7 +152,7 @@ describe("reactivity in lifecycle", () => {
     const prom = mount(Comp, fixture);
     (STATE as any).val = 2;
     await prom;
-    expect(steps).toEqual([2]);
+    expect(steps).toEqual([1, 2]);
     expect(fixture.innerHTML).toBe("<div>2</div>");
   });
 
@@ -180,9 +180,9 @@ describe("reactivity in lifecycle", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();

tests/components/refs.test.ts

@@ -1,5 +1,5 @@
-import { App, Component, mount, onMounted, useRef, useState } from "../../src/index";
+import { Component, mount, onMounted, useRef, useState } from "../../src/index";
-import { logStep, makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
+import { logStep, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 import { xml } from "../../src/index";
 
 snapshotEverything();
@@ -94,14 +94,9 @@ describe("refs", () => {
       ref = useRef("coucou");
     }
 
-    const app = new App(Test, { test: true });
+    await expect(async () => {
-    const mountProm = expect(app.mount(fixture)).rejects.toThrowError(
+      await mount(Test, fixture);
-      "Cannot have 2 elements with same ref name at the same time"
+    }).rejects.toThrowError("Cannot have 2 elements with same ref name at the same time");
-    );
-    await expect(nextAppError(app)).resolves.toThrow(
-      "Cannot have 2 elements with same ref name at the same time"
-    );
-    await mountProm;
     expect(console.warn).toBeCalledTimes(1);
     console.warn = consoleWarn;
   });

tests/components/rendering.test.ts

@@ -1,11 +1,10 @@
 import { Component, mount, onRendered, onWillUpdateProps, useState, xml } from "../../src";
 import {
-  makeTestFixture,
-  snapshotEverything,
-  nextTick,
-  useLogLifecycle,
   makeDeferred,
-  nextMicroTick,
+  makeTestFixture,
+  nextTick,
+  snapshotEverything,
+  useLogLifecycle,
 } from "../helpers";
 
 let fixture: HTMLElement;
@@ -47,9 +46,9 @@ describe("rendering semantics", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -139,11 +138,16 @@ describe("rendering semantics", () => {
     expect(childN).toBe(1);
   });
 
-  test("render with deep=true followed by render with deep=false work as expected", async () => {
+  test.only("render with deep=true followed by render with deep=false work as expected", async () => {
     class Child extends Component {
       static template = xml`child<t t-esc="env.getValue()"/>`;
       setup() {
         useLogLifecycle();
+        onRendered(() => {
+          if (value === 4) {
+            parent.state.value = "B";
+          }
+        });
       }
     }
 
@@ -173,9 +177,9 @@ describe("rendering semantics", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -184,33 +188,39 @@ describe("rendering semantics", () => {
     parent.render(true);
 
     // wait for child to be rendered, but dom not yet patched
-    await nextMicroTick();
+    // await nextMicroTick();
-    await nextMicroTick();
+    // await nextMicroTick();
-    await nextMicroTick();
+    // await nextMicroTick();
-    expect([
+    // expect([
-      "Parent:willRender",
+    //   "Parent:willRender",
-      "Child:willUpdateProps",
+    //   "Child:willUpdateProps",
-      "Parent:rendered",
+    //   "Child:willRender",
-      "Child:willRender",
+    //   "Child:rendered",
-      "Child:rendered",
+    //   "Parent:rendered",
-    ]).toBeLogged();
+    // ]).toBeLogged();
 
-    parent.state.value = "B";
+    // parent.state.value = "B";
 
     await nextTick();
+    // await nextTick();
 
-    expect(fixture.innerHTML).toBe("parentBchild4");
     expect([
       "Parent:willRender",
       "Child:willUpdateProps",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
+      "Parent:willRender",
+      "Child:willUpdateProps",
+      "Child:willRender",
+      "Child:rendered",
+      "Parent:rendered",
       "Parent:willPatch",
       "Child:willPatch",
       "Child:patched",
       "Parent:patched",
     ]).toBeLogged();
+    expect(fixture.innerHTML).toBe("parentBchild4");
   });
 
   test("props are reactive", async () => {
@@ -241,9 +251,9 @@ describe("rendering semantics", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -284,9 +294,9 @@ describe("rendering semantics", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -372,13 +382,13 @@ describe("rendering semantics", () => {
       "A:willRender",
       "B:setup",
       "B:willStart",
-      "A:rendered",
       "B:willRender",
       "C:setup",
       "C:willStart",
-      "B:rendered",
       "C:willRender",
       "C:rendered",
+      "B:rendered",
+      "A:rendered",
       "C:mounted",
       "B:mounted",
       "A:mounted",
@@ -437,13 +447,13 @@ test("force render in case of existing render", async () => {
     "A:willRender",
     "B:setup",
     "B:willStart",
-    "A:rendered",
     "B:willRender",
     "C:setup",
     "C:willStart",
-    "B:rendered",
     "C:willRender",
     "C:rendered",
+    "B:rendered",
+    "A:rendered",
     "C:mounted",
     "B:mounted",
     "A:mounted",
@@ -466,9 +476,9 @@ test("force render in case of existing render", async () => {
   expect([
     "B:willRender",
     "C:willUpdateProps",
-    "B:rendered",
     "C:willRender",
     "C:rendered",
+    "B:rendered",
     "A:willPatch",
     "B:willPatch",
     "C:willPatch",
@@ -509,9 +519,9 @@ test("children, default props and renderings", async () => {
     "Parent:willRender",
     "Child:setup",
     "Child:willStart",
-    "Parent:rendered",
     "Child:willRender",
     "Child:rendered",
+    "Parent:rendered",
     "Child:mounted",
     "Parent:mounted",
   ]).toBeLogged();

tests/components/slots.test.ts

@@ -1,5 +1,5 @@
 import { App, Component, mount, onMounted, useState, xml } from "../../src/index";
-import { children, makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
+import { children, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 
 snapshotEverything();
 let originalconsoleWarn = console.warn;
@@ -45,23 +45,6 @@ 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 {
@@ -221,12 +204,13 @@ describe("slots", () => {
       static components = { Child };
     }
 
-    let error: Error;
+    let error = null;
-    const app = new App(Parent);
+    try {
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(Parent, fixture);
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    } catch (e) {
-    await mountProm;
+      error = e;
-    expect(error!).not.toBeNull();
+    }
+    expect(error).not.toBeNull();
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 
@@ -1835,102 +1819,4 @@ describe("slots", () => {
     await nextTick();
     expect(fixture.innerHTML).toBe("<button>inc</button>[B][C][A][sub1] [sub2334]");
   });
-
-  test("slot in multiple locations", async () => {
-    class Child extends Component {
-      static template = xml`<div>child</div>`;
-    }
-
-    class Slotter extends Component {
-      static components = { Child };
-      static template = xml`
-          <t t-if="props.location === 1">
-            <p><t t-slot="default"/></p>
-          </t>
-          <t t-if="props.location === 2">
-            <t t-slot="default"/>
-          </t>
-      `;
-    }
-
-    class Parent extends Component {
-      static components = { Child, Slotter };
-      static template = xml`
-         <Slotter location="state.location">
-          hello <Child/>
-         </Slotter>`;
-      state = useState({ location: 1 });
-    }
-
-    const parent = await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe("<p> hello <div>child</div></p>");
-    parent.state.location = 2;
-    await nextTick();
-    expect(fixture.innerHTML).toBe(" hello <div>child</div>");
-  });
-
-  test("dynamic slot in multiple locations", async () => {
-    class Child extends Component {
-      static template = xml`<div>child</div>`;
-    }
-
-    class Slotter extends Component {
-      static components = { Child };
-      static template = xml`
-          <t t-if="props.location === 1">
-            <p><t t-slot="{{'coffee'}}"/></p>
-          </t>
-          <t t-if="props.location === 2">
-            <t t-slot="{{'coffee'}}"/>
-          </t>
-      `;
-    }
-
-    class Parent extends Component {
-      static components = { Child, Slotter };
-      static template = xml`
-         <Slotter location="state.location">
-          <t t-set-slot="coffee">hello <Child/></t>
-         </Slotter>`;
-      state = useState({ location: 1 });
-    }
-
-    const parent = await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe("<p>hello <div>child</div></p>");
-    parent.state.location = 2;
-    await nextTick();
-    expect(fixture.innerHTML).toBe("hello <div>child</div>");
-  });
-
-  test("slot in t-foreach locations", async () => {
-    class Child extends Component {
-      static template = xml`<div>child</div>`;
-    }
-
-    class Slotter extends Component {
-      static components = { Child };
-      static template = xml`
-          <t t-foreach="props.list" t-as="elem" t-key="elem_index">
-            <p><t t-esc="elem"/><t t-slot="default"/></p>
-          </t>
-      `;
-    }
-
-    class Parent extends Component {
-      static components = { Child, Slotter };
-      static template = xml`
-         <Slotter list="state.list">
-          hello <Child/>
-         </Slotter>`;
-      state = useState({ list: [1] });
-    }
-
-    const parent = await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe("<p>1 hello <div>child</div></p>");
-    parent.state.list.push(2);
-    await nextTick();
-    expect(fixture.innerHTML).toBe(
-      "<p>1 hello <div>child</div></p><p>2 hello <div>child</div></p>"
-    );
-  });
 });

tests/components/style_class.test.ts

@@ -1,6 +1,5 @@
-import { OwlError } from "../../src/runtime/error_handling";
+import { Component, mount, onMounted, useState, xml } from "../../src";
-import { App, Component, mount, onMounted, useState, xml } from "../../src";
+import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
-import { makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
 
 snapshotEverything();
 let fixture: HTMLElement;
@@ -343,20 +342,20 @@ describe("style and class handling", () => {
     class Child extends Component {
       static template = xml`<div t-att-class="props.class" t-esc="this.will.crash"/>`;
     }
-    class Parent extends Component {
+    class ParentWidget extends Component {
       static template = xml`<Child class="'a'"/>`;
       static components = { Child };
     }
-    let error: OwlError;
+    let error: Error;
-    const app = new App(Parent);
+    try {
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(ParentWidget, fixture);
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
-    expect(error!.cause).toBeDefined();
     const regexp =
       /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
-    expect(error!.cause.message).toMatch(regexp);
+    expect(error!.message).toMatch(regexp);
     expect(fixture.innerHTML).toBe("");
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });

tests/components/t_call.test.ts

@@ -287,32 +287,4 @@ 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

@@ -1,11 +1,5 @@
-import { App, Component, mount, onMounted, useState, xml } from "../../src/index";
+import { Component, mount, onMounted, useState, xml } from "../../src/index";
-import {
+import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
-  makeTestFixture,
-  nextAppError,
-  nextTick,
-  snapshotEverything,
-  useLogLifecycle,
-} from "../helpers";
 
 snapshotEverything();
 
@@ -321,73 +315,10 @@ describe("list of components", () => {
       `;
       static components = { Child };
     }
-
+    await expect(async () => {
-    const app = new App(Parent, { test: true });
+      await mount(Parent, fixture, { dev: true });
-    const mountProm = expect(app.mount(fixture)).rejects.toThrow(
+    }).rejects.toThrowError("Got duplicate key in t-foreach: child");
-      "Got duplicate key in t-foreach: child"
-    );
-    await expect(nextAppError(app)).resolves.toThrow("Got duplicate key in t-foreach: child");
-    await mountProm;
     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

@@ -1,36 +0,0 @@
-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/helpers.ts

@@ -19,7 +19,6 @@ import { helpers } from "../src/runtime/template_helpers";
 import { TemplateSet, globalTemplates } from "../src/runtime/template_set";
 import { BDom } from "../src/runtime/blockdom";
 import { compile } from "../src/compiler";
-import { OwlError } from "../src/runtime/error_handling";
 
 const mount = blockDom.mount;
 
@@ -222,7 +221,7 @@ export async function editInput(input: HTMLInputElement | HTMLTextAreaElement, v
 afterEach(() => {
   if (steps.length) {
     steps.splice(0);
-    throw new OwlError("Remaining steps! Should be checked by a .toBeLogged() assertion!");
+    throw new Error("Remaining steps! Should be checked by a .toBeLogged() assertion!");
   }
 });
 
@@ -261,20 +260,6 @@ expect.extend({
   },
 });
 
-export function nextAppError(app: any) {
-  const { handleError } = app;
-  return new Promise((resolve) => {
-    app.handleError = (...args: Parameters<typeof handleError>) => {
-      try {
-        handleError.call(app, ...args);
-      } catch (e: any) {
-        app.handleError = handleError;
-        resolve(e);
-      }
-    };
-  });
-}
-
 declare global {
   namespace jest {
     interface Matchers<R> {

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

@@ -155,44 +155,6 @@ 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
 ) {
@@ -553,44 +515,6 @@ 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

@@ -1,4 +1,3 @@
-import { OwlError } from "../../src/runtime/error_handling";
 import {
   App,
   Component,
@@ -12,7 +11,7 @@ import {
 } from "../../src";
 import { xml } from "../../src/";
 import { DEV_MSG } from "../../src/runtime/app";
-import { elem, makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
+import { elem, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 
 let fixture: HTMLElement;
 let originalconsoleWarn = console.warn;
@@ -269,14 +268,15 @@ describe("Portal", () => {
     }
 
     let error: Error;
-    const app = new App(Parent);
+    try {
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(Parent, fixture);
-    await expect(nextAppError(app)).resolves.toThrow("invalid portal target");
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
 
     expect(error!).toBeDefined();
     expect(error!.message).toBe("invalid portal target");
-    expect(fixture.innerHTML).toBe(``);
+    expect(fixture.innerHTML).toBe(`<div></div>`);
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 
@@ -499,7 +499,7 @@ describe("Portal", () => {
         </div>`;
       state = { error: false };
       setup() {
-        onError(({ cause }) => (error = cause));
+        onError((e) => (error = e));
       }
     }
     addOutsideDiv(fixture);
@@ -874,48 +874,6 @@ 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", () => {
@@ -1000,14 +958,14 @@ describe("Portal: Props validation", () => {
           </t>
         </div>`;
     }
-    let error: OwlError;
+    let error: Error;
-    const app = new App(Parent);
+    try {
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(Parent, fixture, { dev: true });
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
-    expect(error!.cause).toBeDefined();
+    expect(error!.message).toBe(`' ' is not a valid selector`);
-    expect(error!.cause.message).toBe(`' ' is not a valid selector`);
   });
 
   test("target must be a valid selector 2", async () => {
@@ -1020,10 +978,11 @@ describe("Portal: Props validation", () => {
         </div>`;
     }
     let error: Error;
-    const app = new App(Parent);
+    try {
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await mount(Parent, fixture, { dev: true });
-    await expect(nextAppError(app)).resolves.toThrow("invalid portal target");
+    } catch (e) {
-    await mountProm;
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
     expect(error!.message).toBe(`invalid portal target`);
   });

tests/reactivity.test.ts

@@ -10,7 +10,6 @@ import {
   toRaw,
 } from "../src";
 import { reactive, Reactive } from "../src/runtime/reactivity";
-import { batched } from "../src/runtime/utils";
 import {
   makeDeferred,
   makeTestFixture,
@@ -190,64 +189,6 @@ describe("Reactivity", () => {
     expect(n).toBe(2);
   });
 
-  test("batched: callback is called after batch of operation", async () => {
-    let n = 0;
-    const state = createReactive(
-      { a: 1, b: 2 },
-      batched(() => n++)
-    );
-    state.a = 2;
-    expect(n).toBe(0);
-    await nextMicroTick();
-    expect(n).toBe(0); // key has not be read yet
-    state.a = state.a + 5; // key is read and then modified
-    expect(n).toBe(0);
-    state.b = state.b + 5; // key is read and then modified
-    expect(n).toBe(0);
-    await nextMicroTick();
-    expect(n).toBe(1); // two operations but only one notification
-  });
-
-  test("batched: modifying the reactive in the callback doesn't break reactivity", async () => {
-    let n = 0;
-    let obj = { a: 1 };
-    const state = createReactive(
-      obj,
-      batched(() => {
-        state.a; // subscribe to a
-        state.a = 2;
-        n++;
-      })
-    );
-    expect(n).toBe(0);
-    state.a = 2;
-    expect(n).toBe(0);
-    await nextMicroTick();
-    expect(n).toBe(0); // key has not be read yet
-    state.a = state.a + 5; // key is read and then modified
-    expect(n).toBe(0);
-    await nextMicroTick();
-    expect(n).toBe(1);
-    // the write a = 2 inside the batched callback triggered another notification, wait for it
-    await nextMicroTick();
-    expect(n).toBe(2);
-    // Should now be stable as we're writing the same value again
-    await nextMicroTick();
-    expect(n).toBe(2);
-
-    // Do it again to check it's not broken
-    state.a = state.a + 5; // key is read and then modified
-    expect(n).toBe(2);
-    await nextMicroTick();
-    expect(n).toBe(3);
-    // the write a = 2 inside the batched callback triggered another notification, wait for it
-    await nextMicroTick();
-    expect(n).toBe(4);
-    // Should now be stable as we're writing the same value again
-    await nextMicroTick();
-    expect(n).toBe(4);
-  });
-
   test("setting property to same value does not trigger callback", async () => {
     let n = 0;
     const state = createReactive({ a: 1 }, () => n++);
@@ -1772,13 +1713,13 @@ describe("Reactivity: useState", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
+      "Child:willRender",
+      "Child:rendered",
       "Child:setup",
       "Child:willStart",
+      "Child:willRender",
+      "Child:rendered",
       "Parent:rendered",
-      "Child:willRender",
-      "Child:rendered",
-      "Child:willRender",
-      "Child:rendered",
       "Child:mounted",
       "Child:mounted",
       "Parent:mounted",
@@ -1826,13 +1767,13 @@ describe("Reactivity: useState", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
+      "Child:willRender",
+      "Child:rendered",
       "Child:setup",
       "Child:willStart",
+      "Child:willRender",
+      "Child:rendered",
       "Parent:rendered",
-      "Child:willRender",
-      "Child:rendered",
-      "Child:willRender",
-      "Child:rendered",
       "Child:mounted",
       "Child:mounted",
       "Parent:mounted",
@@ -1840,18 +1781,17 @@ describe("Reactivity: useState", () => {
 
     expect(fixture.innerHTML).toBe("<div><span>123</span><span>123</span></div>");
     testContext.value = 321;
-    await nextMicroTick();
+    await nextTick();
-    await nextMicroTick();
     expect([
       "Child:willRender",
       "Child:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Child:willPatch",
+      "Child:patched",
+      "Child:willPatch",
+      "Child:patched"
     ]).toBeLogged();
-    expect(fixture.innerHTML).toBe("<div><span>123</span><span>123</span></div>");
-
-    await nextTick();
-    expect(["Child:willPatch", "Child:patched", "Child:willPatch", "Child:patched"]).toBeLogged();
     expect(fixture.innerHTML).toBe("<div><span>321</span><span>321</span></div>");
   });
 
@@ -1891,17 +1831,17 @@ describe("Reactivity: useState", () => {
       "GrandFather:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:setup",
-      "Parent:willStart",
-      "GrandFather:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:setup",
+      "Parent:willStart",
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
+      "GrandFather:rendered",
       "Child:mounted",
       "Parent:mounted",
       "Child:mounted",
@@ -1909,19 +1849,18 @@ describe("Reactivity: useState", () => {
     ]).toBeLogged();
 
     testContext.value = 321;
-    await nextMicroTick();
+    await nextTick();
-    await nextMicroTick();
+    expect(fixture.innerHTML).toBe("<div><span>321</span><div><span>321</span></div></div>");
-    expect(fixture.innerHTML).toBe("<div><span>123</span><div><span>123</span></div></div>");
     expect([
       "Child:willRender",
       "Child:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Child:willPatch", 
+      "Child:patched", 
+      "Child:willPatch", 
+      "Child:patched"
     ]).toBeLogged();
-
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<div><span>321</span><div><span>321</span></div></div>");
-    expect(["Child:willPatch", "Child:patched", "Child:willPatch", "Child:patched"]).toBeLogged();
   });
 
   test("one components can subscribe twice to same context", async () => {
@@ -2103,9 +2042,9 @@ describe("Reactivity: useState", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -2222,8 +2161,7 @@ describe("Reactivity: useState", () => {
     steps.clear();
 
     delete testContext[2];
-    await nextMicroTick();
+    await nextTick();
-    await nextMicroTick();
     expect([...steps]).toEqual(["list"]);
     await nextTick();
     expect(fixture.innerHTML).toBe("<div><div>3</div> Total: 3 Count: 1</div>");

tests/utils.test.ts

@@ -1,5 +1,4 @@
-import { batched, EventBus } from "../src/runtime/utils";
+import { EventBus } from "../src/runtime/utils";
-import { nextMicroTick } from "./helpers";
 
 describe("event bus behaviour", () => {
   test("can subscribe and be notified", () => {
@@ -34,40 +33,3 @@ describe("event bus behaviour", () => {
     bus.trigger("event", "hello world");
   });
 });
-
-describe("batched", () => {
-  test("callback is called only once after operations", async () => {
-    let n = 0;
-    let fn = batched(() => n++);
-
-    expect(n).toBe(0);
-    fn();
-    fn();
-    expect(n).toBe(0);
-
-    await nextMicroTick();
-    expect(n).toBe(1);
-    await nextMicroTick();
-    expect(n).toBe(1);
-  });
-
-  test("calling batched function from within the callback is not treated as part of the original batch", async () => {
-    let n = 0;
-    let fn = batched(() => {
-      n++;
-      if (n === 1) {
-        fn();
-      }
-    });
-
-    expect(n).toBe(0);
-    fn();
-    expect(n).toBe(0);
-    await nextMicroTick(); // First batch
-    expect(n).toBe(1);
-    await nextMicroTick(); // Second batch initiated from within the callback
-    expect(n).toBe(2);
-    await nextMicroTick();
-    expect(n).toBe(2);
-  });
-});

tools/release.js

@@ -72,8 +72,10 @@ async function startRelease() {
   }
 
   // ---------------------------------------------------------------------------
-  log(`Step 3/${STEPS}: updating package.json...`);
+  log(`Step 3/${STEPS}: updating package.json, readme.md and roadmap.md...`);
   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...`);