[REL] v2.0.0

# v2.0.0

Finally the official v2.0.0 release is ready. There are no feature nor fixes since
last beta release, because it is stable.

Thank you to everyone who contributed.

## Changelog

Owl 2.0 is a large improvement over 1.0. It brings a lot of new features, improvements,
and better APIs.  The most important changes are:

- a completely overhauled slot API (in particular slot scopes, ...)
- a new reactivity system, similar to Vue. In particular, if props are equals, then
  a sub component is not updated.
- new rendering engine, based on blockdom. This makes Owl much faster
- support for fragments: a template can have an arbitrary number of roots

A detailed changelog can be found [here](CHANGELOG.md).

README.md

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

doc/learning/tutorial_todoapp.md

@@ -770,10 +770,11 @@ 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>
-  </head>
-  <body></body>
+  </body>
 </html>
 ```
 

doc/reference/hooks.md

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

package.json

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

rollup.config.js

@@ -6,6 +6,14 @@ 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()}';
@@ -23,19 +31,19 @@ switch (process.argv[4]) {
   case "runtime":
     input = "src/runtime/index.ts";
     output = [
-      getConfigForFormat('esm', addSuffix(pkg.module,  'runtime'), outro),
-      getConfigForFormat('cjs', addSuffix(pkg.main,  'runtime'), outro),
-      getConfigForFormat('iife', addSuffix(pkg.browser,  'runtime'), outro),
-      getConfigForFormat('iife', addSuffix(pkg.browser,  'runtime'), outro, true),
+      getConfigForFormat('esm', addSuffix(ES_FILENAME,  'runtime'), outro),
+      getConfigForFormat('cjs', addSuffix(CJS_FILENAME,  'runtime'), outro),
+      getConfigForFormat('iife', addSuffix(IIFE_FILENAME,  'runtime'), outro),
+      getConfigForFormat('iife', addSuffix(IIFE_FILENAME,  'runtime'), outro, true),
     ]
     break;
   default:
     input = "src/index.ts",
     output = [
-      getConfigForFormat('esm', pkg.module, outro),
-      getConfigForFormat('cjs', pkg.main, outro),
-      getConfigForFormat('iife', pkg.browser, outro),
-      getConfigForFormat('iife', pkg.browser, outro, true),
+      getConfigForFormat('esm', ES_FILENAME, outro),
+      getConfigForFormat('cjs', CJS_FILENAME, outro),
+      getConfigForFormat('iife', IIFE_FILENAME, outro),
+      getConfigForFormat('iife', IIFE_FILENAME, outro, true),
     ]
   }
 

src/compiler/code_generator.ts

@@ -1,3 +1,4 @@
+import { isProp } from "../runtime/blockdom/attributes";
 import {
   compileExpr,
   compileExprToArray,
@@ -22,13 +23,14 @@ import {
   ASTTif,
   ASTTKey,
   ASTTOut,
-  ASTTSet,
-  ASTTranslation,
-  ASTType,
   ASTTPortal,
-  EventHandlers,
+  ASTTranslation,
+  ASTTSet,
+  ASTType,
   Attrs,
+  EventHandlers,
 } from "./parser";
+import { OwlError } from "../runtime/error_handling";
 
 type BlockType = "block" | "text" | "multi" | "list" | "html" | "comment";
 
@@ -143,7 +145,7 @@ interface Context {
   ctxVar?: string;
 }
 
-function createContext(parentCtx: Context, params?: Partial<Context>) {
+function createContext(parentCtx: Context, params?: Partial<Context>): Context {
   return Object.assign(
     {
       block: null,
@@ -212,6 +214,14 @@ class CodeTarget {
     result.push(`}`);
     return result.join("\n  ");
   }
+
+  currentKey(ctx: Context) {
+    let key = this.loopLevel ? `key${this.loopLevel}` : "key";
+    if (ctx.tKeyExpr) {
+      key = `${ctx.tKeyExpr} + ${key}`;
+    }
+    return key;
+  }
 }
 
 const TRANSLATABLE_ATTRS = ["label", "title", "placeholder", "alt"];
@@ -230,6 +240,7 @@ 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) {
@@ -265,10 +276,7 @@ export class CodeGenerator {
       tKeyExpr: null,
     });
     // define blocks and utility functions
-    let mainCode = [
-      `  "use strict";`,
-      `let { text, createBlock, list, multi, html, toggler, comment } = bdom;`,
-    ];
+    let mainCode = [`  let { text, createBlock, list, multi, html, toggler, comment } = bdom;`];
     if (this.helpers.size) {
       mainCode.push(`let { ${[...this.helpers].join(", ")} } = helpers;`);
     }
@@ -337,8 +345,8 @@ export class CodeGenerator {
     this.addLine(`const ${varName} = ${expr};`);
   }
 
-  insertAnchor(block: BlockDescription) {
-    const tag = `block-child-${block.children.length}`;
+  insertAnchor(block: BlockDescription, index: number = block.children.length) {
+    const tag = `block-child-${index}`;
     const anchor = xmlDoc.createElement(tag);
     block.insert(anchor);
   }
@@ -365,19 +373,15 @@ export class CodeGenerator {
 
   insertBlock(expression: string, block: BlockDescription, ctx: Context): void {
     let blockExpr = block.generateExpr(expression);
-    const tKeyExpr = ctx.tKeyExpr;
     if (block.parentVar) {
-      let keyArg = `key${this.target.loopLevel}`;
-      if (tKeyExpr) {
-        keyArg = `${tKeyExpr} + ${keyArg}`;
-      }
+      let key = this.target.currentKey(ctx);
       this.helpers.add("withKey");
-      this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${keyArg});`);
+      this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${key});`);
       return;
     }
 
-    if (tKeyExpr) {
-      blockExpr = `toggler(${tKeyExpr}, ${blockExpr})`;
+    if (ctx.tKeyExpr) {
+      blockExpr = `toggler(${ctx.tKeyExpr}, ${blockExpr})`;
     }
 
     if (block.isRoot && !ctx.preventRoot) {
@@ -424,78 +428,66 @@ export class CodeGenerator {
       .join("");
   }
 
-  compileAST(ast: AST, ctx: Context) {
+  /**
+   * @returns the newly created block name, if any
+   */
+  compileAST(ast: AST, ctx: Context): string | null {
     switch (ast.type) {
       case ASTType.Comment:
-        this.compileComment(ast, ctx);
-        break;
+        return this.compileComment(ast, ctx);
       case ASTType.Text:
-        this.compileText(ast, ctx);
-        break;
+        return this.compileText(ast, ctx);
       case ASTType.DomNode:
-        this.compileTDomNode(ast, ctx);
-        break;
+        return this.compileTDomNode(ast, ctx);
       case ASTType.TEsc:
-        this.compileTEsc(ast, ctx);
-        break;
+        return this.compileTEsc(ast, ctx);
       case ASTType.TOut:
-        this.compileTOut(ast, ctx);
-        break;
+        return this.compileTOut(ast, ctx);
       case ASTType.TIf:
-        this.compileTIf(ast, ctx);
-        break;
+        return this.compileTIf(ast, ctx);
       case ASTType.TForEach:
-        this.compileTForeach(ast, ctx);
-        break;
+        return this.compileTForeach(ast, ctx);
       case ASTType.TKey:
-        this.compileTKey(ast, ctx);
-        break;
+        return this.compileTKey(ast, ctx);
       case ASTType.Multi:
-        this.compileMulti(ast, ctx);
-        break;
+        return this.compileMulti(ast, ctx);
       case ASTType.TCall:
-        this.compileTCall(ast, ctx);
-        break;
+        return this.compileTCall(ast, ctx);
       case ASTType.TCallBlock:
-        this.compileTCallBlock(ast, ctx);
-        break;
+        return this.compileTCallBlock(ast, ctx);
       case ASTType.TSet:
-        this.compileTSet(ast, ctx);
-        break;
+        return this.compileTSet(ast, ctx);
       case ASTType.TComponent:
-        this.compileComponent(ast, ctx);
-        break;
+        return this.compileComponent(ast, ctx);
       case ASTType.TDebug:
-        this.compileDebug(ast, ctx);
-        break;
+        return this.compileDebug(ast, ctx);
       case ASTType.TLog:
-        this.compileLog(ast, ctx);
-        break;
+        return this.compileLog(ast, ctx);
       case ASTType.TSlot:
-        this.compileTSlot(ast, ctx);
-        break;
+        return this.compileTSlot(ast, ctx);
       case ASTType.TTranslation:
-        this.compileTTranslation(ast, ctx);
-        break;
+        return this.compileTTranslation(ast, ctx);
       case ASTType.TPortal:
-        this.compileTPortal(ast, ctx);
+        return this.compileTPortal(ast, ctx);
     }
   }
 
-  compileDebug(ast: ASTDebug, ctx: Context) {
+  compileDebug(ast: ASTDebug, ctx: Context): string | null {
     this.addLine(`debugger;`);
     if (ast.content) {
-      this.compileAST(ast.content, ctx);
+      return this.compileAST(ast.content, ctx);
     }
+    return null;
   }
 
-  compileLog(ast: ASTLog, ctx: Context) {
+  compileLog(ast: ASTLog, ctx: Context): string | null {
     this.addLine(`console.log(${compileExpr(ast.expr)});`);
     if (ast.content) {
-      this.compileAST(ast.content, ctx);
+      return this.compileAST(ast.content, ctx);
     }
+    return null;
   }
-  compileComment(ast: ASTComment, ctx: Context) {
+  compileComment(ast: ASTComment, ctx: Context): string {
     let { block, forceNewBlock } = ctx;
     const isNewBlock = !block || forceNewBlock;
     if (isNewBlock) {
@@ -508,9 +500,10 @@ export class CodeGenerator {
       const text = xmlDoc.createComment(ast.value);
       block!.insert(text);
     }
+    return block!.varName;
   }
 
-  compileText(ast: ASTText, ctx: Context) {
+  compileText(ast: ASTText, ctx: Context): string {
     let { block, forceNewBlock } = ctx;
 
     let value = ast.value;
@@ -529,6 +522,7 @@ export class CodeGenerator {
       const createFn = ast.type === ASTType.Text ? xmlDoc.createTextNode : xmlDoc.createComment;
       block.insert(createFn.call(xmlDoc, value));
     }
+    return block.varName;
   }
 
   generateHandlerCode(rawEvent: string, handler: string): string {
@@ -537,7 +531,7 @@ export class CodeGenerator {
       .slice(1)
       .map((m) => {
         if (!MODS.has(m)) {
-          throw new Error(`Unknown event modifier: '${m}'`);
+          throw new OwlError(`Unknown event modifier: '${m}'`);
         }
         return `"${m}"`;
       });
@@ -548,7 +542,7 @@ export class CodeGenerator {
     return `[${modifiersCode}${this.captureExpression(handler)}, ctx]`;
   }
 
-  compileTDomNode(ast: ASTDomNode, ctx: Context) {
+  compileTDomNode(ast: ASTDomNode, ctx: Context): string {
     let { block, forceNewBlock } = ctx;
     const isNewBlock = !block || forceNewBlock || ast.dynamicTag !== null || ast.ns;
     let codeIdx = this.target.code.length;
@@ -581,13 +575,22 @@ 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 {
-          attrName = key.slice(6);
-          attrs[`block-attribute-${idx}`] = attrName;
+          attrs[`block-attribute-${idx}`] = attrName!;
         }
       } else if (this.translatableAttributes.includes(key)) {
         attrs[key] = this.translateFn(ast.attrs[key]);
@@ -695,7 +698,7 @@ export class CodeGenerator {
       const children = ast.content;
       for (let i = 0; i < children.length; i++) {
         const child = ast.content[i];
-        const subCtx: Context = createContext(ctx, {
+        const subCtx = createContext(ctx, {
           block,
           index: block!.childNumber,
           forceNewBlock: false,
@@ -726,9 +729,10 @@ export class CodeGenerator {
         this.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
       }
     }
+    return block!.varName;
   }
 
-  compileTEsc(ast: ASTTEsc, ctx: Context) {
+  compileTEsc(ast: ASTTEsc, ctx: Context): string {
     let { block, forceNewBlock } = ctx;
     let expr: string;
     if (ast.expr === "0") {
@@ -749,29 +753,47 @@ export class CodeGenerator {
       const text = xmlDoc.createElement(`block-text-${idx}`);
       block.insert(text);
     }
+    return block.varName;
   }
 
-  compileTOut(ast: ASTTOut, ctx: Context) {
+  compileTOut(ast: ASTTOut, ctx: Context): string {
     let { block } = ctx;
     if (block) {
       this.insertAnchor(block);
     }
     block = this.createBlock(block, "html", ctx);
-    this.helpers.add(ast.expr === "0" ? "zero" : "safeOutput");
-    let expr = ast.expr === "0" ? "ctx[zero]" : `safeOutput(${compileExpr(ast.expr)})`;
-    if (ast.body) {
-      const nextId = BlockDescription.nextBlockId;
-      const subCtx: Context = createContext(ctx);
+    let blockStr;
+    if (ast.expr === "0") {
+      this.helpers.add("zero");
+      blockStr = `ctx[zero]`;
+    } else if (ast.body) {
+      let bodyValue = null;
+      bodyValue = BlockDescription.nextBlockId;
+      const subCtx = createContext(ctx);
       this.compileAST({ type: ASTType.Multi, content: ast.body }, subCtx);
-      this.helpers.add("withDefault");
-      expr = `withDefault(${expr}, b${nextId})`;
+      this.helpers.add("safeOutput");
+      blockStr = `safeOutput(${compileExpr(ast.expr)}, b${bodyValue})`;
+    } else {
+      this.helpers.add("safeOutput");
+      blockStr = `safeOutput(${compileExpr(ast.expr)})`;
     }
-    this.insertBlock(`${expr}`, block, ctx);
+    this.insertBlock(blockStr, block, ctx);
+    return block.varName;
   }
 
-  compileTIf(ast: ASTTif, ctx: Context, nextNode?: ASTDomNode) {
-    let { block, forceNewBlock, index } = ctx;
-    let currentIndex = index;
+  compileTIfBranch(content: AST, block: BlockDescription, ctx: Context) {
+    this.target.indentLevel++;
+    let childN = block.children.length;
+    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) {
@@ -781,28 +803,16 @@ export class CodeGenerator {
       block = this.createBlock(block, "multi", ctx);
     }
     this.addLine(`if (${compileExpr(ast.condition)}) {`);
-    this.target.indentLevel++;
-    this.insertAnchor(block!);
-    const subCtx: Context = createContext(ctx, { block, index: currentIndex });
-    this.compileAST(ast.content, subCtx);
-    this.target.indentLevel--;
+    this.compileTIfBranch(ast.content, block, ctx);
     if (ast.tElif) {
       for (let clause of ast.tElif) {
         this.addLine(`} else if (${compileExpr(clause.condition)}) {`);
-        this.target.indentLevel++;
-        this.insertAnchor(block);
-        const subCtx: Context = createContext(ctx, { block, index: currentIndex });
-        this.compileAST(clause.content, subCtx);
-        this.target.indentLevel--;
+        this.compileTIfBranch(clause.content, block, ctx);
       }
     }
     if (ast.tElse) {
       this.addLine(`} else {`);
-      this.target.indentLevel++;
-      this.insertAnchor(block);
-      const subCtx: Context = createContext(ctx, { block, index: currentIndex });
-      this.compileAST(ast.tElse, subCtx);
-      this.target.indentLevel--;
+      this.compileTIfBranch(ast.tElse, block, ctx);
     }
     this.addLine("}");
     if (isNewBlock) {
@@ -825,9 +835,10 @@ export class CodeGenerator {
       const args = block!.children.map((c) => c.varName).join(", ");
       this.insertBlock(`multi([${args}])`, block!, ctx)!;
     }
+    return block.varName;
   }
 
-  compileTForeach(ast: ASTTForEach, ctx: Context) {
+  compileTForeach(ast: ASTTForEach, ctx: Context): string {
     let { block } = ctx;
     if (block) {
       this.insertAnchor(block);
@@ -864,8 +875,9 @@ 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(key${this.target.loopLevel})) { throw new Error(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`
+        `if (keys${block.id}.has(key${this.target.loopLevel})) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`
       );
       this.addLine(`keys${block.id}.add(key${this.target.loopLevel});`);
     }
@@ -888,7 +900,7 @@ export class CodeGenerator {
       this.addLine("}");
     }
 
-    const subCtx: Context = createContext(ctx, { block, index: loopVar });
+    const subCtx = createContext(ctx, { block, index: loopVar });
     this.compileAST(ast.body, subCtx);
     if (ast.memo) {
       this.addLine(
@@ -904,9 +916,10 @@ export class CodeGenerator {
       this.addLine(`ctx = ctx.__proto__;`);
     }
     this.insertBlock("l", block, ctx);
+    return block.varName;
   }
 
-  compileTKey(ast: ASTTKey, ctx: Context) {
+  compileTKey(ast: ASTTKey, ctx: Context): string | null {
     const tKeyExpr = generateId("tKey_");
     this.define(tKeyExpr, compileExpr(ast.expr));
     ctx = createContext(ctx, {
@@ -914,20 +927,22 @@ export class CodeGenerator {
       block: ctx.block,
       index: ctx.index,
     });
-    this.compileAST(ast.content, ctx);
+    return this.compileAST(ast.content, ctx);
   }
 
-  compileMulti(ast: ASTMulti, ctx: Context) {
+  compileMulti(ast: ASTMulti, ctx: Context): string | null {
     let { block, forceNewBlock } = ctx;
     const isNewBlock = !block || forceNewBlock;
     let codeIdx = this.target.code.length;
     if (isNewBlock) {
       const n = ast.content.filter((c) => c.type !== ASTType.TSet).length;
+      let result: string | null = null;
       if (n <= 1) {
         for (let child of ast.content) {
-          this.compileAST(child, ctx);
+          const blockName = this.compileAST(child, ctx);
+          result = result || blockName;
         }
-        return;
+        return result;
       }
       block = this.createBlock(block, "multi", ctx);
     }
@@ -935,7 +950,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: Context = createContext(ctx, {
+      const subCtx = createContext(ctx, {
         block,
         index,
         forceNewBlock: !isTSet,
@@ -967,9 +982,10 @@ export class CodeGenerator {
       const args = block!.children.map((c) => c.varName).join(", ");
       this.insertBlock(`multi([${args}])`, block!, ctx)!;
     }
+    return block!.varName;
   }
 
-  compileTCall(ast: ASTTCall, ctx: Context) {
+  compileTCall(ast: ASTTCall, ctx: Context): string {
     let { block, forceNewBlock } = ctx;
     let ctxVar = ctx.ctxVar || "ctx";
     if (ast.context) {
@@ -980,12 +996,11 @@ export class CodeGenerator {
       this.addLine(`${ctxVar} = Object.create(${ctxVar});`);
       this.addLine(`${ctxVar}[isBoundary] = 1;`);
       this.helpers.add("isBoundary");
-      const nextId = BlockDescription.nextBlockId;
-      const subCtx: Context = createContext(ctx, { preventRoot: true, ctxVar });
-      this.compileAST({ type: ASTType.Multi, content: ast.body }, subCtx);
-      if (nextId !== BlockDescription.nextBlockId) {
+      const subCtx = createContext(ctx, { preventRoot: true, ctxVar });
+      const bl = this.compileMulti({ type: ASTType.Multi, content: ast.body }, subCtx);
+      if (bl) {
         this.helpers.add("zero");
-        this.addLine(`${ctxVar}[zero] = b${nextId};`);
+        this.addLine(`${ctxVar}[zero] = ${bl};`);
       }
     }
     const isDynamic = INTERP_REGEXP.test(ast.name);
@@ -1019,9 +1034,10 @@ export class CodeGenerator {
     if (ast.body && !ctx.isLast) {
       this.addLine(`${ctxVar} = ${ctxVar}.__proto__;`);
     }
+    return block.varName;
   }
 
-  compileTCallBlock(ast: ASTTCallBlock, ctx: Context) {
+  compileTCallBlock(ast: ASTTCallBlock, ctx: Context): string {
     let { block, forceNewBlock } = ctx;
     if (block) {
       if (!forceNewBlock) {
@@ -1030,9 +1046,10 @@ export class CodeGenerator {
     }
     block = this.createBlock(block, "multi", ctx);
     this.insertBlock(compileExpr(ast.name), block, { ...ctx, forceNewBlock: !block });
+    return block.varName;
   }
 
-  compileTSet(ast: ASTTSet, ctx: Context) {
+  compileTSet(ast: ASTTSet, ctx: Context): null {
     this.target.shouldProtectScope = true;
     this.helpers.add("isBoundary").add("withDefault");
     const expr = ast.value ? compileExpr(ast.value || "") : "null";
@@ -1040,7 +1057,8 @@ export class CodeGenerator {
       this.helpers.add("LazyValue");
       const bodyAst: AST = { type: ASTType.Multi, content: ast.body };
       const name = this.compileInNewTarget("value", bodyAst, ctx);
-      let value = `new LazyValue(${name}, ctx, this, node)`;
+      let key = this.target.currentKey(ctx);
+      let value = `new LazyValue(${name}, ctx, this, node, ${key})`;
       value = ast.value ? (value ? `withDefault(${expr}, ${value})` : expr) : value;
       this.addLine(`ctx[\`${ast.name}\`] = ${value};`);
     } else {
@@ -1057,6 +1075,7 @@ export class CodeGenerator {
       this.helpers.add("setContextValue");
       this.addLine(`setContextValue(${ctx.ctxVar || "ctx"}, "${ast.name}", ${value});`);
     }
+    return null;
   }
 
   generateComponentKey() {
@@ -1087,7 +1106,7 @@ export class CodeGenerator {
         name = _name;
         value = `bind(ctx, ${value || undefined})`;
       } else {
-        throw new Error("Invalid prop suffix");
+        throw new OwlError("Invalid prop suffix");
       }
     }
     name = /^[a-z_]+$/i.test(name) ? name : `'${name}'`;
@@ -1108,7 +1127,7 @@ export class CodeGenerator {
     return propString;
   }
 
-  compileComponent(ast: ASTComponent, ctx: Context) {
+  compileComponent(ast: ASTComponent, ctx: Context): string {
     let { block } = ctx;
     // props
     const hasSlotsProp = "slots" in (ast.props || {});
@@ -1174,7 +1193,7 @@ export class CodeGenerator {
     }
 
     if (this.dev) {
-      this.addLine(`helpers.validateProps(${expr}, ${propVar!}, ctx);`);
+      this.addLine(`helpers.validateProps(${expr}, ${propVar!}, this);`);
     }
 
     if (block && (ctx.forceNewBlock === false || ctx.tKeyExpr)) {
@@ -1208,6 +1227,7 @@ export class CodeGenerator {
 
     block = this.createBlock(block, "multi", ctx);
     this.insertBlock(blockExpr, block, ctx);
+    return block.varName;
   }
 
   wrapWithEventCatcher(expr: string, on: EventHandlers): string {
@@ -1226,34 +1246,43 @@ export class CodeGenerator {
     return `${name}(${expr}, [${handlers.join(",")}])`;
   }
 
-  compileTSlot(ast: ASTSlot, ctx: Context) {
+  compileTSlot(ast: ASTSlot, ctx: Context): string {
     this.helpers.add("callSlot");
     let { block } = ctx;
     let blockString: string;
     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
@@ -1266,14 +1295,16 @@ export class CodeGenerator {
     }
     block = this.createBlock(block, "multi", ctx);
     this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
+    return block.varName;
   }
 
-  compileTTranslation(ast: ASTTranslation, ctx: Context) {
+  compileTTranslation(ast: ASTTranslation, ctx: Context): string | null {
     if (ast.content) {
-      this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
+      return this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
     }
+    return null;
   }
-  compileTPortal(ast: ASTTPortal, ctx: Context) {
+  compileTPortal(ast: ASTTPortal, ctx: Context): string {
     if (!this.staticDefs.find((d) => d.id === "Portal")) {
       this.staticDefs.push({ id: "Portal", expr: `app.Portal` });
     }
@@ -1300,5 +1331,6 @@ 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,3 +1,5 @@
+import { OwlError } from "../runtime/error_handling";
+
 /**
  * Owl QWeb Expression Parser
  *
@@ -106,14 +108,14 @@ let tokenizeString: Tokenizer = function (expr) {
       i++;
       cur = expr[i];
       if (!cur) {
-        throw new Error("Invalid expression");
+        throw new OwlError("Invalid expression");
       }
       s += cur;
     }
     i++;
   }
   if (expr[i] !== start) {
-    throw new Error("Invalid expression");
+    throw new OwlError("Invalid expression");
   }
   s += start;
   if (start === "`") {
@@ -223,7 +225,7 @@ export function tokenize(expr: string): Token[] {
     error = e; // Silence all errors and throw a generic error below
   }
   if (current.length || error) {
-    throw new Error(`Tokenizer error: could not tokenize \`${expr}\``);
+    throw new OwlError(`Tokenizer error: could not tokenize \`${expr}\``);
   }
   return result;
 }

src/compiler/parser.ts

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

src/runtime/app.ts

@@ -1,12 +1,12 @@
 import { Component, ComponentConstructor, Props } from "./component";
 import { ComponentNode } from "./component_node";
-import { nodeErrorHandlers } from "./error_handling";
+import { nodeErrorHandlers, OwlError } from "./error_handling";
 import { Fiber, MountOptions } from "./fibers";
 import { Scheduler } from "./scheduler";
-import { STATUS } from "./status";
 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,9 +95,7 @@ export class App<
         nodeErrorHandlers.set(node, handlers);
       }
       handlers.unshift((e) => {
-        if (isResolved) {
-          console.error(e);
-        } else {
+        if (!isResolved) {
           reject(e);
         }
         throw e;
@@ -141,10 +139,7 @@ export class App<
     return (props: P, key: string, ctx: ComponentNode, parent: any, C: any) => {
       let children = ctx.children;
       let node: any = children[key];
-      if (
-        node &&
-        (node.status === STATUS.DESTROYED || (isDynamic && node.component.constructor !== C))
-      ) {
+      if (isDynamic && node && node.component.constructor !== C) {
         node = undefined;
       }
       const parentFiber = ctx.fiber!;
@@ -158,9 +153,9 @@ export class App<
         if (isStatic) {
           C = parent.constructor.components[name as any];
           if (!C) {
-            throw new Error(`Cannot find the definition of component "${name}"`);
+            throw new OwlError(`Cannot find the definition of component "${name}"`);
           } else if (!(C.prototype instanceof Component)) {
-            throw new Error(
+            throw new OwlError(
               `"${name}" is not a Component. It must inherit from the Component class`
             );
           }
@@ -173,6 +168,10 @@ 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 || "";
+    (this as any)[name] = value === 0 ? 0 : value ? value.valueOf() : "";
   };
 }
 

src/runtime/blockdom/block_compiler.ts

@@ -1,3 +1,4 @@
+import { OwlError } from "../error_handling";
 import {
   attrsSetter,
   attrsUpdater,
@@ -156,6 +157,15 @@ function buildTree(
           : document.createElement(tagName);
       }
       if (el instanceof Element) {
+        if (!domParentTree) {
+          // some html elements may have side effects when setting their attributes.
+          // For example, setting the src attribute of an <img/> will trigger a
+          // request to get the corresponding image. This is something that we
+          // don't want at compile time. We avoid that by putting the content of
+          // the block in a <template/> element
+          const fragment = document.createElement("template").content;
+          fragment.appendChild(el);
+        }
         for (let i = 0; i < attrs.length; i++) {
           const attrName = attrs[i].name;
           const attrValue = attrs[i].value;
@@ -245,7 +255,7 @@ function buildTree(
       };
     }
   }
-  throw new Error("boom");
+  throw new OwlError("boom");
 }
 
 function addRef(tree: IntermediateTree) {

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;
-    if (!currentTarget || !document.contains(currentTarget as HTMLElement)) return;
+    const currentTarget = ev.currentTarget as HTMLElement;
+    if (!currentTarget || !currentTarget.ownerDocument.contains(currentTarget)) return;
     const data = (currentTarget as any)[eventKey];
     if (!data) return;
     config.mainEventHandler(data, ev, currentTarget);

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, handleError } from "./error_handling";
+import { fibersInError, OwlError } from "./error_handling";
 import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
 import {
   clearReactivesForCallback,
@@ -18,7 +18,7 @@ let currentNode: ComponentNode | null = null;
 
 export function getCurrent(): ComponentNode {
   if (!currentNode) {
-    throw new Error("No active component (a hook function should only be called in 'setup')");
+    throw new OwlError("No active component (a hook function should only be called in 'setup')");
   }
   return currentNode;
 }
@@ -83,7 +83,6 @@ 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 = {};
@@ -108,7 +107,6 @@ 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) {
@@ -143,7 +141,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     try {
       await Promise.all(this.willStart.map((f) => f.call(component)));
     } catch (e) {
-      handleError({ node: this, error: e });
+      this.app.handleError({ node: this, error: e });
       return;
     }
     if (this.status === STATUS.NEW && this.fiber === fiber) {
@@ -221,7 +219,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
           cb.call(component);
         }
       } catch (e) {
-        handleError({ error: e, node: this });
+        this.app.handleError({ error: e, node: this });
       }
     }
     this.status = STATUS.DESTROYED;

src/runtime/error_handling.ts

@@ -1,6 +1,11 @@
 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();
@@ -37,7 +42,14 @@ function _handleError(node: ComponentNode | null, error: any): boolean {
 
 type ErrorParams = { error: any } & ({ node: ComponentNode } | { fiber: Fiber });
 export function handleError(params: ErrorParams) {
-  const error = params.error;
+  let { error } = params;
+  // 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!;
 
@@ -59,5 +71,6 @@ export function handleError(params: ErrorParams) {
     } catch (e) {
       console.error(e);
     }
+    throw error;
   }
 }

src/runtime/event_handling.ts

@@ -1,5 +1,6 @@
 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);
@@ -33,7 +34,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 Error(`Invalid handler (expected a function, received: '${handler}')`);
+      throw new OwlError(`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, handleError } from "./error_handling";
+import { fibersInError, OwlError } from "./error_handling";
 import { STATUS } from "./status";
 
 export function makeChildFiber(node: ComponentNode, parent: Fiber): Fiber {
@@ -43,7 +43,7 @@ export function makeRootFiber(node: ComponentNode): Fiber {
 }
 
 function throwOnRender() {
-  throw new Error("Attempted to render cancelled fiber");
+  throw new OwlError("Attempted to render cancelled fiber");
 }
 
 /**
@@ -56,6 +56,7 @@ function cancelFibers(fibers: Fiber[]): number {
     fiber.render = throwOnRender;
     if (node.status === STATUS.NEW) {
       node.destroy();
+      delete node.parent!.children[node.parentKey!];
     }
     node.fiber = null;
     if (fiber.bdom) {
@@ -129,7 +130,7 @@ export class Fiber {
         (this.bdom as any) = true;
         this.bdom = node.renderFn();
       } catch (e) {
-        handleError({ node, error: e });
+        node.app.handleError({ node, error: e });
       }
       root.setCounter(root.counter - 1);
     }
@@ -194,7 +195,7 @@ export class RootFiber extends Fiber {
       }
     } catch (e) {
       this.locked = false;
-      handleError({ fiber: current || this, error: e });
+      node.app.handleError({ fiber: current || this, error: e });
     }
   }
 
@@ -258,7 +259,7 @@ export class MountFiber extends RootFiber {
         }
       }
     } catch (e) {
-      handleError({ fiber: current as Fiber, error: e });
+      this.node.app.handleError({ fiber: current as Fiber, error: e });
     }
   }
 }

src/runtime/index.ts

@@ -36,6 +36,7 @@ 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";
@@ -54,5 +55,6 @@ export {
   onError,
 } from "./lifecycle_hooks";
 export { validate } from "./validation";
+export { OwlError } from "./error_handling";
 
 export const __info__ = {};

src/runtime/lifecycle_hooks.ts

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

src/runtime/portal.ts

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

src/runtime/reactivity.ts

@@ -1,4 +1,5 @@
 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");
@@ -197,7 +198,7 @@ export function reactive<T extends Target>(
   callback: Callback = () => {}
 ): Reactive<T> | NonReactive<T> {
   if (!canBeMadeReactive(target)) {
-    throw new Error(`Cannot make the given value reactive`);
+    throw new OwlError(`Cannot make the given value reactive`);
   }
   if (SKIP in target) {
     return target as NonReactive<T>;

src/runtime/template_helpers.ts

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

src/runtime/template_set.ts

@@ -3,6 +3,7 @@ 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 };
 
@@ -31,7 +32,7 @@ function parseXML(xml: string): Document {
         }
       }
     }
-    throw new Error(msg);
+    throw new OwlError(msg);
   }
   return doc;
 }
@@ -76,7 +77,7 @@ export class TemplateSet {
       if (currentAsString === newAsString) {
         return;
       }
-      throw new Error(`Template ${name} already defined with different content`);
+      throw new OwlError(`Template ${name} already defined with different content`);
     }
     this.rawTemplates[name] = template;
   }
@@ -102,7 +103,7 @@ export class TemplateSet {
           const componentName = getCurrent().component.constructor.name;
           extraInfo = ` (for component "${componentName}")`;
         } catch {}
-        throw new Error(`Missing template: "${name}"${extraInfo}`);
+        throw new OwlError(`Missing template: "${name}"${extraInfo}`);
       }
       const isFn = typeof rawTemplate === "function" && !(rawTemplate instanceof Element);
       const templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate);
@@ -119,7 +120,7 @@ export class TemplateSet {
   }
 
   _compileTemplate(name: string, template: string | Element): ReturnType<typeof compile> {
-    throw new Error(`Unable to compile a template. Please use owl full build instead`);
+    throw new OwlError(`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,3 +1,4 @@
+import { OwlError } from "./error_handling";
 export type Callback = () => void;
 
 /**
@@ -27,12 +28,18 @@ export function batched(callback: Callback): Callback {
 }
 
 export function validateTarget(target: HTMLElement) {
-  if (!(target instanceof HTMLElement)) {
-    throw new Error("Cannot mount component: the target is not a valid DOM element");
-  }
-  if (!document.body.contains(target)) {
-    throw new Error("Cannot mount a component on a detached dom node");
+  // Get the document and HTMLElement corresponding to the target to allow mounting in iframes
+  const document = target && target.ownerDocument;
+  if (document) {
+    const HTMLElement = document.defaultView!.HTMLElement;
+    if (target instanceof HTMLElement) {
+      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 {
@@ -54,7 +61,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 Error("Error while fetching xml templates");
+    throw new OwlError("Error while fetching xml templates");
   }
   return await result.text();
 }

src/runtime/validation.ts

@@ -1,3 +1,5 @@
+import { OwlError } from "./error_handling";
+
 type BaseType =
   | typeof String
   | typeof Boolean
@@ -70,7 +72,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 Error("Invalid object: " + errors.join(", "));
+    throw new OwlError("Invalid object: " + errors.join(", "));
   }
 }
 

tests/__snapshots__/reactivity.test.ts.snap

@@ -49,7 +49,6 @@ exports[`Reactivity: useState concurrent renderings 3`] = `
 exports[`Reactivity: useState destroyed component before being mounted is inactive 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -68,7 +67,6 @@ exports[`Reactivity: useState destroyed component before being mounted is inacti
 exports[`Reactivity: useState destroyed component before being mounted is inactive 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -83,7 +81,6 @@ exports[`Reactivity: useState destroyed component before being mounted is inacti
 exports[`Reactivity: useState destroyed component is inactive 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -102,7 +99,6 @@ exports[`Reactivity: useState destroyed component is inactive 1`] = `
 exports[`Reactivity: useState destroyed component is inactive 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -117,7 +113,6 @@ exports[`Reactivity: useState destroyed component is inactive 2`] = `
 exports[`Reactivity: useState one components can subscribe twice to same context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
@@ -133,7 +128,6 @@ exports[`Reactivity: useState one components can subscribe twice to same context
 exports[`Reactivity: useState parent and children subscribed to same context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -150,7 +144,6 @@ exports[`Reactivity: useState parent and children subscribed to same context 1`]
 exports[`Reactivity: useState parent and children subscribed to same context 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -228,7 +221,6 @@ exports[`Reactivity: useState several nodes on different level use same context
 exports[`Reactivity: useState two components are updated in parallel 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   const comp2 = app.createComponent(\`Child\`, true, false, false, true);
@@ -246,7 +238,6 @@ exports[`Reactivity: useState two components are updated in parallel 1`] = `
 exports[`Reactivity: useState two components are updated in parallel 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -261,7 +252,6 @@ exports[`Reactivity: useState two components are updated in parallel 2`] = `
 exports[`Reactivity: useState two components can subscribe to same context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   const comp2 = app.createComponent(\`Child\`, true, false, false, true);
@@ -279,7 +269,6 @@ exports[`Reactivity: useState two components can subscribe to same context 1`] =
 exports[`Reactivity: useState two components can subscribe to same context 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -294,7 +283,6 @@ exports[`Reactivity: useState two components can subscribe to same context 2`] =
 exports[`Reactivity: useState two independent components on different levels are updated in parallel 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   const comp2 = app.createComponent(\`Parent\`, true, false, false, true);
@@ -312,7 +300,6 @@ exports[`Reactivity: useState two independent components on different levels are
 exports[`Reactivity: useState two independent components on different levels are updated in parallel 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -327,7 +314,6 @@ exports[`Reactivity: useState two independent components on different levels are
 exports[`Reactivity: useState two independent components on different levels are updated in parallel 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -343,7 +329,6 @@ exports[`Reactivity: useState two independent components on different levels are
 exports[`Reactivity: useState useContext=useState hook is reactive, for one component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -358,7 +343,6 @@ exports[`Reactivity: useState useContext=useState hook is reactive, for one comp
 exports[`Reactivity: useState useless atoms should be deleted 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Quantity\`, true, false, false, false);
@@ -385,7 +369,6 @@ exports[`Reactivity: useState useless atoms should be deleted 1`] = `
 exports[`Reactivity: useState useless atoms should be deleted 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -400,7 +383,6 @@ exports[`Reactivity: useState useless atoms should be deleted 2`] = `
 exports[`Reactivity: useState very simple use, with initial value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);

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

@@ -3,7 +3,6 @@
 exports[`app App supports env with getters/setters 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/> <block-text-1/></div>\`);
@@ -19,7 +18,6 @@ exports[`app App supports env with getters/setters 1`] = `
 exports[`app can configure an app with props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -31,10 +29,22 @@ 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
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -48,7 +58,6 @@ exports[`app destroy remove the widget from the DOM 1`] = `
 exports[`app warnIfNoStaticProps works as expected 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);

tests/app/app.test.ts

@@ -76,4 +76,22 @@ 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

@@ -3,7 +3,6 @@
 exports[`attributes changing a class with t-att-class (preexisting class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"hoy\\" block-attribute-0=\\"class\\"/>\`);
@@ -18,7 +17,6 @@ exports[`attributes changing a class with t-att-class (preexisting class 1`] = `
 exports[`attributes changing a class with t-att-class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -33,7 +31,6 @@ exports[`attributes changing a class with t-att-class 1`] = `
 exports[`attributes changing an attribute with t-att- 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"value\\"/>\`);
@@ -48,7 +45,6 @@ exports[`attributes changing an attribute with t-att- 1`] = `
 exports[`attributes class and t-att-class should combine together 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\" class=\\"hello\\"/>\`);
@@ -63,7 +59,6 @@ exports[`attributes class and t-att-class should combine together 1`] = `
 exports[`attributes class and t-attf-class with ternary operation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"hello\\" block-attribute-0=\\"class\\"/>\`);
@@ -78,7 +73,6 @@ exports[`attributes class and t-attf-class with ternary operation 1`] = `
 exports[`attributes dynamic attribute evaluating to 0 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
@@ -93,7 +87,6 @@ exports[`attributes dynamic attribute evaluating to 0 1`] = `
 exports[`attributes dynamic attribute falsy variable  1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
@@ -108,7 +101,6 @@ exports[`attributes dynamic attribute falsy variable  1`] = `
 exports[`attributes dynamic attribute with a dash 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"data-action-id\\"/>\`);
@@ -123,7 +115,6 @@ exports[`attributes dynamic attribute with a dash 1`] = `
 exports[`attributes dynamic attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
@@ -138,7 +129,6 @@ exports[`attributes dynamic attributes 1`] = `
 exports[`attributes dynamic attributes with backticks 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
@@ -153,7 +143,6 @@ exports[`attributes dynamic attributes with backticks 1`] = `
 exports[`attributes dynamic class attribute 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -168,7 +157,6 @@ exports[`attributes dynamic class attribute 1`] = `
 exports[`attributes dynamic class attribute evaluating to 0 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -183,7 +171,6 @@ exports[`attributes dynamic class attribute evaluating to 0 1`] = `
 exports[`attributes dynamic class attribute that starts and ends with a space 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -198,7 +185,6 @@ exports[`attributes dynamic class attribute that starts and ends with a space 1`
 exports[`attributes dynamic class attribute which is only a space 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -213,7 +199,6 @@ exports[`attributes dynamic class attribute which is only a space 1`] = `
 exports[`attributes dynamic class attribute with multiple consecutive spaces 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -228,7 +213,6 @@ exports[`attributes dynamic class attribute with multiple consecutive spaces 1`]
 exports[`attributes dynamic empty class attribute 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -243,7 +227,6 @@ exports[`attributes dynamic empty class attribute 1`] = `
 exports[`attributes dynamic formatted attributes with a dash 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"aria-label\\"/>\`);
@@ -258,7 +241,6 @@ exports[`attributes dynamic formatted attributes with a dash 1`] = `
 exports[`attributes dynamic undefined class attribute 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -273,7 +255,6 @@ exports[`attributes dynamic undefined class attribute 1`] = `
 exports[`attributes dynamic undefined generic attribute 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"thing\\"/>\`);
@@ -288,7 +269,6 @@ exports[`attributes dynamic undefined generic attribute 1`] = `
 exports[`attributes fixed variable 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
@@ -303,7 +283,6 @@ exports[`attributes fixed variable 1`] = `
 exports[`attributes format expression 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
@@ -318,7 +297,6 @@ exports[`attributes format expression 1`] = `
 exports[`attributes format literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
@@ -333,7 +311,6 @@ exports[`attributes format literal 1`] = `
 exports[`attributes format multiple 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
@@ -348,7 +325,6 @@ exports[`attributes format multiple 1`] = `
 exports[`attributes format value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
@@ -363,7 +339,6 @@ exports[`attributes format value 1`] = `
 exports[`attributes from object variables set previously 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -382,7 +357,6 @@ exports[`attributes from object variables set previously 1`] = `
 exports[`attributes from variables set previously (no external node) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -401,7 +375,6 @@ exports[`attributes from variables set previously (no external node) 1`] = `
 exports[`attributes from variables set previously 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -420,7 +393,6 @@ exports[`attributes from variables set previously 1`] = `
 exports[`attributes object 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attributes=\\"0\\"/>\`);
@@ -435,7 +407,6 @@ exports[`attributes object 1`] = `
 exports[`attributes static attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div foo=\\"a\\" bar=\\"b\\" baz=\\"c\\"/>\`);
@@ -449,7 +420,6 @@ exports[`attributes static attributes 1`] = `
 exports[`attributes static attributes on void elements 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<img src=\\"/test.skip.jpg\\" alt=\\"Test\\"/>\`);
@@ -463,7 +433,6 @@ exports[`attributes static attributes on void elements 1`] = `
 exports[`attributes static attributes with backticks 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div foo=\\"\\\\\`bar\\\\\`\\"/>\`);
@@ -477,7 +446,6 @@ exports[`attributes static attributes with backticks 1`] = `
 exports[`attributes static attributes with dashes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div aria-label=\\"Close\\"/>\`);
@@ -491,7 +459,6 @@ exports[`attributes static attributes with dashes 1`] = `
 exports[`attributes string interpolation, alternate syntax 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
@@ -506,7 +473,6 @@ exports[`attributes string interpolation, alternate syntax 1`] = `
 exports[`attributes t-att-class and class should combine together 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"hello\\" block-attribute-0=\\"class\\"/>\`);
@@ -521,7 +487,6 @@ exports[`attributes t-att-class and class should combine together 1`] = `
 exports[`attributes t-att-class with multiple classes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -536,7 +501,6 @@ exports[`attributes t-att-class with multiple classes 1`] = `
 exports[`attributes t-att-class with multiple classes 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -551,7 +515,6 @@ exports[`attributes t-att-class with multiple classes 2`] = `
 exports[`attributes t-att-class with multiple classes 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -566,7 +529,6 @@ exports[`attributes t-att-class with multiple classes 3`] = `
 exports[`attributes t-att-class with multiple classes, some of which are duplicate 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -581,7 +543,6 @@ exports[`attributes t-att-class with multiple classes, some of which are duplica
 exports[`attributes t-att-class with object 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"static\\" block-attribute-0=\\"class\\"/>\`);
@@ -596,7 +557,6 @@ exports[`attributes t-att-class with object 1`] = `
 exports[`attributes t-att-class with object 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -611,7 +571,6 @@ exports[`attributes t-att-class with object 2`] = `
 exports[`attributes t-att-class with object 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -626,7 +585,6 @@ exports[`attributes t-att-class with object 3`] = `
 exports[`attributes t-attf-class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -641,7 +599,6 @@ exports[`attributes t-attf-class 1`] = `
 exports[`attributes t-attf-class should combine with class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"hello\\" block-attribute-0=\\"class\\"/>\`);
@@ -656,7 +613,6 @@ exports[`attributes t-attf-class should combine with class 1`] = `
 exports[`attributes t-attf-class with multiple classes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -671,7 +627,6 @@ exports[`attributes t-attf-class with multiple classes 1`] = `
 exports[`attributes t-attf-class with multiple classes separated by multiple spaces 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -686,7 +641,6 @@ exports[`attributes t-attf-class with multiple classes separated by multiple spa
 exports[`attributes tuple literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attributes=\\"0\\"/>\`);
@@ -701,7 +655,6 @@ exports[`attributes tuple literal 1`] = `
 exports[`attributes tuple variable 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attributes=\\"0\\"/>\`);
@@ -716,7 +669,6 @@ exports[`attributes tuple variable 1`] = `
 exports[`attributes two classes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"a b\\"/>\`);
@@ -730,7 +682,6 @@ exports[`attributes two classes 1`] = `
 exports[`attributes two dynamic attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"foo\\" block-attribute-1=\\"bar\\"/>\`);
@@ -746,7 +697,6 @@ exports[`attributes two dynamic attributes 1`] = `
 exports[`attributes updating classes (with obj notation) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"hoy\\" block-attribute-0=\\"class\\"/>\`);
@@ -758,10 +708,23 @@ 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
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div foo=\\"&lt;foo\\" block-attribute-0=\\"bar\\" block-attribute-1=\\"baz\\" block-attributes=\\"2\\"/>\`);
@@ -778,7 +741,6 @@ exports[`attributes various escapes 1`] = `
 exports[`attributes various escapes 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div> &lt; </div>\`);
@@ -792,13 +754,12 @@ exports[`attributes various escapes 2 1`] = `
 exports[`special cases for some specific html attributes/properties input of type checkbox with t-att-indeterminate 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"indeterminate\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let attr1 = ctx['v'];
+    let attr1 = new Boolean(ctx['v']);
     return block1([attr1]);
   }
 }"
@@ -807,13 +768,26 @@ exports[`special cases for some specific html attributes/properties input of typ
 exports[`special cases for some specific html attributes/properties input type= checkbox, with t-att-checked 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   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 = ctx['flag'];
+    let attr1 = new Boolean(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]);
   }
 }"
@@ -822,13 +796,26 @@ exports[`special cases for some specific html attributes/properties input type=
 exports[`special cases for some specific html attributes/properties input with t-att-value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   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 = ctx['v'];
+    let attr1 = new String((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]);
   }
 }"
@@ -837,13 +824,12 @@ exports[`special cases for some specific html attributes/properties input with t
 exports[`special cases for some specific html attributes/properties select with t-att-value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   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 = ctx['value'];
+    let attr1 = new String((ctx['value']) || \\"\\");
     return block1([attr1]);
   }
 }"
@@ -852,13 +838,12 @@ exports[`special cases for some specific html attributes/properties select with
 exports[`special cases for some specific html attributes/properties textarea with t-att-value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<textarea block-attribute-0=\\"value\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let attr1 = ctx['v'];
+    let attr1 = new String((ctx['v']) || \\"\\");
     return block1([attr1]);
   }
 }"
@@ -867,7 +852,6 @@ exports[`special cases for some specific html attributes/properties textarea wit
 exports[`special cases for some specific html attributes/properties various boolean html attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><input type=\\"checkbox\\" checked=\\"checked\\"/><input checked=\\"checked\\"/><div checked=\\"checked\\"/><div selected=\\"selected\\"/><option selected=\\"selected\\" other=\\"1\\"/><input readonly=\\"readonly\\"/><button disabled=\\"disabled\\"/></div>\`);

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

@@ -3,7 +3,6 @@
 exports[`comments only a comment 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -15,7 +14,6 @@ exports[`comments only a comment 1`] = `
 exports[`comments properly handle comments 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>hello <!-- comment-->owl</div>\`);
@@ -29,7 +27,6 @@ exports[`comments properly handle comments 1`] = `
 exports[`comments properly handle comments between t-if/t-else 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);

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

@@ -3,7 +3,6 @@
 exports[`t-on can bind event handler 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -18,7 +17,6 @@ exports[`t-on can bind event handler 1`] = `
 exports[`t-on can bind handlers with arguments 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -34,7 +32,6 @@ exports[`t-on can bind handlers with arguments 1`] = `
 exports[`t-on can bind handlers with empty  object 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -50,7 +47,6 @@ exports[`t-on can bind handlers with empty  object 1`] = `
 exports[`t-on can bind handlers with empty object (with non empty inner string) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -66,7 +62,6 @@ exports[`t-on can bind handlers with empty object (with non empty inner string)
 exports[`t-on can bind handlers with empty object (with non empty inner string) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -94,7 +89,6 @@ exports[`t-on can bind handlers with empty object (with non empty inner string)
 exports[`t-on can bind handlers with object arguments 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -110,7 +104,6 @@ exports[`t-on can bind handlers with object arguments 1`] = `
 exports[`t-on can bind two event handlers 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\" block-handler-1=\\"dblclick\\">Click</button>\`);
@@ -126,7 +119,6 @@ exports[`t-on can bind two event handlers 1`] = `
 exports[`t-on handler is bound to proper owner 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -141,7 +133,6 @@ exports[`t-on handler is bound to proper owner 1`] = `
 exports[`t-on handler is bound to proper owner, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -164,7 +155,6 @@ exports[`t-on handler is bound to proper owner, part 2 1`] = `
 exports[`t-on handler is bound to proper owner, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
@@ -177,7 +167,6 @@ exports[`t-on handler is bound to proper owner, part 3 1`] = `
 exports[`t-on handler is bound to proper owner, part 3 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -192,7 +181,6 @@ exports[`t-on handler is bound to proper owner, part 3 2`] = `
 exports[`t-on handler is bound to proper owner, part 4 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -217,7 +205,6 @@ exports[`t-on handler is bound to proper owner, part 4 1`] = `
 exports[`t-on handler is bound to proper owner, part 4 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -232,7 +219,6 @@ exports[`t-on handler is bound to proper owner, part 4 2`] = `
 exports[`t-on receive event in first argument 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -247,7 +233,6 @@ exports[`t-on receive event in first argument 1`] = `
 exports[`t-on t-on modifiers (native listener) basic support for native listener 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"myClass\\" block-handler-0=\\"click\\"><button block-handler-1=\\"click\\">Button</button></div>\`);
@@ -263,7 +248,6 @@ exports[`t-on t-on modifiers (native listener) basic support for native listener
 exports[`t-on t-on modifiers (native listener) t-on combined with t-esc 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><block-text-1/></button></div>\`);
@@ -279,7 +263,6 @@ exports[`t-on t-on modifiers (native listener) t-on combined with t-esc 1`] = `
 exports[`t-on t-on modifiers (native listener) t-on combined with t-out 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -296,7 +279,6 @@ exports[`t-on t-on modifiers (native listener) t-on combined with t-out 1`] = `
 exports[`t-on t-on modifiers (native listener) t-on with .capture modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-handler-0=\\"click.capture\\"><button block-handler-1=\\"click\\">Button</button></div>\`);
@@ -312,7 +294,6 @@ exports[`t-on t-on modifiers (native listener) t-on with .capture modifier 1`] =
 exports[`t-on t-on modifiers (native listener) t-on with empty handler (only modifiers) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent\\">Button</button></div>\`);
@@ -327,7 +308,6 @@ exports[`t-on t-on modifiers (native listener) t-on with empty handler (only mod
 exports[`t-on t-on modifiers (native listener) t-on with prevent and self modifiers (order matters) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent.self\\"><span>Button</span></button></div>\`);
@@ -342,7 +322,6 @@ exports[`t-on t-on modifiers (native listener) t-on with prevent and self modifi
 exports[`t-on t-on modifiers (native listener) t-on with prevent and/or stop modifiers 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent\\">Button 1</button><button block-handler-1=\\"click.stop\\">Button 2</button><button block-handler-2=\\"click.prevent.stop\\">Button 3</button></div>\`);
@@ -359,7 +338,6 @@ exports[`t-on t-on modifiers (native listener) t-on with prevent and/or stop mod
 exports[`t-on t-on modifiers (native listener) t-on with prevent modifier in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -387,7 +365,6 @@ exports[`t-on t-on modifiers (native listener) t-on with prevent modifier in t-f
 exports[`t-on t-on modifiers (native listener) t-on with self and prevent modifiers (order matters) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><button block-handler-0=\\"click.self.prevent\\"><span>Button</span></button></div>\`);
@@ -402,7 +379,6 @@ exports[`t-on t-on modifiers (native listener) t-on with self and prevent modifi
 exports[`t-on t-on modifiers (native listener) t-on with self modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><span>Button</span></button><button block-handler-1=\\"click.self\\"><span>Button</span></button></div>\`);
@@ -418,7 +394,6 @@ exports[`t-on t-on modifiers (native listener) t-on with self modifier 1`] = `
 exports[`t-on t-on modifiers (synthetic listener) basic support for synthetic 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-handler-0=\\"click.synthetic\\"><button block-handler-1=\\"click.synthetic\\">Button</button></div>\`);
@@ -434,7 +409,6 @@ exports[`t-on t-on modifiers (synthetic listener) basic support for synthetic 1`
 exports[`t-on t-on with inline statement (function call) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -450,7 +424,6 @@ exports[`t-on t-on with inline statement (function call) 1`] = `
 exports[`t-on t-on with inline statement 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -466,7 +439,6 @@ exports[`t-on t-on with inline statement 1`] = `
 exports[`t-on t-on with inline statement, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Toggle</button>\`);
@@ -482,7 +454,6 @@ exports[`t-on t-on with inline statement, part 2 1`] = `
 exports[`t-on t-on with inline statement, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Toggle</button>\`);
@@ -499,7 +470,6 @@ exports[`t-on t-on with inline statement, part 3 1`] = `
 exports[`t-on t-on with t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
@@ -515,7 +485,6 @@ exports[`t-on t-on with t-call 1`] = `
 exports[`t-on t-on with t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
@@ -530,7 +499,6 @@ exports[`t-on t-on with t-call 2`] = `
 exports[`t-on t-on, with arguments and t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
@@ -546,7 +514,6 @@ exports[`t-on t-on, with arguments and t-call 1`] = `
 exports[`t-on t-on, with arguments and t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);

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

@@ -3,7 +3,6 @@
 exports[`misc complex template 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`SlotButton\`, true, false, false, false);
@@ -83,7 +82,6 @@ exports[`misc complex template 1`] = `
 exports[`misc global 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, isBoundary, withDefault, setContextValue, zero, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`_callee-uses-foo\`);
@@ -136,7 +134,6 @@ exports[`misc global 1`] = `
 exports[`misc global 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { withDefault } = helpers;
   
@@ -152,7 +149,6 @@ exports[`misc global 2`] = `
 exports[`misc global 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
@@ -169,15 +165,14 @@ exports[`misc global 3`] = `
 exports[`misc global 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { safeOutput, withDefault } = helpers;
+  let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const b3 = text(\`toto default\`);
-    const b2 = withDefault(safeOutput(ctx['toto']), b3);
+    const b2 = safeOutput(ctx['toto'], b3);
     return block1([], [b2]);
   }
 }"
@@ -186,7 +181,6 @@ exports[`misc global 4`] = `
 exports[`misc other complex template 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`LOAD_INFOS_TEMPLATE\`);
@@ -275,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 = ctx['category'].id==ctx['options'].active_category_id;
+        let attr7 = new Boolean(ctx['category'].id==ctx['options'].active_category_id);
         let txt5 = ctx['category'].name;
         c_block15[i1] = withKey(block16([attr6, attr7, txt5]), key1);
       }
@@ -283,7 +277,7 @@ exports[`misc other complex template 1`] = `
       const b15 = list(c_block15);
       b14 = block14([], [b15]);
     }
-    let attr8 = ctx['search'].value;
+    let attr8 = new String((ctx['search'].value) || \\"\\");
     let hdlr4 = [ctx['updateFilter'], ctx];
     let hdlr5 = [ctx['updateFilter'], ctx];
     let hdlr6 = [ctx['clearSearch'], ctx];
@@ -297,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 = ctx['options'].trigger_display[ctx['trigger'].id];
+          let attr11 = new Boolean(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__/qweb_memory.test.ts.snap

@@ -3,7 +3,6 @@
 exports[`memory t-foreach does not leak stuff in global scope 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   

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

@@ -3,7 +3,6 @@
 exports[`simple templates, mostly static can render a table row 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<tr><td>cell</td></tr>\`);
@@ -17,7 +16,6 @@ exports[`simple templates, mostly static can render a table row 1`] = `
 exports[`simple templates, mostly static div with a class attribute 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"abc\\">foo</div>\`);
@@ -31,7 +29,6 @@ exports[`simple templates, mostly static div with a class attribute 1`] = `
 exports[`simple templates, mostly static div with a class attribute with a quote 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"a'bc\\">word</div>\`);
@@ -45,7 +42,6 @@ exports[`simple templates, mostly static div with a class attribute with a quote
 exports[`simple templates, mostly static div with a span child node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><span>word</span></div>\`);
@@ -59,7 +55,6 @@ exports[`simple templates, mostly static div with a span child node 1`] = `
 exports[`simple templates, mostly static div with an arbitrary attribute with a quote 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div abc=\\"a'bc\\">word</div>\`);
@@ -73,7 +68,6 @@ exports[`simple templates, mostly static div with an arbitrary attribute with a
 exports[`simple templates, mostly static div with an empty class attribute 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>word</div>\`);
@@ -87,7 +81,6 @@ exports[`simple templates, mostly static div with an empty class attribute 1`] =
 exports[`simple templates, mostly static div with content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>foo</div>\`);
@@ -101,7 +94,6 @@ exports[`simple templates, mostly static div with content 1`] = `
 exports[`simple templates, mostly static dom node with t-esc 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -116,7 +108,6 @@ exports[`simple templates, mostly static dom node with t-esc 1`] = `
 exports[`simple templates, mostly static dom node with t-esc 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -131,7 +122,6 @@ exports[`simple templates, mostly static dom node with t-esc 2`] = `
 exports[`simple templates, mostly static dynamic text value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -143,7 +133,6 @@ exports[`simple templates, mostly static dynamic text value 1`] = `
 exports[`simple templates, mostly static empty div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -157,7 +146,6 @@ exports[`simple templates, mostly static empty div 1`] = `
 exports[`simple templates, mostly static empty string 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -169,7 +157,6 @@ exports[`simple templates, mostly static empty string 1`] = `
 exports[`simple templates, mostly static empty string in a template set 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -181,7 +168,6 @@ exports[`simple templates, mostly static empty string in a template set 1`] = `
 exports[`simple templates, mostly static inline template string in t-esc 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -193,7 +179,6 @@ exports[`simple templates, mostly static inline template string in t-esc 1`] = `
 exports[`simple templates, mostly static inline template string with content in t-esc 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -209,7 +194,6 @@ exports[`simple templates, mostly static inline template string with content in
 exports[`simple templates, mostly static inline template string with variable in context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -221,7 +205,6 @@ exports[`simple templates, mostly static inline template string with variable in
 exports[`simple templates, mostly static multiple root nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = createBlock(\`<div>foo</div>\`);
@@ -238,7 +221,6 @@ exports[`simple templates, mostly static multiple root nodes 1`] = `
 exports[`simple templates, mostly static simple string 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -250,7 +232,6 @@ exports[`simple templates, mostly static simple string 1`] = `
 exports[`simple templates, mostly static simple string in t tag 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -262,7 +243,6 @@ exports[`simple templates, mostly static simple string in t tag 1`] = `
 exports[`simple templates, mostly static static text and dynamic text (no t tag) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -276,7 +256,6 @@ exports[`simple templates, mostly static static text and dynamic text (no t tag)
 exports[`simple templates, mostly static static text and dynamic text 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -290,7 +269,6 @@ exports[`simple templates, mostly static static text and dynamic text 1`] = `
 exports[`simple templates, mostly static t-esc in dom node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -305,7 +283,6 @@ exports[`simple templates, mostly static t-esc in dom node 1`] = `
 exports[`simple templates, mostly static t-esc in dom node, variations 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>hello <block-text-0/></div>\`);
@@ -320,7 +297,6 @@ exports[`simple templates, mostly static t-esc in dom node, variations 1`] = `
 exports[`simple templates, mostly static t-esc in dom node, variations 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>hello <block-text-0/> world</div>\`);
@@ -335,7 +311,6 @@ exports[`simple templates, mostly static t-esc in dom node, variations 2`] = `
 exports[`simple templates, mostly static template with multiple t tag with multiple content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/><block-text-1/>Loading<block-text-2/></div>\`);
@@ -352,7 +327,6 @@ exports[`simple templates, mostly static template with multiple t tag with multi
 exports[`simple templates, mostly static template with t tag with multiple content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>Loading<block-child-0/></div>\`);
@@ -370,7 +344,6 @@ exports[`simple templates, mostly static template with t tag with multiple conte
 exports[`simple templates, mostly static two t-escs next to each other 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -384,7 +357,6 @@ exports[`simple templates, mostly static two t-escs next to each other 1`] = `
 exports[`simple templates, mostly static two t-escs next to each other 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -398,7 +370,6 @@ exports[`simple templates, mostly static two t-escs next to each other 2`] = `
 exports[`simple templates, mostly static two t-escs next to each other, in a div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);

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

@@ -3,7 +3,6 @@
 exports[`properly support svg add proper namespace to g tags 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<g block-ns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/> </g>\`);
@@ -17,7 +16,6 @@ exports[`properly support svg add proper namespace to g tags 1`] = `
 exports[`properly support svg add proper namespace to svg 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\" width=\\"100px\\" height=\\"90px\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/> </svg>\`);
@@ -31,7 +29,6 @@ exports[`properly support svg add proper namespace to svg 1`] = `
 exports[`properly support svg namespace to g tags not added if already in svg namespace 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><g/></svg>\`);
@@ -45,7 +42,6 @@ exports[`properly support svg namespace to g tags not added if already in svg na
 exports[`properly support svg namespace to svg tags added even if already in svg namespace 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><svg/></svg>\`);
@@ -59,7 +55,6 @@ exports[`properly support svg namespace to svg tags added even if already in svg
 exports[`properly support svg svg creates new block if it is within html -- 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -80,7 +75,6 @@ exports[`properly support svg svg creates new block if it is within html -- 2 1`
 exports[`properly support svg svg creates new block if it is within html 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -96,7 +90,6 @@ exports[`properly support svg svg creates new block if it is within html 1`] = `
 exports[`properly support svg svg namespace added to sub templates if root tag is path 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`path\`);
   
@@ -112,7 +105,6 @@ exports[`properly support svg svg namespace added to sub templates if root tag i
 exports[`properly support svg svg namespace added to sub templates if root tag is path 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<path block-ns=\\"http://www.w3.org/2000/svg\\"/>\`);
@@ -126,7 +118,6 @@ exports[`properly support svg svg namespace added to sub templates if root tag i
 exports[`properly support svg svg namespace added to sub-blocks 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);

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

@@ -3,7 +3,6 @@
 exports[`t-call (template calling) basic caller 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`_basic-callee\`);
   
@@ -19,7 +18,6 @@ exports[`t-call (template calling) basic caller 1`] = `
 exports[`t-call (template calling) basic caller 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>ok</span>\`);
@@ -33,7 +31,6 @@ exports[`t-call (template calling) basic caller 2`] = `
 exports[`t-call (template calling) basic caller, no parent node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`_basic-callee\`);
   
@@ -46,7 +43,6 @@ exports[`t-call (template calling) basic caller, no parent node 1`] = `
 exports[`t-call (template calling) basic caller, no parent node 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>ok</span>\`);
@@ -60,7 +56,6 @@ exports[`t-call (template calling) basic caller, no parent node 2`] = `
 exports[`t-call (template calling) call with several sub nodes on same line 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -86,7 +81,6 @@ exports[`t-call (template calling) call with several sub nodes on same line 1`]
 exports[`t-call (template calling) call with several sub nodes on same line 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
@@ -102,7 +96,6 @@ exports[`t-call (template calling) call with several sub nodes on same line 2`]
 exports[`t-call (template calling) cascading t-call t-out='0' 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`subTemplate\`);
@@ -128,7 +121,6 @@ exports[`t-call (template calling) cascading t-call t-out='0' 1`] = `
 exports[`t-call (template calling) cascading t-call t-out='0' 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`subSubTemplate\`);
@@ -152,7 +144,6 @@ exports[`t-call (template calling) cascading t-call t-out='0' 2`] = `
 exports[`t-call (template calling) cascading t-call t-out='0' 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`finalTemplate\`);
@@ -176,7 +167,6 @@ exports[`t-call (template calling) cascading t-call t-out='0' 3`] = `
 exports[`t-call (template calling) cascading t-call t-out='0' 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
@@ -192,7 +182,6 @@ exports[`t-call (template calling) cascading t-call t-out='0' 4`] = `
 exports[`t-call (template calling) cascading t-call t-out='0', without external divs 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`subTemplate\`);
@@ -216,7 +205,6 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
 exports[`t-call (template calling) cascading t-call t-out='0', without external divs 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`subSubTemplate\`);
@@ -238,7 +226,6 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
 exports[`t-call (template calling) cascading t-call t-out='0', without external divs 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`finalTemplate\`);
@@ -260,7 +247,6 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
 exports[`t-call (template calling) cascading t-call t-out='0', without external divs 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
@@ -277,7 +263,6 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
 exports[`t-call (template calling) dynamic t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const call = app.callTemplate.bind(app);
   
@@ -294,7 +279,6 @@ exports[`t-call (template calling) dynamic t-call 1`] = `
 exports[`t-call (template calling) dynamic t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<foo><block-text-0/></foo>\`);
@@ -309,7 +293,6 @@ exports[`t-call (template calling) dynamic t-call 2`] = `
 exports[`t-call (template calling) dynamic t-call 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<bar><block-text-0/></bar>\`);
@@ -324,7 +307,6 @@ exports[`t-call (template calling) dynamic t-call 3`] = `
 exports[`t-call (template calling) inherit context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -344,7 +326,6 @@ exports[`t-call (template calling) inherit context 1`] = `
 exports[`t-call (template calling) inherit context 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -353,10 +334,60 @@ 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
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`recursive\`);
   
@@ -375,7 +406,6 @@ exports[`t-call (template calling) recursive template, part 1 1`] = `
 exports[`t-call (template calling) recursive template, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
@@ -397,7 +427,6 @@ exports[`t-call (template calling) recursive template, part 2 1`] = `
 exports[`t-call (template calling) recursive template, part 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
@@ -432,7 +461,6 @@ exports[`t-call (template calling) recursive template, part 2 2`] = `
 exports[`t-call (template calling) recursive template, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
@@ -454,7 +482,6 @@ exports[`t-call (template calling) recursive template, part 3 1`] = `
 exports[`t-call (template calling) recursive template, part 3 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
@@ -489,7 +516,6 @@ exports[`t-call (template calling) recursive template, part 3 2`] = `
 exports[`t-call (template calling) recursive template, part 4: with t-set recursive index 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
@@ -512,7 +538,6 @@ exports[`t-call (template calling) recursive template, part 4: with t-set recurs
 exports[`t-call (template calling) recursive template, part 4: with t-set recursive index 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
@@ -549,7 +574,6 @@ exports[`t-call (template calling) recursive template, part 4: with t-set recurs
 exports[`t-call (template calling) scoped parameters 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -573,7 +597,6 @@ exports[`t-call (template calling) scoped parameters 1`] = `
 exports[`t-call (template calling) scoped parameters 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -585,7 +608,6 @@ exports[`t-call (template calling) scoped parameters 2`] = `
 exports[`t-call (template calling) scoped parameters, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -610,7 +632,6 @@ exports[`t-call (template calling) scoped parameters, part 2 1`] = `
 exports[`t-call (template calling) scoped parameters, part 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -622,7 +643,6 @@ exports[`t-call (template calling) scoped parameters, part 2 2`] = `
 exports[`t-call (template calling) t-call allowed on a non t node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
@@ -638,7 +658,6 @@ exports[`t-call (template calling) t-call allowed on a non t node 1`] = `
 exports[`t-call (template calling) t-call allowed on a non t node 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>ok</span>\`);
@@ -652,7 +671,6 @@ exports[`t-call (template calling) t-call allowed on a non t node 2`] = `
 exports[`t-call (template calling) t-call on a div with t-call-context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
@@ -669,7 +687,6 @@ exports[`t-call (template calling) t-call on a div with t-call-context 1`] = `
 exports[`t-call (template calling) t-call on a div with t-call-context 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -684,7 +701,6 @@ exports[`t-call (template calling) t-call on a div with t-call-context 2`] = `
 exports[`t-call (template calling) t-call with body content as root of a template 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`antony\`);
@@ -704,7 +720,6 @@ exports[`t-call (template calling) t-call with body content as root of a templat
 exports[`t-call (template calling) t-call with body content as root of a template 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
@@ -720,7 +735,6 @@ exports[`t-call (template calling) t-call with body content as root of a templat
 exports[`t-call (template calling) t-call with t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
@@ -739,7 +753,6 @@ exports[`t-call (template calling) t-call with t-if 1`] = `
 exports[`t-call (template calling) t-call with t-if 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>ok</span>\`);
@@ -753,7 +766,6 @@ exports[`t-call (template calling) t-call with t-if 2`] = `
 exports[`t-call (template calling) t-call with t-set inside and body text content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -775,7 +787,6 @@ exports[`t-call (template calling) t-call with t-set inside and body text conten
 exports[`t-call (template calling) t-call with t-set inside and body text content 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p><block-text-0/></p>\`);
@@ -790,7 +801,6 @@ exports[`t-call (template calling) t-call with t-set inside and body text conten
 exports[`t-call (template calling) t-call with t-set inside and outside 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -825,7 +835,6 @@ exports[`t-call (template calling) t-call with t-set inside and outside 1`] = `
 exports[`t-call (template calling) t-call with t-set inside and outside 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -840,7 +849,6 @@ exports[`t-call (template calling) t-call with t-set inside and outside 2`] = `
 exports[`t-call (template calling) t-call with t-set inside and outside. 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`main\`);
@@ -860,7 +868,6 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 1`] =
 exports[`t-call (template calling) t-call with t-set inside and outside. 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -895,7 +902,6 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 2`] =
 exports[`t-call (template calling) t-call with t-set inside and outside. 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = createBlock(\`<span><block-text-0/></span>\`);
@@ -912,7 +918,6 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 3`] =
 exports[`t-call (template calling) t-call, conditional and t-set in t-call body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`callee1\`);
@@ -942,7 +947,6 @@ exports[`t-call (template calling) t-call, conditional and t-set in t-call body
 exports[`t-call (template calling) t-call, conditional and t-set in t-call body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>callee1</div>\`);
@@ -956,7 +960,6 @@ exports[`t-call (template calling) t-call, conditional and t-set in t-call body
 exports[`t-call (template calling) t-call, conditional and t-set in t-call body 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>callee2 <block-text-0/></div>\`);
@@ -971,7 +974,6 @@ exports[`t-call (template calling) t-call, conditional and t-set in t-call body
 exports[`t-call (template calling) t-call-context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
@@ -985,7 +987,6 @@ exports[`t-call (template calling) t-call-context 1`] = `
 exports[`t-call (template calling) t-call-context 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -1000,7 +1001,6 @@ exports[`t-call (template calling) t-call-context 2`] = `
 exports[`t-call (template calling) t-call-context and value in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -1020,7 +1020,6 @@ exports[`t-call (template calling) t-call-context and value in body 1`] = `
 exports[`t-call (template calling) t-call-context and value in body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
@@ -1036,7 +1035,6 @@ exports[`t-call (template calling) t-call-context and value in body 2`] = `
 exports[`t-call (template calling) t-esc inside t-call, with t-set outside 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -1056,7 +1054,6 @@ exports[`t-call (template calling) t-esc inside t-call, with t-set outside 1`] =
 exports[`t-call (template calling) t-esc inside t-call, with t-set outside 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -1071,7 +1068,6 @@ exports[`t-call (template calling) t-esc inside t-call, with t-set outside 2`] =
 exports[`t-call (template calling) with unused body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -1089,7 +1085,6 @@ exports[`t-call (template calling) with unused body 1`] = `
 exports[`t-call (template calling) with unused body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>ok</div>\`);
@@ -1103,7 +1098,6 @@ exports[`t-call (template calling) with unused body 2`] = `
 exports[`t-call (template calling) with unused setbody 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -1122,7 +1116,6 @@ exports[`t-call (template calling) with unused setbody 1`] = `
 exports[`t-call (template calling) with unused setbody 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>ok</div>\`);
@@ -1136,7 +1129,6 @@ exports[`t-call (template calling) with unused setbody 2`] = `
 exports[`t-call (template calling) with used body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -1154,7 +1146,6 @@ exports[`t-call (template calling) with used body 1`] = `
 exports[`t-call (template calling) with used body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
@@ -1170,7 +1161,6 @@ exports[`t-call (template calling) with used body 2`] = `
 exports[`t-call (template calling) with used setbody 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -1192,7 +1182,6 @@ exports[`t-call (template calling) with used setbody 1`] = `
 exports[`t-call (template calling) with used setbody 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {

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

@@ -3,7 +3,6 @@
 exports[`debugging t-debug 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -24,7 +23,6 @@ exports[`debugging t-debug 1`] = `
 exports[`debugging t-debug on sub template 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p>coucou</p>\`);
@@ -39,7 +37,6 @@ exports[`debugging t-debug on sub template 1`] = `
 exports[`debugging t-debug on sub template 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
@@ -55,7 +52,6 @@ exports[`debugging t-debug on sub template 2`] = `
 exports[`debugging t-log 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   

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

@@ -3,7 +3,6 @@
 exports[`t-esc div with falsy values 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><p><block-text-0/></p><p><block-text-1/></p><p><block-text-2/></p><p><block-text-3/></p><p><block-text-4/></p></div>\`);
@@ -22,7 +21,6 @@ exports[`t-esc div with falsy values 1`] = `
 exports[`t-esc escaping 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -37,7 +35,6 @@ exports[`t-esc escaping 1`] = `
 exports[`t-esc escaping on a node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -52,7 +49,6 @@ exports[`t-esc escaping on a node 1`] = `
 exports[`t-esc escaping on a node with a body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { withDefault } = helpers;
   
@@ -68,7 +64,6 @@ exports[`t-esc escaping on a node with a body 1`] = `
 exports[`t-esc escaping on a node with a body, as a default 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { withDefault } = helpers;
   
@@ -84,7 +79,6 @@ exports[`t-esc escaping on a node with a body, as a default 1`] = `
 exports[`t-esc falsy values in text nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -105,7 +99,6 @@ exports[`t-esc falsy values in text nodes 1`] = `
 exports[`t-esc literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -120,7 +113,6 @@ exports[`t-esc literal 1`] = `
 exports[`t-esc t-esc is escaped 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
   
@@ -134,7 +126,32 @@ exports[`t-esc t-esc is escaped 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`var\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node, key);
+    let txt1 = ctx['var'];
+    return block1([txt1]);
+  }
+}"
+`;
+
+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]);
   }
@@ -144,7 +161,6 @@ exports[`t-esc t-esc is escaped 1`] = `
 exports[`t-esc t-esc work with spread operator 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -159,7 +175,6 @@ exports[`t-esc t-esc work with spread operator 1`] = `
 exports[`t-esc t-esc=0 is escaped 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -181,7 +196,6 @@ exports[`t-esc t-esc=0 is escaped 1`] = `
 exports[`t-esc t-esc=0 is escaped 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
@@ -194,10 +208,20 @@ 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
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);

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

@@ -3,7 +3,6 @@
 exports[`t-foreach does not pollute the rendering context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -26,7 +25,6 @@ exports[`t-foreach does not pollute the rendering context 1`] = `
 exports[`t-foreach iterate on items (on a element node) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -51,7 +49,6 @@ exports[`t-foreach iterate on items (on a element node) 1`] = `
 exports[`t-foreach iterate on items 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -83,7 +80,6 @@ exports[`t-foreach iterate on items 1`] = `
 exports[`t-foreach iterate, dict param 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -115,7 +111,6 @@ exports[`t-foreach iterate, dict param 1`] = `
 exports[`t-foreach iterate, position 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -152,7 +147,6 @@ exports[`t-foreach iterate, position 1`] = `
 exports[`t-foreach simple iteration (in a node) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -175,7 +169,6 @@ exports[`t-foreach simple iteration (in a node) 1`] = `
 exports[`t-foreach simple iteration 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -195,7 +188,6 @@ exports[`t-foreach simple iteration 1`] = `
 exports[`t-foreach simple iteration with two nodes inside 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -222,7 +214,6 @@ exports[`t-foreach simple iteration with two nodes inside 1`] = `
 exports[`t-foreach t-call with body in t-foreach in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -276,7 +267,6 @@ exports[`t-foreach t-call with body in t-foreach in t-foreach 1`] = `
 exports[`t-foreach t-call with body in t-foreach in t-foreach 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -295,7 +285,6 @@ exports[`t-foreach t-call with body in t-foreach in t-foreach 2`] = `
 exports[`t-foreach t-call without body in t-foreach in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -343,7 +332,6 @@ exports[`t-foreach t-call without body in t-foreach in t-foreach 1`] = `
 exports[`t-foreach t-call without body in t-foreach in t-foreach 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -366,7 +354,6 @@ exports[`t-foreach t-call without body in t-foreach in t-foreach 2`] = `
 exports[`t-foreach t-foreach in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -401,7 +388,6 @@ exports[`t-foreach t-foreach in t-foreach 1`] = `
 exports[`t-foreach t-foreach with t-if inside (no external node) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -428,7 +414,6 @@ exports[`t-foreach t-foreach with t-if inside (no external node) 1`] = `
 exports[`t-foreach t-foreach with t-if inside 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -457,7 +442,6 @@ exports[`t-foreach t-foreach with t-if inside 1`] = `
 exports[`t-foreach t-key on t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -481,7 +465,6 @@ exports[`t-foreach t-key on t-foreach 1`] = `
 exports[`t-foreach throws error if invalid loop expression 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -507,7 +490,6 @@ exports[`t-foreach throws error if invalid loop expression 1`] = `
 exports[`t-foreach with t-memo 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   

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

@@ -3,7 +3,6 @@
 exports[`t-if a t-if next to a div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = createBlock(\`<div>foo</div>\`);
@@ -22,7 +21,6 @@ exports[`t-if a t-if next to a div 1`] = `
 exports[`t-if a t-if with two inner nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block3 = createBlock(\`<span>yip</span>\`);
@@ -43,7 +41,6 @@ exports[`t-if a t-if with two inner nodes 1`] = `
 exports[`t-if boolean value condition elif (no outside node) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -65,7 +62,6 @@ exports[`t-if boolean value condition elif (no outside node) 1`] = `
 exports[`t-if boolean value condition elif 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-2/><block-child-3/></div>\`);
@@ -89,7 +85,6 @@ exports[`t-if boolean value condition elif 1`] = `
 exports[`t-if boolean value condition else 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><span>begin</span><block-child-0/><block-child-1/><span>end</span></div>\`);
@@ -109,7 +104,6 @@ exports[`t-if boolean value condition else 1`] = `
 exports[`t-if boolean value condition false else 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><span>begin</span><block-child-0/><block-child-1/><span>end</span></div>\`);
@@ -129,7 +123,6 @@ exports[`t-if boolean value condition false else 1`] = `
 exports[`t-if boolean value condition missing 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
@@ -147,7 +140,6 @@ exports[`t-if boolean value condition missing 1`] = `
 exports[`t-if can use some boolean operators in expressions 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-2/><block-child-3/><block-child-4/><block-child-5/><block-child-6/><block-child-7/></div>\`);
@@ -186,7 +178,6 @@ exports[`t-if can use some boolean operators in expressions 1`] = `
 exports[`t-if div containing a t-if with two inner nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -208,7 +199,6 @@ exports[`t-if div containing a t-if with two inner nodes 1`] = `
 exports[`t-if dynamic content after t-if with two children nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
@@ -231,7 +221,6 @@ exports[`t-if dynamic content after t-if with two children nodes 1`] = `
 exports[`t-if just a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -247,7 +236,6 @@ exports[`t-if just a t-if 1`] = `
 exports[`t-if simple t-if/t-else 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -265,7 +253,6 @@ exports[`t-if simple t-if/t-else 1`] = `
 exports[`t-if simple t-if/t-else in a div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
@@ -285,7 +272,6 @@ exports[`t-if simple t-if/t-else in a div 1`] = `
 exports[`t-if t-esc with t-elif 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
@@ -305,7 +291,6 @@ exports[`t-if t-esc with t-elif 1`] = `
 exports[`t-if t-esc with t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -323,7 +308,6 @@ exports[`t-if t-esc with t-if 1`] = `
 exports[`t-if t-if and t-else with two nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block4 = createBlock(\`<span>a</span>\`);
@@ -346,7 +330,6 @@ exports[`t-if t-if and t-else with two nodes 1`] = `
 exports[`t-if t-if in a div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -364,7 +347,6 @@ exports[`t-if t-if in a div 1`] = `
 exports[`t-if t-if in a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -387,7 +369,6 @@ exports[`t-if t-if in a t-if 1`] = `
 exports[`t-if t-if with empty content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -404,7 +385,6 @@ exports[`t-if t-if with empty content 1`] = `
 exports[`t-if t-if/t-else with more content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -424,7 +404,6 @@ exports[`t-if t-if/t-else with more content 1`] = `
 exports[`t-if t-set, then t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -446,7 +425,6 @@ exports[`t-if t-set, then t-if 1`] = `
 exports[`t-if t-set, then t-if, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -470,7 +448,6 @@ exports[`t-if t-set, then t-if, part 2 1`] = `
 exports[`t-if t-set, then t-if, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -497,7 +474,6 @@ exports[`t-if t-set, then t-if, part 3 1`] = `
 exports[`t-if two consecutive t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -516,7 +492,6 @@ exports[`t-if two consecutive t-if 1`] = `
 exports[`t-if two consecutive t-if in a div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
@@ -537,7 +512,6 @@ exports[`t-if two consecutive t-if in a div 1`] = `
 exports[`t-if two t-ifs next to each other 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);

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

@@ -3,7 +3,6 @@
 exports[`t-key can use t-key directive on a node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -19,7 +18,6 @@ exports[`t-key can use t-key directive on a node 1`] = `
 exports[`t-key can use t-key directive on a node 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -35,7 +33,6 @@ exports[`t-key can use t-key directive on a node 2 1`] = `
 exports[`t-key can use t-key directive on a node as a function 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -51,7 +48,6 @@ exports[`t-key can use t-key directive on a node as a function 1`] = `
 exports[`t-key t-key directive in a list 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -76,7 +72,6 @@ exports[`t-key t-key directive in a list 1`] = `
 exports[`t-key t-key on sub dom node pushes a child block in its parent 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
@@ -98,7 +93,6 @@ exports[`t-key t-key on sub dom node pushes a child block in its parent 1`] = `
 exports[`t-key t-key on sub dom node pushes a child block in its parent 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><h1/></div>\`);

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

@@ -3,7 +3,6 @@
 exports[`t-out literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -19,7 +18,6 @@ exports[`t-out literal 1`] = `
 exports[`t-out literal, no outside html element 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -32,7 +30,6 @@ exports[`t-out literal, no outside html element 1`] = `
 exports[`t-out multiple calls to t-out 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -54,7 +51,6 @@ exports[`t-out multiple calls to t-out 1`] = `
 exports[`t-out multiple calls to t-out 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
@@ -71,7 +67,6 @@ exports[`t-out multiple calls to t-out 2`] = `
 exports[`t-out not escaping 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -87,7 +82,6 @@ exports[`t-out not escaping 1`] = `
 exports[`t-out number literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -103,7 +97,6 @@ exports[`t-out number literal 1`] = `
 exports[`t-out t-out 0 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
   const callTemplate_1 = app.getTemplate(\`_basic-callee\`);
@@ -125,7 +118,6 @@ exports[`t-out t-out 0 1`] = `
 exports[`t-out t-out 0 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { zero } = helpers;
   
@@ -141,7 +133,6 @@ exports[`t-out t-out 0 2`] = `
 exports[`t-out t-out and another sibling node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -157,7 +148,6 @@ exports[`t-out t-out and another sibling node 1`] = `
 exports[`t-out t-out bdom 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
   
@@ -171,7 +161,7 @@ exports[`t-out t-out bdom 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`var\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node, key);
     const b3 = safeOutput(ctx['var']);
     return block1([], [b3]);
   }
@@ -181,7 +171,6 @@ exports[`t-out t-out bdom 1`] = `
 exports[`t-out t-out block 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -197,7 +186,6 @@ exports[`t-out t-out block 1`] = `
 exports[`t-out t-out escaped 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -213,7 +201,6 @@ exports[`t-out t-out escaped 1`] = `
 exports[`t-out t-out markedup 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -229,15 +216,14 @@ exports[`t-out t-out markedup 1`] = `
 exports[`t-out t-out on a node with a body, as a default 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { safeOutput, withDefault } = helpers;
+  let { safeOutput } = helpers;
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const b3 = text(\`nope\`);
-    const b2 = withDefault(safeOutput(ctx['var']), b3);
+    const b2 = safeOutput(ctx['var'], b3);
     return block1([], [b2]);
   }
 }"
@@ -246,16 +232,15 @@ exports[`t-out t-out on a node with a body, as a default 1`] = `
 exports[`t-out t-out on a node with a dom node in body, as a default 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { safeOutput, withDefault } = helpers;
+  let { safeOutput } = 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 = withDefault(safeOutput(ctx['var']), b3);
+    const b2 = safeOutput(ctx['var'], b3);
     return block1([], [b2]);
   }
 }"
@@ -264,7 +249,6 @@ exports[`t-out t-out on a node with a dom node in body, as a default 1`] = `
 exports[`t-out t-out switch escaped 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -280,7 +264,6 @@ exports[`t-out t-out switch escaped 1`] = `
 exports[`t-out t-out switch escaped on markup 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -296,7 +279,6 @@ exports[`t-out t-out switch escaped on markup 1`] = `
 exports[`t-out t-out switch markup 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -312,7 +294,6 @@ exports[`t-out t-out switch markup 1`] = `
 exports[`t-out t-out switch markup on bdom 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
   
@@ -329,7 +310,7 @@ exports[`t-out t-out switch markup on bdom 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     let b3,b5;
-    ctx[\`bdom\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`bdom\`] = new LazyValue(value1, ctx, this, node, key);
     if (ctx['hasBdom']) {
       const b4 = safeOutput(ctx['bdom']);
       b3 = block3([], [b4]);
@@ -345,7 +326,6 @@ exports[`t-out t-out switch markup on bdom 1`] = `
 exports[`t-out t-out switch markup on escaped 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -361,7 +341,6 @@ exports[`t-out t-out switch markup on escaped 1`] = `
 exports[`t-out t-out with a <t/> in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -374,7 +353,6 @@ exports[`t-out t-out with a <t/> in body 1`] = `
 exports[`t-out t-out with arbitrary object 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -390,7 +368,6 @@ exports[`t-out t-out with arbitrary object 1`] = `
 exports[`t-out t-out with arbitrary object 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -406,7 +383,6 @@ exports[`t-out t-out with arbitrary object 2 1`] = `
 exports[`t-out t-out with comment 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -422,7 +398,45 @@ exports[`t-out t-out with comment 1`] = `
 exports[`t-out t-out with just a t-set t-value in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
+  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 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;
   
@@ -435,7 +449,6 @@ exports[`t-out t-out with just a t-set t-value in body 1`] = `
 exports[`t-out variable 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -451,7 +464,6 @@ exports[`t-out variable 1`] = `
 exports[`t-out with a String class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -467,7 +479,6 @@ exports[`t-out with a String class 1`] = `
 exports[`t-out with an extended String class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -483,7 +494,6 @@ exports[`t-out with an extended String class 1`] = `
 exports[`t-raw is deprecated should warn 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -499,7 +509,6 @@ exports[`t-raw is deprecated should warn 1`] = `
 exports[`t-raw is deprecated t-out is actually called in t-raw's place 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   

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

@@ -3,7 +3,6 @@
 exports[`t-ref can get a dynamic ref on a node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
@@ -20,7 +19,6 @@ exports[`t-ref can get a dynamic ref on a node 1`] = `
 exports[`t-ref can get a dynamic ref on a node, alternate syntax 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
@@ -37,7 +35,6 @@ exports[`t-ref can get a dynamic ref on a node, alternate syntax 1`] = `
 exports[`t-ref can get a ref on a node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
@@ -53,7 +50,6 @@ exports[`t-ref can get a ref on a node 1`] = `
 exports[`t-ref ref in a t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
@@ -69,7 +65,6 @@ exports[`t-ref ref in a t-call 1`] = `
 exports[`t-ref ref in a t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>1<span block-ref=\\"0\\"/>2</div>\`);
@@ -85,7 +80,6 @@ exports[`t-ref ref in a t-call 2`] = `
 exports[`t-ref ref in a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -106,7 +100,6 @@ exports[`t-ref ref in a t-if 1`] = `
 exports[`t-ref refs in a loop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -135,7 +128,6 @@ exports[`t-ref refs in a loop 1`] = `
 exports[`t-ref two refs, one in a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/><p block-ref=\\"0\\"/></div>\`);

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

@@ -3,7 +3,6 @@
 exports[`t-set evaluate value expression 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -22,7 +21,6 @@ exports[`t-set evaluate value expression 1`] = `
 exports[`t-set evaluate value expression, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -41,7 +39,6 @@ exports[`t-set evaluate value expression, part 2 1`] = `
 exports[`t-set set from attribute literal (no outside div) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -57,7 +54,6 @@ exports[`t-set set from attribute literal (no outside div) 1`] = `
 exports[`t-set set from attribute literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -76,7 +72,6 @@ exports[`t-set set from attribute literal 1`] = `
 exports[`t-set set from attribute lookup 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -95,7 +90,6 @@ exports[`t-set set from attribute lookup 1`] = `
 exports[`t-set set from body literal (with t-if/t-else 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
   
@@ -112,7 +106,7 @@ exports[`t-set set from body literal (with t-if/t-else 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`value\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`value\`] = new LazyValue(value1, ctx, this, node, key);
     return text(ctx['value']);
   }
 }"
@@ -121,7 +115,6 @@ exports[`t-set set from body literal (with t-if/t-else 1`] = `
 exports[`t-set set from body literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -137,7 +130,6 @@ exports[`t-set set from body literal 1`] = `
 exports[`t-set set from body lookup 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
   
@@ -150,7 +142,7 @@ exports[`t-set set from body lookup 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`stuff\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`stuff\`] = new LazyValue(value1, ctx, this, node, key);
     let txt1 = ctx['stuff'];
     return block1([txt1]);
   }
@@ -160,7 +152,6 @@ exports[`t-set set from body lookup 1`] = `
 exports[`t-set set from empty body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -179,7 +170,6 @@ exports[`t-set set from empty body 1`] = `
 exports[`t-set t-set and t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -201,7 +191,6 @@ exports[`t-set t-set and t-if 1`] = `
 exports[`t-set t-set body is evaluated immediately 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, LazyValue, safeOutput } = helpers;
   
@@ -217,7 +206,7 @@ exports[`t-set t-set body is evaluated immediately 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"v1\\", 'before');
-    ctx[\`v2\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`v2\`] = new LazyValue(value1, ctx, this, node, key);
     setContextValue(ctx, \\"v1\\", 'after');
     const b3 = safeOutput(ctx['v2']);
     return block1([], [b3]);
@@ -228,7 +217,6 @@ exports[`t-set t-set body is evaluated immediately 1`] = `
 exports[`t-set t-set can't alter from within callee 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -250,7 +238,6 @@ exports[`t-set t-set can't alter from within callee 1`] = `
 exports[`t-set t-set can't alter from within callee 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -270,7 +257,6 @@ exports[`t-set t-set can't alter from within callee 2`] = `
 exports[`t-set t-set can't alter in t-call body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -296,7 +282,6 @@ exports[`t-set t-set can't alter in t-call body 1`] = `
 exports[`t-set t-set can't alter in t-call body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -316,7 +301,6 @@ exports[`t-set t-set can't alter in t-call body 2`] = `
 exports[`t-set t-set does not modify render context existing key values 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -335,7 +319,6 @@ exports[`t-set t-set does not modify render context existing key values 1`] = `
 exports[`t-set t-set evaluates an expression only once 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -355,7 +338,6 @@ exports[`t-set t-set evaluates an expression only once 1`] = `
 exports[`t-set t-set outside modified in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   
@@ -386,7 +368,6 @@ exports[`t-set t-set outside modified in t-foreach 1`] = `
 exports[`t-set t-set outside modified in t-foreach increment-after operator 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   
@@ -417,7 +398,6 @@ exports[`t-set t-set outside modified in t-foreach increment-after operator 1`]
 exports[`t-set t-set outside modified in t-foreach increment-before operator 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   
@@ -448,7 +428,6 @@ exports[`t-set t-set outside modified in t-foreach increment-before operator 1`]
 exports[`t-set t-set should reuse variable if possible 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   
@@ -478,7 +457,6 @@ exports[`t-set t-set should reuse variable if possible 1`] = `
 exports[`t-set t-set with content and sub t-esc 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
   
@@ -493,7 +471,7 @@ exports[`t-set t-set with content and sub t-esc 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`setvar\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`setvar\`] = new LazyValue(value1, ctx, this, node, key);
     let txt1 = ctx['setvar'];
     return block1([txt1]);
   }
@@ -503,7 +481,6 @@ exports[`t-set t-set with content and sub t-esc 1`] = `
 exports[`t-set t-set with t-value (falsy) and body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, LazyValue, safeOutput } = helpers;
   
@@ -520,7 +497,7 @@ exports[`t-set t-set with t-value (falsy) and body 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"v3\\", false);
     setContextValue(ctx, \\"v1\\", 'before');
-    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node));
+    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node, key));
     setContextValue(ctx, \\"v1\\", 'after');
     setContextValue(ctx, \\"v3\\", true);
     const b3 = safeOutput(ctx['v2']);
@@ -532,7 +509,6 @@ exports[`t-set t-set with t-value (falsy) and body 1`] = `
 exports[`t-set t-set with t-value (truthy) and body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, LazyValue, safeOutput } = helpers;
   
@@ -549,7 +525,7 @@ exports[`t-set t-set with t-value (truthy) and body 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"v3\\", 'Truthy');
     setContextValue(ctx, \\"v1\\", 'before');
-    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node));
+    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node, key));
     setContextValue(ctx, \\"v1\\", 'after');
     setContextValue(ctx, \\"v3\\", false);
     const b3 = safeOutput(ctx['v2']);
@@ -558,14 +534,36 @@ exports[`t-set t-set with t-value (truthy) and body 1`] = `
 }"
 `;
 
-exports[`t-set t-set, t-if, and mix of expression/body lookup, 1 1`] = `
+exports[`t-set t-set, multiple t-ifs, and a specific configuration 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-text-0/></div>\`);
+  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>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -584,11 +582,10 @@ exports[`t-set t-set, t-if, and mix of expression/body lookup, 1 1`] = `
 exports[`t-set t-set, t-if, and mix of expression/body lookup, 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-text-0/></div>\`);
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -607,7 +604,6 @@ exports[`t-set t-set, t-if, and mix of expression/body lookup, 2 1`] = `
 exports[`t-set t-set, t-if, and mix of expression/body lookup, 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -629,7 +625,6 @@ exports[`t-set t-set, t-if, and mix of expression/body lookup, 3 1`] = `
 exports[`t-set value priority (with non text body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
   
@@ -643,7 +638,7 @@ exports[`t-set value priority (with non text body 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`value\`] = withDefault(1, new LazyValue(value1, ctx, this, node));
+    ctx[\`value\`] = withDefault(1, new LazyValue(value1, ctx, this, node, key));
     let txt1 = ctx['value'];
     return block1([txt1]);
   }
@@ -653,7 +648,6 @@ exports[`t-set value priority (with non text body 1`] = `
 exports[`t-set value priority 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   

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

@@ -3,7 +3,6 @@
 exports[`qweb t-tag can fallback if falsy tag 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = tag => createBlock(\`<\${tag || 'fallback'}/>\`);
@@ -18,7 +17,6 @@ exports[`qweb t-tag can fallback if falsy tag 1`] = `
 exports[`qweb t-tag can update 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = tag => createBlock(\`<\${tag || 't'}/>\`);
@@ -33,7 +31,6 @@ exports[`qweb t-tag can update 1`] = `
 exports[`qweb t-tag simple usecases 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = tag => createBlock(\`<\${tag || 't'}/>\`);
@@ -48,7 +45,6 @@ exports[`qweb t-tag simple usecases 1`] = `
 exports[`qweb t-tag simple usecases 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = tag => createBlock(\`<\${tag || 't'}>text</\${tag || 't'}>\`);
@@ -63,7 +59,6 @@ exports[`qweb t-tag simple usecases 2`] = `
 exports[`qweb t-tag with multiple attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = tag => createBlock(\`<\${tag || 't'} class=\\"blueberry\\" taste=\\"raspberry\\">gooseberry</\${tag || 't'}>\`);
@@ -78,7 +73,6 @@ exports[`qweb t-tag with multiple attributes 1`] = `
 exports[`qweb t-tag with multiple child nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = tag => createBlock(\`<\${tag || 't'}> pear <span>apple</span> strawberry </\${tag || 't'}>\`);
@@ -93,7 +87,6 @@ exports[`qweb t-tag with multiple child nodes 1`] = `
 exports[`qweb t-tag with multiple t-tag in same template 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = tag => createBlock(\`<\${tag || 't'}><block-child-0/></\${tag || 't'}>\`);
@@ -111,7 +104,6 @@ exports[`qweb t-tag with multiple t-tag in same template 1`] = `
 exports[`qweb t-tag with multiple t-tag in same template, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = tag => createBlock(\`<\${tag || 't'}>bar</\${tag || 't'}>\`);

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

@@ -3,7 +3,6 @@
 exports[`loading templates addTemplates does not modify its xml document in place 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -18,7 +17,6 @@ exports[`loading templates addTemplates does not modify its xml document in plac
 exports[`loading templates can initialize qweb with a string 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>jupiler</div>\`);
@@ -32,7 +30,6 @@ exports[`loading templates can initialize qweb with a string 1`] = `
 exports[`loading templates can initialize qweb with an XMLDocument 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>jupiler</div>\`);
@@ -46,7 +43,6 @@ exports[`loading templates can initialize qweb with an XMLDocument 1`] = `
 exports[`loading templates can load a few templates from a xml string 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`items\`);
   
@@ -62,7 +58,6 @@ exports[`loading templates can load a few templates from a xml string 1`] = `
 exports[`loading templates can load a few templates from a xml string 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = createBlock(\`<li>ok</li>\`);
@@ -79,7 +74,6 @@ exports[`loading templates can load a few templates from a xml string 2`] = `
 exports[`loading templates can load a few templates from an XMLDocument 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`items\`);
   
@@ -95,7 +89,6 @@ exports[`loading templates can load a few templates from an XMLDocument 1`] = `
 exports[`loading templates can load a few templates from an XMLDocument 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = createBlock(\`<li>ok</li>\`);

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

@@ -3,7 +3,6 @@
 exports[`translation support can set and remove translatable attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div tomato=\\"word\\" potato=\\"mot\\" title=\\"mot\\" label=\\"word\\">text</div>\`);
@@ -17,7 +16,6 @@ exports[`translation support can set and remove translatable attributes 1`] = `
 exports[`translation support can translate node content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>mot</div>\`);
@@ -31,7 +29,6 @@ exports[`translation support can translate node content 1`] = `
 exports[`translation support does not translate node content if disabled 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><span>mot</span><span>word</span></div>\`);
@@ -45,7 +42,6 @@ exports[`translation support does not translate node content if disabled 1`] = `
 exports[`translation support some attributes are translated 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><p label=\\"mot\\">mot</p><p title=\\"mot\\">mot</p><p placeholder=\\"mot\\">mot</p><p alt=\\"mot\\">mot</p><p something=\\"word\\">mot</p></div>\`);
@@ -59,7 +55,6 @@ exports[`translation support some attributes are translated 1`] = `
 exports[`translation support translation is done on the trimmed text, with extra spaces readded after 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div> mot </div>\`);

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

@@ -3,7 +3,6 @@
 exports[`white space handling consecutives whitespaces are condensed into a single space 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div> abc </div>\`);
@@ -17,7 +16,6 @@ exports[`white space handling consecutives whitespaces are condensed into a sing
 exports[`white space handling nothing is done in pre tags 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<pre>   </pre>\`);
@@ -31,7 +29,6 @@ exports[`white space handling nothing is done in pre tags 1`] = `
 exports[`white space handling nothing is done in pre tags 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<pre>
@@ -47,7 +44,6 @@ exports[`white space handling nothing is done in pre tags 2`] = `
 exports[`white space handling nothing is done in pre tags 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<pre>
@@ -63,7 +59,6 @@ exports[`white space handling nothing is done in pre tags 3`] = `
 exports[`white space handling pre inside a div with a new line 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><pre>SomeText</pre></div>\`);
@@ -77,7 +72,6 @@ exports[`white space handling pre inside a div with a new line 1`] = `
 exports[`white space handling white space only text nodes are condensed into a single space 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div> </div>\`);
@@ -91,7 +85,6 @@ exports[`white space handling white space only text nodes are condensed into a s
 exports[`white space handling whitespace only text nodes with newlines are removed 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><span>abc</span></div>\`);

tests/compiler/attributes.test.ts

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

tests/compiler/t_esc.test.ts

@@ -67,6 +67,21 @@ 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,6 +47,21 @@ 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,6 +33,22 @@ 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

@@ -3,7 +3,6 @@
 exports[`basics GrandChild display is controlled by its GrandParent 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(null, false, false, false, false);
   
@@ -17,7 +16,6 @@ exports[`basics GrandChild display is controlled by its GrandParent 1`] = `
 exports[`basics GrandChild display is controlled by its GrandParent 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
   
@@ -34,7 +32,6 @@ exports[`basics GrandChild display is controlled by its GrandParent 2`] = `
 exports[`basics GrandChild display is controlled by its GrandParent 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -48,7 +45,6 @@ exports[`basics GrandChild display is controlled by its GrandParent 3`] = `
 exports[`basics Multi root component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = createBlock(\`<span>1</span>\`);
@@ -66,7 +62,6 @@ exports[`basics Multi root component 1`] = `
 exports[`basics a class component inside a class component, no external dom 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -79,7 +74,6 @@ exports[`basics a class component inside a class component, no external dom 1`]
 exports[`basics a class component inside a class component, no external dom 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>simple vnode</div>\`);
@@ -93,7 +87,6 @@ exports[`basics a class component inside a class component, no external dom 2`]
 exports[`basics a component cannot be mounted in a detached node (even if node is detached later) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -107,7 +100,6 @@ exports[`basics a component cannot be mounted in a detached node (even if node i
 exports[`basics a component inside a component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -123,7 +115,6 @@ exports[`basics a component inside a component 1`] = `
 exports[`basics a component inside a component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>simple vnode</div>\`);
@@ -137,7 +128,6 @@ exports[`basics a component inside a component 2`] = `
 exports[`basics can be clicked on and updated 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
@@ -154,7 +144,6 @@ exports[`basics can be clicked on and updated 1`] = `
 exports[`basics can handle empty props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -170,7 +159,6 @@ exports[`basics can handle empty props 1`] = `
 exports[`basics can handle empty props 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -185,7 +173,6 @@ exports[`basics can handle empty props 2`] = `
 exports[`basics can inject values in tagged templates 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`__template__999\`);
   
@@ -198,7 +185,6 @@ exports[`basics can inject values in tagged templates 1`] = `
 exports[`basics can inject values in tagged templates 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -213,7 +199,6 @@ exports[`basics can inject values in tagged templates 2`] = `
 exports[`basics can mount a component with just some text 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -225,7 +210,6 @@ exports[`basics can mount a component with just some text 1`] = `
 exports[`basics can mount a component with no text 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -237,7 +221,6 @@ exports[`basics can mount a component with no text 1`] = `
 exports[`basics can mount a simple component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>simple vnode</span>\`);
@@ -251,7 +234,6 @@ exports[`basics can mount a simple component 1`] = `
 exports[`basics can mount a simple component with multiple roots 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = createBlock(\`<span/>\`);
@@ -268,7 +250,6 @@ exports[`basics can mount a simple component with multiple roots 1`] = `
 exports[`basics can mount a simple component with props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -283,7 +264,6 @@ exports[`basics can mount a simple component with props 1`] = `
 exports[`basics child can be updated 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -296,7 +276,6 @@ exports[`basics child can be updated 1`] = `
 exports[`basics child can be updated 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -308,7 +287,6 @@ exports[`basics child can be updated 2`] = `
 exports[`basics class component with dynamic text 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>My value: <block-text-0/></span>\`);
@@ -323,7 +301,6 @@ exports[`basics class component with dynamic text 1`] = `
 exports[`basics class parent, class child component with props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -336,7 +313,6 @@ exports[`basics class parent, class child component with props 1`] = `
 exports[`basics class parent, class child component with props 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -351,7 +327,6 @@ exports[`basics class parent, class child component with props 2`] = `
 exports[`basics component children doesn't leak (if case) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -368,7 +343,6 @@ exports[`basics component children doesn't leak (if case) 1`] = `
 exports[`basics component children doesn't leak (if case) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -382,7 +356,6 @@ exports[`basics component children doesn't leak (if case) 2`] = `
 exports[`basics component children doesn't leak (t-key case) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -396,7 +369,6 @@ exports[`basics component children doesn't leak (t-key case) 1`] = `
 exports[`basics component children doesn't leak (t-key case) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -410,7 +382,6 @@ exports[`basics component children doesn't leak (t-key case) 2`] = `
 exports[`basics component with dynamic content can be updated 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -425,7 +396,6 @@ exports[`basics component with dynamic content can be updated 1`] = `
 exports[`basics do not remove previously rendered dom if not necessary 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -439,7 +409,6 @@ exports[`basics do not remove previously rendered dom if not necessary 1`] = `
 exports[`basics do not remove previously rendered dom if not necessary, variation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><h1>h1</h1><span><block-text-0/></span></div>\`);
@@ -454,7 +423,6 @@ exports[`basics do not remove previously rendered dom if not necessary, variatio
 exports[`basics higher order components parent and child 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -467,7 +435,6 @@ exports[`basics higher order components parent and child 1`] = `
 exports[`basics higher order components parent and child 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ChildA\`, true, false, false, true);
   const comp2 = app.createComponent(\`ChildB\`, true, false, false, true);
@@ -487,7 +454,6 @@ exports[`basics higher order components parent and child 2`] = `
 exports[`basics higher order components parent and child 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>a</div>\`);
@@ -501,7 +467,6 @@ exports[`basics higher order components parent and child 3`] = `
 exports[`basics higher order components parent and child 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>b</span>\`);
@@ -515,7 +480,6 @@ exports[`basics higher order components parent and child 4`] = `
 exports[`basics list of two sub components inside other nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`SubWidget\`, true, false, false, true);
@@ -543,7 +507,6 @@ exports[`basics list of two sub components inside other nodes 1`] = `
 exports[`basics list of two sub components inside other nodes 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>asdf</span>\`);
@@ -557,7 +520,6 @@ exports[`basics list of two sub components inside other nodes 2`] = `
 exports[`basics parent, child and grandchild 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -570,7 +532,6 @@ exports[`basics parent, child and grandchild 1`] = `
 exports[`basics parent, child and grandchild 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
   
@@ -583,7 +544,6 @@ exports[`basics parent, child and grandchild 2`] = `
 exports[`basics parent, child and grandchild 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>hey</div>\`);
@@ -597,7 +557,6 @@ exports[`basics parent, child and grandchild 3`] = `
 exports[`basics props is set on root component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>simple vnode</span>\`);
@@ -611,7 +570,6 @@ exports[`basics props is set on root component 1`] = `
 exports[`basics props value are own property of props object 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>simple vnode</span>\`);
@@ -625,7 +583,6 @@ exports[`basics props value are own property of props object 1`] = `
 exports[`basics props value are own property of props object, even with default values 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>simple vnode</span>\`);
@@ -639,7 +596,6 @@ exports[`basics props value are own property of props object, even with default
 exports[`basics reconciliation alg is not confused in some specific situation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   const comp2 = app.createComponent(\`Child\`, true, false, false, true);
@@ -658,7 +614,6 @@ exports[`basics reconciliation alg is not confused in some specific situation 1`
 exports[`basics reconciliation alg is not confused in some specific situation 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>child</span>\`);
@@ -672,7 +627,6 @@ exports[`basics reconciliation alg is not confused in some specific situation 2`
 exports[`basics rerendering a widget with a sub widget 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Counter\`, true, false, false, true);
   
@@ -685,7 +639,6 @@ exports[`basics rerendering a widget with a sub widget 1`] = `
 exports[`basics rerendering a widget with a sub widget 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
@@ -702,7 +655,6 @@ exports[`basics rerendering a widget with a sub widget 2`] = `
 exports[`basics same t-keys in two different places 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   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);
@@ -722,7 +674,6 @@ exports[`basics same t-keys in two different places 1`] = `
 exports[`basics same t-keys in two different places 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -737,7 +688,6 @@ exports[`basics same t-keys in two different places 2`] = `
 exports[`basics simple component with a dynamic text 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -752,7 +702,6 @@ exports[`basics simple component with a dynamic text 1`] = `
 exports[`basics simple component, useState 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -767,7 +716,6 @@ exports[`basics simple component, useState 1`] = `
 exports[`basics some simple sanity checks (el/status) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>simple vnode</span>\`);
@@ -781,7 +729,6 @@ exports[`basics some simple sanity checks (el/status) 1`] = `
 exports[`basics sub components between t-ifs 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -809,7 +756,6 @@ exports[`basics sub components between t-ifs 1`] = `
 exports[`basics sub components between t-ifs 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>child</span>\`);
@@ -823,7 +769,6 @@ exports[`basics sub components between t-ifs 2`] = `
 exports[`basics t-elif works with t-component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -845,7 +790,6 @@ exports[`basics t-elif works with t-component 1`] = `
 exports[`basics t-elif works with t-component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>hey</span>\`);
@@ -859,7 +803,6 @@ exports[`basics t-elif works with t-component 2`] = `
 exports[`basics t-else with empty string works with t-component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -881,7 +824,6 @@ exports[`basics t-else with empty string works with t-component 1`] = `
 exports[`basics t-else with empty string works with t-component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>hey</span>\`);
@@ -895,7 +837,6 @@ exports[`basics t-else with empty string works with t-component 2`] = `
 exports[`basics t-else works with t-component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -917,7 +858,6 @@ exports[`basics t-else works with t-component 1`] = `
 exports[`basics t-else works with t-component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>hey</span>\`);
@@ -931,7 +871,6 @@ exports[`basics t-else works with t-component 2`] = `
 exports[`basics t-if works with t-component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -950,7 +889,6 @@ exports[`basics t-if works with t-component 1`] = `
 exports[`basics t-if works with t-component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>hey</span>\`);
@@ -964,7 +902,6 @@ exports[`basics t-if works with t-component 2`] = `
 exports[`basics t-key on a component with t-if, and a sibling component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   const comp2 = app.createComponent(\`Child\`, true, false, false, true);
@@ -986,7 +923,6 @@ exports[`basics t-key on a component with t-if, and a sibling component 1`] = `
 exports[`basics t-key on a component with t-if, and a sibling component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>child</span>\`);
@@ -1000,7 +936,6 @@ exports[`basics t-key on a component with t-if, and a sibling component 2`] = `
 exports[`basics text after a conditional component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -1020,7 +955,6 @@ exports[`basics text after a conditional component 1`] = `
 exports[`basics text after a conditional component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p>simple vnode</p>\`);
@@ -1034,7 +968,6 @@ exports[`basics text after a conditional component 2`] = `
 exports[`basics three level of components with collapsing root nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -1047,7 +980,6 @@ exports[`basics three level of components with collapsing root nodes 1`] = `
 exports[`basics three level of components with collapsing root nodes 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
   
@@ -1060,7 +992,6 @@ exports[`basics three level of components with collapsing root nodes 2`] = `
 exports[`basics three level of components with collapsing root nodes 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>2</div>\`);
@@ -1074,7 +1005,6 @@ exports[`basics three level of components with collapsing root nodes 3`] = `
 exports[`basics two child components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   const comp2 = app.createComponent(\`Child\`, true, false, false, true);
@@ -1090,7 +1020,6 @@ exports[`basics two child components 1`] = `
 exports[`basics two child components 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>simple vnode</div>\`);
@@ -1104,7 +1033,6 @@ exports[`basics two child components 2`] = `
 exports[`basics update props of component without concrete own node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, true, false);
   
@@ -1121,7 +1049,6 @@ exports[`basics update props of component without concrete own node 1`] = `
 exports[`basics update props of component without concrete own node 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Custom\`, true, false, false, false);
   
@@ -1135,7 +1062,6 @@ exports[`basics update props of component without concrete own node 2`] = `
 exports[`basics update props of component without concrete own node 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"widget-subkey\\"><block-text-0/>__<block-text-1/></div>\`);
@@ -1151,7 +1077,6 @@ exports[`basics update props of component without concrete own node 3`] = `
 exports[`basics updating a component with t-foreach as root 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -1171,7 +1096,6 @@ exports[`basics updating a component with t-foreach as root 1`] = `
 exports[`basics updating widget immediately 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -1184,7 +1108,6 @@ exports[`basics updating widget immediately 1`] = `
 exports[`basics updating widget immediately 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>abc<block-child-0/></span>\`);
@@ -1202,7 +1125,6 @@ exports[`basics updating widget immediately 2`] = `
 exports[`basics widget after a t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, true);
@@ -1229,7 +1151,6 @@ exports[`basics widget after a t-foreach 1`] = `
 exports[`basics widget after a t-foreach 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -1243,7 +1164,6 @@ exports[`basics widget after a t-foreach 2`] = `
 exports[`basics zero or one child components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -1260,7 +1180,6 @@ exports[`basics zero or one child components 1`] = `
 exports[`basics zero or one child components 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>simple vnode</div>\`);
@@ -1274,7 +1193,6 @@ exports[`basics zero or one child components 2`] = `
 exports[`mount targets can mount a component (with default position='last-child') 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>app</div>\`);
@@ -1288,7 +1206,6 @@ exports[`mount targets can mount a component (with default position='last-child'
 exports[`mount targets can mount a component (with position='first-child') 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>app</div>\`);
@@ -1302,7 +1219,6 @@ exports[`mount targets can mount a component (with position='first-child') 1`] =
 exports[`mount targets default mount option is 'last-child' 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>app</div>\`);
@@ -1316,7 +1232,6 @@ exports[`mount targets default mount option is 'last-child' 1`] = `
 exports[`mount targets mount function: can mount a component (with default position='last-child') 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>app</div>\`);
@@ -1330,7 +1245,6 @@ exports[`mount targets mount function: can mount a component (with default posit
 exports[`support svg components add proper namespace to svg 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`GComp\`, true, false, false, true);
   
@@ -1346,7 +1260,6 @@ exports[`support svg components add proper namespace to svg 1`] = `
 exports[`support svg components add proper namespace to svg 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<g block-ns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/></g>\`);
@@ -1360,7 +1273,6 @@ exports[`support svg components add proper namespace to svg 2`] = `
 exports[`t-out in components can render list of t-out  1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, safeOutput, withKey } = helpers;
   
@@ -1385,7 +1297,6 @@ exports[`t-out in components can render list of t-out  1`] = `
 exports[`t-out in components can switch the contents of two t-out repeatedly 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -1397,10 +1308,21 @@ 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
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   

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

@@ -3,7 +3,6 @@
 exports[`Cascading renders after microtaskTick 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -27,7 +26,6 @@ exports[`Cascading renders after microtaskTick 1`] = `
 exports[`Cascading renders after microtaskTick 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Element\`, true, false, false, false);
@@ -48,7 +46,6 @@ exports[`Cascading renders after microtaskTick 2`] = `
 exports[`Cascading renders after microtaskTick 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -60,7 +57,6 @@ exports[`Cascading renders after microtaskTick 3`] = `
 exports[`another scenario with delayed rendering 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
@@ -78,7 +74,6 @@ exports[`another scenario with delayed rendering 1`] = `
 exports[`another scenario with delayed rendering 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`C\`, true, false, false, true);
   
@@ -93,7 +88,6 @@ exports[`another scenario with delayed rendering 2`] = `
 exports[`another scenario with delayed rendering 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
@@ -109,7 +103,6 @@ exports[`another scenario with delayed rendering 3`] = `
 exports[`async rendering destroying a widget before start is over 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -123,7 +116,6 @@ exports[`async rendering destroying a widget before start is over 1`] = `
 exports[`calling render in destroy 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
@@ -137,7 +129,6 @@ exports[`calling render in destroy 1`] = `
 exports[`calling render in destroy 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`C\`, true, false, false, false);
   
@@ -150,7 +141,6 @@ exports[`calling render in destroy 2`] = `
 exports[`calling render in destroy 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -165,7 +155,6 @@ exports[`calling render in destroy 3`] = `
 exports[`change state and call manually render: no unnecessary rendering 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -180,7 +169,6 @@ exports[`change state and call manually render: no unnecessary rendering 1`] = `
 exports[`changing state before first render does not trigger a render (with parent) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`TestW\`, true, false, false, true);
   
@@ -199,7 +187,6 @@ exports[`changing state before first render does not trigger a render (with pare
 exports[`changing state before first render does not trigger a render (with parent) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -214,7 +201,6 @@ exports[`changing state before first render does not trigger a render (with pare
 exports[`changing state before first render does not trigger a render 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -229,7 +215,6 @@ exports[`changing state before first render does not trigger a render 1`] = `
 exports[`concurrent renderings scenario 1 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   
@@ -245,7 +230,6 @@ exports[`concurrent renderings scenario 1 1`] = `
 exports[`concurrent renderings scenario 1 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
   
@@ -261,7 +245,6 @@ exports[`concurrent renderings scenario 1 2`] = `
 exports[`concurrent renderings scenario 1 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
@@ -277,7 +260,6 @@ exports[`concurrent renderings scenario 1 3`] = `
 exports[`concurrent renderings scenario 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   
@@ -294,7 +276,6 @@ exports[`concurrent renderings scenario 2 1`] = `
 exports[`concurrent renderings scenario 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
   
@@ -310,7 +291,6 @@ exports[`concurrent renderings scenario 2 2`] = `
 exports[`concurrent renderings scenario 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
@@ -326,7 +306,6 @@ exports[`concurrent renderings scenario 2 3`] = `
 exports[`concurrent renderings scenario 2bis 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   
@@ -342,7 +321,6 @@ exports[`concurrent renderings scenario 2bis 1`] = `
 exports[`concurrent renderings scenario 2bis 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
   
@@ -358,7 +336,6 @@ exports[`concurrent renderings scenario 2bis 2`] = `
 exports[`concurrent renderings scenario 2bis 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
@@ -374,7 +351,6 @@ exports[`concurrent renderings scenario 2bis 3`] = `
 exports[`concurrent renderings scenario 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   
@@ -390,7 +366,6 @@ exports[`concurrent renderings scenario 3 1`] = `
 exports[`concurrent renderings scenario 3 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
   
@@ -406,7 +381,6 @@ exports[`concurrent renderings scenario 3 2`] = `
 exports[`concurrent renderings scenario 3 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentD\`, true, false, false, false);
   
@@ -422,7 +396,6 @@ exports[`concurrent renderings scenario 3 3`] = `
 exports[`concurrent renderings scenario 3 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<i><block-text-0/><block-text-1/></i>\`);
@@ -438,7 +411,6 @@ exports[`concurrent renderings scenario 3 4`] = `
 exports[`concurrent renderings scenario 4 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   
@@ -454,7 +426,6 @@ exports[`concurrent renderings scenario 4 1`] = `
 exports[`concurrent renderings scenario 4 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
   
@@ -470,7 +441,6 @@ exports[`concurrent renderings scenario 4 2`] = `
 exports[`concurrent renderings scenario 4 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentD\`, true, false, false, false);
   
@@ -486,7 +456,6 @@ exports[`concurrent renderings scenario 4 3`] = `
 exports[`concurrent renderings scenario 4 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<i><block-text-0/><block-text-1/></i>\`);
@@ -502,7 +471,6 @@ exports[`concurrent renderings scenario 4 4`] = `
 exports[`concurrent renderings scenario 5 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   
@@ -518,7 +486,6 @@ exports[`concurrent renderings scenario 5 1`] = `
 exports[`concurrent renderings scenario 5 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p><block-text-0/></p>\`);
@@ -533,7 +500,6 @@ exports[`concurrent renderings scenario 5 2`] = `
 exports[`concurrent renderings scenario 6 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   
@@ -549,7 +515,6 @@ exports[`concurrent renderings scenario 6 1`] = `
 exports[`concurrent renderings scenario 6 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p><block-text-0/></p>\`);
@@ -564,7 +529,6 @@ exports[`concurrent renderings scenario 6 2`] = `
 exports[`concurrent renderings scenario 7 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   
@@ -580,7 +544,6 @@ exports[`concurrent renderings scenario 7 1`] = `
 exports[`concurrent renderings scenario 7 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p><block-text-0/><block-text-1/></p>\`);
@@ -596,7 +559,6 @@ exports[`concurrent renderings scenario 7 2`] = `
 exports[`concurrent renderings scenario 8 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   
@@ -612,7 +574,6 @@ exports[`concurrent renderings scenario 8 1`] = `
 exports[`concurrent renderings scenario 8 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p><block-text-0/><block-text-1/></p>\`);
@@ -628,7 +589,6 @@ exports[`concurrent renderings scenario 8 2`] = `
 exports[`concurrent renderings scenario 9 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   const comp2 = app.createComponent(\`ComponentC\`, true, false, false, false);
@@ -647,7 +607,6 @@ exports[`concurrent renderings scenario 9 1`] = `
 exports[`concurrent renderings scenario 9 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<b><block-text-0/></b>\`);
@@ -662,7 +621,6 @@ exports[`concurrent renderings scenario 9 2`] = `
 exports[`concurrent renderings scenario 9 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentD\`, true, false, false, false);
   
@@ -678,7 +636,6 @@ exports[`concurrent renderings scenario 9 3`] = `
 exports[`concurrent renderings scenario 9 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
@@ -694,7 +651,6 @@ exports[`concurrent renderings scenario 9 4`] = `
 exports[`concurrent renderings scenario 10 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
   
@@ -710,7 +666,6 @@ exports[`concurrent renderings scenario 10 1`] = `
 exports[`concurrent renderings scenario 10 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
   
@@ -729,7 +684,6 @@ exports[`concurrent renderings scenario 10 2`] = `
 exports[`concurrent renderings scenario 10 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -744,7 +698,6 @@ exports[`concurrent renderings scenario 10 3`] = `
 exports[`concurrent renderings scenario 11 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -760,7 +713,6 @@ exports[`concurrent renderings scenario 11 1`] = `
 exports[`concurrent renderings scenario 11 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/>|<block-text-1/></span>\`);
@@ -776,7 +728,6 @@ exports[`concurrent renderings scenario 11 2`] = `
 exports[`concurrent renderings scenario 12 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -792,7 +743,6 @@ exports[`concurrent renderings scenario 12 1`] = `
 exports[`concurrent renderings scenario 12 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -807,7 +757,6 @@ exports[`concurrent renderings scenario 12 2`] = `
 exports[`concurrent renderings scenario 13 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   const comp2 = app.createComponent(\`Child\`, true, false, false, true);
@@ -828,7 +777,6 @@ exports[`concurrent renderings scenario 13 1`] = `
 exports[`concurrent renderings scenario 13 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -843,7 +791,6 @@ exports[`concurrent renderings scenario 13 2`] = `
 exports[`concurrent renderings scenario 14 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
@@ -859,7 +806,6 @@ exports[`concurrent renderings scenario 14 1`] = `
 exports[`concurrent renderings scenario 14 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`C\`, true, false, false, false);
   
@@ -875,7 +821,6 @@ exports[`concurrent renderings scenario 14 2`] = `
 exports[`concurrent renderings scenario 14 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p><span><block-text-0/></span><span><block-text-1/></span><span><block-text-2/></span></p>\`);
@@ -892,7 +837,6 @@ exports[`concurrent renderings scenario 14 3`] = `
 exports[`concurrent renderings scenario 15 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
@@ -908,7 +852,6 @@ exports[`concurrent renderings scenario 15 1`] = `
 exports[`concurrent renderings scenario 15 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`C\`, true, false, false, false);
   
@@ -924,7 +867,6 @@ exports[`concurrent renderings scenario 15 2`] = `
 exports[`concurrent renderings scenario 15 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p><span><block-text-0/></span><span><block-text-1/></span><span><block-text-2/></span></p>\`);
@@ -941,7 +883,6 @@ exports[`concurrent renderings scenario 15 3`] = `
 exports[`concurrent renderings scenario 16 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
@@ -954,7 +895,6 @@ exports[`concurrent renderings scenario 16 1`] = `
 exports[`concurrent renderings scenario 16 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`C\`, true, false, false, false);
   
@@ -967,7 +907,6 @@ exports[`concurrent renderings scenario 16 2`] = `
 exports[`concurrent renderings scenario 16 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`D\`, true, false, false, true);
   
@@ -990,7 +929,6 @@ exports[`concurrent renderings scenario 16 3`] = `
 exports[`concurrent renderings scenario 16 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -1002,7 +940,6 @@ exports[`concurrent renderings scenario 16 4`] = `
 exports[`creating two async components, scenario 1 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ChildA\`, true, false, false, true);
   const comp2 = app.createComponent(\`ChildB\`, true, false, false, true);
@@ -1023,7 +960,6 @@ exports[`creating two async components, scenario 1 1`] = `
 exports[`creating two async components, scenario 1 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -1038,7 +974,6 @@ exports[`creating two async components, scenario 1 2`] = `
 exports[`creating two async components, scenario 1 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>b</span>\`);
@@ -1052,7 +987,6 @@ exports[`creating two async components, scenario 1 3`] = `
 exports[`creating two async components, scenario 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
   const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
@@ -1073,7 +1007,6 @@ exports[`creating two async components, scenario 2 1`] = `
 exports[`creating two async components, scenario 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>a<block-text-0/></span>\`);
@@ -1088,7 +1021,6 @@ exports[`creating two async components, scenario 2 2`] = `
 exports[`creating two async components, scenario 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>b<block-text-0/></span>\`);
@@ -1103,7 +1035,6 @@ exports[`creating two async components, scenario 2 3`] = `
 exports[`creating two async components, scenario 3 (patching in the same frame) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
   const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
@@ -1124,7 +1055,6 @@ exports[`creating two async components, scenario 3 (patching in the same frame)
 exports[`creating two async components, scenario 3 (patching in the same frame) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>a<block-text-0/></span>\`);
@@ -1139,7 +1069,6 @@ exports[`creating two async components, scenario 3 (patching in the same frame)
 exports[`creating two async components, scenario 3 (patching in the same frame) 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>b<block-text-0/></span>\`);
@@ -1154,7 +1083,6 @@ exports[`creating two async components, scenario 3 (patching in the same frame)
 exports[`delay willUpdateProps 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -1167,7 +1095,6 @@ exports[`delay willUpdateProps 1`] = `
 exports[`delay willUpdateProps 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -1182,7 +1109,6 @@ exports[`delay willUpdateProps 2`] = `
 exports[`delay willUpdateProps with rendering grandchild 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Parent\`, true, false, false, false);
   
@@ -1195,7 +1121,6 @@ exports[`delay willUpdateProps with rendering grandchild 1`] = `
 exports[`delay willUpdateProps with rendering grandchild 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`DelayedChild\`, true, false, false, false);
   const comp2 = app.createComponent(\`ReactiveChild\`, true, false, false, true);
@@ -1211,7 +1136,6 @@ exports[`delay willUpdateProps with rendering grandchild 2`] = `
 exports[`delay willUpdateProps with rendering grandchild 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -1226,7 +1150,6 @@ exports[`delay willUpdateProps with rendering grandchild 3`] = `
 exports[`delay willUpdateProps with rendering grandchild 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -1240,7 +1163,6 @@ exports[`delay willUpdateProps with rendering grandchild 4`] = `
 exports[`delayed fiber does not get rendered if it was cancelled 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`B\`, true, false, false, true);
   
@@ -1255,7 +1177,6 @@ exports[`delayed fiber does not get rendered if it was cancelled 1`] = `
 exports[`delayed fiber does not get rendered if it was cancelled 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`C\`, true, false, false, true);
   
@@ -1270,7 +1191,6 @@ exports[`delayed fiber does not get rendered if it was cancelled 2`] = `
 exports[`delayed fiber does not get rendered if it was cancelled 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`D\`, true, false, false, true);
   
@@ -1285,7 +1205,6 @@ exports[`delayed fiber does not get rendered if it was cancelled 3`] = `
 exports[`delayed fiber does not get rendered if it was cancelled 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -1297,7 +1216,6 @@ exports[`delayed fiber does not get rendered if it was cancelled 4`] = `
 exports[`delayed rendering, but then initial rendering is cancelled by yet another render 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
@@ -1310,7 +1228,6 @@ exports[`delayed rendering, but then initial rendering is cancelled by yet anoth
 exports[`delayed rendering, but then initial rendering is cancelled by yet another render 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`C\`, true, false, false, false);
   
@@ -1323,7 +1240,6 @@ exports[`delayed rendering, but then initial rendering is cancelled by yet anoth
 exports[`delayed rendering, but then initial rendering is cancelled by yet another render 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`D\`, true, false, false, true);
   
@@ -1341,7 +1257,6 @@ exports[`delayed rendering, but then initial rendering is cancelled by yet anoth
 exports[`delayed rendering, but then initial rendering is cancelled by yet another render 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
@@ -1357,7 +1272,6 @@ exports[`delayed rendering, but then initial rendering is cancelled by yet anoth
 exports[`delayed rendering, destruction, stuff happens 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
@@ -1372,7 +1286,6 @@ exports[`delayed rendering, destruction, stuff happens 1`] = `
 exports[`delayed rendering, destruction, stuff happens 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`C\`, true, false, false, false);
   
@@ -1390,7 +1303,6 @@ exports[`delayed rendering, destruction, stuff happens 2`] = `
 exports[`delayed rendering, destruction, stuff happens 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`D\`, true, false, false, true);
   
@@ -1409,7 +1321,6 @@ exports[`delayed rendering, destruction, stuff happens 3`] = `
 exports[`delayed rendering, destruction, stuff happens 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block3 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
@@ -1427,7 +1338,6 @@ exports[`delayed rendering, destruction, stuff happens 4`] = `
 exports[`delayed rendering, reusing fiber and stuff 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
@@ -1440,7 +1350,6 @@ exports[`delayed rendering, reusing fiber and stuff 1`] = `
 exports[`delayed rendering, reusing fiber and stuff 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`C\`, true, false, false, true);
   
@@ -1455,7 +1364,6 @@ exports[`delayed rendering, reusing fiber and stuff 2`] = `
 exports[`delayed rendering, reusing fiber and stuff 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
@@ -1471,7 +1379,6 @@ exports[`delayed rendering, reusing fiber and stuff 3`] = `
 exports[`delayed rendering, reusing fiber then component is destroyed and  stuff 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
@@ -1489,7 +1396,6 @@ exports[`delayed rendering, reusing fiber then component is destroyed and  stuff
 exports[`delayed rendering, reusing fiber then component is destroyed and  stuff 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`C\`, true, false, false, true);
   
@@ -1504,7 +1410,6 @@ exports[`delayed rendering, reusing fiber then component is destroyed and  stuff
 exports[`delayed rendering, reusing fiber then component is destroyed and  stuff 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
@@ -1520,7 +1425,6 @@ exports[`delayed rendering, reusing fiber then component is destroyed and  stuff
 exports[`delayed rendering, then component is destroyed and  stuff 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
@@ -1533,7 +1437,6 @@ exports[`delayed rendering, then component is destroyed and  stuff 1`] = `
 exports[`delayed rendering, then component is destroyed and  stuff 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`C\`, true, false, false, true);
   
@@ -1551,7 +1454,6 @@ exports[`delayed rendering, then component is destroyed and  stuff 2`] = `
 exports[`delayed rendering, then component is destroyed and  stuff 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
@@ -1567,7 +1469,6 @@ exports[`delayed rendering, then component is destroyed and  stuff 3`] = `
 exports[`destroyed component causes other soon to be destroyed component to rerender, weird stuff happens 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`B\`, true, false, false, false);
   const comp2 = app.createComponent(\`C\`, true, false, false, false);
@@ -1588,7 +1489,6 @@ exports[`destroyed component causes other soon to be destroyed component to rere
 exports[`destroyed component causes other soon to be destroyed component to rerender, weird stuff happens 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -1600,7 +1500,6 @@ exports[`destroyed component causes other soon to be destroyed component to rere
 exports[`destroyed component causes other soon to be destroyed component to rerender, weird stuff happens 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -1612,7 +1511,6 @@ exports[`destroyed component causes other soon to be destroyed component to rere
 exports[`destroying/recreating a subcomponent, other scenario 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -1630,7 +1528,6 @@ exports[`destroying/recreating a subcomponent, other scenario 1`] = `
 exports[`destroying/recreating a subcomponent, other scenario 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -1642,7 +1539,6 @@ exports[`destroying/recreating a subcomponent, other scenario 2`] = `
 exports[`destroying/recreating a subwidget with different props (if start is not over) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -1661,7 +1557,6 @@ exports[`destroying/recreating a subwidget with different props (if start is not
 exports[`destroying/recreating a subwidget with different props (if start is not over) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>child:<block-text-0/></span>\`);
@@ -1676,7 +1571,6 @@ exports[`destroying/recreating a subwidget with different props (if start is not
 exports[`parent and child rendered at exact same time 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -1689,7 +1583,6 @@ exports[`parent and child rendered at exact same time 1`] = `
 exports[`parent and child rendered at exact same time 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -1701,7 +1594,6 @@ exports[`parent and child rendered at exact same time 2`] = `
 exports[`properly behave when destroyed/unmounted while rendering  1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -1720,7 +1612,6 @@ exports[`properly behave when destroyed/unmounted while rendering  1`] = `
 exports[`properly behave when destroyed/unmounted while rendering  2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`SubChild\`, true, false, false, false);
   
@@ -1736,7 +1627,6 @@ exports[`properly behave when destroyed/unmounted while rendering  2`] = `
 exports[`properly behave when destroyed/unmounted while rendering  3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -1750,7 +1640,6 @@ exports[`properly behave when destroyed/unmounted while rendering  3`] = `
 exports[`rendering component again in next microtick 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -1770,7 +1659,6 @@ exports[`rendering component again in next microtick 1`] = `
 exports[`rendering component again in next microtick 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>Child</div>\`);
@@ -1784,7 +1672,6 @@ exports[`rendering component again in next microtick 2`] = `
 exports[`rendering parent twice, with different props on child and stuff 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -1797,7 +1684,6 @@ exports[`rendering parent twice, with different props on child and stuff 1`] = `
 exports[`rendering parent twice, with different props on child and stuff 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -1809,7 +1695,6 @@ exports[`rendering parent twice, with different props on child and stuff 2`] = `
 exports[`renderings, destruction, patch, stuff, ... yet another variation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`B\`, true, false, false, false);
   const comp2 = app.createComponent(\`D\`, true, false, false, true);
@@ -1826,7 +1711,6 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 1`] =
 exports[`renderings, destruction, patch, stuff, ... yet another variation 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`C\`, true, false, false, true);
   
@@ -1844,7 +1728,6 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 2`] =
 exports[`renderings, destruction, patch, stuff, ... yet another variation 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block3 = createBlock(\`<p block-handler-0=\\"click\\"><block-text-1/></p>\`);
@@ -1862,7 +1745,6 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 3`] =
 exports[`renderings, destruction, patch, stuff, ... yet another variation 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block3 = createBlock(\`<span block-handler-0=\\"click\\"><block-text-1/></span>\`);
@@ -1880,7 +1762,6 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 4`] =
 exports[`t-foreach with dynamic async component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(null, false, false, false, false);
@@ -1907,7 +1788,6 @@ exports[`t-foreach with dynamic async component 1`] = `
 exports[`t-foreach with dynamic async component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -1922,7 +1802,6 @@ exports[`t-foreach with dynamic async component 2`] = `
 exports[`t-key on dom node having a component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(null, false, false, false, false);
   
@@ -1940,7 +1819,6 @@ exports[`t-key on dom node having a component 1`] = `
 exports[`t-key on dom node having a component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -1952,7 +1830,6 @@ exports[`t-key on dom node having a component 2`] = `
 exports[`t-key on dynamic async component (toggler is never patched) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(null, false, false, false, false);
   
@@ -1967,7 +1844,6 @@ exports[`t-key on dynamic async component (toggler is never patched) 1`] = `
 exports[`t-key on dynamic async component (toggler is never patched) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -1982,7 +1858,6 @@ exports[`t-key on dynamic async component (toggler is never patched) 2`] = `
 exports[`two renderings initiated between willPatch and patched 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Panel\`, true, false, false, false);
   
@@ -2002,7 +1877,6 @@ exports[`two renderings initiated between willPatch and patched 1`] = `
 exports[`two renderings initiated between willPatch and patched 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<abc><block-text-0/><block-text-1/></abc>\`);
@@ -2018,7 +1892,6 @@ exports[`two renderings initiated between willPatch and patched 2`] = `
 exports[`two sequential renderings before an animation frame 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -2031,7 +1904,6 @@ exports[`two sequential renderings before an animation frame 1`] = `
 exports[`two sequential renderings before an animation frame 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -2043,7 +1915,6 @@ exports[`two sequential renderings before an animation frame 2`] = `
 exports[`update a sub-component twice in the same frame 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
   
@@ -2059,7 +1930,6 @@ exports[`update a sub-component twice in the same frame 1`] = `
 exports[`update a sub-component twice in the same frame 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -2074,7 +1944,6 @@ exports[`update a sub-component twice in the same frame 2`] = `
 exports[`update a sub-component twice in the same frame, 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
   
@@ -2090,7 +1959,6 @@ exports[`update a sub-component twice in the same frame, 2 1`] = `
 exports[`update a sub-component twice in the same frame, 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);

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

@@ -3,7 +3,6 @@
 exports[`basics display a nice error if a component is not a component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, true);
   
@@ -16,13 +15,12 @@ exports[`basics display a nice error if a component is not a component 1`] = `
 exports[`basics display a nice error if it cannot find component (in dev mode) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`SomeMispelledComponent\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`SomeMispelledComponent\`, props1, ctx);
+    helpers.validateProps(\`SomeMispelledComponent\`, props1, this);
     return comp1(props1, key + \`__1\`, node, this, null);
   }
 }"
@@ -31,7 +29,6 @@ exports[`basics display a nice error if it cannot find component (in dev mode) 1
 exports[`basics display a nice error if it cannot find component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`SomeMispelledComponent\`, true, false, false, true);
   
@@ -44,7 +41,6 @@ exports[`basics display a nice error if it cannot find component 1`] = `
 exports[`basics no component catching error lead to full app destruction 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, false);
   
@@ -60,7 +56,6 @@ exports[`basics no component catching error lead to full app destruction 1`] = `
 exports[`basics no component catching error lead to full app destruction 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
@@ -75,7 +70,6 @@ exports[`basics no component catching error lead to full app destruction 2`] = `
 exports[`basics simple catchError 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
   
@@ -96,7 +90,6 @@ exports[`basics simple catchError 1`] = `
 exports[`basics simple catchError 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -108,10 +101,75 @@ 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
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -129,7 +187,6 @@ exports[`can catch errors an error in onWillDestroy 1`] = `
 exports[`can catch errors an error in onWillDestroy 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>abc</div>\`);
@@ -143,7 +200,6 @@ exports[`can catch errors an error in onWillDestroy 2`] = `
 exports[`can catch errors an error in onWillDestroy, variation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -161,7 +217,6 @@ exports[`can catch errors an error in onWillDestroy, variation 1`] = `
 exports[`can catch errors an error in onWillDestroy, variation 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>abc</div>\`);
@@ -175,7 +230,6 @@ exports[`can catch errors an error in onWillDestroy, variation 2`] = `
 exports[`can catch errors calling a hook outside setup should crash 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -187,7 +241,6 @@ exports[`can catch errors calling a hook outside setup should crash 1`] = `
 exports[`can catch errors can catch an error in a component render function 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
   const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, false);
@@ -209,7 +262,6 @@ exports[`can catch errors can catch an error in a component render function 1`]
 exports[`can catch errors can catch an error in a component render function 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
@@ -230,7 +282,6 @@ exports[`can catch errors can catch an error in a component render function 2`]
 exports[`can catch errors can catch an error in a component render function 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
@@ -245,7 +296,6 @@ exports[`can catch errors can catch an error in a component render function 3`]
 exports[`can catch errors can catch an error in the constructor call of a component render function 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
   const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
@@ -267,7 +317,6 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 exports[`can catch errors can catch an error in the constructor call of a component render function 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
@@ -288,7 +337,6 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 exports[`can catch errors can catch an error in the constructor call of a component render function 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
   const comp1 = app.createComponent(\`ClassicCompoent\`, true, false, false, true);
@@ -313,7 +361,6 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 exports[`can catch errors can catch an error in the constructor call of a component render function 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
@@ -334,7 +381,6 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 exports[`can catch errors can catch an error in the constructor call of a component render function 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>classic</div>\`);
@@ -348,7 +394,6 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 exports[`can catch errors can catch an error in the constructor call of a component render function 2 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>Some text</div>\`);
@@ -362,7 +407,6 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 exports[`can catch errors can catch an error in the constructor call of a component render function 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>Some text</div>\`);
@@ -376,7 +420,6 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 exports[`can catch errors can catch an error in the initial call of a component render function (parent mounted) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
   const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
@@ -398,7 +441,6 @@ exports[`can catch errors can catch an error in the initial call of a component
 exports[`can catch errors can catch an error in the initial call of a component render function (parent mounted) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
@@ -419,7 +461,6 @@ exports[`can catch errors can catch an error in the initial call of a component
 exports[`can catch errors can catch an error in the initial call of a component render function (parent mounted) 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
@@ -434,7 +475,6 @@ exports[`can catch errors can catch an error in the initial call of a component
 exports[`can catch errors can catch an error in the initial call of a component render function (parent updated) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
   const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
@@ -459,7 +499,6 @@ exports[`can catch errors can catch an error in the initial call of a component
 exports[`can catch errors can catch an error in the initial call of a component render function (parent updated) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
@@ -480,7 +519,6 @@ exports[`can catch errors can catch an error in the initial call of a component
 exports[`can catch errors can catch an error in the initial call of a component render function (parent updated) 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
@@ -495,7 +533,6 @@ exports[`can catch errors can catch an error in the initial call of a component
 exports[`can catch errors can catch an error in the mounted call (in child of child) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`B\`, true, false, false, true);
   
@@ -508,7 +545,6 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
 exports[`can catch errors can catch an error in the mounted call (in child of child) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`C\`, true, false, false, true);
   
@@ -524,7 +560,6 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
 exports[`can catch errors can catch an error in the mounted call (in child of child) 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
   
@@ -545,7 +580,6 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
 exports[`can catch errors can catch an error in the mounted call (in child of child) 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>Some text</div>\`);
@@ -559,7 +593,6 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
 exports[`can catch errors can catch an error in the mounted call (in root component) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
   
@@ -580,7 +613,6 @@ exports[`can catch errors can catch an error in the mounted call (in root compon
 exports[`can catch errors can catch an error in the mounted call (in root component) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>Some text</div>\`);
@@ -594,7 +626,6 @@ exports[`can catch errors can catch an error in the mounted call (in root compon
 exports[`can catch errors can catch an error in the mounted call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
   const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
@@ -616,7 +647,6 @@ exports[`can catch errors can catch an error in the mounted call 1`] = `
 exports[`can catch errors can catch an error in the mounted call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
@@ -637,7 +667,6 @@ exports[`can catch errors can catch an error in the mounted call 2`] = `
 exports[`can catch errors can catch an error in the mounted call 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>Some text</div>\`);
@@ -651,7 +680,6 @@ exports[`can catch errors can catch an error in the mounted call 3`] = `
 exports[`can catch errors can catch an error in the willPatch call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
   const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, false);
@@ -674,7 +702,6 @@ exports[`can catch errors can catch an error in the willPatch call 1`] = `
 exports[`can catch errors can catch an error in the willPatch call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
@@ -695,7 +722,6 @@ exports[`can catch errors can catch an error in the willPatch call 2`] = `
 exports[`can catch errors can catch an error in the willPatch call 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -710,7 +736,6 @@ exports[`can catch errors can catch an error in the willPatch call 3`] = `
 exports[`can catch errors can catch an error in the willStart call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
   const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
@@ -732,7 +757,6 @@ exports[`can catch errors can catch an error in the willStart call 1`] = `
 exports[`can catch errors can catch an error in the willStart call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
@@ -753,7 +777,6 @@ exports[`can catch errors can catch an error in the willStart call 2`] = `
 exports[`can catch errors can catch an error in the willStart call 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>Some text</div>\`);
@@ -767,7 +790,6 @@ exports[`can catch errors can catch an error in the willStart call 3`] = `
 exports[`can catch errors can catch an error origination from a child's willStart function 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
   const comp1 = app.createComponent(\`ClassicCompoent\`, true, false, false, true);
@@ -792,7 +814,6 @@ exports[`can catch errors can catch an error origination from a child's willStar
 exports[`can catch errors can catch an error origination from a child's willStart function 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
@@ -813,7 +834,6 @@ exports[`can catch errors can catch an error origination from a child's willStar
 exports[`can catch errors can catch an error origination from a child's willStart function 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>classic</div>\`);
@@ -827,7 +847,6 @@ exports[`can catch errors can catch an error origination from a child's willStar
 exports[`can catch errors can catch an error origination from a child's willStart function 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>Some text</div>\`);
@@ -841,7 +860,6 @@ exports[`can catch errors can catch an error origination from a child's willStar
 exports[`can catch errors catchError in catchError 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -862,7 +880,6 @@ exports[`can catch errors catchError in catchError 1`] = `
 exports[`can catch errors catchError in catchError 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
   
@@ -878,7 +895,6 @@ exports[`can catch errors catchError in catchError 2`] = `
 exports[`can catch errors catchError in catchError 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -893,7 +909,6 @@ exports[`can catch errors catchError in catchError 3`] = `
 exports[`can catch errors catching error, rethrow, render parent  -- a main component loop implementation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, markRaw, withKey } = helpers;
   const comp1 = app.createComponent(null, false, false, false, true);
@@ -922,7 +937,6 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
 exports[`can catch errors catching error, rethrow, render parent  -- a main component loop implementation 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
@@ -935,7 +949,6 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
 exports[`can catch errors catching error, rethrow, render parent  -- a main component loop implementation 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
   
@@ -948,7 +961,6 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
 exports[`can catch errors catching error, rethrow, render parent  -- a main component loop implementation 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -962,7 +974,6 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
 exports[`can catch errors catching error, rethrow, render parent  -- a main component loop implementation 5`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>Sibling</div>\`);
@@ -976,7 +987,6 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
 exports[`can catch errors catching in child makes parent render 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, markRaw, withKey } = helpers;
   const comp1 = app.createComponent(null, false, false, false, false);
@@ -1005,7 +1015,6 @@ exports[`can catch errors catching in child makes parent render 1`] = `
 exports[`can catch errors catching in child makes parent render 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
@@ -1018,7 +1027,6 @@ exports[`can catch errors catching in child makes parent render 2`] = `
 exports[`can catch errors catching in child makes parent render 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -1032,7 +1040,6 @@ exports[`can catch errors catching in child makes parent render 3`] = `
 exports[`can catch errors catching in child makes parent render 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -1047,7 +1054,6 @@ exports[`can catch errors catching in child makes parent render 4`] = `
 exports[`can catch errors error in mounted on a component with a sibling (properly mounted) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
   const comp1 = app.createComponent(\`OK\`, true, false, false, true);
@@ -1071,7 +1077,6 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
 exports[`can catch errors error in mounted on a component with a sibling (properly mounted) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -1083,7 +1088,6 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
 exports[`can catch errors error in mounted on a component with a sibling (properly mounted) 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
@@ -1104,7 +1108,6 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
 exports[`can catch errors error in mounted on a component with a sibling (properly mounted) 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>Some text</div>\`);
@@ -1118,7 +1121,6 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
 exports[`can catch errors onError in class inheritance is called if rethrown 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Concrete\`, true, false, false, true);
   
@@ -1131,7 +1133,6 @@ exports[`can catch errors onError in class inheritance is called if rethrown 1`]
 exports[`can catch errors onError in class inheritance is called if rethrown 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
@@ -1151,7 +1152,6 @@ exports[`can catch errors onError in class inheritance is called if rethrown 2`]
 exports[`can catch errors onError in class inheritance is not called if no rethrown 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Concrete\`, true, false, false, true);
   
@@ -1164,7 +1164,6 @@ exports[`can catch errors onError in class inheritance is not called if no rethr
 exports[`can catch errors onError in class inheritance is not called if no rethrown 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
@@ -1184,7 +1183,6 @@ exports[`can catch errors onError in class inheritance is not called if no rethr
 exports[`errors and promises a rendering error in a sub component will reject the mount promise 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -1200,7 +1198,6 @@ exports[`errors and promises a rendering error in a sub component will reject th
 exports[`errors and promises a rendering error in a sub component will reject the mount promise 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -1215,7 +1212,6 @@ exports[`errors and promises a rendering error in a sub component will reject th
 exports[`errors and promises a rendering error will reject the mount promise 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -1230,7 +1226,6 @@ exports[`errors and promises a rendering error will reject the mount promise 1`]
 exports[`errors and promises a rendering error will reject the render promise (with sub components) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -1247,7 +1242,6 @@ exports[`errors and promises a rendering error will reject the render promise (w
 exports[`errors and promises a rendering error will reject the render promise (with sub components) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span/>\`);
@@ -1261,7 +1255,6 @@ exports[`errors and promises a rendering error will reject the render promise (w
 exports[`errors and promises a rendering error will reject the render promise 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -1279,7 +1272,6 @@ exports[`errors and promises a rendering error will reject the render promise 1`
 exports[`errors and promises an error in mounted call will reject the mount promise 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>abc</div>\`);
@@ -1293,7 +1285,6 @@ exports[`errors and promises an error in mounted call will reject the mount prom
 exports[`errors and promises an error in onMounted callback will have the component's setup in its stack trace 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>abc</div>\`);
@@ -1307,7 +1298,6 @@ exports[`errors and promises an error in onMounted callback will have the compon
 exports[`errors and promises an error in patched call will reject the render promise 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -1322,7 +1312,6 @@ exports[`errors and promises an error in patched call will reject the render pro
 exports[`errors and promises an error in willPatch call will reject the render promise 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -1337,7 +1326,6 @@ exports[`errors and promises an error in willPatch call will reject the render p
 exports[`errors and promises errors in mounted and in willUnmount 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -1351,7 +1339,6 @@ exports[`errors and promises errors in mounted and in willUnmount 1`] = `
 exports[`errors and promises errors in onWillRender/onRender aren't wrapped more than once 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>abc</div>\`);
@@ -1365,7 +1352,6 @@ exports[`errors and promises errors in onWillRender/onRender aren't wrapped more
 exports[`errors and promises errors in rerender 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -1376,3 +1362,16 @@ 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

@@ -3,7 +3,6 @@
 exports[`event handling Invalid handler throws an error 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">click</button>\`);
@@ -18,7 +17,6 @@ exports[`event handling Invalid handler throws an error 1`] = `
 exports[`event handling handler is not called if component is destroyed 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span block-handler-0=\\"click\\"/>\`);
@@ -33,7 +31,6 @@ exports[`event handling handler is not called if component is destroyed 1`] = `
 exports[`event handling handler receive the event as argument 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -51,7 +48,6 @@ exports[`event handling handler receive the event as argument 1`] = `
 exports[`event handling handler receive the event as argument 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>simple vnode</div>\`);
@@ -62,10 +58,23 @@ 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
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -84,7 +93,6 @@ exports[`event handling input blur event is not called if component is destroyed
 exports[`event handling input blur event is not called if component is destroyed 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<input block-handler-0=\\"blur\\"/>\`);
@@ -99,7 +107,6 @@ exports[`event handling input blur event is not called if component is destroyed
 exports[`event handling objects from scope are properly captured by t-on 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -126,7 +133,6 @@ exports[`event handling objects from scope are properly captured by t-on 1`] = `
 exports[`event handling support for callable expression in event handler 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/><input type=\\"text\\" block-handler-1=\\"input\\"/></div>\`);
@@ -142,7 +148,6 @@ exports[`event handling support for callable expression in event handler 1`] = `
 exports[`event handling t-on with handler bound to dynamic argument on a t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   

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

@@ -3,7 +3,6 @@
 exports[`basics basic use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -16,7 +15,6 @@ exports[`basics basic use 1`] = `
 exports[`basics basic use 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>child<block-text-0/></span>\`);
@@ -31,7 +29,6 @@ exports[`basics basic use 2`] = `
 exports[`basics can select a sub widget  1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   const comp2 = app.createComponent(\`OtherChild\`, true, false, false, true);
@@ -52,7 +49,6 @@ exports[`basics can select a sub widget  1`] = `
 exports[`basics can select a sub widget  2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>CHILD 1</span>\`);
@@ -66,7 +62,6 @@ exports[`basics can select a sub widget  2`] = `
 exports[`basics can select a sub widget  3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>CHILD 2</div>\`);
@@ -80,7 +75,6 @@ exports[`basics can select a sub widget  3`] = `
 exports[`basics can select a sub widget, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   const comp2 = app.createComponent(\`OtherChild\`, true, false, false, true);
@@ -101,7 +95,6 @@ exports[`basics can select a sub widget, part 2 1`] = `
 exports[`basics can select a sub widget, part 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>CHILD 1</span>\`);
@@ -115,7 +108,6 @@ exports[`basics can select a sub widget, part 2 2`] = `
 exports[`basics can select a sub widget, part 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>CHILD 2</div>\`);
@@ -129,7 +121,6 @@ exports[`basics can select a sub widget, part 2 3`] = `
 exports[`basics sub widget is interactive 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -142,7 +133,6 @@ exports[`basics sub widget is interactive 1`] = `
 exports[`basics sub widget is interactive 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><button block-handler-0=\\"click\\">click</button>child<block-text-1/></span>\`);
@@ -158,7 +148,6 @@ exports[`basics sub widget is interactive 2`] = `
 exports[`basics top level sub widget with a parent 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentB\`, true, false, false, true);
   
@@ -174,7 +163,6 @@ exports[`basics top level sub widget with a parent 1`] = `
 exports[`basics top level sub widget with a parent 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ComponentC\`, true, false, false, true);
   
@@ -187,7 +175,6 @@ exports[`basics top level sub widget with a parent 2`] = `
 exports[`basics top level sub widget with a parent 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>Hello</span>\`);

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

@@ -3,7 +3,6 @@
 exports[`hooks autofocus hook input in a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><input block-ref=\\"0\\"/><block-child-0/></div>\`);
@@ -25,7 +24,6 @@ exports[`hooks autofocus hook input in a t-if 1`] = `
 exports[`hooks autofocus hook simple input 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><input block-ref=\\"0\\"/><input block-ref=\\"1\\"/></div>\`);
@@ -42,7 +40,6 @@ exports[`hooks autofocus hook simple input 1`] = `
 exports[`hooks can use onWillStart, onWillUpdateProps 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`MyComponent\`, true, false, false, false);
   
@@ -55,7 +52,6 @@ exports[`hooks can use onWillStart, onWillUpdateProps 1`] = `
 exports[`hooks can use onWillStart, onWillUpdateProps 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -70,7 +66,6 @@ exports[`hooks can use onWillStart, onWillUpdateProps 2`] = `
 exports[`hooks can use useComponent 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -84,7 +79,6 @@ exports[`hooks can use useComponent 1`] = `
 exports[`hooks can use useEnv 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -99,7 +93,6 @@ exports[`hooks can use useEnv 1`] = `
 exports[`hooks mounted callbacks should be called in reverse order from willUnmount callbacks 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
@@ -114,7 +107,6 @@ exports[`hooks mounted callbacks should be called in reverse order from willUnmo
 exports[`hooks parent and child env (with useChildSubEnv then useSubEnv) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -129,7 +121,6 @@ exports[`hooks parent and child env (with useChildSubEnv then useSubEnv) 1`] = `
 exports[`hooks parent and child env (with useChildSubEnv then useSubEnv) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = createBlock(\`<div><block-text-0/></div>\`);
@@ -148,7 +139,6 @@ exports[`hooks parent and child env (with useChildSubEnv then useSubEnv) 2`] = `
 exports[`hooks parent and child env (with useChildSubEnv) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -163,7 +153,6 @@ exports[`hooks parent and child env (with useChildSubEnv) 1`] = `
 exports[`hooks parent and child env (with useChildSubEnv) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -178,7 +167,6 @@ exports[`hooks parent and child env (with useChildSubEnv) 2`] = `
 exports[`hooks parent and child env (with useSubEnv) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -193,7 +181,6 @@ exports[`hooks parent and child env (with useSubEnv) 1`] = `
 exports[`hooks parent and child env (with useSubEnv) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -208,7 +195,6 @@ exports[`hooks parent and child env (with useSubEnv) 2`] = `
 exports[`hooks two different call to willPatch/patched should work 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
@@ -223,7 +209,6 @@ exports[`hooks two different call to willPatch/patched should work 1`] = `
 exports[`hooks useChildSubEnv does not pollute user env 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -238,7 +223,6 @@ exports[`hooks useChildSubEnv does not pollute user env 1`] = `
 exports[`hooks useChildSubEnv supports arbitrary descriptor 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -251,7 +235,6 @@ exports[`hooks useChildSubEnv supports arbitrary descriptor 1`] = `
 exports[`hooks useChildSubEnv supports arbitrary descriptor 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/> <block-text-1/></div>\`);
@@ -267,7 +250,6 @@ exports[`hooks useChildSubEnv supports arbitrary descriptor 2`] = `
 exports[`hooks useEffect hook dependencies prevent effects from rerunning when unchanged 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -281,7 +263,6 @@ exports[`hooks useEffect hook dependencies prevent effects from rerunning when u
 exports[`hooks useEffect hook effect can depend on stuff in dom 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
@@ -301,7 +282,6 @@ exports[`hooks useEffect hook effect can depend on stuff in dom 1`] = `
 exports[`hooks useEffect hook effect runs on mount, is reapplied on patch, and is cleaned up on unmount and before reapplying 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -315,7 +295,6 @@ exports[`hooks useEffect hook effect runs on mount, is reapplied on patch, and i
 exports[`hooks useEffect hook effect with empty dependency list never reruns 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -330,7 +309,6 @@ exports[`hooks useEffect hook effect with empty dependency list never reruns 1`]
 exports[`hooks useEffect hook properly behaves when the effect function throws 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -344,7 +322,6 @@ exports[`hooks useEffect hook properly behaves when the effect function throws 1
 exports[`hooks useExternalListener 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`MyComponent\`, true, false, false, true);
   
@@ -361,7 +338,6 @@ exports[`hooks useExternalListener 1`] = `
 exports[`hooks useExternalListener 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -376,7 +352,6 @@ exports[`hooks useExternalListener 2`] = `
 exports[`hooks useRef hook: basic use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><button block-ref=\\"0\\"><block-text-1/></button></div>\`);
@@ -393,7 +368,6 @@ exports[`hooks useRef hook: basic use 1`] = `
 exports[`hooks useSubEnv modifies user env 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -408,7 +382,6 @@ exports[`hooks useSubEnv modifies user env 1`] = `
 exports[`hooks useSubEnv supports arbitrary descriptor 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -421,7 +394,6 @@ exports[`hooks useSubEnv supports arbitrary descriptor 1`] = `
 exports[`hooks useSubEnv supports arbitrary descriptor 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/> <block-text-1/></div>\`);

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

@@ -3,7 +3,6 @@
 exports[`lifecycle hooks basic checks for a component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>test</span>\`);
@@ -17,7 +16,6 @@ exports[`lifecycle hooks basic checks for a component 1`] = `
 exports[`lifecycle hooks component semantics 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`B\`, true, false, false, true);
   const comp2 = app.createComponent(\`C\`, true, false, false, true);
@@ -35,7 +33,6 @@ exports[`lifecycle hooks component semantics 1`] = `
 exports[`lifecycle hooks component semantics 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>B</div>\`);
@@ -49,7 +46,6 @@ exports[`lifecycle hooks component semantics 2`] = `
 exports[`lifecycle hooks component semantics 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`D\`, true, false, false, true);
   const comp2 = app.createComponent(\`E\`, true, false, false, true);
@@ -73,7 +69,6 @@ exports[`lifecycle hooks component semantics 3`] = `
 exports[`lifecycle hooks component semantics 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>D</div>\`);
@@ -87,7 +82,6 @@ exports[`lifecycle hooks component semantics 4`] = `
 exports[`lifecycle hooks component semantics 5`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>E</div>\`);
@@ -101,7 +95,6 @@ exports[`lifecycle hooks component semantics 5`] = `
 exports[`lifecycle hooks component semantics 6`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>F</div>\`);
@@ -115,7 +108,6 @@ exports[`lifecycle hooks component semantics 6`] = `
 exports[`lifecycle hooks components are unmounted and destroyed if no longer in DOM, even after updateprops 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -135,7 +127,6 @@ exports[`lifecycle hooks components are unmounted and destroyed if no longer in
 exports[`lifecycle hooks components are unmounted and destroyed if no longer in DOM, even after updateprops 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -150,7 +141,6 @@ exports[`lifecycle hooks components are unmounted and destroyed if no longer in
 exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -167,7 +157,6 @@ exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM
 exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -181,7 +170,6 @@ exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM
 exports[`lifecycle hooks destroy new children before being mountged 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -200,7 +188,6 @@ exports[`lifecycle hooks destroy new children before being mountged 1`] = `
 exports[`lifecycle hooks destroy new children before being mountged 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -212,7 +199,6 @@ exports[`lifecycle hooks destroy new children before being mountged 2`] = `
 exports[`lifecycle hooks hooks are called in proper order in widget creation/destruction 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -228,7 +214,6 @@ exports[`lifecycle hooks hooks are called in proper order in widget creation/des
 exports[`lifecycle hooks hooks are called in proper order in widget creation/destruction 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -242,7 +227,6 @@ exports[`lifecycle hooks hooks are called in proper order in widget creation/des
 exports[`lifecycle hooks lifecycle callbacks are bound to component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Test\`, true, false, false, false);
   
@@ -255,7 +239,6 @@ exports[`lifecycle hooks lifecycle callbacks are bound to component 1`] = `
 exports[`lifecycle hooks lifecycle callbacks are bound to component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -267,7 +250,6 @@ exports[`lifecycle hooks lifecycle callbacks are bound to component 2`] = `
 exports[`lifecycle hooks lifecycle semantics 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -283,7 +265,6 @@ exports[`lifecycle hooks lifecycle semantics 1`] = `
 exports[`lifecycle hooks lifecycle semantics 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -297,7 +278,6 @@ exports[`lifecycle hooks lifecycle semantics 2`] = `
 exports[`lifecycle hooks lifecycle semantics, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -314,7 +294,6 @@ exports[`lifecycle hooks lifecycle semantics, part 2 1`] = `
 exports[`lifecycle hooks lifecycle semantics, part 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
   
@@ -327,7 +306,6 @@ exports[`lifecycle hooks lifecycle semantics, part 2 2`] = `
 exports[`lifecycle hooks lifecycle semantics, part 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -341,7 +319,6 @@ exports[`lifecycle hooks lifecycle semantics, part 2 3`] = `
 exports[`lifecycle hooks lifecycle semantics, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -358,7 +335,6 @@ exports[`lifecycle hooks lifecycle semantics, part 3 1`] = `
 exports[`lifecycle hooks lifecycle semantics, part 4 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -375,7 +351,6 @@ exports[`lifecycle hooks lifecycle semantics, part 4 1`] = `
 exports[`lifecycle hooks lifecycle semantics, part 4 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
   
@@ -388,7 +363,6 @@ exports[`lifecycle hooks lifecycle semantics, part 4 2`] = `
 exports[`lifecycle hooks lifecycle semantics, part 4 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -402,7 +376,6 @@ exports[`lifecycle hooks lifecycle semantics, part 4 3`] = `
 exports[`lifecycle hooks lifecycle semantics, part 5 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -419,7 +392,6 @@ exports[`lifecycle hooks lifecycle semantics, part 5 1`] = `
 exports[`lifecycle hooks lifecycle semantics, part 5 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -433,7 +405,6 @@ exports[`lifecycle hooks lifecycle semantics, part 5 2`] = `
 exports[`lifecycle hooks lifecycle semantics, part 6 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -446,7 +417,6 @@ exports[`lifecycle hooks lifecycle semantics, part 6 1`] = `
 exports[`lifecycle hooks lifecycle semantics, part 6 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -460,7 +430,6 @@ exports[`lifecycle hooks lifecycle semantics, part 6 2`] = `
 exports[`lifecycle hooks mounted hook is called if mounted in DOM 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -474,7 +443,6 @@ exports[`lifecycle hooks mounted hook is called if mounted in DOM 1`] = `
 exports[`lifecycle hooks mounted hook is called on every mount, not just the first one 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -491,7 +459,6 @@ exports[`lifecycle hooks mounted hook is called on every mount, not just the fir
 exports[`lifecycle hooks mounted hook is called on every mount, not just the first one 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>child</div>\`);
@@ -505,7 +472,6 @@ exports[`lifecycle hooks mounted hook is called on every mount, not just the fir
 exports[`lifecycle hooks mounted hook is called on subcomponents, in proper order 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -521,7 +487,6 @@ exports[`lifecycle hooks mounted hook is called on subcomponents, in proper orde
 exports[`lifecycle hooks mounted hook is called on subcomponents, in proper order 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -535,7 +500,6 @@ exports[`lifecycle hooks mounted hook is called on subcomponents, in proper orde
 exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper order 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -554,7 +518,6 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
 exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper order 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ChildChild\`, true, false, false, true);
   
@@ -570,7 +533,6 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
 exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper order 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -584,7 +546,6 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
 exports[`lifecycle hooks onWillRender 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -597,7 +558,6 @@ exports[`lifecycle hooks onWillRender 1`] = `
 exports[`lifecycle hooks onWillRender 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
@@ -613,7 +573,6 @@ exports[`lifecycle hooks onWillRender 2`] = `
 exports[`lifecycle hooks patched hook is called after updateProps 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -629,7 +588,6 @@ exports[`lifecycle hooks patched hook is called after updateProps 1`] = `
 exports[`lifecycle hooks patched hook is called after updateProps 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -643,7 +601,6 @@ exports[`lifecycle hooks patched hook is called after updateProps 2`] = `
 exports[`lifecycle hooks patched hook is called after updating State 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -658,7 +615,6 @@ exports[`lifecycle hooks patched hook is called after updating State 1`] = `
 exports[`lifecycle hooks render in mounted 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -673,7 +629,6 @@ exports[`lifecycle hooks render in mounted 1`] = `
 exports[`lifecycle hooks render in patched 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -688,7 +643,6 @@ exports[`lifecycle hooks render in patched 1`] = `
 exports[`lifecycle hooks render in willPatch 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -703,7 +657,6 @@ exports[`lifecycle hooks render in willPatch 1`] = `
 exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly called 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -720,7 +673,6 @@ exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly calle
 exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly called 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -734,7 +686,6 @@ exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly calle
 exports[`lifecycle hooks timeout in onWillStart emits a warning 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span/>\`);
@@ -748,13 +699,12 @@ exports[`lifecycle hooks timeout in onWillStart emits a warning 1`] = `
 exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {prop: ctx['state'].prop};
-    helpers.validateProps(\`Child\`, props1, ctx);
+    helpers.validateProps(\`Child\`, props1, this);
     return comp1(props1, key + \`__1\`, node, this, null);
   }
 }"
@@ -763,7 +713,6 @@ exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 1`] = `
 exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -775,7 +724,6 @@ exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 2`] = `
 exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents, in proper order 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -791,7 +739,6 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
 exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents, in proper order 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ChildChild\`, true, false, false, false);
   
@@ -807,7 +754,6 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
 exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents, in proper order 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -822,7 +768,6 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
 exports[`lifecycle hooks willStart hook is called on sub component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -835,7 +780,6 @@ exports[`lifecycle hooks willStart hook is called on sub component 1`] = `
 exports[`lifecycle hooks willStart hook is called on sub component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -849,7 +793,6 @@ exports[`lifecycle hooks willStart hook is called on sub component 2`] = `
 exports[`lifecycle hooks willStart is called 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>simple vnode</span>\`);
@@ -863,7 +806,6 @@ exports[`lifecycle hooks willStart is called 1`] = `
 exports[`lifecycle hooks willStart is called with component as this 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>simple vnode</span>\`);
@@ -877,7 +819,6 @@ exports[`lifecycle hooks willStart is called with component as this 1`] = `
 exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is mounted in some other position 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -899,7 +840,6 @@ exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is
 exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is mounted in some other position 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -913,7 +853,6 @@ exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is
 exports[`lifecycle hooks willUpdateProps hook is called 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -926,7 +865,6 @@ exports[`lifecycle hooks willUpdateProps hook is called 1`] = `
 exports[`lifecycle hooks willUpdateProps hook is called 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);

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

@@ -3,7 +3,6 @@
 exports[`basics accept ES6-like syntax for props (with getters) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -19,7 +18,6 @@ exports[`basics accept ES6-like syntax for props (with getters) 1`] = `
 exports[`basics accept ES6-like syntax for props (with getters) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -34,7 +32,6 @@ exports[`basics accept ES6-like syntax for props (with getters) 2`] = `
 exports[`basics arrow functions as prop correctly capture their scope 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -57,7 +54,6 @@ exports[`basics arrow functions as prop correctly capture their scope 1`] = `
 exports[`basics arrow functions as prop correctly capture their scope 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"/>\`);
@@ -72,7 +68,6 @@ exports[`basics arrow functions as prop correctly capture their scope 2`] = `
 exports[`basics explicit object prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -88,7 +83,6 @@ exports[`basics explicit object prop 1`] = `
 exports[`basics explicit object prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -103,7 +97,6 @@ exports[`basics explicit object prop 2`] = `
 exports[`basics prop names can contain - 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -116,7 +109,6 @@ exports[`basics prop names can contain - 1`] = `
 exports[`basics prop names can contain - 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -131,7 +123,6 @@ exports[`basics prop names can contain - 2`] = `
 exports[`basics support prop names that aren't valid bare object property names 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -144,7 +135,6 @@ exports[`basics support prop names that aren't valid bare object property names
 exports[`basics support prop names that aren't valid bare object property names 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"/>\`);
@@ -159,7 +149,6 @@ exports[`basics support prop names that aren't valid bare object property names
 exports[`basics t-set with a body expression can be passed in props, and then t-out 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -174,7 +163,7 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`abc\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`abc\`] = new LazyValue(value1, ctx, this, node, key);
     const b3 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
@@ -184,7 +173,6 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
 exports[`basics t-set with a body expression can be passed in props, and then t-out 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -201,7 +189,6 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
 exports[`basics t-set with a body expression can be used as textual prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -221,7 +208,6 @@ exports[`basics t-set with a body expression can be used as textual prop 1`] = `
 exports[`basics t-set with a body expression can be used as textual prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -236,7 +222,6 @@ exports[`basics t-set with a body expression can be used as textual prop 2`] = `
 exports[`basics t-set works  1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -256,7 +241,6 @@ exports[`basics t-set works  1`] = `
 exports[`basics t-set works  2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -271,7 +255,6 @@ exports[`basics t-set works  2`] = `
 exports[`basics template string in prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -284,7 +267,6 @@ exports[`basics template string in prop 1`] = `
 exports[`basics template string in prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -296,7 +278,6 @@ exports[`basics template string in prop 2`] = `
 exports[`bound functions is referentially equal after update 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { bind } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -310,7 +291,6 @@ exports[`bound functions is referentially equal after update 1`] = `
 exports[`bound functions is referentially equal after update 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -322,7 +302,6 @@ exports[`bound functions is referentially equal after update 2`] = `
 exports[`can bind function prop with bind suffix 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { bind } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -336,7 +315,6 @@ exports[`can bind function prop with bind suffix 1`] = `
 exports[`can bind function prop with bind suffix 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {

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

@@ -3,7 +3,6 @@
 exports[`reactivity in lifecycle Child component doesn't render when state they depend on changes but their parent is about to unmount them 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -20,7 +19,6 @@ exports[`reactivity in lifecycle Child component doesn't render when state they
 exports[`reactivity in lifecycle Child component doesn't render when state they depend on changes but their parent is about to unmount them 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -32,7 +30,6 @@ exports[`reactivity in lifecycle Child component doesn't render when state they
 exports[`reactivity in lifecycle Component is automatically subscribed to reactive object received as prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -45,7 +42,6 @@ exports[`reactivity in lifecycle Component is automatically subscribed to reacti
 exports[`reactivity in lifecycle Component is automatically subscribed to reactive object received as prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -59,7 +55,6 @@ exports[`reactivity in lifecycle Component is automatically subscribed to reacti
 exports[`reactivity in lifecycle can use a state hook 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -74,7 +69,6 @@ exports[`reactivity in lifecycle can use a state hook 1`] = `
 exports[`reactivity in lifecycle can use a state hook 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -89,7 +83,6 @@ exports[`reactivity in lifecycle can use a state hook 2 1`] = `
 exports[`reactivity in lifecycle can use a state hook on Map 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -104,7 +97,6 @@ exports[`reactivity in lifecycle can use a state hook on Map 1`] = `
 exports[`reactivity in lifecycle change state while mounting component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -119,7 +111,6 @@ exports[`reactivity in lifecycle change state while mounting component 1`] = `
 exports[`reactivity in lifecycle state changes in willUnmount do not trigger rerender 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -138,7 +129,6 @@ exports[`reactivity in lifecycle state changes in willUnmount do not trigger rer
 exports[`reactivity in lifecycle state changes in willUnmount do not trigger rerender 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);

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

@@ -3,7 +3,6 @@
 exports[`refs basic use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-ref=\\"0\\"/>\`);
@@ -19,7 +18,6 @@ exports[`refs basic use 1`] = `
 exports[`refs can use 2 refs with same name in a t-if/t-else situation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { multiRefSetter } = helpers;
   
@@ -43,7 +41,6 @@ exports[`refs can use 2 refs with same name in a t-if/t-else situation 1`] = `
 exports[`refs refs and recursive templates 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Test\`, true, false, false, false);
   
@@ -65,7 +62,6 @@ exports[`refs refs and recursive templates 1`] = `
 exports[`refs refs are properly bound in slots 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, markRaw } = helpers;
   const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
@@ -92,7 +88,6 @@ exports[`refs refs are properly bound in slots 1`] = `
 exports[`refs refs are properly bound in slots 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
@@ -108,7 +103,6 @@ exports[`refs refs are properly bound in slots 2`] = `
 exports[`refs throws if there are 2 same refs at the same time 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { multiRefSetter } = helpers;
   

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

@@ -3,7 +3,6 @@
 exports[`children, default props and renderings 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -18,7 +17,6 @@ exports[`children, default props and renderings 1`] = `
 exports[`children, default props and renderings 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -30,7 +28,6 @@ exports[`children, default props and renderings 2`] = `
 exports[`force render in case of existing render 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
@@ -43,7 +40,6 @@ exports[`force render in case of existing render 1`] = `
 exports[`force render in case of existing render 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`C\`, true, false, false, true);
   
@@ -58,7 +54,6 @@ exports[`force render in case of existing render 2`] = `
 exports[`force render in case of existing render 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -70,7 +65,6 @@ exports[`force render in case of existing render 3`] = `
 exports[`rendering semantics can force a render to update sub tree 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -85,7 +79,6 @@ exports[`rendering semantics can force a render to update sub tree 1`] = `
 exports[`rendering semantics can force a render to update sub tree 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -97,7 +90,6 @@ exports[`rendering semantics can force a render to update sub tree 2`] = `
 exports[`rendering semantics can render a parent without rendering child 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -112,7 +104,6 @@ exports[`rendering semantics can render a parent without rendering child 1`] = `
 exports[`rendering semantics can render a parent without rendering child 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -124,7 +115,6 @@ exports[`rendering semantics can render a parent without rendering child 2`] = `
 exports[`rendering semantics props are reactive (nested prop) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -137,7 +127,6 @@ exports[`rendering semantics props are reactive (nested prop) 1`] = `
 exports[`rendering semantics props are reactive (nested prop) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -149,7 +138,6 @@ exports[`rendering semantics props are reactive (nested prop) 2`] = `
 exports[`rendering semantics props are reactive 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -162,7 +150,6 @@ exports[`rendering semantics props are reactive 1`] = `
 exports[`rendering semantics props are reactive 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -174,7 +161,6 @@ exports[`rendering semantics props are reactive 2`] = `
 exports[`rendering semantics render need a boolean = true to be 'deep' 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -189,7 +175,6 @@ exports[`rendering semantics render need a boolean = true to be 'deep' 1`] = `
 exports[`rendering semantics render need a boolean = true to be 'deep' 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -201,7 +186,6 @@ exports[`rendering semantics render need a boolean = true to be 'deep' 2`] = `
 exports[`rendering semantics render with deep=true followed by render with deep=false work as expected 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -217,7 +201,6 @@ exports[`rendering semantics render with deep=true followed by render with deep=
 exports[`rendering semantics render with deep=true followed by render with deep=false work as expected 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -231,7 +214,6 @@ exports[`rendering semantics render with deep=true followed by render with deep=
 exports[`rendering semantics rendering is atomic (for one subtree) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`B\`, true, false, false, false);
   
@@ -246,7 +228,6 @@ exports[`rendering semantics rendering is atomic (for one subtree) 1`] = `
 exports[`rendering semantics rendering is atomic (for one subtree) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`C\`, true, false, false, false);
   
@@ -259,7 +240,6 @@ exports[`rendering semantics rendering is atomic (for one subtree) 2`] = `
 exports[`rendering semantics rendering is atomic (for one subtree) 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -271,7 +251,6 @@ exports[`rendering semantics rendering is atomic (for one subtree) 3`] = `
 exports[`rendering semantics works as expected for dynamic number of props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, true, false);
   
@@ -284,7 +263,6 @@ exports[`rendering semantics works as expected for dynamic number of props 1`] =
 exports[`rendering semantics works as expected for dynamic number of props 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {

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

@@ -3,7 +3,6 @@
 exports[`style and class handling can set class on multi root component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -16,7 +15,6 @@ exports[`style and class handling can set class on multi root component 1`] = `
 exports[`style and class handling can set class on multi root component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block2 = createBlock(\`<div>a</div>\`);
@@ -34,7 +32,6 @@ exports[`style and class handling can set class on multi root component 2`] = `
 exports[`style and class handling can set class on sub component, as prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -47,7 +44,6 @@ exports[`style and class handling can set class on sub component, as prop 1`] =
 exports[`style and class handling can set class on sub component, as prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
@@ -62,7 +58,6 @@ exports[`style and class handling can set class on sub component, as prop 2`] =
 exports[`style and class handling can set class on sub sub component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -75,7 +70,6 @@ exports[`style and class handling can set class on sub sub component 1`] = `
 exports[`style and class handling can set class on sub sub component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ChildChild\`, true, false, false, false);
   
@@ -88,7 +82,6 @@ exports[`style and class handling can set class on sub sub component 2`] = `
 exports[`style and class handling can set class on sub sub component 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\">childchild</div>\`);
@@ -103,7 +96,6 @@ exports[`style and class handling can set class on sub sub component 3`] = `
 exports[`style and class handling can set more than one class on sub component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -116,7 +108,6 @@ exports[`style and class handling can set more than one class on sub component 1
 exports[`style and class handling can set more than one class on sub component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
@@ -131,7 +122,6 @@ exports[`style and class handling can set more than one class on sub component 2
 exports[`style and class handling can set style and class inside component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div style=\\"font-weight:bold;\\" class=\\"some-class\\">world</div>\`);
@@ -145,7 +135,6 @@ exports[`style and class handling can set style and class inside component 1`] =
 exports[`style and class handling class on components do not interfere with user defined classes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -160,7 +149,6 @@ exports[`style and class handling class on components do not interfere with user
 exports[`style and class handling class on sub component, which is switched to another 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -173,7 +161,6 @@ exports[`style and class handling class on sub component, which is switched to a
 exports[`style and class handling class on sub component, which is switched to another 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
   const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
@@ -193,7 +180,6 @@ exports[`style and class handling class on sub component, which is switched to a
 exports[`style and class handling class on sub component, which is switched to another 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\">a</div>\`);
@@ -208,7 +194,6 @@ exports[`style and class handling class on sub component, which is switched to a
 exports[`style and class handling class on sub component, which is switched to another 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span block-attribute-0=\\"class\\">b</span>\`);
@@ -223,7 +208,6 @@ exports[`style and class handling class on sub component, which is switched to a
 exports[`style and class handling class with extra whitespaces (variation) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -239,7 +223,6 @@ exports[`style and class handling class with extra whitespaces (variation) 1`] =
 exports[`style and class handling class with extra whitespaces (variation) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -254,7 +237,6 @@ exports[`style and class handling class with extra whitespaces (variation) 2`] =
 exports[`style and class handling class with extra whitespaces 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -267,7 +249,6 @@ exports[`style and class handling class with extra whitespaces 1`] = `
 exports[`style and class handling class with extra whitespaces 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -282,7 +263,6 @@ exports[`style and class handling class with extra whitespaces 2`] = `
 exports[`style and class handling component class and parent class combine together 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -295,7 +275,6 @@ exports[`style and class handling component class and parent class combine toget
 exports[`style and class handling component class and parent class combine together 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div class=\\"child\\" block-attribute-0=\\"class\\">child</div>\`);
@@ -337,7 +316,6 @@ exports[`style and class handling dynamic t-att-style is properly added and upda
 exports[`style and class handling empty class attribute is not added on widget root el 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -353,7 +331,6 @@ exports[`style and class handling empty class attribute is not added on widget r
 exports[`style and class handling empty class attribute is not added on widget root el 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span block-attribute-0=\\"class\\"/>\`);
@@ -368,7 +345,6 @@ exports[`style and class handling empty class attribute is not added on widget r
 exports[`style and class handling error in subcomponent with class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -381,7 +357,6 @@ exports[`style and class handling error in subcomponent with class 1`] = `
 exports[`style and class handling error in subcomponent with class 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\"><block-text-1/></div>\`);
@@ -397,7 +372,6 @@ exports[`style and class handling error in subcomponent with class 2`] = `
 exports[`style and class handling no class is set is child ignores it 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -410,7 +384,6 @@ exports[`style and class handling no class is set is child ignores it 1`] = `
 exports[`style and class handling no class is set is child ignores it 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>child</div>\`);
@@ -424,7 +397,6 @@ exports[`style and class handling no class is set is child ignores it 2`] = `
 exports[`style and class handling no class is set is parent does not give it as prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -437,7 +409,6 @@ exports[`style and class handling no class is set is parent does not give it as
 exports[`style and class handling no class is set is parent does not give it as prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
@@ -452,7 +423,6 @@ exports[`style and class handling no class is set is parent does not give it as
 exports[`style and class handling style is properly added on widget root el 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -465,7 +435,6 @@ exports[`style and class handling style is properly added on widget root el 1`]
 exports[`style and class handling style is properly added on widget root el 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"style\\"/>\`);
@@ -480,7 +449,6 @@ exports[`style and class handling style is properly added on widget root el 2`]
 exports[`style and class handling t-att-class is properly added/removed on widget root el (v2) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -496,7 +464,6 @@ exports[`style and class handling t-att-class is properly added/removed on widge
 exports[`style and class handling t-att-class is properly added/removed on widget root el (v2) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span class=\\"c\\" block-attribute-0=\\"class\\"/>\`);
@@ -511,7 +478,6 @@ exports[`style and class handling t-att-class is properly added/removed on widge
 exports[`style and class handling t-att-class is properly added/removed on widget root el (v3) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -524,7 +490,6 @@ exports[`style and class handling t-att-class is properly added/removed on widge
 exports[`style and class handling t-att-class is properly added/removed on widget root el (v3) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span class=\\"c\\" block-attribute-0=\\"class\\"/>\`);

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

@@ -3,7 +3,6 @@
 exports[`t-call dynamic t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, zero } = helpers;
   const call = app.callTemplate.bind(app);
@@ -22,7 +21,6 @@ exports[`t-call dynamic t-call 1`] = `
 exports[`t-call dynamic t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>foo</div>\`);
@@ -36,7 +34,6 @@ exports[`t-call dynamic t-call 2`] = `
 exports[`t-call dynamic t-call 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -48,7 +45,6 @@ exports[`t-call dynamic t-call 3`] = `
 exports[`t-call dynamic t-call: key is propagated 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   const call = app.callTemplate.bind(app);
@@ -65,7 +61,6 @@ exports[`t-call dynamic t-call: key is propagated 1`] = `
 exports[`t-call dynamic t-call: key is propagated 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-attribute-0=\\"id\\"/>\`);
@@ -80,7 +75,6 @@ exports[`t-call dynamic t-call: key is propagated 2`] = `
 exports[`t-call dynamic t-call: key is propagated 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -93,7 +87,6 @@ exports[`t-call dynamic t-call: key is propagated 3`] = `
 exports[`t-call handlers are properly bound through a dynamic t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const call = app.callTemplate.bind(app);
   
@@ -111,7 +104,6 @@ exports[`t-call handlers are properly bound through a dynamic t-call 1`] = `
 exports[`t-call handlers are properly bound through a dynamic t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
@@ -126,7 +118,6 @@ exports[`t-call handlers are properly bound through a dynamic t-call 2`] = `
 exports[`t-call handlers are properly bound through a t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`__template__999\`);
   
@@ -143,7 +134,6 @@ exports[`t-call handlers are properly bound through a t-call 1`] = `
 exports[`t-call handlers are properly bound through a t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
@@ -158,7 +148,6 @@ exports[`t-call handlers are properly bound through a t-call 2`] = `
 exports[`t-call handlers with arguments are properly bound through a t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`__template__999\`);
   
@@ -174,7 +163,6 @@ exports[`t-call handlers with arguments are properly bound through a t-call 1`]
 exports[`t-call handlers with arguments are properly bound through a t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
@@ -190,7 +178,6 @@ exports[`t-call handlers with arguments are properly bound through a t-call 2`]
 exports[`t-call parent is set within t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`__template__999\`);
   
@@ -206,7 +193,6 @@ exports[`t-call parent is set within t-call 1`] = `
 exports[`t-call parent is set within t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -219,7 +205,6 @@ exports[`t-call parent is set within t-call 2`] = `
 exports[`t-call parent is set within t-call 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>lucas</span>\`);
@@ -233,7 +218,6 @@ exports[`t-call parent is set within t-call 3`] = `
 exports[`t-call parent is set within t-call with no parentNode 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`__template__999\`);
   
@@ -246,7 +230,6 @@ exports[`t-call parent is set within t-call with no parentNode 1`] = `
 exports[`t-call parent is set within t-call with no parentNode 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -259,7 +242,6 @@ exports[`t-call parent is set within t-call with no parentNode 2`] = `
 exports[`t-call parent is set within t-call with no parentNode 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>lucas</span>\`);
@@ -273,7 +255,6 @@ exports[`t-call parent is set within t-call with no parentNode 3`] = `
 exports[`t-call recursive t-call binding this -- static t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`recursive\`);
@@ -295,7 +276,6 @@ exports[`t-call recursive t-call binding this -- static t-call 1`] = `
 exports[`t-call recursive t-call binding this -- static t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`recursive\`);
@@ -325,7 +305,6 @@ exports[`t-call recursive t-call binding this -- static t-call 2`] = `
 exports[`t-call sub components in two t-calls 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`sub\`);
   const callTemplate_2 = app.getTemplate(\`sub\`);
@@ -348,7 +327,6 @@ exports[`t-call sub components in two t-calls 1`] = `
 exports[`t-call sub components in two t-calls 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -361,7 +339,6 @@ exports[`t-call sub components in two t-calls 2`] = `
 exports[`t-call sub components in two t-calls 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -376,7 +353,6 @@ exports[`t-call sub components in two t-calls 3`] = `
 exports[`t-call t-call in t-foreach and children component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`__template__999\`);
@@ -404,7 +380,6 @@ exports[`t-call t-call in t-foreach and children component 1`] = `
 exports[`t-call t-call in t-foreach and children component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -417,7 +392,6 @@ exports[`t-call t-call in t-foreach and children component 2`] = `
 exports[`t-call t-call in t-foreach and children component 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -432,7 +406,6 @@ exports[`t-call t-call in t-foreach and children component 3`] = `
 exports[`t-call t-call with t-call-context and subcomponent 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`someTemplate\`);
   
@@ -446,7 +419,6 @@ exports[`t-call t-call with t-call-context and subcomponent 1`] = `
 exports[`t-call t-call with t-call-context and subcomponent 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   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);
@@ -462,7 +434,51 @@ exports[`t-call t-call with t-call-context and subcomponent 2`] = `
 exports[`t-call t-call with t-call-context and subcomponent 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
+  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 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 = \\"\\") {
@@ -476,7 +492,6 @@ exports[`t-call t-call with t-call-context and subcomponent 3`] = `
 exports[`t-call t-call with t-call-context, simple use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`someTemplate\`);
   
@@ -490,7 +505,6 @@ exports[`t-call t-call with t-call-context, simple use 1`] = `
 exports[`t-call t-call with t-call-context, simple use 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {

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

@@ -3,7 +3,6 @@
 exports[`t-call-block simple t-call-block with static text 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);

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

@@ -3,7 +3,6 @@
 exports[`t-component can switch between dynamic components without the need for a t-key 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(null, false, false, false, true);
   
@@ -20,7 +19,6 @@ exports[`t-component can switch between dynamic components without the need for
 exports[`t-component can switch between dynamic components without the need for a t-key 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>child a</span>\`);
@@ -34,7 +32,6 @@ exports[`t-component can switch between dynamic components without the need for
 exports[`t-component can switch between dynamic components without the need for a t-key 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>child b</span>\`);
@@ -48,7 +45,6 @@ exports[`t-component can switch between dynamic components without the need for
 exports[`t-component can use dynamic components (the class) if given (with different root tagname) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(null, false, false, false, true);
   
@@ -63,7 +59,6 @@ exports[`t-component can use dynamic components (the class) if given (with diffe
 exports[`t-component can use dynamic components (the class) if given (with different root tagname) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>child a</span>\`);
@@ -77,7 +72,6 @@ exports[`t-component can use dynamic components (the class) if given (with diffe
 exports[`t-component can use dynamic components (the class) if given (with different root tagname) 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>child b</div>\`);
@@ -91,7 +85,6 @@ exports[`t-component can use dynamic components (the class) if given (with diffe
 exports[`t-component can use dynamic components (the class) if given 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(null, false, false, false, true);
   
@@ -106,7 +99,6 @@ exports[`t-component can use dynamic components (the class) if given 1`] = `
 exports[`t-component can use dynamic components (the class) if given 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>child a</span>\`);
@@ -120,7 +112,6 @@ exports[`t-component can use dynamic components (the class) if given 2`] = `
 exports[`t-component can use dynamic components (the class) if given 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>child b</span>\`);
@@ -134,7 +125,6 @@ exports[`t-component can use dynamic components (the class) if given 3`] = `
 exports[`t-component modifying a sub widget 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(null, false, false, false, true);
   
@@ -151,7 +141,6 @@ exports[`t-component modifying a sub widget 1`] = `
 exports[`t-component modifying a sub widget 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
@@ -168,7 +157,6 @@ exports[`t-component modifying a sub widget 2`] = `
 exports[`t-component switching dynamic component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(null, false, false, false, true);
   
@@ -182,7 +170,6 @@ exports[`t-component switching dynamic component 1`] = `
 exports[`t-component switching dynamic component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>child a</div>\`);
@@ -196,7 +183,6 @@ exports[`t-component switching dynamic component 2`] = `
 exports[`t-component switching dynamic component 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -208,7 +194,6 @@ exports[`t-component switching dynamic component 3`] = `
 exports[`t-component t-component works in simple case 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(null, false, false, false, true);
   
@@ -222,7 +207,6 @@ exports[`t-component t-component works in simple case 1`] = `
 exports[`t-component t-component works in simple case 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div>child</div>\`);

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

@@ -3,7 +3,6 @@
 exports[`list of components components in a node in a t-foreach  1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -29,7 +28,6 @@ exports[`list of components components in a node in a t-foreach  1`] = `
 exports[`list of components components in a node in a t-foreach  2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -44,9 +42,8 @@ exports[`list of components components in a node in a t-foreach  2`] = `
 exports[`list of components crash on duplicate key in dev mode 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, withKey } = helpers;
+  let { prepareList, OwlError, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
   return function template(ctx, node, key = \\"\\") {
@@ -56,10 +53,10 @@ exports[`list of components crash on duplicate key in dev mode 1`] = `
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`item\`] = v_block1[i1];
       const key1 = 'child';
-      if (keys1.has(key1)) { throw new Error(\`Got duplicate key in t-foreach: \${key1}\`)}
+      if (keys1.has(key1)) { throw new OwlError(\`Got duplicate key in t-foreach: \${key1}\`)}
       keys1.add(key1);
       const props1 = {};
-      helpers.validateProps(\`Child\`, props1, ctx);
+      helpers.validateProps(\`Child\`, props1, this);
       c_block1[i1] = withKey(comp1(props1, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     return list(c_block1);
@@ -70,7 +67,6 @@ exports[`list of components crash on duplicate key in dev mode 1`] = `
 exports[`list of components crash on duplicate key in dev mode 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -82,7 +78,6 @@ exports[`list of components crash on duplicate key in dev mode 2`] = `
 exports[`list of components list of sub components inside other nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`SubComponent\`, true, false, false, true);
@@ -108,7 +103,6 @@ exports[`list of components list of sub components inside other nodes 1`] = `
 exports[`list of components list of sub components inside other nodes 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span>asdf</span>\`);
@@ -122,7 +116,6 @@ exports[`list of components list of sub components inside other nodes 2`] = `
 exports[`list of components reconciliation alg works for t-foreach in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -156,7 +149,6 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach
 exports[`list of components reconciliation alg works for t-foreach in t-foreach 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -171,7 +163,6 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach
 exports[`list of components reconciliation alg works for t-foreach in t-foreach, 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -207,7 +198,6 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach,
 exports[`list of components reconciliation alg works for t-foreach in t-foreach, 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -222,7 +212,6 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach,
 exports[`list of components simple list 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -243,7 +232,6 @@ exports[`list of components simple list 1`] = `
 exports[`list of components simple list 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -258,7 +246,6 @@ exports[`list of components simple list 2`] = `
 exports[`list of components sub components rendered in a loop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -282,7 +269,6 @@ exports[`list of components sub components rendered in a loop 1`] = `
 exports[`list of components sub components rendered in a loop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p><block-text-0/></p>\`);
@@ -297,7 +283,6 @@ exports[`list of components sub components rendered in a loop 2`] = `
 exports[`list of components sub components with some state rendered in a loop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -321,7 +306,6 @@ exports[`list of components sub components with some state rendered in a loop 1`
 exports[`list of components sub components with some state rendered in a loop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p><block-text-0/></p>\`);
@@ -336,7 +320,6 @@ exports[`list of components sub components with some state rendered in a loop 2`
 exports[`list of components switch component position 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -360,7 +343,6 @@ exports[`list of components switch component position 1`] = `
 exports[`list of components switch component position 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -375,7 +357,6 @@ exports[`list of components switch component position 2`] = `
 exports[`list of components t-foreach with t-component, and update 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -400,7 +381,6 @@ exports[`list of components t-foreach with t-component, and update 1`] = `
 exports[`list of components t-foreach with t-component, and update 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);

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

@@ -3,7 +3,6 @@
 exports[`t-key t-foreach with t-key switch component position 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -28,7 +27,6 @@ exports[`t-key t-foreach with t-key switch component position 1`] = `
 exports[`t-key t-foreach with t-key switch component position 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -43,7 +41,6 @@ exports[`t-key t-foreach with t-key switch component position 2`] = `
 exports[`t-key t-key on Component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -57,7 +54,6 @@ exports[`t-key t-key on Component 1`] = `
 exports[`t-key t-key on Component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -72,7 +68,6 @@ exports[`t-key t-key on Component 2`] = `
 exports[`t-key t-key on Component as a function 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -89,7 +84,6 @@ exports[`t-key t-key on Component as a function 1`] = `
 exports[`t-key t-key on Component as a function 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -104,7 +98,6 @@ exports[`t-key t-key on Component as a function 2`] = `
 exports[`t-key t-key on multiple Components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   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);
@@ -124,7 +117,6 @@ exports[`t-key t-key on multiple Components 1`] = `
 exports[`t-key t-key on multiple Components 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -139,7 +131,6 @@ exports[`t-key t-key on multiple Components 2`] = `
 exports[`t-key t-key on multiple Components with t-call 1 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const callTemplate_1 = app.getTemplate(\`calledTemplate\`);
@@ -167,7 +158,6 @@ exports[`t-key t-key on multiple Components with t-call 1 1`] = `
 exports[`t-key t-key on multiple Components with t-call 1 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
@@ -181,7 +171,6 @@ exports[`t-key t-key on multiple Components with t-call 1 2`] = `
 exports[`t-key t-key on multiple Components with t-call 1 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -196,7 +185,6 @@ exports[`t-key t-key on multiple Components with t-call 1 3`] = `
 exports[`t-key t-key on multiple Components with t-call 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const callTemplate_1 = app.getTemplate(\`calledTemplate\`);
   
@@ -212,7 +200,6 @@ exports[`t-key t-key on multiple Components with t-call 2 1`] = `
 exports[`t-key t-key on multiple Components with t-call 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   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);
@@ -230,7 +217,6 @@ exports[`t-key t-key on multiple Components with t-call 2 2`] = `
 exports[`t-key t-key on multiple Components with t-call 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);

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

@@ -3,7 +3,6 @@
 exports[`t-model directive .lazy modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -23,7 +22,6 @@ exports[`t-model directive .lazy modifier 1`] = `
 exports[`t-model directive .number modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -43,7 +41,6 @@ exports[`t-model directive .number modifier 1`] = `
 exports[`t-model directive .trim modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -63,7 +60,6 @@ exports[`t-model directive .trim modifier 1`] = `
 exports[`t-model directive basic use, on an input 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -83,7 +79,6 @@ exports[`t-model directive basic use, on an input 1`] = `
 exports[`t-model directive basic use, on an input with bracket expression 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -103,7 +98,6 @@ exports[`t-model directive basic use, on an input with bracket expression 1`] =
 exports[`t-model directive basic use, on another key in component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -123,7 +117,6 @@ exports[`t-model directive basic use, on another key in component 1`] = `
 exports[`t-model directive can also define t-on directive on same event, part 1 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -143,7 +136,6 @@ exports[`t-model directive can also define t-on directive on same event, part 1
 exports[`t-model directive can also define t-on directive on same event, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -173,7 +165,6 @@ exports[`t-model directive can also define t-on directive on same event, part 2
 exports[`t-model directive following a scope protecting directive (e.g. t-set) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, toNumber } = helpers;
   
@@ -195,7 +186,6 @@ exports[`t-model directive following a scope protecting directive (e.g. t-set) 1
 exports[`t-model directive in a t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, toNumber, withKey } = helpers;
   
@@ -223,7 +213,6 @@ exports[`t-model directive in a t-foreach 1`] = `
 exports[`t-model directive in a t-foreach, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, toNumber, withKey } = helpers;
   
@@ -252,7 +241,6 @@ exports[`t-model directive in a t-foreach, part 2 1`] = `
 exports[`t-model directive in a t-foreach, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, toNumber, withKey } = helpers;
   
@@ -281,7 +269,6 @@ exports[`t-model directive in a t-foreach, part 3 1`] = `
 exports[`t-model directive on a select 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -301,7 +288,6 @@ exports[`t-model directive on a select 1`] = `
 exports[`t-model directive on a select, initial state 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -320,7 +306,6 @@ exports[`t-model directive on a select, initial state 1`] = `
 exports[`t-model directive on a sub state key 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -340,7 +325,6 @@ exports[`t-model directive on a sub state key 1`] = `
 exports[`t-model directive on an input type=radio 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -364,7 +348,6 @@ exports[`t-model directive on an input type=radio 1`] = `
 exports[`t-model directive on an input type=radio, with initial value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -387,7 +370,6 @@ exports[`t-model directive on an input type=radio, with initial value 1`] = `
 exports[`t-model directive on an input, type=checkbox 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -412,7 +394,6 @@ exports[`t-model directive on an input, type=checkbox 1`] = `
 exports[`t-model directive on an textarea 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -432,7 +413,6 @@ exports[`t-model directive on an textarea 1`] = `
 exports[`t-model directive t-model on an input with an undefined value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -451,7 +431,6 @@ exports[`t-model directive t-model on an input with an undefined value 1`] = `
 exports[`t-model directive t-model on select with static options 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -473,7 +452,6 @@ exports[`t-model directive t-model on select with static options 1`] = `
 exports[`t-model directive t-model with dynamic values on select options -- 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -498,7 +476,6 @@ exports[`t-model directive t-model with dynamic values on select options -- 2 1`
 exports[`t-model directive t-model with dynamic values on select options -- 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -522,7 +499,6 @@ exports[`t-model directive t-model with dynamic values on select options -- 3 1`
 exports[`t-model directive t-model with dynamic values on select options 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -547,7 +523,6 @@ exports[`t-model directive t-model with dynamic values on select options 1`] = `
 exports[`t-model directive t-model with dynamic values on select options in foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber, prepareList, withKey } = helpers;
   
@@ -578,7 +553,6 @@ exports[`t-model directive t-model with dynamic values on select options in fore
 exports[`t-model directive two inputs in a div alternating with a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
@@ -610,7 +584,6 @@ exports[`t-model directive two inputs in a div alternating with a t-if 1`] = `
 exports[`t-model directive with expression having a changing key 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   

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

@@ -3,7 +3,6 @@
 exports[`t-on t-on expression captured in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   
@@ -34,7 +33,6 @@ exports[`t-on t-on expression captured in t-foreach 1`] = `
 exports[`t-on t-on expression in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -64,7 +62,6 @@ exports[`t-on t-on expression in t-foreach 1`] = `
 exports[`t-on t-on expression in t-foreach with t-set 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
   
@@ -99,7 +96,6 @@ exports[`t-on t-on expression in t-foreach with t-set 1`] = `
 exports[`t-on t-on method call in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, withKey } = helpers;
   
@@ -128,7 +124,6 @@ exports[`t-on t-on method call in t-foreach 1`] = `
 exports[`t-on t-on on component next to t-on on div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { createCatcher } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -148,7 +143,6 @@ exports[`t-on t-on on component next to t-on on div 1`] = `
 exports[`t-on t-on on component next to t-on on div 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button><block-text-0/></button>\`);
@@ -163,7 +157,6 @@ exports[`t-on t-on on component next to t-on on div 2`] = `
 exports[`t-on t-on on components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { createCatcher } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -179,7 +172,6 @@ exports[`t-on t-on on components 1`] = `
 exports[`t-on t-on on components 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button><block-text-0/></button>\`);
@@ -194,7 +186,6 @@ exports[`t-on t-on on components 2`] = `
 exports[`t-on t-on on components and t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, createCatcher, withKey } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -218,7 +209,6 @@ exports[`t-on t-on on components and t-foreach 1`] = `
 exports[`t-on t-on on components and t-foreach 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -233,7 +223,6 @@ exports[`t-on t-on on components and t-foreach 2`] = `
 exports[`t-on t-on on components, variation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { createCatcher } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -252,7 +241,6 @@ exports[`t-on t-on on components, variation 1`] = `
 exports[`t-on t-on on components, variation 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button><block-text-0/></button>\`);
@@ -267,7 +255,6 @@ exports[`t-on t-on on components, variation 2`] = `
 exports[`t-on t-on on components, with 'prevent' modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { createCatcher } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -283,7 +270,6 @@ exports[`t-on t-on on components, with 'prevent' modifier 1`] = `
 exports[`t-on t-on on components, with 'prevent' modifier 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button><block-text-0/></button>\`);
@@ -298,7 +284,6 @@ exports[`t-on t-on on components, with 'prevent' modifier 2`] = `
 exports[`t-on t-on on components, with a handler update 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, createCatcher } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -318,7 +303,6 @@ exports[`t-on t-on on components, with a handler update 1`] = `
 exports[`t-on t-on on components, with a handler update 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -333,7 +317,6 @@ exports[`t-on t-on on components, with a handler update 2`] = `
 exports[`t-on t-on on destroyed components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -352,7 +335,6 @@ exports[`t-on t-on on destroyed components 1`] = `
 exports[`t-on t-on on destroyed components 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-handler-0=\\"click\\"/>\`);
@@ -367,7 +349,6 @@ exports[`t-on t-on on destroyed components 2`] = `
 exports[`t-on t-on on slot, with 'prevent' modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, true, false, true);
@@ -387,7 +368,6 @@ exports[`t-on t-on on slot, with 'prevent' modifier 1`] = `
 exports[`t-on t-on on slot, with 'prevent' modifier 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot, createCatcher } = helpers;
   const catcher1 = createCatcher({\\"click.prevent\\":0});
@@ -402,7 +382,6 @@ exports[`t-on t-on on slot, with 'prevent' modifier 2`] = `
 exports[`t-on t-on on t-set-slots 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, createCatcher, markRaw } = helpers;
   const catcher1 = createCatcher({\\"click\\":0});
@@ -432,7 +411,6 @@ exports[`t-on t-on on t-set-slots 1`] = `
 exports[`t-on t-on on t-set-slots 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
@@ -445,7 +423,6 @@ exports[`t-on t-on on t-set-slots 2`] = `
 exports[`t-on t-on on t-slots 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, true, false, true);
@@ -465,7 +442,6 @@ exports[`t-on t-on on t-slots 1`] = `
 exports[`t-on t-on on t-slots 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot, createCatcher } = helpers;
   const catcher1 = createCatcher({\\"click\\":0});

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

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

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

@@ -3,7 +3,6 @@
 exports[`t-props basic use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, true, false);
   
@@ -19,7 +18,6 @@ exports[`t-props basic use 1`] = `
 exports[`t-props basic use 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -34,7 +32,6 @@ exports[`t-props basic use 2`] = `
 exports[`t-props child receives a copy of the t-props object, not the original 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, true, false);
   
@@ -47,7 +44,6 @@ exports[`t-props child receives a copy of the t-props object, not the original 1
 exports[`t-props child receives a copy of the t-props object, not the original 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);
@@ -61,7 +57,6 @@ exports[`t-props child receives a copy of the t-props object, not the original 2
 exports[`t-props t-props and other props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Comp\`, true, false, true, false);
   
@@ -77,7 +72,6 @@ exports[`t-props t-props and other props 1`] = `
 exports[`t-props t-props and other props 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
@@ -93,7 +87,6 @@ exports[`t-props t-props and other props 2`] = `
 exports[`t-props t-props only 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Comp\`, true, false, true, false);
   
@@ -109,7 +102,6 @@ exports[`t-props t-props only 1`] = `
 exports[`t-props t-props only 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -124,7 +116,6 @@ exports[`t-props t-props only 2`] = `
 exports[`t-props t-props with props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, true, false);
   
@@ -140,7 +131,6 @@ exports[`t-props t-props with props 1`] = `
 exports[`t-props t-props with props 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div/>\`);

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

@@ -3,7 +3,6 @@
 exports[`t-set slot setted value (with t-set) not accessible with t-esc 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, capture, markRaw } = helpers;
   const comp1 = app.createComponent(\`Childcomp\`, true, true, false, true);
@@ -33,7 +32,6 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 1`] = `
 exports[`t-set slot setted value (with t-set) not accessible with t-esc 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -53,7 +51,6 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 2`] = `
 exports[`t-set slots with a t-set with a component in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, isBoundary, withDefault, LazyValue, safeOutput, markRaw } = helpers;
   const comp1 = app.createComponent(\`C\`, true, false, false, true);
@@ -62,7 +59,7 @@ exports[`t-set slots with a t-set with a component in body 1`] = `
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
     const b3 = text(\` in slot \`);
     const b4 = safeOutput(ctx['v']);
     return multi([b3, b4]);
@@ -82,7 +79,6 @@ exports[`t-set slots with a t-set with a component in body 1`] = `
 exports[`t-set slots with a t-set with a component in body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
@@ -97,7 +93,6 @@ exports[`t-set slots with a t-set with a component in body 2`] = `
 exports[`t-set slots with a t-set with a component in body 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -109,7 +104,6 @@ exports[`t-set slots with a t-set with a component in body 3`] = `
 exports[`t-set slots with an t-set with a component in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, isBoundary, withDefault, LazyValue, safeOutput, markRaw } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -120,7 +114,7 @@ exports[`t-set slots with an t-set with a component in body 1`] = `
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
     const b5 = text(\` tea \`);
     const b6 = safeOutput(ctx['v']);
     return multi([b5, b6]);
@@ -142,7 +136,6 @@ exports[`t-set slots with an t-set with a component in body 1`] = `
 exports[`t-set slots with an t-set with a component in body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
@@ -157,7 +150,6 @@ exports[`t-set slots with an t-set with a component in body 2`] = `
 exports[`t-set slots with an t-set with a component in body 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -169,7 +161,6 @@ exports[`t-set slots with an t-set with a component in body 3`] = `
 exports[`t-set slots with an unused t-set with a component in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { capture, isBoundary, withDefault, LazyValue, markRaw } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -178,7 +169,7 @@ exports[`t-set slots with an unused t-set with a component in body 1`] = `
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
     return text(\` in slot \`);
   }
   
@@ -196,7 +187,6 @@ exports[`t-set slots with an unused t-set with a component in body 1`] = `
 exports[`t-set slots with an unused t-set with a component in body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   
@@ -211,7 +201,6 @@ exports[`t-set slots with an unused t-set with a component in body 2`] = `
 exports[`t-set t-set can't alter component even if key in component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -231,7 +220,6 @@ exports[`t-set t-set can't alter component even if key in component 1`] = `
 exports[`t-set t-set can't alter component if key not in component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -251,11 +239,10 @@ exports[`t-set t-set can't alter component if key not in component 1`] = `
 exports[`t-set t-set in t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-child-0/><p><block-text-0/></p></div>\`);
+  let block1 = createBlock(\`<div><p><block-text-0/></p></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -277,7 +264,6 @@ exports[`t-set t-set in t-if 1`] = `
 exports[`t-set t-set not altered by child comp 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   const comp1 = app.createComponent(\`Childcomp\`, true, false, false, true);
@@ -299,7 +285,6 @@ exports[`t-set t-set not altered by child comp 1`] = `
 exports[`t-set t-set not altered by child comp 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -319,11 +304,10 @@ exports[`t-set t-set not altered by child comp 2`] = `
 exports[`t-set t-set outside modified in t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
-  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-child-0/><p><block-text-0/></p></div>\`);
+  let block1 = createBlock(\`<div><p><block-text-0/></p></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -346,7 +330,6 @@ exports[`t-set t-set outside modified in t-if 1`] = `
 exports[`t-set t-set with a component in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -360,7 +343,7 @@ exports[`t-set t-set with a component in body 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
     const b3 = safeOutput(ctx['v']);
     return block1([], [b3]);
   }
@@ -370,7 +353,6 @@ exports[`t-set t-set with a component in body 1`] = `
 exports[`t-set t-set with a component in body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
@@ -382,7 +364,6 @@ exports[`t-set t-set with a component in body 2`] = `
 exports[`t-set t-set with something in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
   
@@ -396,7 +377,7 @@ exports[`t-set t-set with something in body 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
     const b3 = safeOutput(ctx['v']);
     return block1([], [b3]);
   }

tests/components/basics.test.ts

@@ -1,5 +1,12 @@
 import { App, Component, mount, status, toRaw, useState, xml } from "../../src";
-import { elem, makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
+import {
+  elem,
+  makeTestFixture,
+  nextAppError,
+  nextTick,
+  snapshotEverything,
+  useLogLifecycle,
+} from "../helpers";
 import { markup } from "../../src/runtime/utils";
 
 let fixture: HTMLElement;
@@ -208,14 +215,14 @@ describe("basics", () => {
       static template = xml`<div/>`;
     }
     let error: Error;
-    const prom = mount(Test, fixture);
+    const app = new App(Test);
+    const prom = app.mount(fixture);
     await Promise.resolve();
     fixture.remove();
-    try {
-      await prom;
-    } catch (e) {
-      error = e as Error;
-    }
+    prom.catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(
+      "Cannot mount a component on a detached dom node"
+    );
     expect(error!).toBeDefined();
     expect(error!.message).toBe("Cannot mount a component on a detached dom node");
     expect(console.warn).toBeCalledTimes(1);
@@ -1084,4 +1091,25 @@ 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/error_handling.test.ts

@@ -1,4 +1,4 @@
-import { Component, mount, onWillDestroy } from "../../src";
+import { App, Component, mount, onWillDestroy } from "../../src";
 import {
   onError,
   onMounted,
@@ -18,7 +18,9 @@ import {
   nextMicroTick,
   snapshotEverything,
   useLogLifecycle,
+  nextAppError,
 } from "../helpers";
+import { OwlError } from "../../src/runtime/error_handling";
 
 let fixture: HTMLElement;
 
@@ -58,9 +60,10 @@ describe("basics", () => {
     parent.state.flag = true;
 
     parent.render();
-    await nextTick();
+    await expect(nextAppError(parent.__owl__.app)).resolves.toThrow(
+      "An error occured in the owl lifecycle"
+    );
     expect(fixture.innerHTML).toBe("");
-    expect(mockConsoleError).toBeCalledTimes(1);
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 
@@ -70,12 +73,13 @@ describe("basics", () => {
       static template = xml`<SomeMispelledComponent />`;
       static components = { SomeComponent };
     }
+    const app = new App(Parent);
     let error: Error;
-    try {
-      await mount(Parent, fixture);
-    } catch (e) {
-      error = e as Error;
-    }
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(
+      'Cannot find the definition of component "SomeMispelledComponent"'
+    );
+    await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe('Cannot find the definition of component "SomeMispelledComponent"');
     expect(console.error).toBeCalledTimes(0);
@@ -89,12 +93,13 @@ describe("basics", () => {
       static template = xml`<SomeMispelledComponent />`;
       static components = { SomeComponent };
     }
+    const app = new App(Parent, { test: true });
     let error: Error;
-    try {
-      await mount(Parent, fixture, { test: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(
+      'Cannot find the definition of component "SomeMispelledComponent"'
+    );
+    await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe('Cannot find the definition of component "SomeMispelledComponent"');
     expect(console.error).toBeCalledTimes(0);
@@ -108,13 +113,13 @@ describe("basics", () => {
       static template = xml`<SomeComponent />`;
       static components = { SomeComponent: notAComponentConstructor };
     }
+    const app = new App(Parent as typeof Component);
     let error: Error;
-    try {
-      // @ts-expect-error
-      await mount(Parent, fixture);
-    } catch (e) {
-      error = e as Error;
-    }
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(
+      '"SomeComponent" is not a Component. It must inherit from the Component class'
+    );
+    await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
       '"SomeComponent" is not a Component. It must inherit from the Component class'
@@ -155,26 +160,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 App extends Component {
+    class Root extends Component {
       static template = xml`<div><t t-esc="this.will.crash"/></div>`;
     }
 
-    let error: Error;
-    try {
-      await mount(App, fixture);
-    } catch (e) {
-      error = e as 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!).toBeDefined();
+    expect(error!.cause).toBeDefined();
     const regexp =
       /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
-    expect(error!.message).toMatch(regexp);
+    expect(error!.cause.message).toMatch(regexp);
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleError).toBeCalledTimes(0);
   });
 
   test("an error in mounted call will reject the mount promise", async () => {
-    class App extends Component {
+    class Root extends Component {
       static template = xml`<div>abc</div>`;
       setup() {
         onMounted(() => {
@@ -183,21 +188,21 @@ describe("errors and promises", () => {
       }
     }
 
-    let error: Error;
-    try {
-      await mount(App, fixture);
-    } catch (e) {
-      error = e as 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!).toBeDefined();
-    expect(error!.message).toBe("boom");
+    expect(error!.cause).toBeDefined();
+    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 App extends Component {
+    class Root extends Component {
       static template = xml`<div>abc</div>`;
       setup() {
         onMounted(() => {
@@ -206,14 +211,13 @@ describe("errors and promises", () => {
       }
     }
 
-    let error: Error;
-    try {
-      await mount(App, fixture, { test: true });
-    } catch (e) {
-      error = e as 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("error occurred in onMounted");
+    await mountProm;
     expect(error!).toBeDefined();
-    expect(error!.stack).toContain("App.setup");
+    expect(error!.stack).toContain("Root.setup");
     expect(error!.stack).toContain("error_handling.test.ts");
     expect(fixture.innerHTML).toBe("");
     expect(mockConsoleError).toBeCalledTimes(0);
@@ -221,7 +225,7 @@ describe("errors and promises", () => {
   });
 
   test("errors in onWillRender/onRender aren't wrapped more than once", async () => {
-    class App extends Component {
+    class Root extends Component {
       static template = xml`<div>abc</div>`;
       setup() {
         onWillRender(() => {
@@ -233,12 +237,11 @@ describe("errors and promises", () => {
       }
     }
 
-    let error: Error;
-    try {
-      await mount(App, fixture, { test: true });
-    } catch (e) {
-      error = e as 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("error occurred in onWillRender");
+    await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
       `The following error occurred in onWillRender: "boom in onWillRender"`
@@ -264,6 +267,29 @@ 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>`;
@@ -315,21 +341,21 @@ describe("errors and promises", () => {
     class Child extends Component {
       static template = xml`<div><t t-esc="this.will.crash"/></div>`;
     }
-    class App extends Component {
+    class Parent extends Component {
       static template = xml`<div><Child/></div>`;
       static components = { Child };
     }
 
-    let error: Error;
-    try {
-      await mount(App, fixture);
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Parent);
+    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!).toBeDefined();
+    expect(error!.cause).toBeDefined();
     const regexp =
       /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
-    expect(error!.message).toMatch(regexp);
+    expect(error!.cause.message).toMatch(regexp);
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
@@ -339,7 +365,7 @@ describe("errors and promises", () => {
       static template = xml`<div><t t-if="flag" t-esc="this.will.crash"/></div>`;
       flag = false;
       setup() {
-        onError((e) => (error = e));
+        onError(({ cause }) => (error = cause));
       }
     }
 
@@ -366,16 +392,16 @@ describe("errors and promises", () => {
       static components = { Child };
     }
 
-    let error: Error;
-    try {
-      await mount(Parent, fixture);
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Parent);
+    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!).toBeDefined();
+    expect(error!.cause).toBeDefined();
     const regexp =
       /Cannot read properties of undefined \(reading 'y'\)|Cannot read property 'y' of undefined/g;
-    expect(error!.message).toMatch(regexp);
+    expect(error!.cause.message).toMatch(regexp);
     expect(mockConsoleError).toBeCalledTimes(0);
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
@@ -396,13 +422,12 @@ describe("errors and promises", () => {
       }
     }
 
-    try {
-      await mount(Example, fixture, { test: true });
-    } catch (e) {
-      expect((e as Error).message).toBe(
-        `The following error occurred in onMounted: "Error in mounted"`
-      );
-    }
+    const app = new App(Example, { 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: "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);
@@ -419,9 +444,10 @@ describe("errors and promises", () => {
 
     root.state = "boom";
     root.render();
-    await nextTick();
+    await expect(nextAppError(root.__owl__.app)).resolves.toThrow(
+      "error occured in the owl lifecycle"
+    );
     expect(fixture.innerHTML).toBe("");
-    expect(mockConsoleError).toBeCalledTimes(1);
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 });
@@ -471,17 +497,150 @@ describe("can catch errors", () => {
         });
       }
     }
-    let e: Error;
-    try {
-      await mount(Root, fixture, { test: true });
-    } catch (error) {
-      e = error as Error;
-    }
-    expect(e!.message).toBe(
+    const app = new App(Root, { test: true });
+    let error: OwlError;
+    const crashProm = expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
+    await app.mount(fixture).catch((e: Error) => (error = e));
+    await crashProm;
+    expect(error!.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>`;
@@ -1180,8 +1339,8 @@ describe("can catch errors", () => {
     class Catch extends Component {
       static template = xml`<t t-slot="default" />`;
       setup() {
-        onError((error) => {
-          this.props.onError(error);
+        onError(({ cause }) => {
+          this.props.onError(cause);
         });
       }
     }

tests/components/event_handling.test.ts

@@ -171,4 +171,22 @@ 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,8 +17,16 @@ import {
   useChildSubEnv,
   useSubEnv,
   xml,
+  OwlError,
 } from "../../src/index";
-import { elem, logStep, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import {
+  elem,
+  logStep,
+  makeTestFixture,
+  nextAppError,
+  nextTick,
+  snapshotEverything,
+} from "../helpers";
 
 let fixture: HTMLElement;
 
@@ -650,11 +658,12 @@ describe("hooks", () => {
         }
       }
 
-      try {
-        await mount(MyComponent, fixture);
-      } catch (e: any) {
-        expect(e.message).toBe("Intentional error");
-      }
+      let error: OwlError;
+      const app = new App(MyComponent);
+      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!.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/props_validation.test.ts

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

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

@@ -1,5 +1,5 @@
 import { App, Component, mount, onMounted, useState, xml } from "../../src/index";
-import { children, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { children, makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
 
 snapshotEverything();
 let originalconsoleWarn = console.warn;
@@ -204,13 +204,12 @@ describe("slots", () => {
       static components = { Child };
     }
 
-    let error = null;
-    try {
-      await mount(Parent, fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).not.toBeNull();
+    let error: Error;
+    const app = new App(Parent);
+    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!).not.toBeNull();
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 
@@ -1819,4 +1818,102 @@ 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,5 +1,6 @@
-import { Component, mount, onMounted, useState, xml } from "../../src";
-import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { OwlError } from "../../src/runtime/error_handling";
+import { App, Component, mount, onMounted, useState, xml } from "../../src";
+import { makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
 
 snapshotEverything();
 let fixture: HTMLElement;
@@ -342,20 +343,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 ParentWidget extends Component {
+    class Parent extends Component {
       static template = xml`<Child class="'a'"/>`;
       static components = { Child };
     }
-    let error: Error;
-    try {
-      await mount(ParentWidget, fixture);
-    } catch (e) {
-      error = e as Error;
-    }
+    let error: OwlError;
+    const app = new App(Parent);
+    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!).toBeDefined();
+    expect(error!.cause).toBeDefined();
     const regexp =
       /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
-    expect(error!.message).toMatch(regexp);
+    expect(error!.cause.message).toMatch(regexp);
     expect(fixture.innerHTML).toBe("");
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });

tests/components/t_call.test.ts

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

tests/components/t_foreach.test.ts

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

tests/components/t_out.test.ts

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

tests/helpers.ts

@@ -19,6 +19,7 @@ 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;
 
@@ -221,7 +222,7 @@ export async function editInput(input: HTMLInputElement | HTMLTextAreaElement, v
 afterEach(() => {
   if (steps.length) {
     steps.splice(0);
-    throw new Error("Remaining steps! Should be checked by a .toBeLogged() assertion!");
+    throw new OwlError("Remaining steps! Should be checked by a .toBeLogged() assertion!");
   }
 });
 
@@ -260,6 +261,20 @@ 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

@@ -3,7 +3,6 @@
 exports[`Portal Add and remove portals 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, withKey } = helpers;
   const Portal = app.Portal;
@@ -32,7 +31,6 @@ exports[`Portal Add and remove portals 1`] = `
 exports[`Portal Add and remove portals on div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, withKey } = helpers;
   const Portal = app.Portal;
@@ -62,7 +60,6 @@ exports[`Portal Add and remove portals on div 1`] = `
 exports[`Portal Add and remove portals with t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, withKey } = helpers;
   const Portal = app.Portal;
@@ -95,7 +92,6 @@ exports[`Portal Add and remove portals with t-foreach 1`] = `
 exports[`Portal Add and remove portals with t-foreach and destroy 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, withKey } = helpers;
   const Portal = app.Portal;
@@ -128,7 +124,6 @@ exports[`Portal Add and remove portals with t-foreach and destroy 1`] = `
 exports[`Portal Add and remove portals with t-foreach inside div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, withKey } = helpers;
   const Portal = app.Portal;
@@ -160,10 +155,47 @@ 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
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Child2\`, true, false, false, false);
@@ -185,7 +217,6 @@ exports[`Portal Portal composed with t-slot 1`] = `
 exports[`Portal Portal composed with t-slot 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { callSlot } = helpers;
   const Portal = app.Portal;
@@ -204,7 +235,6 @@ exports[`Portal Portal composed with t-slot 2`] = `
 exports[`Portal Portal composed with t-slot 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<div block-handler-0=\\"custom\\"><span id=\\"childSpan\\">child2</span></div>\`);
@@ -219,7 +249,6 @@ exports[`Portal Portal composed with t-slot 3`] = `
 exports[`Portal basic use of portal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(null, false, true, false, false);
@@ -241,7 +270,6 @@ exports[`Portal basic use of portal 1`] = `
 exports[`Portal basic use of portal in dev mode 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(null, false, true, false, false);
@@ -263,7 +291,6 @@ exports[`Portal basic use of portal in dev mode 1`] = `
 exports[`Portal basic use of portal on div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(null, false, true, false, false);
@@ -285,7 +312,6 @@ exports[`Portal basic use of portal on div 1`] = `
 exports[`Portal basic use of portal, variation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(null, false, true, false, false);
@@ -307,7 +333,6 @@ exports[`Portal basic use of portal, variation 1`] = `
 exports[`Portal conditional use of Portal (with sub Component) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -333,7 +358,6 @@ exports[`Portal conditional use of Portal (with sub Component) 1`] = `
 exports[`Portal conditional use of Portal (with sub Component) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<p><block-text-0/></p>\`);
@@ -348,7 +372,6 @@ exports[`Portal conditional use of Portal (with sub Component) 2`] = `
 exports[`Portal conditional use of Portal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(null, false, true, false, false);
@@ -374,7 +397,6 @@ exports[`Portal conditional use of Portal 1`] = `
 exports[`Portal conditional use of Portal with child and div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -391,7 +413,6 @@ exports[`Portal conditional use of Portal with child and div 1`] = `
 exports[`Portal conditional use of Portal with child and div 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, withKey } = helpers;
   const Portal = app.Portal;
@@ -422,7 +443,6 @@ exports[`Portal conditional use of Portal with child and div 2`] = `
 exports[`Portal conditional use of Portal with child and div, variation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   
@@ -442,7 +462,6 @@ exports[`Portal conditional use of Portal with child and div, variation 1`] = `
 exports[`Portal conditional use of Portal with child and div, variation 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { prepareList, capture, withKey } = helpers;
   const Portal = app.Portal;
@@ -474,7 +493,6 @@ exports[`Portal conditional use of Portal with child and div, variation 2`] = `
 exports[`Portal conditional use of Portal with div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(null, false, true, false, false);
@@ -500,7 +518,6 @@ exports[`Portal conditional use of Portal with div 1`] = `
 exports[`Portal lifecycle hooks of portal sub component are properly called 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -525,7 +542,6 @@ exports[`Portal lifecycle hooks of portal sub component are properly called 1`]
 exports[`Portal lifecycle hooks of portal sub component are properly called 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -537,10 +553,47 @@ 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
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(null, false, true, false, false);
@@ -567,7 +620,6 @@ exports[`Portal portal could have dynamically no content 1`] = `
 exports[`Portal portal destroys on crash 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -589,7 +641,6 @@ exports[`Portal portal destroys on crash 1`] = `
 exports[`Portal portal destroys on crash 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -604,7 +655,6 @@ exports[`Portal portal destroys on crash 2`] = `
 exports[`Portal portal with child and props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -626,7 +676,6 @@ exports[`Portal portal with child and props 1`] = `
 exports[`Portal portal with child and props 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -641,7 +690,6 @@ exports[`Portal portal with child and props 2`] = `
 exports[`Portal portal with dynamic body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(null, false, true, false, false);
@@ -671,7 +719,6 @@ exports[`Portal portal with dynamic body 1`] = `
 exports[`Portal portal with many children 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(null, false, true, false, false);
@@ -696,7 +743,6 @@ exports[`Portal portal with many children 1`] = `
 exports[`Portal portal with no content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(null, false, true, false, false);
@@ -721,7 +767,6 @@ exports[`Portal portal with no content 1`] = `
 exports[`Portal portal with only text as content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(null, false, true, false, false);
@@ -742,7 +787,6 @@ exports[`Portal portal with only text as content 1`] = `
 exports[`Portal portal with target not in dom 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(null, false, true, false, false);
@@ -764,7 +808,6 @@ exports[`Portal portal with target not in dom 1`] = `
 exports[`Portal portal's parent's env is not polluted 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -786,7 +829,6 @@ exports[`Portal portal's parent's env is not polluted 1`] = `
 exports[`Portal portal's parent's env is not polluted 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<button>child</button>\`);
@@ -800,7 +842,6 @@ exports[`Portal portal's parent's env is not polluted 2`] = `
 exports[`Portal simple catchError with portal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
   
@@ -821,7 +862,6 @@ exports[`Portal simple catchError with portal 1`] = `
 exports[`Portal simple catchError with portal 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(null, false, true, false, false);
@@ -844,7 +884,6 @@ exports[`Portal simple catchError with portal 2`] = `
 exports[`Portal with target in template (after portal) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(null, false, true, false, false);
@@ -866,7 +905,6 @@ exports[`Portal with target in template (after portal) 1`] = `
 exports[`Portal with target in template (before portal) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(null, false, true, false, false);
@@ -888,7 +926,6 @@ exports[`Portal with target in template (before portal) 1`] = `
 exports[`Portal: Props validation target must be a valid selector 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(null, false, true, false, false);
@@ -910,7 +947,6 @@ exports[`Portal: Props validation target must be a valid selector 1`] = `
 exports[`Portal: Props validation target must be a valid selector 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(null, false, true, false, false);
@@ -932,7 +968,6 @@ exports[`Portal: Props validation target must be a valid selector 2 1`] = `
 exports[`Portal: UI/UX focus is kept across re-renders 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   const Portal = app.Portal;
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -954,7 +989,6 @@ exports[`Portal: UI/UX focus is kept across re-renders 1`] = `
 exports[`Portal: UI/UX focus is kept across re-renders 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   let block1 = createBlock(\`<input id=\\"target-me\\" block-attribute-0=\\"placeholder\\"/>\`);

tests/misc/portal.test.ts

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

tools/release.js

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